/* usdebt.io — engraved treasury ledger register.
   Ground: ink-green banknote. Accents: gold foil, aged cream, copper alarm. */

:root {
  --ink: #071110;
  --ground: #0B1712;
  --panel: #10201a;
  --panel-2: #0e1c16;
  --line: #24382e;
  --line-soft: #1a2c23;
  --gold: #e3c98a;
  --gold-dim: #b99b5e;
  --gold-faint: #8a7648;
  --cream: #ede5d0;
  --muted: #8fa396;
  --faint: #5c7264;
  --copper: #c9705a;
  --sage: #7fa98c;
  --slate: #7c96aa;
  --serif: "Old Standard TT", "Iowan Old Style", Georgia, serif;
  --mono: "Spline Sans Mono", "SF Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ground);
  color: var(--cream);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(1200px 600px at 50% -100px, #12251c 0%, transparent 70%),
    radial-gradient(900px 500px at 50% 110%, #0e1e17 0%, transparent 70%);
}

::selection { background: var(--gold-dim); color: var(--ink); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-faint); }
a:hover { color: #f4e3b2; border-bottom-color: var(--gold); }

/* ---------- masthead ---------- */

header.masthead { text-align: center; padding: 64px 24px 24px; }

.seal { width: 84px; height: 84px; margin: 0 auto 20px; display: block; }

.masthead h1 {
  font-size: clamp(34px, 5.5vw, 58px);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
}
.masthead h1 .amp { color: var(--gold); }

.masthead .sub {
  margin-top: 10px;
  color: var(--muted);
  font-size: 17px;
  letter-spacing: 0.06em;
}

.rule-ornament { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 26px auto 0; max-width: 560px; }
.rule-ornament .bar { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold-faint)); }
.rule-ornament .bar.r { background: linear-gradient(90deg, var(--gold-faint), transparent); }
.rule-ornament .diamond { width: 7px; height: 7px; background: var(--gold-dim); transform: rotate(45deg); }

/* ---------- counter ---------- */

.counter-stage { text-align: center; padding: 34px 12px 8px; }

.counter-label {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}

#debt-counter {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 8.2vw, 96px);
  font-weight: 500;
  color: var(--gold);
  text-shadow: 0 0 46px rgba(227, 201, 138, 0.16);
  margin: 10px 0 4px;
  letter-spacing: 0.01em;
}

.counter-asof { font-family: var(--mono); font-size: 13px; color: var(--faint); }
.counter-asof b { color: var(--muted); font-weight: 500; }

.statchips { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 34px auto 8px; max-width: 980px; }
.chip {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 14px 22px; min-width: 175px;
}
.chip .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.chip .v { font-family: var(--mono); font-size: 26px; color: var(--cream); margin-top: 4px; font-variant-numeric: tabular-nums; }
.chip .v small { font-size: 14px; color: var(--faint); }
.chip.alarm .v { color: var(--copper); }

/* ---------- sections ---------- */

section { padding: 74px 0 12px; }

.sec-head { display: flex; align-items: baseline; gap: 18px; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 28px; }
.sec-head .no { font-family: var(--mono); color: var(--gold-dim); font-size: 15px; letter-spacing: 0.2em; }
.sec-head h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 400; letter-spacing: 0.03em; }
.sec-head .asof { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: 0.08em; }

.prose { max-width: 760px; color: #d8d0bd; }
.prose p { margin-bottom: 1.1em; }
.prose .lede { font-size: 22px; line-height: 1.55; color: var(--cream); }
.prose strong { color: var(--gold); font-weight: 600; }
.footnote, .src { font-family: var(--mono); font-size: 12px; color: var(--faint); line-height: 1.7; }
.src a { color: var(--faint); border-bottom-color: var(--line); }
.src a:hover { color: var(--muted); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
@media (max-width: 880px) { .grid2 { grid-template-columns: 1fr; } }

/* ---------- panels, viz ---------- */

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 22px; }
.panel h3 { font-weight: 400; letter-spacing: 0.04em; font-size: 21px; margin-bottom: 6px; }
.panel .hint { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-bottom: 14px; }

.viz-toolbar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.tbtn {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; color: var(--muted); border: 1px solid var(--line);
  border-radius: 3px; padding: 7px 14px; cursor: pointer; white-space: nowrap;
}
.tbtn:hover { color: var(--cream); border-color: var(--gold-faint); }
.tbtn.on { background: var(--gold-dim); border-color: var(--gold-dim); color: var(--ink); }

.chart-svg { width: 100%; height: auto; display: block; }
.chart-tip {
  position: fixed; pointer-events: none; z-index: 30; display: none;
  background: #081310; border: 1px solid var(--gold-faint); border-radius: 4px;
  padding: 8px 12px; font-family: var(--mono); font-size: 12.5px; color: var(--cream);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5); white-space: nowrap;
}
.chart-tip .d { color: var(--muted); }

/* treemap */
#treemap { position: relative; width: 100%; height: 560px; }
.tm-cell {
  position: absolute; overflow: hidden; border-radius: 3px; cursor: pointer;
  border: 1px solid rgba(7, 17, 16, 0.9);
  transition: filter 0.15s ease;
  padding: 10px 12px;
}
.tm-cell:hover { filter: brightness(1.22); z-index: 2; }
.tm-cell .n { font-family: var(--serif); font-size: 15px; line-height: 1.25; color: var(--ink); font-weight: 600; }
.tm-cell .a { font-family: var(--mono); font-size: 12.5px; color: rgba(7,17,16,0.75); margin-top: 3px; }
.tm-cell.dark .n { color: var(--cream); }
.tm-cell.dark .a { color: var(--muted); }
.tm-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.tm-legend .lg { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.tm-legend .sw { width: 12px; height: 12px; border-radius: 2px; }

/* holder bars */
.hbar-row { display: grid; grid-template-columns: 200px 1fr 130px; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.hbar-row .name { font-size: 16.5px; color: #d8d0bd; }
.hbar-row .name small { color: var(--faint); font-family: var(--mono); font-size: 11px; }
.hbar-track { height: 14px; background: var(--panel-2); border-radius: 2px; overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.hbar-row .amt { font-family: var(--mono); font-size: 14px; color: var(--cream); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .hbar-row { grid-template-columns: 120px 1fr 92px; } .hbar-row .name { font-size: 14px; } }

/* explorer — the ledger, sliced */
.ex-head { margin-bottom: 14px; }
.ex-head h3 { font-weight: 400; letter-spacing: 0.04em; font-size: 21px; }

.ex-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 16px; }
.ex-controls .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-right: 2px; white-space: nowrap; }
.ex-controls .sp { flex: 1; }
.tbtn.sm { padding: 5px 10px; font-size: 11px; }

.ex-headline { font-family: var(--mono); font-size: 15px; color: var(--muted); margin-bottom: 12px; }
.ex-headline b { color: var(--gold); font-weight: 500; }

.ex-splitbar { display: flex; height: 44px; border-radius: 3px; overflow: hidden; }
.ex-seg { position: relative; cursor: pointer; min-width: 2px; transition: filter 0.15s ease; }
.ex-seg:hover { filter: brightness(1.25); }
.ex-seg .t {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 0 12px; overflow: hidden; white-space: nowrap;
}
.ex-seg .t .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(7,17,16,0.8); }
.ex-seg .t .p { font-family: var(--mono); font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ex-seg.dark .t .n { color: var(--muted); }
.ex-seg.dark .t .p { color: var(--cream); }

.ex-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.ex-legend .lg { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.ex-legend .lg:hover { color: var(--cream); }
.ex-legend .sw { width: 11px; height: 11px; border-radius: 2px; }

.ex-detail { margin-top: 18px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.ex-detail h4 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 10px; }

.ex-delta { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.ex-delta.up { color: var(--sage); }
.ex-delta.down { color: var(--copper); }

.ex-row4 { display: grid; grid-template-columns: 210px 1fr 120px 96px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.ex-row4:hover { background: rgba(227,201,138,0.03); }
.ex-row4.sel { background: rgba(227,201,138,0.06); }
.ex-row4 .name { font-size: 16px; color: #d8d0bd; }
.ex-row4 .name small { color: var(--faint); font-family: var(--mono); font-size: 11px; }
.ex-row4 .amt { font-family: var(--mono); font-size: 13.5px; color: var(--cream); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .ex-row4 { grid-template-columns: 110px 1fr 84px; } .ex-row4 .ex-delta { display: none; } .ex-row4 .name { font-size: 14px; } }

.ex-spark { margin: 4px 0 10px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 4px; }
.ex-spark .cap { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.ex-spark .cap b { color: var(--gold); font-weight: 500; }

.ex-stack { display: flex; height: 15px; border-radius: 2px; overflow: hidden; background: var(--panel-2); }
.ex-stack .pub { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.ex-stack .intra { background: var(--sage); }

.ex-typegroup { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); padding: 16px 0 6px; border-bottom: 1px solid var(--line); font-weight: 500; }
.ex-typegroup:first-child { padding-top: 2px; }
.ex-typegroup .tot { float: right; color: var(--muted); letter-spacing: 0.04em; text-transform: none; white-space: nowrap; }

/* milestones */
#milestones { position: relative; padding: 8px 0 2px; }
.mile-axis { height: 2px; background: var(--line); position: relative; margin: 58px 0 46px; }
.mile-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 11px; height: 11px; border-radius: 50%; background: var(--gold-dim); border: 2px solid var(--ground); cursor: pointer; }
.mile-dot:hover { background: var(--gold); }
.mile-dot .lbl {
  position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.mile-dot:nth-child(odd) .lbl { top: -34px; }
.mile-dot:nth-child(even) .lbl { top: 20px; }
.mile-dot .lbl b { color: var(--gold); display: block; text-align: center; font-weight: 500; }

/* big-number callouts */
.callout {
  border-left: 3px solid var(--gold-dim); background: linear-gradient(90deg, rgba(227,201,138,0.05), transparent);
  padding: 18px 24px; margin: 26px 0; max-width: 760px;
}
.callout .big { font-family: var(--mono); font-size: 30px; color: var(--gold); font-variant-numeric: tabular-nums; }
.callout.warn { border-left-color: var(--copper); background: linear-gradient(90deg, rgba(201,112,90,0.07), transparent); }
.callout.warn .big { color: var(--copper); }

/* tables */
table.ledger { width: 100%; border-collapse: collapse; font-size: 16px; }
table.ledger th { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-weight: 500; }
table.ledger td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); }
table.ledger td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--cream); }
table.ledger tr:hover td { background: rgba(227,201,138,0.03); }

/* footer */
footer { margin-top: 96px; border-top: 1px solid var(--line); padding: 44px 0 64px; }
footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { footer .cols { grid-template-columns: 1fr; } }
footer h4 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; font-weight: 500; }
footer p, footer li { color: var(--faint); font-size: 15px; }
footer ul { list-style: none; }
footer li { margin-bottom: 7px; }

.updated-line { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-top: 28px; letter-spacing: 0.05em; }