/*
 * Hira Panna Official — original shared publisher identity.
 * Loaded after style.css. Homepage result components remain owned by
 * home-original.css; this file owns the shared shell and public inner pages.
 */

:root {
  --site-cobalt: #0b2e79;
  --site-deep: #071d57;
  --site-ruby: #c2185b;
  --site-marigold: #ffd54a;
  --site-marigold-strong: #ffc928;
  --site-cream: #fff8e8;
  --site-sky: #eef5ff;
  --site-white: #ffffff;
  --site-ink: #17233b;
  --site-muted: #52617a;
  --site-line: #9fb3d8;
  --site-green: #087a50;
  --site-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --site-canvas: 1180px;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--site-sans);
}

body.chart-page,
body.info-page {
  --bg: var(--site-sky);
  --bg-deep: #dce8fb;
  --surface: var(--site-white);
  --surface-2: var(--site-cream);
  --surface-3: #e5eefc;
  --line: var(--site-cobalt);
  --line-soft: #b7c8e8;
  --text: var(--site-ink);
  --muted: var(--site-muted);
  --dim: #70809a;
  --cyan: var(--site-cobalt);
  --cyan-soft: #dce8fb;
  --gold: #9a6900;
  --gold-light: #7a4f00;
  --gold-soft: #fff0aa;
  --green: var(--site-green);
  --red: var(--site-ruby);
  --orange: #9a5700;
  color-scheme: light;
  background: var(--site-sky);
  color: var(--site-ink);
}

body.chart-page::before,
body.info-page::before {
  display: none;
}

/* Offline fallback belongs to the same first-party visual system. */
body.offline-page {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  padding: 20px;
  place-items: center;
  background: var(--site-cream);
  color: var(--site-ink);
  color-scheme: light;
}

body.offline-page::before { display: none; }

body.offline-page .offline-shell {
  width: min(520px, 100%);
  padding: clamp(28px, 7vw, 48px);
  border: 2px solid var(--site-deep);
  border-radius: 10px;
  background: var(--site-sky);
  box-shadow: 7px 7px 0 var(--site-marigold);
  text-align: center;
}

body.offline-page .offline-shell img {
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  border: 3px solid var(--site-marigold);
  border-radius: 12px;
  background: var(--site-cream);
}

body.offline-page .offline-shell > span {
  color: var(--site-ruby);
  font-family: var(--site-sans);
  font-size: .75rem;
  font-weight: 950;
  letter-spacing: .1em;
}

body.offline-page .offline-shell h1 {
  margin: 7px 0;
  color: var(--site-cobalt);
  font-family: var(--site-sans);
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 950;
  letter-spacing: -.045em;
}

body.offline-page .offline-shell p {
  margin: 0 auto;
  color: var(--site-muted);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
}

body.offline-page .offline-shell a {
  display: inline-grid;
  min-height: 46px;
  margin-top: 22px;
  padding: 10px 18px;
  place-items: center;
  border: 2px solid var(--site-cobalt);
  border-radius: 6px;
  background: var(--site-marigold);
  color: var(--site-deep);
  font-size: .78rem;
  font-weight: 950;
}

body.offline-page .offline-shell a:hover { background: var(--site-white); }

body.chart-page main,
body.info-page main {
  width: min(var(--site-canvas), calc(100% - 32px));
  min-width: 0;
  margin-inline: auto;
}

body.chart-page main > section,
body.chart-page main > article,
body.info-page main > section,
body.info-page main > article,
body.info-page .information-shell {
  width: 100%;
  max-width: none;
}

/* Shared masthead: the SVG is deliberately used as the rendered brand asset. */
.site-head {
  position: relative;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 440px) minmax(0, 1fr);
  align-items: center;
  width: 100%;
  max-width: none;
  min-height: 116px;
  margin: 0;
  padding: 8px max(16px, calc((100vw - var(--site-canvas)) / 2));
  border: 0;
  border-bottom: 4px solid var(--site-marigold-strong);
  border-radius: 0;
  background: var(--site-sky);
  box-shadow: none;
}

.site-head::before,
.site-head::after {
  display: none;
}

.site-head .brand {
  grid-column: 2;
  display: block;
  width: 100%;
  height: 98px;
  justify-self: center;
  overflow: hidden;
  background: none;
}

.site-head .brand picture {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.site-head .brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-head .head-status {
  grid-column: 3;
  display: grid;
  grid-template-columns: 9px auto;
  justify-self: end;
  gap: 0 9px;
  padding: 8px 11px;
  border: 2px solid var(--site-cobalt);
  border-radius: 8px;
  background: var(--site-cream);
  color: var(--site-ink);
  box-shadow: 3px 3px 0 var(--site-marigold);
  backdrop-filter: none;
}

.site-head .head-status i {
  grid-row: 1 / 3;
  width: 8px;
  height: 8px;
  background: var(--site-green);
  box-shadow: none;
}

.site-head .head-status span {
  color: var(--site-muted);
  font-size: .7rem;
  font-weight: 900;
}

.site-head .head-status strong {
  color: var(--site-green);
  font-size: .82rem;
  font-weight: 900;
}

/* Five-route navigation: desktop rail and mobile fixed dock. */
.site-quick-nav {
  position: relative;
  z-index: 35;
}

.site-quick-nav.is-top {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(var(--site-canvas), calc(100% - 32px));
  margin: 12px auto 16px;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--site-cobalt);
  border-radius: 8px;
  background: var(--site-cream);
  box-shadow: 0 4px 0 rgba(7, 29, 87, .13);
  backdrop-filter: none;
}

.site-quick-nav.is-bottom {
  display: none;
}

.site-quick-link,
.site-quick-nav.is-top .site-quick-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  gap: 8px;
  padding: 7px 9px;
  border: 0;
  border-right: 2px solid #c5d4ed;
  border-radius: 0;
  background: transparent;
  color: var(--site-deep);
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .035em;
  line-height: 1.1;
}

.site-quick-link:last-child,
.site-quick-nav.is-top .site-quick-link:last-child {
  border-right: 0;
}

.site-quick-link b {
  display: grid;
  min-width: 25px;
  height: 25px;
  place-items: center;
  padding-inline: 4px;
  border: 2px solid var(--site-cobalt);
  border-radius: 5px;
  background: var(--site-white);
  color: var(--site-ruby);
  font-family: var(--site-sans);
  font-size: .62rem;
  font-weight: 950;
}

.site-quick-link:hover,
.site-quick-link[aria-current="page"] {
  background: var(--site-cobalt);
  color: var(--site-white);
}

.site-quick-link:hover b,
.site-quick-link[aria-current="page"] b {
  border-color: var(--site-marigold);
  background: var(--site-marigold);
  color: var(--site-deep);
}

/* Shared correction desk and site footer. */
.site-support-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  width: min(var(--site-canvas), calc(100% - 32px));
  margin: 30px auto 22px;
  padding: 22px;
  border: 2px solid var(--site-cobalt);
  border-radius: 10px;
  background: var(--site-cream);
  box-shadow: 5px 5px 0 var(--site-marigold);
  color: var(--site-ink);
}

.site-support-copy > span {
  color: var(--site-ruby);
  font-size: .64rem;
  font-weight: 950;
  letter-spacing: .13em;
}

.site-support-copy strong {
  color: var(--site-deep);
  font-size: 1.12rem;
}

.site-support-copy p {
  color: var(--site-muted);
}

.site-support-email {
  min-height: 58px;
  border: 2px solid var(--site-deep);
  border-radius: 7px;
  background: var(--site-cobalt);
  color: var(--site-white);
}

.site-support-email > b {
  border-radius: 5px;
  background: var(--site-marigold);
  color: var(--site-deep);
}

.site-support-email span strong {
  color: var(--site-white);
}

.site-support-email span small {
  max-width: 240px;
  overflow-wrap: anywhere;
  color: #dce8ff;
}

body[class] > footer {
  width: 100%;
  max-width: none;
  margin: 34px 0 0;
  padding: 30px max(16px, calc((100vw - var(--site-canvas)) / 2)) 38px;
  border: 0;
  border-top: 5px solid var(--site-marigold-strong);
  border-radius: 0;
  background: var(--site-deep);
  color: #d9e4f7;
  text-align: center;
}

.footer-mark {
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  border: 2px solid var(--site-marigold);
  border-radius: 8px;
  background: var(--site-cream);
}

body[class] > footer > strong {
  color: var(--site-white);
  font-size: .86rem;
  font-weight: 950;
  letter-spacing: .14em;
}

body[class] > footer > p {
  color: #c1cee4;
}

body[class] > footer a,
.footer-links a {
  color: var(--site-cream);
}

body[class] > footer a:hover,
.footer-links a:hover {
  color: var(--site-marigold);
}

body[class] > footer > p:last-child a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.footer-links {
  gap: 8px 10px;
}

.footer-links a {
  min-height: 36px;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 5px;
  font-size: .7rem;
  font-weight: 800;
}

/* Inner-page breadcrumbs. */
.chart-page .breadcrumbs,
.info-page .breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
  padding: 9px 12px;
  border: 2px solid var(--site-line);
  border-radius: 6px;
  background: var(--site-white);
  color: var(--site-muted);
  font-size: .72rem;
  font-weight: 750;
}

.chart-page .breadcrumbs a,
.info-page .breadcrumbs a {
  color: var(--site-cobalt);
  font-weight: 900;
}

.chart-page .breadcrumbs span[aria-current="page"],
.info-page .breadcrumbs span[aria-current="page"] {
  color: var(--site-ink);
}

/* Information and legal pages: a flat, light publication dossier. */
.info-page .information-hero {
  position: relative;
  padding: clamp(34px, 6vw, 72px);
  overflow: hidden;
  border: 2px solid var(--site-cobalt);
  border-radius: 10px;
  background: var(--site-cream);
  box-shadow: 8px 8px 0 #d8e4f7;
}

.info-page .information-hero::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--site-ruby);
  content: "";
}

.info-page .section-code,
.info-page .information-hero > span {
  color: var(--site-ruby);
  font-family: var(--site-sans);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .14em;
}

.info-page .information-hero h1 {
  max-width: 940px;
  color: var(--site-deep);
  font-family: var(--site-sans);
  font-size: clamp(2.1rem, 6vw, 4.8rem);
  font-weight: 950;
  letter-spacing: -.05em;
  line-height: .98;
}

.info-page .information-hero p {
  max-width: 820px;
  color: var(--site-ink);
  font-size: clamp(.96rem, 2vw, 1.1rem);
}

.info-page .information-grid {
  margin-top: 22px;
  overflow: hidden;
  border: 2px solid var(--site-cobalt);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--site-white);
}

.info-page .information-grid section {
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  padding: 24px;
  border-bottom: 2px solid var(--site-cobalt);
  background: var(--site-white);
}

.info-page .information-grid section:nth-child(even) {
  background: var(--site-sky);
}

.info-page .information-grid section > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 2px solid var(--site-cobalt);
  border-radius: 6px;
  background: var(--site-marigold);
  color: var(--site-deep);
  font-family: var(--site-sans);
  font-weight: 950;
}

.info-page .information-grid h2 {
  color: var(--site-deep);
  font-size: 1.16rem;
  font-weight: 900;
}

.info-page .information-grid p {
  color: var(--site-muted);
}

.info-page .information-contact {
  min-height: 80px;
  border: 2px solid var(--site-deep);
  border-radius: 8px;
  background: var(--site-marigold);
  color: var(--site-deep);
}

.info-page .information-contact span {
  color: var(--site-ruby);
  font-weight: 950;
}

.info-page .information-contact a {
  min-height: 42px;
  padding: 11px 13px;
  border: 2px solid var(--site-deep);
  border-radius: 6px;
  background: var(--site-cream);
  color: var(--site-cobalt);
}

/* Shared share controls on public inner pages. */
.chart-page .share-panel,
.info-page .share-panel {
  border: 2px solid var(--site-line);
  border-radius: 8px;
  background: var(--site-white);
  color: var(--site-ink);
}

.chart-page .share-panel header p,
.info-page .share-panel header p {
  color: var(--site-muted);
}

.chart-page .share-action,
.info-page .share-action {
  min-height: 44px;
  border: 2px solid var(--site-cobalt);
  border-radius: 6px;
  background: var(--site-cream);
  color: var(--site-deep);
}

.chart-page .share-action b,
.info-page .share-action b {
  color: var(--site-ruby);
}

.chart-page .share-action:hover,
.info-page .share-action:hover {
  border-color: var(--site-ruby);
  background: var(--site-ruby);
  color: var(--site-white);
}

.chart-page .share-action:hover b,
.info-page .share-action:hover b {
  color: var(--site-marigold);
}

.chart-page .share-feedback,
.info-page .share-feedback {
  color: var(--site-green);
}

/* Chart header and live/current status. */
.chart-page .current-market-status {
  overflow: hidden;
  border: 2px solid var(--site-cobalt);
  border-radius: 8px;
  background: var(--site-white);
  color: var(--site-ink);
}

.chart-page .current-market-status > header {
  border-bottom: 2px solid var(--site-cobalt);
  background: var(--site-sky);
}

.chart-page .current-market-status > header h2 {
  color: var(--site-deep);
  font-weight: 950;
}

.chart-page .current-state-pill {
  color: var(--site-green);
}

.chart-page .current-state-pill i {
  background: var(--site-green);
  box-shadow: none;
}

.chart-page .current-status-refresh {
  min-height: 40px;
  border: 2px solid var(--site-cobalt);
  border-radius: 6px;
  background: var(--site-cream);
  color: var(--site-cobalt);
}

.chart-page .current-live-list article {
  border-right: 2px solid #c9d7ed;
  border-bottom: 2px solid #c9d7ed;
  background: var(--site-white);
}

.chart-page .current-live-list article span {
  color: var(--site-muted);
}

.chart-page .current-live-list article strong {
  color: var(--site-cobalt);
}

.chart-page .current-live-list article strong.pending {
  color: #9a5700;
}

.chart-page .current-live-news {
  color: var(--site-ruby);
  font-weight: 800;
}

.chart-page .chart-heading {
  margin-top: 14px;
  padding: clamp(28px, 5vw, 54px) 22px;
  border: 2px solid var(--site-deep);
  border-radius: 10px;
  background: var(--site-cobalt);
  box-shadow: 7px 7px 0 var(--site-marigold);
  text-align: center;
}

.chart-page .chart-heading h1 {
  color: var(--site-white);
  font-family: var(--site-sans);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 950;
  letter-spacing: -.045em;
  line-height: 1;
}

.chart-page .chart-heading p {
  margin-top: 11px;
  color: var(--site-marigold);
  font-family: var(--site-sans);
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .12em;
}

.chart-page .chart-current-card {
  border: 2px solid #c08a00;
  border-radius: 8px;
  background: var(--site-cream);
  color: var(--site-ink);
}

.chart-page .chart-current-card > header {
  color: var(--site-muted);
}

.chart-page .chart-current-core h2 {
  color: var(--site-deep);
  font-weight: 950;
}

.chart-page .chart-current-value {
  color: var(--site-ruby);
  font-variant-numeric: tabular-nums;
  text-shadow: none;
}

.chart-page .chart-current-value.pending {
  color: var(--site-muted);
}

.chart-page .chart-current-card .status {
  color: var(--site-green);
}

.chart-page .chart-actions a {
  min-height: 44px;
  border: 2px solid var(--site-cobalt);
  border-radius: 6px;
  background: var(--site-white);
  color: var(--site-cobalt);
}

.chart-page .chart-actions a.active,
.chart-page .chart-actions a:hover {
  border-color: var(--site-deep);
  background: var(--site-cobalt);
  color: var(--site-white);
}

/* Year/archive controls. */
.chart-page .chart-year-nav {
  gap: 8px;
  margin-top: 16px;
}

.chart-page .chart-year-nav a {
  min-height: 42px;
  padding: 10px 12px;
  border: 2px solid var(--site-cobalt);
  border-radius: 6px;
  background: var(--site-white);
  color: var(--site-cobalt);
  font-family: var(--site-sans);
  font-size: .64rem;
  font-weight: 950;
}

.chart-page .chart-year-nav a.active,
.chart-page .chart-year-nav a:hover {
  border-color: var(--site-deep);
  background: var(--site-marigold);
  color: var(--site-deep);
}

.chart-page .chart-archive-banner {
  border: 2px solid var(--site-deep);
  border-radius: 7px;
  background: var(--site-marigold);
  color: var(--site-deep);
}

.chart-page .chart-archive-banner span {
  color: var(--site-ruby);
  font-weight: 950;
}

.chart-page .chart-archive-banner a {
  min-height: 40px;
  padding: 10px 12px;
  border: 2px solid var(--site-deep);
  border-radius: 5px;
  background: var(--site-cream);
  color: var(--site-cobalt);
}

.chart-page .chart-record-section {
  min-width: 0;
}

.chart-page .chart-meta {
  border: 2px solid var(--site-deep);
  border-radius: 7px 7px 0 0;
  background: var(--site-cobalt);
}

.chart-page .chart-meta span,
.chart-page .chart-meta a {
  border-right: 2px solid rgba(255, 255, 255, .24);
  color: #e8effc;
}

.chart-page .chart-meta b {
  color: var(--site-marigold);
}

.chart-page .chart-meta a {
  color: var(--site-white);
}

/* Compact weekly matrix: the familiar date + weekday chart grammar, rebuilt
   in the HPOfficial visual system and sized to the viewport without panning. */
.chart-page .table-wrap {
  max-width: 100%;
  overflow: visible;
  overscroll-behavior-inline: auto;
  background: var(--site-white);
}

.chart-page .weekly-chart-stack {
  border: 2px solid var(--site-deep);
  border-top: 0;
}

.chart-page .weekly-record-table {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--site-white);
  color: var(--site-ink);
  font-family: var(--site-sans);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.chart-page .weekly-record-table col.week-col { width: 12%; }
.chart-page .panel-record-table { min-width: 0; }

.chart-page .weekly-record-table th,
.chart-page .weekly-record-table td {
  border: 1px solid #7991bd;
}

.chart-page .weekly-record-table thead th {
  border-color: #9fb3d8;
  background: var(--site-deep);
  color: var(--site-white);
  font-weight: 950;
  letter-spacing: .045em;
}

.chart-page .weekly-record-table thead th.is-off-day {
  background: #3f1740;
  color: #fff1a8;
}

.chart-page .weekly-record-table tbody th {
  background: var(--site-sky);
  color: var(--site-deep);
  font-weight: 900;
}

.chart-page .weekly-record-table tbody th small {
  color: var(--site-muted);
}

.chart-page .weekly-record-table tbody th b {
  color: var(--site-ruby);
}

.chart-page .jodi-value-cell,
.chart-page .panna-cell,
.chart-page .panel-jodi-cell {
  background: var(--site-white);
  color: var(--site-ink);
}

.chart-page .panna-cell > span { display: block; }

.chart-page .jodi-value-cell strong,
.chart-page .panel-jodi-cell strong,
.chart-page .panel-jodi-value {
  color: var(--site-cobalt);
  font-weight: 950;
}

.chart-page .panel-day-cell {
  padding: 2px;
  background: var(--site-white);
  color: var(--site-ink);
  text-align: center;
}

.chart-page .panel-cell-core {
  display: grid;
  grid-template-columns: minmax(0, .72fr) auto minmax(0, .72fr);
  min-width: 0;
  min-height: 50px;
  align-items: center;
  gap: clamp(1px, .32vw, 5px);
}

.chart-page .panel-panna {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  min-width: 0;
  color: var(--site-ink);
  font-size: clamp(.68rem, 1.05vw, .95rem);
  font-weight: 900;
  line-height: .92;
}

.chart-page .panel-panna > span { display: block; }

.chart-page .panel-jodi-value {
  display: block;
  min-width: 0;
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  line-height: 1;
}

.chart-page .panel-field-headings th {
  background: var(--site-cobalt) !important;
  color: var(--site-marigold) !important;
}

.chart-page .weekly-record-table .state-pending {
  background: #fff4bf;
  color: #8a5200;
}

.chart-page .weekly-record-table .state-upcoming,
.chart-page .weekly-record-table .state-empty {
  background: #f4f7fc;
  color: #71809a;
}

.chart-page .weekly-record-table .state-closed,
.chart-page .weekly-record-table .chart-holiday {
  background: #ffe7ef;
  color: var(--site-ruby);
}

.chart-page .weekly-record-table .is-red-jodi,
.chart-page .weekly-record-table .is-red-jodi strong {
  color: var(--site-ruby);
}

.chart-page .panel-day-cell.is-red-jodi .panel-panna,
.chart-page .panel-day-cell.is-red-jodi .panel-jodi-value,
.chart-page .panel-day-cell.chart-holiday .panel-panna,
.chart-page .panel-day-cell.chart-holiday .panel-jodi-value,
.chart-page .panel-day-cell.state-closed .panel-panna,
.chart-page .panel-day-cell.state-closed .panel-jodi-value {
  color: var(--site-ruby);
}

.chart-page .panel-day-cell.state-upcoming .panel-panna,
.chart-page .panel-day-cell.state-upcoming .panel-jodi-value,
.chart-page .panel-day-cell.state-empty .panel-panna,
.chart-page .panel-day-cell.state-empty .panel-jodi-value {
  color: #71809a;
}

.chart-page .weekly-record-table .is-latest-week > * {
  border-bottom: 3px solid var(--site-green);
}

.chart-page .history-jump a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 8px 11px;
  border: 2px solid var(--site-cobalt);
  border-radius: 5px;
  background: var(--site-white);
  color: var(--site-cobalt);
}

/* Off-days means saved-result recency, not the market's weekly closed dates. */
.chart-page .off-days-records {
  margin-top: 14px;
  overflow: hidden;
  border: 2px solid var(--site-deep);
  border-radius: 8px;
  background: var(--site-sky);
}

.chart-page .off-days-records > header {
  padding: 11px 14px;
  border-bottom: 4px solid var(--site-marigold);
  background: var(--site-deep);
  color: var(--site-white);
  text-align: center;
}
.chart-page .off-days-records > header span { color: var(--site-marigold); font-size: .56rem; font-weight: 950; letter-spacing: .12em; }
.chart-page .off-days-records > header h2 { margin: 2px 0 3px; color: var(--site-white); font-size: 1.1rem; font-weight: 950; }
.chart-page .off-days-records > header p { margin: 0; color: #d8e3fa; font-size: .68rem; font-weight: 700; }
.chart-page .off-days-board { margin: 9px; padding: 9px; border: 1px solid #b9963c; border-radius: 7px; background: #fff9dc; }
.chart-page .off-days-board h3 { margin: 0 0 7px; color: var(--site-deep); font-size: .86rem; font-weight: 950; text-align: center; }
.chart-page .off-days-board h3 small { display: inline-block; margin-left: 5px; padding: 2px 6px; border-radius: 999px; background: var(--site-deep); color: var(--site-white); font-size: .55rem; }
.chart-page .off-days-stage-grid,
.chart-page .off-days-derived-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.chart-page .off-days-stage-grid article { min-width: 0; padding: 6px; border: 1px solid #d7bd73; border-radius: 6px; background: #fff; }
.chart-page .off-days-stage-grid h4 { margin: 0 0 5px; color: var(--site-ruby); font-size: .7rem; text-align: center; }
.chart-page .off-days-stage-grid h4 small { display: inline-block; margin-left: 3px; color: var(--site-muted); font-size: .52rem; }
.chart-page .off-days-digit-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.chart-page .off-days-number-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.chart-page .off-days-item { display: flex; min-width: 0; min-height: 43px; align-items: center; justify-content: center; flex-direction: column; padding: 4px 2px; border: 1px solid #d7bd73; border-radius: 5px; background: var(--site-white); color: var(--site-ink); text-align: center; font-variant-numeric: tabular-nums; }
.chart-page .off-days-item b { color: var(--site-ruby); font-size: .85rem; font-weight: 950; line-height: 1; }
.chart-page .off-days-item small { margin-top: 3px; overflow-wrap: anywhere; color: var(--site-muted); font-size: .48rem; font-weight: 850; line-height: 1.1; }
.chart-page .off-days-item.is-running { border-color: #087a50; background: #dcfce7; box-shadow: inset 0 0 0 1px #087a50; }
.chart-page .off-days-item.is-running b,
.chart-page .off-days-item.is-running small { color: #075f40; }
.chart-page .off-days-item.is-no-record { background: #f2f4f8; }
.chart-page .off-days-item.is-no-record b,
.chart-page .off-days-item.is-no-record small { color: #79859a; }
.chart-page .off-days-board > p { margin: 7px 0 0; color: var(--site-muted); font-size: .58rem; font-weight: 700; text-align: center; }
.chart-page .weekday-off-days-link { display: flex; width: max-content; max-width: 100%; min-height: 38px; align-items: center; justify-content: center; margin: 9px auto 0; padding: 7px 11px; border: 2px solid var(--site-deep); border-radius: 5px; background: var(--site-cobalt); color: var(--site-white); font-size: .62rem; font-weight: 950; text-align: center; }
.chart-page .weekday-off-days-link:hover { background: var(--site-ruby); color: var(--site-white); }
.chart-page .off-days-derived-grid { margin: 9px; }
.chart-page .off-days-derived-grid .off-days-board { margin: 0; }

/* Chart explanation, key, and all-market directory. */
.chart-page .chart-about {
  border: 2px solid var(--site-cobalt);
  border-radius: 8px;
  background: var(--site-cream);
  color: var(--site-ink);
}

.chart-page .chart-about h2,
.chart-page .board-title h2 {
  color: var(--site-deep);
  font-weight: 950;
}

.chart-page .chart-about p {
  color: var(--site-muted);
}

.chart-page .chart-about a {
  color: var(--site-cobalt);
  font-weight: 850;
  text-decoration-thickness: 2px;
}

.chart-page .chart-facts { margin-top: 12px; padding: 10px; }
.chart-page .chart-facts > h2 { margin: 0 0 8px; font-size: .95rem; text-align: center; }
.chart-page .chart-fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: stretch; gap: 5px; }
.chart-page .chart-fact-grid > span { display: grid; min-height: 44px; place-content: center; padding: 5px; border: 1px solid var(--site-soft-line); border-radius: 5px; background: var(--site-white); text-align: center; }
.chart-page .chart-fact-grid small { color: var(--site-ruby); font-size: .48rem; font-weight: 950; letter-spacing: .06em; }
.chart-page .chart-fact-grid b { margin-top: 2px; color: var(--site-deep); font-size: .62rem; }
.chart-page .chart-fact-grid > a { display: grid; min-height: 44px; place-items: center; padding: 5px 9px; border: 2px solid var(--site-cobalt); border-radius: 5px; background: var(--site-cobalt); color: var(--site-white); font-size: .58rem; text-align: center; }
.chart-page .chart-fact-grid > a:hover { background: var(--site-ruby); color: var(--site-white); }

.chart-page .chart-key span {
  border: 2px solid var(--site-line);
  border-radius: 5px;
  background: var(--site-white);
  color: var(--site-muted);
}

.chart-page .chart-key b {
  color: var(--site-ruby);
}

.chart-page .chart-correction {
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 0;
  border-left: 6px solid var(--site-ruby);
  background: var(--site-marigold);
  color: var(--site-deep) !important;
  font-size: .65rem;
}

.chart-page .chart-directory {
  margin-top: 14px;
  overflow: hidden;
  border: 2px solid var(--site-deep);
  border-radius: 8px;
  background: var(--site-white);
  color: var(--site-ink);
  text-align: center;
}

.chart-page .chart-directory > h2 {
  margin: 0;
  padding: 9px 10px;
  border-bottom: 3px solid var(--site-marigold);
  background: var(--site-deep);
  color: var(--site-white);
  font-size: 1rem;
  letter-spacing: .06em;
}

.chart-page .chart-directory section { padding: 8px 9px; }
.chart-page .chart-directory section + section { border-top: 1px solid var(--site-soft-line); }
.chart-page .chart-directory h3 { margin: 0 0 5px; color: var(--site-ruby); font-size: .7rem; letter-spacing: .08em; }
.chart-page .chart-directory section > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px 6px; font-size: .72rem; line-height: 1.45; }
.chart-page .chart-directory section span { color: #9aa8bf; }
.chart-page .chart-directory section a { color: var(--site-cobalt); font-weight: 850; text-decoration: underline; text-decoration-color: #9eb0d1; text-underline-offset: 2px; }
.chart-page .chart-directory section a:hover { color: var(--site-ruby); text-decoration-color: currentColor; }
.chart-page .chart-directory footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; padding: 8px; border-top: 1px solid var(--site-soft-line); background: var(--site-sky); }
.chart-page .chart-directory footer span { color: var(--site-muted); font-size: .58rem; font-weight: 900; letter-spacing: .08em; }
.chart-page .chart-directory footer a { padding: 4px 8px; border: 1px solid var(--site-cobalt); border-radius: 999px; background: var(--site-white); color: var(--site-cobalt); font-size: .62rem; font-weight: 900; }

/* A clear focus treatment across the branded shell and public pages. */
.site-head :where(a, button):focus-visible,
.site-quick-nav :where(a, button):focus-visible,
.site-support-card :where(a, button):focus-visible,
body[class] > footer :where(a, button):focus-visible,
.chart-page :where(a, button, input, select, textarea):focus-visible,
.info-page :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--site-ruby);
  outline-offset: 3px;
}

/* Preserve the traditional matrix at every width. Panel days use one table
   column each, with the 3–2–3 result composed inside that cell. */
@media (max-width: 1220px) {
  .chart-page .table-wrap,
  .chart-page .weekly-chart-stack {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    overscroll-behavior-inline: auto;
  }

  .chart-page .weekly-record-table {
    display: table;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    table-layout: fixed;
  }

  .chart-page .weekly-record-table col.week-col { width: 88px; }

  .chart-page .weekly-record-table colgroup { display: table-column-group; }
  .chart-page .weekly-record-table thead { display: table-header-group; }
  .chart-page .weekly-record-table tbody { display: table-row-group; }
  .chart-page .weekly-record-table tr { display: table-row; }

  .chart-page .weekly-record-table th,
  .chart-page .weekly-record-table td {
    display: table-cell;
    min-width: 0;
    overflow: hidden;
    text-align: center;
  }

  .chart-page .weekly-record-table thead th {
    height: 28px;
    padding: 5px 1px;
    font-size: clamp(.6rem, 1vw, .7rem);
    line-height: 1;
  }

  .chart-page .weekly-record-table tbody th {
    width: auto;
    height: 52px;
    padding: 3px 1px;
    font-size: clamp(.55rem, .9vw, .68rem);
    line-height: 1.08;
  }

  .chart-page .weekly-record-table tbody th time,
  .chart-page .weekly-record-table tbody th small,
  .chart-page .weekly-record-table tbody th b {
    display: block;
  }

  .chart-page .weekly-record-table tbody th b {
    margin-top: 2px;
    font-size: .52rem;
  }

  .chart-page .jodi-value-cell {
    height: 52px;
    padding: 2px 1px;
  }

  .chart-page .jodi-value-cell strong {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1;
  }

  .chart-page .panel-day-cell {
    height: 52px;
    padding: 1px;
  }

  .chart-page .panel-cell-core { min-height: 49px; }
}

@media (min-width: 480px) and (max-width: 767px) {
  .chart-page .weekly-record-table col.week-col { width: 60px; }

  .chart-page .weekly-record-table thead th {
    height: 30px;
    font-size: .64rem;
  }

  .chart-page .weekly-record-table tbody th,
  .chart-page .jodi-value-cell,
  .chart-page .panel-day-cell {
    height: 48px;
  }

  .chart-page .weekly-record-table tbody th { font-size: .56rem; }
  .chart-page .jodi-value-cell strong { font-size: 1.1rem; }
  .chart-page .panel-cell-core { min-height: 45px; }
  .chart-page .panel-panna { font-size: .58rem; }
  .chart-page .panel-jodi-value { font-size: 1rem; }
}

@media (max-width: 479px) {
  .chart-page .weekly-record-table col.week-col { width: 44px; }

  .chart-page .weekly-record-table thead th {
    height: 28px;
    padding: 4px 0;
    font-size: .56rem;
    letter-spacing: .01em;
  }

  .chart-page .weekly-record-table tbody th,
  .chart-page .jodi-value-cell,
  .chart-page .panel-day-cell {
    height: 44px;
  }

  .chart-page .weekly-record-table tbody th {
    padding: 2px 0;
    font-size: .5rem;
  }

  .chart-page .weekly-record-table tbody th b {
    margin-top: 1px;
    font-size: .43rem;
  }

  .chart-page .jodi-value-cell { padding: 1px 0; }
  .chart-page .jodi-value-cell strong { font-size: 1rem; }

  .chart-page .panel-day-cell { padding: 0 1px; }

  .chart-page .panel-cell-core {
    grid-template-columns: minmax(7px, .8fr) minmax(18px, 2fr) minmax(7px, .8fr);
    min-height: 41px;
    gap: 0;
  }

  .chart-page .panel-panna {
    font-size: .5rem;
    line-height: .95;
  }

  .chart-page .panel-jodi-value { font-size: .88rem; }

  .chart-page .off-days-records { margin-top: 7px; border-radius: 5px; }
  .chart-page .off-days-records > header { padding: 8px 6px; }
  .chart-page .off-days-records > header h2 { font-size: .9rem; }
  .chart-page .off-days-records > header p { font-size: .57rem; }
  .chart-page .off-days-board { margin: 5px; padding: 6px; }
  .chart-page .off-days-stage-grid { gap: 4px; }
  .chart-page .off-days-stage-grid article { padding: 4px 3px; }
  .chart-page .off-days-stage-grid h4 small { display: block; margin: 2px 0 0; }
  .chart-page .off-days-stage-grid .off-days-digit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
  .chart-page .off-days-number-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .chart-page .off-days-item { min-height: 42px; padding: 4px 1px; }
  .chart-page .off-days-item b { font-size: .78rem; }
  .chart-page .off-days-item small { font-size: .46rem; }
  .chart-page .off-days-derived-grid { grid-template-columns: 1fr; margin: 5px; gap: 5px; }
  .chart-page .chart-facts { margin-top: 7px; padding: 6px; }
  .chart-page .chart-fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-page .chart-fact-grid > a { grid-column: 1 / -1; }
  .chart-page .chart-correction { padding: 7px; font-size: .58rem; }
  .chart-page .chart-directory section { padding: 7px 6px; }
  .chart-page .chart-directory section > div { gap: 3px 5px; font-size: .68rem; }
}

@media (min-width: 701px) and (max-width: 760px) {
  body {
    padding-bottom: 0;
  }

  .site-quick-nav.is-top {
    display: grid;
  }

  .site-quick-nav.is-bottom {
    display: none;
  }
}

@media (max-width: 700px) {
  html {
    scroll-padding-top: 12px;
  }

  body {
    padding-bottom: 0;
  }

  body.home-page.home-page {
    padding-bottom: 0 !important;
  }

  .site-head {
    grid-template-columns: minmax(0, 1fr);
    min-height: 94px;
    padding: 5px 10px;
    border-bottom-width: 3px;
  }

  .site-head .brand {
    grid-column: 1;
    width: min(340px, 92vw);
    height: 82px;
  }

  .site-head .head-status {
    display: none;
  }

  .site-quick-nav.is-top,
  body.home-page.home-page .site-quick-nav.is-top {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: calc(100% - 10px);
    margin: 5px auto 7px;
    border: 2px solid var(--site-deep);
    border-radius: 7px;
    box-shadow: 3px 3px 0 rgba(7, 29, 87, .16);
  }

  .site-quick-nav.is-bottom,
  body.home-page.home-page .site-quick-nav.is-bottom {
    display: none !important;
  }

  .site-quick-nav.is-top .site-quick-link {
    flex-direction: column;
    min-height: 64px;
    gap: 2px;
    padding: 4px 2px;
    border: 0;
    border-right: 1px solid var(--site-line);
    border-radius: 0;
    color: var(--site-deep);
    font-size: .75rem;
    letter-spacing: 0;
    line-height: 1.05;
    text-align: center;
  }

  .site-quick-nav.is-top .site-quick-link:last-child {
    border-right: 0;
  }

  .site-quick-nav.is-top .site-quick-link b {
    min-width: 21px;
    height: 21px;
    border-width: 1px;
    font-size: .6rem;
  }

  .site-quick-nav.is-top .site-quick-link:hover,
  .site-quick-nav.is-top .site-quick-link[aria-current="page"] {
    background: var(--site-cobalt);
    color: var(--site-white);
  }

  .site-support-card {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 16px);
    gap: 14px;
    padding: 16px;
    box-shadow: 3px 3px 0 var(--site-marigold);
  }

  .site-support-email {
    width: 100%;
  }

  body[class] > footer {
    padding-inline: 12px;
  }

  .footer-links a {
    min-height: 42px;
    padding: 11px 9px;
    font-size: .75rem;
  }

  body.chart-page main,
  body.info-page main {
    width: calc(100% - 16px);
  }

  .chart-page .breadcrumbs,
  .info-page .breadcrumbs {
    margin-block: 10px;
  }

  .info-page .information-hero {
    padding: 30px 18px 30px 24px;
    box-shadow: 4px 4px 0 #d8e4f7;
  }

  .info-page .information-grid section {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 18px 12px;
  }

  .info-page .information-grid section > span {
    width: 34px;
    height: 34px;
  }

  .info-page .information-contact {
    align-items: stretch;
  }

  .info-page .information-contact a {
    width: 100%;
    text-align: center;
  }

  .chart-page .current-market-status > header,
  .chart-page .share-panel > header,
  .chart-page .chart-archive-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .chart-page .chart-heading {
    padding: 28px 10px;
    box-shadow: 4px 4px 0 var(--site-marigold);
  }

  .chart-page .chart-current-card {
    padding: 14px;
  }

  .chart-page .share-actions,
  .info-page .share-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chart-page .chart-year-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
    gap: 6px;
    padding: 1px;
    overflow: visible;
    overscroll-behavior-inline: auto;
  }

  .chart-page .chart-year-nav a {
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  .chart-page .chart-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    overscroll-behavior-inline: auto;
  }

  .chart-page .chart-meta span,
  .chart-page .chart-meta a {
    justify-content: center;
    min-width: 0;
    margin-left: 0;
    border-right: 1px solid rgba(255, 255, 255, .24);
    border-bottom: 1px solid rgba(255, 255, 255, .24);
    font-size: .75rem;
    text-align: center;
  }

  .chart-page .chart-about {
    padding: 18px 14px;
  }

  .chart-page .chart-link-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Keep supporting chart labels readable without widening the viewport. */
  .chart-page .breadcrumbs,
  .chart-page .chart-heading p,
  .chart-page .chart-year-nav a,
  .chart-page .share-panel h2,
  .chart-page .share-panel header p,
  .chart-page .share-action,
  .chart-page .chart-key span,
  .chart-page .chart-link-grid strong,
  .chart-page .current-live-news,
  .chart-page .current-market-status > header h2,
  .chart-page .status-orb,
  .chart-page .market-state,
  .chart-page .status,
  .chart-page .chart-current-card > header,
  .chart-page .history-jump a,
  .chart-page .current-live-list article span,
  body.chart-page .site-support-copy > span,
  body.chart-page .site-support-email span strong,
  body.chart-page .site-support-email span small {
    font-size: .75rem;
  }
}

@media (max-width: 350px) {
  .site-head .brand {
    width: min(300px, 94vw);
  }

  .site-quick-nav.is-top .site-quick-link {
    font-size: .7rem;
  }

  .site-quick-nav.is-top .site-quick-link b {
    min-width: 19px;
    height: 19px;
    font-size: .54rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .site-head .brand {
    background: none;
  }

  .site-head .brand picture {
    opacity: 1;
  }
}

@media print {
  body.chart-page,
  body.info-page {
    padding: 0;
    background: #fff;
    color: #000;
  }

  .site-head,
  .site-quick-nav,
  .site-support-card,
  body[class] > footer,
  .chart-page .share-panel,
  .chart-page .current-market-status,
  .chart-page .chart-current-card,
  .chart-page .chart-year-nav,
  .chart-page .history-jump {
    display: none !important;
  }

  body.chart-page main,
  body.info-page main {
    width: 100%;
  }

  .chart-page .chart-heading,
  .info-page .information-hero,
  .chart-page .chart-about {
    box-shadow: none;
  }

  .chart-page .table-wrap {
    overflow: visible;
  }

  .chart-page .weekly-record-table th,
  .chart-page .weekly-record-table td {
    border-color: #555;
    color: #000;
    background: #fff;
  }
}