/* Economy, Banks, Government money and Accountability (sections/economy.py, banks.py, government.py,
   accountability.py, _recui.py). Loaded only on those pages, after biz.css; uses its tokens (DESIGN.md).
   Replaces the old "Economy and Banks" block in biz.css (.eco-*, .yc*, .bk-states), which these pages
   no longer use. */

/* ---------- Subnav (On the record's .subnav): 1px ink rules, quiet links, the current one underlined ---------- */
.rx-subnav { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); margin: 0 0 48px; }
.rx-sn { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 12px 0 13px; font-size: 15px; font-weight: 600; }
.rx-sn a { color: var(--quiet); text-decoration: none; white-space: nowrap; }
.rx-sn a:hover { color: var(--ink); text-decoration: underline; }
.rx-sn a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ---------- Headings inside sections ---------- */
.rx-h3 { font-size: 19px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; margin: 0 0 12px; }
.rx-gap { margin-top: 36px; }
.blk .g2 + .g2 { margin-top: 40px; }
.rx-caveat { font-size: 15px; max-width: 80ch; margin: 18px 0 24px; }
.blk:first-child .rx-caveat:first-child { margin-top: 0; }

/* ---------- Number cells (On the record's .tally): the figure first, label, date, trend ---------- */
.rx-tally { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 24px; }
.rx-t { min-width: 0; padding: 10px 0 22px; border-top: 2px solid var(--ink); }
.rx-t > b { display: block; font-size: 40px; line-height: 1; letter-spacing: -.04em; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rx-t .lbl { display: block; margin-top: 8px; font-size: 15px; line-height: 1.3; color: var(--ink); font-weight: 600; }
.rx-t .lbl a { text-decoration: none; }
.rx-t .lbl a:hover { text-decoration: underline; }
.rx-t .when { display: block; margin-top: 3px; font-size: 13px; color: var(--quiet); font-variant-numeric: tabular-nums; }
.rx-t .when .chg { font-size: 13px; }
.rx-t .spark { height: 36px; margin-top: 10px; }
.rx-t .nt { display: block; margin-top: 6px; font-size: 13px; color: var(--quiet); }
.rx-t .s { display: block; margin-top: 4px; font-size: 12px; color: var(--quiet); }
.rx-t .s a { color: var(--cite); text-decoration: none; }
.rx-t .s a:hover { text-decoration: underline; }

/* ---------- Charts (On the record's .chart): navy k0 line, rail grid, quiet labels, 13px caption ---------- */
.rx-chart { margin: 0; min-width: 0; }
.rx-chart .rx-v { margin: -4px 0 10px; font-size: 26px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rx-chart .rx-v .chg { font-size: 14px; letter-spacing: 0; margin-left: 4px; }
.rx-chart .rx-v .when { font-size: 13px; font-weight: 400; color: var(--quiet); letter-spacing: 0; margin-left: 6px; }
.rx-chart figcaption { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--quiet); max-width: 72ch; }
.rx-chart figcaption a { color: var(--cite); text-decoration: none; }
.rx-chart figcaption a:hover { text-decoration: underline; }
.rx-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.rx-charts.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lc .ln { stroke: var(--k0); stroke-width: 2; stroke-linejoin: round; }
.lc .ar { fill: var(--k0); fill-opacity: .06; }
.lc .gr { stroke: var(--rail); }
.lc text { font-size: 12px; fill: var(--quiet); font-variant-numeric: tabular-nums; }

/* Yield curve: latest in navy k0 with points, a month earlier k2 dashed, a year earlier k6 */
.rx-yc { width: 100%; height: auto; display: block; }
.rx-yc text { font: 12px var(--sans); fill: var(--quiet); }
.rx-yc .gr { stroke: var(--rail); }
.rx-yc polyline { fill: none; stroke-width: 2; stroke-linejoin: round; }
.rx-yc .y0 { stroke: var(--k0); stroke-width: 2.5; }
.rx-yc .y0d { fill: var(--k0); }
.rx-yc .y1 { stroke: var(--k2); stroke-dasharray: 6 4; }
.rx-yc .y2 { stroke: var(--k6); }
.rx-leg { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 8px 0 0; font-size: 13px; color: var(--quiet); }
.rx-leg i { display: inline-block; width: 22px; height: 0; border-top: 3px solid; vertical-align: middle; margin-right: 6px; }
.rx-leg .y0 { border-color: var(--k0); }
.rx-leg .y1 { border-color: var(--k2); border-top-style: dashed; }
.rx-leg .y2 { border-color: var(--k6); }

/* ---------- Ranking tables: filter box (label above), count, "Show all" ---------- */
.rx-ctrl { align-items: flex-end; }
.rx-find { min-width: 280px; }
.rx-find .fld { min-width: 0; width: 100%; }
.rx-cnt { font-size: 14px; color: var(--quiet); padding-bottom: 7px; }
.rx-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 16px 0 0; font-size: 14px; color: var(--quiet); }
.rx-all { font: 600 14px/1.2 var(--sans); padding: 8px 14px; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); cursor: pointer; }
.rx-all:hover { background: var(--ink); color: var(--paper); }
.rx-all:disabled { cursor: progress; opacity: .7; }
.tbl abbr { text-decoration: none; }
.tbl .eco-sp, .tbl .rx-sp { width: 110px; height: 26px; margin: 0; }
.tbl td b { font-weight: 800; }

/* Square links between sibling pages (years, decades): On the record's .ix-others */
.rx-years { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; font-size: 14px; font-variant-numeric: tabular-nums; }
.rx-years a, .rx-years b { display: inline-block; padding: 5px 9px; border: 1px solid var(--faint); text-decoration: none; font-weight: 600; }
.rx-years a:hover { border-color: var(--ink); }
.rx-years b { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Dated feeds: tighter when two sit side by side */
.g2 .rx-feed > li { grid-template-columns: 64px minmax(0, 1fr); gap: 2px 14px; }
.rx-feed .what a { font-weight: 600; }
.rx-feed .x a.cite { color: var(--cite); font-weight: 400; }

/* States grid (banks) */
.rx-states { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 28px; border-top: 2px solid var(--ink); }
.rx-states a { display: block; padding: 10px 0 11px; border-bottom: 1px solid var(--rail); text-decoration: none; }
.rx-states b { display: block; font-weight: 600; }
.rx-states span { font-size: 13px; color: var(--quiet); font-variant-numeric: tabular-nums; }
.rx-states a:hover b { text-decoration: underline; }

/* Identity block on detail pages (banks by state) */
.rx-id { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -8px 0 20px; font-size: 15px; color: var(--quiet); }
.rx-id b { color: var(--ink); font-weight: 600; }

@media (max-width: 1099px) {
  .rx-charts.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .rx-charts, .rx-charts.c3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rx-subnav { margin-bottom: 32px; }
  .rx-sn { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 20px; }
  .rx-sn::-webkit-scrollbar { display: none; }
  .rx-tally { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .rx-t > b { font-size: 30px; }
  .rx-t .lbl { font-size: 14px; }
  .rx-find { min-width: 0; width: 100%; }
  .rx-chart .rx-v { font-size: 22px; }
  .g2 .rx-feed > li { grid-template-columns: minmax(0, 1fr); }
  .rx-states { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
}

/* Line charts drawn by _recui.SCRIPT (svg.rx-lc) */
.rx-lc .bs { stroke: var(--ink); stroke-width: 1; }
.rx-lc .gr.z { stroke: var(--quiet); }
.rx-lc .tk { stroke: var(--ink); }
.rx-lc .dt { fill: var(--k0); stroke: var(--paper); stroke-width: 1.5; }
.rx-lc .hv line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; }
.rx-lc .hv circle { fill: var(--paper); stroke: var(--k0); stroke-width: 2; }
.rx-lc .hv text { font-size: 12px; font-weight: 800; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.nw { white-space: nowrap; }
@media (max-width: 640px) {
  .rx-feed .when br { display: none; }
  .rx-feed .when { padding-top: 0; }
}
@media (max-width: 640px) {
  .tbl td:not(.n) { overflow-wrap: anywhere; }
  .tbl th { overflow-wrap: normal; }
}

/* Number cells: four across beside the rail; sparklines in navy (direction isn't good or bad here) */
.rx-tally { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.rx-t .spark path { stroke: var(--k0); }
.rx-curve { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; align-items: start; }
@media (max-width: 960px) { .rx-curve { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .rx-tally { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rx-yc text { font-size: 16px; } }
.rx-t .s, .rx-chart figcaption, .src { overflow-wrap: anywhere; }