/* $TOKENS · ASCII lettering on every page (GK 2026-10-14: "change some lettering and some other things on the website
   to be ascii"). Loaded after gfx.css. Pairs with ascii-type.js (headings decode from ASCII when they scroll in). */

/* the new logo: the lit ASCII T on its dark tile (was the flat orange/green coin) */
.brand img { border-radius: 7px; border: 2px solid var(--line); box-shadow: var(--shadow-sm); background: #0E0C0A; }

/* a green ASCII wave under each section title */
.sec-head h2::after, section > h2::after {
  content: '~-~~=~-~~~-=~~-~=~~-~~~=-~~-~=~~~-~-~~=~~-~~~-~=~-~~~=~-~~-~=~~~-~~=~-~~~-=~~-~=~~-~~~=-~~';
  display: block; max-width: 460px; margin-top: 10px; overflow: hidden; white-space: nowrap;
  font: 700 14px/1 var(--mono); letter-spacing: .14em; color: var(--green); opacity: .85;
}

/* a blinking cursor after each app page title */
.bar h1::after { content: '_'; margin-left: 3px; font-family: var(--mono); color: var(--green); animation: ascii-blink 1.1s steps(1) infinite; }
@keyframes ascii-blink { 50% { opacity: 0; } }

/* the footer rule gets an ASCII edge */
.rule30::before { content: '+=====================================+'; display: block; margin-bottom: 10px; overflow: hidden; white-space: nowrap; font: 700 13px/1 var(--mono); letter-spacing: .1em; color: var(--green); opacity: .8; }

/* a heading mid-decode keeps its height so nothing under it jumps */
.ascii-decoding { overflow: hidden; }

@media (max-width: 640px) {
  .sec-head h2::after, section > h2::after { font-size: 12px; max-width: 100%; }
  .rule30::before { font-size: 11px; }
}
/* BLACK (DESIGN-3 §2.8): the Home H1 gets a sage cursor that blinks 6 times then stays; app titles read "> Dashboard_" */
html[data-theme="dark"] .hero-text h1::after { content: '_'; font-family: var(--mono); color: var(--sage); margin-left: 2px; animation: ascii-blink 1.1s steps(1) 6; }
html[data-theme="dark"] .bar h1::before { content: '> '; font-family: var(--mono); color: var(--sage); }
html[data-theme="dark"] .bar h1::after { color: var(--sage); }
/* on a phone the "> " prompt wrapped onto its own line above the title: drop it there */
@media (max-width: 640px) { html[data-theme="dark"] .bar h1::before { content: none; } }

@media (prefers-reduced-motion: reduce) {
  .bar h1::after { animation: none; content: ''; }
  html[data-theme="dark"] .hero-text h1::after { animation: none; }
}

/* every coin (payday ring, PAID seal, dashboard) now has the dark ASCII-T face (gfx.js COIN): its legend reads in cream */
.coin .legend text { fill: #F2EBDD; }

/* ---------- live-data states (asks from the live-data session, 2026-10-14) ---------- */
/* a slot still waiting for live data shows "—": calm and muted, never an error colour (ascii-type.js tags it .is-pending) */
.is-pending { color: var(--muted) !important; opacity: .75; }
/* the dev's plug-in result on Home: the agent key shown once + Copy */
.plug-out { margin-top: 18px; padding: 14px 16px; display: grid; gap: 12px; border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--panel); }
.plug-out[hidden] { display: none; }
.plug-out .ledger { margin: 0; }
.plug-out code { font: 700 14px var(--mono); word-break: break-all; color: var(--ink); }
.plug-out #plugKey { color: var(--green); }
.plug-out .btn { justify-self: start; }
/* Market: a cancelled order on the tape, its chip, and the neutral QUOTE chip next to "You pay" */
.print .pr.cancelled { color: var(--muted); }
.print .pr.cancelled .m, .print .pr.cancelled .r { text-decoration: line-through; text-decoration-color: var(--soft); }
.chip.cancel { background: transparent; color: var(--muted); border-color: var(--soft); border-style: dashed; }
.chip.quote { background: transparent; color: var(--muted); border-color: var(--soft); }
html[data-theme="dark"] .plug-out { background: var(--well); border-color: var(--well-edge); }
/* empty ledger states ("No paydays yet"): padded and calm, not touching the card edge */
.ledger .lr.empty, #payLog .lr.empty { padding: 14px 16px; color: var(--muted); font: 600 15px var(--mono); }