/**
 * page.css: legacy content, wearing the terminal.
 *
 * The 16 pages that are not the dapp were written against a conventional
 * marketing vocabulary -- .wrap, .card, .lede, .eyebrow -- and a palette swap
 * alone left them looking like a brochure painted green. This maps that
 * vocabulary onto the P1 Green components instead of rewriting sixteen files.
 *
 * Loaded AFTER the page's own stylesheet, so it wins. Everything it uses is a
 * token from theme.css; there are no literal colours below, which is what
 * keeps these pages and the dapp from drifting apart.
 *
 * Rule 1 holds here as everywhere: green is the ground, not "up". Direction is
 * carried by the ▲/▼ glyph, never by colour alone.
 */

/* The old nav is replaced by the F-key strip that chrome.js injects. */
.nav { display: none !important; }

body {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--fg);
}

/* ── Measure ─────────────────────────────────────────────── */
.wrap, .shell-w { max-width: 1060px; margin: 0 auto; padding-inline: 16px; }

/* ── Type ────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-hi);
  text-wrap: balance;
}
h1 { font-size: clamp(27px, 5.2vw, 46px); line-height: 1.06; letter-spacing: -0.025em; }
h2 { font-size: clamp(19px, 2.7vw, 26px); line-height: 1.16; }
h3 { font-size: 16px; }

/* Section heads get the rule treatment the dapp uses, so a heading reads as a
   panel boundary rather than as decoration. */
h2::before {
  content: "";
  display: block;
  width: 26px;
  border-top: 2px solid var(--accent);
  margin-bottom: var(--s3);
}

p, li { color: var(--fg-mid); }
.lede, .sub {
  font-size: 15px;
  color: var(--fg-mid);
  max-width: 62ch;
}
.small, .note, .muted { font-size: 12px; color: var(--fg-dim); }
.mono, code, kbd, pre { font-family: var(--mono); }
a { color: var(--fg-hi); text-underline-offset: 3px; }
a:hover { color: var(--accent); }

/* The eyebrow is the one place the keycap amber appears in prose: it marks
   "you are here", the same job F-keys do in the chrome. */
.eyebrow, .lab, .cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--keycap);
}

/* ── Panels ──────────────────────────────────────────────── */
.card, .panel, .term, .tbl-wrap, .box {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 0;                 /* square corners, everywhere */
  padding: var(--s4);
}
.cards { display: grid; gap: var(--s4); }
.term { padding: 0; }
.term-bar {
  background: var(--ghost);
  border-bottom: 1px solid var(--rule);
  padding: 7px var(--s4);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.term-body { padding: var(--s4); }

/* ── Numbers ─────────────────────────────────────────────── */
.stat { border-bottom: 0; padding: 0; text-transform: none; }
.stat-n, .num, .v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--fg-hi);
}
.stat-l, .k { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); }

/* ── Controls ────────────────────────────────────────────── */
.btn, a.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  background: var(--accent); color: var(--on-accent);
  border: 1px solid var(--accent); border-radius: 0;
  font-family: var(--mono); font-weight: 600;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px var(--s4); min-height: var(--tap);
  text-decoration: none; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); color: var(--on-accent); }
.btn.ghost, .btn.secondary, .btn-ghost {
  background: transparent; color: var(--fg-hi); border-color: var(--rule);
}
.btn.ghost:hover, .btn-ghost:hover { background: var(--ghost); color: var(--fg-hi); }
.btn.sm, .btn-sm { padding: 6px var(--s3); font-size: 11px; min-height: 0; }

.pill, .badge {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--rule); border-radius: 0;
  padding: 3px 8px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-dim);
}

/* ── Tables ──────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; }
thead th {
  text-align: left; font-weight: 600; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-dim); border-bottom: 1px solid var(--rule);
  padding: 7px 10px;
}
thead th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody td { padding: 7px 10px; border-bottom: 1px solid var(--rule-2); color: var(--fg-mid); }
tbody tr:hover td { background: var(--ghost); }

/* ── Direction ───────────────────────────────────────────── */
/* Rule 1 says direction is carried by a glyph, not by colour -- but the glyph
   is authored in the markup, the way theme.css and the dapp already do it.
   Adding one here via ::before printed "▼ ▼ STALE" on every tape that was
   already correct. Colour only, and it reinforces a glyph that is already
   there. */
.up, .best { color: var(--up); }
.dn, .down { color: var(--down); }

/* ── Layout helpers the old pages lean on ────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); }
@media (max-width: 880px) { .split, .cards { grid-template-columns: 1fr; } }
hr, .rule { border: 0; border-top: 1px solid var(--rule); margin: var(--s6) 0; }
footer { border-top: 1px solid var(--rule); color: var(--fg-dim); font-size: 12px; }

/* ── Definition lists with more than one pair ────────────── */
/*
 * theme.css's .dl is a single flex row: one key, a dotted leader, one value,
 * with white-space:nowrap on the value. That is exactly right for "BORROW APR
 * ···· 3.00%" and exactly wrong for a list of eight pairs, which all land in
 * one row and pushed the page to 3,455px wide on a 721px viewport. The tape's
 * marquee looked like the culprit and was not -- it is clipped by .rail.
 *
 * This is the multi-pair variant: a two-column grid whose values wrap, folding
 * to one column where two would be cramped.
 */
.deflist{
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s3) var(--s5);
  font-size: 13px;
  align-items: baseline;
}
.deflist .dl-k{
  color: var(--fg-dim);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.deflist .dl-v{
  color: var(--fg-hi);
  white-space: normal;      /* the whole point */
  letter-spacing: 0;
}
@media (max-width: 620px){
  .deflist{ grid-template-columns: 1fr; gap: 2px var(--s3); }
  .deflist .dl-k{ margin-top: var(--s3); }
}

/* ── Read-next ───────────────────────────────────────────── */
/*
 * The site is an argument in eight parts and was navigable only by F-key,
 * which assumes the reader already knows the order. This ends each page with
 * where it goes and why.
 */
.seq{
  max-width: 1060px;
  margin: var(--s9) auto 0;
  padding: var(--s5) 16px var(--s9);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}
.seq-b{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-dim); text-decoration: none;
  white-space: nowrap;
}
.seq-b:hover{ color: var(--fg-hi); }
.seq-n{
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  text-decoration: none; text-align: right;
  border: 1px solid var(--rule); padding: var(--s3) var(--s4);
  min-height: var(--tap); justify-content: center;
}
.seq-n:hover{ background: var(--ghost); border-color: var(--accent); }
.seq-k{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--keycap);
}
.seq-t{ font-family: var(--mono); font-size: 14px; color: var(--fg-hi); }
@media (max-width: 560px){
  .seq{ flex-direction: column; align-items: stretch; }
  .seq-n{ align-items: flex-start; text-align: left; }
}