/* ============================================================================
   Figures: the .fig card shell (chart or table), the accessible-table
   convention every figure shares, and the measure-key definition lists.
   Tokens only — see tokens.css.
   ========================================================================= */

@layer figures {

.fig {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-top: var(--s5);
}
.fig-head {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  align-items: baseline;
  padding: var(--s4) var(--s4) var(--s3);
  border-bottom: 1px solid var(--rule);
}
.fig-head h3 { font-size: var(--fs-h3); font-weight: 650; letter-spacing: -0.005em; }
.basis-chip {
  margin-left: auto;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: 0.06em; color: var(--ink-3);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 2px var(--s2); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fig--nonnominal { border-style: dashed; border-color: var(--rule-strong); }
.fig--nonnominal .fig-head .eyebrow { color: var(--warn-ink); margin-bottom: var(--s1); }

/* No forced min-width here: Plotly's responsive:true (app.js CONFIG) sizes
   every chart's SVG to this container, and app.js's density() thins tick
   labels/margins/legend as the container shrinks (see widthBucket()) so nothing
   needs to scroll to stay legible. overflow-x stays as a safety net, not the
   plan -- a chart that actually overflows here is a bug, not a fallback. */
.fig-plot { overflow-x: auto; overflow-y: hidden; padding: var(--s3) var(--s2); }
.fig-state {
  min-height: 260px; display: flex; align-items: center; justify-content: center;
  background: var(--surface-sunken); margin: var(--s3);
  border-radius: var(--radius);
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-3);
  text-align: center; padding: var(--s5);
}
.fig-state[data-kind="error"] { color: var(--err-ink); }
.fig-foot {
  border-top: 1px solid var(--rule);
  padding: var(--s3) var(--s4) var(--s4);
}
.fig-foot .caption { font-size: var(--fs-small); color: var(--ink-2); max-width: 72ch; }
.fig-foot .note { font-size: var(--fs-small); color: var(--ink-3); margin-top: var(--s2); max-width: 72ch; }

/* a figure whose primary content is a table, not a chart (site/index.html's
   rate-reset section) — same card shell, no min-width scroll rail forced. */
.fig-table { padding: var(--s3) var(--s4); }
.fig-table .table-wrap { margin-top: 0; }

/* the two debt measures: definition + coverage, under §1's figure. Each
   measure is a <details> so the reader gets the label first (the summary,
   always visible) and the definition prose on demand -- see
   renderMeasureNotes() in app.js. */
.measures { margin-top: var(--s3); }
.measures .note { font-size: var(--fs-small); color: var(--ink-3); margin-top: var(--s2); max-width: 72ch; }
.measure-key { max-width: 72ch; }
.measure-key details { border-top: 1px solid var(--rule); }
.measure-key details:first-child { border-top: 0; }
.measure-key summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--ink); display: flex; align-items: center; gap: 0;
  /* Same ~50px-tall touch target this repo standardised on for
     details.datatable > summary and .theme-toggle button below -- reusing
     their exact padding tokens rather than inventing a new size. */
  padding: var(--s4) var(--s2);
}
.measure-key summary .swatch { flex: none; }
.measure-key summary::-webkit-details-marker { display: none; }
.measure-key summary:hover { color: var(--ink-2); }
.measure-key details > .definition {
  margin: 0 var(--s2) var(--s3) 15px;
  font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2);
}

details.datatable { margin-top: var(--s3); }
details.datatable > summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  display: inline-block; border-bottom: 1px solid var(--rule-strong);
  /* This is the affordance that reveals the accessible data table -- closed
     by default, and on a phone the table is often the better read of the
     figure. A 2px bottom padding used to leave it a ~21px-tall tap target,
     well under the ~44px guideline; padding on every side now clears that
     without changing the label's own size. */
  padding: var(--s4) var(--s2);
}
details.datatable > summary::-webkit-details-marker { display: none; }
details.datatable > summary:hover { color: var(--ink); }
.table-wrap { overflow-x: auto; margin-top: var(--s3); }
table {
  border-collapse: collapse; width: 100%;
  font-family: var(--font-mono); font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
th, td { text-align: right; padding: var(--s1) var(--s3); border-bottom: 1px solid var(--rule); }
/* Prose wraps; values do not. This rule used to be a blanket
   white-space: nowrap on every cell, so a header like "Long (10-30y notes &
   bonds)" or a source citation reserved its full single-line width in every
   table that carried it -- which is why seven of the eight tables on this
   page overflowed their card and grew a horizontal scrollbar. Now anything
   containing real words is allowed to wrap, and buildTable marks the cells
   that must not: a dollar figure, a percent, a date, a year. Those keep
   nowrap because breaking "$969.9B" or "2026-07-31" across two lines makes
   it unreadable, and they are short enough to cost nothing. */
/* break-word, not anywhere: anywhere will break a header mid-word wherever
   it must ("Matu-rity year", "Floatin-g rate notes") to hit a target
   column width, which is a bad trade for a table that is now allowed to
   scroll in its own .table-wrap (see figures.css's .table-wrap and
   tests/test_no_horizontal_scroll.py's module docstring for why charts and
   tables are held to different contracts). break-word only breaks a long
   glued token like "(inflation-indexed)" when there is truly no other place
   to wrap, and per spec it does NOT shrink a table column's auto-layout
   min-content width the way anywhere does -- so columns land wider than
   before. That is expected, not a regression: the table's own horizontal
   scrollbar absorbs it, the page does not. */
th, td { white-space: normal; overflow-wrap: break-word; }
th.num, td.num { white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { color: var(--ink-3); font-weight: 500; border-bottom: 1px solid var(--rule-strong); }
tbody tr:nth-child(even) { background: var(--surface-sunken); }
.swatch {
  display: inline-block; width: 9px; height: 9px; border-radius: 1px;
  margin-right: 6px; vertical-align: 0;
}

/* the one sentence in a figure's footer that carries a finding */
.caption.finding {
  border-left: 2px solid var(--rule-strong);
  padding-left: var(--s3);
  color: var(--ink);
}

/* ----------------------------------------------------------------------
   The rate KPI row (site/index.html's #reset). Three tiles, plus a small
   delta tile between the second and third: the two figures whose GAP is the
   section's point. Deliberately NOT one chart -- the blended rate covers all
   federal debt while the other two cover only the maturing nominal buckets,
   so one axis would imply they are the same kind of number. Tokens only.
   -------------------------------------------------------------------- */
.kpi-row {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: var(--s3); margin-top: var(--s5);
}
.kpi {
  flex: 1 1 180px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s4);
}
.kpi-label {
  font-size: var(--fs-small); color: var(--ink-2); line-height: 1.35;
  max-width: 24ch;
}
.kpi-value {
  font-family: var(--font-mono); font-size: var(--fs-h2); font-weight: 600;
  color: var(--ink); margin-top: var(--s2);
  font-variant-numeric: tabular-nums;
}
.kpi-meta {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: 0.06em; color: var(--ink-3); margin-top: var(--s1);
}
/* The gap between the old rate and its replacement, rendered between the two
   tiles it belongs to. Not a tile of its own: no border, no card. */
.kpi--delta {
  flex: 0 0 auto; border: none; background: none;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--s2);
}
.kpi-arrow {
  font-family: var(--font-mono); font-size: var(--fs-h3); font-weight: 650;
  color: var(--ink-2); white-space: nowrap;
}

} /* @layer figures */