/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   IONIZED CIRCUIT inside the ionized.no chrome (circuit_page.html extends base.html: site header, live ribbon, footer).
   Every rule is scoped under .circuit. The template puts that class on the app (inside the site's <main>) and on the
   overlays wrapper (search, help, toast: after <main>, so they can sit above the fixed site header).
   The design tokens keep the prototype's NAMES (--bg, --row, --ion, --txt …), moved from :root to .circuit; their VALUES
   are references to the site's tokens (theme/static/css/ionized-tokens.css, docs/DESIGN_SYSTEM.md §4.5), which styles.css
   imports on every page. No colour, font, size, tracking, clip or shadow literal lives in this sheet (rule 1; pinned by
   circuit/tests/test_design.py). A standalone shell (<body class="circuit">, the client harness) links
   ionized-tokens.css before this sheet. --nr alone stays on <html>: circuit.js sets it there and --tpl (declared here)
   inherits it.
   The shapes are the system's: a container (card, chamber, dialog, bracket / league / archive box, toast) takes the 22px
   bottom-left cut, anything clickable (chips, the strip's links, the tools) the slant, readouts (tags, grades, MVP) stay
   square, and the grid's cells stay square frames. Win is mint and loss pink, as on /league/, and never colour alone: a win
   is FILLED, a loss OPEN (a frame without a fill, a ring, a down-triangle on the ladder), so a colour-blind reader tells
   them apart (on screen: the fill and the ring are a background and a shadow, which a print drops); cyan is Ionized
   ("us"), the selected round and focus.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.circuit [hidden]{display:none!important}
.circuit img{max-width:100%}
.circuit{
  color-scheme:dark;
  --bg:var(--ion-bg); --bg2:var(--ion-panel); --row:var(--ion-panel); --row2:var(--ion-panel-2); --edge:var(--ion-panel);
  --line:var(--ion-accent-dim); --line2:var(--ion-line); --line3:var(--ion-line-strong);
  --ion:var(--ion-accent); --ion-2:var(--ion-accent-dim); --ion-3:var(--ion-accent-tint); --ion-4:var(--ion-accent-wash);
  --txt:var(--ion-ink); --mut:var(--ion-ink-soft); --dim:var(--ion-ink-faint); --dim2:var(--ion-ink-ghost);
  --loss:var(--ion-down); --loss-2:var(--ion-down-tint); --wo:var(--ion-ink-faint);
  --win:var(--ion-win); --win-2:var(--ion-win-tint);          /* result cells, form dots, ladder points */
  --win-fill:rgb(var(--ion-win-rgb) / .22);                 /* the FILLED result (a win): measured ≥ 40/255 over an open loss in greyscale */
  --disp:var(--ion-head); --data:var(--ion-body);
  --top:56px; --bot:60px; --rowh:52px; --side:16px;
  --tpl:262px repeat(var(--nr,9),minmax(52px,1fr)) 64px minmax(178px,1.35fr);
  /* where the app starts: the bottom edge of the site chrome, i.e. the live ribbon's under the fixed site header (or the
     header's when there is no ribbon). circuit.js measures it into --circuit-top (the header depends on the CMS logo
     setting and the xl breakpoint, the ribbon wraps on phones); the no-JS fallback is the taller-logo header alone,
     3rem / 5rem plus its 1px rule */
  --chrome:var(--circuit-top,calc(3rem + 1px));
}
@media (min-width:1280px){.circuit{--chrome:var(--circuit-top,calc(5rem + 1px))}}
.circuit *{box-sizing:border-box}
.circuit{color:var(--txt);font:500 var(--ion-fs-dense)/1.35 var(--data);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.circuit button{font:inherit;color:inherit}
.circuit :focus-visible{outline:1px solid var(--ion);outline-offset:2px}

/* ── site resets: Tailwind preflight + theme_3 restyle bare elements; the prototype was drawn on browser defaults.
      Each line puts back what the prototype rendered (found by diffing computed styles with the site CSS on and off). ── */
.circuit a{color:inherit;text-decoration:underline}                         /* preflight drops the underline (links in notes keep it) */
.circuit b,.circuit strong{font-weight:bolder}                               /* theme: b{600} */
.circuit p,.circuit li{font-size:inherit;font-weight:inherit;line-height:inherit;text-wrap:inherit}   /* theme: p,li{16/500/1.5} */
.circuit p{margin:1em 0}                                                      /* preflight p{margin:0}: the notes keep the UA bottom margin */
.circuit :is(h1,h2,h3,h4):not([class*="text-"]){color:inherit}               /* theme: [class*="theme-"] hN:not([class*="text-"]), same weight */

/* ── in the site chrome: the app fills the viewport below the site header + live ribbon, the footer follows (page scroll) ──
   --circuit-gap (circuit.js) = the app's top minus what already sits above <main> (the sticky ribbon's own flow box and
   margin; the ribbon itself shows under the header), so the app starts at the ribbon's bottom edge, or the header's
   without a ribbon. svh, not dvh: the page scrolls now, and a dvh app would grow and shift while a phone's toolbar
   collapses on the way to the footer. */
.circuit #ions{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.circuit .app{position:relative;z-index:1;display:flex;flex-direction:column;min-height:0;margin-top:var(--circuit-gap,var(--chrome));height:calc(100vh - var(--chrome));height:calc(100svh - var(--chrome))}
.circuit .edge.top .mark{display:none}                                        /* the site logo is in the header above */
/* standalone (the client harness, a bare shell): <body class="circuit"> is the whole page, as in the prototype */
body.circuit{margin:0;background:var(--bg);overflow:hidden}
body.circuit .edge.top{height:calc(var(--top) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px)}
body.circuit .edge.top .mark{display:flex}

/* ── top edge: where you are ── */
.circuit .edge{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding-inline:var(--side)}
.circuit .edge.top{height:var(--top);border-bottom:1px solid var(--line2);background:linear-gradient(180deg,rgb(var(--ion-bg-rgb) / .92),rgb(var(--ion-bg-rgb) / .7));backdrop-filter:blur(6px)}
.circuit .mark{display:flex;align-items:center;gap:9px;text-decoration:none;font:700 var(--ion-fs-lg)/1 var(--disp);letter-spacing:var(--ion-tr-label);color:var(--txt);white-space:nowrap}
.circuit .mark .io{color:var(--ion)}
.circuit .mark svg{width:22px;height:22px;flex:0 0 auto}
/* the crumb is the app's tab bar (§3.8): parents ink-soft, the current coordinate ink on the cyan underline */
.circuit .crumb{display:flex;align-items:center;gap:2px;min-width:0;overflow:hidden;flex:1}
.circuit .crumb button{background:none;border:0;padding:8px 6px;font:600 var(--ion-fs-cap)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--mut);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent}
.circuit .crumb button:hover{color:var(--txt)}
.circuit .crumb button.cur{color:var(--txt);border-bottom-color:var(--ion);cursor:default}
.circuit .crumb .back{display:none}
.circuit .crumb i{display:inline-flex;align-items:center;color:var(--dim2);font-style:normal;padding:0 2px}
.circuit .ion-icon{display:inline-block;flex:0 0 auto;vertical-align:middle}
.circuit .tools{display:flex;gap:8px;flex:0 0 auto}
.circuit .kb{display:inline-block;min-width:18px;text-align:center;padding:2px 5px;border:1px solid var(--line3);border-bottom-width:2px;border-radius:0;font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:0;color:var(--mut);background:var(--row2)}

/* ── round ruler (tall only) ── */
.circuit .ruler{display:none}

/* ── stage ── */
.circuit .stage{--stage-pt:12px;flex:1 1 auto;min-height:0;overflow:auto;position:relative;padding:var(--stage-pt) var(--side);scrollbar-width:thin;scrollbar-color:var(--dim2) transparent}
.circuit .stage.in>*{animation:c-zoom .22s cubic-bezier(.2,.7,.2,1)}
@keyframes c-zoom{from{opacity:0;transform:scale(.988)}to{opacity:1;transform:none}}

/* grids share one grammar: rows are WHO, columns are WHEN. A wide matrix keeps its zebra (panel / panel-2) and square cells. */
.circuit .grid{--cols:var(--tpl);display:block;border:1px solid var(--line2);background:var(--row);min-width:0}
/* a knockout-only division (qualifier, playoff) has no round columns: team · pts · forecast */
.circuit .grid.nor{--cols:262px 64px minmax(178px,1.35fr)}
.circuit .rgrid.nor{--cols:262px}
.circuit .ghead,.circuit .grow{display:grid;grid-template-columns:var(--cols)}
/* sticky inside the padded stage: top:0 stuck the header one padding BELOW the stage top, and scrolled rows showed through above it */
.circuit .ghead{position:sticky;top:calc(-1 * var(--stage-pt,0px));z-index:3;background:var(--bg2);border-bottom:1px solid var(--line3)}
/* the column heads are table heads (§3.6): micro, .16em, ink-soft. The column hairlines of the grid (heads, round cells, points,
   forecast) are line-strong: a colour-blind reader could not tell the round columns apart on the faint hairline alone */
.circuit .gh{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:8px 10px;font:600 var(--ion-fs-micro)/1.15 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--mut);border-left:1px solid var(--line3);background:none;border-top:0;border-right:0;border-bottom:0;text-align:left;cursor:default;min-height:46px}
.circuit .gh:first-child{border-left:0}
.circuit .gh small{font:500 var(--ion-fs-micro)/1 var(--data);letter-spacing:0;text-transform:none;color:var(--dim)}
.circuit .gh.round{cursor:pointer}
.circuit .gh.round:hover{color:var(--txt)}
.circuit .gh.sel{color:var(--ion);background:var(--ion-3)}
.circuit .gh.sel small{color:var(--ion)}
.circuit .gh.xc{background:var(--ion-4)}
.circuit .gh.xc.sel{background:var(--ion-3)}
.circuit .grow{flex-grow:0;min-height:var(--rowh);border-top:1px solid var(--line2);position:relative;background:var(--row)}
.circuit .grow:nth-child(odd){background:var(--row2)}
.circuit .grow.ion{background:linear-gradient(90deg,var(--ion-4),transparent 55%)}
.circuit .grow.ion::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent 0%,var(--ion) 45%,var(--ion) 55%,transparent 100%);background-size:45% 100%;background-repeat:no-repeat;animation:c-wire 3.2s linear infinite;opacity:.9}
@keyframes c-wire{from{background-position:-45% 0}to{background-position:145% 0}}
.circuit .grow.moving{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.circuit .grow.xr{box-shadow:inset 3px 0 0 var(--ion-2)}
/* Ionized's row ("us", §3.6): the accent edge on the left, the accent rank, tag, name and points (after .xr: it keeps its edge) */
.circuit .grow.ion{box-shadow:var(--ion-edge-left)}

.circuit .tcell{display:flex;align-items:center;gap:10px;padding:0 12px;cursor:pointer;min-width:0;background:none;border:0;text-align:left}
.circuit .tcell:hover .nm,.circuit .tcell.focus .nm{color:var(--ion)}
.circuit .rk{width:24px;flex:0 0 auto;font:700 var(--ion-fs-body)/1 var(--disp);color:var(--dim);text-align:right}
.circuit .grow.ion .rk,.circuit .grow.ion .nm{color:var(--ion)}
/* the rank's move since the last round: a triangle drawn by the border (no glyph), then the number; mint up, pink down */
.circuit .dl{width:22px;flex:0 0 auto;font:600 var(--ion-fs-micro)/1 var(--disp);color:var(--dim2);letter-spacing:var(--ion-tr-head);white-space:nowrap}
.circuit .dl.up{color:var(--win)}.circuit .dl.dn{color:var(--loss)}
.circuit .dl.up::before,.circuit .dl.dn::before{content:"";display:inline-block;width:0;height:0;margin-right:2px;border:4px solid transparent;vertical-align:1px}
.circuit .dl.up::before{border-bottom:6px solid currentColor;border-top-width:0}
.circuit .dl.dn::before{border-top:6px solid currentColor;border-bottom-width:0}
/* the team's tag is a readout (§3.3): square, micro, .16em */
.circuit .ab{flex:0 0 auto;min-width:36px;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;padding:4px 5px;border:1px solid var(--line3);border-radius:0;background:var(--row2);font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--mut)}
.circuit .grow.ion .ab{border-color:var(--ion-2);color:var(--ion)}
.circuit .tinfo{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.circuit .nm{font:600 var(--ion-fs-dense)/var(--ion-lh-snug) var(--data);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.circuit .rc{font:500 var(--ion-fs-micro)/1.1 var(--data);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.circuit .rc b{color:var(--mut);font-weight:600}
/* form dots (§3.14): 7px round, win mint · loss pink, as /league/ — and never colour alone: a win is a filled dot, a loss an
   open ring (the 1.5px inset shadow keeps the 7px box; .ion-form-dot.down in styles.css draws the same ring), a draw the ghost dot */
.circuit .form{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle}
.circuit .form i{width:7px;height:7px;border-radius:50%;background:var(--dim2)}
.circuit .form i.w{background:var(--win)}.circuit .form i.l{background:none;box-shadow:inset 0 0 0 1.5px var(--loss)}

.circuit .trail{display:contents}
.circuit .cell{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;border-left:1px solid var(--line3);cursor:pointer;position:relative;isolation:isolate;color:var(--mut);background:none;padding:0;border-top:0;border-right:0;border-bottom:0;min-width:0}
/* a label never runs over the drawn frame (::before: inset 6px plus its 1px border, inside the cell's 1px left border, so the
   frame's inner edge is 8px from the left and 7px from the right): capped at 100% − 16px, unpadded and centred, a truncated label
   and its ellipsis end 1px inside the frame (a team with a missing or bad abbreviation is labelled by its whole name, cut
   here, never by derived initials or a first word: riot/team_tags.py). The score is Chakra 500 tabular (§3.6 numbers). */
.circuit .cell b{font:500 var(--ion-fs-body)/1 var(--disp);letter-spacing:var(--ion-tr-head);max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0}
.circuit .cell small{font:500 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-ui);text-transform:uppercase;color:var(--dim);max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0}
.circuit .cell::before{content:"";position:absolute;inset:7px 6px;border-radius:0;z-index:-1;border:1px solid transparent}
/* results: one treatment on every layout (the phone strip reads the same frames), the row team's view — and never told apart
   by colour alone (WCAG 1.4.1; staff feedback 2026-10-05, colour-blind): a WIN is a FILLED frame (mint text and border over
   the mint fill), a LOSS an OPEN frame (pink text and border, no fill at all), a draw open and muted. "Filled" means exactly
   one thing, so the loss and the draw never carry a tint. Checked in greyscale: the win interior reads ≥ 40/255 above the loss
   interior (--win-fill: the token's mint at the strength that measures so, not the 10% --win-2; one strength on every filled
   result, the highlight tag and the archive row included). Known limit: a draw and a loss are both open and differ by their
   border and text colour and by the score (a draw's is level) — the league has had no draw in 410 played matches. */
.circuit .cell.win b{color:var(--win)}
/* the caption (the opponent) on the filled win tile reads in ink-soft: ink-faint on the mint fill was 1.9:1 (owner, 2026-10-05) */
.circuit .cell.win small,.circuit .rgrid .cell.pick.w small{color:var(--mut)}
.circuit .cell.win::before{background:var(--win-fill);border-color:var(--ion-win-border)}
.circuit .cell.loss b{color:var(--loss)}
.circuit .cell.loss::before{background:none;border-color:var(--ion-down-border)}
.circuit .cell.draw b{color:var(--mut)}
.circuit .cell.draw::before{border-color:var(--line3);background:none}
.circuit .cell.wo::before{background:repeating-linear-gradient(45deg,transparent 0 4px,var(--line2) 4px 5px);border-color:var(--line2)}
/* a fixture: the opponent's name (Rajdhani, as written) over its date; a dashed frame (dashed = a future slot) */
.circuit .cell.future b{font:600 var(--ion-fs-cap)/1 var(--data);letter-spacing:0;color:var(--dim)}
.circuit .cell.future::before{border:1px dashed var(--line3)}
.circuit .cell.next b{color:var(--ion)}
.circuit .cell.next::before{border:1px dashed var(--ion-2);animation:c-nextpulse 2.4s ease-in-out infinite}
@keyframes c-nextpulse{0%,100%{box-shadow:none}50%{box-shadow:var(--ion-glow-soft)}}
.circuit .cell.selcol{background:var(--ion-4)}
.circuit .cell.xr,.circuit .cell.xc{background:var(--ion-4)}
.circuit .cell.xr.xc{background:rgb(var(--ion-accent-rgb) / .1)}
.circuit .cell.focus::before{border-color:var(--ion);box-shadow:var(--ion-ring),var(--ion-glow-soft)}
.circuit .cell.blank{cursor:default}
.circuit .cell.blank::before{display:none}
/* every other round column carries a lightness-only tint, so the columns read without colour (and in greyscale): counted among
   the round cells alone (.trail holds nothing else; the heads count only those with a round, data-c), so the team, points and
   forecast columns are untouched. :where() keeps it under the hover (.xc) and selected (.selcol / .sel) washes, which stay
   the stronger treatment. The tall layout's round strip has no columns to tell apart (the ruler names the round). */
.circuit .trail>:where(.cell:nth-child(even)){background:rgb(var(--ion-ink-rgb) / .04)}
.circuit .ghead>:where(.gh:nth-child(even of [data-c])){background:rgb(var(--ion-ink-rgb) / .04)}
.circuit .tall .trail>:where(.cell:nth-child(even)){background:none}

/* PTS: the key metric, Chakra 700 at lg (§2.4) */
.circuit .pcell{display:flex;align-items:center;justify-content:center;font:700 var(--ion-fs-lg)/1 var(--disp);color:var(--txt);border-left:1px solid var(--line3)}
.circuit .grow.ion .pcell{color:var(--ion)}
.circuit .fcell{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:4px 12px;border-left:1px solid var(--line3);font-size:var(--ion-fs-cap);color:var(--mut);cursor:pointer;background:none;border-top:0;border-right:0;border-bottom:0;text-align:left;min-width:0}
.circuit .fcell .fl{display:flex;justify-content:space-between;gap:8px;white-space:nowrap}
.circuit .fcell .fl b{color:var(--txt);font-weight:700}
.circuit .fcell .fl span{color:var(--dim)}
.circuit .bat{height:4px;background:var(--line2);border-radius:0;overflow:hidden}
/* the forecast bar (§3.6 inline bar): neutral ink-soft, Ionized's own cyan ("us"), a long shot faint */
.circuit .bat i{display:block;height:100%;width:var(--p);background:var(--mut);transition:width .5s}
.circuit .grow.ion .bat i{background:var(--ion)}
.circuit .bat.low i{background:var(--dim)}
.circuit .fcell.focus{box-shadow:var(--ion-ring)}
.circuit .fcell.xr{background:var(--ion-4)}

/* readout: the preview surface (hover / arrow keys / long-press) */
.circuit .readout{flex:0 0 auto;height:44px;display:flex;align-items:center;gap:14px;padding-inline:var(--side);border-top:1px solid var(--line2);font-size:var(--ion-fs-small);color:var(--mut);white-space:nowrap;overflow:hidden;background:var(--bg2)}
.circuit .readout b{color:var(--txt);font-weight:700}
.circuit .readout .k{color:var(--dim)}
.circuit .readout .k .kb{margin:0 2px}
.circuit .readout .tag{flex:0 0 auto;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--ion);padding:4px 8px;border:1px solid var(--ion-2);border-radius:0;background:var(--row2)}
/* "full breakdown": the cells' cyan dot, drawn (no glyph) */
.circuit .readout .bd{color:var(--ion)}
.circuit .readout .bd::before,.circuit .help .dotm{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ion);box-shadow:var(--ion-glow-dot);vertical-align:2px}
.circuit .readout .bd::before{margin-right:6px}

/* ── bottom edge: what is next ── */
.circuit .edge.bottom{height:calc(var(--bot) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);border-top:1px solid var(--line2);background:var(--edge)}
.circuit .pulse{width:8px;height:8px;border-radius:50%;background:var(--ion);flex:0 0 auto;animation:c-pulse 2.2s ease-out infinite}
@keyframes c-pulse{0%{box-shadow:0 0 0 0 var(--ion-2)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.circuit .next{display:flex;align-items:center;gap:12px;flex:1;min-width:0;background:none;border:0;padding:6px 0;cursor:pointer;text-align:left}
.circuit .next .lbl{font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--dim);flex:0 0 auto}
.circuit .next .vs{font:700 var(--ion-fs-body)/1 var(--disp);letter-spacing:var(--ion-tr-head);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.circuit .next .vs .short{display:none}
.circuit .next .vs em{font-style:normal;color:var(--dim);font-weight:500;padding:0 4px}
.circuit .next .when{color:var(--mut);font-size:var(--ion-fs-cap);white-space:nowrap}
.circuit .cd{font:700 var(--ion-fs-small)/1 var(--disp);letter-spacing:var(--ion-tr-label);color:var(--ion);white-space:nowrap;flex:0 0 auto}
.circuit .soc{display:flex;gap:8px;flex:0 0 auto}
/* the club's links repeat the site footer's icons: they step aside while the footer is on screen (circuit.js marks .footin) */
.circuit .app.footin .soc a:not(.watch):not(.cal){display:none}

/* ── one clickable recipe (§3.1, §3.2): the slanted chip at sm, always filled (panel-2, 1px line, ink-soft). A card's text
      links (.links a), the bottom strip's (.soc a), the top edge's tools and the no-JS fallback's links are the same chip,
      so an <a> in a .links row and an A(…, 'chip') read alike. Hover lights the border and text cyan (an inset glow: a clip
      cuts an outer one away); keyboard focus is the inset focus ring (--ion-ring-focus: the ring + a white line, so it never
      reads as "selected"), and the grid cursor (.focus: arrow keys, the hover preview) is the plain inset ring. ── */
.circuit .chip,.circuit .links a,.circuit .soc a,.circuit .tools button,.circuit .c-ssr li a,.circuit .c-skip{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:24px;padding:5px 10px;font:500 var(--ion-fs-cap)/1.15 var(--disp);letter-spacing:var(--ion-tr-ui);text-transform:uppercase;text-decoration:none;color:var(--mut);background:var(--row2);border:1px solid var(--line2);border-radius:0;outline:none;clip-path:var(--ion-clip-slant);cursor:pointer;transition:color var(--ion-dur-fast) ease,background-color var(--ion-dur-fast) ease,border-color var(--ion-dur-fast) ease,box-shadow var(--ion-dur-fast) ease}
.circuit .chip:where(a,button,[role="button"]):hover,.circuit .links a:hover,.circuit .soc a:hover,.circuit .tools button:hover,.circuit .c-ssr li a:hover{color:var(--ion);border-color:var(--ion);box-shadow:var(--ion-glow-inset)}
.circuit .chip:focus-visible,.circuit .links a:focus-visible,.circuit .soc a:focus-visible,.circuit .tools button:focus-visible,.circuit .c-ssr li a:focus-visible,.circuit .c-skip:focus{outline:none;box-shadow:var(--ion-ring-focus)}
.circuit .chip:where(a,button):active,.circuit .links a:active,.circuit .soc a:active,.circuit .tools button:active{transform:translateY(1px)}
/* primary (the one main action: Watch, the skip link) is a tint, never a solid fill; on (selected: the current division, the
   shortcut switch while it is on) adds the inset ring; the series chip with a breakdown is the "us" accent on accent-dim */
.circuit .soc a.watch,.circuit .c-skip,.circuit .chip.on,.circuit .chip[aria-pressed="true"]{color:var(--ion);background:var(--ion-3);border-color:var(--ion)}
.circuit .chip.on,.circuit .chip[aria-pressed="true"]{box-shadow:var(--ion-ring)}
.circuit .chip.on:focus-visible,.circuit .chip[aria-pressed="true"]:focus-visible{box-shadow:var(--ion-ring-focus)}
.circuit .chip.focus{outline:none;box-shadow:var(--ion-ring)}
.circuit .soc a.watch:hover,.circuit .chip.on:hover,.circuit .chip[aria-pressed="true"]:hover{background:var(--ion-accent-tint-2)}
.circuit .chip.deep{color:var(--ion);border-color:var(--ion-2)}
.circuit .chip .io{color:var(--ion)}
/* an earlier meeting with no page to open is a readout, not a button: square, faint, no hover */
.circuit .chip.off{clip-path:none;cursor:default;color:var(--dim);background:var(--row2);border-color:var(--line2)}
@media (pointer:coarse){.circuit .chip,.circuit .links a,.circuit .soc a,.circuit .tools button{min-height:32px}}

/* ── views ── */
/* the page title at APP density (§1.3): 24px (20 on a phone), no glow */
.circuit .h1{margin:0;font:700 var(--ion-fs-2xl)/1.2 var(--disp);letter-spacing:var(--ion-tr-head);text-transform:uppercase;text-wrap:balance}
@media (max-width:519px){.circuit .h1{font-size:var(--ion-fs-xl)}}
.circuit .h1 .io{color:var(--ion)}
.circuit .eyebrow{display:block;font:600 var(--ion-fs-cap)/1.2 var(--disp);letter-spacing:var(--ion-tr-eyebrow);text-transform:uppercase;color:var(--ion);margin:0 0 8px}
.circuit .sub{color:var(--mut);font-size:var(--ion-fs-dense);margin:6px 0 0}
.circuit .vhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:2px 0 12px}
.circuit .vhead .meta{display:flex;gap:16px;flex-wrap:wrap;font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--dim)}
.circuit .vhead .meta b{color:var(--mut);font-weight:600}
/* a card is the system's panel (§3.4): panel fill, the hairline, the 22px bottom-left cut, 16px (APP) */
.circuit .card{border:1px solid var(--line2);background:var(--row);padding:var(--ion-pad-panel-app);clip-path:var(--ion-clip-panel)}
.circuit .card+.card{margin-top:12px}
.circuit .card h3{margin:0 0 12px;font:700 var(--ion-fs-cap)/1.2 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--mut)}
.circuit .card p{margin:0 0 10px;color:var(--mut);font-size:var(--ion-fs-dense);line-height:var(--ion-lh-body);max-width:62ch}
.circuit .card p.eyebrow{max-width:none;margin:0 0 8px;color:var(--ion);font-size:var(--ion-fs-cap);line-height:1.2}   /* the eyebrow's own look inside a card (card p would make it prose) */
.circuit .card p.lede{color:var(--txt);font:700 var(--ion-fs-xl)/1.2 var(--disp);text-transform:uppercase;letter-spacing:var(--ion-tr-head);max-width:none}
.circuit .card p.quote{margin:14px 0 10px;color:var(--txt);font:600 var(--ion-fs-body)/1.35 var(--data)}
.circuit .facts{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:0}
.circuit .facts div{display:flex;flex-direction:column;gap:4px}
.circuit .facts dt{font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--mut)}
.circuit .facts dd{margin:0;color:var(--txt);font-size:var(--ion-fs-dense)}
/* stat tiles (§3.13): the label on top (micro, ink-soft), the value under it (Chakra 700, cyan for the club's own numbers) */
.circuit .stats4{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0 0 16px}
.circuit .stats4 div{display:flex;flex-direction:column-reverse;justify-content:flex-end;align-items:flex-start;gap:6px;padding:12px;background:var(--row2);border:1px solid var(--line2);clip-path:var(--ion-clip-panel)}
.circuit .stats4 b{font:700 var(--ion-fs-2xl)/1 var(--disp);letter-spacing:var(--ion-tr-head);color:var(--ion)}
.circuit .stats4 span{font:600 var(--ion-fs-micro)/1.2 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--mut)}
.circuit .links{display:flex;flex-wrap:wrap;gap:8px}

.circuit .team{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"main cham" "main side";gap:14px;align-items:start}
.circuit .team .tmain{grid-area:main;min-width:0}.circuit .team .chamber{grid-area:cham}.circuit .team .tside{grid-area:side}
/* the ion chamber: a container (the cut), washed so the shape reads over the ion field it frames */
.circuit .chamber{position:relative;height:340px;border:1px solid var(--line2);background:var(--ion-4);clip-path:var(--ion-clip-panel);display:flex;flex-direction:column;justify-content:flex-end;padding:14px;overflow:hidden}
.circuit .chamber .cap{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;margin:0 -14px -14px;padding:26px 14px 14px;background:linear-gradient(180deg,rgb(var(--ion-bg-rgb) / 0),rgb(var(--ion-bg-rgb) / .86) 40%)}
.circuit .chamber .cap b{font:700 var(--ion-fs-xl)/1 var(--disp);letter-spacing:var(--ion-tr-head);text-transform:uppercase;color:var(--txt)}
.circuit .chamber .cap span{font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--ion)}
.circuit .chamber .cap small{color:var(--dim);font-size:var(--ion-fs-cap);font-family:var(--data);letter-spacing:0;text-transform:none}
.circuit .chamber .corner{position:absolute;top:10px;left:12px;font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--dim)}
.circuit .rgrid{--cols:262px repeat(var(--nr,9),minmax(0,1fr))}
.circuit .player .rgrid{--cols:150px repeat(var(--nr,9),minmax(0,1fr))}   /* one row (the player): the name column is narrow (prototype.md §4) */
.circuit .player .rgrid.nor{--cols:150px}
/* a pick: the champion (Rajdhani, as written) over its K/D/A (Chakra 500 tabular); won mint and filled, lost pink and open,
   like a result */
.circuit .rgrid .cell b{font:600 var(--ion-fs-small)/1 var(--data);letter-spacing:0}
.circuit .rgrid .cell small{font-size:var(--ion-fs-micro);letter-spacing:var(--ion-tr-head)}
.circuit .rgrid .cell.pick b{color:var(--txt)}
.circuit .rgrid .cell.pick::before{border-color:var(--line3)}
.circuit .rgrid .cell.pick.w::before{background:var(--win-fill);border-color:var(--ion-win-border)}
.circuit .rgrid .cell.pick.w b{color:var(--win)}
.circuit .rgrid .cell.pick.l::before{background:none;border-color:var(--ion-down-border)}
.circuit .rgrid .cell.pick.l b{color:var(--loss)}
.circuit .role{width:32px;flex:0 0 auto;font:700 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);color:var(--ion)}
.circuit .grade{margin-left:auto;flex:0 0 auto;display:flex;align-items:baseline;gap:3px;font:700 var(--ion-fs-dense)/1 var(--disp);color:var(--txt)}
.circuit .grade span{font-size:var(--ion-fs-micro);color:var(--dim);letter-spacing:var(--ion-tr-ui)}
.circuit .grow.group{min-height:40px;background:var(--bg2)}
.circuit .grow.group .tcell{grid-column:1 / -1;cursor:default;gap:10px;flex-wrap:wrap;padding:8px 12px}
.circuit .grow.group .tcell:hover .nm{color:var(--txt)}
.circuit .grow.group .lab{font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--dim);min-width:60px}
.circuit .lb{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.circuit .lb li{display:grid;grid-template-columns:1fr auto auto;gap:10px;font-size:var(--ion-fs-small);color:var(--mut)}
.circuit .lb li b{color:var(--txt);font-weight:600}
.circuit .lb li span{color:var(--dim);font-variant-numeric:tabular-nums}

.circuit .player{display:grid;grid-template-columns:320px minmax(0,1fr) 300px;grid-template-areas:"cham main right" "left main right";gap:14px;align-items:start}
.circuit .player .chamber{grid-area:cham}.circuit .player .pleft{grid-area:left}.circuit .player .pmain{grid-area:main;min-width:0}.circuit .player .pright{grid-area:right}
.circuit .pchamber{height:340px}
.circuit .cring{display:flex;align-items:center;gap:14px}
.circuit .cring svg{width:84px;height:84px;flex:0 0 auto}
.circuit .cring svg .rt{fill:none;stroke:var(--line2)}
.circuit .cring svg .rv{fill:none;stroke:var(--ion)}
.circuit .cring .big{font:700 var(--ion-fs-3xl)/1 var(--disp);color:var(--txt)}
.circuit .cring .big span{font-size:var(--ion-fs-dense);color:var(--ion);margin-left:4px}
.circuit .cring small{display:block;color:var(--dim);font-size:var(--ion-fs-cap);margin-top:4px}
/* the rating radar (circuit.js radarSvg): its labels are type at the micro step on screen (CSS, not SVG attributes) */
.circuit .radar{width:100%;max-width:280px;display:block;margin:6px auto 0}
.circuit .radar .rg{fill:none;stroke:var(--line2)}
.circuit .radar .rp{fill:var(--ion-3);stroke:var(--ion);stroke-width:1.5}
.circuit .radar .rd{fill:var(--ion)}
.circuit .radar .rl{font:600 var(--ion-fs-body) var(--disp);letter-spacing:0;fill:var(--dim)}
.circuit .radar .rl .rv{fill:var(--txt)}
.circuit .bars{display:flex;flex-direction:column;gap:8px}
.circuit .bar{display:grid;grid-template-columns:104px 1fr 44px;align-items:center;gap:10px;font-size:var(--ion-fs-small);color:var(--mut)}
.circuit .bar b{color:var(--txt);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.circuit .bar b a{color:inherit;text-decoration:none}.circuit .bar b a:hover{color:var(--ion)}
.circuit .bar i{display:block;height:6px;background:var(--line2);position:relative}
.circuit .bar i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--ion)}
.circuit .bar.mut i::after{background:var(--dim)}
.circuit .bar span{text-align:right;color:var(--dim)}
.circuit .hl{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.circuit .hl li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:var(--ion-fs-small);color:var(--mut);border-top:1px solid var(--line2);padding-top:8px}
.circuit .hl li:first-child{border-top:0;padding-top:0}
/* a highlight's tag is a readout of the game's result: square, mint and filled for a win, pink and open for a loss */
.circuit .hl .t{font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--win);padding:4px 8px;border:1px solid var(--ion-win-border);border-radius:0;background:var(--win-fill);white-space:nowrap}
.circuit .hl .t.loss{color:var(--loss);border-color:var(--ion-down-border);background:none}
.circuit .hl b{color:var(--txt);font-weight:600}
.circuit .hl b .hlc{color:var(--mut);font-weight:500}
.circuit .hl span{color:var(--dim);white-space:nowrap}
/* the player's rank tiles: compact stat tiles (the 10px cut under 48px), the label on top */
.circuit .rankrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.circuit .rankrow div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px;padding:8px 12px;background:var(--row2);border:1px solid var(--line2);clip-path:var(--ion-clip-panel-sm)}
.circuit .rankrow b{font:700 var(--ion-fs-small)/1 var(--disp);color:var(--txt);letter-spacing:var(--ion-tr-head)}
.circuit .rankrow span{font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--mut)}
.circuit .pnav{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

.circuit .match .grid{--cols:232px repeat(var(--ng,2),minmax(120px,1fr)) minmax(150px,1.1fr)}
.circuit .match .gh.gcol b{display:block;color:var(--txt);font:700 var(--ion-fs-cap)/1 var(--disp);letter-spacing:var(--ion-tr-label)}   /* not .map: the site's google_maps.js loads the Maps API for any .map on the page */
.circuit .score{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.circuit .score .sc{font:700 clamp(var(--ion-fs-2xl),3vw,var(--ion-fs-3xl))/1 var(--disp);letter-spacing:var(--ion-tr-head);color:var(--txt)}
.circuit .score .sc .io{color:var(--ion)}
.circuit .score .sc em{font-style:normal;color:var(--txt);padding:0 6px}.circuit .score .sc em i{font-style:normal;color:var(--dim2)}
.circuit .mcell{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:6px 10px;border-left:1px solid var(--line2);font-size:var(--ion-fs-small);color:var(--mut)}
.circuit .mcell b{color:var(--txt);font-weight:600}
.circuit .mcell small{color:var(--dim);font-size:var(--ion-fs-micro)}
.circuit .mcell.tot b{font:500 var(--ion-fs-dense)/1.2 var(--disp);letter-spacing:var(--ion-tr-head);color:var(--txt)}   /* the series K/D/A: Chakra 500 tabular (§3.6 numbers) */

/* one column per split (2–4 a year, start-date order) grouped under a year header; the year's first split carries the year rule */
.circuit .ladder{display:grid;grid-template-columns:150px repeat(var(--ns,10),minmax(48px,1fr));border:1px solid var(--line2);background:var(--row);position:relative}
.circuit .ladder .gh{min-height:40px}
.circuit .ladder .gh.yr{display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));grid-template-columns:subgrid;align-content:center;row-gap:2px;padding:8px 0}
.circuit .ladder .gh.yr>*{padding:0 10px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.circuit .ladder .gh.yr .y{grid-column:1 / -1}
.circuit .ladder .gh.yr .y i{font-style:normal}
.circuit .lrow{display:contents}
.circuit .lrow .lab{display:flex;align-items:center;padding:0 12px;font:600 var(--ion-fs-micro)/1.2 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--mut);border-top:1px solid var(--line2);min-height:82px}
.circuit .lcell{position:relative;border-top:1px solid var(--line2);border-left:1px solid var(--line2);display:grid;grid-template-columns:minmax(0,1fr);min-height:82px;background:none;padding:0;color:inherit;text-align:left;cursor:default}
.circuit .lcell:not(.ys){border-left:0}
.circuit .lcell.go,.circuit .lcell.live{cursor:pointer}
.circuit .lcell.go:hover,.circuit .lcell.focus{background:var(--ion-4);box-shadow:inset 0 0 0 1px var(--ion-2)}
.circuit .slot{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:6px 4px;min-width:0}
/* a stop on the club's line: cyan (the line is Ionized's), a filled mint dot for a title or a promotion, and for a relegation a
   pink DOWN-TRIANGLE drawn by the border (as .dl.dn::before), never a ring (the Valorant mark is one) — the shape, not the colour,
   says which; its box stays the dot's 10px (width 0 under border-box: the borders are the box), so the line still meets its centre */
.circuit .slot .pt{width:10px;height:10px;border-radius:50%;background:var(--ion);box-shadow:var(--ion-glow-dot)}
.circuit .slot .pt.win{background:var(--win);box-shadow:none}
.circuit .slot .pt.loss{width:0;height:0;border-radius:0;background:none;box-shadow:none;border:solid transparent;border-width:10px 5px 0;border-top-color:var(--loss)}
.circuit .slot .pt.mut{background:var(--mut);box-shadow:none}
.circuit .slot .pt.live{animation:c-pulse 2.2s ease-out infinite}
.circuit .slot .pt.val{width:7px;height:7px;background:transparent;border:1.5px solid var(--mut);box-shadow:none}
.circuit .slot .lb2{font:600 var(--ion-fs-micro)/1.2 var(--disp);letter-spacing:var(--ion-tr-ui);text-transform:uppercase;color:var(--mut);text-align:center;max-width:100%}
/* a stop label breaks only between its parts ("8–0 ·" / "CHAMPIONS"): a narrow column keeps the outcome word whole */
.circuit .slot .lb2>span{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:top}
.circuit .slot .lb2.val{color:var(--dim)}
/* several leaders (avd. A / B, the merged 5.–7. divisjon row) stack one per line, each link reachable */
.circuit .slot .ld{display:flex;flex-direction:column;align-items:center;gap:1px;font:500 var(--ion-fs-micro)/1.2 var(--data);color:var(--dim);text-align:center;max-width:100%;overflow:hidden}
.circuit .slot .ld>*{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.circuit .slot .ld a{color:inherit;text-decoration:none}.circuit .slot .ld a:hover{color:var(--ion)}
/* the trail line (the absolutely positioned svg) passes BEHIND the labels, which are masked in the row colour; at a peak the slot
   stacks upward (circuit.js .flip), so both segments leave the dot away from its label */
.circuit .slot .lb2,.circuit .slot .ld{position:relative;z-index:1;background:var(--row);padding:1px 3px}
.circuit .slot.flip{flex-direction:column-reverse}
.circuit .ladder svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.circuit .ladder svg .lol{stroke:var(--ion)}
.circuit .ladder svg .val{stroke:var(--dim)}
.circuit .legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--dim)}
.circuit .legend span{display:inline-flex;align-items:center;gap:6px}
.circuit .legend i{width:8px;height:8px;border-radius:50%;background:var(--ion);display:inline-block}
.circuit .legend i.val{background:transparent;border:1.5px solid var(--mut);width:7px;height:7px}
.circuit .legend i.loss{width:0;height:0;border-radius:0;background:none;border:solid transparent;border-width:8px 4px 0;border-top-color:var(--loss)}

.circuit .fx{max-width:820px;margin:0 auto}
.circuit .fx.fxv{max-width:min(1180px,100%)}   /* the fixture/result card: its two-row grid needs the width (≈83 px a round at 9) */
.circuit .fx .card{padding:var(--ion-sp-5)}
.circuit .fx .grid{margin-top:16px;--cols:220px repeat(var(--nr,9),minmax(0,1fr)) 44px minmax(120px,1fr)}
.circuit .fx .fcell{overflow:hidden}
.circuit .xfx{margin-top:12px}
.circuit .fx .ghead .gh:first-child small{display:none}
.circuit .two{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
.circuit .two .mid{font:700 var(--ion-fs-dense)/1 var(--disp);color:var(--dim)}
.circuit .tbox{display:flex;flex-direction:column;gap:6px;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:inherit}
.circuit .tbox .big{font:700 var(--ion-fs-2xl)/1.05 var(--disp);text-transform:uppercase;letter-spacing:var(--ion-tr-head);color:var(--txt)}
.circuit .tbox:hover .big{color:var(--ion)}
.circuit .tbox .l{font-size:var(--ion-fs-small);color:var(--mut)}
.circuit .tbox .l b{color:var(--txt);font-weight:600}
.circuit .tbox.r{text-align:right;align-items:flex-end}
/* explanatory copy is a disclosure (staff feedback 2026-10-04, "less text"; circuit.js note()): the button is the ghost button
   (§3.1) in label type (§3.6 th: micro, .16em, upper, ink-faint) with the 16px info icon; the text shows while the pointer rests
   on the note (hover devices) or once the button is pressed (.open, aria-expanded). Closed, the note is only as wide as its
   button, so it never sits over a row or a cell's hit area; open, the text takes its place in the flow (no overlay). A plain
   text-only .note (the help's attribution) still reads as the small print it was. */
.circuit .note{display:flex;flex-direction:column;align-items:flex-start;width:fit-content;max-width:100%;font-size:var(--ion-fs-cap);color:var(--dim);margin-top:12px;line-height:var(--ion-lh-body)}
.circuit .note a{color:var(--mut)}
.circuit .nb{display:inline-flex;align-items:center;gap:6px;min-height:24px;margin:0;padding:4px 0;background:none;border:0;border-radius:0;cursor:pointer;font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--dim);transition:color var(--ion-dur-fast) ease}
.circuit .nb .ion-icon{flex:0 0 auto}
.circuit .note:hover .nb,.circuit .note.open .nb,.circuit .nb:focus-visible{color:var(--mut)}
.circuit .note .nt{display:none;margin:4px 0 0;max-width:62ch;font-size:var(--ion-fs-small);color:var(--mut);line-height:var(--ion-lh-body)}
.circuit .note.open .nt{display:block}
@media (hover:hover){.circuit .note:hover .nt{display:block}}
@media (pointer:coarse){.circuit .nb{min-height:32px}}

/* ── overlays: a dialog is the system's (§3.4) — the panel with the accent-dim frame and the 22px cut over the scrim ── */
.circuit .overlay{position:fixed;inset:0;z-index:var(--ion-z-dialog);overscroll-behavior:contain;background:rgb(var(--ion-bg-rgb) / .8);backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;padding:max(8vh,24px) var(--side) 24px;overflow:auto}
.circuit .panel{width:min(760px,100%);background:var(--bg2);border:1px solid var(--line);clip-path:var(--ion-clip-panel)}
/* the search field is the system's input (§3.7): a recessed box, never a bottom rule alone */
.circuit .sin{display:block;width:calc(100% - 32px);min-height:44px;margin:16px 16px 0;background:var(--row2);border:1px solid var(--line2);border-radius:0;color:var(--txt);font:500 var(--ion-fs-body)/1.25 var(--data);letter-spacing:0;padding:8px 12px;outline:none}
.circuit .sin::placeholder{color:var(--dim)}
.circuit .sin:hover{border-color:var(--line3)}
.circuit .sin:focus{border-color:var(--ion);box-shadow:inset 0 0 0 1px var(--ion)}   /* the site's forms plugin rings a focused [type=search] in blue */
/* the results are a menu (§3.4): the highlighted option gets the accent wash and a 2px accent bar */
.circuit .res{display:flex;flex-direction:column;padding:8px 0;max-height:52vh;overflow:auto;overscroll-behavior:contain}
.circuit .res button{display:grid;grid-template-columns:76px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;background:none;border:0;color:var(--mut);padding:10px 16px;cursor:pointer;font:500 var(--ion-fs-dense)/1.2 var(--data)}
.circuit .res button .t{font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--dim)}
.circuit .res button b{color:var(--txt);font-weight:600}
.circuit .res button span{color:var(--dim);font-size:var(--ion-fs-cap)}
.circuit .res button.sel,.circuit .res button:hover{background:var(--ion-4);color:var(--txt);box-shadow:inset 2px 0 0 var(--ion)}
.circuit .res .empty{padding:14px 16px;color:var(--dim)}
.circuit .help{padding:var(--ion-sp-5)}
.circuit .help h2{margin:0 0 6px;font:700 var(--ion-fs-lg)/var(--ion-lh-snug) var(--disp);letter-spacing:var(--ion-tr-head);text-transform:uppercase}
.circuit .help p{margin:0 0 16px;color:var(--mut);font-size:var(--ion-fs-dense);line-height:var(--ion-lh-body);max-width:70ch}
.circuit .help .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.circuit .help h3{margin:0 0 8px;font:700 var(--ion-fs-cap)/1.2 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--mut)}
.circuit .help dl{margin:0;display:flex;flex-direction:column;gap:8px}
.circuit .help dl div{display:flex;gap:10px;align-items:baseline;font-size:var(--ion-fs-small);color:var(--mut)}
.circuit .help dt{flex:0 0 auto;min-width:84px}
.circuit .help dd{margin:0}
.circuit .help .close{margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;color:var(--dim);font-size:var(--ion-fs-cap)}
/* the toast (§3.10): its surface is a clipped ::before (the cut, the accent-dim frame, the 3px accent bar) and the float shadow
   sits on the unclipped element, so the shadow follows the cut */
.circuit .toast{position:fixed;left:var(--side);right:var(--side);bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:var(--ion-z-toast);isolation:isolate;padding:12px 16px 12px 19px;font-size:var(--ion-fs-dense);color:var(--txt);filter:drop-shadow(var(--ion-shadow-float));animation:c-toastin .18s ease-out}
.circuit .toast::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg2);border:1px solid var(--line);box-shadow:inset 3px 0 0 var(--ion);clip-path:var(--ion-clip-panel)}
.circuit .toast b{color:var(--txt)}
@keyframes c-toastin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── tall (phones, portrait tablets): WHO stays vertical, WHEN becomes a swipe ── */
/* the same query as TALL_Q in circuit.js (plus landscape phones); .tall re-asserts --rowh over the short-desktop rule below */
@media (max-width:820px),(orientation:portrait) and (pointer:coarse),(max-height:500px) and (pointer:coarse){
  .circuit{--rowh:auto}
  .circuit .tall{--rowh:auto}
  .circuit .tall .edge.top{gap:10px}
  .circuit .tall .mark span{display:none}
  .circuit .tall .mark svg{width:24px;height:24px}
  .circuit .tall .tools button span:not(.kb){display:none}
  .circuit .tall .tools button{padding:7px 8px}
  .circuit .tall .crumb a:not(.parent),.circuit .tall .crumb i{display:none}
  .circuit .tall .crumb .back{display:inline-flex;color:var(--ion);padding:0 6px 0 0}
  .circuit .tall .crumb .parent{padding:8px 2px;flex:0 0 auto}
  .circuit .tall .crumb .parent .pll{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  /* the ruler is a tab bar (§3.8): the selected round ink on the cyan underline and the accent wash */
  .circuit .tall .ruler{display:flex;flex:0 0 auto;overflow-x:auto;gap:0;padding:0 var(--side);border-bottom:1px solid var(--line2);scrollbar-width:none;background:var(--bg2)}
  .circuit .tall .ruler::-webkit-scrollbar{display:none}
  .circuit .tall .ruler button{flex:0 0 auto;min-height:44px;background:none;border:0;border-bottom:2px solid transparent;border-radius:0;color:var(--mut);font:600 var(--ion-fs-cap)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;padding:8px 12px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:3px;align-items:center}
  .circuit .tall .ruler button small{font:500 var(--ion-fs-micro)/1 var(--data);letter-spacing:0;text-transform:none;color:var(--dim)}
  .circuit .tall .ruler button.sel{color:var(--txt);border-bottom-color:var(--ion);background:var(--ion-4)}
  .circuit .tall .ruler button.sel small{color:var(--mut)}
  .circuit .tall .stage{--stage-pt:8px;padding:var(--stage-pt) 10px}
  .circuit .tall .ghead{display:none}
  .circuit .tall .grid .grow{grid-template-columns:minmax(0,1fr) 48px;grid-template-rows:auto auto;padding:7px 0 6px}
  .circuit .tall .tcell{grid-column:1;grid-row:1;padding:0 8px;gap:8px}
  .circuit .tall .rk{width:20px;font-size:var(--ion-fs-dense)}
  .circuit .tall .dl{width:18px}
  .circuit .tall .ab{min-width:36px}
  /* line 2 of a row: the round strip (below the tall block) */
  .circuit .tall .pcell{grid-column:2;grid-row:1;font-size:var(--ion-fs-lg)}
  .circuit .tall .fcell{display:none}
  .circuit .tall .fcmini{display:inline}
  .circuit .tall .readout{display:none}
  .circuit .tall .edge.bottom{gap:10px}
  .circuit .tall .soc a:not(.watch){display:none}
  .circuit .tall .next .when{display:none}
  .circuit .tall .next .vs .full{display:none}
  .circuit .tall .next .vs .short{display:inline}
  .circuit .tall .team,.circuit .tall .player{grid-template-columns:1fr;grid-template-areas:none}
  .circuit .tall .team .chamber,.circuit .tall .player .chamber{grid-area:auto;order:-1;height:250px}
  .circuit .tall .team .tmain,.circuit .tall .team .tside,.circuit .tall .player .pmain,.circuit .tall .player .pleft,.circuit .tall .player .pright{grid-area:auto}
  .circuit .tall .player .pmain{order:0}.circuit .tall .player .pleft{order:1}.circuit .tall .player .pright{order:2}
  .circuit .tall .rgrid .grow{grid-template-columns:minmax(0,1fr)}
  .circuit .tall .grow.group{padding:0}
  .circuit .tall .grow.group .tcell{grid-column:1 / -1;grid-row:1}
  .circuit .tall .facts{grid-template-columns:1fr 1fr}
  .circuit .tall .match .grid{--cols:1fr}
  .circuit .tall .match .ghead{display:grid;grid-template-columns:100px repeat(var(--ng,2),minmax(0,1fr)) 1.1fr}
  .circuit .tall .match .grow{grid-template-columns:100px repeat(var(--ng,2),minmax(0,1fr)) 1.1fr;grid-template-rows:auto;padding:0}
  .circuit .tall .match.ng2plus .lvl{display:none}
  .circuit .tall .match .tcell{grid-row:auto;padding:0 6px;gap:6px}
  .circuit .tall .match .role{width:28px}
  .circuit .tall .match .mcell{padding:6px 6px;font-size:var(--ion-fs-cap);grid-row:auto}
  .circuit .tall .ladder{grid-template-columns:76px repeat(var(--ns,10),minmax(24px,1fr))}
  .circuit .tall .ladder .gh.yr>*{padding:0 2px;text-overflow:clip}
  .circuit .tall .ladder .gh.yr small{font-size:var(--ion-fs-micro);letter-spacing:0}
  .circuit .tall .ladder .gh.yr .y i{display:none}
  .circuit .tall .ladder .gh.yr .y::before{content:"’"}
  .circuit .tall .ladder .lab{padding:0 8px;font-size:var(--ion-fs-micro);letter-spacing:0;min-height:66px;overflow-wrap:anywhere}
  .circuit .tall .lcell{min-height:66px}
  .circuit .tall .slot .lb2,.circuit .tall .slot .ld{display:none}
  .circuit .help .cols{grid-template-columns:1fr}   /* the overlays sit outside #app: no .tall ancestor, the media query is the guard */
  .circuit .tall .two{grid-template-columns:1fr}
  .circuit .tall .tbox.r{text-align:left;align-items:flex-start}
  .circuit .tall .two .mid{display:none}
  .circuit .tall .fx .grid .grow{padding:7px 0 6px}
}
/* landscape phones (tall on a short screen): the round ruler shares the crumb's row, and the site ribbon's "next match" state is
   hidden on circuit pages (the bottom strip says it; see "phone chrome" at the end), so the stage keeps a usable height under the
   site header: 390 − 58 header − 56 crumb − 48 strip ≈ 228 px (it was 183 with the ribbon, after f3a3c5b made it visible) */
@media (max-height:500px) and (pointer:coarse){
  .circuit .tall.app{display:grid;grid-template-columns:fit-content(52%) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
  .circuit .tall .edge.top{grid-area:1 / 1;min-width:0}
  .circuit .tall .ruler{grid-area:1 / 2;height:var(--top);align-items:center;padding-block:0;background:linear-gradient(180deg,rgb(var(--ion-bg-rgb) / .92),rgb(var(--ion-bg-rgb) / .7))}
  .circuit .tall .ruler>:first-child{margin-left:auto}   /* right-aligned while it fits, scrollable from R1 when it does not */
  .circuit .tall.app:has(>.ruler[hidden]) .edge.top{grid-column:1 / -1}
  .circuit .tall .stage{grid-area:2 / 1 / 3 / -1}
  .circuit .tall .edge.bottom{grid-area:3 / 1 / 4 / -1}
}
.circuit .fcmini{display:none;color:var(--dim);margin-left:6px}
/* ── tall: the round strip, line 2 of every table row (division, fixture card, team) ──
   One cell per round across the row's full width, as links (the same hrefs as the desktop cells). The round the ruler selects
   (class xp; on a fixture card the fixture's own round) grows to its full label: "2–0 FRAG", "W.O. ION", "GUT 16 NOV",
   "GUT POSTPONED", a pick's champion and K/D/A. Every other round is a compact cell with the opponent's short label only (its
   abbreviation, else its name, ellipsized: never a made-up tag) in the result's colours; a pick shows its champion icon. A new
   round moves the expansion (a flex-basis / flex-grow transition: circuit.js keeps the cells). A compact cell under ~23 px (a 21 px content box)
   keeps its colours alone. Labels a cell does not show stay readable to assistive tech (clipped, not display:none). */
.circuit .tall .trail{display:flex;grid-column:1 / -1;grid-row:2;gap:3px;align-items:stretch;padding:7px 8px 0;min-width:0}
.circuit .tall .cell{flex:1 1 0px;min-width:0;height:26px;border:0;flex-direction:row;gap:5px;padding:0 1px;color:var(--dim);container:sc / inline-size;transition:flex-grow .2s ease,flex-basis .2s ease}
.circuit .tall .cell.xp{flex:0 0 clamp(96px,28%,150px);padding:0 6px}
.circuit .tall .rgrid .cell.xp{flex-basis:clamp(120px,34%,170px);padding:0 4px;gap:4px}   /* a pick: icon, champion and K/D/A */
.circuit .tall .cell.pick b .ico{margin-right:4px}
.circuit .tall .cell::before{inset:0}
.circuit .tall .cell.selcol,.circuit .tall .cell.xr,.circuit .tall .cell.xc{background:none}
.circuit .tall .cell b,.circuit .tall .cell small{flex:0 1 auto;min-width:0;max-width:100%;color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.circuit .tall .cell b{flex-shrink:0;font:500 var(--ion-fs-small)/1.3 var(--disp);letter-spacing:var(--ion-tr-head)}
.circuit .tall .cell small,.circuit .tall .cell.future b{font:600 var(--ion-fs-micro)/1.3 var(--data);letter-spacing:var(--ion-tr-head);text-transform:uppercase}
.circuit .tall .cell:not(.xp) :is(b,small){letter-spacing:0;font-size:var(--ion-fs-micro)}   /* 4 letters fit a 25 px cell */
.circuit .tall .cell.future b{flex-shrink:1}.circuit .tall .cell.future small{flex-shrink:0}
.circuit .tall .cell.pick b{flex-shrink:1;font:600 var(--ion-fs-cap)/1.3 var(--data);letter-spacing:0}.circuit .tall .cell.pick small{flex-shrink:0;font:600 var(--ion-fs-micro)/1.3 var(--data);letter-spacing:0}
.circuit .tall .cell:not(.xp):not(.future):not(.pick) b,.circuit .tall .cell:not(.xp):is(.future,.pick) small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.circuit .tall .trail .cell.pick:not(.xp) b .pn{display:inline;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}   /* a compact pick: its icon */
/* the states: the frames and tints are the desktop cells' (a win a filled mint frame, a loss an open pink one, a draw muted,
   a walkover hatched with its text in the result's colour); a fixture a dashed outline (Ionized's next one the cyan outline), no fixture that round a faint dash */
.circuit .tall .cell.win,.circuit .tall .cell.pick.w{color:var(--win)}
.circuit .tall .cell.loss,.circuit .tall .cell.pick.l{color:var(--loss)}
.circuit .tall .cell.draw,.circuit .tall .cell.pick.d{color:var(--mut)}
.circuit .tall .cell.future.xp{color:var(--txt)}
.circuit .tall .cell.future.xp small{color:var(--mut)}
.circuit .tall .cell.future.xp::before{border-color:var(--dim)}
.circuit .tall .cell.next,.circuit .tall .cell.next.xp,.circuit .tall .cell.next.xp small{color:var(--ion)}
.circuit .tall .cell.next.xp::before{border-color:var(--ion)}
.circuit .tall .cell.blank::before{display:block;inset:50% 32% auto;height:1px;border:0;background:var(--line3)}
.circuit .tall .cell.xp:not(.blank):not(.future)::before{border-color:currentColor}
/* room for the whole label (a landscape phone, a portrait tablet): a compact cell shows it too */
@container sc (min-width:66px){
  .circuit .tall .trail .cell:not(.xp):not(.future):not(.pick) b,.circuit .tall .trail .cell:not(.xp):is(.future,.pick) small{position:static;width:auto;height:auto;clip-path:none}
  .circuit .tall .trail .cell:not(.xp) small,.circuit .tall .trail .cell.future:not(.xp) b{font-size:var(--ion-fs-micro);letter-spacing:var(--ion-tr-head)}
  .circuit .tall .trail .cell:not(.xp):not(.future) b{font-size:var(--ion-fs-small);letter-spacing:var(--ion-tr-head)}
  .circuit .tall .trail .cell.pick:not(.xp) b{font-size:var(--ion-fs-cap)}
  .circuit .tall .trail .cell.pick:not(.xp) small{font-size:var(--ion-fs-micro);letter-spacing:0}   /* a compact pick: its icon and K/D/A */
  .circuit .tall .trail .cell:not(.xp)>:first-child{margin-left:4px}.circuit .tall .trail .cell:not(.xp)>small{margin-right:4px}   /* air inside the frame (small: a "new" pip may follow it) */
}
@container sc (max-width:20.9px){.circuit .tall .cell:not(.pick) b,.circuit .tall .cell small,.circuit .tall .cell.pick .pn{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@container sc (max-width:23.9px){.circuit .tall .cell.pick b .ico{--s:16px!important}}
@container sc (max-width:15.9px){.circuit .tall .cell.pick b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@media (prefers-reduced-motion:reduce){.circuit .tall .cell{transition:none}}
@media (max-height:721px) and (min-width:821px){.circuit{--rowh:42px}}
@media (prefers-reduced-motion:reduce){
  .circuit .grow.ion::after,.circuit .pulse,.circuit .cell.next::before,.circuit .slot .pt.live{animation:none}
  .circuit .stage.in>*{animation:none}
  .circuit .grow.moving{transition:none}
}

/* ── anchors used as cells (a chip and a map tab are styled by their own recipes) ── */
.circuit a.cell,.circuit a.tcell,.circuit a.fcell,.circuit a.lcell,.circuit a.tbox,.circuit a.next,.circuit a.mcell,.circuit a.lcell2{text-decoration:none;color:inherit}
.circuit .crumb a{background:none;border:0;padding:8px 6px;font:600 var(--ion-fs-cap)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--mut);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;text-decoration:none}
.circuit .crumb a:hover{color:var(--txt)}
.circuit .crumb .cur{display:inline-block;padding:8px 6px;font:600 var(--ion-fs-cap)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--txt);border-bottom:2px solid var(--ion);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;min-width:0;flex:0 1 auto}
.circuit a.mcell{cursor:pointer}
.circuit a.mcell:hover b,.circuit a.lcell2:hover .nm{color:var(--ion)}
.circuit .dimtxt{color:var(--dim);font-weight:500}

/* ── match: tabs, lanes, totals ── */
/* the series / game switch is a tab bar (§3.8), never boxes: the open one ink on the cyan underline and the accent wash */
.circuit .maptabs{display:flex;gap:0;margin:0 0 12px;border-bottom:1px solid var(--line2);overflow-x:auto;scrollbar-width:thin}
.circuit .mtab{display:flex;flex-direction:column;justify-content:center;gap:4px;flex:0 0 auto;min-height:44px;padding:8px 16px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--mut);text-decoration:none;min-width:150px;max-width:300px}
.circuit .mtab b,.circuit .mtab small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* team names (the site's abbr rule) can be long */
.circuit .mtab b{font:600 var(--ion-fs-cap)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:inherit}
.circuit .mtab small{font-size:var(--ion-fs-micro);color:var(--dim)}
.circuit .mtab:hover{color:var(--txt)}
.circuit .mtab.sel{color:var(--txt);border-bottom-color:var(--ion);background:var(--ion-4)}
.circuit .mtab.sel b{color:var(--txt)}
.circuit .mcell .gr{margin-top:2px;align-self:flex-start}
/* a grade is a readout (§3.3): square, micro, .16em; S and A in cyan, D in pink */
.circuit .gr{display:inline-flex;align-items:center;gap:4px;font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--dim);padding:3px 6px;border:1px solid var(--line2);border-radius:0;background:var(--row2)}
.circuit .gr b{font-size:var(--ion-fs-micro);color:var(--txt)}
.circuit .gr.gS{border-color:var(--ion-2);color:var(--ion)}.circuit .gr.gA{color:var(--ion)}.circuit .gr.gD{color:var(--loss);border-color:var(--ion-down-border)}
.circuit .game{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
.circuit .match .lanes{--cols:72px repeat(2,minmax(0,1fr))}
.circuit .lanes .gh.side b{display:block;font:700 var(--ion-fs-cap)/1 var(--disp);letter-spacing:var(--ion-tr-label);color:var(--txt)}
.circuit .lanes .gh.side.ion b{color:var(--ion)}
.circuit .lanes .lanelab{padding:0 12px;cursor:default}
.circuit .lanes .grow{min-height:64px}
.circuit .lcell2{display:grid;grid-template-columns:auto minmax(0,1.3fr) auto minmax(90px,1fr);align-items:center;gap:6px 12px;padding:8px 12px;border-left:1px solid var(--line2);min-width:0;position:relative}
.circuit .lcell2.ion{background:linear-gradient(90deg,var(--ion-4),transparent)}
.circuit .lcell2.ismvp{box-shadow:inset 0 0 0 1px var(--ion-2)}
.circuit .lcell2 .pl{display:flex;flex-direction:column;gap:3px;min-width:0}
.circuit .lcell2 .nm{font:600 var(--ion-fs-dense)/var(--ion-lh-tight) var(--data);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.circuit .lcell2 .ch{font-size:var(--ion-fs-cap);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.circuit .lcell2 .kd{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap}
.circuit .lcell2 .kd b{font:500 var(--ion-fs-dense)/1 var(--disp);letter-spacing:var(--ion-tr-head);color:var(--txt)}
.circuit .lcell2 .kd small{font-size:var(--ion-fs-micro);color:var(--dim)}
.circuit .lcell2 .ct{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:6px}
.circuit .lcell2 .ct i{display:block;height:6px;background:var(--line2);position:relative}
/* the contribution bars (§3.6 inline bars): Ionized cyan, the opponent red when Ionized plays, a neutral pair otherwise */
.circuit .lcell2 .ct i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--ion)}
.circuit .lcell2.lft .ct i::after{background:var(--mut)}
.circuit .lcell2.opp .ct i::after{background:var(--dim)}
.circuit .lanes:has(.lcell2.ion) .lcell2.opp .ct i::after{background:var(--ion-red)}
.circuit .lcell2 .ct small{font:600 var(--ion-fs-micro)/1 var(--disp);color:var(--dim)}
.circuit .lcell2.focus{box-shadow:var(--ion-ring),var(--ion-glow-soft)}
.circuit .mvp{display:inline-block;font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--ion);border:1px solid var(--ion-2);background:var(--row2);padding:3px 6px;border-radius:0;vertical-align:middle;margin-left:4px}
.circuit .tot2{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"lab lab lab" "l bar r";gap:4px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--line2)}
.circuit .tot2:first-of-type{border-top:0;padding-top:0}
.circuit .tot2 .lab{grid-area:lab;font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--dim)}
.circuit .tot2 .l,.circuit .tot2 .r{font:500 var(--ion-fs-dense)/1 var(--disp);color:var(--txt);min-width:56px}
.circuit .tot2 .l{grid-area:l;color:var(--ion)}.circuit .tot2 .r{grid-area:r;text-align:right}
.circuit .tot2:has(.bar2 i.lft) .l{color:var(--txt)}
.circuit .bar2{grid-area:bar;display:flex;height:6px;gap:2px}
.circuit .bar2 i{display:block;height:100%;width:var(--w)}
.circuit .bar2 i.ion{background:var(--ion)}.circuit .bar2 i.lft{background:var(--mut)}.circuit .bar2 i.opp{background:var(--dim)}
.circuit .bar2 i.ion+i.opp{background:var(--ion-red)}
.circuit .gchamber{height:280px;margin-bottom:12px}
.circuit .radar.small{max-width:280px}
.circuit .tall .game{grid-template-columns:1fr}
.circuit .tall .lanes{--cols:1fr}
.circuit .tall .lanes .ghead{display:grid;grid-template-columns:52px repeat(2,1fr)}
.circuit .tall .lanes .grow{grid-template-columns:52px repeat(2,minmax(0,1fr));grid-template-rows:auto;padding:0}
.circuit .tall .lanes .lanelab{padding:0 8px;grid-row:auto}
.circuit .tall .lcell2{grid-template-columns:auto minmax(0,1fr);gap:4px 6px;padding:8px}
.circuit .tall .lcell2 .kd,.circuit .tall .lcell2 .ct,.circuit .tall .lcell2 .bld{grid-column:1 / -1}
.circuit .tall .lcell2 .kd{align-items:flex-start;flex-direction:row;gap:8px;align-items:baseline}
.circuit .tall .mtab{min-width:0;flex:1}

/* ── icons (Data Dragon art): small squares, radius 0. The initials sit UNDER the image and show whenever it is missing or fails
      (circuit.js hides a failed <img>); --s is the box size, set inline where an icon is drawn ── */
.circuit .ico{--s:20px;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--s);height:var(--s);overflow:hidden;vertical-align:middle;background:var(--row2);border:1px solid var(--line3);border-radius:0;font:700 calc(var(--s) * .4)/1 var(--disp);letter-spacing:0;text-transform:none;color:var(--dim)}
.circuit .ico::before{content:attr(data-ini)}
.circuit .ico img{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;object-fit:cover}
.circuit .ico.ch img{transform:scale(1.1)}                                    /* the champion squares carry a baked-in frame */
.circuit .ico.empty{background:rgb(var(--ion-ink-rgb) / .02);border-color:var(--line2)}
.circuit .ico.ru{background:var(--bg);border-color:var(--line2)}
.circuit .ico.ru img{object-fit:contain}
.circuit .ico.ru.tree img,.circuit .ico.ru.shard img{inset:12%;width:76%;height:76%}
.circuit .ico.ban img{filter:grayscale(1) brightness(.75)}
.circuit .ico.ban::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - .75px),var(--loss) calc(50% - .75px),var(--loss) calc(50% + .75px),transparent calc(50% + .75px));opacity:.85}
.circuit :is(b,.rc,.cap span,.cap small,.sub,.bsub) .ico{margin-right:5px;vertical-align:-3px}
.circuit .nowrap{white-space:nowrap}
.circuit .card h3 small{margin-left:8px;font:500 var(--ion-fs-micro)/1 var(--data);letter-spacing:0;text-transform:none;color:var(--dim)}
.circuit .bar.wic{grid-template-columns:128px 1fr 44px}
.circuit .rgrid .cell.pick{container-type:inline-size}
.circuit .cell.pick b{display:flex;align-items:center;justify-content:center;min-width:0}
.circuit .cell.pick b .pn{min-width:0;overflow:hidden;text-overflow:ellipsis}
@container (max-width:74px){.circuit .cell.pick b .ico+.pn{display:none}.circuit .cell.pick b .ico{--s:20px!important;margin-right:0}}   /* a narrow pick cell: the icon alone, never "Lo…" */

/* series cells: the champion square beside name · K/D/A · grade */
.circuit .mcell.wic{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;row-gap:3px;align-content:center;align-items:center}
.circuit .mcell.wic>.ico{grid-row:1 / span 3}
.circuit .mcell.wic>b,.circuit .mcell.wic>small,.circuit .mcell.wic>.gr{grid-column:2;min-width:0}
.circuit .mcell.wic>b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.circuit .mcell.wic>.gr{justify-self:start;margin-top:1px}
.circuit .tall .mcell.wic{column-gap:6px}
.circuit .tall .mcell.wic>.ico{--s:26px!important}

/* lane cells: champion + summoner spells + keystone / secondary tree; the final build (and, for staff, the economy) underneath */
.circuit .lcell2 .kit{display:flex;gap:2px;align-items:center}
.circuit .kit .st2{display:flex;flex-direction:column;gap:2px}
.circuit .lcell2 .bld{grid-column:2 / -1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;min-width:0}
.circuit .its{display:inline-flex;flex-wrap:wrap;gap:2px;align-items:center}
.circuit .its .trk{display:inline-flex;margin-left:4px}
.circuit .eco{display:inline-flex;flex-wrap:wrap;gap:3px 9px;font:500 var(--ion-fs-micro)/1 var(--data);color:var(--dim);white-space:nowrap}
.circuit .eco b{color:var(--mut);font-weight:600;margin-right:2px}
.circuit .tall .lcell2 .kit>.ico.ch{--s:34px!important}
.circuit .tall .lcell2 .kit .st2 .ico{--s:16px!important}
.circuit .tall .lcell2 .its .ico{--s:17px!important}   /* 7 items in one row at 390px: 17 is the most that fits */
@media (max-width:379px){.circuit .tall .lcell2 .its .ico{--s:15px!important}}   /* …and 15 below 380px (a 360px phone) */
.circuit .tall .lcell2 .its .trk{margin-left:2px}
@media (max-width:480px){.circuit .tall .lcell2 .kit .st2.rn{display:none}}   /* a narrow phone drops the runes first */
/* a narrow desktop window (821–~1180 px: two lane cells beside the 340 px aside) stacks each lane cell the way the tall layout
   does, so the kit, K/D/A and contribution never run out of the cell */
.circuit .lanes .grow{container:lane / inline-size}
@container lane (max-width:780px){
  .circuit .lcell2{grid-template-columns:auto minmax(0,1fr);gap:4px 8px}
  .circuit .lcell2 .kd,.circuit .lcell2 .ct,.circuit .lcell2 .bld{grid-column:1 / -1}
  .circuit .lcell2 .kd{flex-direction:row;align-items:baseline;gap:8px}
}

/* draft: picks (lane order — Match-V5 keeps no pick order) and bans per team */
.circuit .draft{display:flex;flex-direction:column;gap:12px}
.circuit .dteam{display:grid;grid-template-columns:48px minmax(0,1fr);gap:6px 10px;align-items:center}
.circuit .dteam .dname{grid-column:1 / -1;font:700 var(--ion-fs-micro)/1.1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.circuit .dteam .dname.ion{color:var(--ion)}
.circuit .dteam .dname.lft{color:var(--txt)}
.circuit .drow{display:contents}
.circuit .dlab{font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--dim)}
.circuit .dic{display:flex;gap:4px;flex-wrap:wrap}

/* staff-only (CIRCUIT_CONFIG.deep): the build card and the marker on every staff-only number (the "off" readout) */
.circuit .stf{display:inline-block;font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--dim);border:1px solid var(--line2);background:var(--row2);padding:3px 6px;vertical-align:1px;margin-left:2px}
.circuit .bcard h3{display:flex;align-items:center;gap:6px;min-width:0}
.circuit .card .bsub{display:flex;align-items:center;gap:0;margin:0 0 12px;font-size:var(--ion-fs-small);line-height:1.2;color:var(--mut)}
.circuit .bsub span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.circuit .path{display:flex;flex-wrap:wrap;gap:10px 0;align-items:flex-start}
.circuit .stop{display:flex;flex-direction:column;gap:4px;padding:0 6px;border-left:1px solid var(--line2)}
.circuit .stop:first-child{padding-left:0;border-left:0}
.circuit .stop .sit{display:flex;gap:2px}
.circuit .stop small{font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-head);color:var(--dim)}
.circuit .bx{position:relative;display:inline-flex}
.circuit .bx i{position:absolute;right:0;bottom:0;padding:0 2px;font:700 var(--ion-fs-micro)/1 var(--disp);font-style:normal;color:var(--txt);background:rgb(var(--ion-bg-rgb) / .85);pointer-events:none}
.circuit .bfin{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line2)}
.circuit .blab{min-width:38px;font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--dim)}
.circuit .rpage{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line2)}
.circuit .rpage .blab{padding-top:8px}
.circuit .rrows{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.circuit .rrow{display:flex;align-items:center;gap:4px}
.circuit .rrow .shards{display:inline-flex;gap:3px;margin-left:auto}
.circuit .beco{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line2)}
.circuit .beco div{display:flex;flex-direction:column;gap:4px;min-width:0}
.circuit .beco dt{font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--mut)}
.circuit .beco dd{margin:0;font:500 var(--ion-fs-small)/1 var(--disp);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── view transitions ── */
@supports (view-transition-name: x){
  .circuit #ions{view-transition-name:ions}
  .circuit .edge.top{view-transition-name:top-edge}
  .circuit .edge.bottom{view-transition-name:bottom-edge}
  .circuit .readout{view-transition-name:readout}
  .circuit .ruler{view-transition-name:ruler}
  .circuit .stage{view-transition-name:stage}
  ::view-transition-old(ions),::view-transition-new(ions),::view-transition-old(bottom-edge),::view-transition-new(bottom-edge){animation:none}
  ::view-transition-group(top-edge),::view-transition-group(readout),::view-transition-group(ruler){animation-duration:.22s}
  ::view-transition-group(hero){animation-duration:.46s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  ::view-transition-old(hero){animation:c-vt-fade .18s ease-out both}
  ::view-transition-new(hero){animation:c-vt-appear .3s .12s ease-out both}
  ::view-transition-old(stage){animation:c-vt-out-in .26s ease-in both}
  ::view-transition-new(stage){animation:c-vt-in-in .34s .06s cubic-bezier(.2,.7,.2,1) both}
  html[data-vt="out"] ::view-transition-old(stage){animation:c-vt-out-out .26s ease-in both}
  html[data-vt="out"] ::view-transition-new(stage){animation:c-vt-in-out .34s .06s cubic-bezier(.2,.7,.2,1) both}
  html[data-vt="lateral"] ::view-transition-old(stage){animation:c-vt-out-lat .2s ease-in both}
  html[data-vt="lateral"] ::view-transition-new(stage){animation:c-vt-in-lat .28s .04s cubic-bezier(.2,.7,.2,1) both}
  ::view-transition-old(stage),::view-transition-new(stage){mix-blend-mode:normal}
}
@keyframes c-vt-fade{to{opacity:0}}
@keyframes c-vt-appear{from{opacity:0}to{opacity:1}}
@keyframes c-vt-out-in{to{opacity:0;transform:scale(1.035)}}
@keyframes c-vt-in-in{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
@keyframes c-vt-out-out{to{opacity:0;transform:scale(.965)}}
@keyframes c-vt-in-out{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}
@keyframes c-vt-out-lat{to{opacity:0;transform:translateX(-14px)}}
@keyframes c-vt-in-lat{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* full-breakdown marker */
.circuit .cell.deep::after{content:"";position:absolute;top:9px;right:9px;width:5px;height:5px;border-radius:50%;background:var(--ion);box-shadow:var(--ion-glow-dot)}
.circuit .tall .cell.deep::after{top:3px;right:3px;width:4px;height:4px}
.circuit .road{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0 18px;padding-bottom:16px;border-bottom:1px solid var(--line2)}
.circuit .road h3{margin:0 0 8px;font:700 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--mut)}
.circuit .tall .road{grid-template-columns:1fr}

/* lazy loads: the clicked cell pulses only when its data takes longer than 120 ms */
.circuit .loading{outline:1px solid var(--ion-2);outline-offset:-4px;animation:c-nextpulse 1.2s ease-in-out infinite}
.circuit .stage[aria-busy]{cursor:progress}
@media (prefers-reduced-motion:reduce){.circuit .loading{animation:none}}

/* ── the site header and the live ribbon under it ride above the stage during a view transition (the stage snapshot
      would otherwise paint over them when the page is scrolled and they still show) ── */
@supports (view-transition-name: x){
  .template-circuit #header{view-transition-name:site-header}
  .template-circuit #live-ribbon{view-transition-name:site-ribbon}
  ::view-transition-old(site-header),::view-transition-new(site-header),
  ::view-transition-old(site-ribbon),::view-transition-new(site-ribbon){animation:none}
}

/* ── review fixes (F3): mid-width desktop bands, series cells on phones, the busy cue, collapsed chambers ── */
/* other teams' aside spans both rows of the desktop team grid (a class, not an inline style, so the bands below can move it);
   after the tall block on purpose: phones keep it where it was */
.circuit .team .tside.solo{grid-row:1 / span 2}
/* 821–1179 px (not tall): the team grid gets the full width, the chamber and the aside go side by side under it (was 28 px round
   cells at 900 px); the player keeps its prototype columns down to 960 px as 300 px | main (the right column moves under the left
   one), and below that stacks chamber + contribution / main / the rest. Every round cell stays ≥ ~44 px with 11 rounds. */
@media (min-width:821px) and (max-width:1179px){
  .circuit .app:not(.tall) .team{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"main main" "cham side"}
  .circuit .app:not(.tall) .team .tside.solo{grid-area:auto;grid-column:1 / -1}
}
@media (min-width:960px) and (max-width:1365px){
  .circuit .app:not(.tall) .player{grid-template-columns:300px minmax(0,1fr);grid-template-areas:"cham main" "left main" "right main"}
}
@media (min-width:821px) and (max-width:959px){
  .circuit .app:not(.tall) .player{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"cham left" "main main" "right right"}
}
/* the fixture/result card's two rows below 1024 px: the prototype.md §4 name column (180 px) buys the rounds their width back */
@media (min-width:821px) and (max-width:1023px){
  .circuit .app:not(.tall) .fx .grid{--cols:180px repeat(var(--nr,9),minmax(0,1fr)) 44px minmax(120px,1fr)}
}
/* the division table below 1280 px: the round cells may narrow to 44 px (11 rounds and the forecast fit from 1024 px); below
   1024 px it drops its forecast column for the row's "PO x%" (the tall layout's treatment), so it never scrolls sideways */
@media (min-width:1024px) and (max-width:1279px){
  .circuit .app:not(.tall) #divgrid:not(.nor){--cols:262px repeat(var(--nr,9),minmax(44px,1fr)) 64px minmax(178px,1.35fr)}
}
@media (min-width:821px) and (max-width:1023px){
  .circuit .app:not(.tall) #divgrid:not(.nor){--cols:262px repeat(var(--nr,9),minmax(40px,1fr)) 64px}
  .circuit .app:not(.tall) #divgrid:not(.nor) .fcell,.circuit .app:not(.tall) #divgrid:not(.nor) .ghead>.gh:last-child{display:none}
  .circuit .app:not(.tall) #divgrid .fcmini{display:inline}
}

/* the MVP chip beside an ellipsized name (series cells, lane cells): it wraps under the name in a narrow cell, never clips */
.circuit .mn{display:flex;flex-wrap:wrap;align-items:center;gap:2px 5px;min-width:0}
.circuit .mn>b,.circuit .mn>.nm{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.circuit .mn>.mvp{margin-left:0}
.circuit .mcell.wic>.mn{grid-column:2;min-width:0}
.circuit .mcell .gr{max-width:100%;min-width:0;overflow:hidden}
/* phones: nothing in a series cell paints into the next game's column; with 2+ games the icon stacks above the text */
.circuit .tall .match .mcell{min-width:0;overflow:hidden}
.circuit .tall .match.ng2plus .mcell.wic{grid-template-columns:minmax(0,1fr)}
.circuit .tall .match.ng2plus .mcell.wic>*{grid-column:1}
.circuit .tall .match.ng2plus .mcell.wic>.ico{grid-row:auto}
/* map tabs: with 2+ games a phone row reads "All · G1 · G2 …" and the winner; the long label stays for assistive tech */
.circuit .maptabs .gs{display:none}
.circuit .tall .maptabs.many .mtab{position:relative;padding:8px 8px}
.circuit .tall .maptabs.many .gl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.circuit .tall .maptabs.many .gs{display:inline}
.circuit .tall .maptabs.many .tx{display:none}

/* a chamber with no cloud to draw (an MVP without a champion cloud; a player when not even the logo cloud exists): the caption card
   alone, not an empty 250–340 px box (after the tall block, so phones collapse it too) */
.circuit .app .chamber.nocloud{height:auto;justify-content:flex-start;padding-top:32px}
.circuit .app .chamber.nocloud .cap{padding-top:4px;background:none}
.circuit .app .pchamber.nocloud{padding-top:14px}
.circuit .app .pchamber.nocloud .corner{display:none}

/* a navigation waiting on data (after 120 ms): an ion bar under the top strip and the old view dimmed, on every layout — phones
   hide the readout, and search / Back / zoom-out / key shortcuts have no source cell to pulse */
.circuit .app.busy .edge.top{position:relative}
.circuit .app.busy .edge.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--ion),transparent) no-repeat;background-size:40% 100%;animation:c-busy 1.1s linear infinite}
@keyframes c-busy{from{background-position:-100% 0}to{background-position:200% 0}}
.circuit .app.busy .stage>*{opacity:.55;transition:opacity .2s}
@media (prefers-reduced-motion:reduce){
  .circuit .app.busy .edge.top::after{animation:none;background:var(--ion-2)}
  .circuit .app.busy .stage>*{transition:none}
}

/* ── public builds in every game (2026-09: CIRCUIT_PUBLIC_BUILDS = spells, runes, full rune page, items, economy, scoreboard) ──
   series cells: a wide cell (desktop) also carries the final items and the economy line on its right; a narrow one hides them */
.circuit .match .mcell.wic{container-type:inline-size}
.circuit .mcell.wic>.mx{display:none;grid-column:3;grid-row:1 / span 3;flex-direction:column;align-items:flex-end;gap:5px;min-width:0;max-width:118px}
.circuit .mcell.wic>.mx .its{flex-wrap:nowrap}
.circuit .mcell.wic>.mx .eco{display:grid;grid-template-columns:repeat(2,auto);justify-content:end;justify-items:end;gap:3px 8px}
@container (min-width:250px){.circuit .mcell.wic>.mx{display:flex}}
@container (min-width:350px){.circuit .mcell.wic>.mx{max-width:none}.circuit .mcell.wic>.mx .eco{display:inline-flex;gap:3px 7px}}
/* the bans row under each team of the series grid */
.circuit .match .grow.bans .tcell .role{color:var(--dim)}
.circuit .match .grow.bans .tcell .nm{color:var(--mut)}
.circuit .match .mcell.bans{padding-block:8px}
.circuit .match .mcell.bans .dic{gap:3px}
.circuit .tall .match .mcell.bans .ico{--s:18px!important}
/* the build card, for everyone: section captions (the staff-only purchase path, economy that only staff see) */
.circuit .bcard .bph{display:flex;align-items:center;gap:6px;min-width:0;margin:12px 0 8px;padding-top:12px;border-top:1px solid var(--line2)}
.circuit .bcard .bsub+.bph{margin-top:0;padding-top:0;border-top:0}
.circuit .bcard .bph+.beco{margin-top:0;padding-top:0;border-top:0}
.circuit .bcard .blab .stf{margin-left:6px}
/* other teams' player rows (TEAM): the top tracked champions beside the name; the side card that follows the focused row */
.circuit .tcell .ochs{margin-left:auto;flex:0 0 auto;display:flex;gap:2px}
.circuit .ocard h3{display:flex;align-items:baseline;min-width:0}
.circuit .ocard .oname{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:0 0 12px;min-width:0;font:700 var(--ion-fs-xl)/1.1 var(--disp);letter-spacing:var(--ion-tr-head);color:var(--txt);overflow-wrap:anywhere}
.circuit .ocard .oname small{font:500 var(--ion-fs-micro)/1 var(--data);letter-spacing:0;color:var(--dim)}
.circuit .ocard .ochh{margin:14px 0 8px;padding-top:12px;border-top:1px solid var(--line2)}
.circuit .ocard .bar.wic{grid-template-columns:minmax(0,128px) 1fr 32px}
.circuit .ocard .bar i::after{background:var(--mut)}   /* another team's numbers are neutral: cyan is Ionized */
.circuit .ocard .facts .wide{grid-column:1 / -1}
.circuit .tall .team .tside.solo{grid-row:auto}   /* phones: the team header and its player rows first, the side cards after them */
/* the readout line is longer now that every game's economy is public: on a narrow desktop an overflowing line fades out at the
   right edge instead of being cut mid-word (a short line never reaches the fade) */
.circuit .readout{position:relative}
.circuit .readout::after{content:"";position:absolute;top:1px;right:0;bottom:0;width:44px;background:linear-gradient(90deg,transparent,var(--bg2) 70%);pointer-events:none}

/* ═══ round 3 (2026-09-28): phone chrome, the division picker, accessibility, "since your last visit", rank trails ═══ */

/* ── phone chrome (tall only): the next match was shown twice, in the site ribbon (two lines at the top, 53 px) and in the
      circuit's bottom strip. The strip stays — it opens the fixture inside the app, carries the Oslo-day countdown and Watch, one
      line in the thumb zone — and the ribbon's "next" state goes. Its LIVE state stays: the strip has no live broadcast. Desktop
      keeps both (the ribbon is the site's sticky chrome on every page; there the room is). circuit.js and menu.js measure a
      display:none ribbon as 0, so the app starts right under the header. ── */
@media (max-width:820px),(orientation:portrait) and (pointer:coarse),(max-height:500px) and (pointer:coarse){
  .template-circuit #live-ribbon[data-live-ribbon="next"]{display:none}
}
/* landscape phones: the data first — Ionized's chamber (team, player) follows the rows at 160 px instead of filling the whole
   stage above them — and a one-line bottom strip */
@media (max-height:500px) and (pointer:coarse){
  .circuit .tall{--bot:48px}
  .circuit .tall .team .chamber:not(.nocloud),.circuit .tall .player .chamber:not(.nocloud){order:1;height:160px}
  .circuit .tall .team .tside{order:2}
  .circuit .tall .player .pleft{order:2}.circuit .tall .player .pright{order:3}
}

/* ── assistive tech: the one live region (#srlive) and other text for screen readers only; the focusable stage (a route change
      hands it focus) and the skip-the-table button ── */
.circuit .c-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.circuit .stage:focus,.circuit .stage:focus-visible,.circuit .dafter:focus,.circuit .dafter:focus-visible,.circuit .help h2:focus,.circuit .help h2:focus-visible{outline:none}
.circuit .c-skip{margin:0 0 8px}
.circuit .c-skip:not(:focus){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* a walkover's winner keeps the win fill under the hatch (the hatch alone made both sides identical but for the text colour), and
   the text says it: "W.O. W" / "W.O. L" (circuit.js woHtml) where the cell has the room — an 11-round table at 1024 px has 44 px
   cells, where the " W" / " L" goes and the fill alone (win filled, loss open) tells them apart; the readout and every
   accessible name keep the words */
.circuit .cell.wo.win::before{background:repeating-linear-gradient(45deg,transparent 0 4px,var(--ion-win-border) 4px 5px),var(--win-fill);border-color:var(--ion-win-border)}
.circuit .cell.wo{container-type:inline-size}
.circuit .cell.wo b{font:600 var(--ion-fs-cap)/1 var(--data);letter-spacing:0}
@container (max-width:52.9px){.circuit .cell.wo b .wl{display:none}}   /* "W.O. W" is ~35 px at 12px: it fits the frame of a 53 px cell */
/* the phone hold-toast shows a cell's preview line: its keyboard hints mean nothing there */
.circuit .toast .k{display:none}
/* the series h1 on a phone breaks between the teams, never inside "2 – 1" */
.circuit .score .sc em{white-space:nowrap}

/* ── the division picker: the crumb's division name on the table opens every division of every split. It is a menu (§3.4):
      raised, the line-strong frame, the float shadow, never clipped; the open division gets the 2px accent bar and the wash ── */
.circuit .edge.top{position:relative;z-index:5}   /* the picker drops over the stage (and its sticky round header) */
.circuit .crumb .dsw{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;background:none;border:0;border-bottom:2px solid var(--ion);cursor:pointer;text-align:left}
.circuit .crumb .dsw .dswl{min-width:0;overflow:hidden;text-overflow:ellipsis}
.circuit .crumb .dsw .car{flex:0 0 auto;width:6px;height:6px;border-right:1.5px solid var(--ion);border-bottom:1.5px solid var(--ion);transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.circuit .crumb .dsw[aria-expanded="true"] .car{transform:translateY(1px) rotate(-135deg)}
.circuit .crumb .dsw:hover{color:var(--ion)}
.circuit .dpick{position:absolute;top:calc(100% + 1px);left:var(--side);z-index:6;width:min(460px,calc(100vw - 2 * var(--side)));max-height:min(72vh,calc(100vh - var(--chrome) - 70px));overflow:auto;overscroll-behavior:contain;padding:4px 0;background:var(--ion-raised);border:1px solid var(--line3);box-shadow:var(--ion-shadow-float)}
.circuit .dpg{padding:6px 12px 8px}
.circuit .dpg+.dpg{border-top:1px solid var(--line2)}
.circuit .dph{margin:4px 0 6px;font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--dim)}
.circuit .dph small{margin-left:8px;font:500 var(--ion-fs-micro)/1 var(--data);letter-spacing:0;text-transform:none;color:var(--dim)}
.circuit .dpl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.circuit .dpl.ko{margin-top:6px;padding-top:6px;border-top:1px solid var(--line2)}
.circuit a.dp{display:block;min-width:0;padding:8px 10px;border-left:2px solid transparent;font:600 var(--ion-fs-dense)/1.15 var(--data);color:var(--mut);text-decoration:none}
.circuit a.dp:hover,.circuit a.dp:focus-visible{background:var(--ion-4);color:var(--txt);outline:none}
.circuit a.dp.on{border-left-color:var(--ion);background:var(--ion-4);color:var(--txt)}
.circuit .dpf{margin-top:2px;padding:6px 12px 2px;border-top:1px solid var(--line2)}
/* Ionized plays in this division (the picker, the strip, the league index) */
.circuit .usd{display:inline-block;flex:0 0 auto;width:6px;height:6px;margin-left:7px;border-radius:50%;background:var(--ion);box-shadow:var(--ion-glow-dot);vertical-align:middle}
/* the strip under the table (this split's divisions) and the ladder's league index (every split's) */
.circuit .dstrip{margin-top:12px}
.circuit .dstrip h3 .kb{margin-right:2px}
@media (hover:none){.circuit .dstrip h3 small{display:none}}
.circuit .lindex{margin-top:14px}
.circuit .lix+.lix{margin-top:12px;padding-top:12px;border-top:1px solid var(--line2)}
.circuit .lindex .dph{margin:0 0 8px}
.circuit .lil{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:4px}
/* a division in the league index: a compact container (the 10px cut under 48px), recessed in its card */
.circuit a.lii{display:flex;flex-direction:column;gap:3px;min-width:0;padding:8px 10px;border:1px solid var(--line2);background:var(--row2);clip-path:var(--ion-clip-panel-sm);color:var(--mut);text-decoration:none}
.circuit a.lii b{font:600 var(--ion-fs-small)/1.15 var(--data);color:var(--txt)}
.circuit a.lii small{font:500 var(--ion-fs-micro)/1.2 var(--data);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.circuit a.lii:hover{border-color:var(--ion-2);background:var(--ion-raised)}
.circuit a.lii.us{box-shadow:var(--ion-edge-top)}   /* "us": the accent top edge, never a coloured frame (a cut erases a frame's diagonal) */

/* ── since your last visit: a white pip at the top left of a result that landed since (the cyan .deep dot is top right) ── */
.circuit .cell .nw{position:absolute;top:9px;left:9px;width:5px;height:5px;border-radius:50%;background:var(--txt);box-shadow:0 0 6px rgb(var(--ion-ink-rgb) / .55);pointer-events:none}
.circuit .tall .cell .nw{top:3px;left:3px;width:4px;height:4px}
.circuit .readout .nwt{color:var(--txt)}

/* ── rank trail: the team's rank after each played round, rank 1 at the top (team header, fixture boxes) ── */
.circuit .spark{display:inline-block;margin:0 2px 0 8px;overflow:visible;vertical-align:middle}
.circuit .spark polyline{fill:none;stroke:var(--mut);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.circuit .spark circle{fill:var(--mut)}
.circuit .spark.us polyline{stroke:var(--ion)}
.circuit .spark.us circle{fill:var(--ion)}

/* ── the shortcut switch in the help panel (WCAG 2.1.4): a chip, .on-looking while the shortcuts are on (aria-pressed) ── */
.circuit .help p.kbt{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:16px 0 0;font-size:var(--ion-fs-cap);color:var(--dim)}

/* ── the page idles: once the ion field has settled (circuit.js ION, 9 s without input), the decorative CSS loops pause with it ── */
.circuit .app.calm *,.circuit .app.calm *::before,.circuit .app.calm *::after{animation-play-state:paused}

/* ═══ round 3 · client B (2026-09-28): the bracket, the leaderboard, head-to-head, who to expect, matchday, the archive ═══ */

/* the no-JS / pre-boot fallback in #stage (circuit/_ssr_stage.html, UX-11): circuit.js replaces it on its first render */
.circuit .c-ssr{max-width:980px}
.circuit .c-ssr .h1{margin:2px 0 8px}
.circuit .c-ssr p{margin:0 0 14px;color:var(--mut);max-width:70ch}
.circuit .c-ssr table{width:100%;border-collapse:collapse;border:1px solid var(--line2);background:var(--row);font-size:var(--ion-fs-dense)}
.circuit .c-ssr caption{caption-side:top;text-align:left;padding:0 0 8px;font:600 var(--ion-fs-micro)/1.2 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--dim)}
.circuit .c-ssr th,.circuit .c-ssr td{padding:8px 10px;border-top:1px solid var(--line2);text-align:left;color:var(--mut)}
.circuit .c-ssr th{font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--mut)}
.circuit .c-ssr td a{color:var(--txt)}
.circuit .c-ssr ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.circuit .card h1.lede{margin:0 0 10px;color:var(--txt);font:700 var(--ion-fs-xl)/1.2 var(--disp);text-transform:uppercase;letter-spacing:var(--ion-tr-head)}
.circuit .tools button svg{flex:0 0 auto}

/* ── a knockout division (UX-02): one column per round, a card per series (winner bold), then the teams' group rows ── */
.circuit .bracket{display:grid;grid-template-columns:repeat(var(--nb,1),minmax(210px,1fr));gap:10px;align-items:start;overflow-x:auto;padding-bottom:2px}
.circuit .bcol{display:flex;flex-direction:column;gap:6px;min-width:0}
.circuit .bcol>.gh{margin:0;border:1px solid var(--line2);background:var(--bg2);min-height:0}
.circuit .bcol>.gh.us{border-color:var(--ion-2)}
/* a series in the bracket: a container (the cut); Ionized's carries the accent top edge, an unplayed one the dashed frame */
.circuit a.bm{position:relative;display:flex;flex-direction:column;gap:5px;padding:10px 12px;border:1px solid var(--line2);background:var(--row);clip-path:var(--ion-clip-panel);color:var(--mut);text-decoration:none}
.circuit .bm .bt{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0;font:600 var(--ion-fs-dense)/1.2 var(--data)}
.circuit .bm .bn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.circuit .bm .bt b{flex:0 0 auto;font:700 var(--ion-fs-body)/1 var(--disp);color:var(--dim)}
.circuit .bm .bt.w{color:var(--txt)}
.circuit .bm .bt.w b{color:var(--win)}
.circuit .bm .bt.w .bn{font-weight:700}
.circuit .bm small{font:500 var(--ion-fs-micro)/1.25 var(--data);color:var(--dim)}
.circuit .bm.us{background:linear-gradient(90deg,var(--ion-4),var(--row) 60%);box-shadow:var(--ion-edge-top)}
.circuit .bm:not(.pl){border-style:dashed}
.circuit .bm.cancelled .bn{text-decoration:line-through;text-decoration-color:var(--dim2)}
.circuit .bm.cancelled small,.circuit .bm.postponed small{color:var(--mut)}
.circuit .bm.xc{background:var(--ion-4)}
.circuit a.bm:hover,.circuit .bm.focus{border-color:var(--ion-2);background:var(--ion-4)}
.circuit .bm.focus{box-shadow:var(--ion-ring)}
.circuit .bm.deep::after{content:"";position:absolute;top:7px;right:7px;width:5px;height:5px;border-radius:50%;background:var(--ion);box-shadow:var(--ion-glow-dot)}
.circuit .bm .nw{position:absolute;top:4px;left:4px;width:5px;height:5px;border-radius:50%;background:var(--txt);box-shadow:0 0 6px rgb(var(--ion-ink-rgb) / .55);pointer-events:none}
.circuit .kov .dafter{margin-top:12px}
.circuit .klist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:6px}
.circuit a.kt{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:3px 10px;padding:8px 12px;border:1px solid var(--line2);background:var(--row2);clip-path:var(--ion-clip-panel);color:var(--mut);text-decoration:none}
.circuit a.kt b{min-width:0;font:600 var(--ion-fs-dense)/1.2 var(--data);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.circuit a.kt .kr{font:700 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--ion);white-space:nowrap}
.circuit a.kt small{grid-column:1 / -1;font:500 var(--ion-fs-micro)/1.3 var(--data);color:var(--dim)}
.circuit a.kt.us{box-shadow:var(--ion-edge-top)}
.circuit a.kt:hover{border-color:var(--ion-2);background:var(--ion-raised)}
.circuit .tall .bracket{grid-template-columns:minmax(0,1fr);overflow-x:visible;gap:12px}
.circuit .tall .bcol{gap:4px}
.circuit .tall a.bm{padding:8px 10px;gap:3px}
.circuit .tall .bm .bt{font-size:var(--ion-fs-small)}.circuit .tall .bm .bt b{font-size:var(--ion-fs-dense)}

/* ── players: the division leaderboard (CR-06) ── */
.circuit .lbd{margin-top:12px}
.circuit .lbd .lbh,.circuit .lbd .lbr{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(96px,1.3fr) 52px 52px;align-items:center;gap:10px}
.circuit .lbd.riot .lbh,.circuit .lbd.riot .lbr{grid-template-columns:28px minmax(0,1fr) minmax(96px,1.3fr) 52px 52px 52px 52px}
.circuit .lbd .lbh{padding:0 10px 8px;font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--mut)}
.circuit .lbd .lbh span:nth-child(n+4){text-align:right}
.circuit .lbd .lbl{display:flex;flex-direction:column;border-bottom:1px solid var(--line2)}
.circuit .lbd a.lbr{padding:7px 10px;border-top:1px solid var(--line2);color:var(--mut);text-decoration:none;font-size:var(--ion-fs-small);min-width:0}
.circuit .lbd a.lbr:hover,.circuit .lbd a.lbr:focus-visible{background:var(--ion-4)}
.circuit .lbr .lp{font:700 var(--ion-fs-small)/1 var(--disp);color:var(--dim);text-align:right}
.circuit .lbr .ln{display:flex;align-items:center;gap:8px;min-width:0}
.circuit .lbr .ln .role{width:28px}
.circuit .lbr .ln b{min-width:0;color:var(--txt);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.circuit .lbr .lt{flex:0 0 auto;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 6px;border:1px solid var(--line3);background:var(--row2);font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--mut)}
.circuit .lbr.us .lt{border-color:var(--ion-2);color:var(--ion)}
.circuit .lbr.us .ln b{color:var(--ion)}
.circuit .lbr .lv{display:flex;align-items:center;gap:8px;min-width:0}
.circuit .lbr .lv i{flex:1 1 auto;height:6px;background:var(--line2);position:relative}
.circuit .lbr .lv i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--dim)}
.circuit .lbr.us .lv i::after,.circuit a.lbr:hover .lv i::after{background:var(--ion)}
.circuit .lbr .lv b{min-width:36px;text-align:right;font:700 var(--ion-fs-dense)/1 var(--disp);color:var(--txt)}
.circuit .lbr .lg,.circuit .lbr .lw,.circuit .lbr .lc,.circuit .lbr .lk{text-align:right;color:var(--mut)}
.circuit .lbd .lbmore{margin-top:10px}
.circuit .lbd .note{margin-top:10px}
.circuit .tall .lbd .lbh,.circuit .tall .lbd .lbr{grid-template-columns:22px minmax(0,1fr) 92px 30px;gap:8px}
.circuit .tall .lbd .lbh span:nth-child(n+5),.circuit .tall .lbd .lbr .lw,.circuit .tall .lbd .lbr .lc,.circuit .tall .lbd .lbr .lk{display:none}
.circuit .tall .lbd a.lbr{padding:8px 6px}

/* ── the fixture card: the time frame of its numbers, earlier meetings, who to expect, the delayed live line ── */
.circuit .tbox .fr{color:var(--dim)}
.circuit .prev{margin:14px 0 0}
.circuit .prev h3,.circuit .who h3{margin:0 0 8px;font:700 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--mut)}
.circuit .prev h3 small,.circuit .who h3 small{margin-left:8px;font:500 var(--ion-fs-micro)/1 var(--data);letter-spacing:0;text-transform:none;color:var(--dim)}
.circuit .match .pcard{margin-top:14px}
.circuit .who{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--line2)}
.circuit .who .whoh,.circuit .who .note{grid-column:1 / -1}
.circuit .who .whoh h3{margin:0}
.circuit .who .note{margin:0}
.circuit .who>div>h3{color:var(--mut)}
.circuit .wlist{display:flex;flex-direction:column;gap:8px}
.circuit .wrow{display:flex;align-items:center;gap:10px;min-width:0}
.circuit .wrow .wn{font:600 var(--ion-fs-dense)/var(--ion-lh-snug) var(--data);color:var(--txt);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.circuit .wrow a.wn:hover{color:var(--ion)}
.circuit .wrow .ochs{margin-left:auto;flex:0 0 auto;display:flex;gap:2px}
.circuit .tall .who{grid-template-columns:minmax(0,1fr)}
.circuit .liveln{margin:14px 0 0;font-size:var(--ion-fs-small);color:var(--mut)}
/* on air (§2.3): the opponent / on-air red, a pulsing dot and the word LIVE — never the loss pink */
.circuit .lbl.live{color:var(--ion-red)}
.circuit .liveln .lbl{display:inline-block;margin-right:6px;padding:4px 8px;border:1px solid var(--ion-red-border);background:var(--row2);font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase}

/* ── the bottom strip on a match night: our broadcast's delayed score (matchday, CR-03) ── */
.circuit .pulse.on{background:var(--ion-red);animation:c-livepulse 1.6s ease-out infinite}
@keyframes c-livepulse{0%{box-shadow:0 0 0 0 var(--ion-red-border)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.circuit .next.live .vs em{color:var(--txt);font-weight:700}
@media (prefers-reduced-motion:reduce){.circuit .pulse.on{animation:none}}

/* ── Ionized's grid across roster changes (RB-2): a former player's row is named, muted, not a link ── */
.circuit .grow.former .tcell{cursor:default}
.circuit .grow.former .nm{color:var(--mut)}
.circuit .grow.former .tcell:hover .nm{color:var(--mut)}

/* ── the player's other splits (CR-12) ── */
.circuit .phist{margin-top:12px}
.circuit .phist .hgrid+.hgrid{margin-top:8px}
.circuit .phist>.dimtxt{margin:8px 0 0}

/* ── the ladder's archive splits (CR-11): the cell is a button that opens the split's series under the ladder ── */
.circuit button.lcell{font:inherit;border-right:0;border-bottom:0;appearance:none}
.circuit .lcell.on{background:var(--ion-3);box-shadow:var(--ion-ring)}
.circuit .arcc{margin-top:14px}
.circuit .arcl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:4px}
/* a series from the archive: a container (the cut), recessed in its card; the score mint for a win, pink for a loss */
.circuit .arr{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:baseline;gap:3px 10px;padding:8px 10px;border:1px solid var(--line2);background:var(--row2);clip-path:var(--ion-clip-panel);color:var(--mut);text-decoration:none}
.circuit .arr .ar{font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--dim)}
.circuit .arr .ao{min-width:0;font:600 var(--ion-fs-dense)/1.2 var(--data);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.circuit .arr .as{font:700 var(--ion-fs-body)/1 var(--disp);color:var(--mut)}
/* a won series is a filled row (the win fill), a lost one open (the plain row); the hover's raised fill covers both */
.circuit .arr.win .as{color:var(--win)}
.circuit .arr.win{background:var(--win-fill)}
.circuit .arr.loss .as{color:var(--loss)}
.circuit .arr small{grid-column:2 / -1;font:500 var(--ion-fs-micro)/1.2 var(--data);color:var(--dim)}
.circuit a.arr:hover{border-color:var(--ion-2);background:var(--ion-raised)}
.circuit .card p.mh{margin:12px 0 8px;font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--dim)}
.circuit .tall .lbd .lbr .lt{max-width:50px;padding:3px 4px}
.circuit .tall .arr{padding:7px 9px}
/* a retired team's tag after its name (the organiser annuls its matches; it ranks last) */
.circuit .wdtag{margin-left:.45em;font:600 var(--ion-fs-micro)/1 var(--disp);letter-spacing:var(--ion-tr-label);text-transform:uppercase;color:var(--dim);white-space:nowrap}