/* ══════════════════════════════════════════════════════════════════════════
   DATA — every number the desk holds on the ten currencies, with a provenance
   attached to each one. The stylesheet for `/data.html` (`js/data.js`).

   WHY THIS FILE CARRIES SO MUCH CHROME. The page is ported from the reference
   desk, whose heading, intro, sub-head, footnote and card classes (`.chead`,
   `.chl`, `.cintro`, `.cnote`, `.dvsub`, `.dvsubp`, `.dvsrc`, `.dthbn`, `.foot`)
   live in `css/pairs-board.css`, `css/currency-board.css` and
   `css/master-dashboard-desk.css` — none of which a standalone document links.
   Linking one of those to borrow ten rules would drag in ~150K of a different
   page's layout, so the ten are declared here instead. `.sig` is the one that
   also exists in `app.css`; ours is the reference's shape and is scoped under
   `#app-shell` so the two never meet.

   NO LITERAL COLOUR ANYWHERE. Every colour is a `var(--token)`. The sixteen the
   reference names (`--ink --card --sunk --sunk2 --rule --rule2 --up --dn
   --amber --blue` and their tints) are NOT on `:root` — `css/app-sidebar.css`
   declares them inside its `#app-shell { … }` alias block, mapped onto the live
   palette. That is why every selector below is scoped under `#app-shell`: a rule
   that escaped that scope would resolve all sixteen to nothing and paint the
   element invisible. The one exception is the signed-out gate, which sits
   outside the shell and therefore uses app.css's own `:root` tokens.

   Fonts are `var(--fsans)` / `var(--fmono)`, also from the alias block — the
   reference's "IBM Plex Mono" is mapped there once and never named per rule
   (there is no Google Fonts request on this site).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The signed-out gate ─────────────────────────────────────────────────────
   Outside `#app-shell`, so it reads app.css's palette tokens directly. `.login`
   and friends come free from app.css; the one override is the cosmetic button,
   which ships `pointer-events:none` there because index.html overlays the real
   Google button on top of it. Here it is a plain link and has to be clickable. */
#gate .login-google-btn { pointer-events: auto; text-decoration: none; }
#gate .login-note {
  margin: 14px 0 0; font-size: 12.5px; line-height: 1.6;
  color: var(--text-muted); max-width: 44ch; text-align: center;
}

/* ── Page frame ───────────────────────────────────────────────────────────── */
#app-shell .appmain { min-width: 0; }
#view-data { display: block; padding-top: 0; }

/* The masthead: page word on the left, the newest stamp and the cross-links on
   the right. Sticky, like the reference's, so the view tabs stay reachable in a
   29-row table. */
#app-shell .dmast {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 0 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 30; background: var(--bg);
}
/* `margin: 0` because the element is an <h1> — the document's own name, and the only
   heading above the section titles, so a reader moving by headings lands on the page
   rather than opening on an h2. A browser's default h1 margin would push the strip open,
   and the size and weight below are the strip's, not the heading level's. The sibling
   Watchlist page carries the identical declaration for the identical reason. */
#app-shell .dmast .wm {
  margin: 0;
  font-family: var(--fmono); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--soft);
}
#app-shell .dmast .stat {
  margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end; font-family: var(--fmono); font-size: 11px; color: var(--faint);
}
#app-shell .dmast .stat .sep { width: 1px; height: 11px; background: var(--rule2); display: inline-block; }
#app-shell .dmast .stat .upd { color: var(--soft); }
#app-shell .dmast .mlink {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border: 1px solid var(--rule2); border-radius: 999px; background: var(--card);
  color: var(--soft); font-family: var(--fsans); font-size: 12px; text-decoration: none;
}
#app-shell .dmast .mlink:hover { border-color: var(--ink); color: var(--ink); }
/* app-sidebar.css stretches `.thm` to the full rail width when the rail is
   collapsed. That rule is scoped to #app-shell and therefore also catches the copy
   in our masthead, where a full-width theme button would swallow the row. */
#app-shell .dmast .thm,
#app-shell.nav-collapsed .dmast .thm { margin-left: 0; width: auto; padding: 5px 10px; }

/* ── Heading block (the reference's `.chead` family) ──────────────────────── */
#app-shell .chead { border-bottom: 1px solid var(--rule); padding-bottom: 22px; margin-bottom: 26px; }
#app-shell .chl {
  margin: 16px 0 10px; font-size: 23px; line-height: 1.3; font-weight: 700;
  letter-spacing: -.015em; color: var(--ink); max-width: 34ch;
}
#app-shell .chl.pbhl { margin-top: 18px; }
#app-shell .chl.dttitle { max-width: 36ch; }
#app-shell .cintro {
  margin: 14px 0 0; font-size: 15px; line-height: 1.68; color: var(--soft); max-width: 78ch;
}
#app-shell .cintro b { color: var(--ink); font-weight: 600; }

/* The freshness strip. A left-ruled recessed block, because it is a standing
   caveat rather than a finding: the legs below it are NOT from one moment. */
#app-shell .cnote {
  margin: 16px 0 0; max-width: 86ch; background: var(--sunk);
  border-left: 3px solid var(--rule2); border-radius: 0 8px 8px 0; padding: 13px 16px;
}
#app-shell .cnote .lb {
  display: block; font-family: var(--fmono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 6px;
}
#app-shell .cnote p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--soft); }
#app-shell .cnote p + p { margin-top: 7px; }
#app-shell .dstamps {
  display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 9px 0 0; padding: 0; list-style: none;
}
#app-shell .dstamps li {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 9px;
  border: 1px solid var(--rule2); border-radius: 999px; background: var(--card);
  font-size: 11.5px; color: var(--soft);
}
#app-shell .dstamps li i { font-style: normal; color: var(--faint); }
#app-shell .dstamps li b { font-family: var(--fmono); font-weight: 600; color: var(--ink); }
#app-shell .dwarn { margin: 9px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.6; color: var(--amber); }
#app-shell .dwarn li { margin: 2px 0; }

/* ── Sub-heads and footnotes ─────────────────────────────────────────────── */
#app-shell .dvsub {
  margin: 28px 0 8px; font-size: 15px; font-weight: 650; letter-spacing: -.005em; color: var(--ink);
}
#app-shell .dtsec .dvsub { display: flex; align-items: center; gap: 9px; }
#app-shell .dvsubp { margin: -2px 0 10px; font-size: 13px; line-height: 1.5; color: var(--soft); }
#app-shell .dvsrc { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: var(--faint); max-width: 92ch; }
#app-shell .dthbn { margin: 5px 0 0; font-size: 11px; line-height: 1.45; color: var(--faint); }
#app-shell .dthbn b { color: var(--ink); }
#app-shell .mut { margin: 0; font-size: 13.5px; color: var(--faint); }
#app-shell .foot {
  margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--rule2);
  font-family: var(--fmono); font-size: 10.5px; line-height: 1.75; color: var(--faint);
}
#app-shell .foot p { margin: 0 0 8px; }

/* ── Cards, pills, flags ─────────────────────────────────────────────────── */
#app-shell #view-data .card { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; }

/* The reference's three-state signal pill. `wn` (amber) is a WARNING — stale,
   missing, not-for-you — and is never a market direction. */
#app-shell #view-data .sig {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--fmono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
#app-shell #view-data .sig.up { background: var(--up-bg); border-color: var(--up-bd); color: var(--up); }
#app-shell #view-data .sig.dn { background: var(--dn-bg); border-color: var(--dn-bd); color: var(--dn); }
#app-shell #view-data .sig.nt { background: var(--nt-bg); border-color: var(--rule2); color: var(--nt); }
#app-shell #view-data .sig.wn { background: var(--amber-bg); border-color: var(--amber); color: var(--amber); }

/* `img.fl` is only styled inside `.fstack` in app-sidebar.css, so the flag the
   shared module emits needs its own ring here or it paints as a bare square. */
#app-shell #view-data img.fl {
  border-radius: 999px; object-fit: cover; vertical-align: -3px;
  box-shadow: 0 0 0 1px rgba(var(--hairline-rgb), .9);
}
#app-shell #view-data .fpair { display: inline-flex; align-items: center; }
#app-shell #view-data .fpair img.fl + img.fl { margin-left: calc(var(--fp, 16px) * -.35); }
/* The explanation card is appended to `#app-shell`, not to `#view-data` — it has to
   be, to sit outside the section every render clears — so the rule above cannot reach
   it, and its header flag, its two gap flags and all ten scoreboard flags painted as
   bare squares beside identical round ones in the table. Scoped rather than widened to
   `#app-shell img.fl`, which would outrank app-sidebar.css's own `.fstack img.fl` and
   restyle the rail. */
#app-shell .dthov img.fl {
  border-radius: 999px; object-fit: cover; vertical-align: -3px;
  box-shadow: 0 0 0 1px rgba(var(--hairline-rgb), .9);
}

/* The round group badge at the head of every group band and sub-head. */
#app-shell .dtgn {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 20px; height: 20px; border-radius: 999px; background: var(--blue-bg); color: var(--blue);
  font-family: var(--fmono); font-size: 10.5px; font-weight: 600; font-style: normal;
}
#app-shell .dtgn.dtgi { width: 28px; height: 28px; }
#app-shell .dtgn.dtgi svg { display: block; }

/* ── The control bar ─────────────────────────────────────────────────────── */
#app-shell .dtbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 22px 0 14px; }
#app-shell .dtviews {
  display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rule2);
  border-radius: 999px; padding: 3px; background: var(--card);
}
#app-shell .dtviews button {
  padding: 7px 15px; border: 0; border-radius: 999px; background: none;
  font: inherit; font-size: 13px; color: var(--soft); cursor: pointer;
}
#app-shell .dtviews button:hover { color: var(--ink); }
#app-shell .dtviews button[aria-selected="true"] { background: var(--ink); color: var(--bg); font-weight: 600; }
#app-shell .dtflipb {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  padding: 7px 14px; border: 1px solid var(--rule2); border-radius: 999px;
  background: var(--card); font: inherit; font-size: 13px; color: var(--soft);
  white-space: nowrap; cursor: pointer;
}
#app-shell .dtflipb[aria-pressed="true"] {
  border-color: var(--ink); background: var(--ink); color: var(--bg); font-weight: 600;
}

/* ── Currency pickers ────────────────────────────────────────────────────── */
#app-shell .dtpl {
  margin: 0 0 6px; font-family: var(--fmono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
#app-shell .dtpick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
#app-shell .dtp {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px;
  border-radius: 999px; border: 1px solid var(--rule2); background: var(--card);
  font: inherit; font-size: 12px; color: var(--soft); cursor: pointer;
}
#app-shell .dtp b { font-family: var(--fmono); font-weight: 600; color: var(--ink); }
#app-shell .dtp:hover { border-color: var(--ink); }
#app-shell .dtp[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
#app-shell .dtp[aria-pressed="true"] b { color: var(--bg); }
#app-shell .dtp[disabled] { opacity: .35; cursor: not-allowed; }
#app-shell .dtpicks { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ── The click affordance legend ─────────────────────────────────────────── */
#app-shell .dtclick {
  display: flex; align-items: baseline; gap: 10px; margin: 14px 0 8px;
  font-size: 12.5px; line-height: 1.5; color: var(--soft);
}
#app-shell .dtclk {
  font-family: var(--fmono); font-size: 13px; font-weight: 600; color: var(--ink); flex: 0 0 auto;
  text-decoration: underline dotted var(--faint); text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
#app-shell .dttable { padding: 0; }
#app-shell .dttable.dtfit { width: fit-content; max-width: 100%; }
/* `overflow: auto` on BOTH axes, with a real height, and both halves are load-bearing.
   Declaring `overflow-x` alone still makes this the scroll container — a `visible`
   overflow-y computes to `auto` the moment its partner is not visible — so the sticky
   column header resolved against a box that had no height to scroll and therefore never
   stuck. The all-ten table is seven bands and thirty-one rows: without it the row of
   currency codes is gone the moment you scroll, and every cell below the fold is an
   unlabelled number in one of ten unidentified columns. The geometry is the live Pairs
   board's own copy of this component (css/pairs-board.css). */
#app-shell .dtscroll {
  overflow: auto; max-width: 100%; border-radius: 11px;
  max-height: min(calc(100vh - 40px), 820px); overscroll-behavior: auto;
}
#app-shell .dtt {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
#app-shell .dtt.dtten { table-layout: fixed; min-width: 1040px; }
#app-shell .dtt.dttwo { table-layout: fixed; width: 780px; min-width: 780px; }
#app-shell .dtt col.dtcm { width: 236px; }
#app-shell .dtt col.dtcv { width: 118px; }
#app-shell .dtt col.dtcg { width: 108px; }
#app-shell .dtt col.dtcf { width: 200px; }
#app-shell .dtt col.dtcc { width: 100px; }
#app-shell .dtt th, #app-shell .dtt td {
  padding: 9px 12px; border-bottom: 1px solid var(--rule); text-align: right; vertical-align: middle;
}
#app-shell .dtt thead th {
  position: sticky; top: 0; z-index: 3; background: var(--sunk);
  font-size: 12px; font-weight: 600; color: var(--soft); white-space: nowrap;
  box-shadow: 0 1px 0 var(--rule);
}
#app-shell .dtt thead th b { font-family: var(--fmono); margin-left: 6px; color: var(--ink); }
#app-shell .dtt .dtm {
  position: sticky; left: 0; z-index: 1; text-align: left; background: var(--card);
  border-right: 1px solid var(--rule);
}
#app-shell .dtt thead .dtm { background: var(--sunk); z-index: 4; }
#app-shell .dtm .dtn { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ink); white-space: normal; }
#app-shell .dtm small { display: block; font-size: 10.5px; line-height: 1.35; color: var(--faint); white-space: normal; }
#app-shell .dtmb {
  display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 0; border: 0;
  background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 4px;
}
#app-shell .dtmb .dtn {
  text-decoration: underline dotted var(--faint); text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
#app-shell .dtmb:hover .dtn { color: var(--blue); text-decoration-color: var(--blue); text-decoration-style: solid; }
#app-shell .dtmb[aria-expanded="true"] .dtn { color: var(--blue); text-decoration-style: solid; }

#app-shell .dtcol {
  display: inline-flex; align-items: center; padding: 2px 4px; border: 0; border-radius: 6px;
  background: none; font: inherit; color: inherit; cursor: pointer;
}
#app-shell .dtcol b { margin-left: 6px; }
#app-shell .dtcol:hover b { color: var(--blue); text-decoration: underline; }
#app-shell .dtr:hover td, #app-shell .dtr:hover .dtm { background: var(--sunk); }
#app-shell .dtc { font-family: var(--fmono); font-size: 13px; color: var(--ink); white-space: nowrap; }
#app-shell .dtc.txt {
  white-space: normal; font-family: var(--fsans); font-size: 12px; line-height: 1.3; color: var(--soft);
}

/* The cell's own control. A real <button> rather than the reference's
   `tabindex="0"` span: it is a disclosure, so it gets Enter, Space and
   `aria-expanded` from the platform instead of from a keydown handler. */
#app-shell .dtv {
  display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit;
  color: inherit; text-align: right; cursor: pointer; border-radius: 4px;
  text-decoration: underline dotted var(--faint); text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
#app-shell .dtc.txt .dtv { text-align: left; text-underline-offset: 3px; }
#app-shell .dtv:hover { color: var(--blue); text-decoration-color: var(--blue); text-decoration-style: solid; }
#app-shell td.dtc:has(.dtv:hover) { background: var(--sunk2); }
#app-shell .dtv[aria-expanded="true"] {
  color: var(--blue); text-decoration-color: var(--blue); text-decoration-style: solid;
}
#app-shell .dtc.hi .dtv { color: var(--up); font-weight: 600; }
#app-shell .dtc.lo .dtv { color: var(--dn); font-weight: 600; }
#app-shell .dtc.txt.hi .dtv, #app-shell .dtc.txt.lo .dtv { color: var(--soft); font-weight: 600; }
#app-shell .dtna { color: var(--faint); font-style: normal; }

/* The freshness dot. Amber past the measure's own window, red past twice it. */
#app-shell .dtage {
  display: inline-block; width: 7px; height: 7px; border-radius: 999px;
  margin-left: 5px; vertical-align: 1px;
}
#app-shell .dtage.old { background: var(--amber); }
#app-shell .dtage.stale { background: var(--dn); }

/* Group band rows. The note carries the whole group's degradation state, once,
   rather than repeating "Not available to you" in ten 118px cells. */
#app-shell .dtgr th {
  padding: 18px 12px 8px; text-align: left; background: var(--card);
  border-bottom: 1px solid var(--rule2); scroll-margin-top: 84px;
}
#app-shell .dtgri {
  position: sticky; left: 12px; display: inline-flex; align-items: baseline; flex-wrap: wrap;
  gap: 4px 10px; max-width: min(900px, 86vw);
}
#app-shell .dtgri b { font-size: 14.5px; font-weight: 650; color: var(--ink); }
#app-shell .dtgri > span:last-child { font-size: 12.5px; font-weight: 400; color: var(--soft); white-space: normal; }
#app-shell .dtgnote {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--soft); white-space: normal;
  max-width: min(900px, 86vw);
}
/* Inside the table the note has to travel with the sticky first column, exactly as
   the band's own heading does; outside it, it is an ordinary paragraph. */
#app-shell .dtt .dtgnote { position: sticky; left: 12px; }
#app-shell .dtgnote.src { color: var(--faint); font-size: 11.5px; }
#app-shell .dtgap { color: var(--soft); }
#app-shell .dttwo td.dtfv, #app-shell .dttwo th.dtfh { text-align: left; }
#app-shell .dtfav {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px;
  border-radius: 999px; background: var(--up-bg); color: var(--up); font-size: 12px; font-weight: 600;
}

/* The flipped table: currencies down the side, two header rows. */
#app-shell .dtt.dtflip { min-width: 0; max-width: none; }
#app-shell .dtt.dtflip col { width: 120px; }
#app-shell .dtt.dtflip col.dtcc { width: 100px; }
#app-shell .dtt.dtflip thead .dtfg th { height: 44px; padding: 6px 10px; text-align: left; white-space: nowrap; }
#app-shell .dtt.dtflip thead .dtfm th {
  top: 44px; padding: 8px 10px 9px; text-align: left; vertical-align: bottom; white-space: normal;
}
#app-shell .dtt.dtflip thead th.dtcorner { top: 0; left: 0; z-index: 5; background: var(--sunk); vertical-align: bottom; }
#app-shell .dtt.dtflip .dtfgh { border-left: 1px solid var(--rule2); }
/* The group label travels with the sticky currency column, exactly as the upright
   table's band heading does (`.dtgri`). Without it the reader scrolls right through
   ~3,800px of columns and "Prices", "Central bank" and the rest slide off the left
   edge one by one, leaving labelled rows over unlabelled column groups — which is the
   one thing a two-row header exists to prevent. `left` is the 100px currency column
   plus the cell's own 10px padding. */
#app-shell .dtt.dtflip .dtfgi {
  position: sticky; left: 110px; display: inline-flex; align-items: center; gap: 8px;
}
#app-shell .dtt.dtflip .dtfgi b { font-size: 13px; font-weight: 650; color: var(--ink); }
#app-shell .dtt.dtflip .dtfm .dtn { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink); }
#app-shell .dtt.dtflip .dtfm small { font-size: 10.5px; font-weight: 400; line-height: 1.3; color: var(--faint); }
#app-shell .dtt.dtflip .dtgs { border-left: 1px solid var(--rule2); }
#app-shell .dtt.dtflip tbody .dtm { padding: 9px 12px; text-align: left; }
#app-shell .dtt.dtflip tbody .dtm .dtcol { white-space: nowrap; }

/* The group notes, above the flipped table rather than inside it. A `colgroup` header
   has nowhere to hang a band line, so the degradation state and the standing licensing
   footnotes move here — one block per group, each naming the group its columns belong
   to, so "not available to you", "not published" and "we could not load it" stay three
   different sentences in this view as well. */
#app-shell .dtfnotes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 20px; margin: 0 0 14px; max-width: 1080px;
}
#app-shell .dtfnote {
  padding: 10px 13px; border-left: 3px solid var(--rule2); border-radius: 0 8px 8px 0;
  background: var(--sunk);
}
#app-shell .dtfnh {
  display: block; margin-bottom: 4px; font-family: var(--fmono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
#app-shell .dtfnote .dtgnote { max-width: none; }
#app-shell .dtfnote .dtgnote + .dtgnote { margin-top: 6px; }

/* ── One currency ────────────────────────────────────────────────────────── */
#app-shell .dtonehd {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin: 0 0 8px; flex-wrap: wrap;
}
#app-shell .dtonehd b { font-family: var(--fmono); font-size: 22px; color: var(--ink); }
#app-shell .dtonehd span { display: block; font-size: 13px; color: var(--soft); }
#app-shell .dtonehd .lean { margin-left: auto; }
#app-shell .dtsec { scroll-margin-top: 84px; max-width: 1080px; }
#app-shell .dtlist { padding: 0 16px; }
#app-shell .dtli {
  display: grid; grid-template-columns: minmax(0, 1fr) 170px 150px minmax(0, .62fr);
  gap: 20px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule);
}
#app-shell .dtlist .dtli:last-child { border-bottom: 0; }
#app-shell .dtlw b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
#app-shell .dtlw p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--soft); }
#app-shell .dtuse { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--soft); }
#app-shell .dtuse > span {
  display: block; font-family: var(--fmono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 2px;
}
#app-shell .dtlv { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
#app-shell .dtbig {
  padding: 0; border: 0; background: none; font-family: var(--fmono); font-size: 20px;
  font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; cursor: pointer;
  text-align: left; text-decoration: underline dotted var(--rule2); text-underline-offset: 5px;
  border-radius: 4px;
}
#app-shell button.dtbig:hover,
#app-shell .dtbig[aria-expanded="true"] { text-decoration-color: var(--blue); color: var(--blue); }
#app-shell .dtbig.txt { font-family: var(--fsans); font-size: 15px; line-height: 1.35; font-weight: 600; }
/* The same slot when there is nothing to open: a dash, not a dead button. */
#app-shell span.dtbig { text-decoration: none; cursor: default; color: var(--faint); font-weight: 400; }
#app-shell .dtex { font-size: 11.5px; line-height: 1.45; color: var(--soft); }
#app-shell .dtls { min-width: 0; }
#app-shell .dtsp { display: block; overflow: visible; }
#app-shell .dtsp path { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
#app-shell .dtsp circle { fill: var(--blue); }
#app-shell .dtspl { display: block; margin-top: 2px; font-family: var(--fmono); font-size: 9.5px; color: var(--faint); }
#app-shell .dtlm {
  display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.45;
  color: var(--soft); min-width: 0;
}
#app-shell .dtdate { font-family: var(--fmono); font-size: 11px; color: var(--faint); }
#app-shell .dtdate.old { color: var(--amber); }
#app-shell .dtdate.stale { color: var(--dn); }
#app-shell .dtnote { font-size: 11px; color: var(--faint); }

/* ── The central-bank panel ──────────────────────────────────────────────── */
#app-shell .dtcbpanel { margin: 0 0 12px; padding: 16px 18px; max-width: 1080px; }
#app-shell .dtcbph { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
#app-shell .dtcbph b { font-size: 15px; font-weight: 650; color: var(--ink); }
#app-shell .dtcbph span { font-size: 12.5px; color: var(--soft); }
#app-shell .dtcbph .dtlean { margin-left: auto; }
#app-shell .dtlean {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
}
#app-shell .dtlean.up { background: var(--up-bg); color: var(--up); }
#app-shell .dtlean.dn { background: var(--dn-bg); color: var(--dn); }
#app-shell .dtlean.nt { background: var(--sunk2); color: var(--soft); }
#app-shell .dtcbgrid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px 22px;
}
#app-shell .dtcbgrid p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--ink); }
#app-shell .dtcbgrid p.dtcbq { font-size: 12.5px; color: var(--soft); }
#app-shell .dtcbu { list-style: none; margin: 0 0 4px; padding: 0; font-size: 12.5px; color: var(--soft); }
#app-shell .dtcbu li { padding: 2px 0; }
#app-shell .dtcbu b { font-family: var(--fmono); color: var(--ink); }
#app-shell .dtcbn { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--soft); }
#app-shell .dtcbn b { font-family: var(--fmono); color: var(--ink); }
#app-shell .dtcbsp {
  display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding-top: 4px;
  border-top: 1px solid var(--rule);
}
#app-shell .dtcbsp a, #app-shell .dtcbsp .spr {
  display: grid; grid-template-columns: 86px minmax(0, 240px) minmax(0, 1fr); gap: 12px;
  padding: 4px 0; font-size: 12.5px; color: var(--soft); text-decoration: none;
}
#app-shell .dtcbsp .dd { font-family: var(--fmono); font-size: 11px; color: var(--faint); }
#app-shell .dtcbsp b { color: var(--ink); font-weight: 600; }
#app-shell .dtcbsp a:hover b { color: var(--blue); text-decoration: underline; }
#app-shell .dtcbnone { margin-top: 12px; }
#app-shell .dtsrcl { color: var(--blue); text-decoration: none; font-weight: 600; }
#app-shell .dtsrcl:hover { text-decoration: underline; }

/* ── The explanation card ────────────────────────────────────────────────── */
#app-shell .dthov {
  position: fixed; z-index: 80; width: min(380px, calc(100vw - 20px));
  padding: 12px 14px 13px; text-align: left; overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); border: 1px solid var(--rule2); border-radius: 12px;
  /* The palette's own popover shadow rather than the reference's literal rgba:
     editorial carries depth with a hairline, not a glow, and a hardcoded black
     drop would be the one thing on the page that stops following the switch. */
  box-shadow: var(--tooltip-shadow);
}
#app-shell .dthov.wide { width: min(430px, calc(100vw - 20px)); }
#app-shell .dthov.two { width: min(760px, calc(100vw - 20px)); }
#app-shell .dthtwo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 0 18px;
}
#app-shell .dthtwo > div + div { padding-left: 18px; border-left: 1px solid var(--rule); }
#app-shell .dthclose {
  position: sticky; top: 0; float: right; z-index: 1; width: 26px; height: 26px;
  margin: -4px -6px 0 8px; border: 0; border-radius: 7px; background: var(--card);
  color: var(--faint); font-size: 19px; line-height: 26px; cursor: pointer;
}
#app-shell .dthclose:hover { color: var(--ink); background: var(--sunk); }
#app-shell .dthk {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 6px;
  font-size: 12px; color: var(--soft);
}
#app-shell .dthk b { font-family: var(--fmono); font-size: 13px; color: var(--ink); }
#app-shell .dthk b.dthn { font-family: var(--fsans); font-size: 14px; font-weight: 650; }
#app-shell .dthv {
  font-family: var(--fmono); font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--ink);
}
#app-shell .dthv.txt { font-family: var(--fsans); font-size: 15px; line-height: 1.4; }
#app-shell .dths { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink); }
#app-shell .dthbl {
  display: block; margin-bottom: 5px; font-family: var(--fmono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
#app-shell .dthx {
  margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--rule);
  font-size: 11.5px; line-height: 1.5; color: var(--faint);
}
#app-shell .dthd {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px;
  margin: 9px 0 0; padding-top: 8px; border-top: 1px solid var(--rule); font-size: 11.5px;
}
#app-shell .dthd dt { color: var(--faint); }
#app-shell .dthd dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
#app-shell .dthold { color: var(--amber); }
#app-shell .dthstale { color: var(--dn); }
#app-shell .dthb { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid var(--rule); }
#app-shell .dthb ol {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr;
  grid-auto-flow: column; gap: 1px 14px;
}
#app-shell .dthb ol.one { grid-template-columns: 1fr; grid-auto-flow: row; }
#app-shell .dthb li {
  display: flex; align-items: center; gap: 6px; margin: 0 -5px; padding: 2px 5px;
  border-radius: 5px; font-size: 12px; color: var(--soft);
}
#app-shell .dthb li.me { background: var(--blue-bg); box-shadow: inset 2px 0 0 var(--blue); }
#app-shell .dthb li.me b, #app-shell .dthb li.me .v { color: var(--blue); }
#app-shell .dthb li .p { width: 16px; text-align: right; font-family: var(--fmono); font-size: 10px; color: var(--faint); }
#app-shell .dthb li b { font-family: var(--fmono); color: var(--ink); }
#app-shell .dthb li .v { margin-left: auto; font-family: var(--fmono); font-size: 11.5px; color: var(--ink); white-space: nowrap; }
#app-shell .dthov .dths + .dthbl, #app-shell .dthov .dthv + .dthbl { margin-top: 14px; }
#app-shell .dthov > .dthbl, #app-shell .dtcb > .dthbl { margin: 10px 0 3px; }
#app-shell .dtcb .dths { margin-top: 6px; }
#app-shell .dtcb .dthbl, #app-shell .dtcbpanel .dthbl {
  display: block; margin: 10px 0 4px; font-family: var(--fmono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
#app-shell .dtcbh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#app-shell .dtnsay { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; color: var(--soft); }
#app-shell .dtnsay li { margin: 2px 0; }

/* ── Focus, degraded states, empty states ────────────────────────────────── */
/* Scoped to `.appmain`, not to `#view-data`: the masthead's two cross-links and its
   theme button are siblings of the content section, and under the narrower selector
   they were the only three controls on screen falling back to the browser's own ring
   while the rail and every cell carried the site's. app.css ships no global rule to
   inherit, so it is declared here. */
#app-shell .appmain button:focus-visible,
#app-shell .appmain a:focus-visible,
#app-shell .dthov button:focus-visible,
#app-shell .dthov a:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px;
}
/* The card itself takes focus when it opens (it is `tabindex="-1"`), and a ring
   around the whole popover would read as an editable field rather than as a place the
   reader has been moved to. The close button inside it keeps its own ring. */
#app-shell .dthov:focus { outline: none; }
#app-shell .dnotice {
  margin: 18px 0 0; padding: 14px 16px; border: 1px solid var(--rule2); border-radius: 12px;
  background: var(--card); font-size: 13.5px; line-height: 1.6; color: var(--soft); max-width: 78ch;
}
#app-shell .dnotice b { color: var(--ink); }
#app-shell .dnotice .dretry {
  display: inline-flex; align-items: center; margin-top: 10px; padding: 6px 13px;
  border: 1px solid var(--rule2); border-radius: 999px; background: var(--card);
  font: inherit; font-size: 12.5px; color: var(--blue); cursor: pointer;
}
#app-shell .dnotice .dretry:hover { border-color: var(--blue); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* The value column is CAPPED, not `auto`. An `auto` track takes its max-content
     width before a `1fr` track gets anything, and the widest thing in it is the unit
     caption — "percentage points over five trading days" is 44 characters, which on a
     390px phone claimed roughly three-quarters of the row and left the measure name,
     its explanation and its "what you can do with it" note about eight characters a
     line. Capping the track at 40% and the caption's own width puts the prose back. */
  #app-shell .dtli { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); gap: 8px 14px; }
  #app-shell .dtex { max-width: 22ch; }
  #app-shell .dtls, #app-shell .dtlm { grid-column: 1 / -1; }
  #app-shell .dtpicks { grid-template-columns: 1fr; }
  #app-shell .dtcbgrid { grid-template-columns: 1fr; }
  #app-shell .dtt .dtm { min-width: 170px; }
  #app-shell .dtviews button { padding: 6px 11px; font-size: 12px; }
  #app-shell .dtonehd { flex-wrap: wrap; }
  #app-shell .dtonehd .lean { margin-left: 0; }
  #app-shell .dtflipb { margin-left: 0; }
  #app-shell .dmast { position: static; }
  #app-shell .dtt thead th { position: static; }
  /* With the header no longer sticking there is nothing for an inner vertical
     scrollport to buy, and a nested scroll area on a phone is a trap rather than a
     convenience: the table grows and the page scrolls. */
  #app-shell .dtscroll { max-height: none; }
  #app-shell .dtcbsp a, #app-shell .dtcbsp .spr { grid-template-columns: 70px minmax(0, 1fr); }
  #app-shell .dtcbsp a span:last-child, #app-shell .dtcbsp .spr span:last-child { grid-column: 1 / -1; }
  #app-shell .dthtwo { grid-template-columns: 1fr; }
  #app-shell .dthtwo > div + div { padding-left: 0; border-left: 0; margin-top: 12px; }
  #app-shell .dthb ol { grid-template-columns: 1fr; grid-auto-flow: row; }
}
@media (max-width: 560px) {
  /* The two declarations the Watchlist's copy of this masthead carries, restated here so
     the strip is the SAME SHAPE on both pages at phone width. Without them the stamp and
     the cross-links stayed pushed right by `margin-left:auto` here while they sat left on
     the sibling page, and the row was a few pixels taller — so tapping between two pages
     that link to each other from inside these headers made the header visibly jump, which
     is the one thing the ported strip exists to prevent. */
  #app-shell .dmast { gap: 10px; }
  #app-shell .dmast .stat { margin-left: 0; justify-content: flex-start; }
  #app-shell .chl { font-size: 20px; }
  #app-shell .dtt.dttwo { width: 100%; min-width: 560px; }
  #app-shell .dtlist { padding: 0 12px; }
  #app-shell .dtcbpanel { padding: 14px; }
}
@media print {
  #app-shell .dtbar, #app-shell .dtflipb, #app-shell .dthov,
  #app-shell .side, #app-shell .dtpick, #app-shell .dtpl { display: none !important; }
  #app-shell .dtt thead th { position: static; }
  #app-shell .dmast { position: static; }
  /* A scrollport prints as one clipped screenful. On paper the table runs its full
     length or it is not a record of anything. */
  #app-shell .dtscroll { max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  #app-shell #view-data * { transition: none !important; animation: none !important; }
}