/* debt.css - the National Debt Clock (/national-debt/). Colours are the site's tokens only, so dark mode follows
   site.css section 6 (html[data-fs-theme="dark"]). */

.cv-debt-hero{ text-align:center; gap:6px; padding:24px 18px; border-top:4px solid var(--cv-red); }
.cv-debt-label{ margin:0; font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--cv-ink-3); }
.cv-debt-ticker{ margin:0; }
.cv-debt-ticker b{ display:inline-block; font-size:clamp(28px, 6.4vw, 56px); line-height:1.1; font-weight:800; color:var(--cv-ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; overflow-wrap:anywhere; }
.cv-debt-official{ margin:0; font-size:15px; color:var(--cv-ink-2); }
.cv-debt-official b{ color:var(--cv-ink); font-variant-numeric:tabular-nums; }
.cv-debt-hero .cv-note{ max-width:70ch; margin:6px auto 0; }

.cv-debt-sub{ font-size:12.5px; color:var(--cv-ink-3); }

/* chart */
.cv-debt-figure{ margin:0; }
.cv-debt-chart{ display:block; width:100%; height:auto; }
.cv-debt-chart .grid{ stroke:var(--cv-line); stroke-width:1; }
.cv-debt-chart .axis, .cv-debt-chart .tick{ stroke:var(--cv-line-2); stroke-width:1; }
.cv-debt-chart .line{ fill:none; stroke:var(--cv-blue); stroke-width:2.2; stroke-linejoin:round; }
.cv-debt-chart .area{ fill:var(--cv-blue-soft); stroke:none; }
.cv-debt-chart text{ fill:var(--cv-ink-3); font-size:12px; font-family:inherit; }

/* lifetime form */
.cv-debt-life{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.cv-debt-life label{ font-weight:700; color:var(--cv-ink); }
.cv-debt-life .cv-field{ width:9em; }
.cv-debt-life-out:empty{ display:none; }
.cv-debt-life-out{ display:grid; gap:8px; }
.cv-debt-life-out p{ margin:0; color:var(--cv-ink); line-height:1.55; }
.cv-debt-life-out .cv-tiles{ margin:0; }
.cv-debt-life-err{ color:var(--cv-red); }

/* bars in tables, drawn to scale by --w */
.cv-debt-bar{ display:block; height:10px; min-width:2px; width:var(--w, 0%); background:var(--cv-blue); border-radius:2px; opacity:.75; }
.cv-debt-years td:last-child, .cv-debt-agencies td:last-child{ width:22%; min-width:90px; vertical-align:middle; }
.cv-debt-pres td{ white-space:nowrap; }
.cv-debt-pres td:first-child{ white-space:normal; }

.cv-debt-history summary{ cursor:pointer; }
.cv-debt-history[open] summary{ margin-bottom:6px; }
.cv-debt-history .cv-tablebox{ max-height:480px; overflow:auto; }
.cv-debt-more{ margin:0; display:flex; flex-wrap:wrap; gap:10px; }

@media (max-width:600px){
  .cv-debt-years td:last-child, .cv-debt-agencies td:last-child, .cv-debt-years th:last-child, .cv-debt-agencies th:last-child{ display:none; }
}