/* =============================================================
   INDIA — "The Balance" · BOARD + SHARED-CHROME STYLESHEET
   Palette lives in tokens.css. This is the market's OWN board.css
   (eg / iq pattern): the asset merge lays it over the shared fleet
   board.css, retiring that shared-fingerprint copy by same-name
   overwrite. It is NOT named styles.css on purpose — the shared
   legal / methodology / footer / consent templates (included by
   ind's privacy/contact/methodology wrappers) link `assets/board.css`
   by name, and write_site deletes board.css for any market that ships
   styles.css. So the two jobs live here in one sheet:

     PART A — shared chrome (masthead, tabs, rule, footer, methodology
              and legal pages, consent banner, ad-slot placeholders).
              Fully var()-driven, so it re-skins from tokens.css with
              no edits. Only the classes the shared partials actually
              use are kept; the shared board's own board classes
              (.hero/.coin/.cur-*/.crypto-*/…) are dropped — this board
              never renders them, and dropping them is part of retiring
              the byte-identical shared sheet.
     PART B — the India one-screen board, EVERY rule scoped under
              .board-frame so none of its generic names (.mast, .brand,
              .row, .panel, .glance, .note …) can collide with PART A's
              shared-chrome classes of the same name.
   ============================================================= */

/* ===================== PART A — SHARED CHROME ===================== */

/* ---- RESET ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.5;
  background-color: var(--bg-grad-to);
  background-image: linear-gradient(160deg, var(--bg-grad-from), var(--bg-grad-to));
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-block-size: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }
svg, img { display: block; }
h1, h2, h3 { margin: 0; }
/* tabular numerals + bidi isolation on every figure (shared marker) */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; direction: ltr; unicode-bidi: isolate; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page { max-width: var(--page-max); margin-inline: auto; position: relative; }

/* TEST banner (engine is_test; dropped in production) */
.notice { background: var(--hold-bg); color: var(--hold-fg); border-bottom: 1px solid var(--hold-line);
  font-size: 11px; font-weight: 600; padding: 6px var(--pad); text-align: center; }

/* masthead (legal / methodology pages) */
.mast { display: flex; align-items: center; gap: 8px; padding: 12px var(--pad) 0; }
.brand__mark { inline-size: 16px; block-size: 16px; flex: none; border-radius: 4px;
  background: var(--accent); box-shadow: inset 0 0 0 2px var(--paper), 0 0 0 1px var(--accent); }
.brand { font-size: 19px; font-weight: 800; letter-spacing: -.2px; color: var(--peacock); }
.brand__note { font-size: 10px; color: var(--brass-ink); font-weight: 600; padding-top: 3px; }
.lang { margin-inline-start: auto; font-size: 10.5px; font-weight: 700; color: var(--accent);
  border: 1px solid var(--card-line); border-radius: 999px; padding: 2px 10px; background: var(--panel); }

.rule { block-size: 3px; background: var(--accent); }
.rule--hair { block-size: 1px; background: var(--brass); opacity: .5; margin-top: 1.5px; }

/* tabs */
.tabs { display: flex; align-items: center; gap: 2px; padding-inline: 10px; border-bottom: 1px solid var(--hairline); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab { flex: none; font-size: 12px; padding: 9px 11px 7px; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
.tab.is-active { color: var(--ink); font-weight: 800; border-bottom-color: var(--accent); }

/* ad slots (config-gated; nothing renders while ads are parked; placeholders
   only in TEST/UAT via the shared macros) */
.adband { padding-inline: var(--pad); margin-top: 14px; }
.ad { border-radius: var(--r-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; overflow: hidden; }
.ad--ph { border: 1px dashed var(--card-line); background: var(--panel); min-height: 100px; }
.ad__label { font-size: 8.5px; color: var(--faint); letter-spacing: .12em; }
.ad__hint { font-size: 11px; color: var(--faint); font-weight: 600; }
.ad--ph.ad--rail { min-height: 250px; }
.ad-pair { display: grid; grid-template-columns: 1fr; gap: 14px; }
.only-desktop { display: none; }
.ad .adsbygoogle { width: 100%; }
.ad .adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* footer (shared _fleet_footer, used by the legal + methodology pages) */
.foot { margin-top: 16px; border-top: 1px solid var(--hairline); padding: 12px var(--pad) 16px; font-size: 10.5px; color: var(--faint); }
.foot__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.foot__links { margin-inline-start: auto; display: flex; gap: 10px; }
.foot__disc { margin-top: 6px; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--accent-deep); }

/* methodology page */
.meth { padding: 22px var(--pad) 8px; }
.meth__title { font-size: 26px; font-weight: 800; letter-spacing: -.3px; color: var(--peacock); }
.meth__date { margin: 6px 0 0; font-size: 11.5px; color: var(--faint); }
.meth__intro { margin: 14px 0 0; font-size: 14px; color: var(--ink-soft); line-height: 1.65; max-width: 78ch; }
.meth__sec { padding: 0 var(--pad); margin-top: 20px; }
.meth__h { margin: 0 0 8px; font-size: 15.5px; font-weight: 800; display: flex; align-items: center; gap: 7px; }
.meth__p { margin: 0 0 8px; font-size: 13px; color: var(--ink-soft); line-height: 1.75; }

/* =============================================================
   FAQ PAGE — final design (operator-approved 2026-09-10)
   Ported verbatim from 4. UX:UI/Website/india/faq.html.

   A reading page, not a board. The board optimises for density
   (11-13px, tabular numerals, no wasted pixel); prose needs the
   opposite, so type steps up hard and the column is capped at
   820px instead of the 1520px board width.

   Single column, generous whitespace, native <details>
   accordions, ZERO JavaScript — the whole fleet's public pages
   ship none and an FAQ is not worth spending that property on.
   All 36 answers stay in the DOM open or shut, so crawlers and
   screen readers get the full text either way.
   ============================================================= */
.faqwrap { padding: 0 var(--pad); }
.faq { max-width: 820px; margin-inline: auto; }
/* scoped to this page: the footer and this sheet are shared with the board
   and the legal pages, so the FAQ's taller footer gap must not shift them. */
.faqwrap + .foot { margin-top: 60px; }
.faqwrap { scroll-behavior: smooth; }

/* ---- hero ---- */
.faq__hero { text-align: center; padding: 68px 0 8px; }
.faq__eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 800;
  letter-spacing: .24em; text-transform: uppercase; color: var(--brass-ink); }
.faq__brassrule { display: block; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--brass)); }
.faq__eyebrow .faq__brassrule:last-child { background: linear-gradient(90deg, var(--brass), transparent); }
.faq__title { margin: 20px 0 0; font-size: clamp(33px, 5.2vw, 52px); font-weight: 800; letter-spacing: -.022em;
  line-height: 1.04; color: var(--peacock); }
.faq__lede { margin: 20px auto 0; max-width: 56ch; font-size: 18px; line-height: 1.62; color: var(--ink-soft); text-wrap: pretty; }

/* ---- topic index ---- */
.faq__index { margin: 44px 0 0; border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background: var(--card-hi); padding: 7px; box-shadow: var(--shadow); }
.faq__indexgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px; }
.faq__ilink { display: flex; align-items: center; gap: 13px; padding: 15px 16px; border-radius: var(--r-md);
  color: var(--ink); transition: background .15s, color .15s; }
.faq__ilink:hover { background: var(--card-bg); color: var(--peacock); }
.faq__inum { flex: none; width: 22px; font-size: 12px; font-weight: 800; color: var(--brass-ink);
  font-variant-numeric: tabular-nums; }
.faq__iname { flex: 1; font-size: 15px; font-weight: 650; line-height: 1.3; }

/* ---- sections ---- */
.faq__sec { padding-top: 60px; scroll-margin-top: 14px; }
.faq__h { display: flex; align-items: baseline; gap: 14px; margin: 0; font-size: clamp(23px, 3.2vw, 30px);
  font-weight: 800; letter-spacing: -.02em; color: var(--peacock); line-height: 1.15; }
.faq__hnum { flex: none; font-size: 13px; font-weight: 800; color: var(--brass);
  font-variant-numeric: tabular-nums; transform: translateY(-.42em); }
.faq__hrule { height: 1px; background: var(--hairline); margin: 20px 0 0; }

/* ---- accordion items ---- */
.faq__item { border-bottom: 1px solid var(--line-soft); }
.faq__q { display: flex; align-items: flex-start; gap: 20px; padding: 24px 6px; cursor: pointer;
  font-size: 18px; font-weight: 650; line-height: 1.45; color: var(--ink); list-style: none;
  transition: color .15s; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--peacock); }
.faq__qtext { flex: 1; min-width: 0; }
.faq__item[open] .faq__q { color: var(--peacock); }
.faq__mark { flex: none; position: relative; width: 22px; height: 22px; margin-top: 2px; }
.faq__mark::before, .faq__mark::after { content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--brass-ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease, background .15s; }
.faq__mark::before { width: 15px; height: 2px; }
.faq__mark::after  { width: 2px; height: 15px; }
.faq__item[open] .faq__mark::before, .faq__item[open] .faq__mark::after { background: var(--peacock); }
.faq__item[open] .faq__mark::after { transform: rotate(90deg); opacity: 0; }
.faq__a { padding: 0 6px 28px; max-width: 70ch; }
.faq__a p { margin: 0; font-size: 16.5px; line-height: 1.78; color: var(--ink-soft); text-wrap: pretty; }
.faq__a a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---- closing corrections card ---- */
.faq__ask { margin-top: 60px; padding: 40px 30px; border-radius: var(--r-lg); text-align: center;
  background: linear-gradient(180deg, var(--card-hi), var(--anchor-bg)); border: 1px solid var(--hold-line); }
.faq__askh { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--peacock); }
.faq__askp { margin: 12px auto 20px; max-width: 52ch; font-size: 15px; line-height: 1.62; color: var(--ink-soft); }
.faq__askmail { display: inline-block; padding: 12px 26px; border-radius: 999px; background: var(--peacock);
  color: #fbf9f2; font-size: 15px; font-weight: 700; letter-spacing: .01em; transition: background .15s; }
.faq__askmail:hover { background: var(--peacock-deep); color: #fbf9f2; }

@media (max-width: 640px) {
  .faq__hero { padding: 44px 0 6px; }
  .faq__lede { font-size: 16.5px; }
  .faq__index { margin-top: 34px; }
  .faq__sec { padding-top: 46px; }
  .faq__q { font-size: 16.5px; padding: 20px 2px; gap: 14px; }
  .faq__a { padding: 0 2px 24px; }
  .faq__a p { font-size: 16px; }
  .faq__ask { margin-top: 46px; padding: 32px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .faqwrap { scroll-behavior: auto; }
  .faq__mark::before, .faq__mark::after, .faq__ilink, .faq__q { transition: none; }
}
}

}

/* legal pages — Privacy + Contact */
.legal { padding: 22px var(--pad) 8px; max-width: 82ch; margin-inline: auto; }
.legal__title { font-size: 26px; font-weight: 800; letter-spacing: -.3px; margin: 0; color: var(--peacock); }
.legal__updated { margin: 6px 0 0; font-size: 11.5px; color: var(--faint); }
.legal__sec { margin-top: 22px; }
.legal__h { margin: 0 0 8px; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.legal__p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.75; }
.legal__lead { font-size: 15px; color: var(--ink); }
.legal__muted { color: var(--faint); font-size: 12.5px; }
.legal__list { margin: 0 0 10px; padding-inline-start: 20px; }
.legal__list li { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 6px; }
.legal a[href], .legal__mail { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.legal a[href]:hover { color: var(--accent-deep); }
.legal__tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 4px 0 12px;
  border: 1px solid var(--hairline); border-radius: var(--r-md); }
.legal__table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 560px; }
.legal__table th, .legal__table td { text-align: start; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.legal__table thead th { background: var(--panel); color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--hairline); }
.legal__table tbody tr:last-child td { border-bottom: 0; }

.legal--contact { max-width: 62ch; }
.contact-card { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 16px; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--r-lg); }
.contact-card__label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.contact-card__mail { font-size: 18px; font-weight: 800; color: var(--accent); text-decoration: none; }
.contact-card__mail:hover { text-decoration: underline; }

/* interim cookie-consent banner (renders only on a live ad build) */
.consent[hidden] { display: none; }
.consent { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; background: var(--paper);
  border-top: 1px solid var(--hairline); box-shadow: 0 -6px 22px rgba(8, 56, 58, .22);
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.consent__text { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.6; max-width: 92ch; }
.consent__link { color: var(--accent); font-weight: 700; text-decoration: underline; white-space: nowrap; }
.consent__btns { display: flex; gap: 8px; }
.consent__btn { font: inherit; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 7px 18px; cursor: pointer; border: 1px solid var(--hairline); }
.consent__btn--ghost { background: transparent; color: var(--muted); }
.consent__btn--ghost:hover { color: var(--ink); border-color: var(--faint); }
.consent__btn--go { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.consent__btn--go:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

@media (min-width: 900px) {
  .legal { padding-inline: var(--pad); }
  .consent { flex-direction: row; align-items: center; gap: 18px; padding-block: 12px; }
  .consent__btns { margin-inline-start: auto; flex: none; }
}

/* ===================== PART B — THE INDIA BOARD =====================
   Every selector scoped under .board-frame so the generic names below
   never touch PART A's shared chrome of the same name. */

.jaali { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .045; color: var(--peacock); }
.jaali svg { width: 100%; height: 100%; display: block; }

.board-frame {
  position: relative; z-index: 1;
  height: 100vh; height: 100dvh;
  display: grid; grid-template-rows: auto 1fr auto;
  /* Guardrail: pin the implicit column so no descendant's min-content can ever
     stretch the board past the viewport again. minmax(0,1fr) lets the track
     shrink below min-content; a bare `auto` track cannot. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(6px, .9vh, 12px);
  padding: clamp(8px, 1.4vh, 16px) clamp(10px, 1.6vw, 22px);
  max-width: var(--page-max); margin: 0 auto;
}
.board-frame a:focus-visible, .board-frame button:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: 2px; border-radius: 4px; }

/* header */
.board-frame header.bar {
  display: flex; align-items: center; gap: clamp(10px, 1.4vw, 20px);
  background: linear-gradient(180deg, var(--peacock) 0%, var(--peacock-deep) 100%);
  color: #eef4f2; border: 1px solid var(--peacock-deep); border-radius: var(--radius);
  padding: clamp(7px, 1.1vh, 11px) clamp(12px, 1.5vw, 20px);
  box-shadow: 0 2px 14px rgba(8, 56, 58, .22); position: relative; overflow: hidden;
}
.board-frame header.bar::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(210, 174, 94, .12), transparent); }
.board-frame .brandbox { display: flex; align-items: center; gap: 12px; min-width: 0; position: relative; z-index: 1; }
.board-frame .logomark { flex: 0 0 auto; width: 40px; height: 40px; color: var(--brass-bright); }
.board-frame .brand-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.05; min-width: 0; }
.board-frame .wordmark { font-weight: 800; font-size: clamp(.9rem, 1.25vw, 1.12rem); letter-spacing: -.01em; white-space: nowrap; color: #fbfaf5; }
.board-frame .wordmark .wm-b { color: var(--brass-bright); }
.board-frame .deva { font-family: var(--font-deva); font-size: clamp(.68rem, .9vw, .82rem); color: var(--brass-bright); letter-spacing: .02em; font-weight: 500; }
.board-frame .tagline {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: #bdd2ce;
  white-space: nowrap; position: relative; z-index: 1;
}
.board-frame .tagline::before, .board-frame .tagline::after { content: ""; width: clamp(12px, 3vw, 44px); height: 1px; background: rgba(210, 174, 94, .45); }
.board-frame .hchips { display: flex; align-items: center; gap: clamp(8px, 1vw, 16px); margin-left: auto; position: relative; z-index: 1; }
.board-frame .updated { display: flex; align-items: center; gap: 8px; font-size: .72rem; color: #cfe0dd; white-space: nowrap; }
.board-frame .pulse { width: 9px; height: 9px; border-radius: 50%; background: #4fd39a; box-shadow: 0 0 0 0 rgba(79, 211, 154, .55); animation: ind-pulse 2.6s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes ind-pulse { 0% { box-shadow: 0 0 0 0 rgba(79, 211, 154, .5); } 70% { box-shadow: 0 0 0 7px rgba(79, 211, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(79, 211, 154, 0); } }

/* main grid */
.board-frame main.zones { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(8px, 1vw, 14px); min-height: 0; }
.board-frame .col { display: flex; flex-direction: column; gap: clamp(7px, .9vh, 12px); min-height: 0; }
.board-frame .panel { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow); position: relative; }
.board-frame .eyebrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--faint);
  padding: clamp(6px, .8vh, 9px) clamp(10px, 1.1vw, 15px) 0;
}
.board-frame .eyebrow .beam { color: var(--brass); flex: 0 0 auto; }
.board-frame .eyebrow .grow { flex: 1; height: 1px; background: var(--rule-soft); min-width: 16px; }
.board-frame .unitnote { text-transform: none; letter-spacing: .02em; font-weight: 500; font-size: .6rem; color: var(--faint); }

/* sparklines (shared between gold rows + anchor) */
.board-frame .spark { display: block; flex: 0 0 auto; }
.board-frame .spark .ln { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.board-frame .spark .up-ln { stroke: var(--up); }
.board-frame .spark .down-ln { stroke: var(--down); }
.board-frame .spark .flat-ln { stroke: var(--flat); }
.board-frame .spark .dot.up-dot { fill: var(--up); }
.board-frame .spark .dot.down-dot { fill: var(--down); }
.board-frame .spark .dot.flat-dot { fill: var(--flat); }
.board-frame .spark .halo { opacity: .16; }

/* gold zone */
.board-frame .gold { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.board-frame .rows { flex: 1; display: grid; grid-auto-rows: 1fr; padding: clamp(3px, .5vh, 7px) clamp(8px, 1vw, 14px) clamp(5px, .7vh, 9px); }
.board-frame .row {
  display: grid;
  grid-template-columns: minmax(92px, 108px) minmax(140px, 1fr) auto 96px minmax(88px, 104px);
  align-items: center; gap: clamp(8px, 1vw, 16px);
  padding: clamp(4px, .55vh, 9px) 6px; border-top: 1px solid var(--rule-soft); position: relative; border-radius: 6px;
}
.board-frame .row:first-child { border-top: 0; }
.board-frame .row .metal { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.board-frame .karat { font-weight: 800; font-size: clamp(1rem, 1.5vw, 1.28rem); letter-spacing: -.01em; line-height: 1; color: var(--ink); }
.board-frame .karat.silver { color: var(--ink-soft); }
.board-frame .badge {
  display: inline-flex; align-items: center; width: fit-content;
  font-size: .6rem; letter-spacing: .05em; font-weight: 600; text-transform: uppercase;
  color: var(--peacock-mid); border: 1px solid var(--card-line); border-radius: 5px; padding: 2px 6px; background: #fff;
}
.board-frame .priceblk { display: flex; align-items: baseline; min-width: 0; }
.board-frame .rupee { font-size: clamp(.95rem, 1.4vw, 1.3rem); font-weight: 600; color: var(--ink-soft); margin-right: 3px; }
.board-frame .price { font-family: var(--font-num); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: .95; letter-spacing: -.02em; color: var(--ink); }
.board-frame .row.silverrow .price { font-size: clamp(1.1rem, 2vw, 1.6rem); }
.board-frame .movecol { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.board-frame .change {
  display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: clamp(.7rem, .95vw, .82rem);
  padding: 3px 8px; border-radius: 20px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.board-frame .change.up { color: var(--up); background: var(--up-bg); }
.board-frame .change.down { color: var(--down); background: var(--down-bg); }
.board-frame .change.flat { color: var(--flat); background: rgba(124, 139, 136, .12); }
.board-frame .consensus { display: inline-flex; color: var(--faint); }
.board-frame .consensus svg { display: block; }
.board-frame .rows .spark { width: 96px; height: 30px; }
.board-frame .hl { display: flex; flex-direction: column; gap: 3px; font-size: .66rem; color: var(--ink-soft); text-align: right; line-height: 1.15; }
.board-frame .hl .lab { color: var(--faint); letter-spacing: .06em; text-transform: uppercase; font-size: .6rem; font-weight: 700; }
.board-frame .hl .v { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; }
.board-frame .hl b { font-weight: 600; font-size: .72rem; color: var(--ink); }
.board-frame .hlm { width: 9px; height: 7px; flex: 0 0 auto; }
.board-frame .hlm path { fill: none; stroke: var(--brass-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.board-frame .hlm.lo path { stroke: var(--faint); }
.board-frame .shimmer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: var(--radius); }
.board-frame .shimmer::before { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(200, 162, 77, .14), transparent); animation: ind-sweep 5.5s ease-in-out 1 .3s; }
@keyframes ind-sweep { 0% { left: -45%; } 55% { left: 120%; } 100% { left: 120%; } }

/* decomposition */
.board-frame .decomp { padding-bottom: clamp(8px, 1vh, 12px); }
.board-frame .decomp h2 { font-size: clamp(.78rem, 1.05vw, .94rem); font-weight: 700; padding: clamp(4px, .5vh, 7px) clamp(10px, 1.1vw, 15px) 0; letter-spacing: -.01em; color: var(--ink); }
.board-frame .decomp h2 span { color: var(--brass-ink); font-weight: 700; }
.board-frame .stack { display: flex; height: 20px; margin: clamp(6px, .8vh, 10px) clamp(10px, 1.1vw, 15px) 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--card-line); }
.board-frame .seg.s1 { background: var(--peacock); }
.board-frame .seg.s2 { background: var(--peacock-mid); }
.board-frame .seg.s3 { background: var(--brass); }
.board-frame .seg.s4 { background: var(--brass-bright); }
.board-frame .seg + .seg { box-shadow: inset 1px 0 0 var(--card); }
.board-frame .legend { display: flex; flex-wrap: wrap; align-items: center; row-gap: 5px; column-gap: 8px; padding: clamp(7px, .9vh, 10px) clamp(10px, 1.1vw, 15px) 0; }
.board-frame .lg { display: inline-flex; align-items: center; gap: 6px; font-size: .66rem; color: var(--ink-soft); white-space: nowrap; }
.board-frame .lg .sw { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.board-frame .lg b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.board-frame .op { font-size: .72rem; font-weight: 700; color: var(--brass-ink); }
.board-frame .legend .term { display: inline-flex; align-items: center; gap: 8px; }
.board-frame .lg.total { font-weight: 700; color: var(--peacock-deep); }
.board-frame .lg.total b { font-size: .8rem; font-weight: 700; }
.board-frame .decomp .fineprint { padding: clamp(6px, .8vh, 9px) clamp(10px, 1.1vw, 15px) 0; font-size: .62rem; line-height: 1.5; color: var(--faint); }

/* fx zone */
.board-frame .fx { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.board-frame .anchor {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  margin: clamp(5px, .7vh, 9px) clamp(10px, 1.1vw, 15px) 0;
  padding: clamp(7px, .9vh, 11px) clamp(9px, 1vw, 13px);
  border: 1px solid var(--card-line); border-radius: 8px;
  background: linear-gradient(180deg, var(--card-hi), #f4f1e8);
}
.board-frame .anchor .pair { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--peacock-mid); }
.board-frame .anchor .pair small { color: var(--faint); font-weight: 600; letter-spacing: .08em; font-size: .6rem; }
.board-frame .anchor .bigblk { display: flex; align-items: baseline; gap: 5px; margin-top: 2px; }
.board-frame .anchor .big { font-family: var(--font-num); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.board-frame .anchor .mkt { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--faint); }
.board-frame .anchor .ref { font-size: .66rem; color: var(--ink-soft); margin-top: 4px; font-variant-numeric: tabular-nums; }
.board-frame .anchor .ref b { color: var(--ink); font-weight: 600; }
.board-frame .anchor .right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.board-frame .anchor .spark { width: 120px; height: 30px; }

.board-frame .fxgrid {
  flex: 1; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  padding: clamp(4px, .6vh, 8px) clamp(10px, 1.1vw, 15px) clamp(8px, 1vh, 12px);
}
.board-frame .fxgrid:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: -3px; border-radius: 6px; }
.board-frame .fxhead { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.board-frame .fxhead h3 { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--faint); white-space: nowrap; }
.board-frame .fxhead .ln { flex: 1; height: 1px; background: var(--rule-soft); }
.board-frame .fxrows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.board-frame .fxr {
  display: flex; align-items: baseline; gap: 6px;
  padding: clamp(3px, .7vh, 7px) 8px;
  border: 1px solid var(--card-line); border-left: 2px solid var(--card-line);
  border-radius: 6px; background: #fff;
}
.board-frame .fxr.up { border-left-color: var(--up); }
.board-frame .fxr.down { border-left-color: var(--down); }
.board-frame .fxr.flat { border-left-color: var(--flat); }
.board-frame .fxr .code { font-weight: 700; font-size: .72rem; letter-spacing: .02em; color: var(--ink); }
.board-frame .fxr .val { margin-left: auto; font-family: var(--font-num); font-weight: 600; font-size: .72rem; color: var(--ink); white-space: nowrap; }
.board-frame .fxr .per { font-size: .6rem; font-weight: 700; color: var(--faint); position: relative; top: -.22em; margin-left: 2px; letter-spacing: .02em; }
.board-frame .fxr .chg { min-width: 52px; display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 4px; font-size: .6rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.board-frame .fxr.up .chg { color: var(--up); }
.board-frame .fxr.down .chg { color: var(--down); }
.board-frame .fxr.flat .chg { color: var(--flat); }

/* footer */
.board-frame footer.bar {
  display: flex; align-items: center; gap: clamp(8px, 1.2vw, 18px); flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius);
  padding: clamp(6px, .9vh, 10px) clamp(12px, 1.4vw, 18px); font-size: .72rem; color: var(--ink-soft); box-shadow: var(--shadow);
}
/* No nowrap here. This sentence is long-form prose, and .board-frame is a grid whose
   implicit column is `auto` — an auto track cannot shrink below its largest child's
   min-content, so one unbreakable string here silently widened the ENTIRE board to
   632px on a 375px phone (267px of horizontal scroll). Let it wrap. */
.board-frame footer .src { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.board-frame footer .src b { color: var(--peacock); font-weight: 700; }
.board-frame footer .ftr-note { color: var(--faint); white-space: nowrap; }
.board-frame footer .links { display: flex; gap: clamp(8px, 1vw, 14px); margin-left: auto; }
.board-frame footer .links a { color: var(--ink-soft); text-decoration: none; font-weight: 500; border-bottom: 1px solid transparent; }
.board-frame footer .links a:hover { color: var(--peacock); border-bottom-color: var(--brass); }

/* mobile glance strip (hidden on desktop) */
.board-frame .glance { display: none; }

/* ---- responsive ---- */
@media (max-width: 1180px) { .board-frame .tagline { display: none; } }
@media (max-width: 1199px) {
  .board-frame { height: auto; min-height: 100dvh; }
  body { overflow-y: auto; }
  .board-frame main.zones { grid-template-columns: 1fr; }
  .board-frame .rows { grid-auto-rows: auto; }
  .board-frame .col { gap: 12px; }
  .board-frame .fxgrid { overflow: visible; justify-content: flex-start; gap: 10px; }
}
@media (max-width: 640px) {
  .board-frame { grid-template-rows: auto auto 1fr auto; }
  .board-frame header.bar { flex-wrap: wrap; gap: 8px; }
  .board-frame .hchips { flex-wrap: wrap; gap: 8px; margin-left: 0; }
  .board-frame .col { gap: 9px; }

  .board-frame .glance { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .board-frame .gcell { display: flex; flex-direction: column; gap: 4px; min-width: 0;
    background: var(--card); border: 1px solid var(--card-line); border-top: 2px solid var(--brass);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 9px 11px; text-decoration: none; color: var(--ink); }
  .board-frame .gcell:active { background: var(--card-hi); }
  .board-frame .gtop { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  .board-frame .glab { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--peacock-mid); white-space: nowrap; }
  .board-frame .gnum { display: flex; align-items: baseline; }
  .board-frame .gval { font-family: var(--font-num); font-weight: 700; font-size: 1.3rem; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
  .board-frame #goldzone, .board-frame #fxanchor { scroll-margin-top: 8px; }

  .board-frame .row { grid-template-columns: auto 1fr auto;
    grid-template-areas: "metal cons price" "move spark range"; gap: 8px 6px; padding: 10px 2px; }
  .board-frame .row .metal { grid-area: metal; flex-direction: row; align-items: center; gap: 7px; }
  .board-frame .rows .consensus { grid-area: cons; justify-self: start; }
  .board-frame .priceblk { grid-area: price; justify-self: end; }
  .board-frame .rows .movecol { display: contents; }
  .board-frame .rows .change { grid-area: move; justify-self: start; }
  .board-frame .rows .spark { grid-area: spark; width: 56px; height: 20px; justify-self: start; }
  .board-frame .hl { grid-area: range; justify-self: end; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 3px 7px; font-size: .62rem; min-width: 0; }
  .board-frame .hl .lab { display: none; }
  .board-frame .hl b { font-size: .66rem; }

  .board-frame .decomp { padding-bottom: 8px; }
  .board-frame .stack { margin-top: 5px; height: 16px; }
  .board-frame .legend { padding-top: 6px; row-gap: 3px; column-gap: 6px; }
  .board-frame .legend .lg { font-size: .62rem; }

  .board-frame .anchor { margin-top: 6px; padding: 8px 10px; }
  .board-frame .anchor .spark { width: 96px; height: 24px; }
  .board-frame .fxgrid { gap: 7px; padding-bottom: 8px; }
  .board-frame .fxhead { margin-bottom: 3px; }
  .board-frame .fxrows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-frame .fxr { padding: 4px 8px; }

  .board-frame footer.bar { padding: 8px 12px; gap: 5px 10px; }
  .board-frame footer .links { margin-left: 0; }
  .board-frame footer .links a { padding: 10px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .board-frame .pulse { animation: none; }
  .board-frame .shimmer::before { display: none; }
}