/* Bullion Ticker — dark desktop board / light mobile app.
 * The palette is single-sourced below and remapped per theme, so the same
 * markup renders as the dark trading board at >=1024px and the light phone app
 * below it. ?theme=dark|light (or data-theme) forces either at any width.
 */

:root {
  /* palette — one source of truth */
  --l-bg: #F4F3F0;   --l-panel: #FFFFFF; --l-panel-2: #F7F6F3; --l-panel-3: #F1EFEA;
  --l-line: #E5E3DE; --l-line-soft: #EDEBE6;
  /* Every value here is measured against the LIGHTEST surface it can land on
   * (--l-panel, #FFFFFF) and the darkest (--l-panel-3), and clears WCAG AA's
   * 4.5:1 on both. The old --l-fg-2 measured 2.8:1 and --l-fg-3 measured 1.6:1
   * — grey-on-white that a sighted user in daylight could read and nobody else
   * could. Lifting them compresses the palette, because on a light ground
   * everything readable lives between 4.5:1 and 17:1; the hierarchy is now
   * 15.7 / 5.5 / 4.6 rather than 15.7 / 2.8 / 1.6. */
  --l-fg: #14171A;   --l-fg-2: #5A6067;  --l-fg-3: #666C73;
  --l-up: #0F7A44;   --l-down: #C0343A;
  --l-ink: #14171A;  --l-on-ink: #FFFFFF;
  --l-shadow: 0 1px 2px rgba(0,0,0,.05);
  /* Navigation labels sit at 10-11px, which WCAG AA holds to 4.5:1. The muted
   * body greys used to measure ~3.2:1 against the rail and ~3.4:1 against the
   * tab bar, so the nav got its own step. They pass on their own now, but the
   * step is kept: it is the one label colour that must never be tuned for
   * quietness at the expense of legibility. */
  --l-nav: #5E646B;
  /* Gold is a 2.3:1 text colour on a light ground — fine as a fill, unreadable
   * as a link. Text gets a darker gold of the same hue; --gold stays exactly as
   * it is for fills, borders and the mark. */
  --l-gold-text: #856520;
  /* One notch darker again, for gold text sitting on its own gold wash — the
   * DELAYED chip. The tint warms the surface under it and costs about half a
   * step of contrast that a link on a plain panel never pays. */
  --l-gold-text-strong: #7A5C1C;

  --d-bg: #0D1013;   --d-panel: #14181D; --d-panel-2: #191E24; --d-panel-3: #1F252C;
  --d-line: #232A32; --d-line-soft: #1C2229;
  /* Measured against --d-panel-3 (#1F252C), the lightest surface dark text
   * lands on. --d-fg-3 was 2.6:1 there; --d-down was 3.9:1. */
  --d-fg: #E9ECEF;   --d-fg-2: #9AA3AD;  --d-fg-3: #868E97;
  --d-up: #16A75C;   --d-down: #EE5A5F;
  --d-ink: #C89B3F;  --d-on-ink: #0D1013;
  --d-shadow: none;
  --d-nav: #A3ACB6;
  /* Gold reads 6:1 on the darkest panel, so dark-theme text keeps it — on a
   * dark ground the tinted chip costs nothing. */
  --d-gold-text: #C89B3F;
  --d-gold-text-strong: #C89B3F;

  /* invariants */
  --gold: #C89B3F;
  --silver: #98A2AC;
  --up-line: #16A75C;
  --down-line: #E5484D;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans: 'IBM Plex Sans', 'IBM Plex Sans Devanagari', system-ui, -apple-system, sans-serif;
  --deva: 'IBM Plex Sans Devanagari', 'IBM Plex Sans', system-ui, sans-serif;
}

/* light (phone) — default */
:root,
html[data-theme="light"] {
  --bg: var(--l-bg); --panel: var(--l-panel); --panel-2: var(--l-panel-2); --panel-3: var(--l-panel-3);
  --line: var(--l-line); --line-soft: var(--l-line-soft);
  --fg: var(--l-fg); --fg-2: var(--l-fg-2); --fg-3: var(--l-fg-3);
  --up: var(--l-up); --down: var(--l-down);
  --ink: var(--l-ink); --on-ink: var(--l-on-ink);
  --nav-fg: var(--l-nav); --gold-text: var(--l-gold-text); --gold-text-strong: var(--l-gold-text-strong);
  --shadow: var(--l-shadow);
  --radius: 16px; --radius-sm: 12px;
  --up-bg: rgba(22,167,92,.12); --down-bg: rgba(229,72,77,.12);
}

/* dark (desktop board) */
@media (min-width: 1024px) {
  :root:not([data-theme="light"]) {
    --bg: var(--d-bg); --panel: var(--d-panel); --panel-2: var(--d-panel-2); --panel-3: var(--d-panel-3);
    --line: var(--d-line); --line-soft: var(--d-line-soft);
    --fg: var(--d-fg); --fg-2: var(--d-fg-2); --fg-3: var(--d-fg-3);
    --up: var(--d-up); --down: var(--d-down);
    --ink: var(--d-ink); --on-ink: var(--d-on-ink);
    --nav-fg: var(--d-nav); --gold-text: var(--d-gold-text); --gold-text-strong: var(--d-gold-text-strong);
    --shadow: var(--d-shadow);
    --radius: 12px; --radius-sm: 10px;
    --up-bg: rgba(22,167,92,.14); --down-bg: rgba(229,72,77,.14);
  }
}

html[data-theme="dark"] {
  --bg: var(--d-bg); --panel: var(--d-panel); --panel-2: var(--d-panel-2); --panel-3: var(--d-panel-3);
  --line: var(--d-line); --line-soft: var(--d-line-soft);
  --fg: var(--d-fg); --fg-2: var(--d-fg-2); --fg-3: var(--d-fg-3);
  --up: var(--d-up); --down: var(--d-down);
  --ink: var(--d-ink); --on-ink: var(--d-on-ink);
  --nav-fg: var(--d-nav); --gold-text: var(--d-gold-text); --gold-text-strong: var(--d-gold-text-strong);
  --shadow: var(--d-shadow);
  --up-bg: rgba(22,167,92,.14); --down-bg: rgba(229,72,77,.14);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

html[lang="hi"] body { font-family: var(--deva); }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
svg { display: block; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
.spacer { flex: 1; }
.up { color: var(--up); }
.down { color: var(--down); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: .2 } }
@keyframes flash-up { from { background: var(--up-bg) } to { background: transparent } }
@keyframes flash-down { from { background: var(--down-bg) } to { background: transparent } }
@keyframes rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes sheet-in { from { transform: translateY(100%) } to { transform: none } }

.flash-up { animation: flash-up .7s ease-out; border-radius: 4px; }
.flash-down { animation: flash-down .7s ease-out; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ── shell ──────────────────────────────────────────────────────────────── */
.app { display: flex; min-height: 100%; }

.rail { display: none; }

.main {
  flex: 1; min-width: 0;
  padding: 0 16px calc(78px + env(safe-area-inset-bottom, 0px));
  max-width: 560px; margin: 0 auto; width: 100%;
}

.view { animation: rise .28s ease-out; }

/* Responsive swap utilities. `!important` because they must beat component
 * display rules regardless of source order; `revert` restores the element's
 * natural UA display, so only wrappers (div/span) carry these classes. */
.only-desktop { display: none !important; }

@media (min-width: 1024px) {
  .rail {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    width: 96px; flex: none; padding: 20px 8px;
    background: var(--d-bg); border-right: 1px solid var(--line);
    position: sticky; top: 0; height: 100vh;
  }
  :root[data-theme="light"] .rail { background: var(--panel); }
  .main { max-width: 1360px; padding: 22px 28px 40px; margin: 0; }
  .only-desktop { display: revert !important; }
  .only-mobile { display: none !important; }
}

.rail-logo {
  width: 36px; height: 36px; border-radius: 9px; align-self: center;
  background: var(--gold); color: #0D1013;
  display: flex; align-items: center; justify-content: center;
  font: 700 13px var(--mono); margin-bottom: 14px;
}

/* Icon over the word, both spelled out. The rail used to carry "RATE / CHRT /
 * ALRT / CALC", which needed decoding before it could be used and did not
 * abbreviate at all in Hindi or Spanish. A hover-only label would have left
 * touch and keyboard users with the abbreviation, so the word is always on. */
.rail-btn {
  width: 100%; min-height: 58px; padding: 8px 4px; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  color: var(--nav-fg); border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.rail-label { font: 500 10.5px/1.15 var(--sans); text-align: center; }
html[lang="hi"] .rail-label { font-family: var(--deva); font-size: 11px; }
.nav-icon { width: 20px; height: 20px; flex: none; }
.rail-btn:hover { color: var(--fg); background: var(--panel); }
.rail-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rail-btn.is-on { background: var(--panel-2); border-color: var(--line); color: var(--fg); }
.rail-btn.is-on .nav-icon { color: var(--gold-text); }
.rail-spacer { flex: 1; }

/* ── top bar ────────────────────────────────────────────────────────────── */
/* 8px, not 10: at 320px the row is 14px over budget and the market chip was
 * the only item able to absorb it, which cost the label its last character.
 * Tighter here, roomier on the board below. */
.topbar { display: flex; align-items: center; gap: 8px; padding-top: 18px; }
/* The brand is two words, and `line-height: 1` gives a wrapped one no room to
 * breathe — it doubled the header height on a phone. Keep the name whole, and
 * settle the row's priorities explicitly rather than letting flexbox decide:
 * the freshness label and the language switch never shrink, and the market
 * chip — which opens a sheet that names every market in full anyway — is the
 * one thing allowed to give up space and ellipsise. Below ~360px it does. */
.topbar-brand { font: 700 20px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; }
.topbar .chip-live, .topbar .seg-lang { flex: none; }
/* When the row runs out of room something has to give, and left to itself
 * flexbox picked the market name — which is how "United Stat…" reached a
 * 1024px laptop. The order is set explicitly instead: the search box goes
 * first (there are five instruments to search), then the age line, which is
 * repeated in full in the feed-status card below. The market you are reading
 * and the state of the feed are the last things to shrink.
 *
 * The label ellipsises rather than the whole chip, so the caret survives: a
 * control with its affordance clipped off looks broken, not compact. */
.topbar .search { flex: 0 3 220px; min-width: 0; }
.topbar-age { flex: 0 3 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chip-market { min-width: 0; }
.chip-market .chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* On the board the full market name fits and is worth the room, so the chip
 * stops being the thing that gives way. */
@media (min-width: 1024px) { .chip-market { flex: none; } }
.chip-caret { color: var(--fg-3); flex: none; }
.topbar-title { font: 600 15px/1 var(--sans); letter-spacing: .02em; }
.topbar-age { font: 400 12px var(--mono); color: var(--fg-3); }
.topbar-sub { margin-top: 6px; font: 400 12px var(--mono); color: var(--fg-2); }
html[lang="hi"] .topbar-sub { font: 400 12.5px var(--deva); }

@media (min-width: 1024px) {
  .topbar { padding: 0 0 20px; border-bottom: 1px solid var(--line-soft); gap: 16px; }
  .topbar-sub { display: none; }
}

.search {
  display: none; align-items: center; gap: 8px;
  height: 34px; width: 220px; padding: 0 12px;
  border-radius: 8px; background: var(--panel); border: 1px solid var(--line);
  font: 400 12px var(--sans); color: var(--fg);
}
.search::placeholder { color: var(--fg-3); }
.search:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
@media (min-width: 1024px) { .search { display: flex; } }

/* ── atoms ──────────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 10px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line);
  font: 400 12px var(--sans); color: var(--fg); white-space: nowrap;
}
.chip:hover { border-color: var(--gold); }
@media (min-width: 1024px) { .chip { border-radius: 8px; padding: 0 12px; } }

.chip-live {
  gap: 7px; height: 26px; padding: 0 10px; border: 1px solid transparent;
  background: var(--up-bg); color: var(--up);
  font: 500 10.5px var(--mono); letter-spacing: .08em;
}
html[lang="hi"] .chip-live { font: 500 11px var(--deva); letter-spacing: 0; }
@media (min-width: 1024px) { .chip-live { border-color: rgba(22,167,92,.28); border-radius: 999px; height: 28px; } }

/* Freshness states. The chip changes colour with the data, so "not live" is
 * visible at a glance rather than buried in a tooltip. */
.chip-delayed {
  gap: 7px; height: 26px; padding: 0 10px;
  background: rgba(200,155,63,.14); color: var(--gold-text-strong); border-color: rgba(200,155,63,.32);
  font: 500 10.5px var(--mono); letter-spacing: .08em; text-decoration: none;
}
.chip-demo {
  gap: 7px; height: 26px; padding: 0 10px;
  background: var(--down-bg); color: var(--down); border-color: transparent;
  font: 500 10.5px var(--mono); letter-spacing: .08em; text-decoration: none;
}
.chip-loading {
  gap: 7px; height: 26px; padding: 0 10px;
  background: var(--panel-2); color: var(--fg-3); border-color: var(--line);
  font: 500 10.5px var(--mono); letter-spacing: .08em; text-decoration: none;
}
html[lang="hi"] .chip-delayed, html[lang="hi"] .chip-demo, html[lang="hi"] .chip-loading {
  font: 500 11px var(--deva); letter-spacing: 0;
}
a.chip-live, a.chip-delayed, a.chip-demo, a.chip-loading { text-decoration: none; }
a.chip-live:hover, a.chip-delayed:hover, a.chip-demo:hover { filter: brightness(1.12); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dot-live { animation: blink 1.6s ease-in-out infinite; }
.swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.swatch-gold { background: var(--gold); }
.swatch-silver { background: var(--silver); }

.seg { display: flex; gap: 4px; padding: 4px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); }
.seg-item {
  padding: 6px 12px; border-radius: 6px;
  font: 500 12px var(--mono); color: var(--fg-3); white-space: nowrap;
}
.seg-item:hover { color: var(--fg); }
.seg-item.is-on { background: var(--panel-3); color: var(--fg); }
@media (min-width: 1024px) { .seg-item.is-on { background: var(--gold); color: #0D1013; } }

/* The language switch collapses to a single chip on the phone (which opens the
 * sheet) and shows all three as a segmented control on the desktop board.
 *
 * The collapse is scoped to phone widths rather than written as a base rule
 * with a desktop override: `.seg-lang .seg-item:not(.is-on)` is specificity
 * (0,3,0) and a plain `.seg-lang .seg-item` override is (0,2,0). A media query
 * adds no specificity of its own, so the desktop rule lost and every
 * non-active language stayed hidden on the board — leaving a chip that could
 * only ever be clicked on itself, and so did nothing. */
.seg-lang { padding: 0; border-radius: 999px; overflow: hidden; }
.seg-lang .seg-item { height: 32px; display: flex; align-items: center; border-radius: 999px; }
.seg-lang .seg-item.is-on { background: transparent; color: var(--fg); }

@media (max-width: 1023.98px) {
  .seg-lang .seg-item:not(.is-on) { display: none; }
}

@media (min-width: 1024px) {
  .seg-lang { border-radius: 8px; padding: 0; }
  .seg-lang .seg-item { border-radius: 0; height: 32px; padding: 0 12px; }
  .seg-lang .seg-item.is-on { background: var(--panel-3); color: var(--fg); }
}
.seg-lang .lang-hi { font-family: var(--deva); }

.badge {
  display: inline-block; padding: 3px 7px; border-radius: 5px;
  font: 500 12px var(--mono); font-variant-numeric: tabular-nums;
}
.badge-up { background: var(--up-bg); color: var(--up); }
.badge-down { background: var(--down-bg); color: var(--down); }

/* While the market is shut, the session change is history rather than movement.
 * app.js sets data-session on <body>. The figures and their signs stay — Friday
 * closing up is worth knowing — but the live green/red comes off, because a
 * price that cannot move should not wear the colour of one that just did.
 *
 * Scoped deliberately to the *session* change and nothing else. The ten-day
 * board, the 1-month and year-to-date figures and every other historical number
 * keep their colour: those are not claims about now, so a closed market says
 * nothing about them. Muting only the pill and leaving the delta beside it
 * green was worse than either — one fact wearing two different faces. */
body[data-session="closed"] .badge-up,
body[data-session="closed"] .badge-down {
  background: var(--panel-3); color: var(--fg-2);
}
body[data-session="closed"] .board-cell.up,
body[data-session="closed"] .board-cell.down,
body[data-session="closed"] .pair-d.up,
body[data-session="closed"] .pair-d.down,
body[data-session="closed"] .kpi-change.up,
body[data-session="closed"] .kpi-change.down,
body[data-session="closed"] .detail-change.up,
body[data-session="closed"] .detail-change.down {
  color: var(--fg-2);
}

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.card-pad { padding: 18px; }
/* several cards / board rows are buttons — keep them block-like */
button.card, button.board-row { width: 100%; text-align: left; font: inherit; }
button.card:hover, button.board-row:hover { border-color: var(--gold); }

.eyebrow {
  font: 500 11px var(--mono); color: var(--fg-2); letter-spacing: .08em;
}
@media (min-width: 1024px) { .eyebrow { font-size: 10.5px; color: var(--fg-3); } }
html[lang="hi"] .eyebrow { font-family: var(--deva); letter-spacing: 0; font-size: 12px; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row + .row { margin-top: 10px; }
.row-label { font: 400 12.5px var(--sans); color: var(--fg-2); }
.row-value { font: 400 12.5px var(--mono); font-variant-numeric: tabular-nums; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 16px; border-radius: 10px;
  font: 600 13.5px var(--sans); transition: filter .15s, background .15s;
}
.btn:hover { filter: brightness(1.06); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-ghost { background: var(--panel); border: 1px solid var(--line); color: var(--fg); }
.btn-gold { background: var(--gold); color: #14171A; }
.btn-outline { background: transparent; border: 1px solid var(--line); color: var(--gold-text); }
html[lang="hi"] .btn { font-family: var(--deva); font-size: 14px; }

.toggle {
  width: 44px; height: 26px; border-radius: 99px; padding: 3px;
  background: var(--line); display: flex; align-items: center;
  transition: background .18s; flex: none;
}
.toggle-knob { width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.toggle.is-on { background: var(--up-line); }
.toggle.is-on .toggle-knob { transform: translateX(18px); }

/* ── rates: phone hero cards ────────────────────────────────────────────── */
.hero { margin-top: 16px; padding: 18px 18px 16px; }
.hero-head { display: flex; align-items: center; gap: 9px; }
.hero-name { font: 600 13px var(--sans); }
html[lang="hi"] .hero-name { font: 600 14px var(--deva); }
.hero-unit { font: 400 12px var(--sans); color: var(--fg-2); }
html[lang="hi"] .hero-unit { font: 400 12.5px var(--deva); }
.hero-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 12px; }
.hero-price { font: 600 40px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hero-price.sm { font-size: 34px; }
.hero-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.hero-when { font: 400 12px var(--sans); color: var(--fg-2); }
.hero-splits { display: flex; gap: 8px; margin-top: 16px; }
.split {
  flex: 1; padding: 11px 12px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line-soft);
}
.split-k { font: 400 11px var(--sans); color: var(--fg-2); }
html[lang="hi"] .split-k { font: 400 12px var(--deva); }
.split-v { font: 500 15px var(--mono); font-variant-numeric: tabular-nums; margin-top: 3px; }

.pair { display: flex; gap: 10px; margin-top: 12px; }
.pair > .card { flex: 1; padding: 14px; }
.pair-k { font: 400 11px var(--mono); color: var(--fg-2); letter-spacing: .06em; }
.pair-v { font: 500 17px var(--mono); font-variant-numeric: tabular-nums; margin-top: 5px; }
.pair-d { font: 400 11.5px var(--mono); margin-top: 3px; }

.actions { display: flex; gap: 8px; margin-top: 14px; }
.actions .btn { flex: 1; }

.city-list { margin-top: 12px; padding: 16px 18px; }
.city-row { display: flex; justify-content: space-between; margin-top: 12px; font: 400 13.5px var(--sans); }
html[lang="hi"] .city-row { font-family: var(--deva); }
.city-row button { text-align: left; }
.city-row.is-on { color: var(--gold-text); }
.city-row .mono { font-size: 13px; }

/* ── ten-day rate table ─────────────────────────────────────────────────── */
.ten-day { margin-top: 12px; padding: 16px 0 4px; overflow: hidden; }
@media (min-width: 1024px) { .ten-day { margin-top: 16px; padding-top: 18px; } }
.ten-day-head { padding: 0 18px 12px; }
.ten-day-sub {
  margin-top: 5px; font: 400 11.5px/1.5 var(--sans); color: var(--fg-2); max-width: 60ch;
}
html[lang="hi"] .ten-day-sub { font-family: var(--deva); }
.ten-day-scroll { overflow-x: auto; }
.ten-day-table { width: 100%; border-collapse: collapse; min-width: 380px; }
.ten-day-table th {
  padding: 9px 12px; background: var(--panel-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font: 500 10.5px var(--mono); color: var(--fg-3); letter-spacing: .07em; text-align: left;
  white-space: nowrap;
}
.ten-day-table td {
  padding: 11px 12px; border-bottom: 1px solid var(--line-soft);
  font: 400 12.5px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ten-day-table tr:last-child td { border-bottom: 0; }
.ten-day-table .num { text-align: right; }
.ten-day-table th:first-child, .ten-day-table td:first-child { padding-left: 18px; }
.ten-day-table th:last-child, .ten-day-table td:last-child { padding-right: 18px; }
.ten-day-date { color: var(--fg-2); font-family: var(--sans); }
html[lang="hi"] .ten-day-date { font-family: var(--deva); }
.ten-day-note { color: var(--fg-3); text-align: center; padding: 22px 12px; font-family: var(--sans); }

/* ── rates: desktop board ───────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 22px 0 24px; }
.kpi { padding: 18px 20px; }
.kpi-head { display: flex; align-items: center; gap: 8px; }
.kpi-tag { width: 8px; height: 8px; border-radius: 2px; }
.kpi-body { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.kpi-price { font: 600 38px/1 var(--mono); font-variant-numeric: tabular-nums; }
.kpi-change { font: 500 13px var(--mono); font-variant-numeric: tabular-nums; }
.kpi-meta { margin-top: 14px; font: 400 11.5px var(--mono); color: var(--fg-3); }
/* One year of the ratio, to match the average and high quoted under it. */
.kpi-spark { margin-top: 12px; }
.kpi-spark:empty { display: none; }
.kpi-spark svg { max-width: 100%; }

/* Names the market the board is quoting, and says what kind of number it is —
 * a landed retail rate and a wholesale spot conversion are not the same thing. */
.board-head-line {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.board-market { font: 600 14px var(--sans); }
html[lang="hi"] .board-market { font-family: var(--deva); }
.board-basis { font: 400 11.5px var(--mono); color: var(--fg-3); }
html[lang="hi"] .board-basis { font-family: var(--deva); }

.basis-note {
  margin: 12px 2px 0; font: 400 11.5px/1.5 var(--sans); color: var(--fg-2);
}
html[lang="hi"] .basis-note { font-family: var(--deva); }

.tax-note {
  margin: 10px 0 0; font: 400 11.5px/1.55 var(--sans); color: var(--fg-2); max-width: 52ch;
}
html[lang="hi"] .tax-note { font-family: var(--deva); }

.board { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.board-grid {
  display: grid;
  grid-template-columns: minmax(200px, 250px) 160px 120px 100px 112px 112px minmax(150px, 186px) 149px;
  align-items: center;
}
.board-head {
  padding: 12px 20px; background: var(--panel-2); border-bottom: 1px solid var(--line);
  font: 500 10.5px var(--mono); color: var(--fg-3); letter-spacing: .08em;
}
.board-head > div + div, .board-row > div + div { text-align: right; }
.board-row { padding: 15px 20px; border-bottom: 1px solid var(--line-soft); }
.board-row:last-child { border-bottom: 0; }
.board-row:hover { background: var(--panel-2); }
.board-name { font: 500 13.5px var(--sans); }
html[lang="hi"] .board-name { font-family: var(--deva); }
.board-unit { font: 400 11px var(--mono); color: var(--fg-3); margin-top: 3px; }
html[lang="hi"] .board-unit { font-family: var(--deva); }
.board-price { font: 500 16px var(--mono); font-variant-numeric: tabular-nums; }
.board-cell { font: 400 13px var(--mono); font-variant-numeric: tabular-nums; }
.board-muted { color: var(--fg-2); }
.board-range { font: 400 11.5px var(--mono); color: var(--fg-3); }
.board-spark { display: flex; justify-content: flex-end; }

.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; margin-top: 16px; }
.panel { padding: 16px 18px; }
.panel-body { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.link-gold { font: 400 12px var(--sans); color: var(--gold-text); text-align: left; }

/* ── chart view ─────────────────────────────────────────────────────────── */
.detail-head { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-top: 14px; }
@media (min-width: 1024px) { .detail-head { margin-top: 0; padding-top: 24px; } }
.detail-price { font: 600 40px/1 var(--mono); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .detail-price { font-size: 52px; } }
.detail-line { display: flex; align-items: baseline; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.detail-change { font: 500 16px var(--mono); font-variant-numeric: tabular-nums; }
.detail-conv { margin-top: 10px; font: 400 12px var(--mono); color: var(--fg-3); }
html[lang="hi"] .detail-conv { font-family: var(--deva); }

.chart-controls { display: flex; gap: 10px; flex-wrap: wrap; }

/* Sits in the same row as the segmented controls and stretches to their
 * height, so the row lines up without hard-coding a pixel height that the
 * segment padding would have to be kept in sync with. */
.seg-toggle {
  align-items: center; gap: 7px; padding: 4px 12px;
  font: 500 12px var(--mono); color: var(--fg-3);
}
html[lang="hi"] .seg-toggle { font: 500 12px var(--deva); }
.seg-toggle:hover { color: var(--fg); }
.seg-toggle.is-on { color: var(--fg); border-color: var(--gold); }
.seg-toggle-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; opacity: .35; }
.seg-toggle.is-on .seg-toggle-dot { opacity: 1; }

.chart-card { margin-top: 20px; padding: 20px 16px 12px; }
.chart-wrap { position: relative; }
.chart-svg { width: 100%; height: 220px; display: block; touch-action: none; }
@media (min-width: 1024px) { .chart-svg { height: 300px; } }
.chart-axis { display: flex; justify-content: space-between; padding: 6px 0 8px; font: 400 11px var(--mono); color: var(--fg-3); }

.chart-legend {
  display: flex; gap: 18px; flex-wrap: wrap; padding: 0 2px 14px;
  font: 400 12px var(--sans); color: var(--fg-2);
}
.chart-legend:empty { display: none; }
html[lang="hi"] .chart-legend { font-family: var(--deva); }
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.legend-item b { font: 500 12px var(--mono); font-variant-numeric: tabular-nums; }

/* 52-week reference labels. Drawn in HTML rather than inside the SVG, which is
 * scaled with preserveAspectRatio="none" and would stretch any text in it. */
.chart-marks { position: absolute; inset: 0; pointer-events: none; }
.chart-mark {
  position: absolute; left: 0; transform: translateY(-50%);
  padding: 2px 7px; border-radius: 5px; white-space: nowrap;
  background: var(--panel); border: 1px solid var(--line);
  font: 400 10.5px var(--mono); color: var(--fg-2);
}
html[lang="hi"] .chart-mark { font-family: var(--deva); }
.chart-mark b { font-weight: 500; color: var(--fg); }

/* The price scale. Overlaid on the plot rather than given its own gutter,
 * because #chartWrap's width is the crosshair's coordinate system — padding it
 * would silently shift every hover reading. Each label carries the card's own
 * background so the series passes behind it legibly. */
.chart-yaxis { position: absolute; inset: 0; pointer-events: none; }
.chart-ytick {
  position: absolute; right: 0; transform: translateY(-50%);
  padding: 1px 5px; border-radius: 4px; white-space: nowrap;
  background: var(--panel); color: var(--fg-2);
  font: 400 10.5px var(--mono); font-variant-numeric: tabular-nums;
}
/* The latest value, in the colour of the series it belongs to. */
.chart-ytick.is-last {
  color: #0D1013; font-weight: 500; padding: 2px 6px;
}

.chart-cursor {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--fg-3); opacity: 0; pointer-events: none; transition: opacity .12s;
}
.chart-cursor.is-on { opacity: .6; }
.chart-dot {
  position: absolute; left: 50%; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--panel);
}

/* The readout sat on --panel-2 with a --line border and a soft shadow: three
 * near-neighbours of the card behind it, which on the dark board added up to a
 * tooltip you had to already know was there. Raised onto the lightest surface
 * with a shadow that actually registers against black. */
.chart-tip {
  position: absolute; pointer-events: none; transform: translate(-50%, -130%);
  background: var(--panel-3); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; font: 500 11.5px var(--mono); white-space: nowrap;
  box-shadow: 0 6px 22px rgba(0,0,0,.5); opacity: 0; transition: opacity .12s;
}
.chart-tip.is-on { opacity: 1; }
.chart-tip.is-below { transform: translate(-50%, 30%); }
.chart-tip small { display: block; color: var(--fg-3); font-weight: 400; margin-top: 4px; }
.tip-ohlc { display: grid; grid-template-columns: auto auto; gap: 3px 14px; }
.tip-cell { display: flex; gap: 8px; justify-content: space-between; }
.tip-cell i { font-style: normal; font-weight: 400; color: var(--fg-3); }
.tip-row { display: flex; align-items: center; gap: 7px; font-family: var(--sans); font-weight: 400; }
.tip-row + .tip-row { margin-top: 4px; }
.tip-row b { margin-left: auto; font-family: var(--mono); font-weight: 500; }

.detail-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
/* The daily table gets what it needs first and the statistics card takes the
 * rest. At 1024-1150px the old fixed 420px sidebar left the table 90px short,
 * so its CHANGE column — the one column a reader scans — sat behind a scroll
 * bar while the card beside it held nothing but whitespace. */
@media (min-width: 1024px) {
  .detail-grid {
    grid-template-columns: minmax(480px, 1fr) minmax(0, 380px);
    gap: 20px; margin-top: 20px;
  }
}

.ohlc { overflow-x: auto; }
.ohlc-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr 1fr 1fr; min-width: 480px; }
.ohlc-head {
  padding: 12px 18px; background: var(--panel-2); border-bottom: 1px solid var(--line);
  font: 500 10.5px var(--mono); color: var(--fg-3); letter-spacing: .08em;
}
.ohlc-row { padding: 13px 18px; border-bottom: 1px solid var(--line-soft); font: 400 12.5px var(--mono); font-variant-numeric: tabular-nums; }
.ohlc-row:last-child { border-bottom: 0; }
.ohlc-head > div + div, .ohlc-row > div + div { text-align: right; }
.ohlc-date { color: var(--fg-2); }

/* Empty and partial states — a chart with nothing to draw says why. */
.chart-empty, .ohlc-empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 180px; padding: 24px;
  font: 400 13px var(--sans); color: var(--fg-3); text-align: center;
}
.ohlc-empty { min-height: 96px; }
.chart-note {
  padding: 2px 0 6px; font: 400 11.5px var(--sans); color: var(--fg-3);
}
.chart-note:empty { display: none; }
.ohlc-row.is-estimated abbr {
  text-decoration: none; color: var(--fg-3); cursor: help; margin-left: 3px;
}
.boot-wait {
  display: flex; align-items: center; justify-content: center;
  min-height: 45vh; font: 400 13.5px var(--sans); color: var(--fg-2);
}

.divider { height: 1px; background: var(--line); margin: 18px 0; }

/* ── alerts ─────────────────────────────────────────────────────────────── */
.page-title { font: 700 26px/1.2 var(--sans); margin: 18px 0 0; }
html[lang="hi"] .page-title { font-family: var(--deva); }
@media (min-width: 1024px) { .page-title { font-size: 28px; margin-top: 24px; } }
.page-sub { margin-top: 6px; font: 400 12.5px var(--sans); color: var(--fg-2); max-width: 60ch; }
html[lang="hi"] .page-sub { font-family: var(--deva); }

.alert-cols { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 18px; }
@media (min-width: 1024px) { .alert-cols { grid-template-columns: 1fr 420px; gap: 20px; align-items: start; } }

.alert-item { padding: 15px 16px; display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.alert-name { font: 500 14px var(--sans); }
html[lang="hi"] .alert-name { font-family: var(--deva); }
.alert-meta { font: 400 11.5px var(--mono); color: var(--fg-2); margin-top: 3px; }
.alert-del { color: var(--fg-3); font: 400 18px var(--sans); padding: 0 4px; line-height: 1; }
.alert-del:hover { color: var(--down); }
.alert-item.is-hit { border-color: var(--gold); }

.field-group { margin-top: 14px; }
.switcher { display: flex; background: var(--panel-3); border-radius: 10px; padding: 4px; margin-top: 10px; }
.switcher-item {
  flex: 1; height: 38px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font: 500 13px var(--sans); color: var(--fg-2);
}
html[lang="hi"] .switcher-item { font-family: var(--deva); }
.switcher-item.is-on { background: var(--panel); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.07); }
@media (min-width: 1024px) { .switcher-item.is-on { box-shadow: none; border: 1px solid var(--line); } }

.stepper { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
.stepper-btn {
  width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font: 400 22px var(--sans); flex: none;
}
.stepper-btn:hover { border-color: var(--gold); }
.stepper-input {
  flex: 1; min-width: 0; height: 56px; border-radius: 12px; border: 1.5px solid var(--gold);
  background: transparent; text-align: center;
  font: 600 24px var(--mono); font-variant-numeric: tabular-nums; color: var(--fg);
}
.stepper-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(200,155,63,.2); }
.hint { margin-top: 8px; font: 400 11.5px var(--mono); color: var(--fg-2); text-align: center; }
.hint-left { text-align: left; margin: 10px 0 0; }
html[lang="hi"] .hint-left { font-family: var(--deva); }

.pills { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.pill {
  padding: 9px 14px; border-radius: 999px; background: var(--panel-2);
  border: 1px solid var(--line); font: 500 12.5px var(--sans); color: var(--fg);
}
html[lang="hi"] .pill { font-family: var(--deva); }
.pill.is-on { background: var(--ink); color: var(--on-ink); border-color: transparent; }

/* ── calculator ─────────────────────────────────────────────────────────── */
/* Grid items default to min-width:auto, so one child with a wide intrinsic
 * size drags the whole track past the viewport. The scrollable panes inside
 * (the OHLC table, the ten-day board) carry their own overflow-x. */
.calc-cols > *, .alert-cols > *, .detail-grid > * { min-width: 0; }

.calc-cols { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 18px; }
@media (min-width: 1024px) { .calc-cols { grid-template-columns: 1fr 420px; gap: 20px; align-items: start; } }

.purity-row { display: flex; gap: 8px; margin-top: 10px; }
.purity {
  flex: 1; height: 52px; border-radius: 12px; border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.purity:hover { border-color: var(--gold); }
.purity.is-on { border: 1.5px solid var(--gold); background: rgba(200,155,63,.07); }
.purity-k { font: 600 14px var(--sans); }
.purity-v { font: 400 10.5px var(--mono); color: var(--fg-2); }

.weight-field {
  margin-top: 10px; height: 64px; border-radius: 12px; border: 1px solid var(--line);
  display: flex; align-items: center; padding: 0 16px; gap: 12px;
}
.weight-field:focus-within { border-color: var(--gold); }
/* `width: 0` as well as `min-width: 0`: an <input> carries an intrinsic width
 * from its default `size` (20 characters — over 300px at 28px monospace), and
 * that still feeds the min-content contribution the enclosing grid track sizes
 * itself from. Without it the calculator card was ~470px wide inside a 390px
 * phone and the whole page scrolled sideways. */
.weight-input {
  flex: 1; width: 0; min-width: 0; border: 0; background: transparent;
  font: 600 28px var(--mono); font-variant-numeric: tabular-nums; color: var(--fg);
}
.weight-input:focus { outline: none; }
.weight-unit { font: 400 14px var(--sans); color: var(--fg-2); }
html[lang="hi"] .weight-unit { font-family: var(--deva); }

.unit-row { display: flex; gap: 8px; margin-top: 10px; }
.unit {
  flex: 1; height: 36px; border-radius: 99px; background: var(--panel-2);
  border: 1px solid var(--line); font: 500 12px var(--sans); color: var(--fg-2);
  display: flex; align-items: center; justify-content: center;
}
html[lang="hi"] .unit { font-family: var(--deva); }
.unit.is-on { background: var(--panel-3); border-color: transparent; color: var(--fg); }

.total-card { border-radius: var(--radius); padding: 20px; background: #14171A; color: #fff; }
@media (min-width: 1024px) { .total-card { background: var(--panel); border: 1px solid var(--line); color: var(--fg); } }
.total-card .eyebrow { color: #8A8F96; }
.total-value { font: 600 38px/1 var(--mono); font-variant-numeric: tabular-nums; margin-top: 12px; }
.total-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.total-row { display: flex; justify-content: space-between; gap: 12px; font: 400 12.5px var(--sans); color: #B9BDC2; }
@media (min-width: 1024px) { .total-row { color: var(--fg-2); } }
html[lang="hi"] .total-row { font-family: var(--deva); }
.total-row span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; color: #fff; }
@media (min-width: 1024px) { .total-row span:last-child { color: var(--fg); } }
.total-note { margin: 16px 0 0; font: 400 11.5px/1.55 var(--sans); color: #B9BDC2; }
@media (min-width: 1024px) { .total-note { color: var(--fg-2); } }
html[lang="hi"] .total-note { font-family: var(--deva); }
.total-card .btn-outline { margin-top: 18px; height: 46px; border-color: #3A4048; color: var(--gold); }

/* ── tab bar (phone) ────────────────────────────────────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; padding: 8px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--panel);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-top: 1px solid var(--line);
}
@media (min-width: 1024px) { .tabbar { display: none; } }
.tab {
  flex: 1; height: 48px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  color: var(--nav-fg);
}
.tab-l { font: 400 11px var(--sans); }
html[lang="hi"] .tab-l { font: 400 11.5px var(--deva); }
.tab .nav-icon { width: 19px; height: 19px; }
.tab.is-on { color: var(--fg); }
.tab.is-on .nav-icon { color: var(--gold-text); }
.tab.is-on .tab-l { font-weight: 500; }

/* ── sheet ──────────────────────────────────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; z-index: 40; background: rgba(10,12,15,.42);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.scrim.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) { .scrim { align-items: center; } }

.sheet {
  width: 100%; max-width: 520px; background: var(--panel);
  border-radius: 22px 22px 0 0; padding: 12px 16px 34px;
  box-shadow: 0 -12px 40px rgba(0,0,0,.16);
  animation: sheet-in .24s ease-out; max-height: 86vh; overflow: auto;
}
@media (min-width: 1024px) {
  .sheet { border-radius: 18px; padding-bottom: 20px; border: 1px solid var(--line); animation: rise .2s ease-out; }
  .sheet-grab { display: none; }
}
.sheet-grab { width: 38px; height: 4px; border-radius: 99px; background: var(--line); margin: 0 auto 14px; }
.sheet-title { font: 600 17px var(--sans); padding: 0 2px 4px; }
html[lang="hi"] .sheet-title { font-family: var(--deva); }
.sheet-sub { font: 400 12.5px var(--sans); color: var(--fg-2); padding: 0 2px 14px; }
html[lang="hi"] .sheet-sub { font-family: var(--deva); }
.sheet-list { display: flex; flex-direction: column; gap: 8px; }
.sheet-opt {
  min-height: 56px; border-radius: 12px; border: 1px solid var(--line);
  display: flex; align-items: center; padding: 0 16px; gap: 12px; text-align: left;
}
.sheet-opt:hover { border-color: var(--gold); }
.sheet-opt.is-on { border: 1.5px solid var(--gold); background: rgba(200,155,63,.07); }
.sheet-opt-k { font: 600 14.5px var(--sans); }
.sheet-opt-v { font: 400 11.5px var(--mono); color: var(--fg-2); margin-top: 2px; }
.sheet-check { color: var(--gold-text); font: 600 13px var(--mono); }
.sheet-section { font: 500 11px var(--mono); color: var(--fg-2); letter-spacing: .08em; margin: 18px 0 8px; }
.sheet .btn { margin-top: 16px; height: 48px; border-radius: 12px; }

/* ── toasts ─────────────────────────────────────────────────────────────── */
.toasts {
  position: fixed; z-index: 60; left: 16px; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
}
@media (min-width: 1024px) { .toasts { left: auto; right: 24px; bottom: 24px; align-items: flex-end; } }
.toast {
  max-width: 420px; padding: 12px 16px; border-radius: 12px;
  background: var(--ink); color: var(--on-ink);
  font: 500 13px var(--sans); box-shadow: 0 10px 30px rgba(0,0,0,.22);
  animation: rise .22s ease-out; display: flex; gap: 10px; align-items: center;
}
html[lang="hi"] .toast { font-family: var(--deva); }
.toast-gold { background: var(--gold); color: #14171A; }