/* Challenger Quiz components
   Reads only --cq-* custom properties from theme.css, so light and dark restyle everything.

   Mobile first. Base rules are the phone layout. Wider layouts are added with
   container queries against the nearest .cq element (container name "cq"), so a
   component adapts to the space its container gives it.
     480px  phone patterns end: tabs show counts, ranked tables leave the three column phone
            pattern, info tips become anchored panels, the account button shows its name
     600px  tablet: optional table columns, inline filter labels, three column notices
     720px  desktop navigation moves from the bottom bar into the app bar
     960px  sidebars and the chart readout sit beside the main column

   Text rule: buttons, tabs, pills, links and table headings never wrap (white-space: nowrap), so
   their labels are written short enough to fit at 360px. Nothing is ever cut off with an ellipsis:
   names and sentences wrap instead.

   Figures: every number uses font-variant-numeric: var(--cq-num) (tabular, lining) so columns
   of figures line up. Numeric table columns are right-aligned.

   Motion rule: only transform and opacity are ever transitioned. Hover effects only
   run on devices that can hover. Press feedback runs everywhere. */

/* ------------------------------------------------------------------ base */
/* body.cq is a size container, and containment stops its background filling the window on
   short pages, so the root carries the page background too. */
html:has(> body.cq) { background: var(--cq-bg); }
.cq, .cq *, .cq *::before, .cq *::after { box-sizing: border-box; }
.cq {
  container: cq / inline-size;
  margin: 0;
  background: var(--cq-bg);
  color: var(--cq-ink);
  font-family: var(--cq-font-sans);
  font-size: var(--cq-text-md);
  font-weight: var(--cq-weight-regular);
  line-height: var(--cq-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.cq :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; }
.cq :where(ul, ol) { padding: 0; list-style: none; }
.cq :where(button, input, select) { font: inherit; color: inherit; }
.cq :where(a, button, summary, select, label, input) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.cq :focus-visible { outline: var(--cq-focus-w) solid var(--cq-focus); outline-offset: var(--cq-focus-offset); }

.cq-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cq-skip { position: absolute; left: var(--cq-space-4); top: var(--cq-space-4); z-index: 100;
  background: var(--cq-surface); color: var(--cq-ink); padding: var(--cq-space-3) var(--cq-space-4);
  transform: translateY(-200%); transition: transform var(--cq-dur-base) var(--cq-ease-standard); }
.cq-skip:focus { transform: none; }

.cq-icon {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.125em;
}
.cq-num, .cq-tnum {
  font-family: var(--cq-font-num);
  font-variant-numeric: var(--cq-num);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.cq-wide-only { display: none; }
@container cq (min-width: 600px) { .cq-wide-only { display: revert; } .cq-narrow-only { display: none; } }

/* ------------------------------------------------------------------ type */
.cq-h1 { font-family: var(--cq-font-display); font-weight: var(--cq-weight-display);
  font-size: var(--cq-text-2xl); line-height: var(--cq-lh-tight); letter-spacing: var(--cq-tracking-display); text-wrap: balance; }
.cq-h2 { font-family: var(--cq-font-display); font-weight: var(--cq-weight-display);
  font-size: var(--cq-text-xl); line-height: var(--cq-lh-snug); letter-spacing: var(--cq-tracking-display); text-wrap: balance; }
.cq-h3 { font-size: var(--cq-text-lg); font-weight: var(--cq-weight-strong); line-height: var(--cq-lh-snug); }
.cq-eyebrow { font-size: var(--cq-label-size); font-weight: var(--cq-weight-strong); color: var(--cq-ink-muted);
  text-transform: var(--cq-label-case); letter-spacing: var(--cq-tracking-label); line-height: var(--cq-lh-snug); }
.cq-muted { color: var(--cq-ink-muted); }
.cq-small { font-size: var(--cq-text-sm); }

/* Links: a real underline, 1px at 55% of the text colour. Hover, focus and press thicken it to
   2px at full colour. No transition: text-decoration can't be animated with transform or opacity. */
.cq-link { color: var(--cq-accent-ink); font-weight: var(--cq-weight-strong); display: inline-flex; align-items: center; min-height: 24px; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); }
.cq-link:focus-visible, .cq-link:active { text-decoration-thickness: 2px; text-decoration-color: currentColor; }
@media (hover: hover) { .cq-link:hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; } }

/* ------------------------------------------------------------------ app bar and bottom navigation */
.cq-appbar {
  display: flex; align-items: center; gap: var(--cq-space-5);
  min-height: 56px; padding: 0 var(--cq-page-pad);
  background: var(--cq-surface);
  border-bottom: var(--cq-appbar-rule-w) solid var(--cq-appbar-rule);
  box-shadow: var(--cq-appbar-shadow);
  position: relative; z-index: 5;
}
.cq-appbar__brand { font-family: var(--cq-wordmark-font); font-weight: var(--cq-wordmark-weight);
  font-size: var(--cq-wordmark-size); letter-spacing: var(--cq-tracking-display); color: var(--cq-ink);
  text-decoration: none; white-space: nowrap; line-height: 1; display: inline-flex; align-items: center; gap: 0.45em; }
/* The bubble Q mark, the brand kit's small version (32px and under): board, tail and centre dot.
   Colours come from cq-logo-board and cq-logo-dot, so D shows the brand colours and A, B and C a
   one-colour mark in their ink. Height tracks the wordmark size. Decorative: the name is the text. */
.cq-appbar__mark { width: auto; height: 1.55em; flex: none; display: block; }
.cq-appbar__mark .cq-logo-board { fill: var(--cq-logo-board); }
.cq-appbar__mark .cq-logo-dot { fill: var(--cq-logo-dot); }
.cq-appbar__id { display: grid; grid-template-columns: minmax(max-content, 1fr); align-content: center; gap: 2px; flex: 1 1000 auto; min-width: min-content; }
/* Context beside the brand (the quiz name). It truncates before anything else in the bar: on a phone
   it sits under the brand and uses the space up to the account menu, so it never pushes that menu. */
.cq-appbar__context { width: 0; min-width: 100%; overflow-wrap: anywhere;
  color: var(--cq-ink-muted); font-size: var(--cq-text-xs); line-height: var(--cq-lh-snug); }
.cq-appbar__end { margin-left: auto; display: flex; align-items: center; gap: var(--cq-space-4); color: var(--cq-ink-muted);
  font-size: var(--cq-text-sm); min-width: 0; }

/* Phone: the same nav links become a bottom bar within thumb reach. */
.cq-appbar__nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 0 var(--cq-space-2) env(safe-area-inset-bottom, 0px);
  background: var(--cq-surface); border-top: 1px solid var(--cq-border); box-shadow: var(--cq-shadow-2);
}
.cq-appbar__nav a { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: var(--cq-nav-h); color: var(--cq-ink-muted); text-decoration: none; font-size: var(--cq-text-xs);
  transition: transform var(--cq-dur-fast) var(--cq-ease-standard); }
.cq-appbar__nav a .cq-icon { font-size: 22px; }
.cq-appbar__nav a::before { content: ""; position: absolute; inset: 6px 10%; border-radius: var(--cq-radius-md); z-index: -1;
  background: var(--cq-overlay-hover); opacity: 0; transition: opacity var(--cq-dur-base) var(--cq-ease-standard); }
.cq-appbar__nav a::after { content: ""; position: absolute; left: 30%; right: 30%; top: 0; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--cq-tab-current-ink); transform: scaleX(0); transition: transform var(--cq-dur-slow) var(--cq-ease-enter); }
.cq-appbar__nav a:active { transform: scale(var(--cq-press-scale)); }
.cq-appbar__nav a:active::before { opacity: 1; }
.cq-appbar__nav a[aria-current="page"] { color: var(--cq-tab-current-ink); font-weight: var(--cq-weight-strong); }
.cq-appbar__nav a[aria-current="page"]::after { transform: scaleX(1); }
/* Tag slot on a nav item: a short count or word. On the bottom bar it sits at the icon's top right. */
.cq-appbar__tag { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 1.5em; height: 1.5em; padding: 0 0.4em; display: inline-grid; place-items: center;
  border-radius: var(--cq-radius-pill); background: var(--cq-accent); color: var(--cq-on-accent); font-size: 11px; font-weight: var(--cq-weight-strong);
  line-height: 1; font-variant-numeric: var(--cq-num); }

@container cq (min-width: 720px) {
  .cq-appbar { min-height: calc(var(--cq-control-h) + var(--cq-space-5)); padding: 0 var(--cq-page-pad-wide); gap: var(--cq-space-6); }
  .cq-appbar__id { grid-template-columns: max-content minmax(0, auto); align-items: baseline; gap: var(--cq-space-4); flex: 0 1000 auto; }
  .cq-appbar__context { width: auto; min-width: 0; max-width: 22em; font-size: var(--cq-text-sm);
    padding-left: var(--cq-space-4); border-left: 1px solid var(--cq-border); }
  .cq-appbar__nav { position: static; display: flex; flex: none; gap: var(--cq-space-2); padding: 0; background: none; border: 0; box-shadow: none; }
  .cq-appbar__nav a { flex-direction: row; gap: var(--cq-space-2); min-height: var(--cq-control-h); padding: 0 var(--cq-space-4); white-space: nowrap;
    font-size: var(--cq-text-md); }
  .cq-appbar__nav a .cq-icon { display: none; }
  .cq-appbar__tag { position: static; margin-left: 2px; }
  .cq-appbar__nav a::before { inset: 0; }
  .cq-appbar__nav a::after { top: auto; bottom: 0; left: var(--cq-space-4); right: var(--cq-space-4); border-radius: 3px 3px 0 0; }
}
@media (hover: hover) { .cq-appbar__nav a:hover::before { opacity: 1; } }

/* ------------------------------------------------------------------ page layout */
.cq-page--form { --cq-page-max: var(--cq-page-max-form); }
.cq-page { max-width: var(--cq-page-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cq-gap);
  padding: var(--cq-space-6) var(--cq-page-pad) calc(var(--cq-space-7) + var(--cq-nav-h) + env(safe-area-inset-bottom, 0px)); }
@container cq (min-width: 720px) { .cq-page { padding: var(--cq-page-pad-wide); } }
.cq-page__head { display: grid; gap: var(--cq-space-4); }
.cq-page__titles { display: grid; gap: var(--cq-space-2); min-width: 0; }
.cq-page__actions { display: flex; gap: var(--cq-space-3); flex-wrap: wrap; }
.cq-page__actions > .cq-btn { flex: 1 1 0; }
@container cq (min-width: 600px) {
  .cq-page__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--cq-space-4) var(--cq-space-6); }
  .cq-page__actions { margin-left: auto; }
  .cq-page__actions > .cq-btn { flex: none; }
}
.cq-split { display: grid; gap: var(--cq-gap); grid-template-columns: minmax(0, 1fr); }
@container cq (min-width: 960px) { .cq-split { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: start; } }
.cq-grid--rounds { --cq-grid-min: var(--cq-round-min); --cq-grid-min-wide: 230px; }
.cq-grid { display: grid; gap: var(--cq-gap-tight); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cq-grid-min, 150px)), 1fr)); }
@container cq (min-width: 600px) { .cq-grid { gap: var(--cq-gap); } }
@container cq (min-width: 960px) { .cq-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cq-grid-min-wide, 220px)), 1fr)); } }
.cq-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cq-gap); align-content: start; }
.cq-section-head { display: flex; align-items: baseline; gap: var(--cq-space-2) var(--cq-space-4); flex-wrap: wrap; }
@container cq (min-width: 600px) { .cq-section-head > :last-child:not(:first-child) { margin-left: auto; } }

/* Shared surface: cards, tables, tiles, charts. B draws a top rule instead of a box. */
.cq-card, .cq-table-wrap, .cq-stat, .cq-round, .cq-gauge, .cq-chart {
  position: relative;
  background: var(--cq-card-bg);
  border: var(--cq-card-border-w) solid var(--cq-border);
  border-radius: var(--cq-radius-lg);
  box-shadow: var(--cq-shadow-1);
}
.cq-card::before, .cq-table-wrap::before, .cq-stat::before, .cq-round::before, .cq-gauge::before, .cq-chart::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--cq-card-rule-w);
  background: var(--cq-ink); z-index: 3; pointer-events: none; border-radius: var(--cq-radius-lg) var(--cq-radius-lg) 0 0;
}
.cq-card { padding: var(--cq-card-pad); display: grid; gap: var(--cq-space-4); align-content: start; }

/* ------------------------------------------------------------------ data table */
.cq-table-wrap { overflow: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.cq-table-wrap--scroll { max-height: var(--cq-table-max-h, 70vh); }
.cq-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--cq-text-md);
  font-variant-numeric: var(--cq-num); }
.cq-table caption { text-align: left; padding: var(--cq-card-pad) var(--cq-cell-px) var(--cq-space-3); }
.cq-table th {
  position: sticky; top: 0; z-index: 2;
  height: var(--cq-th-h); padding: var(--cq-cell-py) var(--cq-cell-px);
  background: var(--cq-th-bg); color: var(--cq-ink-muted);
  font-size: var(--cq-label-size); font-weight: var(--cq-weight-strong);
  text-transform: var(--cq-label-case); letter-spacing: var(--cq-tracking-label);
  text-align: left; white-space: nowrap; vertical-align: bottom;
  border-bottom: 1px solid var(--cq-th-rule);
}
.cq-table td {
  position: relative; isolation: isolate;
  height: var(--cq-row-h); padding: var(--cq-cell-py) var(--cq-cell-px);
  border-bottom: var(--cq-table-rule-w) solid var(--cq-border);
  vertical-align: middle;
}
.cq-table th:first-child, .cq-table td:first-child { padding-left: var(--cq-cell-edge); }
.cq-table th:last-child, .cq-table td:last-child { padding-right: var(--cq-cell-edge); }
.cq-table tbody tr:nth-child(even) td { background: var(--cq-zebra-bg); }
.cq-table tbody tr:last-child td { border-bottom: 0; }
.cq-table td::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cq-row-hover);
  opacity: 0; transition: opacity var(--cq-dur-fast) var(--cq-ease-standard); pointer-events: none; }
.cq-table tbody tr:active td::before, .cq-table tbody tr:focus-within td::before { opacity: 1; }
@media (hover: hover) { .cq-table tbody tr:hover td::before { opacity: 1; } }
/* The viewing team's row: the coral surface on every cell (sticky ones too) and a 4px coral bar on the
   left edge. The row also carries words ("Your team" from 480px, and screen reader text), so colour
   is never the only cue. */
.cq-table tbody tr.is-current > * { background: var(--cq-you-surface); }
.cq-table tbody tr.is-current > :first-child { box-shadow: inset 4px 0 0 var(--cq-you); }
/* Row headers (th scope=row) take the same rule, background and zebra as the cells beside them. */
.cq-table tbody th { position: static; height: var(--cq-row-h); background: var(--cq-card-bg); color: var(--cq-ink); font-size: inherit;
  text-transform: none; letter-spacing: normal; vertical-align: middle; border-bottom: var(--cq-table-rule-w) solid var(--cq-border); }
.cq-table tbody tr:nth-child(even) th { background: var(--cq-zebra-bg); }
.cq-table tbody tr:last-child th { border-bottom: 0; }
/* Sort links in headers: the arrow shows the current order. Hidden on phones. */
.cq-sort { display: inline-flex; align-items: center; gap: var(--cq-space-1); color: inherit; text-decoration: none; min-height: 32px; white-space: nowrap; }
.cq-sort__icon { display: none; }
th[aria-sort] .cq-sort { color: var(--cq-ink); }
.cq-col-num .cq-sort { flex-direction: row-reverse; }
@media (hover: hover) { .cq-sort:hover { color: var(--cq-accent-ink); } }
.cq-table .cq-col-num { text-align: right; white-space: nowrap; font-family: var(--cq-font-num); }
.cq-table th.cq-col-num { text-align: right; }
.cq-table .cq-col-id { width: 1%; text-align: left; white-space: nowrap; font-family: var(--cq-font-num); color: var(--cq-ink-muted); font-weight: var(--cq-weight-strong); }
.cq-table th.cq-col-id { color: var(--cq-ink-muted); }
.cq-table .cq-col-rank { width: 1%; text-align: right; white-space: nowrap; font-weight: var(--cq-weight-strong); font-family: var(--cq-font-num); }
.cq-table .cq-col-move { width: 1%; white-space: nowrap; }
.cq-table .cq-col-strong { font-weight: var(--cq-weight-strong); }
.cq-table td.cq-col-total { font-size: var(--cq-text-lg); }
.cq-table .cq-col-team { min-width: 9ch; }
/* Ranked table. Phone (under 480px): three columns. Rank 32px; a 16px icon slot (movement) always
   reserved, then the name, which wraps to a second line; the value in 64px with a secondary figure
   under it in small muted text. No movement column, sort arrows or "Your team" chip. */
.cq-rt__cell { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--cq-space-2); align-items: baseline; }
.cq-rt__icon { display: inline-flex; width: 16px; justify-content: center; font-size: 16px; align-self: center; }
.cq-rt__icon .cq-move--up { color: var(--cq-success-ink); } .cq-rt__icon .cq-move--down { color: var(--cq-error-ink); }
.cq-rt__icon .cq-move--same { color: var(--cq-ink-muted); }
.cq-rt__name { min-width: 0; overflow-wrap: anywhere; line-height: var(--cq-lh-snug); }
.cq-rt__sub { display: block; font-size: var(--cq-text-xs); color: var(--cq-ink-muted); font-weight: var(--cq-weight-regular); font-family: var(--cq-font-sans); line-height: var(--cq-lh-snug); white-space: nowrap; }
.cq-table--ranked .cq-col-move, .cq-table--ranked .cq-col-team .cq-badge { display: none; }
.cq-table--ranked .cq-col-rank { width: 32px; min-width: 32px; padding-left: var(--cq-space-2); padding-right: var(--cq-space-2); text-align: center; }
.cq-table--ranked .cq-col-total { width: 64px; min-width: 64px; }
.cq-table--ranked td.cq-col-team { padding-left: var(--cq-space-2); }
@container cq (min-width: 480px) {
  .cq-table--ranked .cq-col-move { display: table-cell; }
  .cq-table--ranked .cq-col-team .cq-badge { display: inline-flex; margin-left: var(--cq-space-2); }
  .cq-table--ranked .cq-rt__cell { display: block; }
  .cq-table--ranked .cq-rt__icon { display: none; }
  .cq-table--ranked .cq-col-rank { width: 1%; padding-left: var(--cq-cell-edge); text-align: right; }
  .cq-table--ranked .cq-col-total { width: auto; }
  .cq-sort__icon { display: inline-block; font-size: 14px; }
  .cq-sort .cq-sort__icon { opacity: 0.5; } th[aria-sort] .cq-sort__icon { opacity: 1; }
}
@container cq (min-width: 600px) { .cq-table--ranked .cq-rt__sub { display: none; } }
.cq-table--compact { --cq-row-h: 36px; }
/* Phone: secondary columns fold into a line under the team name. */
.cq-table .cq-col-opt { display: none; }
.cq-rowmeta { display: block; font-size: var(--cq-text-xs); color: var(--cq-ink-muted); font-weight: var(--cq-weight-regular); margin-top: 1px; }
@container cq (min-width: 600px) {
  .cq-table .cq-col-opt { display: table-cell; }
  .cq-rowmeta { display: none; }
  .cq-table .cq-col-team { white-space: nowrap; }
  .cq-table .cq-col-total { font-size: inherit; }
}

.cq-team-link { color: inherit; text-decoration: none; font-weight: var(--cq-weight-strong); }
.cq-team-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }  /* whole cell is the target */
.cq-team-link:focus-visible { outline: none; }
.cq-team-link:focus-visible::after { outline: var(--cq-focus-w) solid var(--cq-focus); outline-offset: -3px; }
@media (hover: hover) { .cq-team-link:hover { color: var(--cq-accent-ink); } }
/* Dense tables: the same link at regular weight, so a column of names doesn't read as bold. */
.cq-team-link--regular { font-weight: var(--cq-weight-regular); }

/* Phone: the question table becomes one card per question. Same markup, labels come from data-label. */
.cq-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cq-table--stack tbody tr { display: grid; grid-template-columns: 1.8em 1fr 1fr; grid-template-areas: "n q q" ". you right" ". res res";
  gap: var(--cq-space-2) var(--cq-space-4); padding: var(--cq-space-4) var(--cq-cell-edge); position: relative; isolation: isolate;
  border-bottom: 1px solid var(--cq-border); }
.cq-table--stack tbody tr:last-child { border-bottom: 0; }
.cq-table--stack tbody td { display: block; height: auto; padding: 0; border: 0; background: none !important; position: static; }
.cq-table--stack tbody td::before { display: none; }
.cq-table--stack tbody tr:nth-child(even) { background: var(--cq-zebra-bg); }
.cq-table--stack td[data-area="n"] { grid-area: n; text-align: left; color: var(--cq-ink-muted); width: auto; }
.cq-table--stack td[data-area="q"] { grid-area: q; font-weight: var(--cq-weight-strong); line-height: var(--cq-lh-snug); }
.cq-table--stack td[data-area="you"] { grid-area: you; }
.cq-table--stack td[data-area="right"] { grid-area: right; }
.cq-table--stack td[data-area="res"] { grid-area: res; display: flex; flex-wrap: wrap; align-items: center; gap: var(--cq-space-2) var(--cq-space-4); }
.cq-table--stack td[data-area="base"], .cq-table--stack td[data-area="speed"] { display: none; }
.cq-table--stack td[data-label]:not([data-area="res"])::after { content: none; }
.cq-table--stack td[data-area="you"]::before, .cq-table--stack td[data-area="right"]::before {
  content: attr(data-label); display: block; position: static; opacity: 1; background: none; z-index: auto;
  font-size: var(--cq-label-size); font-weight: var(--cq-weight-strong); color: var(--cq-ink-muted);
  text-transform: var(--cq-label-case); letter-spacing: var(--cq-tracking-label); }
.cq-table--stack tfoot tr { display: flex; flex-wrap: wrap; gap: var(--cq-space-2) var(--cq-space-5); padding: var(--cq-space-4) var(--cq-cell-edge);
  border-top: 1px solid var(--cq-th-rule); font-weight: var(--cq-weight-strong); }
.cq-table--stack tfoot td { display: block; height: auto; padding: 0; border: 0; }
.cq-table--stack tfoot td:empty { display: none; }
.cq-table--stack tfoot td[data-label]::before { content: attr(data-label) " "; position: static; opacity: 1; background: none; z-index: auto;
  color: var(--cq-ink-muted); font-weight: var(--cq-weight-regular); }
@container cq (min-width: 600px) {
  .cq-table--stack thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .cq-table--stack tbody tr { display: table-row; padding: 0; border: 0; }
  .cq-table--stack tbody tr:nth-child(even) { background: none; }
  .cq-table--stack tbody td { display: table-cell; height: var(--cq-row-h); padding: var(--cq-cell-py) var(--cq-cell-px);
    border-bottom: var(--cq-table-rule-w) solid var(--cq-border); position: relative; }
  .cq-table--stack tbody tr:nth-child(even) td { background: var(--cq-zebra-bg) !important; }
  .cq-table--stack tbody td::before { display: block; }
  .cq-table--stack td[data-area="you"]::before, .cq-table--stack td[data-area="right"]::before {
    content: ""; display: block; position: absolute; inset: 0; z-index: -1; background: var(--cq-row-hover); opacity: 0; }
  .cq-table--stack td[data-area="res"] { display: table-cell; }
  .cq-table--stack td[data-area="base"], .cq-table--stack td[data-area="speed"] { display: table-cell; }
  .cq-table--stack td[data-area="q"] { font-weight: var(--cq-weight-regular); }
  .cq-table--stack tfoot tr { display: table-row; padding: 0; border: 0; }
  .cq-table--stack tfoot td { display: table-cell; padding: var(--cq-cell-py) var(--cq-cell-px); border-top: 1px solid var(--cq-th-rule); height: var(--cq-row-h); }
  .cq-table--stack tfoot td:empty { display: table-cell; }
  .cq-table--stack tfoot td[data-label]::before { content: none; }
}

/* Rank movement: arrow + number + words for screen readers. Colour only reinforces. */
.cq-move { display: inline-flex; align-items: center; gap: var(--cq-space-1); font-family: var(--cq-font-num);
  font-variant-numeric: var(--cq-num); font-weight: var(--cq-weight-strong); min-width: 2.6em; }
.cq-move--up { color: var(--cq-success-ink); }
.cq-move--down { color: var(--cq-error-ink); }
.cq-move--same { color: var(--cq-ink-muted); font-weight: var(--cq-weight-regular); }

/* Correct / wrong: icon + word, colour as reinforcement */
.cq-result { display: inline-flex; align-items: center; gap: var(--cq-space-2); font-weight: var(--cq-weight-strong); white-space: nowrap; }
.cq-result--correct { color: var(--cq-success-ink); }
.cq-result--wrong { color: var(--cq-error-ink); }
.cq-result--partly { color: var(--cq-warning-ink); }
.cq-result__parts { font-family: var(--cq-font-num); font-variant-numeric: var(--cq-num); font-weight: var(--cq-weight-regular); color: var(--cq-ink-muted); margin-left: 0.15em; }

/* ------------------------------------------------------------------ stat tile */
.cq-stat { padding: var(--cq-card-pad); display: grid; gap: var(--cq-space-2); align-content: start; min-width: 0; }
.cq-stat__label { font-size: var(--cq-label-size); font-weight: var(--cq-weight-strong); color: var(--cq-ink-muted);
  text-transform: var(--cq-label-case); letter-spacing: var(--cq-tracking-label); }
.cq-stat__value { font-family: var(--cq-font-stat, var(--cq-font-display)); font-weight: var(--cq-weight-num-display);
  font-size: var(--cq-text-3xl); line-height: var(--cq-lh-tight); letter-spacing: var(--cq-tracking-display);
  font-variant-numeric: var(--cq-num);
  display: flex; align-items: baseline; gap: 0; overflow-wrap: anywhere; }
.cq-stat__value--text { font-size: var(--cq-text-2xl); }
.cq-stat__unit { font-size: 0.5em; color: var(--cq-ink-muted); font-weight: var(--cq-weight-regular); font-family: var(--cq-font-sans); margin-left: 0.3em; }
/* Per cent sits against the figure with no space: 68%, in the same face, one step smaller. */
.cq-stat__unit--pct { margin-left: -0.04em; font-size: 0.7em; color: inherit; font-family: inherit; font-weight: inherit; }
.cq-stat__meta { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); line-height: var(--cq-lh-snug); }

/* ------------------------------------------------------------------ round card */
.cq-round { display: grid; gap: var(--cq-space-3); padding: var(--cq-card-pad); color: inherit; text-decoration: none;
  isolation: isolate; transition: transform var(--cq-dur-base) var(--cq-ease-enter); align-content: start; min-width: 0; }
.cq-round::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--cq-shadow-3);
  opacity: 0; z-index: -1; transition: opacity var(--cq-dur-base) var(--cq-ease-standard); pointer-events: none; }
a.cq-round:focus-visible { transform: translateY(var(--cq-lift)); }
a.cq-round:focus-visible::after { opacity: 1; }
a.cq-round:active { transform: scale(var(--cq-press-scale)); transition-duration: var(--cq-dur-fast); }
a.cq-round:active::after { opacity: 1; }
@media (hover: hover) {
  a.cq-round:hover { transform: translateY(var(--cq-lift)); }
  a.cq-round:hover::after { opacity: 1; }
  a.cq-round:hover .cq-round__go { transform: translateX(var(--cq-space-2)); color: var(--cq-accent-ink); }
}
.cq-round__head { display: flex; align-items: baseline; gap: var(--cq-space-1) var(--cq-space-2); flex-wrap: wrap; padding-right: 1.4em; }
.cq-round__num { font-family: var(--cq-font-num); font-variant-numeric: var(--cq-num); font-weight: var(--cq-weight-strong);
  font-size: var(--cq-text-sm); color: var(--cq-ink-muted); }
.cq-round__title { font-size: var(--cq-text-md); font-weight: var(--cq-weight-strong); line-height: var(--cq-lh-snug); min-width: 0; }
.cq-round__head .cq-badge { order: 5; }
.cq-round__go { position: absolute; top: var(--cq-card-pad); right: calc(var(--cq-card-pad) - 2px); color: var(--cq-ink-muted); display: inline-flex;
  transition: transform var(--cq-dur-base) var(--cq-ease-enter); }
.cq-round__rows { display: grid; gap: var(--cq-space-3); }
.cq-round__row { display: grid; grid-template-columns: 1fr auto; gap: var(--cq-space-1) var(--cq-space-3); align-items: baseline; }
.cq-round__row dt { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); white-space: nowrap; }
.cq-round__row dd { display: contents; }
.cq-round__row .cq-meter { grid-column: 1 / -1; }
.cq-round__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--cq-space-2); padding-top: var(--cq-space-3);
  border-top: 1px solid var(--cq-border); font-weight: var(--cq-weight-strong); }
.cq-round__note { font-size: var(--cq-text-xs); color: var(--cq-ink-muted); line-height: var(--cq-lh-snug); }
.cq-round.is-flagged { border: 2px dashed var(--cq-warning-border); }
.cq-round.is-flagged .cq-round__total { border-top-style: dashed; }
@container cq (min-width: 600px) { .cq-round__title { font-size: var(--cq-text-lg); } .cq-round { gap: var(--cq-space-4); } }

.cq-frac { font-family: var(--cq-font-num); font-variant-numeric: var(--cq-num);
  white-space: nowrap; color: var(--cq-ink-muted); }
.cq-frac b { color: var(--cq-ink); font-weight: var(--cq-weight-strong); font-size: 1.15em; }
.cq-frac__sep { padding: 0 0.15em; }

/* Meter: static bar, width set once by the server (--v from 0 to 1). Never animated in. */
.cq-meter { display: block; position: relative; height: 6px; border-radius: var(--cq-radius-pill); background: var(--cq-meter-track); overflow: hidden; }
.cq-meter__fill { position: absolute; inset: 0; background: var(--cq-meter-fill); transform-origin: left center;
  transform: scaleX(var(--v, 0)); border-radius: inherit; }

/* ------------------------------------------------------------------ Quiz Health gauge */
.cq-gauge { padding: var(--cq-card-pad); display: grid; gap: var(--cq-space-5); align-content: start; }
.cq-gauge__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cq-space-3); }
.cq-gauge__dial { position: relative; display: grid; justify-items: center; }
.cq-gauge__svg { width: 100%; max-width: 240px; height: auto; overflow: visible; }
.cq-gauge__track, .cq-gauge__arc { fill: none; stroke-width: 12; }
.cq-gauge__track { stroke: var(--cq-meter-track); }
.cq-gauge__arc { stroke: var(--cq-meter-fill); stroke-linecap: butt; }
/* Ticks sit on the arc. A surface-coloured halo keeps them visible whatever the fill colour. */
.cq-gauge__tick-halo { stroke: var(--cq-surface); stroke-width: 6; }
.cq-gauge__tick { stroke: var(--cq-ink); stroke-width: 2; }
/* Static needle, drawn once at the score. Never animated. */
.cq-gauge__needle { stroke: var(--cq-ink); stroke-width: 2.5; stroke-linecap: round; }
.cq-gauge__hub { fill: var(--cq-ink); }
.cq-gauge__ticklabel { fill: var(--cq-ink-muted); font-size: 9px; font-family: var(--cq-font-num); }
.cq-gauge__readout { display: grid; justify-items: center; gap: var(--cq-space-1); margin-top: var(--cq-space-1); }
.cq-gauge__value { font-family: var(--cq-font-stat, var(--cq-font-display)); font-weight: var(--cq-weight-num-display); font-size: var(--cq-text-3xl);
  line-height: 1; font-variant-numeric: var(--cq-num); }
.cq-gauge__max { font-size: 0.4em; color: var(--cq-ink-muted); font-family: var(--cq-font-sans); font-weight: var(--cq-weight-regular); }
.cq-gauge__band { display: inline-flex; align-items: center; gap: var(--cq-space-2); font-weight: var(--cq-weight-strong); font-size: var(--cq-text-sm); }
.cq-gauge__formula { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); text-align: center; }
/* Band key: each band with its own icon and word. Colour is never the cue. */
.cq-gauge__bands { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cq-space-2) var(--cq-space-4); font-size: var(--cq-text-sm); margin-top: calc(-1 * var(--cq-space-3)); }
.cq-gauge__bands li { display: inline-flex; align-items: center; gap: var(--cq-space-2); white-space: nowrap; }
.cq-gauge__bands .cq-icon { color: var(--cq-ink-muted); }
.cq-gauge__subs { display: grid; gap: var(--cq-space-4); }
/* Sub-score card: name with its info tip, score with its band ("63 · Fair"), the bar, then at most two
   lines: what drives the score and what full marks looks like. */
.cq-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--cq-space-1) var(--cq-space-3); align-items: baseline; }
.cq-sub__label { font-weight: var(--cq-weight-strong); display: flex; align-items: center; min-height: 24px; }
.cq-sub__val { font-family: var(--cq-font-num); font-variant-numeric: var(--cq-num); font-weight: var(--cq-weight-strong); }
.cq-sub .cq-meter { grid-column: 1 / -1; }
.cq-sub__band { font-family: var(--cq-font-sans); font-weight: var(--cq-weight-strong); }
.cq-sub .cq-meter { margin: var(--cq-space-1) 0; }
.cq-sub__note { grid-column: 1 / -1; font-size: var(--cq-text-sm); color: var(--cq-ink-muted); line-height: var(--cq-lh-snug); }

/* ------------------------------------------------------------------ buttons */
.cq-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cq-space-3);
  min-height: var(--cq-control-h); padding: 0 var(--cq-space-5);
  border: var(--cq-border-w) solid transparent; border-radius: var(--cq-radius-md);
  font-weight: var(--cq-weight-strong); font-size: var(--cq-text-md); line-height: 1.1; white-space: nowrap;
  text-decoration: none; cursor: pointer; user-select: none;
  transition: transform var(--cq-dur-fast) var(--cq-ease-standard);
}
.cq-btn::before { content: ""; position: absolute; inset: calc(-1 * var(--cq-border-w)); border-radius: inherit; z-index: -1;
  background: var(--cq-overlay-hover); opacity: 0; transition: opacity var(--cq-dur-base) var(--cq-ease-standard); }
.cq-btn:active { transform: scale(var(--cq-press-scale)); }
.cq-btn:active::before { opacity: 1; background: var(--cq-overlay-press); }
@media (hover: hover) { .cq-btn:hover::before { opacity: 1; } }
.cq-btn--primary { background: var(--cq-accent); color: var(--cq-on-accent); }
.cq-btn--primary::before, .cq-btn--danger::before { background: var(--cq-accent-overlay-hover); }
.cq-btn--secondary { background: var(--cq-surface); color: var(--cq-ink); border-color: var(--cq-border-strong); }
.cq-btn--danger { background: var(--cq-danger); color: var(--cq-on-danger); }
.cq-btn--ghost { background: transparent; color: var(--cq-accent-ink); padding: 0 var(--cq-space-4); }
.cq-btn--sm { min-height: var(--cq-control-sm-h); padding: 0 var(--cq-space-4); font-size: var(--cq-text-sm); }
.cq-btn--block { width: 100%; }
.cq-btn[disabled], .cq-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.cq-btn[disabled]::before { opacity: 0; }

/* Segmented control: switches a view in place (chart mode). Pressed state is fill + weight. */
.cq-seg { display: inline-flex; justify-self: stretch; padding: 3px; gap: 3px; background: var(--cq-surface-alt); border-radius: calc(var(--cq-radius-md) + 3px);
  max-width: 100%; }
.cq-seg__btn { position: relative; isolation: isolate; flex: 1 1 auto; min-height: var(--cq-control-sm-h); padding: 0 var(--cq-space-4);
  border: 0; border-radius: var(--cq-radius-md); background: transparent; color: var(--cq-ink-muted); font-size: var(--cq-text-sm);
  cursor: pointer; white-space: nowrap; transition: transform var(--cq-dur-fast) var(--cq-ease-standard); }
.cq-seg__btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--cq-seg-on-bg);
  opacity: 0; transform: scale(0.92); transition: opacity var(--cq-dur-base) var(--cq-ease-standard), transform var(--cq-dur-slow) var(--cq-ease-enter); }
.cq-seg__btn[aria-pressed="true"] { color: var(--cq-seg-on-ink); font-weight: var(--cq-weight-strong); }
.cq-seg__btn[aria-pressed="true"]::before { opacity: 1; transform: none; }
.cq-seg__btn:active { transform: scale(var(--cq-press-scale)); }

/* ------------------------------------------------------------------ inputs */
.cq-field { display: grid; gap: var(--cq-space-2); align-content: start; min-width: 0; }
.cq-label { font-size: var(--cq-text-sm); font-weight: var(--cq-weight-strong); color: var(--cq-ink); }
.cq-field__hint { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); }
.cq-field__error { display: none; align-items: center; gap: var(--cq-space-2); font-size: var(--cq-text-sm);
  color: var(--cq-error-ink); font-weight: var(--cq-weight-strong); }
.cq-field.is-invalid .cq-field__error { display: flex; }
/* 16px minimum stops iOS Safari zooming the page when a field gets focus. */
.cq-input, .cq-select select {
  width: 100%; min-height: var(--cq-control-h); padding: 0 var(--cq-space-4);
  background: var(--cq-surface); color: var(--cq-ink);
  border: var(--cq-border-w) solid var(--cq-border-strong); border-radius: var(--cq-radius-md);
  font-size: max(16px, var(--cq-text-md));
}
.cq-input::placeholder { color: var(--cq-ink-muted); opacity: 1; }
.cq-input:focus-visible, .cq-select select:focus-visible { outline-offset: 0; }
.cq-field.is-invalid .cq-input { border: 2px solid var(--cq-error-border); }
.cq-input--code { font-family: var(--cq-font-num); letter-spacing: 0.2em; text-transform: uppercase; max-width: 16ch; }
.cq-input-icon { position: relative; display: block; }
.cq-input-icon > .cq-icon { position: absolute; left: var(--cq-space-4); top: 50%; transform: translateY(-50%); color: var(--cq-ink-muted); pointer-events: none; }
.cq-input-icon > .cq-input { padding-left: calc(var(--cq-space-4) * 2 + 1em); }

.cq-select { position: relative; display: block; min-width: 0; }
.cq-select select { appearance: none; -webkit-appearance: none; padding-right: calc(var(--cq-space-4) * 2 + 1em); cursor: pointer; }
.cq-select > .cq-icon { position: absolute; right: var(--cq-space-4); top: 50%; margin-top: -0.5em; pointer-events: none;
  color: var(--cq-ink-muted); transition: transform var(--cq-dur-base) var(--cq-ease-enter); }
@media (hover: hover) { .cq-select:hover > .cq-icon { transform: translateY(2px); } }

/* Checkbox rows inside the filter menu: full-width touch targets */
.cq-check { display: flex; align-items: center; gap: var(--cq-space-4); min-height: var(--cq-control-h);
  padding: 0 var(--cq-space-4); cursor: pointer; position: relative; isolation: isolate; border-radius: var(--cq-radius-sm); }
.cq-check::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--cq-overlay-hover);
  opacity: 0; transition: opacity var(--cq-dur-fast) var(--cq-ease-standard); }
.cq-check:active::before { opacity: 1; }
@media (hover: hover) { .cq-check:hover::before { opacity: 1; } }
.cq-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--cq-accent); flex: none; }

/* ------------------------------------------------------------------ filter bar */
/* Phone: two filters per row, labels hidden visually because each value names itself
   ("Week 10", "All topics"). The search field takes a full row. */
.cq-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--cq-space-3);
  padding: var(--cq-space-3); background: var(--cq-surface-alt); border-radius: var(--cq-radius-lg); }
.cq-filterbar > .cq-field { flex: 1 1 calc(50% - var(--cq-space-3)); min-width: 0; }
.cq-filterbar > .cq-field--grow { flex-basis: 100%; }
.cq-filterbar > .cq-field > .cq-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cq-filterbar .cq-menu > summary { width: 100%; justify-content: space-between; padding: 0 var(--cq-space-3); gap: var(--cq-space-2); min-width: 0; overflow: hidden; font-size: min(var(--cq-text-md), 15px); }
.cq-filterbar .cq-select select { padding-left: var(--cq-space-3); padding-right: calc(var(--cq-space-3) * 2 + 1em); }
.cq-filterbar .cq-select > .cq-icon { right: var(--cq-space-3); }
.cq-filterbar__end { flex-basis: 100%; display: flex; align-items: center; gap: var(--cq-space-4); }
.cq-filterbar__count { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); }
.cq-chips { display: flex; flex-wrap: wrap; gap: var(--cq-space-2); flex-basis: 100%; }
@container cq (min-width: 600px) {
  .cq-filterbar { gap: var(--cq-space-4); padding: var(--cq-space-4) var(--cq-card-pad); }
  .cq-filterbar > .cq-field { flex: 1 1 160px; max-width: 240px; }
  .cq-filterbar > .cq-field--grow { flex: 2 1 220px; max-width: 360px; }
  .cq-filterbar > .cq-field > .cq-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .cq-filterbar .cq-menu > summary { width: auto; padding: 0 var(--cq-space-5); }
  .cq-filterbar .cq-select select { padding-left: var(--cq-space-4); padding-right: calc(var(--cq-space-4) * 2 + 1em); }
  .cq-filterbar .cq-select > .cq-icon { right: var(--cq-space-4); }
  .cq-filterbar__end { flex-basis: auto; margin-left: auto; min-height: var(--cq-control-h); }
}

/* ------------------------------------------------------------------ dropdown menu, bottom sheet on phones */
.cq-menu { position: relative; }
.cq-menu[open] { z-index: 60; }
.cq-menu > summary { list-style: none; position: relative; z-index: 1; }
.cq-menu > summary::-webkit-details-marker { display: none; }
.cq-menu > summary .cq-menu__chev { transition: transform var(--cq-dur-base) var(--cq-ease-enter); }
.cq-menu[open] > summary .cq-menu__chev { transform: rotate(180deg); }
/* Tapping the scrim is tapping the summary, so it closes the sheet with no script. */
.cq-menu[open] > summary:active { transform: none; }  /* a transform would shrink the fixed scrim to the button */
.cq-menu[open] > summary::after { content: ""; position: fixed; inset: 0; background: var(--cq-scrim); cursor: default;
  animation: cq-fade var(--cq-dur-base) var(--cq-ease-standard) both; }
.cq-menu__panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; max-height: 75%; overflow: auto;
  display: grid; gap: var(--cq-space-1); padding: var(--cq-space-3) var(--cq-space-3) calc(var(--cq-space-4) + env(safe-area-inset-bottom, 0px));
  background: var(--cq-surface); border-radius: var(--cq-radius-lg) var(--cq-radius-lg) 0 0; box-shadow: var(--cq-shadow-2);
}
.cq-menu__panel::before { content: ""; justify-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--cq-border-strong);
  margin-bottom: var(--cq-space-2); }
.cq-menu__title { font-weight: var(--cq-weight-strong); padding: 0 var(--cq-space-4) var(--cq-space-2); }
.cq-menu[open] > .cq-menu__panel { animation: cq-sheet-in var(--cq-dur-slow) var(--cq-ease-enter) both; }
.cq-menu__foot { display: flex; justify-content: flex-end; gap: var(--cq-space-3); padding-top: var(--cq-space-3);
  margin-top: var(--cq-space-2); border-top: 1px solid var(--cq-border); }
.cq-menu__foot > .cq-btn { flex: 1 1 0; }
@container cq (min-width: 600px) {
  .cq-menu[open] > summary:active { transform: none; }  /* a transform would shrink the fixed scrim to the button */
.cq-menu[open] > summary::after { background: transparent; }
  .cq-menu__panel { position: absolute; left: 0; right: auto; bottom: auto; top: calc(100% + var(--cq-space-2)); min-width: 240px; max-height: none;
    padding: var(--cq-space-3); border: 1px solid var(--cq-border-strong); border-radius: var(--cq-radius-md); transform-origin: top left; }
  .cq-menu__panel::before { display: none; }
  .cq-menu__title { display: none; }
  .cq-menu[open] > .cq-menu__panel { animation-name: cq-menu-in; }
  .cq-menu__foot > .cq-btn { flex: none; }
}
@keyframes cq-menu-in {
  from { opacity: 0; transform: translateY(calc(-1 * var(--cq-enter-shift))) scale(var(--cq-menu-scale)); }
  to { opacity: 1; transform: none; }
}
@keyframes cq-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes cq-fade { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ tabs */
/* Equal-width tabs that always fit: no sideways scroll and no fade. Under 480px every tab gets an
   equal share of the width, labels drop to --cq-text-sm and counts hide, so up to five tabs with
   labels of about 7 characters fit at 360px. From 480px tabs size to their labels. */
.cq-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--cq-space-1); padding: var(--cq-tabs-pad);
  background: var(--cq-tabs-bg); border-radius: var(--cq-tab-radius); box-shadow: inset 0 calc(-1 * var(--cq-tab-rail-w)) 0 var(--cq-border); width: 100%; }
.cq-tab { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--cq-space-2); min-width: 0;
  min-height: var(--cq-control-h); padding: 0 var(--cq-space-1); color: var(--cq-ink-muted); text-decoration: none; white-space: nowrap;
  border-radius: var(--cq-tab-radius); font-size: var(--cq-text-sm); }
.cq-tab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -2; background: var(--cq-overlay-hover);
  opacity: 0; transition: opacity var(--cq-dur-base) var(--cq-ease-standard); }
.cq-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--cq-tab-ind-h); z-index: -1;
  background: var(--cq-tab-ind-bg); border-radius: inherit; transform: scaleX(0); opacity: 0; transform-origin: center;
  transition: transform var(--cq-dur-slow) var(--cq-ease-enter), opacity var(--cq-dur-base) var(--cq-ease-standard); }
.cq-tab:active::before { opacity: 1; }
@media (hover: hover) { .cq-tab:hover::before { opacity: 1; } }
.cq-tab[aria-current="page"], .cq-tab[aria-selected="true"] { color: var(--cq-tab-current-ink); font-weight: var(--cq-weight-strong); }
.cq-tab[aria-current="page"]::after, .cq-tab[aria-selected="true"]::after { transform: scaleX(1); opacity: 1; }
.cq-tab[aria-current="page"]::before { opacity: 0; }
.cq-tab__count { display: none; font-family: var(--cq-font-num); font-variant-numeric: var(--cq-num); font-size: var(--cq-text-sm); color: var(--cq-ink-muted); font-weight: var(--cq-weight-regular); }
@container cq (min-width: 480px) {
  .cq-tabs { width: max-content; max-width: 100%; grid-auto-columns: auto; }
  .cq-tab { padding: 0 var(--cq-space-4); font-size: var(--cq-text-md); }
  .cq-tab__count { display: inline; }
}
@container cq (min-width: 600px) { .cq-tab { padding: 0 var(--cq-space-5); } }

/* ------------------------------------------------------------------ badges and chips */
.cq-badge { display: inline-flex; align-items: center; gap: var(--cq-space-1); padding: 0.15em 0.6em; min-height: 1.6em;
  border: 1px solid var(--cq-border-strong); border-radius: var(--cq-radius-badge); background: var(--cq-surface);
  color: var(--cq-ink); font-size: var(--cq-text-xs); font-weight: var(--cq-weight-strong); line-height: 1.2; white-space: nowrap; }
.cq-badge--accent { background: var(--cq-accent-surface); border-color: var(--cq-accent); color: var(--cq-accent-ink); }
.cq-badge--success { background: var(--cq-success-surface); border-color: var(--cq-success-border); color: var(--cq-success-ink); }
.cq-badge--warning { background: var(--cq-warning-surface); border-color: var(--cq-warning-border); border-style: dashed; color: var(--cq-warning-ink); }
.cq-badge--error { background: var(--cq-error-surface); border-color: var(--cq-error-border); color: var(--cq-error-ink); }
.cq-badge--info { background: var(--cq-info-surface); border-color: var(--cq-info-border); color: var(--cq-info-ink); }

.cq-chip { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: var(--cq-space-2);
  min-height: var(--cq-control-sm-h); padding: 0 var(--cq-space-3) 0 var(--cq-space-4);
  border: 1px solid var(--cq-accent); border-radius: var(--cq-radius-pill); background: var(--cq-accent-surface);
  color: var(--cq-ink); font-size: var(--cq-text-sm); text-decoration: none; white-space: nowrap; transition: transform var(--cq-dur-fast) var(--cq-ease-standard); }
.cq-chip::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--cq-overlay-hover);
  opacity: 0; transition: opacity var(--cq-dur-base) var(--cq-ease-standard); }
.cq-chip:active { transform: scale(var(--cq-press-scale)); }
.cq-chip:active::before { opacity: 1; }
@media (hover: hover) { .cq-chip:hover::before { opacity: 1; } }
.cq-chip .cq-icon { color: var(--cq-ink-muted); }

/* ------------------------------------------------------------------ inline notice */
.cq-notice { display: grid; grid-template-columns: auto 1fr; gap: var(--cq-space-2) var(--cq-space-3); align-items: start;
  padding: var(--cq-space-4); border-radius: var(--cq-radius-md); border: 1px solid; color: var(--cq-ink); font-size: var(--cq-text-sm); }
.cq-notice__icon { font-size: 20px; margin-top: 1px; }
.cq-notice__title { font-weight: var(--cq-weight-strong); font-size: var(--cq-text-md); line-height: var(--cq-lh-snug); }
.cq-notice__body { display: grid; gap: var(--cq-space-1); min-width: 0; }
.cq-notice__body p:not(.cq-notice__title) { color: var(--cq-ink); }
.cq-notice__action { grid-column: 2; justify-self: start; min-height: 32px; display: inline-flex; align-items: center; }
.cq-notice--info { background: var(--cq-info-surface); border-color: var(--cq-info-border); }
.cq-notice--info .cq-notice__icon, .cq-notice--info .cq-notice__title { color: var(--cq-info-ink); }
.cq-notice--success { background: var(--cq-success-surface); border-color: var(--cq-success-border); }
.cq-notice--success .cq-notice__icon, .cq-notice--success .cq-notice__title { color: var(--cq-success-ink); }
.cq-notice--warning { background: var(--cq-warning-surface); border: 2px dashed var(--cq-warning-border); }
.cq-notice--warning .cq-notice__icon, .cq-notice--warning .cq-notice__title { color: var(--cq-warning-ink); }
.cq-notice--error { background: var(--cq-error-surface); border: 2px solid var(--cq-error-border); }
.cq-notice--error .cq-notice__icon, .cq-notice--error .cq-notice__title { color: var(--cq-error-ink); }
@container cq (min-width: 600px) {
  .cq-notice { grid-template-columns: auto 1fr auto; gap: var(--cq-space-2) var(--cq-space-4); padding: var(--cq-space-4) var(--cq-card-pad);
    font-size: var(--cq-text-md); }
  .cq-notice__action { grid-column: auto; align-self: center; white-space: nowrap; }
}

/* ------------------------------------------------------------------ chart container */
.cq-chart { padding: var(--cq-card-pad); display: grid; gap: var(--cq-space-4); min-width: 0; }
.cq-chart__head { display: grid; gap: var(--cq-space-3); }
.cq-chart__titles { display: grid; gap: var(--cq-space-1); }
.cq-chart__title { font-family: var(--cq-font-display); font-weight: var(--cq-weight-display); font-size: var(--cq-text-xl);
  letter-spacing: var(--cq-tracking-display); line-height: var(--cq-lh-snug); }
.cq-chart__sub { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); }
.cq-chart__body { display: grid; gap: var(--cq-space-4); min-width: 0; }
.cq-chart__canvas { position: relative; height: 280px; min-width: 0; touch-action: pan-y; }
.cq-chart__canvas canvas { display: block; }
.cq-chart__canvas canvas:focus-visible { outline: var(--cq-focus-w) solid var(--cq-focus); outline-offset: 2px; }
.cq-hl-1 { background: var(--cq-chart-hl-1); } .cq-hl-2 { background: var(--cq-chart-hl-2); } .cq-hl-3 { background: var(--cq-chart-hl-3); }
.cq-hl-4 { background: var(--cq-chart-hl-4); } .cq-hl-5 { background: var(--cq-chart-hl-5); }
.cq-chart__data > summary { cursor: pointer; font-size: var(--cq-text-sm); color: var(--cq-accent-ink); font-weight: var(--cq-weight-strong);
  width: max-content; min-height: 32px; display: flex; align-items: center; gap: var(--cq-space-2); }
.cq-chart__data[open] > summary { margin-bottom: var(--cq-space-3); }

/* Readout: every team's score at the selected round. Replaces a floating tooltip so a
   finger never covers what it is reading. Rendered by the server for the last round,
   then updated by cq-chart-theme.js as the reader taps, drags or arrows through rounds. */
.cq-readout { display: grid; gap: var(--cq-space-3); align-content: start; min-width: 0;
  padding-top: var(--cq-space-4); border-top: 1px solid var(--cq-border); }
/* Heading: one line, the selected point's name, a link when the point has its own page. */
.cq-readout__title { font-weight: var(--cq-weight-strong); font-size: var(--cq-text-md); overflow-wrap: anywhere; min-width: 0; }
.cq-readout__title .cq-link { display: inline; }
/* Detail slot: one or two lines about the selected point, under the heading. */
.cq-readout__detail { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); line-height: var(--cq-lh-snug); margin-top: calc(-1 * var(--cq-space-2)); }
/* Several lines of detail: a list, one fact per line, each wrapping as needed. */
ul.cq-readout__detail { display: grid; gap: 2px; list-style: none; padding: 0; }
.cq-readout__list { columns: 1; column-gap: var(--cq-space-6); font-size: var(--cq-text-sm); }
@container cq (min-width: 560px) { .cq-readout__list { columns: 2; } }
/* Legend rows are buttons: tap to highlight a team (up to five). */
.cq-readout__list li { break-inside: avoid; }
.cq-readout__row { position: relative; isolation: isolate; width: 100%; display: grid; grid-template-columns: 1.7em 16px minmax(0, 1fr) auto;
  gap: var(--cq-space-2); align-items: center; min-height: 36px; padding: 0 var(--cq-space-2); border: 0; border-radius: var(--cq-radius-sm);
  background: none; color: var(--cq-ink-muted); font: inherit; font-size: var(--cq-text-sm); text-align: left; cursor: pointer;
  font-variant-numeric: var(--cq-num); transition: transform var(--cq-dur-fast) var(--cq-ease-standard); }
.cq-readout__row::before { content: ""; position: absolute; inset: 2px 0; border-radius: inherit; z-index: -1; background: var(--cq-overlay-hover);
  opacity: 0; transition: opacity var(--cq-dur-fast) var(--cq-ease-standard); }
.cq-readout__row:active { transform: scale(var(--cq-press-scale)); }
.cq-readout__row:active::before { opacity: 1; }
@media (hover: hover) { .cq-readout__row:hover::before { opacity: 1; } }
.cq-readout__row.is-hl { color: var(--cq-ink); font-weight: var(--cq-weight-strong); }
.cq-readout__row.is-you .cq-readout__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cq-readout__rank { text-align: right; }
.cq-readout__name { overflow-wrap: anywhere; }
.cq-readout__val { text-align: right; }
/* Key: a grey hairline for context teams, a thick stroke in the highlight colour for highlighted ones. */
.cq-readout__key { height: 2px; border-radius: 2px; background: var(--cq-chart-context); }
.cq-readout__key[class*="cq-hl-"] { height: 4px; }
.cq-readout__key.cq-hl-1 { background: var(--cq-chart-hl-1); } .cq-readout__key.cq-hl-2 { background: var(--cq-chart-hl-2); }
.cq-readout__key.cq-hl-3 { background: var(--cq-chart-hl-3); } .cq-readout__key.cq-hl-4 { background: var(--cq-chart-hl-4); }
.cq-readout__key.cq-hl-5 { background: var(--cq-chart-hl-5); }
.cq-readout__more { font-size: var(--cq-text-xs); color: var(--cq-ink-muted); }
/* Several controls in a chart header wrap together as one group. */
.cq-chart__controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--cq-space-3); min-width: 0; }
.cq-chart__controls > .cq-field { flex: 1 1 10em; min-width: 0; }
.cq-chart__controls > .cq-seg { flex: 0 0 auto; }
@container cq (min-width: 600px) {
  .cq-chart__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .cq-seg { justify-self: end; }
  .cq-chart__controls { flex-wrap: nowrap; justify-content: flex-end; justify-self: end; }
  .cq-chart__controls > .cq-field { flex: 0 0 11em; }
}
@container cq (min-width: 960px) {
  .cq-chart__canvas { height: 320px; }
  .cq-chart__body { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .cq-readout { padding-top: 0; padding-left: var(--cq-space-5); border-top: 0; border-left: 1px solid var(--cq-border); }
  .cq-readout__list { columns: 1; }
}


/* ================================================================== feedback and state */

/* Where am I: a back path above the page title. */
.cq-back { display: inline-flex; align-items: center; gap: var(--cq-space-2); min-height: 32px; margin-left: calc(-1 * var(--cq-space-2));
  padding: 0 var(--cq-space-2); border-radius: var(--cq-radius-sm); color: var(--cq-accent-ink); text-decoration: none;
  font-size: var(--cq-text-sm); font-weight: var(--cq-weight-strong); position: relative; isolation: isolate; width: max-content; max-width: 100%; }
.cq-back span { overflow-wrap: anywhere; }
.cq-back .cq-icon { transition: transform var(--cq-dur-base) var(--cq-ease-enter); }
.cq-back::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--cq-overlay-hover);
  opacity: 0; transition: opacity var(--cq-dur-fast) var(--cq-ease-standard); }
.cq-back:active::before { opacity: 1; }
@media (hover: hover) { .cq-back:hover::before { opacity: 1; } .cq-back:hover .cq-icon { transform: translateX(-3px); } }

/* What's happening: a pending button keeps its size, shows a spinner and says what it's doing. */
.cq-btn[aria-busy="true"] { cursor: progress; opacity: 0.85; transform: none; }
.cq-btn[aria-busy="true"]::before { opacity: 0; }
.cq-spin { animation: cq-spin 900ms linear infinite; }
@keyframes cq-spin { to { transform: rotate(360deg); } }

/* Loading skeleton: shapes of the content to come, pulsing gently in opacity. */
.cq-skeleton { gap: var(--cq-space-4); }
.cq-skel { display: block; height: 12px; border-radius: var(--cq-radius-sm); background: var(--cq-meter-track);
  animation: cq-pulse 1400ms var(--cq-ease-standard) infinite alternate; }
.cq-skel--title { width: 45%; height: 18px; }
.cq-skel-row { display: grid; grid-template-columns: 2em 1fr 3em; gap: var(--cq-space-4); align-items: center; }
.cq-skel--num { width: 100%; }
.cq-skel-row:nth-child(odd) .cq-skel--text { width: 70%; }
@keyframes cq-pulse { from { opacity: 1; } to { opacity: 0.45; } }

/* Empty state: says why it's empty and what happens next. */
.cq-empty { display: grid; justify-items: center; gap: var(--cq-space-2); padding: var(--cq-space-7) var(--cq-card-pad); text-align: center;
  background: var(--cq-surface); border: 1px dashed var(--cq-border-strong); border-radius: var(--cq-radius-lg); }
.cq-empty__icon { font-size: 28px; color: var(--cq-ink-muted); margin-bottom: var(--cq-space-2); }
.cq-empty__title { font-weight: var(--cq-weight-strong); font-size: var(--cq-text-lg); }
.cq-empty__why { color: var(--cq-ink-muted); font-size: var(--cq-text-sm); max-width: 36ch; margin-bottom: var(--cq-space-3) !important; }
.cq-empty--inline { padding: var(--cq-space-6) var(--cq-card-pad); }

/* Did it work: a toast confirms an action. It stays at least 5 seconds, has a close button and,
   where the action can be reversed, an Undo. On phones it sits above the bottom bar. */
.cq-toasts { position: fixed; left: var(--cq-page-pad); right: var(--cq-page-pad); z-index: 70; display: grid; gap: var(--cq-space-2);
  bottom: calc(var(--cq-nav-h) + var(--cq-space-4) + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.cq-toasts > * { pointer-events: auto; animation: cq-toast-in var(--cq-dur-slow) var(--cq-ease-enter) both; }
@container cq (min-width: 720px) { .cq-toasts { left: auto; right: var(--cq-page-pad-wide); bottom: var(--cq-space-6); width: 380px; } }
.cq-toast { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--cq-space-3);
  min-height: 52px; padding: var(--cq-space-2) var(--cq-space-2) var(--cq-space-2) var(--cq-space-4);
  background: var(--cq-surface); color: var(--cq-ink); border: 1px solid var(--cq-border-strong); border-radius: var(--cq-radius-md);
  box-shadow: var(--cq-shadow-2); font-size: var(--cq-text-sm); }
.cq-toast__icon { font-size: 20px; color: var(--cq-success-ink); }
/* Info toast: news the person didn't cause, such as results being published. */
.cq-toast--info .cq-toast__icon { color: var(--cq-info-ink); }
.cq-toast__msg { font-weight: var(--cq-weight-strong); min-width: 0; }
.cq-toast__close { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--cq-radius-sm);
  background: none; color: var(--cq-ink-muted); cursor: pointer; font-size: 18px; }
.cq-toast__close:active { background: var(--cq-overlay-press); }
@keyframes cq-toast-in { from { opacity: 0; transform: translateY(var(--cq-enter-shift)); } to { opacity: 1; transform: none; } }

/* ================================================================== account menu */
/* Stays in the top bar on phones: a compact button with the user or team name. */
.cq-account { position: relative; min-width: 0; }
.cq-account > summary { list-style: none; }
.cq-account > summary::-webkit-details-marker { display: none; }
.cq-account__btn { display: inline-flex; align-items: center; gap: var(--cq-space-2); min-height: 40px; max-width: min(46vw, 260px);
  padding: 0 var(--cq-space-3); border: 1px solid var(--cq-border-strong); border-radius: var(--cq-radius-pill); background: var(--cq-surface);
  color: var(--cq-ink); font-size: var(--cq-text-sm); font-weight: var(--cq-weight-strong); cursor: pointer; position: relative; isolation: isolate;
  transition: transform var(--cq-dur-fast) var(--cq-ease-standard); }
.cq-account__btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--cq-overlay-hover);
  opacity: 0; transition: opacity var(--cq-dur-base) var(--cq-ease-standard); }
.cq-account__btn:active { transform: scale(var(--cq-press-scale)); }
.cq-account[open] > .cq-account__btn:active { transform: none; }
@media (hover: hover) { .cq-account__btn:hover::before { opacity: 1; } }
.cq-account__name { display: none; overflow-wrap: anywhere; min-width: 0; }
/* Under 480px the account button is its icon and chevron; the name is in its label and the panel. */
@container cq (min-width: 480px) { .cq-account__name { display: inline; } }
.cq-account__chev { transition: transform var(--cq-dur-base) var(--cq-ease-enter); color: var(--cq-ink-muted); }
.cq-account[open] .cq-account__chev { transform: rotate(180deg); }
.cq-account__panel { position: absolute; right: 0; top: calc(100% + var(--cq-space-2)); z-index: 80; width: max-content; min-width: 220px;
  max-width: calc(100vw - 2 * var(--cq-page-pad)); display: grid; padding: var(--cq-space-2);
  background: var(--cq-surface); border: 1px solid var(--cq-border-strong); border-radius: var(--cq-radius-md); box-shadow: var(--cq-shadow-2);
  transform-origin: top right; animation: cq-menu-in var(--cq-dur-slow) var(--cq-ease-enter) both; }
.cq-account__who { padding: var(--cq-space-3) var(--cq-space-3) var(--cq-space-3); font-size: var(--cq-text-sm); color: var(--cq-ink-muted);
  border-bottom: 1px solid var(--cq-border); margin-bottom: var(--cq-space-2) !important; overflow-wrap: anywhere; }
.cq-account__who strong { color: var(--cq-ink); display: block; }
.cq-account__item { display: flex; align-items: center; gap: var(--cq-space-3); min-height: 44px; padding: 0 var(--cq-space-3);
  border-radius: var(--cq-radius-sm); color: var(--cq-ink); text-decoration: none; position: relative; isolation: isolate; }
.cq-account__item::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--cq-overlay-hover);
  opacity: 0; transition: opacity var(--cq-dur-fast) var(--cq-ease-standard); }
.cq-account__item:active::before { opacity: 1; }
@media (hover: hover) { .cq-account__item:hover::before { opacity: 1; } }
.cq-account__form { margin: 0; }
button.cq-account__item { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.cq-account__item .cq-icon { color: var(--cq-ink-muted); font-size: 18px; }

/* ================================================================== collapsible section */
.cq-collapse { background: var(--cq-card-bg); border: var(--cq-card-border-w) solid var(--cq-border); border-radius: var(--cq-radius-lg);
  box-shadow: var(--cq-shadow-1); position: relative; }
.cq-collapse::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--cq-card-rule-w); background: var(--cq-ink);
  border-radius: var(--cq-radius-lg) var(--cq-radius-lg) 0 0; pointer-events: none; }
.cq-collapse > summary { list-style: none; }
.cq-collapse > summary::-webkit-details-marker { display: none; }
.cq-collapse__head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "title score chev" "verdict verdict verdict" "flags flags flags";
  gap: var(--cq-space-1) var(--cq-space-3); align-items: baseline; padding: var(--cq-card-pad); cursor: pointer; position: relative; isolation: isolate;
  border-radius: inherit; min-height: 56px; }
.cq-collapse__head::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--cq-overlay-hover);
  opacity: 0; transition: opacity var(--cq-dur-fast) var(--cq-ease-standard); }
.cq-collapse__head:active::before { opacity: 1; }
@media (hover: hover) { .cq-collapse__head:hover::before { opacity: 1; } }
.cq-collapse__title { grid-area: title; font-weight: var(--cq-weight-strong); font-size: var(--cq-text-lg); }
.cq-collapse__score { grid-area: score; font-family: var(--cq-font-num); font-variant-numeric: var(--cq-num); font-weight: var(--cq-weight-strong); }
.cq-collapse__verdict { grid-area: verdict; font-size: var(--cq-text-sm); color: var(--cq-ink-muted); }
.cq-collapse__flags { grid-area: flags; display: inline-flex; align-items: center; gap: var(--cq-space-1); width: max-content; margin-top: var(--cq-space-1);
  padding: 0.1em 0.55em; border: 1px dashed var(--cq-warning-border); border-radius: var(--cq-radius-badge); background: var(--cq-warning-surface);
  color: var(--cq-warning-ink); font-size: var(--cq-text-xs); font-weight: var(--cq-weight-strong); }
.cq-collapse__chev { grid-area: chev; align-self: center; color: var(--cq-ink-muted); transition: transform var(--cq-dur-base) var(--cq-ease-enter); }
.cq-collapse[open] .cq-collapse__chev { transform: rotate(180deg); }
.cq-collapse__body { padding: 0 var(--cq-card-pad) var(--cq-card-pad); display: grid; gap: var(--cq-space-4); }
.cq-collapse[open] > .cq-collapse__body { animation: cq-fade var(--cq-dur-base) var(--cq-ease-standard) both; }
@container cq (min-width: 600px) {
  .cq-collapse__head { grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto auto auto; grid-template-areas: "title verdict flags score chev"; align-items: center; }
  .cq-collapse__flags { margin-top: 0; }
}

/* ================================================================== tappable list row */
.cq-list { display: grid; background: var(--cq-card-bg); border: var(--cq-card-border-w) solid var(--cq-border); border-radius: var(--cq-radius-lg);
  box-shadow: var(--cq-shadow-1); overflow: hidden; }
.cq-list > li + li { border-top: 1px solid var(--cq-border); }
.cq-listrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--cq-space-4); min-height: 56px;
  padding: var(--cq-space-3) var(--cq-card-pad); color: var(--cq-ink); text-decoration: none; position: relative; isolation: isolate; }
.cq-listrow::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cq-row-hover); opacity: 0;
  transition: opacity var(--cq-dur-fast) var(--cq-ease-standard); }
.cq-listrow:active::before { opacity: 1; }
@media (hover: hover) { .cq-listrow:hover::before { opacity: 1; } .cq-listrow:hover .cq-listrow__chev { transform: translateX(3px); } }
.cq-listrow__label { display: grid; font-weight: var(--cq-weight-strong); min-width: 0; }
.cq-listrow__sub { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); font-weight: var(--cq-weight-regular); }
.cq-listrow__fig { font-family: var(--cq-font-num); font-variant-numeric: var(--cq-num); color: var(--cq-ink-muted); text-align: right; white-space: nowrap; }
.cq-listrow__chev { color: var(--cq-ink-muted); transition: transform var(--cq-dur-base) var(--cq-ease-enter); }

/* ================================================================== live table filter */
.cq-livefilter { display: grid; gap: var(--cq-space-3); }
.cq-livefilter__count { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); }
.cq-input-clear > .cq-input { padding-right: calc(44px + var(--cq-space-2)); }
.cq-input-clear > .cq-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.cq-clear { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center;
  width: 40px; height: 40px; border: 0; border-radius: var(--cq-radius-sm); background: none; color: var(--cq-ink-muted); cursor: pointer; font-size: 18px; }
.cq-clear:active { background: var(--cq-overlay-press); }
.cq-livefilter [hidden] { display: none !important; }

/* ================================================================== stat card with pinned Best / Worst rows */
/* Every card spans five rows of the parent grid and uses them as a subgrid: label, value, description,
   range strip, then the divider with Best and Worst. So the divider and both rows sit at the
   same height in every card of a row, whatever the description's length. */
.cq-grid--cards { align-items: stretch; --cq-grid-min: 220px; row-gap: 0; }
.cq-statcard { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--cq-space-2); align-content: start; margin-bottom: var(--cq-gap-tight); }
.cq-statcard > .cq-stat__label { grid-row: 1; }
.cq-statcard > .cq-stat__value { grid-row: 2; }
.cq-statcard > .cq-statcard__desc { grid-row: 3; }
.cq-statcard > .cq-range { grid-row: 4; align-self: end; }
.cq-statcard > .cq-statcard__ends { grid-row: 5; }
.cq-statcard__desc { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); line-height: var(--cq-lh-snug); }
.cq-statcard__ends { margin: 0; padding-top: var(--cq-space-3); display: grid; gap: var(--cq-space-2); border-top: 1px solid var(--cq-border); align-self: end; }
.cq-statcard__row { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: var(--cq-space-3); align-items: baseline; font-size: var(--cq-text-sm); }
.cq-statcard__row dt { color: var(--cq-ink-muted); font-size: var(--cq-label-size); font-weight: var(--cq-weight-strong);
  text-transform: var(--cq-label-case); letter-spacing: var(--cq-tracking-label); }
.cq-statcard__row dd { margin: 0; display: flex; justify-content: space-between; gap: var(--cq-space-3); color: var(--cq-ink); min-width: 0; }
.cq-statcard__row dd span:first-child { overflow-wrap: anywhere; }
.cq-statcard__row dd span:last-child { font-weight: var(--cq-weight-strong); white-space: nowrap; }
@container cq (min-width: 600px) { .cq-statcard { margin-bottom: var(--cq-gap); } }
/* Range strip: the span from the worst to the best value on a 0 to max track, and a mark at the card's
   value. Decorative: the Best and Worst rows state the same figures. */
.cq-range { position: relative; height: 12px; margin: var(--cq-space-1) 0; }
.cq-range::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; border-radius: 1px; background: var(--cq-meter-track); }
.cq-range__span { position: absolute; top: 3px; height: 6px; left: calc(var(--a) * 100%); right: calc((1 - var(--b)) * 100%); border-radius: 3px; background: var(--cq-border-strong); }
.cq-range__mark { position: absolute; top: 0; left: calc(var(--v) * 100%); width: 4px; height: 12px; margin-left: -2px; border-radius: 2px; background: var(--cq-ink); box-shadow: 0 0 0 2px var(--cq-surface); }

/* ================================================================== answer grid */
/* Dense: one line per cell, every result shows its icon and its word. */
.cq-answers { display: grid; gap: var(--cq-space-3); }
.cq-answers__sum { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); }
.cq-answer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13em), 1fr)); gap: 1px;
  background: var(--cq-border); border: 1px solid var(--cq-border); border-radius: var(--cq-radius-md); overflow: hidden; font-size: var(--cq-text-sm); }
.cq-answer { display: flex; align-items: center; gap: var(--cq-space-3); min-height: 40px; padding: 0 var(--cq-space-3);
  background: var(--cq-surface); white-space: nowrap; overflow: hidden; font-size: var(--cq-text-sm); }
.cq-answer__q { font-family: var(--cq-font-num); font-variant-numeric: var(--cq-num); color: var(--cq-ink-muted); font-weight: var(--cq-weight-strong); min-width: 2.2em; }
/* Columns are sized in em so a larger type scale drops to fewer columns rather than clipping the part count. */

/* ================================================================== destructive action behind a confirmation */
.cq-danger-zone { border-color: var(--cq-error-border); }
.cq-confirm > summary { list-style: none; width: max-content; }
.cq-confirm > summary::-webkit-details-marker { display: none; }
.cq-confirm[open] > summary { display: none; }
.cq-confirm__panel { display: grid; gap: var(--cq-space-4); padding: var(--cq-space-4); border: 2px solid var(--cq-error-border);
  border-radius: var(--cq-radius-md); background: var(--cq-error-surface); animation: cq-fade var(--cq-dur-base) var(--cq-ease-standard) both; }
.cq-confirm__actions { display: flex; flex-wrap: wrap; gap: var(--cq-space-3); }
.cq-confirm__actions > .cq-btn { flex: 1 1 auto; }

/* ================================================================== stat card, stacked */
/* For names too long to sit beside the figure: label and figure on one line, the name
   on its own line underneath, wrapping instead of truncating. */
.cq-statcard--stacked .cq-statcard__row { grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--cq-space-3); }
.cq-statcard--stacked .cq-statcard__row dd { display: contents; }
.cq-statcard--stacked .cq-statcard__row dd span:first-child { grid-column: 1 / -1; order: 3; white-space: normal; overflow: visible;
  overflow-wrap: anywhere; line-height: var(--cq-lh-snug); }
.cq-statcard--stacked .cq-statcard__row dd span:last-child { grid-column: 2; grid-row: 1; text-align: right; }

/* ================================================================== static list row */
/* Same row, no link: no chevron, no hover or press, nothing to tap. */
.cq-listrow--static { grid-template-columns: minmax(0, 1fr) auto; }
.cq-listrow--static::before { display: none; }

/* ================================================================== badge as a link */
/* A badge may link to its ranking page. It keeps its name in words, gains a chevron and a
   24px minimum target, and underlines on hover, focus and press. */
.cq-badge--link { min-height: 28px; padding: 0.2em 0.5em 0.2em 0.65em; text-decoration: none; cursor: pointer; }
.cq-badge--link .cq-badge__chev { font-size: 0.9em; margin-left: -1px; color: currentColor; opacity: 0.8; }
.cq-badge--link:focus-visible .cq-badge__text, .cq-badge--link:active .cq-badge__text { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
@media (hover: hover) { .cq-badge--link:hover .cq-badge__text { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; } }
.cq-badges { display: flex; flex-wrap: wrap; gap: var(--cq-space-2); }

/* ================================================================== inline stat beside a page title */
.cq-titleline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cq-space-1) var(--cq-space-4); min-width: 0; }
.cq-inline-stat { display: inline-flex; align-items: baseline; gap: var(--cq-space-2); white-space: nowrap; color: var(--cq-ink-muted);
  font-size: var(--cq-text-sm); }
.cq-inline-stat__value { font-family: var(--cq-font-stat, var(--cq-font-display)); font-weight: var(--cq-weight-num-display); font-size: var(--cq-text-xl);
  color: var(--cq-ink); font-variant-numeric: var(--cq-num); line-height: 1; }

/* ================================================================== chart key for fixed series */
/* For charts with a small fixed set of series that aren't teams (base points and speed bonus).
   The swatch names the series colour; the label always says what it is. */
.cq-key { display: flex; flex-wrap: wrap; gap: var(--cq-space-2) var(--cq-space-5); font-size: var(--cq-text-sm); color: var(--cq-ink); }
.cq-key__item { display: inline-flex; align-items: center; gap: var(--cq-space-2); }
.cq-key__swatch { width: 14px; height: 14px; border-radius: 2px; flex: none; }
.cq-key__swatch--line { height: 4px; border-radius: 2px; width: 18px; }
.cq-key__swatch--ref { height: 0; width: 18px; border-top: 2px dashed var(--cq-ink-muted); border-radius: 0; }
.cq-series-1 { background: var(--cq-chart-1); } .cq-series-2 { background: var(--cq-chart-2); } .cq-series-3 { background: var(--cq-chart-3); }
.cq-series-context { background: var(--cq-chart-context); }

/* ================================================================== skeleton, pill row */
.cq-skel-pills { display: flex; flex-wrap: wrap; gap: var(--cq-space-2); }
.cq-skel--pill { height: 1.6em; min-height: 22px; border-radius: var(--cq-radius-badge); width: var(--w, 6em); font-size: var(--cq-text-xs); }

/* ================================================================== sticky filter summary */
/* One line naming the active filters and a Filter button. Sticks to the top as the page scrolls.
   The button opens a bottom sheet on phones and a dropdown from 600px (the .cq-menu pattern). */
.cq-filtersum { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: var(--cq-space-3);
  margin: 0 calc(-1 * var(--cq-page-pad)); padding: var(--cq-space-3) var(--cq-page-pad); min-height: calc(var(--cq-control-sm-h) + var(--cq-space-5));
  background: var(--cq-bg); border-bottom: 1px solid var(--cq-border); }
.cq-filtersum:has(.cq-menu[open]) { z-index: 70; }   /* above the bottom bar while the sheet is open */
.cq-filtersum__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: var(--cq-text-sm); color: var(--cq-ink); }
.cq-filtersum__text b { font-weight: var(--cq-weight-strong); }
.cq-filtersum .cq-menu { flex: none; }
.cq-filtersum__count { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 0.35em; border-radius: var(--cq-radius-pill);
  background: var(--cq-accent); color: var(--cq-on-accent); font-size: var(--cq-text-xs); font-variant-numeric: var(--cq-num); }
.cq-filtersum__form { display: grid; gap: var(--cq-space-4); padding: var(--cq-space-2) var(--cq-space-4) 0; }
.cq-filtersum__form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--cq-space-1); }
.cq-filtersum__form legend { padding: 0; margin-bottom: var(--cq-space-2); }
@container cq (min-width: 600px) {
  .cq-filtersum { margin: 0; padding-left: 0; padding-right: 0; }
  .cq-filtersum .cq-menu__panel { left: auto; right: 0; width: 340px; transform-origin: top right; }
  .cq-filtersum .cq-menu__title { display: block; padding-left: var(--cq-space-4); }
  .cq-filtersum__form { padding: 0 var(--cq-space-2); }
}

/* ================================================================== week strip */
/* One square per week of the season: filled for a marked week (a win, or attended), outlined
   otherwise. W1 and the last week are labelled at the ends. The sentence under it is the text
   alternative; the squares are hidden from screen readers. */
.cq-weeks { display: grid; gap: var(--cq-space-2); min-width: 0; }
.cq-weeks__title { font-size: var(--cq-text-sm); font-weight: var(--cq-weight-strong); }
.cq-weeks__list { display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: var(--cq-space-2); max-width: calc(var(--n, 10) * 36px); }
.cq-weeks__wk { aspect-ratio: 1; border-radius: var(--cq-radius-sm); border: 2px solid var(--cq-border-strong); background: transparent; }
.cq-weeks__wk.is-on { background: var(--cq-accent); border-color: var(--cq-accent); }
.cq-weeks__ends { display: flex; justify-content: space-between; max-width: calc(var(--n, 10) * 36px); font-size: var(--cq-text-xs);
  color: var(--cq-ink-muted); font-family: var(--cq-font-num); font-variant-numeric: var(--cq-num); }

/* ================================================================== typical night spread */
/* One horizontal line with a dot per finishing place, spaced by the average points between places.
   Brackets under it mark 1st to 2nd, the top 5, the top half and the whole field, each labelled
   in points and questions. Plain HTML, positioned by --x (0 at the left end, 1 at the right). */
.cq-spread { padding: var(--cq-card-pad); display: grid; gap: var(--cq-space-4); min-width: 0; container-type: inline-size; }
.cq-spread__plot { display: grid; gap: var(--cq-space-2); padding: 0 var(--cq-space-2); }
.cq-spread__line { position: relative; height: 14px; }
.cq-spread__line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--cq-border-strong); }
.cq-spread__dot { position: absolute; top: 50%; left: calc(var(--x) * 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--cq-surface); border: 2px solid var(--cq-ink-muted); }
.cq-spread__dot.is-first { background: var(--cq-ink); border-color: var(--cq-ink); }
.cq-spread__ends { display: flex; justify-content: space-between; font-size: var(--cq-text-xs); color: var(--cq-ink-muted);
  font-family: var(--cq-font-num); font-variant-numeric: var(--cq-num); }
.cq-spread__brackets { display: grid; gap: var(--cq-space-3); margin-top: var(--cq-space-2); }
.cq-spread__br { position: relative; margin-left: calc(var(--x) * 100%); margin-right: calc((1 - var(--x2, 1)) * 100%); min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cq-spread__br::before { content: ""; align-self: stretch; height: 8px; border: 2px solid var(--cq-ink); border-bottom: 0; }
/* Labels end at 1st place and run leftwards past a narrow bracket when they need to, wrapping
   before they reach the left edge of the plot. */
.cq-spread__label { font-size: var(--cq-text-sm); text-align: right; flex: none; width: max-content;
  max-width: calc(100cqw - 2 * var(--cq-space-2)); }
.cq-spread__label b { font-weight: var(--cq-weight-strong); }
.cq-spread__label span { color: var(--cq-ink-muted); }


/* ================================================================== count badge (unread notifications) */
.cq-count { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 0.4em; border-radius: var(--cq-radius-pill);
  background: var(--cq-accent); color: var(--cq-on-accent); font-size: 11px; font-weight: var(--cq-weight-strong); line-height: 1; font-variant-numeric: var(--cq-num); }
.cq-account__count { flex: none; }
.cq-account__item .cq-count { margin-left: auto; }

/* ================================================================== Quiz Health finding row */
/* Line one: category chip, name and info icon. Line two: the summary, always. A status chip
   ("Action needed") only when there is something to do. */
.cq-findings { display: grid; }
.cq-finding { display: grid; gap: var(--cq-space-1); padding: var(--cq-space-4) 0; border-top: 1px solid var(--cq-border); font-size: var(--cq-text-sm); }
/* Line one flows as text, so the info icon stays with the last word of the name. */
.cq-finding__head { display: block; line-height: 28px; }
.cq-finding__chip { margin-right: var(--cq-space-2); vertical-align: 1px; }
.cq-finding__name { font-weight: var(--cq-weight-strong); font-size: var(--cq-text-md); line-height: var(--cq-lh-snug); }
.cq-finding__head .cq-tip { margin-left: -6px; white-space: nowrap; }
.cq-finding__summary { color: var(--cq-ink-muted); }
.cq-finding__status { justify-self: start; margin-top: var(--cq-space-1); }

/* ================================================================== insight card: headline, evidence, recommendation */
.cq-insight { position: relative; display: grid; gap: var(--cq-space-4); align-content: start; padding: var(--cq-card-pad); background: var(--cq-card-bg);
  border: var(--cq-card-border-w) solid var(--cq-border); border-radius: var(--cq-radius-lg); }
.cq-insight__headline { font-family: var(--cq-font-display); font-weight: var(--cq-weight-display); font-size: var(--cq-text-lg); line-height: var(--cq-lh-snug);
  letter-spacing: var(--cq-tracking-display); margin-top: calc(-1 * var(--cq-space-2)); }
.cq-insight__slot { display: grid; gap: 2px; }
.cq-insight__label { font-size: var(--cq-label-size); font-weight: var(--cq-weight-strong); color: var(--cq-ink-muted); letter-spacing: var(--cq-tracking-label); }
.cq-insight__evidence { font-variant-numeric: var(--cq-num); }
.cq-insight__slot--rec { grid-template-columns: auto 1fr; gap: var(--cq-space-3); padding: var(--cq-space-3) var(--cq-space-4); border-radius: var(--cq-radius-md);
  background: var(--cq-accent-surface); }
.cq-insight__icon { font-size: 20px; color: var(--cq-ink); margin-top: 2px; }

/* ================================================================== teams by weeks grid */
.cq-tw { display: grid; gap: var(--cq-space-3); min-width: 0; }
.cq-tw__table { width: max-content; min-width: 100%; }
.cq-tw__table th.cq-tw__team { position: sticky; left: 0; z-index: 2; background: var(--cq-surface); text-align: left; 
  max-width: 136px; overflow-wrap: anywhere; font-weight: var(--cq-weight-strong); box-shadow: 1px 0 0 var(--cq-border); }
.cq-tw__table thead th.cq-tw__team { background: var(--cq-th-bg); }
.cq-tw__wk { text-align: center; min-width: 36px; font-family: var(--cq-font-num); font-variant-numeric: var(--cq-num); }
.cq-tw__wk abbr { text-decoration: none; }
.cq-tw__table td { text-align: center; padding: 0 4px; height: 40px; }
.cq-tw__mark { display: inline-block; width: 18px; height: 18px; border-radius: 4px; vertical-align: middle; flex: none; }
.cq-tw__mark--top5 { background: var(--cq-accent); }
.cq-tw__mark--played { border: 2px solid var(--cq-border-strong); }
.cq-tw__mark--absent { width: 10px; height: 2px; border-radius: 1px; background: var(--cq-border-strong); }
.cq-tw--titles .cq-tw__table td { padding: 0 6px; min-width: 7.5em; }
.cq-titlechip { display: inline-flex; align-items: center; gap: 4px; padding: 0.2em 0.6em; border-radius: var(--cq-radius-pill); white-space: nowrap;
  font-size: var(--cq-text-xs); font-weight: var(--cq-weight-strong); border: 1px solid var(--cq-border-strong); color: var(--cq-ink); background: var(--cq-surface); }
.cq-titlechip--winner { background: var(--cq-accent); border-color: var(--cq-accent); color: var(--cq-on-accent); }
.cq-titlechip--most { border-style: dashed; }
.cq-titlechip .cq-icon { font-size: 13px; }

/* ================================================================== answer split: right, wrong, no answer */
.cq-asplit { display: grid; gap: var(--cq-space-2); margin: 0; min-width: 0; }
.cq-asplit__bar { display: flex; gap: 2px; height: 14px; border-radius: var(--cq-radius-pill); overflow: hidden; }
.cq-asplit__seg { flex: var(--w) 0 0; min-width: 4px; }
.cq-asplit__seg--right { background: var(--cq-success-ink); }
.cq-asplit__seg--wrong { background: var(--cq-error-ink); }
.cq-asplit__seg--none { background: var(--cq-border-strong); }
.cq-asplit__legend { display: flex; flex-wrap: wrap; gap: var(--cq-space-1) var(--cq-space-5); font-size: var(--cq-text-sm); }
.cq-asplit__item { display: inline-flex; align-items: center; gap: var(--cq-space-2); color: var(--cq-ink); }
.cq-asplit__item b { font-variant-numeric: var(--cq-num); }
.cq-asplit__item--right .cq-icon { color: var(--cq-success-ink); }
.cq-asplit__item--wrong .cq-icon { color: var(--cq-error-ink); }
.cq-asplit__item--none .cq-icon { color: var(--cq-ink-muted); }

/* ================================================================== difference from chance */
.cq-chance { display: grid; gap: var(--cq-space-4); }
.cq-chance__scale, .cq-chance__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px var(--cq-space-3); }
.cq-chance__scale { font-size: var(--cq-text-xs); color: var(--cq-ink-muted); grid-template-columns: 1fr auto 1fr; }
.cq-chance__scale span:nth-child(2) { text-align: center; }
.cq-chance__scale span:last-child { text-align: right; }
.cq-chance__rows { display: grid; gap: var(--cq-space-4); }
.cq-chance__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label fig" "track track" "verdict verdict"; align-items: center; }
.cq-chance__label { grid-area: label; font-weight: var(--cq-weight-strong); overflow-wrap: anywhere; font-size: var(--cq-text-sm); }
.cq-chance__row.is-you .cq-chance__label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cq-chance__fig { grid-area: fig; font-family: var(--cq-font-num); font-variant-numeric: var(--cq-num); font-weight: var(--cq-weight-strong); }
.cq-chance__verdict { grid-area: verdict; font-size: var(--cq-text-xs); color: var(--cq-ink-muted); }
.cq-chance__track { grid-area: track; position: relative; height: 18px; }
.cq-chance__track { background: linear-gradient(var(--cq-border), var(--cq-border)) center / 100% 1px no-repeat; }
.cq-chance__track::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: calc(var(--lo) * 100%); right: calc((1 - var(--hi)) * 100%);
  background: var(--cq-meter-track); border-radius: 3px; }
.cq-chance__track::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--cq-ink-muted); }
.cq-chance__dot { position: absolute; z-index: 1; top: 50%; left: calc(var(--x) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--cq-surface); border: 2px solid var(--cq-ink); }
.cq-chance__row--above .cq-chance__dot, .cq-chance__row--below .cq-chance__dot { background: var(--cq-ink); }
@container cq (min-width: 600px) {
  .cq-chance__row { grid-template-columns: 11em minmax(0, 1fr) 3em 11em; grid-template-areas: "label track fig verdict"; }
  .cq-chance__scale { margin-left: calc(11em + var(--cq-space-3)); margin-right: calc(14em + 2 * var(--cq-space-3)); }
  .cq-chance__fig { text-align: right; }
}

/* ================================================================== switch */
.cq-switch { display: inline-flex; align-items: center; gap: var(--cq-space-3); min-height: 44px; cursor: pointer; font-weight: var(--cq-weight-strong); position: relative; }
.cq-switch input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.cq-switch__track { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--cq-surface); border: 2px solid var(--cq-border-strong); }
.cq-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--cq-border-strong);
  transition: transform var(--cq-dur-base) var(--cq-ease-standard); }
.cq-switch input:checked + .cq-switch__track { background: var(--cq-accent); border-color: var(--cq-accent); }
.cq-switch input:checked + .cq-switch__track::after { transform: translateX(18px); background: var(--cq-on-accent); }
.cq-switch input:focus-visible + .cq-switch__track { outline: var(--cq-focus-w) solid var(--cq-focus); outline-offset: var(--cq-focus-offset); }

/* ================================================================== after-question panel */
.cq-afterq { gap: var(--cq-space-4); }
.cq-afterq__answer { display: grid; gap: 2px; padding: var(--cq-space-3) var(--cq-space-4); border: 2px solid var(--cq-ink); border-radius: var(--cq-radius-md); }
.cq-afterq__answer-label { font-size: var(--cq-label-size); font-weight: var(--cq-weight-strong); color: var(--cq-ink-muted); }
.cq-afterq__answer-text { font-size: var(--cq-text-xl); font-weight: var(--cq-weight-display); font-family: var(--cq-font-display); line-height: var(--cq-lh-snug); }
.cq-afterq__names { display: none; gap: var(--cq-space-3); font-size: var(--cq-text-sm); }
.cq-afterq:has(.cq-switch input:checked) .cq-afterq__names { display: grid; }
.cq-afterq__names dt { display: inline-flex; align-items: center; gap: var(--cq-space-2); font-weight: var(--cq-weight-strong); }
.cq-afterq__names div:nth-child(1) dt .cq-icon { color: var(--cq-success-ink); }
.cq-afterq__names div:nth-child(2) dt .cq-icon { color: var(--cq-error-ink); }
.cq-afterq__names div:nth-child(3) dt .cq-icon { color: var(--cq-ink-muted); }
.cq-afterq__names dd { margin: 2px 0 0; color: var(--cq-ink-muted); }
.cq-afterq__toph { font-size: var(--cq-text-md); font-weight: var(--cq-weight-strong); padding-top: var(--cq-space-2); border-top: 1px solid var(--cq-border); }
.cq-afterq__top { display: grid; }
.cq-afterq__row { display: grid; grid-template-columns: 2em 3em minmax(0, 1fr) auto; align-items: center; gap: var(--cq-space-2); min-height: 40px;
  border-bottom: 1px solid var(--cq-border); font-variant-numeric: var(--cq-num); }
.cq-afterq__row:last-child { border-bottom: 0; }
.cq-afterq__rank { text-align: right; font-weight: var(--cq-weight-strong); }
.cq-afterq__team { overflow-wrap: anywhere; }
.cq-afterq__pts { font-weight: var(--cq-weight-strong); text-align: right; }

/* ================================================================== guided tour */
/* A spotlight ring over the target (the scrim is its outer shadow) and a step card.
   Phones: the card is a bottom sheet. From 600px it floats beside the target. */
.cq-tour { position: fixed; inset: 0; z-index: 90; }
.cq-tour[hidden] { display: none; }
.cq-tour__spot { position: absolute; left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh); border-radius: var(--cq-radius-md);
  box-shadow: 0 0 0 3px var(--cq-accent-ink), 0 0 0 100vmax var(--cq-scrim); pointer-events: none; }  /* moves instantly: only the card animates */
.cq-tour__card { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: var(--cq-space-3);
  padding: var(--cq-space-5) var(--cq-page-pad) calc(var(--cq-space-5) + env(safe-area-inset-bottom, 0px));
  background: var(--cq-surface); color: var(--cq-ink); border-radius: var(--cq-radius-lg) var(--cq-radius-lg) 0 0; box-shadow: var(--cq-shadow-2);
  animation: cq-sheet-in var(--cq-dur-slow) var(--cq-ease-enter) both; }
.cq-tour__progress { display: flex; align-items: center; justify-content: space-between; gap: var(--cq-space-3); }
.cq-tour__count { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); font-variant-numeric: var(--cq-num); }
.cq-tour__dots { display: flex; gap: 6px; }
.cq-tour__dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--cq-border-strong); }
.cq-tour__dot.is-done { background: var(--cq-border-strong); }
.cq-tour__dot.is-current { width: 20px; border-radius: 4px; background: var(--cq-accent); border-color: var(--cq-accent); }
.cq-tour__title { font-family: var(--cq-font-display); font-weight: var(--cq-weight-display); font-size: var(--cq-text-lg); line-height: var(--cq-lh-snug); }
.cq-tour__body { font-size: var(--cq-text-md); }
.cq-tour__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--cq-space-3); padding-top: var(--cq-space-2); }
.cq-tour__nav { display: flex; gap: var(--cq-space-2); }
.cq-tour__actions .cq-btn { min-height: 44px; }
@container cq (min-width: 600px) {
  .cq-tour__card { left: var(--cx, auto); top: var(--cy, auto); right: auto; bottom: auto; width: 360px; padding: var(--cq-space-5);
    border-radius: var(--cq-radius-lg); animation-name: cq-menu-in; }
}
/* In the docs the tour sits inside its card instead of over the page. */
.cq-tour--demo { position: absolute; }
.cq-demo-stage { position: relative; min-height: 560px; overflow: hidden; border-radius: var(--cq-radius-lg); border: 1px solid var(--cq-border); background: var(--cq-bg); }
.cq-demo-stage > .cq-demo-page { padding: 16px; display: grid; gap: 16px; }

/* ================================================================== notifications inbox */
.cq-inbox { display: grid; gap: var(--cq-space-3); }
.cq-inbox__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cq-space-2) var(--cq-space-4); }
.cq-inbox__head .cq-btn { margin-left: auto; }
.cq-inbox__row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: var(--cq-space-3); align-items: start; min-height: 64px;
  padding: var(--cq-space-3) var(--cq-card-pad); color: var(--cq-ink); text-decoration: none; position: relative; isolation: isolate; }
.cq-inbox__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cq-row-hover); opacity: 0; transition: opacity var(--cq-dur-fast) var(--cq-ease-standard); }
.cq-inbox__row:active::before { opacity: 1; }
@media (hover: hover) { .cq-inbox__row:hover::before { opacity: 1; } }
.cq-inbox__dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; }
.cq-inbox__row.is-unread .cq-inbox__dot { background: var(--cq-accent-ink); }
.cq-inbox__main { display: grid; gap: 2px; min-width: 0; }
.cq-inbox__title { font-weight: var(--cq-weight-regular); }
.cq-inbox__row.is-unread .cq-inbox__title { font-weight: var(--cq-weight-strong); }
.cq-inbox__sub, .cq-inbox__time { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); }
.cq-inbox__time { white-space: nowrap; }

/* ================================================================== principle cards in the docs */
.cq-demo { display: grid; gap: var(--cq-space-4); }
.cq-demo__q { display: grid; gap: var(--cq-space-3); padding-top: var(--cq-space-4); border-top: 1px solid var(--cq-border); }
.cq-demo__q:first-child { border-top: 0; padding-top: 0; }
.cq-demo__label { font-size: var(--cq-label-size); font-weight: var(--cq-weight-strong); color: var(--cq-ink-muted); text-transform: var(--cq-label-case); letter-spacing: var(--cq-tracking-label); }
.cq-dont { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); }
.cq-iconrow { display: flex; flex-wrap: wrap; gap: var(--cq-space-3) var(--cq-space-5); font-size: var(--cq-text-sm); }
.cq-iconrow > span { display: inline-flex; align-items: center; gap: var(--cq-space-2); }

/* ------------------------------------------------------------------ reduced motion
   Every animation shows its final state at once: 1ms, no delay, one run, final frame held. Transforms
   in transitions are switched off; fades stay (they carry no vestibular load). Script-driven motion
   (scrolling, the countdown bar) checks the same media query. */
@media (prefers-reduced-motion: reduce) {
  :root:root:root { --cq-press-scale: 1; --cq-lift: 0px; --cq-enter-shift: 0px; --cq-menu-scale: 1; }
  .cq *, .cq *::before, .cq *::after, .cq-pop, .cq-pop * {
    animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    animation-fill-mode: both !important; transition-property: opacity !important; }
  .cq-spin, .cq-skel { animation: none !important; }
}

/* ------------------------------------------------------------------ icon grid (docs only) */
.cq-icongrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--cq-space-2); }
.cq-iconcell { display: grid; justify-items: center; gap: var(--cq-space-2); padding: var(--cq-space-4) var(--cq-space-2); border: 1px solid var(--cq-border);
  border-radius: var(--cq-radius-md); font-size: var(--cq-text-xs); color: var(--cq-ink-muted); text-align: center; overflow-wrap: anywhere; }
.cq-iconcell .cq-icon { font-size: 24px; color: var(--cq-ink); }

/* ================================================================== popovers: more menu, info tip, filter sheet */
/* Native popover="auto": the browser puts it in the top layer (above sticky bars and the bottom nav),
   keeps it hidden until opened, and closes it on an outside tap or Escape. One popover per trigger,
   each with its own id; never share one popover between triggers.
   An author display value would beat the browser's hidden state, so display is only set when open.
   cq-ui.js places it. --cq-pop-mode tells the script how: anchored (below or above the trigger),
   panel (content-width, under 480px) or sheet (bottom sheet). Without the script a popover opens
   centred in the viewport, which is still usable. */
.cq-pop { position: fixed; inset: auto; margin: 0; padding: 0; border: 1px solid var(--cq-border-strong); border-radius: var(--cq-radius-md);
  background: var(--cq-surface); color: var(--cq-ink); box-shadow: var(--cq-shadow-2); overflow: visible; --cq-pop-mode: anchored;
  font-family: var(--cq-font-sans); font-size: var(--cq-text-md); line-height: var(--cq-lh-body); text-align: left; }
.cq-pop:not(:popover-open) { display: none; }
.cq-pop:popover-open { display: block; animation: cq-menu-in var(--cq-dur-base) var(--cq-ease-enter) both; }
.cq-pop[data-side="above"] { --cq-enter-dir: 1; }
.cq-pop::backdrop { background: transparent; }

/* More menu: an icon button with its own menu, right-aligned below it. Group labels, items,
   separators, and items with a switch (role menuitemcheckbox). */
.cq-iconbtn { position: relative; isolation: isolate; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 50%; background: none; color: var(--cq-ink-muted); cursor: pointer; font-size: 20px; text-decoration: none;
  transition: transform var(--cq-dur-fast) var(--cq-ease-standard); }
.cq-iconbtn::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; z-index: -1; background: var(--cq-overlay-hover); opacity: 0;
  transition: opacity var(--cq-dur-fast) var(--cq-ease-standard); }
.cq-iconbtn:active { transform: scale(var(--cq-press-scale)); }
.cq-iconbtn:active::before, .cq-iconbtn[aria-expanded="true"]::before { opacity: 1; }
@media (hover: hover) { .cq-iconbtn:hover::before { opacity: 1; } }
.cq-iconbtn:focus-visible { outline-offset: -4px; }
.cq-pop--menu:popover-open { display: grid; min-width: 220px; max-width: min(320px, calc(100vw - 32px)); padding: var(--cq-space-2); transform-origin: top right; }
.cq-pop--menu[data-side="above"] { transform-origin: bottom right; }
.cq-pop__group { padding: var(--cq-space-3) var(--cq-space-3) var(--cq-space-1); font-size: var(--cq-label-size); font-weight: var(--cq-weight-strong);
  color: var(--cq-ink-muted); letter-spacing: var(--cq-tracking-label); text-transform: var(--cq-label-case); white-space: nowrap; }
.cq-pop__group:first-child { padding-top: var(--cq-space-1); }
.cq-pop__sep { height: 1px; margin: var(--cq-space-2) calc(-1 * var(--cq-space-2)); border: 0; background: var(--cq-border); }
.cq-pop__item { position: relative; isolation: isolate; display: flex; align-items: center; gap: var(--cq-space-3); width: 100%; min-height: 44px;
  padding: 0 var(--cq-space-3); border: 0; border-radius: var(--cq-radius-sm); background: none; color: var(--cq-ink); font: inherit;
  text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; }
.cq-pop__item::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--cq-overlay-hover); opacity: 0;
  transition: opacity var(--cq-dur-fast) var(--cq-ease-standard); }
.cq-pop__item:active::before, .cq-pop__item:focus-visible::before { opacity: 1; }
@media (hover: hover) { .cq-pop__item:hover::before { opacity: 1; } }
.cq-pop__item:focus-visible { outline-offset: -2px; }
.cq-pop__item > .cq-icon { color: var(--cq-ink-muted); font-size: 18px; }
.cq-pop__item--danger { color: var(--cq-error-ink); }
.cq-pop__item--danger > .cq-icon { color: var(--cq-error-ink); }
.cq-pop__item--switch .cq-switch__track { margin-left: auto; }
.cq-pop__item[aria-checked="true"] .cq-switch__track { background: var(--cq-accent); border-color: var(--cq-accent); }
.cq-pop__item[aria-checked="true"] .cq-switch__track::after { transform: translateX(18px); background: var(--cq-on-accent); }

/* Info tip: the icon is a 44 x 44 button; the panel is a popover with an arrow to the icon.
   From 480px: anchored under the icon, up to 300px wide, opening leftward near the right edge.
   Under 480px: a panel spanning the content width, 16px in from each edge. */
.cq-tip { display: inline-flex; vertical-align: middle; margin: -12px -8px -12px -4px; }
.cq-tip__btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none;
  color: var(--cq-ink-muted); cursor: pointer; position: relative; isolation: isolate; }
.cq-tip__btn .cq-icon { font-size: 18px; }
.cq-tip__btn::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; z-index: -1; background: var(--cq-overlay-press); opacity: 0;
  transition: opacity var(--cq-dur-fast) var(--cq-ease-standard); }
.cq-tip__btn:active::before, .cq-tip__btn[aria-expanded="true"]::before, .cq-tip:has(:popover-open) .cq-tip__btn::before { opacity: 1; }
.cq-tip:has(:popover-open) .cq-tip__btn { color: var(--cq-ink); }
.cq-tip__btn:focus-visible { outline: var(--cq-focus-w) solid var(--cq-focus); outline-offset: -4px; }
.cq-pop--tip { width: max-content; max-width: min(300px, calc(100vw - 32px)); padding: var(--cq-space-3) var(--cq-space-4);
  font-size: var(--cq-text-sm); font-weight: var(--cq-weight-regular); line-height: var(--cq-lh-snug); letter-spacing: normal; text-transform: none;
  white-space: normal; color: var(--cq-ink); transform-origin: var(--arrow-x, 20px) top; }
.cq-pop--tip[data-side="above"] { transform-origin: var(--arrow-x, 20px) bottom; }
@container cq (max-width: 479.98px) { .cq-pop--tip { --cq-pop-mode: panel; max-width: none; } }
.cq-tip__body { display: grid; gap: var(--cq-space-3); }
.cq-tip__body > * { display: block; margin: 0; }
.cq-pop__arrow { position: absolute; left: var(--arrow-x, 20px); top: -7px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg);
  background: var(--cq-surface); border-left: 1px solid var(--cq-border-strong); border-top: 1px solid var(--cq-border-strong); }
.cq-pop[data-side="above"] > .cq-pop__arrow { top: auto; bottom: -7px; transform: rotate(225deg); }
.cq-bandkey { display: grid; gap: var(--cq-space-1); padding-top: var(--cq-space-3) !important; border-top: 1px solid var(--cq-border); }
.cq-bandkey li { display: flex; align-items: center; gap: var(--cq-space-2); }
.cq-bandkey .cq-icon { color: var(--cq-ink-muted); font-size: 16px; }
.cq-bandkey b { font-weight: var(--cq-weight-strong); }

/* Filter sheet: a bottom sheet under 600px, a dropdown below the Filter button from 600px. */
.cq-pop--sheet { --cq-pop-mode: sheet; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: none; max-height: 80vh; overflow: auto;
  padding: var(--cq-space-4) var(--cq-space-3) calc(var(--cq-space-4) + env(safe-area-inset-bottom, 0px)); border: 0;
  border-radius: var(--cq-radius-lg) var(--cq-radius-lg) 0 0; }
.cq-pop--sheet:popover-open { animation-name: cq-sheet-in; animation-duration: var(--cq-dur-slow); }
.cq-pop--sheet::backdrop { background: var(--cq-scrim); }
@container cq (min-width: 600px) {
  .cq-pop--sheet { --cq-pop-mode: anchored; right: auto; bottom: auto; width: 360px; max-height: calc(100vh - 32px); padding: var(--cq-space-3);
    border: 1px solid var(--cq-border-strong); border-radius: var(--cq-radius-md); }
  .cq-pop--sheet:popover-open { animation-name: cq-menu-in; animation-duration: var(--cq-dur-base); }
  .cq-pop--sheet::backdrop { background: transparent; }
}

/* ================================================================== filter control */
/* "Filter" when nothing is filtered; the active filters themselves for one or two; "N filters" from
   three. The button never wraps, which is why three or more collapse to a count. */
.cq-filtersum { gap: var(--cq-space-3); }
.cq-filterctl { max-width: 100%; }
.cq-filterctl.is-active { border-color: var(--cq-accent); background: var(--cq-accent-surface); }
.cq-filterctl__text { white-space: nowrap; }
.cq-filterctl-demo { display: grid; gap: var(--cq-space-4); }
.cq-filterctl-demo > div { display: grid; gap: var(--cq-space-2); justify-items: start; }

/* ================================================================== app bar bell */
.cq-bell { color: var(--cq-ink); }
.cq-bell__count { position: absolute; top: 4px; right: 2px; box-shadow: 0 0 0 2px var(--cq-surface); }
.cq-appbar__end { gap: var(--cq-space-2); }

/* ================================================================== strength card */
/* One-line 13px label; a 24px title at line height 1.1 that always takes exactly two lines of space
   (write titles to fit two lines at 360px); the stat line pinned to the bottom. */
.cq-strength { display: flex; flex-direction: column; gap: var(--cq-space-2); padding: var(--cq-card-pad); min-width: 0; }
.cq-strength__label { font-size: 13px; line-height: 1.3; font-weight: var(--cq-weight-strong); color: var(--cq-ink-muted); white-space: nowrap;
  letter-spacing: var(--cq-tracking-label); }
.cq-strength__title { font-family: var(--cq-font-display); font-weight: var(--cq-weight-display); font-size: 24px; line-height: 1.1;
  letter-spacing: var(--cq-tracking-display); min-height: 2.2em; max-height: 2.2em; overflow-wrap: anywhere; text-wrap: balance; }
.cq-strength__stat { margin-top: auto; padding-top: var(--cq-space-3); display: flex; align-items: baseline; gap: var(--cq-space-2); font-size: var(--cq-text-sm);
  color: var(--cq-ink-muted); border-top: 1px solid var(--cq-border); }
.cq-strength__stat b { font-family: var(--cq-font-stat); font-weight: var(--cq-weight-num-display); font-size: var(--cq-text-xl); color: var(--cq-ink);
  font-variant-numeric: var(--cq-num); line-height: 1; }

/* ================================================================== showdown rows */
/* Two teams, mirrored. Your side on the left, left-aligned, the tick before the value; theirs on the
   right, right-aligned, the tick after. The measure sits in the middle. Headers use the same columns.
   The tick marks who wins that row and is always paired with the value, so colour is a second cue. */
.cq-showdown { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--cq-space-3); padding: var(--cq-card-pad); max-width: 640px;
  font-variant-numeric: var(--cq-num); }
.cq-showdown__head, .cq-showdown__row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.cq-showdown__head { padding-bottom: var(--cq-space-3); border-bottom: 2px solid var(--cq-ink); align-items: end; }
.cq-showdown__team { display: grid; gap: 4px; font-weight: var(--cq-weight-strong); font-size: var(--cq-text-sm); line-height: var(--cq-lh-snug); overflow-wrap: break-word; min-width: 0; }
.cq-showdown__team::before { content: ""; height: 4px; width: 32px; border-radius: 2px; background: var(--cq-you); }
.cq-showdown__team--them { text-align: right; justify-items: end; }
.cq-showdown__team--them::before { background: var(--cq-opponent); }
.cq-showdown__vs { font-size: var(--cq-text-xs); color: var(--cq-ink-muted); font-weight: var(--cq-weight-strong); text-align: center; }
.cq-showdown__row { min-height: 48px; border-bottom: 1px solid var(--cq-border); }
.cq-showdown__row:last-child { border-bottom: 0; }
.cq-showdown__measure { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); text-align: center; max-width: 6.5em; line-height: var(--cq-lh-snug); }
.cq-showdown__val { display: flex; align-items: center; gap: var(--cq-space-2); font-family: var(--cq-font-stat); font-weight: var(--cq-weight-num-display);
  font-size: var(--cq-text-xl); line-height: 1; }
.cq-showdown__val--them { justify-content: flex-end; }
.cq-showdown__tick { display: inline-flex; width: 18px; justify-content: center; font-size: 18px; flex: none; }
.cq-showdown__val--you .cq-showdown__tick { color: var(--cq-you); }
.cq-showdown__val--them .cq-showdown__tick { color: var(--cq-opponent); }
.cq-showdown__val:not(.is-win) .cq-showdown__tick { visibility: hidden; }
.cq-showdown__val:not(.is-win) { color: var(--cq-ink-muted); }
.cq-showdown__sum { grid-column: 1 / -1; padding-top: var(--cq-space-3); font-size: var(--cq-text-sm); text-align: center; }

/* ================================================================== compact grouped table (Competition index) */
/* Four aligned rows of the same measure family. The label cell carries the band word under the label;
   value columns are right-aligned, tabular. */
.cq-gtable { width: 100%; border-collapse: collapse; font-variant-numeric: var(--cq-num); font-size: var(--cq-text-md); }
.cq-gtable th, .cq-gtable td { padding: var(--cq-space-2) var(--cq-space-2); border-bottom: 1px solid var(--cq-border); vertical-align: middle; }
.cq-gtable thead th { font-size: var(--cq-label-size); color: var(--cq-ink-muted); font-weight: var(--cq-weight-strong); white-space: nowrap; text-align: right;
  border-bottom: 1px solid var(--cq-th-rule); }
.cq-gtable thead th:first-child { text-align: left; }
.cq-gtable th:first-child, .cq-gtable td:first-child { padding-left: 0; }
.cq-gtable th:last-child, .cq-gtable td:last-child { padding-right: 0; }
.cq-gtable tbody th { text-align: left; font-weight: var(--cq-weight-strong); }
.cq-gtable tbody tr:last-child > * { border-bottom: 0; }
.cq-gtable tbody tr.is-total > * { border-bottom: 2px solid var(--cq-ink); }
.cq-gtable__band { display: flex; align-items: center; gap: var(--cq-space-1); font-size: var(--cq-text-xs); font-weight: var(--cq-weight-regular); color: var(--cq-ink-muted); }
.cq-gtable__band .cq-icon { font-size: 13px; }
.cq-gtable td { text-align: right; font-family: var(--cq-font-num); width: 1%; white-space: nowrap; padding-left: var(--cq-space-4); }
.cq-gtable td.is-now { font-weight: var(--cq-weight-strong); }

/* ================================================================== title chips row */
/* "Titles (N)" then name-only chips. Under 480px the first four show, then "+N more". */
.cq-titles { display: grid; gap: var(--cq-space-2); }
.cq-titles__label { font-size: var(--cq-text-sm); font-weight: var(--cq-weight-strong); }
.cq-titles__label span { color: var(--cq-ink-muted); font-weight: var(--cq-weight-regular); font-variant-numeric: var(--cq-num); }
.cq-titles__list { display: flex; flex-wrap: wrap; gap: var(--cq-space-2); }
.cq-titles__chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--cq-space-3); border: 1px solid var(--cq-border-strong);
  border-radius: var(--cq-radius-pill); background: var(--cq-surface); font-size: var(--cq-text-sm); white-space: nowrap; }
.cq-titles__more { display: none; min-height: 28px; padding: 0 var(--cq-space-3); border: 1px dashed var(--cq-border-strong); border-radius: var(--cq-radius-pill);
  background: none; color: var(--cq-accent-ink); font: inherit; font-size: var(--cq-text-sm); font-weight: var(--cq-weight-strong); cursor: pointer; white-space: nowrap; }
@container cq (max-width: 479.98px) {
  .cq-titles:not([data-expanded]) .cq-titles__chip:nth-child(n + 5) { display: none; }
  .cq-titles:not([data-expanded]) .cq-titles__more:not([hidden]) { display: inline-flex; align-items: center; }
}

/* ================================================================== Pro feature empty state */
/* The message and button sit over a blurred, inert preview of the feature, so people see what they
   would get. The preview is decorative: aria-hidden and inert, and never real data. */
.cq-pro { position: relative; display: grid; overflow: hidden; border: var(--cq-card-border-w) solid var(--cq-border); border-radius: var(--cq-radius-lg);
  background: var(--cq-card-bg); isolation: isolate; }
.cq-pro__preview { grid-area: 1 / 1; padding: var(--cq-card-pad); filter: blur(5px); opacity: 0.55; pointer-events: none; user-select: none; }
.cq-pro__msg { grid-area: 1 / 1; align-self: center; justify-self: center; z-index: 1; display: grid; justify-items: center; gap: var(--cq-space-2);
  width: min(100% - 32px, 360px); margin: var(--cq-space-5) 0; padding: var(--cq-space-5); text-align: center; background: var(--cq-surface);
  border: 1px solid var(--cq-border-strong); border-radius: var(--cq-radius-lg); box-shadow: var(--cq-shadow-2); }
.cq-pro__icon { font-size: 24px; color: var(--cq-ink); }
.cq-pro__title { font-weight: var(--cq-weight-strong); font-size: var(--cq-text-lg); line-height: var(--cq-lh-snug); }
.cq-pro__why { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); margin-bottom: var(--cq-space-2) !important; }

/* ================================================================== keypad heatmap */
/* SpeedQuizzing's keypad: 4 keys by 6 rows, with Q and V sharing a key, and X and Z sharing one.
   Each key shows its letters, the share of teams that pressed it, and its rank under the share.
   The five heat steps each have their own ink. The right key has a thick ink ring and a tick. */
.cq-keypad { display: grid; gap: var(--cq-space-4); }
.cq-keypad__answer { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px var(--cq-space-4); padding: var(--cq-space-3) var(--cq-space-4);
  border: 2px solid var(--cq-ink); border-radius: var(--cq-radius-md); }
.cq-keypad__answer-key { grid-row: span 2; display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 var(--cq-space-2); border-radius: var(--cq-radius-md);
  background: var(--cq-ink); color: var(--cq-bg); font-family: var(--cq-font-stat); font-weight: var(--cq-weight-num-display); font-size: var(--cq-text-2xl); }
.cq-keypad__answer-label { font-size: var(--cq-label-size); color: var(--cq-ink-muted); font-weight: var(--cq-weight-strong); }
.cq-keypad__answer-text { font-weight: var(--cq-weight-strong); font-size: var(--cq-text-lg); line-height: var(--cq-lh-snug); }
.cq-keypad__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cq-space-2); max-width: 420px; }
.cq-key { position: relative; display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 64px; padding: var(--cq-space-2) 2px;
  border-radius: var(--cq-radius-md); font-variant-numeric: var(--cq-num); text-align: center; }
.cq-key__letters { font-family: var(--cq-font-stat); font-weight: var(--cq-weight-num-display); font-size: var(--cq-text-lg); line-height: 1; }
.cq-key__pct { font-size: var(--cq-text-sm); font-weight: var(--cq-weight-strong); line-height: 1.2; }
.cq-key__rank { font-size: var(--cq-text-xs); line-height: 1.2; }
.cq-key.is-right { box-shadow: 0 0 0 3px var(--cq-bg), 0 0 0 6px var(--cq-ink); }
.cq-key__tick { position: absolute; top: 3px; right: 3px; font-size: 14px; }
.cq-heat-1 { background: var(--cq-heat-1); color: var(--cq-heat-1-ink); }
.cq-heat-2 { background: var(--cq-heat-2); color: var(--cq-heat-2-ink); }
.cq-heat-3 { background: var(--cq-heat-3); color: var(--cq-heat-3-ink); }
.cq-heat-4 { background: var(--cq-heat-4); color: var(--cq-heat-4-ink); }
.cq-heat-5 { background: var(--cq-heat-5); color: var(--cq-heat-5-ink); }
.cq-heat-1 { box-shadow: inset 0 0 0 1px var(--cq-border); }
.cq-heat-1.is-right { box-shadow: inset 0 0 0 1px var(--cq-border), 0 0 0 3px var(--cq-bg), 0 0 0 6px var(--cq-ink); }
.cq-heatkey { display: flex; flex-wrap: wrap; gap: var(--cq-space-2) var(--cq-space-3); font-size: var(--cq-text-xs); color: var(--cq-ink); }
.cq-heatkey li { display: inline-flex; align-items: center; gap: var(--cq-space-1); white-space: nowrap; font-variant-numeric: var(--cq-num); }
.cq-heatkey__sw { width: 14px; height: 14px; border-radius: 3px; }

/* ================================================================== full-screen QR */
/* Shown on the venue screen or a phone held up to the table. Three states: counting down, expired
   (with a new code button), logged in. The countdown bar shrinks with transform: scaleX. */
.cq-qr { position: relative; display: grid; align-content: center; justify-items: center; gap: var(--cq-space-4); min-height: 100%; padding: var(--cq-space-6) var(--cq-page-pad);
  background: var(--cq-bg); text-align: center; }
.cq-qr--screen { min-height: 100vh; min-height: 100dvh; }
.cq-qr__title { font-family: var(--cq-font-display); font-weight: var(--cq-weight-display); font-size: var(--cq-text-2xl); line-height: var(--cq-lh-tight); text-wrap: balance; }
.cq-qr__sub { color: var(--cq-ink-muted); max-width: 32ch; }
.cq-qr__code { width: min(72vw, 280px); aspect-ratio: 1; padding: 12px; background: #ffffff; border-radius: var(--cq-radius-lg); border: 1px solid var(--cq-border); }
.cq-qr__code svg { display: block; width: 100%; height: 100%; }
.cq-qr__codetext { font-family: var(--cq-font-num); font-weight: var(--cq-weight-strong); letter-spacing: 0.2em; font-size: var(--cq-text-xl); font-variant-numeric: var(--cq-num); }
.cq-qr__timer { display: grid; gap: var(--cq-space-2); width: min(72vw, 280px); font-size: var(--cq-text-sm); color: var(--cq-ink-muted); }
.cq-qr__time { font-weight: var(--cq-weight-strong); color: var(--cq-ink); font-variant-numeric: var(--cq-num); }
.cq-qr__bar { height: 6px; border-radius: 3px; background: var(--cq-meter-track); overflow: hidden; }
.cq-qr__bar-fill { display: block; height: 100%; background: var(--cq-ink); transform-origin: left center; transition: transform 1s linear; }
.cq-qr__expired, .cq-qr__done { display: none; }
.cq-qr[data-state="expired"] .cq-qr__code { opacity: 0.12; }
.cq-qr[data-state="expired"] .cq-qr__live { display: none; }
.cq-qr[data-state="expired"] .cq-qr__expired { display: grid; }
.cq-qr__expired { position: absolute; inset: 0; align-content: center; justify-items: center; gap: var(--cq-space-3); padding: var(--cq-page-pad); }
.cq-qr__stack { position: relative; display: grid; justify-items: center; gap: var(--cq-space-4); }
.cq-qr__badge { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--cq-done); color: var(--cq-surface); font-size: 48px; }
.cq-qr[data-state="done"] .cq-qr__badge { animation: cq-pop-in var(--cq-dur-slow) var(--cq-ease-enter) both; }
.cq-qr-states { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--cq-space-4); }
.cq-qr-states > .cq-qr { min-height: 620px; border: 1px solid var(--cq-border); border-radius: var(--cq-radius-lg); }
@keyframes cq-pop-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

/* ================================================================== file drop area */
/* A label wrapping a real file input, so tap, click and keyboard all work without script. Drag-over
   and chosen-file states come from cq-ui.js. */
.cq-drop { position: relative; display: grid; justify-items: center; gap: var(--cq-space-2); padding: var(--cq-space-6) var(--cq-card-pad); text-align: center;
  border: 2px dashed var(--cq-border-strong); border-radius: var(--cq-radius-lg); background: var(--cq-surface); cursor: pointer; isolation: isolate; }
.cq-drop::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--cq-accent-surface); opacity: 0;
  transition: opacity var(--cq-dur-fast) var(--cq-ease-standard); }
.cq-drop.is-over { border-color: var(--cq-accent); border-style: solid; }
.cq-drop.is-over::before { opacity: 1; }
@media (hover: hover) { .cq-drop:hover::before { opacity: 0.5; } }
.cq-drop:focus-within { outline: var(--cq-focus-w) solid var(--cq-focus); outline-offset: var(--cq-focus-offset); }
.cq-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.cq-drop__icon { font-size: 28px; color: var(--cq-ink-muted); }
.cq-drop__title { font-weight: var(--cq-weight-strong); font-size: var(--cq-text-lg); line-height: var(--cq-lh-snug); }
.cq-drop__title u { color: var(--cq-accent-ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.cq-drop__hint { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); }
.cq-drop__chosen { display: none; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--cq-space-3); width: 100%; max-width: 420px;
  padding: var(--cq-space-2) var(--cq-space-2) var(--cq-space-2) var(--cq-space-4); border: 1px solid var(--cq-border-strong); border-radius: var(--cq-radius-md);
  background: var(--cq-bg); text-align: left; }
.cq-drop.has-file .cq-drop__chosen { display: grid; }
.cq-drop.has-file .cq-drop__empty { display: none; }
.cq-drop__file { font-weight: var(--cq-weight-strong); overflow-wrap: anywhere; font-size: var(--cq-text-sm); }
.cq-drop__chosen > .cq-icon { color: var(--cq-done); font-size: 20px; }
.cq-drop__empty { display: contents; }

/* ================================================================== demo bar and tour card, content width */
/* The demo bar spans the window but its content lines up with the page column. On wide screens the
   tour card stays inside the content column too. */
.cq-demobar { background: var(--cq-info-surface); border-bottom: 1px solid var(--cq-info-border); color: var(--cq-ink); }
.cq-demobar__inner { max-width: var(--cq-page-max); margin: 0 auto; padding: var(--cq-space-2) var(--cq-page-pad); display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--cq-space-2) var(--cq-space-4); font-size: var(--cq-text-sm); }
.cq-demobar__text { flex: 1 1 14em; display: flex; align-items: center; gap: var(--cq-space-2); }
.cq-demobar__text .cq-icon { color: var(--cq-info-ink); font-size: 18px; flex: none; }
.cq-demobar__actions { display: flex; gap: var(--cq-space-2); }
@container cq (min-width: 720px) { .cq-demobar__inner { padding-left: var(--cq-page-pad-wide); padding-right: var(--cq-page-pad-wide); } }
.cq-tour__card { max-width: var(--cq-page-max); }
@container cq (min-width: 600px) {
  .cq-tour__card { max-width: min(360px, calc(100% - 2 * var(--cq-page-pad))); }
}
@container cq (min-width: 1000px) {
  .cq-tour--wide .cq-tour__card { left: max(var(--cq-page-pad-wide), (100% - var(--cq-page-max)) / 2 + var(--cq-page-pad-wide)); }
}

/* ================================================================== round and week chip switcher */
/* A single row of chips that scrolls sideways. Fades and arrow buttons appear only at an edge with
   more chips past it (cq-ui.js sets data-more-start and data-more-end). The current chip is a link
   with aria-current and scrolls into view. On phones the week switcher replaces the week grid. */
.cq-chipswitch { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-width: 0; }
.cq-chipswitch__track { display: flex; gap: var(--cq-space-2); overflow-x: auto; scrollbar-width: none; padding: 4px 2px; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fs, 0px), #000 calc(100% - var(--fe, 0px)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fs, 0px), #000 calc(100% - var(--fe, 0px)), transparent 100%); }
.cq-chipswitch__track::-webkit-scrollbar { display: none; }
.cq-chipswitch[data-more-start] { --fs: 48px; }
.cq-chipswitch[data-more-end] { --fe: 48px; }
.cq-swchip { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: var(--cq-space-1); flex: none; min-height: 36px; padding: 0 var(--cq-space-4);
  border: 1px solid var(--cq-border-strong); border-radius: var(--cq-radius-pill); background: var(--cq-surface); color: var(--cq-ink); font-size: var(--cq-text-sm);
  text-decoration: none; white-space: nowrap; scroll-snap-align: center; font-variant-numeric: var(--cq-num); transition: transform var(--cq-dur-fast) var(--cq-ease-standard); }
.cq-swchip::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--cq-overlay-hover); opacity: 0;
  transition: opacity var(--cq-dur-fast) var(--cq-ease-standard); }
.cq-swchip:active { transform: scale(var(--cq-press-scale)); }
.cq-swchip:active::before { opacity: 1; }
@media (hover: hover) { .cq-swchip:hover::before { opacity: 1; } }
.cq-swchip[aria-current="page"] { background: var(--cq-ink); border-color: var(--cq-ink); color: var(--cq-bg); font-weight: var(--cq-weight-strong); }
.cq-swchip__sub { color: var(--cq-ink-muted); }
.cq-swchip[aria-current="page"] .cq-swchip__sub { color: inherit; opacity: 0.8; }
.cq-chipswitch__arrow { position: absolute; top: 50%; z-index: 1; margin-top: -18px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--cq-border-strong); border-radius: 50%; background: var(--cq-surface); color: var(--cq-ink); cursor: pointer; font-size: 18px;
  box-shadow: var(--cq-shadow-2); opacity: 0; pointer-events: none; transition: opacity var(--cq-dur-base) var(--cq-ease-standard); }
.cq-chipswitch__arrow--start { left: 0; }
.cq-chipswitch__arrow--end { right: 0; }
.cq-chipswitch[data-more-start] .cq-chipswitch__arrow--start, .cq-chipswitch[data-more-end] .cq-chipswitch__arrow--end { opacity: 1; pointer-events: auto; }
.cq-weekview { display: grid; gap: var(--cq-space-3); }
.cq-weekview__list { display: grid; }
.cq-weekview__list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--cq-space-3); min-height: 44px;
  border-bottom: 1px solid var(--cq-border); font-size: var(--cq-text-sm); }
.cq-weekview__list li:last-child { border-bottom: 0; }
.cq-weekview__list .cq-tw__mark { justify-self: center; }
.cq-weekview__state { color: var(--cq-ink-muted); white-space: nowrap; }
/* Week grid from 480px, week switcher under it. */
.cq-tw__phone { display: grid; }
.cq-tw__grid { display: none; }
.cq-tw__grid--always { display: grid; gap: var(--cq-space-3); }
@container cq (min-width: 480px) { .cq-tw__phone { display: none; } .cq-tw__grid { display: grid; gap: var(--cq-space-3); } }

/* ================================================================== page transitions */
/* Same-origin page loads cross-fade with cross-document view transitions. Browsers without them get a
   short fade-in of the page content instead. Both are off under reduced motion. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: cq-fade-out var(--cq-dur-base) var(--cq-ease-exit) both; }
::view-transition-new(root) { animation: cq-fade var(--cq-dur-slow) var(--cq-ease-enter) both; }
@supports not (view-transition-name: none) {
  .cq-page { animation: cq-fade var(--cq-dur-slow) var(--cq-ease-enter) both; }
}
@keyframes cq-fade-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .cq-page { animation: none; }
}

/* ================================================================== welcome screen */
/* Plays once, on a team's first login of the week. The rank flips over like a split-flap board from
   last week's to this week's. Teams that moved up get a rocket climbing beside it; the top 3 also get
   confetti. Teams near the bottom get the calm version: the rank fades in and the copy points to the
   next step, with no rocket or confetti. Every piece is transform and opacity. */
.cq-welcome { position: relative; display: grid; justify-items: center; align-content: center; gap: var(--cq-space-4); min-height: 520px; padding: var(--cq-space-6) var(--cq-page-pad);
  overflow: hidden; background: var(--cq-bg); text-align: center; isolation: isolate; border-radius: var(--cq-radius-lg); border: 1px solid var(--cq-border); }
.cq-welcome__eyebrow { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); font-weight: var(--cq-weight-strong); }
.cq-welcome__title { font-family: var(--cq-font-display); font-weight: var(--cq-weight-display); font-size: var(--cq-text-2xl); line-height: var(--cq-lh-tight); text-wrap: balance; }
.cq-welcome__stage { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: var(--cq-space-3); min-height: 140px; }
.cq-flap { display: flex; gap: 4px; perspective: 400px; }
.cq-flap__digit { position: relative; width: 64px; height: 96px; font-family: var(--cq-font-stat); font-weight: var(--cq-weight-num-display); font-size: 80px; line-height: 96px;
  color: var(--cq-bg); font-variant-numeric: var(--cq-num); }
.cq-flap__face { position: absolute; inset: 0; border-radius: var(--cq-radius-md); background: var(--cq-ink); backface-visibility: hidden; display: grid; place-items: center; }
.cq-flap__face::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--cq-bg); opacity: 0.6; }
.cq-flap__face--old { transform-origin: center; }
.cq-flap__face--new { transform: rotateX(-180deg); }
.cq-flap__suffix { align-self: flex-start; margin-top: 8px; font-family: var(--cq-font-stat); font-weight: var(--cq-weight-num-display); font-size: 32px; color: var(--cq-ink); }
.cq-welcome.is-playing .cq-flap__face--old, .cq-welcome.is-done .cq-flap__face--old { animation: cq-flap-out 520ms var(--cq-ease-standard) calc(400ms + var(--i, 0) * 120ms) both; }
.cq-welcome.is-playing .cq-flap__face--new, .cq-welcome.is-done .cq-flap__face--new { animation: cq-flap-in 520ms var(--cq-ease-standard) calc(400ms + var(--i, 0) * 120ms) both; }
@keyframes cq-flap-out { from { transform: rotateX(0); } to { transform: rotateX(180deg); } }
@keyframes cq-flap-in { from { transform: rotateX(-180deg); } to { transform: rotateX(0); } }
.cq-welcome__move { display: inline-flex; align-items: center; gap: var(--cq-space-2); font-weight: var(--cq-weight-strong); }
.cq-welcome__move--up { color: var(--cq-success-ink); }
.cq-welcome__body { max-width: 34ch; color: var(--cq-ink-muted); }
.cq-welcome__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cq-space-3); margin-top: var(--cq-space-2); }
/* rocket: climbs from below the stage and stays beside the rank */
.cq-rocket { position: relative; width: 40px; height: 120px; }
.cq-rocket__icon { position: absolute; left: 4px; bottom: 0; font-size: 32px; color: var(--cq-you); transform: rotate(-45deg); }
.cq-rocket__trail { position: absolute; left: 18px; bottom: 0; width: 4px; height: 100%; border-radius: 2px; background: linear-gradient(to top, transparent, var(--cq-you));
  transform-origin: bottom; opacity: 0.5; }
.cq-welcome.is-playing .cq-rocket__icon, .cq-welcome.is-done .cq-rocket__icon { animation: cq-rocket 1100ms var(--cq-ease-enter) 700ms both; }
.cq-welcome.is-playing .cq-rocket__trail, .cq-welcome.is-done .cq-rocket__trail { animation: cq-trail 1100ms var(--cq-ease-enter) 700ms both; }
@keyframes cq-rocket { from { transform: translateY(80px) rotate(-45deg); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-84px) rotate(-45deg); opacity: 1; } }
@keyframes cq-trail { from { transform: scaleY(0); opacity: 0.7; } 60% { opacity: 0.6; } to { transform: scaleY(0.7); opacity: 0.25; } }
/* confetti: top 3 only. Pieces fall and fade out; the final state is no confetti. */
.cq-confetti { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cq-confetti i { position: absolute; top: -12px; left: var(--x); width: 8px; height: 14px; border-radius: 2px; background: var(--c); opacity: 0; }
.cq-welcome.is-playing .cq-confetti i { animation: cq-confetti 2400ms cubic-bezier(0.25, 0.6, 0.4, 1) var(--d) both; }
@keyframes cq-confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 85% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), 560px) rotate(var(--r)); } }
.cq-welcome--calm .cq-welcome__stage { min-height: 100px; }
.cq-welcome--calm .cq-flap { opacity: 0; }
.cq-welcome--calm.is-playing .cq-flap, .cq-welcome--calm.is-done .cq-flap { animation: cq-fade 900ms var(--cq-ease-standard) 300ms both; }
.cq-welcome-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--cq-space-4); }

/* ================================================================== Top Trumps cards */
/* Two cards face down, flipped one after the other, then each measure's winner gets its tick.
   Coral header for your team, blue for theirs. Under reduced motion both show face up at once. */
.cq-trumps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cq-space-3); perspective: 1000px; }
.cq-trump { position: relative; min-height: 360px; transform-style: preserve-3d; transform: rotateY(180deg); }
.cq-trumps.is-playing .cq-trump, .cq-trumps.is-done .cq-trump { animation: cq-trump-flip 700ms var(--cq-ease-enter) calc(300ms + var(--i, 0) * 450ms) both; }
@keyframes cq-trump-flip { from { transform: rotateY(180deg); } to { transform: rotateY(0); } }
.cq-trump__face, .cq-trump__back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--cq-radius-lg); overflow: hidden; }
.cq-trump__back { transform: rotateY(180deg); display: grid; place-items: center; background: var(--cq-ink); color: var(--cq-bg); }
.cq-trump__back .cq-appbar__mark { height: 56px; }
.cq-trump__face { display: grid; grid-template-rows: auto 1fr; background: var(--cq-surface); border: 2px solid var(--cq-trump, var(--cq-you)); }
.cq-trump--them { --cq-trump: var(--cq-opponent); }
.cq-trump__head { display: grid; gap: 2px; padding: var(--cq-space-3); background: var(--cq-trump, var(--cq-you)); color: var(--cq-surface); }
.cq-trump__rank { font-size: var(--cq-text-xs); font-weight: var(--cq-weight-strong); opacity: 0.9; }
.cq-trump__name { font-family: var(--cq-font-display); font-weight: var(--cq-weight-display); font-size: var(--cq-text-lg); line-height: 1.15; overflow-wrap: anywhere; }
.cq-trump__stats { display: grid; align-content: start; padding: var(--cq-space-2) var(--cq-space-3); }
.cq-trump__stat { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: var(--cq-space-2); min-height: 44px; border-bottom: 1px solid var(--cq-border);
  font-size: var(--cq-text-sm); font-variant-numeric: var(--cq-num); }
.cq-trump__stat:last-child { border-bottom: 0; }
.cq-trump__stat b { font-family: var(--cq-font-stat); font-weight: var(--cq-weight-num-display); font-size: var(--cq-text-xl); line-height: 1; text-align: right; }
.cq-trump__tick { display: inline-flex; font-size: 18px; color: var(--cq-trump, var(--cq-you)); opacity: 0; }
.cq-trump__stat.is-win .cq-trump__tick { opacity: 1; }
.cq-trumps.is-playing .cq-trump__stat.is-win .cq-trump__tick { animation: cq-pop-in var(--cq-dur-slow) var(--cq-ease-enter) calc(1500ms + var(--j, 0) * 150ms) both; }
.cq-trumps-wrap { display: grid; gap: var(--cq-space-4); }
.cq-trumps__sum { text-align: center; font-weight: var(--cq-weight-strong); }
@container cq (min-width: 600px) { .cq-trump { min-height: 380px; } .cq-trumps { gap: var(--cq-space-5); } }

/* ================================================================== title with an info tip after it */
.cq-titletip { display: flex; align-items: center; gap: 2px; }

/* ================================================================== Pro empty state, team variants */
.cq-pro__form { margin: 0; }
/* Asked this week: disabled, but still readable, since it tells the team what happened. */
.cq-pro__msg .cq-btn[disabled] { opacity: 1; color: var(--cq-ink-muted); border-color: var(--cq-border); background: var(--cq-surface-alt); }
.cq-keypad--best .cq-keypad__answer-text { font-size: var(--cq-text-md); }
.cq-pro__note { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); max-width: 30ch; }

/* ================================================================== demo view toggle */
.cq-demobar__actions { flex-wrap: wrap; align-items: center; }
.cq-demobar__view { background: var(--cq-surface); }

/* ================================================================== notification row listing teams */
/* One team per line, up to 10, then "and N more". */
.cq-inbox__teams { display: grid; gap: 2px; margin-top: var(--cq-space-1) !important; font-size: var(--cq-text-sm); color: var(--cq-ink); }
.cq-inbox__more { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); }

/* ================================================================== quiz feedback */
/* Footer pair: app feedback goes to Challenger Quiz, quiz feedback to the league's host. */
.cq-footer { border-top: 1px solid var(--cq-border); margin-bottom: calc(var(--cq-nav-h) + env(safe-area-inset-bottom, 0px)); }
.cq-footer__inner { max-width: var(--cq-page-max); margin: 0 auto; padding: var(--cq-space-4) var(--cq-page-pad); display: flex; flex-wrap: wrap; gap: var(--cq-space-2) var(--cq-space-6); }
.cq-footer .cq-link { gap: var(--cq-space-2); min-height: 44px; }
@container cq (min-width: 720px) { .cq-footer { margin-bottom: 0; } .cq-footer__inner { padding-left: var(--cq-page-pad-wide); padding-right: var(--cq-page-pad-wide); } }
.cq-fbprompt { background: var(--cq-accent-surface); }
.cq-fbprompt__actions { display: flex; flex-wrap: wrap; gap: var(--cq-space-2); }

/* Already played (seen before, or a revisit): show the final state without animating. */
.cq-welcome.is-done *, .cq-trumps.is-done, .cq-trumps.is-done * { animation-duration: 1ms !important; animation-delay: 0s !important; }

/* ================================================================== reduced motion for this section */
@media (prefers-reduced-motion: reduce) {
  .cq-qr__bar-fill { transition: none; }
  .cq-welcome .cq-confetti { display: none; }
}

/* ==================================================================================== CORE SYSTEM
   The 27 core components, the four shared states and the six page templates (October 2026
   overhaul). Written to DESIGN.md (guidelines/10-design-md.md): content on chalk, a card only
   where it's earned, one Board per screen, type steps at least x1.25 apart, space between groups
   at least twice the space inside them. Tokens are unchanged apart from --cq-board and
   --cq-board-ink. Rules here override older component rules where DESIGN.md disagrees with them. */

/* ------------------------------------------------------------------ type steps (DESIGN 3) */
.cq-t-display { font-family: var(--cq-font-stat); font-weight: var(--cq-weight-num-display); font-size: var(--cq-text-3xl); line-height: var(--cq-lh-tight); font-variant-numeric: var(--cq-num); }
.cq-t-title { font-family: var(--cq-font-display); font-weight: var(--cq-weight-display); font-size: var(--cq-text-2xl); line-height: var(--cq-lh-tight); letter-spacing: var(--cq-tracking-display); }
.cq-t-section { font-family: var(--cq-font-display); font-weight: var(--cq-weight-display); font-size: var(--cq-text-xl); line-height: var(--cq-lh-snug); letter-spacing: var(--cq-tracking-display); }
.cq-t-lead { font-size: var(--cq-text-lg); font-weight: 600; line-height: 1.4; }
.cq-t-item { font-size: var(--cq-text-md); font-weight: var(--cq-weight-strong); line-height: var(--cq-lh-snug); }
.cq-t-meta { font-size: var(--cq-text-sm); font-weight: var(--cq-weight-regular); line-height: 1.4; color: var(--cq-ink-muted); }
.cq-t-label { font-size: var(--cq-label-size); font-weight: var(--cq-weight-strong); line-height: var(--cq-lh-snug); color: var(--cq-ink-muted); letter-spacing: var(--cq-tracking-label); }

/* Card titles are Items (16/700), never Sections. This changes every card. */
.cq-card .cq-h3, .cq-chart__title, .cq-card__title { font-family: var(--cq-font-sans); font-size: var(--cq-text-md); font-weight: var(--cq-weight-strong); line-height: var(--cq-lh-snug); letter-spacing: normal; }

/* ------------------------------------------------------------------ surfaces (DESIGN 2) */
/* Card: an edge, no shadow. 16px padding on phones, 24px from 720px. Groups inside 24px apart. */
.cq-card { gap: var(--cq-space-6); box-shadow: none; }
@container cq (min-width: 720px) { .cq-card { padding: var(--cq-space-6); } }
.cq-card--flush { padding: 0 !important; gap: 0; overflow: hidden; }
/* A card title belongs to the group under it: 8px to it, 24px between groups. */
.cq-card:not(.cq-card--flush) > .cq-card__title { margin-bottom: calc(var(--cq-space-2) - var(--cq-space-6)); }
.cq-card__group { display: grid; gap: var(--cq-space-2); }
.cq-card__group + .cq-card__group { padding-top: var(--cq-space-6); border-top: 1px solid var(--cq-border); }
/* Raised: a shadow and no border. */
.cq-pop, .cq-account__panel, .cq-toast, .cq-tour__card { border: 0 !important; }
@container cq (min-width: 600px) { .cq-menu__panel { border: 0; } }

/* Board: the screen's one moment, chalk on board green. */
.cq-board { position: relative; display: grid; gap: var(--cq-space-2); padding: var(--cq-space-6) var(--cq-space-4); border-radius: var(--cq-radius-lg);
  background: var(--cq-board); color: var(--cq-board-ink); --cq-focus: var(--cq-board-ink); }
@container cq (min-width: 720px) { .cq-board { padding: var(--cq-space-7) var(--cq-space-6); } }
.cq-board__label { font-size: var(--cq-label-size); font-weight: var(--cq-weight-strong); line-height: var(--cq-lh-snug); letter-spacing: var(--cq-tracking-label); color: var(--cq-board-ink); }
.cq-board .cq-headline__lead { color: var(--cq-board-ink); }
.cq-board__link { justify-self: start; display: inline-flex; align-items: center; gap: var(--cq-space-1); min-height: 44px; margin-top: var(--cq-space-2);
  color: var(--cq-board-ink); font-weight: var(--cq-weight-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.cq-board__link:focus-visible, .cq-board__link:active { text-decoration-thickness: 2px; }
@media (hover: hover) { .cq-board__link:hover { text-decoration-thickness: 2px; } }
.cq-board__figure { font-family: var(--cq-font-stat); font-weight: var(--cq-weight-num-display); font-size: var(--cq-text-3xl); line-height: var(--cq-lh-tight); color: var(--cq-board-ink); font-variant-numeric: var(--cq-num); }
.cq-board .cq-btn--primary { background: var(--cq-board-ink); color: var(--cq-board); }

/* ------------------------------------------------------------------ frame */
/* App bar: spacing on the scale, text steps from the type scale, 44px targets. */
.cq-appbar { gap: var(--cq-space-4); }
.cq-appbar__context { font-size: var(--cq-text-sm); }
.cq-appbar__nav a { font-size: var(--cq-label-size); }
@container cq (min-width: 720px) { .cq-appbar__nav a { font-size: var(--cq-text-md); } }
.cq-account__btn { min-height: 44px; }
.cq-count, .cq-appbar__tag { font-size: var(--cq-label-size); }
.cq-back { min-height: 44px; }
.cq-chart__data > summary { min-height: 44px; }
.cq-seg { padding: 0; gap: 0; border: 1px solid var(--cq-border-strong); border-radius: var(--cq-radius-sm); background: var(--cq-surface); }
.cq-seg__btn { min-height: 42px; border-radius: 0; }
.cq-seg__btn::before { border-radius: 0; background: var(--cq-surface-alt); transform: none; }
.cq-seg__btn[aria-pressed="true"] { color: var(--cq-ink); }
.cq-seg__btn + .cq-seg__btn { border-left: 1px solid var(--cq-border); }

/* Spacing on the scale: 20px is reserved for the chart readout. */
.cq-appbar__nav { border-top: 0; }
.cq-appbar__nav a { gap: var(--cq-space-1); }
.cq-appbar__id { gap: var(--cq-space-1); }
.cq-appbar__brand { min-height: 44px; }
.cq-account__item { min-height: 44px !important; }
.cq-btn { padding: 0 var(--cq-space-4); }
.cq-chipswitch__track { padding: var(--cq-space-1); }
.cq-key { padding: 0; gap: var(--cq-space-2) var(--cq-space-4); }
.cq-table th:first-child, .cq-table td:first-child { padding-left: var(--cq-space-4); }
.cq-table th:last-child, .cq-table td:last-child { padding-right: var(--cq-space-4); }
@container cq (min-width: 600px) { .cq-tab { padding: 0 var(--cq-space-4); } }

/* 44px targets everywhere (I7): small buttons, segments, clear and close buttons, sort links, standalone links. */
.cq-btn--sm { min-height: 44px; }
/* Compact shapes (chips, segment options, compact buttons) draw about 32px tall; an invisible ::after
   extends each one's tap area to 44px (7px out from inside the border). Anything around them leaves 8px clear above and below. */
.cq-seg__btn, .cq-swchip, .cq-qchip, .cq-btn--compact { min-height: 32px; position: relative; }
.cq-seg__btn::after, .cq-swchip::after, .cq-qchip::after, .cq-btn--compact::after { content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }
.cq-seg__btn { min-height: 30px; }
.cq-seg__btn:first-child, .cq-seg__btn:first-child::before { border-radius: 5px 0 0 5px; }
.cq-seg__btn:last-child, .cq-seg__btn:last-child::before { border-radius: 0 5px 5px 0; }
.cq-seg { margin: var(--cq-space-2) 0; }
.cq-chipswitch__track { padding-top: var(--cq-space-2) !important; padding-bottom: var(--cq-space-2) !important; }
.cq-filter2__chips { padding: var(--cq-space-2) 0; }
.cq-iconbtn, .cq-clear, .cq-toast__close { padding: 0; }
.cq-clear, .cq-toast__close { width: 44px; height: 44px; }
.cq-input-clear > .cq-input { padding-right: var(--cq-space-8); }
.cq-sort { min-height: 44px; min-width: 44px; }
.cq-link, .cq-notice__action { min-height: 44px; min-width: 44px; }
p .cq-link, td .cq-link, .cq-tplrule .cq-link { min-height: 0; min-width: 0; }
.cq-count, .cq-appbar__tag { padding: 0 var(--cq-space-1); }
.cq-rowmeta { margin-top: 0; }
legend.cq-label { padding: 0; }
.cq-asplit__legend { column-gap: var(--cq-space-4); }
.cq-skel { border-radius: var(--cq-radius-pill); }
.cq-skel-row { gap: var(--cq-space-3); }

/* PageHeader: back link, eyebrow, title, one lead line, one action. */
.cq-pagehead { display: grid; gap: var(--cq-space-2); }
.cq-pagehead__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--cq-space-4); flex-wrap: wrap; }
.cq-pagehead__titles { display: grid; gap: var(--cq-space-1); min-width: 0; }
.cq-pagehead__eyebrow, .cq-pagehead__title--label { font-size: var(--cq-label-size); font-weight: var(--cq-weight-strong); line-height: var(--cq-lh-snug); color: var(--cq-ink-muted); letter-spacing: var(--cq-tracking-label); }
.cq-pagehead__title { font-family: var(--cq-font-display); font-weight: var(--cq-weight-display); font-size: var(--cq-text-2xl); line-height: var(--cq-lh-tight); letter-spacing: var(--cq-tracking-display); }
.cq-pagehead__lead { font-size: var(--cq-text-lg); font-weight: 600; line-height: 1.4; max-width: 70ch; }
.cq-pagehead .cq-back { margin-bottom: 0; }

/* Headline: the one fact the screen leads with, at the Title step, figures in it. */
.cq-headline { display: grid; gap: var(--cq-space-2); }
.cq-headline__line { font-family: var(--cq-font-display); font-weight: var(--cq-weight-display); font-size: var(--cq-text-2xl); line-height: var(--cq-lh-tight); letter-spacing: var(--cq-tracking-display); text-wrap: balance; }
.cq-headline__lead { font-size: var(--cq-text-lg); font-weight: 600; line-height: 1.4; }
.cq-headline .cq-link { justify-self: start; min-height: 44px; }
.cq-stat2__fig { font-size: var(--cq-text-2xl); }
.cq-stat2--hero .cq-stat2__fig, .cq-stat2__fig.cq-t-display { font-size: var(--cq-text-3xl); }

/* Section: one heading on the page, its content below, a rule above when it follows a section. */
.cq-section { display: grid; gap: var(--cq-space-4); min-width: 0; }
.cq-section + .cq-section { padding-top: var(--cq-space-7); border-top: 1px solid var(--cq-border); }
.cq-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cq-space-2) var(--cq-space-4); flex-wrap: wrap; }
.cq-section__titlewrap { display: flex; align-items: center; gap: var(--cq-space-1); }
.cq-section__title { font-family: var(--cq-font-display); font-weight: var(--cq-weight-display); font-size: var(--cq-text-xl); line-height: var(--cq-lh-snug); letter-spacing: var(--cq-tracking-display); }
.cq-section__action { min-height: 44px; }
details.cq-section > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--cq-space-4); min-height: 44px; }
details.cq-section > summary::-webkit-details-marker { display: none; }
details.cq-section > summary .cq-icon { color: var(--cq-ink-muted); transition: transform var(--cq-dur-base) var(--cq-ease-enter); }
details.cq-section[open] > summary .cq-icon { transform: rotate(180deg); }

/* ------------------------------------------------------------------ RankedTable */
.cq-ranked { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: var(--cq-num); }
.cq-ranked th { height: var(--cq-th-h); padding: var(--cq-space-1); background: var(--cq-surface-alt); color: var(--cq-ink-muted);
  font-size: var(--cq-label-size); font-weight: var(--cq-weight-strong); text-align: left; white-space: nowrap; vertical-align: middle; border-bottom: 1px solid var(--cq-th-rule); }
.cq-ranked td { height: var(--cq-row-h); padding: var(--cq-space-1); border-bottom: 1px solid var(--cq-border); vertical-align: middle; position: relative; }
.cq-ranked tr > :first-child { padding-left: var(--cq-space-3); }
.cq-ranked tr > :last-child { padding-right: var(--cq-space-3); }
.cq-ranked__rank { width: 28px; text-align: right; }
td.cq-ranked__rank { font-weight: var(--cq-weight-regular); }
.cq-ranked__move { width: 24px; padding-left: 0 !important; }
.cq-ranked__move .cq-move { min-width: 0; gap: 0; font-size: var(--cq-text-sm); font-weight: var(--cq-weight-regular); color: var(--cq-ink); }
.cq-ranked__move .cq-move .cq-icon { font-size: 12px; }
.cq-ranked__team { min-width: 140px; }
.cq-ranked__name { color: var(--cq-ink); text-decoration: none; font-weight: var(--cq-weight-regular); overflow-wrap: normal; word-break: normal; hyphens: manual; }
a.cq-ranked__name::after { content: ""; position: absolute; inset: 0; }
a.cq-ranked__name:focus-visible { outline: none; }
a.cq-ranked__name:focus-visible::after { outline: var(--cq-focus-w) solid var(--cq-focus); outline-offset: -3px; }
@media (hover: hover) { a.cq-ranked__name:hover { text-decoration: underline; text-underline-offset: 0.2em; } }
.cq-ranked__form { width: 76px; padding-right: 0 !important; }
.cq-ranked__pts { width: 40px; text-align: right; }
td.cq-ranked__pts { font-weight: var(--cq-weight-strong); }
.cq-ranked__gap { display: block; font-size: var(--cq-text-sm); font-weight: var(--cq-weight-regular); color: var(--cq-ink-muted); line-height: 1.4; }
.cq-ranked .cq-col-wide { display: none; text-align: right; }
.cq-ranked tbody tr.is-you > td { background: var(--cq-you-surface); }
.cq-ranked tbody tr.is-you .cq-ranked__name { font-weight: var(--cq-weight-strong); }
.cq-ranked tbody tr.is-you > td:first-child::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cq-you); }
.cq-ranked__gaprow td { height: 32px; text-align: center; color: var(--cq-ink-muted); }
.cq-ranked tbody tr[hidden] { display: none; }
.cq-ranked-foot { display: flex; align-items: center; padding: var(--cq-space-1) var(--cq-space-3); }
.cq-ranked-note { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); line-height: 1.4; }
@container cq (max-width: 339.98px) { .cq-ranked__form { display: none; } }
@container cq (min-width: 720px) {
  .cq-ranked .cq-col-wide { display: table-cell; }
  .cq-ranked__gap { display: none; }
  .cq-ranked__form { width: 124px; padding-right: var(--cq-space-2) !important; }
  .cq-ranked th, .cq-ranked td { padding-left: var(--cq-space-2); padding-right: var(--cq-space-2); }
  .cq-ranked tr > :first-child { padding-left: var(--cq-space-4); }
  .cq-ranked tr > :last-child { padding-right: var(--cq-space-4); }
}

/* ------------------------------------------------------------------ FormGuide: three states */
/* Top 5 (the week won included): filled. Played outside the top 5: outlined. Didn't play: a dash. */
.cq-fg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 12px; gap: var(--cq-space-1); align-items: center; vertical-align: middle; }
.cq-fg__wk { width: 12px; height: 12px; }
.cq-fg__wk.is-top5 { background: var(--cq-ink); }
.cq-fg__wk.is-played { box-shadow: inset 0 0 0 2px var(--cq-border-strong); }
.cq-fg__wk.is-none { height: 2px; align-self: end; margin-bottom: 0; background: var(--cq-border-strong); }
.cq-fg__wk.is-old { display: none; }
@container cq (min-width: 720px) { .cq-fg__wk.is-old { display: block; } }
.cq-fg--season { grid-auto-columns: 1fr; gap: 4px; width: 100%; max-width: calc(var(--n, 13) * 28px); }
.cq-fg--season .cq-fg__wk { width: 100%; height: auto; aspect-ratio: 1; }
.cq-fg--season .cq-fg__wk.is-none { height: 2px; aspect-ratio: auto; margin-bottom: 0; }
.cq-fgblock { display: grid; gap: var(--cq-space-1); }
.cq-fgblock__ends { display: flex; justify-content: space-between; max-width: calc(var(--n, 13) * 28px); font-size: var(--cq-label-size); font-weight: var(--cq-weight-strong); color: var(--cq-ink-muted); }
.cq-fgkey { display: flex; flex-wrap: wrap; gap: var(--cq-space-1) var(--cq-space-4); font-size: var(--cq-text-sm); color: var(--cq-ink-muted); }
.cq-fgkey li { display: inline-flex; align-items: center; gap: var(--cq-space-2); }

/* ------------------------------------------------------------------ Pill: status and title */
.cq-pill { display: inline-flex; align-items: center; gap: var(--cq-space-1); min-height: 24px; padding: 0 var(--cq-space-2); border-radius: var(--cq-radius-pill);
  border: 1px solid var(--cq-border-strong); background: var(--cq-surface); color: var(--cq-ink); font-size: var(--cq-label-size); font-weight: var(--cq-weight-strong); white-space: nowrap; line-height: 1; }
.cq-pill .cq-icon { font-size: 14px; }
.cq-pill--success { color: var(--cq-success-ink); border-color: var(--cq-success-border); }
.cq-pill--warning { color: var(--cq-warning-ink); border-color: var(--cq-warning-border); }
.cq-pill--error { color: var(--cq-error-ink); border-color: var(--cq-error-border); }
.cq-pill--title { min-height: 32px; padding: 0 var(--cq-space-3); background: var(--cq-surface); text-decoration: none; color: var(--cq-ink); }
a.cq-pill--title { min-height: 44px; }
.cq-pill--title .cq-pill__chev { color: var(--cq-ink-muted); }
@media (hover: hover) { a.cq-pill--title:hover { border-color: var(--cq-ink); } }

/* ------------------------------------------------------------------ ListRow */
.cq-rows { display: grid; }
.cq-rows > li { border-bottom: 1px solid var(--cq-border); }
.cq-rows > li:first-child { border-top: 1px solid var(--cq-border); }
.cq-card--flush .cq-rows > li:first-child { border-top: 0; }
.cq-card--flush .cq-rows > li:last-child { border-bottom: 0; }
.cq-lr { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--cq-space-2) var(--cq-space-4);
  min-height: 56px; padding: var(--cq-space-2) 0; color: var(--cq-ink); text-decoration: none; }
.cq-card--flush .cq-lr { padding: var(--cq-space-2) var(--cq-space-4); }
a.cq-lr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cq-row-hover); opacity: 0; transition: opacity var(--cq-dur-fast) var(--cq-ease-standard); }
a.cq-lr:active::before { opacity: 1; }
@media (hover: hover) { a.cq-lr:hover::before { opacity: 1; } a.cq-lr:hover .cq-lr__chev { transform: translateX(3px); } }
a.cq-lr:focus-visible { outline-offset: -3px; }
.cq-lr__main { display: grid; gap: var(--cq-space-1); min-width: 0; }
.cq-lr__title { font-size: var(--cq-text-md); font-weight: var(--cq-weight-strong); line-height: var(--cq-lh-snug); overflow-wrap: break-word; }
.cq-lr__meta { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); line-height: 1.4; }
.cq-lr__fig { font-variant-numeric: var(--cq-num); color: var(--cq-ink); white-space: nowrap; text-align: right; }
.cq-lr__chev { color: var(--cq-ink-muted); transition: transform var(--cq-dur-base) var(--cq-ease-enter); }
.cq-lr__acts { display: flex; align-items: center; gap: var(--cq-space-1); }
.cq-lr--note { grid-template-columns: 8px minmax(0, 1fr) auto; align-items: start; }
.cq-lr__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: var(--cq-space-2); }
.cq-lr--note.is-unread .cq-lr__dot { background: var(--cq-ink); }
.cq-lr--note.is-unread .cq-lr__title { font-weight: var(--cq-weight-strong); }
.cq-lr--note:not(.is-unread) .cq-lr__title { font-weight: var(--cq-weight-regular); }
.cq-lr__time { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); white-space: nowrap; }
.cq-lr--pair .cq-lr__main { grid-template-columns: 1fr 1fr; gap: var(--cq-space-4); }

/* ------------------------------------------------------------------ Stat */
.cq-stat2 { display: grid; gap: var(--cq-space-1); align-content: start; min-width: 0; }
.cq-stat2__label { font-size: var(--cq-label-size); font-weight: var(--cq-weight-strong); color: var(--cq-ink-muted); letter-spacing: var(--cq-tracking-label); line-height: var(--cq-lh-snug); }
.cq-stat2__fig { font-family: var(--cq-font-stat); font-weight: var(--cq-weight-num-display); font-size: var(--cq-text-3xl); line-height: var(--cq-lh-tight); font-variant-numeric: var(--cq-num); }
.cq-stat2__fig small { font-size: 0.5em; font-family: var(--cq-font-sans); font-weight: var(--cq-weight-regular); color: var(--cq-ink-muted); }
.cq-stat2__how { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); line-height: 1.4; }
.cq-stat2__how b { color: var(--cq-ink); font-weight: var(--cq-weight-strong); }
.cq-stats { display: grid; gap: var(--cq-space-6) var(--cq-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container cq (min-width: 600px) { .cq-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cq-stat2--inline { display: inline-flex; align-items: baseline; gap: var(--cq-space-2); }
.cq-stat2--inline .cq-stat2__fig { font-size: var(--cq-text-xl); }
/* score: the Quiz Health arc with its band, the three legs under it */
.cq-score { display: grid; gap: var(--cq-space-6); }
.cq-score__top { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--cq-space-4); align-items: center; }
.cq-score__arc { width: 120px; height: auto; }
.cq-score__track, .cq-score__fill { fill: none; stroke-width: 12; }
.cq-score__track { stroke: var(--cq-meter-track); }
.cq-score__fill { stroke: var(--cq-meter-fill); }
.cq-score__tick { stroke: var(--cq-surface); stroke-width: 3; }
.cq-score__band { display: inline-flex; align-items: center; gap: var(--cq-space-1); font-weight: var(--cq-weight-strong); }
.cq-legs { display: grid; gap: var(--cq-space-4); }
.cq-leg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--cq-space-1) var(--cq-space-4); align-items: baseline; }
.cq-leg__name { font-weight: var(--cq-weight-strong); }
.cq-leg__val { font-weight: var(--cq-weight-strong); font-variant-numeric: var(--cq-num); }
.cq-leg .cq-meter, .cq-leg__how { grid-column: 1 / -1; }
.cq-leg__how { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); }
/* range strip with Best and Worst ends */
.cq-rangeends { display: flex; justify-content: space-between; font-size: var(--cq-text-sm); color: var(--cq-ink-muted); }

/* ------------------------------------------------------------------ Filter */
.cq-filter2 { display: grid; gap: var(--cq-space-3); }
.cq-filter2__bar { display: flex; align-items: center; gap: var(--cq-space-3); flex-wrap: wrap; }
.cq-filter2__sum { flex: 1 1 12em; font-size: var(--cq-text-sm); color: var(--cq-ink); }
.cq-filter2__chips { display: flex; gap: var(--cq-space-2); flex-wrap: wrap; }
.cq-qchip { display: inline-flex; align-items: center; gap: var(--cq-space-1); min-height: 32px; padding: 0 var(--cq-space-3); border-radius: var(--cq-radius-pill);
  border: 1px solid var(--cq-border-strong); background: var(--cq-surface); color: var(--cq-ink); font: inherit; font-size: var(--cq-text-sm); cursor: pointer; white-space: nowrap; font-variant-numeric: var(--cq-num); }
.cq-qchip[aria-pressed="true"] { background: var(--cq-ink); border-color: var(--cq-ink); color: var(--cq-bg); font-weight: var(--cq-weight-strong); }

/* ------------------------------------------------------------------ Button: compact keeps 44px targets */
.cq-btn--compact { padding: 0 var(--cq-space-3); font-size: var(--cq-text-sm); border-radius: var(--cq-radius-sm); }
.cq-btn--compact::before { inset: -1px; }
.cq-iconbtn--sq { border-radius: var(--cq-radius-md); }

/* ------------------------------------------------------------------ Field extras: rating, copy, hidden code */
.cq-rating { display: grid; grid-template-columns: repeat(5, minmax(44px, 1fr)); gap: var(--cq-space-2); max-width: 320px; }
.cq-rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cq-rating label { display: grid; place-items: center; min-height: 44px; border: 1px solid var(--cq-border-strong); border-radius: var(--cq-radius-md); font-weight: var(--cq-weight-strong); cursor: pointer; font-variant-numeric: var(--cq-num); }
.cq-rating input:checked + label { background: var(--cq-accent); border-color: var(--cq-accent); color: var(--cq-on-accent); }
.cq-rating input:focus-visible + label { outline: var(--cq-focus-w) solid var(--cq-focus); outline-offset: var(--cq-focus-offset); }
.cq-rating__ends { display: flex; justify-content: space-between; max-width: 320px; font-size: var(--cq-text-sm); color: var(--cq-ink-muted); }
.cq-copy { display: flex; gap: var(--cq-space-2); }
.cq-copy .cq-input { flex: 1 1 auto; min-width: 0; }
.cq-code { display: flex; align-items: center; gap: var(--cq-space-3); }
.cq-code__val { font-variant-numeric: var(--cq-num); font-weight: var(--cq-weight-strong); font-size: var(--cq-text-lg); letter-spacing: 0.1em; }
.cq-code:not(.is-shown) .cq-code__val { filter: blur(6px); user-select: none; }
.cq-textarea { min-height: 112px; padding: var(--cq-space-3) var(--cq-space-4); resize: vertical; line-height: var(--cq-lh-body); font-family: var(--cq-font-sans); }
.cq-input::placeholder, .cq-textarea::placeholder { font-family: var(--cq-font-sans); }
.cq-drop { border-style: solid; }

/* ------------------------------------------------------------------ Form */
.cq-form2 { display: grid; gap: var(--cq-space-6); }
.cq-form2__fields { display: grid; gap: var(--cq-space-3); }
.cq-form2__optional { display: grid; gap: var(--cq-space-3); padding-top: var(--cq-space-6); border-top: 1px solid var(--cq-border); }
.cq-form2__actions { display: flex; gap: var(--cq-space-3); flex-wrap: wrap; }
.cq-blocked { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); }
.cq-dz { display: grid; gap: var(--cq-space-3); justify-items: start; }
.cq-dz__panel { display: grid; gap: var(--cq-space-4); width: 100%; padding-top: var(--cq-space-4); }

/* ------------------------------------------------------------------ QuestionCard */
.cq-qrow { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--cq-space-1) var(--cq-space-3); padding: var(--cq-space-3) 0; border-bottom: 1px solid var(--cq-border); align-items: start; }
.cq-qrow:first-child { border-top: 1px solid var(--cq-border); }
.cq-qrow__n { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); font-variant-numeric: var(--cq-num); }
.cq-qrow__q { font-weight: var(--cq-weight-strong); line-height: var(--cq-lh-snug); }
.cq-qrow__ans { grid-column: 2 / -1; font-size: var(--cq-text-sm); color: var(--cq-ink-muted); }
.cq-qrow__ans b { color: var(--cq-ink); font-weight: var(--cq-weight-strong); }
.cq-qrow .cq-result { font-size: var(--cq-text-sm); }
.cq-qdetail { display: grid; gap: var(--cq-space-6); }
.cq-qdetail__answer { display: grid; gap: var(--cq-space-1); }

/* ------------------------------------------------------------------ Finding */
.cq-find { border-bottom: 1px solid var(--cq-border); }
.cq-find:first-child { border-top: 1px solid var(--cq-border); }
.cq-find > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--cq-space-1) var(--cq-space-3); min-height: 56px; padding: var(--cq-space-2) 0; }
.cq-find > summary::-webkit-details-marker { display: none; }
.cq-find__name { font-weight: var(--cq-weight-strong); }
.cq-find__verdict { grid-column: 1; font-size: var(--cq-text-sm); color: var(--cq-ink-muted); }
.cq-find > summary .cq-icon { grid-row: 1 / span 2; grid-column: 2; color: var(--cq-ink-muted); }
.cq-find[open] > summary .cq-icon { transform: rotate(180deg); }
.cq-find__body { display: grid; gap: var(--cq-space-3); padding-bottom: var(--cq-space-4); }
.cq-find--flagged > summary .cq-pill, .cq-find__body > .cq-pill, .cq-find__body > .cq-link { justify-self: start; }

/* ------------------------------------------------------------------ Chart: bar list */
.cq-barlist { display: grid; gap: var(--cq-space-3); }
.cq-barlist__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--cq-space-1) var(--cq-space-3); align-items: baseline; }
.cq-barlist__row .cq-meter { grid-column: 1 / -1; height: 8px; }
.cq-barlist__val { font-variant-numeric: var(--cq-num); font-weight: var(--cq-weight-strong); }

/* ------------------------------------------------------------------ shared states */
.cq-state { display: grid; gap: var(--cq-space-2); justify-items: start; padding: var(--cq-space-6) 0; }
.cq-card > .cq-state { padding: 0; }
.cq-state__why { font-weight: var(--cq-weight-strong); }
.cq-state__next { font-size: var(--cq-text-sm); color: var(--cq-ink-muted); }
.cq-state .cq-btn, .cq-state .cq-link { margin-top: var(--cq-space-2); }

/* ------------------------------------------------------------------ page templates */
.cq-tpl { width: 100%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cq-space-7);
  padding: var(--cq-space-6) var(--cq-page-pad) calc(var(--cq-space-8) + var(--cq-nav-h) + env(safe-area-inset-bottom, 0px)); }
@container cq (min-width: 720px) { .cq-tpl { gap: var(--cq-space-8); padding: var(--cq-space-7) var(--cq-page-pad-wide) var(--cq-space-8); } }
.cq-tpl--narrow { max-width: calc(720px + 2 * var(--cq-page-pad-wide)); }
.cq-tpl--form { max-width: calc(640px + 2 * var(--cq-page-pad-wide)); }
.cq-tpl--moment { max-width: calc(480px + 2 * var(--cq-page-pad-wide)); min-height: 100%; align-content: center; padding-bottom: var(--cq-space-8); }
.cq-tpl__lead { display: grid; gap: var(--cq-space-6); }
.cq-tpl__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cq-space-7); }
.cq-tpl__main, .cq-tpl__side { container: cq / inline-size; display: grid; gap: var(--cq-space-7); align-content: start; min-width: 0; }
.cq-tpl__main > .cq-tablewrap { max-width: 720px; }
.cq-tablewrap { display: grid; gap: var(--cq-space-3); }
@container cq (min-width: 720px) { .cq-tpl__main, .cq-tpl__side, .cq-tpl__cols { gap: var(--cq-space-8); } }
@container cq (min-width: 960px) {
  .cq-tpl__cols { grid-template-columns: minmax(0, 1fr) 360px; }
}
/* Team profile identity block: Headline then the season's form */
.cq-identity { display: grid; gap: var(--cq-space-2); }
.cq-tabs--page { width: 100%; }
/* documentation of a template: its rule above a live example */
.cq-tplrule { display: grid; gap: var(--cq-space-1); padding: var(--cq-space-4); margin: var(--cq-space-4) var(--cq-space-4) 0; border: 1px solid var(--cq-border); border-radius: var(--cq-radius-lg); background: var(--cq-surface); }
.cq-tplrule dt { font-size: var(--cq-label-size); font-weight: var(--cq-weight-strong); color: var(--cq-ink-muted); }
.cq-tplrule dd { margin: 0 0 var(--cq-space-2); font-size: var(--cq-text-sm); }
/* Deprecated components keep working; this is only the notice on their cards. */
.cq-deprecated { padding: var(--cq-space-3) var(--cq-space-4); margin-bottom: var(--cq-space-4); border: 1px solid var(--cq-warning-border); border-radius: var(--cq-radius-md); background: var(--cq-warning-surface); color: var(--cq-ink); font-size: var(--cq-text-sm); }

/* Pro gate: a feature that needs Pro. The blurred, inert preview and the message are siblings in one
   grid cell, so nothing with a card's edge sits inside another. */
.cq-gate { display: grid; isolation: isolate; }
.cq-gate > * { grid-area: 1 / 1; }
.cq-gate__preview { filter: blur(5px); opacity: 0.5; pointer-events: none; user-select: none; }
.cq-gate__msg { z-index: 1; align-self: center; justify-self: center; width: min(100% - 32px, 360px); margin: var(--cq-space-6) 0; padding: var(--cq-space-6) var(--cq-space-4);
  background: var(--cq-surface); border-radius: var(--cq-radius-lg); box-shadow: var(--cq-shadow-2); }
.cq-gate__msg .cq-state { padding: 0; }
.cq-gate__msg .cq-btn[disabled] { opacity: 1; color: var(--cq-ink-muted); border-color: var(--cq-border); background: var(--cq-surface-alt); }
.cq-showdown { overflow: clip; }
/* Fixes from the batch 2 app migration */
.cq-pagehead__lead { max-width: 39em; } /* 70ch measures the 0 glyph and let 18px leads run to about 97 characters; 39em holds about 70 */
a.cq-qchip { text-decoration: none; }
.cq-keypad__answer { row-gap: var(--cq-space-1); }