/* PitWars — receipt book. Paper, ledger cream, black ink, one red. No gradients,
   no rounded card grids, no shadows, no chrome. Type does the work. */

@font-face { font-family: "Ticket"; src: url("/assets/fonts/CourierPrime-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ticket"; src: url("/assets/fonts/CourierPrime-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Display"; src: url("/assets/fonts/Oswald-Variable.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }

:root {
  --paper: #fbf8f0;
  --cream: #f1ead6;
  --cream-2: #e7dfc6;
  --ink: #141210;
  --ink-2: #4a4640;
  --rule: #141210;
  --red: #b3261e;
  --mono: "Ticket", "Courier Prime", ui-monospace, "Courier New", Courier, monospace;
  --display: "Display", Oswald, "Arial Narrow", Impact, sans-serif-condensed, sans-serif;
  --max: 720px;
  --tap: 52px;
  --receipt: #fff;
  --scrawl: #2b2622;
  --ledger-line: rgba(20, 18, 16, .08);
  color-scheme: light;
}
/* Dark: the same receipt book read by the light of the firebox. Tokens only; nothing else changes. */
:root[data-theme="dark"] {
  --paper: #1c1914; --cream: #14120e; --cream-2: #2b261e; --ink: #f1ead6; --ink-2: #b9b09e; --rule: #f1ead6; --red: #f0705f;
  --receipt: #221e18; --scrawl: #d8cfb9; --ledger-line: rgba(241, 234, 214, .09);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1c1914; --cream: #14120e; --cream-2: #2b261e; --ink: #f1ead6; --ink-2: #b9b09e; --rule: #f1ead6; --red: #f0705f;
    --receipt: #221e18; --scrawl: #d8cfb9; --ledger-line: rgba(241, 234, 214, .09);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.4;
}
body.paper { background: var(--paper); }
a { color: var(--ink); }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: .01em; line-height: 1.05; margin: 0; text-transform: uppercase; }
h1 { font-size: 2.6rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 .75rem; }
small, .small { font-size: .85rem; }
.muted { color: var(--ink-2); }
.red { color: var(--red); }
.right { text-align: right; }
.center { text-align: center; }
.upper { text-transform: uppercase; letter-spacing: .06em; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.sr { position: absolute; left: -9999px; }

/* Layout */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 12px 6rem; }
header.masthead {
  border-bottom: 3px solid var(--rule);
  padding: 10px 0 8px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
}
.brand { font-family: var(--display); font-weight: 700; font-size: 1.9rem; text-transform: uppercase; text-decoration: none; letter-spacing: .02em; line-height: 1; }
.brand span { font-weight: 300; }
.brand-logo { height: 40px; width: auto; max-width: 220px; display: block; }
.tag { font-size: .8rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; }

nav.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rule); margin: 0 0 1rem; overflow-x: auto; scrollbar-width: none; }
nav.tabs::-webkit-scrollbar { display: none; }
nav.tabs a {
  flex: 1 0 auto; text-align: center; text-decoration: none; padding: 12px 10px; min-height: 44px;
  font-family: var(--display); text-transform: uppercase; font-size: 1rem; letter-spacing: .05em; border-right: 1px solid var(--cream-2);
}
nav.tabs a.active { background: var(--ink); color: var(--paper); }

/* Ticket / receipt blocks */
.ticket {
  background: var(--paper);
  border: 2px solid var(--rule);
  padding: 14px 14px 12px;
  margin: 0 0 14px;
  position: relative;
}
.ticket.torn { border-bottom-style: dashed; }
.ticket.ledger { background: repeating-linear-gradient(transparent 0 27px, var(--ledger-line) 27px 28px); background-color: var(--paper); }
.ticket h2, .ticket h3 { margin-bottom: .5rem; }
.ticket .stamp {
  position: absolute; top: 8px; right: 8px; border: 3px solid var(--red); color: var(--red);
  font-family: var(--display); font-weight: 700; text-transform: uppercase; padding: 2px 8px; transform: rotate(-6deg); font-size: 1.1rem; letter-spacing: .08em;
}
.ticket .stamp.black { border-color: var(--ink); color: var(--ink); }

.rule { border: 0; border-top: 2px solid var(--rule); margin: 10px 0; }
.rule.dashed { border-top-style: dashed; border-top-width: 1px; }

.kv { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 0; }
.kv dt { color: var(--ink-2); text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; align-self: end; }
.kv dd { margin: 0; text-align: right; font-weight: 700; }
.kv dd.big { font-size: 1.6rem; font-family: var(--display); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 2px solid var(--rule); background: var(--paper); margin-bottom: 14px; }
.stats > div { padding: 8px 6px; border-right: 1px solid var(--cream-2); text-align: center; }
.stats > div:last-child { border-right: 0; }
.stats .lbl { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.stats .val { display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.stats .val.red { color: var(--red); }

table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--cream-2); vertical-align: top; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); border-bottom: 2px solid var(--rule); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.me td { background: var(--ink); color: var(--paper); font-weight: 700; }
tr.me td a { color: var(--paper); }
.table-wrap { overflow-x: auto; }
/* Field tables: six columns that fit a phone. Team cell carries the small print on a second line. */
table.field { table-layout: fixed; font-size: .85rem; }
table.field th, table.field td { padding: 5px 3px; }
table.field th.num, table.field td.num { width: 2.4em; padding-left: 2px; padding-right: 2px; }
table.field th:first-child, table.field td:first-child { width: 2.2em; }
table.field td.team { overflow-wrap: anywhere; }
table.field td.team small { display: block; color: var(--ink-2); font-size: .72rem; line-height: 1.25; }
table.field tr.me td.team small { color: var(--paper); opacity: .8; }

/* Buttons: ugly-clear, hard edges, thumb sized */
.btn {
  display: block; width: 100%; min-height: var(--tap); padding: 12px 14px; margin: 8px 0 0;
  background: var(--ink); color: var(--paper); border: 2px solid var(--ink); cursor: pointer;
  font-family: var(--display); font-size: 1.25rem; text-transform: uppercase; letter-spacing: .06em; text-align: center; text-decoration: none;
}
.btn:active { background: var(--ink-2); }
.btn.ghost { background: var(--paper); color: var(--ink); }
.btn.red { background: var(--red); border-color: var(--red); color: var(--paper); }
.btn.small { min-height: 40px; font-size: 1rem; padding: 6px 10px; width: auto; display: inline-block; margin: 0; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row .btn { flex: 1 1 140px; }
.btn.huge { font-size: 1.7rem; min-height: 68px; }

/* Forms */
label.field { display: block; margin: 0 0 10px; }
label.field span { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin-bottom: 3px; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; min-height: var(--tap); padding: 10px 12px; background: var(--paper); border: 2px solid var(--ink); outline: none;
}
input:focus, select:focus, textarea:focus { outline: 3px solid var(--red); outline-offset: -1px; }
.check { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 6px 0; }
.check input { width: 26px; height: 26px; }

/* Choice groups (radio as buttons) */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; margin: 4px 0 12px; }
/* Three options read as one row, never two boxes and an orphan */
.choices.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices.three .box { padding: 8px 6px; }
.choices.three .box b { font-size: .95rem; letter-spacing: .02em; overflow-wrap: anywhere; }
.choices.three .box small { font-size: .74rem; line-height: 1.3; display: block; }
.choice { position: relative; display: flex; }
.choice .box { flex: 1; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice .box { border: 2px solid var(--ink); background: var(--paper); padding: 10px; min-height: var(--tap); }
.choice .box b { display: block; font-family: var(--display); text-transform: uppercase; font-size: 1.05rem; letter-spacing: .04em; }
.choice .box small { color: var(--ink-2); }
.choice input:checked + .box { background: var(--ink); color: var(--paper); }
.choice input:checked + .box small { color: var(--cream-2); }
.choice input:disabled + .box { opacity: .4; }
.choice input:focus-visible + .box { outline: 3px solid var(--red); }

/* Steppers */
.stepper { display: inline-flex; border: 2px solid var(--ink); }
.stepper button { width: 44px; min-height: 44px; background: var(--paper); border: 0; font-size: 1.4rem; cursor: pointer; }
.stepper button:disabled { opacity: .3; }
.stepper span { min-width: 40px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); }

/* Lists */
.row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--cream-2); align-items: center; }
.row:last-child { border-bottom: 0; }
.row .grow { flex: 1; }
.line { display: flex; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; }
.line.total { border-top: 2px solid var(--rule); margin-top: 6px; padding-top: 6px; font-weight: 700; }
.dots { flex: 1; border-bottom: 1px dotted var(--ink-2); margin: 0 4px 5px; }

/* Event cards: plain, ruled */
.event { border: 2px solid var(--rule); background: var(--paper); margin-bottom: 12px; }
.event .head { display: flex; gap: 10px; padding: 10px 12px 6px; align-items: flex-start; }
.event .head svg { width: 44px; height: 44px; flex: 0 0 44px; }
.event .head h3 { font-size: 1.35rem; }
.event .meta { padding: 0 12px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; font-size: .9rem; }
.event .meta b { font-weight: 700; }
.event .foot { padding: 0 12px 12px; }
.event.done { opacity: .75; }

/* Banner / flash */
.banner { border: 2px solid var(--ink); background: var(--paper); padding: 10px 12px; margin: 0 0 12px; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.banner.warn { border-color: var(--red); }
.flash { position: fixed; left: 12px; right: 12px; bottom: 12px; background: var(--ink); color: var(--paper); padding: 12px 14px; border: 2px solid var(--paper); z-index: 50; font-weight: 700; }
.flash.err { background: var(--red); }
.flash.hidden { display: none; }

/* Judge cards mini grid */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 3px; margin: 4px 0 8px; min-width: 0; }
.cards div { border: 1px solid var(--ink); text-align: center; font-size: .75rem; padding: 3px 0; line-height: 1.2; min-width: 0; overflow: hidden; white-space: nowrap; }
.cards div.drop { opacity: .35; text-decoration: line-through; }
.cards div b { display: block; font-size: 1rem; }

/* Meat result line */
.meat-result { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--cream-2); min-width: 0; }
.meat-result > div { min-width: 0; overflow-wrap: anywhere; }
.meat-result svg { width: 36px; height: 36px; }
.meat-result .score { font-family: var(--display); font-size: 2rem; font-weight: 700; }
.meat-result .score.zero { color: var(--red); }

/* Awards receipt */
.receipt { background: var(--receipt); border: 1px solid var(--ink); padding: 18px 16px; margin: 0 0 14px; font-size: .95rem; }
.receipt .head { text-align: center; border-bottom: 2px dashed var(--ink); padding-bottom: 8px; margin-bottom: 8px; }
.receipt .head h2 { font-size: 2rem; }
.receipt .place { font-family: var(--display); font-size: 4rem; font-weight: 700; line-height: 1; text-align: center; margin: 6px 0; }
.receipt .place small { font-size: 1.2rem; font-weight: 400; display: block; text-transform: uppercase; letter-spacing: .08em; }
.receipt .foot { border-top: 2px dashed var(--ink); margin-top: 8px; padding-top: 8px; text-align: center; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.barcode { height: 34px; margin: 8px auto 0; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); width: 70%; }

/* Awards: what you won, placings tiles, hardware, folds */
.receipt .hardware { display: flex; gap: 10px; align-items: center; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); padding: 8px 10px; margin: 8px 0; }
.receipt .hardware svg { width: 36px; height: 36px; flex: 0 0 36px; }
.receipt .hardware a { color: var(--paper); }
.receipt .won { border: 2px solid var(--ink); padding: 10px 12px; margin: 8px 0 12px; background: var(--paper); }
.receipt .won.none { border-style: dashed; }
.receipt .won-total { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-bottom: 2px dashed var(--ink); padding-bottom: 6px; margin-bottom: 6px; }
.receipt .won-total .lbl { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--ink-2); }
.receipt .won-total .amt { font-family: var(--display); font-size: 2.4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.receipt .won.none .won-total .amt { color: var(--ink-2); }
.receipt .won-group { margin-top: 6px; }
.receipt .won-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin-bottom: 2px; }
.receipt .won .line { padding: 2px 0; }
.receipt .section-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin: 6px 0 4px; }
.receipt .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.receipt .tile { border: 1px solid var(--ink); padding: 8px 6px; text-align: center; min-width: 0; }
.receipt .tile svg { width: 32px; height: 32px; display: block; margin: 0 auto 2px; }
.receipt .tile.top { border-width: 2px; background: var(--cream); }
.receipt .tile.bad .tile-place { color: var(--red); font-size: 1.3rem; }
.receipt .tile.jackpot { grid-column: span 3; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; align-items: baseline; }
.receipt .tile.jackpot .tile-name { grid-row: 1; }
.receipt .tile.jackpot .tile-place { grid-column: 2; grid-row: 1 / span 3; font-size: 1.8rem; align-self: center; }
.receipt .tile.jackpot .tile-sub { grid-column: 1; }
.receipt .tile-name { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt .tile-place { font-family: var(--display); font-size: 2rem; font-weight: 700; line-height: 1.1; }
.receipt .tile-sub { font-size: .8rem; color: var(--ink-2); }
.receipt .fold { border: 1px dashed var(--ink-2); padding: 0 10px; margin: 8px 0; }
.receipt .fold summary { cursor: pointer; padding: 8px 0; font-weight: 700; font-size: .9rem; list-style: none; display: flex; justify-content: space-between; }
.receipt .fold summary::-webkit-details-marker { display: none; }
.receipt .fold summary::after { content: '+'; font-weight: 700; }
.receipt .fold[open] summary::after { content: '−'; }
.receipt .fold[open] summary { border-bottom: 1px dashed var(--ink-2); margin-bottom: 6px; }
.receipt .fold-body > * + * { margin-top: 6px; }
.receipt .fold-body { padding-bottom: 8px; }
.receipt .fold .meat-result .score { font-size: 1.6rem; }
.receipt .fold .meat-result:last-of-type { border-bottom: 0; }

/* Home doors */
.hero { border: 3px solid var(--rule); background: var(--paper); padding: 16px 14px; margin: 14px 0; }
.hero h1 { font-size: 3.2rem; }
.hero p { font-size: 1.05rem; }
.art-slot { border: 2px solid var(--ink); background: var(--cream); margin: 10px 0; aspect-ratio: 1140/702; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.art-slot img, .art-slot svg { width: 100%; height: 100%; object-fit: cover; }
.art-slot picture { display: contents; }
.hero h1 span { font-weight: 300; }
.doors { display: grid; gap: 10px; margin-top: 12px; }
.doors .btn { margin: 0; }

/* Weather glyph inline */
.glyph { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }

/* Texas map */
.texas { width: 160px; height: 150px; }
.texas .blob { fill: var(--cream-2); stroke: var(--ink); stroke-width: 1.5; }
.texas .blob.on { fill: var(--red); }

/* Progress strip */
.steps { display: flex; gap: 4px; margin: 0 0 12px; }
.steps span { flex: 1; height: 8px; border: 1px solid var(--ink); background: var(--paper); }
.steps span.on { background: var(--ink); }
.steps span.now { background: var(--red); border-color: var(--red); }

footer.colophon { margin-top: 3rem; border-top: 1px solid var(--ink); padding-top: 10px; font-size: .8rem; color: var(--ink-2); display: flex; gap: 12px; flex-wrap: wrap; }

@media (min-width: 560px) {
  .doors { grid-template-columns: 1fr 1fr; }
  .doors .btn.huge { grid-column: 1 / -1; }
  .choices { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
  .btn:active { transform: translate(1px, 1px); }
}

/* Receipt polish */
.ring { position: absolute; right: 8%; bottom: 14%; width: 120px; height: 80px; pointer-events: none; }
.receipt { position: relative; }
.scrawl { font-style: italic; letter-spacing: .02em; color: var(--scrawl); transform: rotate(-1.2deg); display: block; max-width: 100%; margin: 2px 0 4px; border-bottom: 1px solid var(--cream-2); font-size: .95rem; overflow-wrap: anywhere; }
.newsletter { border-style: double; border-width: 4px; }
.newsletter h3 { letter-spacing: .12em; }
/* Calendar strip of receipt stubs */
.strip { display: flex; flex-wrap: wrap; gap: 3px; margin: 8px 0; }
.strip .stub { width: 30px; height: 40px; border: 1px solid var(--ink); background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 2px 0; font-size: .6rem; position: relative; }
.strip .stub .wk { color: var(--ink-2); }
.strip .stub .mk { font-family: var(--display); font-weight: 700; font-size: .75rem; }
.strip .stub.cooked .mk { border: 2px solid var(--red); color: var(--red); transform: rotate(-12deg); padding: 0 2px; }
.strip .stub.win { background: var(--ink); color: var(--paper); }
.strip .stub.win .mk { border-color: var(--paper); color: var(--paper); }
.strip .stub.win .wk { color: var(--cream-2); }
.strip .stub.home .mk { color: var(--ink-2); }
.strip .stub.now { border-width: 2px; border-color: var(--red); }
.strip.compact .stub { width: 18px; height: 26px; font-size: .5rem; }
.strip.compact .stub .mk { font-size: .55rem; border-width: 1px; }

/* Rig page: one line of gear per block, owned step on top, next step under it */
.chain { border-top: 1px dashed var(--rule); padding: 6px 0 2px; }
.chain:first-of-type { border-top: 0; }

/* Sponsors: receipt-style frames. Heights are reserved so nothing jumps when a creative or a network unit loads. */
.sponsor { position: relative; border: 2px dotted var(--ink); background: var(--paper); padding: 14px 12px 10px; margin: 0 0 12px; text-align: center; }
.sponsor.sponsor-box { min-height: 110px; }
.sponsor.interstitial { min-height: 260px; padding-top: 22px; }
.sponsor .stamp-sm, .stamp-sm { position: absolute; top: -9px; left: 10px; background: var(--paper); border: 1px solid var(--ink); font-family: var(--display); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; padding: 1px 6px; }
.row .stamp-sm { position: static; margin-left: 4px; vertical-align: middle; }
.sponsor-line { text-align: center; margin: -4px 0 12px; }
.sponsor-line a { color: inherit; }
.sponsor-net { min-height: 100px; }
@media (min-width: 720px) { .sponsor-net { min-height: 250px; } }
.sponsor.fence { background: repeating-linear-gradient(90deg, var(--paper) 0 14px, var(--cream-2) 14px 16px); }

.sponsor.sponsor-strip { min-height: 70px; padding: 12px 8px 8px; }
.sponsor.strip-top { margin-top: 4px; }
.sponsor-net.strip { min-height: 50px; }
@media (min-width: 720px) { .sponsor-net.strip { min-height: 90px; } .sponsor.sponsor-strip { min-height: 110px; } }
.colophon-sponsor { text-align: center; padding: 6px 0 0; }
.colophon-sponsor .sponsor-line { margin: 0; }

/* Shop price trend */
.trend { font-family: var(--mono); font-size: .75rem; font-weight: 700; border: 1px solid var(--ink); padding: 0 5px; vertical-align: middle; margin-left: 4px; }
.trend.up { color: var(--red); border-color: var(--red); }

/* Theme switch in the footer */
#themelink { cursor: pointer; }

/* Accessibility: skip link and a visible focus ring everywhere */
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 12px; }
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
/* Badges on the wall */
.badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.badge { border: 1px dashed var(--ink-2); padding: 8px; opacity: .55; min-width: 0; }
.badge.on { border: 2px solid var(--ink); opacity: 1; background: var(--paper); }
.badge b { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; }
.badge small { color: var(--ink-2); display: block; overflow-wrap: anywhere; }

/* ---- the manual and its ? links ---- */
a.help { display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; border: 1.5px solid var(--ink-2); border-radius: 50%; font: 700 .62em/1 var(--mono); color: var(--ink-2); text-decoration: none; vertical-align: middle; margin-left: 2px; position: relative; top: -2px; }
a.help:hover, a.help:focus-visible { color: var(--red); border-color: var(--red); }
.receipt .head small a.help { border-color: currentColor; color: inherit; }
.manual-head .toc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.manual-head .toc a { border: 1.5px solid var(--ink); padding: 5px 9px; text-decoration: none; font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-size: .78rem; background: var(--paper); }
.manual-head .toc a:hover { background: var(--ink); color: var(--paper); }
.manual-sec { scroll-margin-top: 12px; }
.manual-sec h4 { font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; margin: 14px 0 4px; border-bottom: 1.5px dashed var(--ink-2); padding-bottom: 2px; }
.manual-sec p, .manual-sec li { font-size: .92rem; line-height: 1.45; }
.manual-sec ul { padding-left: 1.1em; margin: 6px 0; }
.manual-sec li + li { margin-top: 4px; }
.manual-sec table { font-size: .82rem; }
.manual-sec td, .manual-sec th { vertical-align: top; }
.manual-sec td:first-child { white-space: normal; min-width: 7em; }
.manual-sec .dim { opacity: .35; }
.manual-sec .banner { margin: 8px 0; }
/* Wide manual tables stack into labelled cards on a phone: no sideways scrolling */
@media (max-width: 640px) {
  .manual-sec table.stack, .manual-sec table.stack tbody, .manual-sec table.stack tr, .manual-sec table.stack td { display: block; width: 100%; box-sizing: border-box; }
  .manual-sec table.stack thead { display: none; }
  .manual-sec table.stack tr { border-bottom: 1.5px solid var(--ink); padding: 6px 0 8px; }
  .manual-sec table.stack tr:last-child { border-bottom: 0; }
  .manual-sec table.stack td { border: 0; padding: 2px 0; white-space: normal; }
  .manual-sec table.stack td:first-child { font-family: var(--display); font-size: 1rem; text-transform: uppercase; letter-spacing: .03em; padding-bottom: 4px; }
  .manual-sec table.stack td:not(:first-child)::before { content: attr(data-h) ": "; color: var(--ink-2); font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; }
}