/* The blocks (blocks.html): the Ticker list and the Receipt pick page of the 2026-10-24 look (DESIGN.md). Colours, fonts, radii and
   motion come from tokens.css; nothing here writes a colour. */
a { color: inherit; } .muted { color: var(--muted); } .small { font-size: 13px; }
p.muted.small, p.small, .note { max-width: 60ch; }
/* Every number is the sans with tabular figures (no OpenType feature needed); the big tile figures are the serif. Mono is for code only. */
b, strong, .cell b, .trail, td, .tile strong, .num { font-variant-numeric: tabular-nums; }
.tile strong { font-family: var(--serif); }
h1 { font-family: var(--serif); font-size: 28px; line-height: 1.15; letter-spacing: -.01em; margin: 8px 0 0; text-wrap: balance; }
header > p.muted { margin: 4px 0 0; }
h2.day { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 28px 0 6px; }
.card, .b-notice, .tile, .row { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; }
.blk { margin: 8px 0; } .row + .row { margin-top: 8px; }
.k-ok { color: var(--ok); } .k-warn { color: var(--warn); } .k-bad { color: var(--bad); } .k-muted { color: var(--muted); } .k-accent { color: var(--accent); }
/* Chips and filters: a 44px target with a quiet fill; the selected one is the accent. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; } .chips .t { display: inline-flex; align-items: center; min-height: 28px; border: 1px solid var(--line); background: var(--chip); border-radius: var(--r-pill); padding: 2px 10px; font-size: 13px; text-decoration: none; }
.chips span.t { border-color: transparent; }
.b-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; } .b-filters::-webkit-scrollbar { display: none; }
.f { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); background: var(--chip); border-radius: var(--r-pill); text-decoration: none; white-space: nowrap; font-weight: 400; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.b-filters .f { padding: 0 12px; font-size: 13px; } /* the period chips: a smaller label, still a 44px target */
.f.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
/* The filter bar: three or more rows of chips fold into one line that opens on a tap (the Board's lanes, minimum, market, book and sort). */
.b-filterbar { margin: 8px 0; } .b-filterbar summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-control); cursor: pointer; }
.b-filterbar summary::-webkit-details-marker { display: none; } .b-filterbar summary b { font-family: var(--sans); font-weight: 600; }
.b-filterbar summary .now { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-filterbar summary::after { content: "›"; font-size: 20px; color: var(--muted); transform: rotate(90deg); transition: transform var(--dur) var(--ease); } .b-filterbar[open] summary::after { transform: rotate(-90deg); }
.b-filterbar .sheet { display: grid; gap: 8px; padding: 12px 0 4px; } .b-filterbar .sheet .lbl { margin: 4px 0 -4px; }
/* Games: the matchup header and a slate card. */
.b-game { display: grid; gap: 8px; } .g-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.g-teams { text-decoration: none; font-size: 17px; }
.g-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.b-game.header { text-align: center; } .b-game.header .g-cols { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; }
.b-game.header .g-team, .b-game.header .g-mid { display: grid; gap: 2px; justify-items: center; } .b-game.header .g-team b { font-size: 22px; }
.b-game.header .hcell { font-size: 13px; text-decoration: none; } .b-game.header .hcell + .hcell { color: var(--muted); }
.b-game.slate { text-decoration: none; display: grid; grid-template-columns: 1fr; } .b-game.slate > div { font-size: 17px; font-weight: 600; }
.cell { display: grid; justify-items: center; padding: 8px; border: 1px solid var(--line); background: var(--chip); border-radius: var(--r-control); text-decoration: none; }
.cell.mine { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* Lanes: a tinted label per lane (the name bold, the state after it); the explanation sits below, never in the pill. */
.lanes { list-style: none; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; padding: 0; margin: 0; }
.lane { font-size: 13px; max-width: 100%; } .lane .pill { display: inline-block; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, currentColor var(--lane-tint), transparent); color: inherit; text-decoration: none; font-size: 12px; }
.lane .pill b { font-family: var(--sans); } .lane .lane-note { display: block; margin-top: 2px; color: var(--muted); }
.lane-model { color: var(--lane-model); } .lane-market { color: var(--lane-market); } .lane-money { color: var(--lane-money); }
.lane-form { color: var(--lane-form); } .lane-systems { color: var(--lane-systems); } .lane-others { color: var(--lane-others); }
.st-against { text-decoration: line-through; }
.st-quiet.lane-model, .st-waiting.lane-model { color: var(--lane-model-muted); }
.st-quiet.lane-market, .st-waiting.lane-market { color: var(--lane-market-muted); }
.st-quiet.lane-money, .st-waiting.lane-money { color: var(--lane-money-muted); }
.st-quiet.lane-form, .st-waiting.lane-form { color: var(--lane-form-muted); }
.st-quiet.lane-systems, .st-waiting.lane-systems { color: var(--lane-systems-muted); }
.st-quiet.lane-others, .st-waiting.lane-others { color: var(--lane-others-muted); }
.st-quiet .pill, .st-waiting .pill { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
/* Tiles: the label small, the number large. */
.b-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
/* Four tiles (the record strip) are one size: four across, or two by two on a phone, never three and one. */
.b-tiles:has(> .tile:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .b-tiles:has(> .tile:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .tile { display: grid; gap: 2px; } .tile > .muted:first-child { font-size: 13px; } .tile strong { font-size: 22px; letter-spacing: -.01em; }
.b-table { overflow-x: auto; } table { border-collapse: collapse; width: 100%; } th, td { padding: 8px 8px; border-bottom: 1px solid var(--line); text-align: left; } .right { text-align: right; }
.b-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; } dt { color: var(--muted); } dd { margin: 0; }
.b-lean { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; } .bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; } .bar i { display: block; height: 100%; background: var(--accent); }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-control); text-decoration: none; border: 1px solid var(--border); background: var(--card); font-weight: 600; } .btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.b-unsupported { color: var(--warn); }
footer { max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; color: var(--muted); font-size: 13px; }
.b-form, .b-action { display: grid; gap: 12px; } .b-action { display: inline-block; }
.field { display: grid; gap: 4px; } .lbl { color: var(--muted); font-size: 13px; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; } .opt { display: inline-flex; align-items: center; gap: 6px; }
.opts .opt { min-height: 44px; border: 1px solid var(--line); background: var(--chip); border-radius: var(--r-pill); padding: 0 14px; cursor: pointer; }
.opts .opt:has(input:checked) { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.opts .opt input { position: absolute; opacity: 0; pointer-events: none; }
input[type=text], input[type=number], select, textarea { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: var(--r-control); border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; }
.field-stepper input { width: 7em; }
button.btn { cursor: pointer; font: inherit; font-weight: 600; color: var(--text); background: var(--card); } button.btn.primary { color: var(--on-accent); background: var(--accent); }
button.btn.destructive { color: var(--bad); border-color: var(--bad); }
.b-notice[role] { margin: 8px 0; }
.row.voided > a, .row.voided > b { text-decoration: line-through; color: var(--muted); }
/* The list (the Board, Picks, History): rows on the ground with a hairline between them, the pick on the left and its number on the right. */
.b-list .row { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 12px 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; }
.b-list .row:first-child { border-top: 0; padding-top: 4px; }
.b-list .row > a, .b-list .row > b { font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 600; text-decoration: none; grid-column: 1; overflow-wrap: anywhere; }
.b-list .row > a:hover { text-decoration: underline; }
.b-list .row > .trail, .b-list .row > .tally { grid-column: 2; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 7px; font-size: 13px; font-weight: 600; background: var(--chip); }
.b-list .row > .trail.k-ok, .b-list .row > .tally.k-ok { background: var(--ok); color: var(--on-outcome); } .b-list .row > .trail.k-bad { background: var(--bad); color: var(--on-outcome); }
.b-list .row > .muted, .b-list .row > .chips, .b-list .row > .lanes, .b-list .row > .b-lean, .b-list .row > details { grid-column: 1 / -1; }
.b-list .row > .muted.small { margin-top: -2px; }
.b-list .row > details summary { cursor: pointer; color: var(--muted); font-size: 13px; min-height: 44px; display: flex; align-items: center; }
.b-list > p.muted { padding: 16px 0; }
/* A row that opens in place (the Record tab's settled picks): the whole row is the summary, a chevron at its right, and a result
   edge at its left (the word in the badge carries the meaning; the edge only repeats it). */
.b-list details.open-row { display: block; border-left: 3px solid var(--line); padding-left: 10px; }
.b-list details.open-row.rk-ok { border-left-color: var(--ok); } .b-list details.open-row.rk-bad { border-left-color: var(--bad); }
.b-list details.open-row summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: start; min-height: 44px; }
.b-list details.open-row summary::-webkit-details-marker { display: none; }
.b-list details.open-row summary > b { font-size: 17px; font-weight: 600; grid-column: 1; }
.b-list details.open-row summary > .trail { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 7px; font-size: 13px; font-weight: 600; background: var(--chip); }
.b-list details.open-row summary > .trail.k-ok { background: var(--ok); color: var(--on-outcome); } .b-list details.open-row summary > .trail.k-bad { background: var(--bad); color: var(--on-outcome); }
.b-list details.open-row summary::after { content: "›"; grid-column: 3; grid-row: 1; font-size: 20px; color: var(--muted); transform: rotate(90deg); transition: transform var(--dur) var(--ease); }
.b-list details.open-row[open] summary::after { transform: rotate(-90deg); }
.b-list details.open-row summary > .muted, .b-list details.open-row summary > .chips { grid-column: 1 / -1; }
.b-list details.open-row .open-detail { padding: 8px 0 4px; }
/* ---- D5 (issue 909) the receipt, the app's signature: the units as the hero, a result stamp, and a strip of line items under a real
   perforation (a dashed tear line with a notch cut out of each side, in the ground colour). A loss is drawn exactly like a win. ---- */
.receipt { padding: 0; position: relative; } /* no overflow clip: the notches sit on the card's own border */
.rc-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 18px 16px 20px; align-items: center; }
.rc-hero .rc-pick { font-family: var(--serif); font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; overflow-wrap: anywhere; } .rc-hero .rc-game { color: var(--muted); font-size: 13px; grid-column: 1; }
.rc-hero .rc-stamp { grid-column: 2; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 6px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--chip); color: var(--muted); transform: rotate(-4deg); outline: 1.5px solid currentColor; outline-offset: -4px; }
.rc-hero .rc-stamp.k-ok { background: var(--ok); color: var(--on-outcome); } .rc-hero .rc-stamp.k-bad { background: var(--bad); color: var(--on-outcome); } .rc-hero .rc-stamp.k-warn { background: var(--warn); color: var(--on-outcome); }
.rc-hero .rc-stamp.k-ok::before { content: "\2713" / ""; } .rc-hero .rc-stamp.k-bad::before { content: "\2715" / ""; } /* a mark beside the word: never colour alone */
.rc-hero .rc-units { grid-column: 1; font-family: var(--serif); font-size: 48px; font-weight: 700; letter-spacing: -.025em; line-height: 1; } .rc-hero .rc-units small { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 10px; letter-spacing: 0; }
.rc-strip { position: relative; margin: 0; padding: 18px 16px 14px; display: grid; gap: 8px; background: var(--paper); font-size: 16px; border-radius: 0 0 calc(var(--r-card) - 1px) calc(var(--r-card) - 1px); }
.rc-strip::before { content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 11px); } /* the tear line */
.rc-strip::after { content: ""; position: absolute; left: -1px; right: -1px; top: -9px; height: 18px; pointer-events: none;
  background: radial-gradient(circle at 0 50%, var(--ground) 0 8px, var(--line) 8px 9px, transparent 9.5px) left / 50% 100% no-repeat, radial-gradient(circle at 100% 50%, var(--ground) 0 8px, var(--line) 8px 9px, transparent 9.5px) right / 50% 100% no-repeat; } /* the notches */
.rc-line { display: flex; align-items: baseline; gap: 12px; }
.rc-strip .k { flex: 1 1 auto; display: flex; align-items: baseline; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.rc-strip .k::after { content: ""; flex: 1 1 auto; border-bottom: 2px dotted var(--line); transform: translateY(-3px); } /* the leader to the figure */
.rc-strip .v { flex: 0 1 auto; max-width: 72%; margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rc-rest { margin-top: 8px; }
/* Tabs: a page or section switch (two to five items). Equal width, never scrolling, unlike the filter chips above. Each tab is a
   44px target; its radius nests inside the strip's (the control radius less the strip's 2px padding). */
.b-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--card); }
.b-tabs .f { min-height: 44px; padding: 4px; border: 0; background: none; border-radius: calc(var(--r-control) - 2px); text-align: center; justify-content: center; color: var(--muted); font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
.b-tabs .f.on { background: var(--accent); color: var(--on-accent); }
/* Stepper: "‹ Week 5 ›", the label opens the full list. */
.b-stepper { display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; }
.b-stepper .step { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--chip); border-radius: var(--r-pill); text-decoration: none; font-size: 17px; line-height: 1; }
.b-stepper .step.off { color: var(--muted); border-color: transparent; background: none; }
.b-stepper details.pick { position: relative; }
.b-stepper summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); background: var(--chip); border-radius: var(--r-pill); font-weight: 600; text-align: center; min-width: 8em; }
.b-stepper summary::-webkit-details-marker { display: none; }
.b-stepper .menu { position: absolute; z-index: 2; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); display: grid; gap: 4px; max-height: 50vh; overflow-y: auto; padding: 8px; min-width: 10em; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); }
.b-stepper .menu .f { text-align: center; }
/* The crumb above the title: where the website goes up to (the app has a Back button). */
p.crumb { margin: 8px 0 0; font-size: 13px; } p.crumb a { color: var(--muted); text-decoration: none; }
/* Links are 44 x 44px targets (DESIGN.md, Touch targets) that move nothing: the link stays inline (or the 28px chip it was) and a
   transparent ::after, centred on it and never smaller than 44px each way, takes the tap. No size, margin or line changes, so a link
   or a chip that wraps cannot push or overlap its neighbours. */
.b-text a.t, .b-notice a.t, .b-kv dd a.t, .b-tiles a.t, p.crumb a, footer.status a:not(.record), .chips a.t { position: relative; }
.b-text a.t::after, .b-notice a.t::after, .b-kv dd a.t::after, .b-tiles a.t::after, p.crumb a::after, footer.status a:not(.record)::after, .chips a.t::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
/* Phones: long rows and values wrap instead of widening the page; wide tables scroll inside .b-table. */
.row, .b-kv dd, .tile, .b-notice, .b-text, .lane-note { overflow-wrap: anywhere; min-width: 0; }
div.b-kv { display: block; }  /* the .blk wrapper shares the class with the <dl> */
dl.b-kv { grid-template-columns: max-content minmax(0, 1fr); }
.b-table { max-width: 100%; -webkit-overflow-scrolling: touch; }
/* ---- D5 (issue 909) quiet tags and flat empty states ----
   A chip is a control that folds or selects (the filter bar, the period chips, the tabs). A label that only says something (a
   badge in a row, a model's status) is a quiet tag: text in its kind's colour, a middot between neighbours, no fill, no outline. */
.chips span.t { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: 13px; }
.chips span.t:not([class*="k-"]) { color: var(--muted); }
.chips span.t + span.t::before { content: "\00b7" / ""; margin-right: 6px; color: var(--muted); }
/* A notice is one card, never two: the .blk wrapper shares the class with the notice it holds. A muted notice with no role is an
   empty-state sentence (or a quiet note) and sits on the ground as plain muted text. */
.blk.b-notice { background: none; border: 0; border-radius: 0; padding: 0; }
.b-notice.k-muted:not([role]) { background: none; border: 0; border-radius: 0; padding: 12px 0; }
/* Keyboard focus: a visible ring on every control. */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .opts .opt:has(input:focus-visible) {
  outline: 2px solid var(--accent); outline-offset: 2px; }

/* ==== The game page's shape (look.game_shape, #909 D5): the call, the evidence open, everything else in closed rows. ====
   A separate block so a merge with the receipt's CSS above stays trivial. Headlines are the serif, figures the sans with tabular
   numerals (DESIGN.md type); colours and radii are tokens only. Our line is the filled side of the duel and the market the outlined one
   (the family's signature, as on the lines site), so which is which never depends on colour: each has its word. */
.g-zone { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.2; margin: 28px 0 4px; }
.g-call, .g-evidence { padding-bottom: 4px; }
.g-call > h2.day { margin-top: 20px; }
.g-call .b-heading h2 { font-family: var(--serif); font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; margin: 4px 0 2px; text-wrap: balance; }
.g-call .b-heading p { margin: 0; }
.g-duel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.g-side { display: grid; gap: 2px; align-content: start; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-card); }
.g-side.ours { background: var(--text); color: var(--ground); border-color: var(--text); }
.g-lbl { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.g-side.market .g-lbl { color: var(--muted); }
.g-fig { font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }
.g-sub { font-size: 13px; overflow-wrap: anywhere; } .g-side.market .g-sub { color: var(--muted); }
.g-verdict { display: grid; gap: 8px; justify-items: start; }
.g-tally { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 7px; background: var(--chip); font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; }
.g-tally.k-ok { background: var(--ok); color: var(--on-outcome); } .g-tally.k-bad { background: var(--bad); color: var(--on-outcome); }
.g-badge { display: inline-block; margin: 0 0 6px; font-size: 13px; }
.g-evidence > h2.day { margin-top: 20px; } .g-evidence .b-chart, .g-fold-body .b-chart { margin: 0; }
/* Everything else: one closed row each, a title and one line of what is inside; the row is the 44px target. */
.g-fold { border-top: 1px solid var(--line); } .g-fold:last-of-type { border-bottom: 1px solid var(--line); }
.g-fold summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 0; cursor: pointer; }
.g-fold summary::-webkit-details-marker { display: none; }
.g-fold summary .ttl { flex: 0 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-fold summary .now { flex: 1 1 0; min-width: 0; color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-fold summary::after { content: "›"; flex: none; margin-left: auto; font-size: 20px; color: var(--muted); transform: rotate(90deg); transition: transform var(--dur) var(--ease); }
.g-fold details[open] > summary::after { transform: rotate(-90deg); }
.g-fold-body { padding: 4px 0 12px; }

/* ==== Team art (team_art.py, DESIGN.md "Team art"): a mark and a colour for each team on the Games slate, the game page's header and a pick
   row. The marks are our own files (static/teams/); a team with none is a badge, its abbreviation on its colour (--fill, with --ink chosen
   by contrast), or on the chip with no colour. --away and --home are the two teams' colours, set on the card; a card without them draws
   the line colour. Decoration only: the names and figures beside the marks say everything, so nothing here carries state. ==== */
.tlogo { display: inline-block; flex: none; box-sizing: border-box; padding: 2px; border-radius: var(--r-control); object-fit: contain; vertical-align: middle;
  background: color-mix(in srgb, var(--text) 92%, var(--card)); } /* dark scheme: a light backing, so a navy or green mark reads (test_team_art measures it) */
@media (prefers-color-scheme: light) { .tlogo { background: none; } }
.b-game.header .g-team .tlogo { padding: 6px; }
.tlogo.inline { margin-right: 8px; }
.tbadge { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--fill, var(--chip)); color: var(--ink, var(--text)); font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0; overflow: hidden; }
.tbadge.big { width: 64px; height: 64px; font-size: 20px; } .tbadge.inline { width: 24px; height: 24px; margin-right: 8px; vertical-align: middle; }
.ic { width: 16px; height: 16px; flex: none; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chips .t .ic { margin-right: 6px; }
/* A slate card: a stripe of the two teams' colours across its top (half and half), then a row for each team. */
.b-game.slate { background: linear-gradient(90deg, var(--away, var(--line)) 50%, var(--home, var(--line)) 50%) top / 100% 3px no-repeat, var(--card); gap: 4px; min-width: 0; }
.b-game.slate .tm { display: flex; align-items: center; gap: 8px; min-height: 36px; min-width: 0; }
.b-game.slate .tm-name { font-size: 17px; font-weight: 600; min-width: 0; overflow-wrap: break-word; }
.b-game.slate .tm-split { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.b-game.slate .tm-score { margin-left: auto; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.b-game.slate .tm.lost .tm-name, .b-game.slate .tm.lost .tm-score { color: var(--muted); }
.b-game.slate > small, .b-game.slate > .chips { padding-top: 2px; }
/* On a wide page the slate's cards sit two across, as the app's do; the marquee and the day's title take the whole row. */
@media (min-width: 640px) {
  section:has(> .blk > a.b-game.slate) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
  section:has(> .blk > a.b-game.slate) > h2.day, section:has(> .blk > a.b-game.slate) > .blk:has(> a.marquee) { grid-column: 1 / -1; }
  section:has(> .blk > a.b-game.slate) > .blk { margin: 4px 0; }
}
/* The marquee: the week's first game drawn large. A wash of each team's colour (28 % at the card's edge, clear by the middle) over the
   card, and both marks faint (10 %) behind it. Its text is `--text` and nothing else, because the muted ink does not hold 4.5:1 on a wash
   (tests/nflcore/test_team_art.py measures --text over the worst case of every team colour, in both schemes). */
.b-game.slate.marquee { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 8px; min-height: 132px; padding: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--away, transparent) 28%, transparent), transparent 50%),
              linear-gradient(270deg, color-mix(in srgb, var(--home, transparent) 28%, transparent), transparent 50%), var(--card); }
.marquee .mq-bg { position: absolute; inset: 0; z-index: -1; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; pointer-events: none; }
.marquee .mq-bg .tlogo { opacity: .1; margin: 0 -28px; width: 112px; height: 112px; padding: 0; background: none; } .marquee .mq-bg .tbadge { display: none; }
.marquee .mq-side { display: grid; gap: 2px; min-width: 0; } .marquee .mq-side.away { justify-items: start; } .marquee .mq-side.home { justify-items: end; text-align: right; }
.marquee .mq-side b { font-family: var(--serif); font-size: 28px; line-height: 1.1; letter-spacing: -.01em; overflow-wrap: normal; word-break: normal; }
/* The big name is the team's key (KC, BOS, OKLA); a longer display name ("Mississippi State") is the small line under it and wraps between words, never inside one. */
.marquee .mq-full { font-size: 13px; line-height: 1.25; overflow-wrap: normal; word-break: normal; text-wrap: balance; }
.marquee .mq-score { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.marquee .mq-mid { display: grid; gap: 2px; justify-items: center; text-align: center; min-width: 0; font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: normal; } .marquee .mq-mid small { font-size: 13px; }
.marquee .mq-tags { grid-column: 1 / -1; } .marquee .mq-tags .t { color: var(--text); }
.marquee { color: var(--text); }
/* The game page's header: each team's mark large above its name, with a rule of its colour under the column. */
.b-game.header .g-team { padding-bottom: 8px; border-bottom: 3px solid var(--line); }
.b-game.header .g-team:first-child { border-bottom-color: var(--away, var(--line)); } .b-game.header .g-team:last-child { border-bottom-color: var(--home, var(--line)); }
.b-game.header .g-team .tlogo, .b-game.header .g-team .tbadge { margin: 0 auto 4px; }
.marquee .mq-side .tbadge { width: 48px; height: 48px; font-size: 15px; }