/* site/app/takeover.css — the blocking screen. Scoped under `.tko`.
 *
 * ⚠ NOT UNDER A SCREEN'S CLASS, because it is not a screen's: the call can arrive over any tab, and
 *   the layer lives on <body> rather than inside `.ev`. `tko-` is the prefix that keeps it apart.
 */

.tko {
  /* ⚠ FIXED AND inset:0, NOT 100dvh. shell.css's long .fnav note has the reasoning: a fixed box
     sized by its edges tracks the browser's toolbars in every state, and the height units do not.
     The same decision as .stage and .boot. */
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: max(var(--safe-top), 20px) 20px max(var(--safe-bottom), 20px);
  /* The ground is the brand's identity surface, which DESIGN.md reserves for exactly this kind of
     moment — the app stepping forward to say one thing. */
  background: var(--navy-90);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  color: var(--on-navy);
  /* The layer is its own scrollport: a result card with eight rows of analytics is taller than a
     small phone, and the page underneath is inert. */
  overflow-y: auto; overscroll-behavior: contain;
}

/* ⚠ MATERIALISE, DON'T FADE (apple-design §12). The surface arrives as a thing — blur and scale
   together — rather than as an opacity ramp, which reads as a picture of a panel rather than a
   panel. Out the same way, reversed, so the two are one movement. */
.tko { transition: opacity 200ms var(--ease-out), backdrop-filter 200ms var(--ease-out); }
.tko-card {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: transform 260ms var(--ease-out), opacity 200ms var(--ease-out);
}
.tko.is-in { opacity: 0; }
.tko.is-in .tko-card { transform: scale(.92); opacity: 0; }
.tko.is-out { opacity: 0; }
.tko.is-out .tko-card { transform: scale(.96); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .tko, .tko-card { transition: none; }
  .tko.is-in, .tko.is-in .tko-card, .tko.is-out, .tko.is-out .tko-card {
    opacity: 1; transform: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .tko { background: var(--navy); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── The way out, where there is one ────────────────────────────────────────
   Syd: "will have an X on the top right". Top right of the LAYER, not of the card, because that is
   where a thumb expects a close on a full screen — and 44px, because it is the only control on a
   screen that is otherwise deliberately hard to leave. */
.tko-x {
  position: fixed; top: max(var(--safe-top), 10px); right: max(var(--safe-right), 10px);
  width: var(--tap-min); height: var(--tap-min);
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-full, 999px);
  background: color-mix(in srgb, var(--on-navy) 12%, transparent);
  color: var(--on-navy); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.tko-x svg { width: 20px; height: 20px; display: block; }
.tko-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── The timer ──────────────────────────────────────────────────────────────
   A ring that runs down, with the seconds inside it. */
.tko-ring {
  position: relative; width: 168px; height: 168px; margin-bottom: 26px;
  display: grid; place-items: center;
}
.tko-ring-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* ⚠ THE ARC STARTS AT TWELVE O'CLOCK. An SVG circle starts at three, and a timer that begins on
     its side is the detail that makes a good ring look wrong without anyone naming why. */
  transform: rotate(-90deg);
}
.tko-ring-track {
  fill: none; stroke: color-mix(in srgb, var(--on-navy) 16%, transparent); stroke-width: 7;
}
.tko-ring-arc {
  fill: none; stroke: var(--chartreuse); stroke-width: 7; stroke-linecap: round;
  /* ⚠ 250ms, THE TICK INTERVAL, AND NOT A FRAME LONGER. event.js updates this four times a second;
     a transition longer than the gap between updates never arrives before the next one and the ring
     crawls behind the number. Matched, the arc glides between ticks instead of stepping. */
  transition: stroke-dashoffset 250ms linear, stroke 200ms var(--ease-out);
}
/* The last five seconds: the ring turns to the action colour. A second channel for the same fact,
   for a glance from the far side of a court. Orange is DESIGN.md's action colour and this is the
   moment the screen is asking for one. */
.tko-ring.is-urgent .tko-ring-arc { stroke: var(--orange); }
.tko-ring-n {
  font-family: var(--font-display); font-weight: 600; font-size: 54px; line-height: 1;
  letter-spacing: -.03em; color: var(--on-navy);
  font-variant-numeric: tabular-nums;
}
.tko-ring-u {
  position: absolute; bottom: 34px;
  font: 600 11px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-navy-dim);
}
@media (prefers-reduced-motion: reduce) {
  .tko-ring-arc { transition: none; }
}

/* ── Words ──────────────────────────────────────────────────────────────── */
.tko-t {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  /* Tracking tightens as the type grows — apple-design §15. */
  font-size: 30px; line-height: 1.1; letter-spacing: -.02em; color: var(--on-navy);
}
.tko-s {
  margin: 10px 0 0; max-width: 30ch;
  font: 500 15px/1.45 var(--font-ui); color: var(--on-navy-dim);
}
.tko-body { width: 100%; margin-top: 24px; }
.tko-actions {
  width: 100%; margin-top: 28px; display: grid; gap: 10px;
}

/* ⚠ THE LAYER'S OWN BUTTONS ARE ON NAVY, so the app's `.btn` colours — built for a cream page —
   are re-stated here rather than inherited into something illegible. */
.tko .btn-primary { background: var(--orange); color: var(--action-ink); }
.tko .btn-quiet {
  background: color-mix(in srgb, var(--on-navy) 12%, transparent);
  color: var(--on-navy); border: 0;
}

/* ── A narrow phone ─────────────────────────────────────────────────────────
   320px: the ring and the display type both come down a step so the card still fits above the
   actions without the layer scrolling for a screen that is meant to be read at a glance. */
@media (max-width: 340px) {
  .tko-ring { width: 140px; height: 140px; margin-bottom: 20px; }
  .tko-ring-n { font-size: 44px; }
  .tko-ring-u { bottom: 26px; }
  .tko-t { font-size: 26px; }
}

/* ── The slide, on navy ─────────────────────────────────────────────────────
   The control itself is event.css's, carried in on the `.ev` class the layer's body wears. Only the
   colours are re-stated: `--bg-sunken` and `--ink` are the cream page's, and on this ground the
   track vanishes and the knob turns the same navy as the screen behind it. */
.tko .ev .ev-slide {
  margin-top: 0;
  background: color-mix(in srgb, var(--on-navy) 14%, transparent);
}
.tko .ev .ev-slide-lab { color: var(--on-navy-dim); }
.tko .ev .ev-knob { background: var(--on-navy); color: var(--navy); }
/* The filled part is the live colour at full strength here — on navy the 55% mix reads as grey. */
.tko .ev .ev-slide-fill { background: color-mix(in srgb, var(--chartreuse) 78%, transparent); }
/* ⚠ THE PLAIN BUTTON STAYS VISUALLY HIDDEN, as it is on the page: it is the keyboard and switch
   path, drawn only when focused or when the phone asks for reduced motion (event.css says why).
   Its own rule already does that; this only gives it the layer's colours when it IS drawn. */
.tko .ev .ev-accept { background: color-mix(in srgb, var(--on-navy) 12%, transparent); color: var(--on-navy); }

/* ── The finish-match screen ────────────────────────────────────────────────
   A scoreboard, a line per player with their rating moving, and your own three numbers. It is the
   one takeover that scrolls: four rating rows and three stats do not fit a small phone above the
   acknowledge button, and the layer is its own scrollport for exactly this. */
.ev-res { display: grid; gap: 22px; }

.ev-res-board {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
}
.ev-res-side { display: grid; justify-items: center; gap: 8px; }
.ev-res-side-lab {
  font: 700 10px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-navy-dim);
}
.ev-res-side.is-mine .ev-res-side-lab { color: var(--chartreuse); }
/* ⚠ NO `gap` HERE — the two heads deliberately OVERLAP, and a negative gap is not a thing CSS has.
   The overlap is what says "a pair" rather than "two people"; the ring is the ground showing through
   so the one in front reads as in front. */
.ev-res-heads { display: flex; }
/* ⚠ -6px ON A 26px DISC, NOT -10. At ten the two sets of initials ran together into one word —
   "EM" behind "MA" read as EMMA, which is a name. Six still overlaps enough to say "a pair" and
   leaves both pairs of letters whole. */
.ev-res-heads .ev-av { margin-right: -6px; box-shadow: 0 0 0 2px var(--navy); }
.ev-res-heads .ev-av:last-child { margin-right: 0; }
.ev-res-score {
  font-family: var(--font-display); font-weight: 600; font-size: 42px; line-height: 1;
  letter-spacing: -.03em; color: var(--on-navy); font-variant-numeric: tabular-nums;
}
.ev-res-dash { font-size: 24px; color: var(--on-navy-dim); }

/* ── The two teams, as two things ───────────────────────────────────────────
   Syd, 2026-09-16: "make sure the player list here has a clear distinction between the two teams,
   like maybe they can be spaced / be contained in different tables."
   ⚠ BOTH CHANNELS, BECAUSE EITHER ALONE IS WEAK HERE. Space says "these are separate"; a container
     says "and these belong together". A gap on its own would have read as a list with a wider line
     in it, which is what the flat version already looked like to anyone glancing.
   ⚠ THE GAP BETWEEN GROUPS IS BIGGER THAN THE GAP INSIDE ONE — 14 against 6. That ordering is the
     whole mechanism (proximity is grouping, DESIGN.md §2); equal gaps would put four rows back in
     one column however they were boxed. */
.ev-res { --res-gap-in: 6px; --res-gap-out: 14px; }
.ev-res-team {
  display: grid; gap: 8px;
  padding: 12px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--on-navy) 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-navy) 8%, transparent);
}
.ev-res-team + .ev-res-team { margin-top: var(--res-gap-out); }
/* Your side carries the chartreuse the scoreboard's own "YOUR TEAM" label uses — one colour for
   one idea, rather than a second way of saying which side is yours. */
.ev-res-team.is-mine {
  background: color-mix(in srgb, var(--chartreuse) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chartreuse) 22%, transparent);
}
.ev-res-team-lab {
  font: 700 10px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-navy-dim);
}
.ev-res-team.is-mine .ev-res-team-lab { color: var(--chartreuse); }

.ev-res-lines { display: grid; gap: var(--res-gap-in); }
.ev-res-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-md);
  /* 10%, not 7: the row now sits on the group's own 5% wash rather than straight on the layer, so
     it needs the extra to stay a distinct object rather than dissolving into its container. */
  background: color-mix(in srgb, var(--on-navy) 10%, transparent);
  text-align: left;
}
/* Your own row is filled, the same decision the queue row makes: "which one is me" has to survive
   being glanced at on a screen you are reading once. */
/* ⚠ STRONGER THAN IT WAS, because it now sits on a tinted ground rather than a plain one. At the
   old 18% your own row and its group's 9% wash were four points apart and the row stopped reading
   as picked out at all. */
.ev-res-row.is-me { background: color-mix(in srgb, var(--chartreuse) 30%, transparent); }
.ev-res-who { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
/* The club mark, then the name — the same line the queue row draws, on the navy card. */
.ev-res-nl { display: flex; align-items: center; gap: 5px; min-width: 0; }
.ev-res-n {
  font: 600 14px/1.25 var(--font-ui); color: var(--on-navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ev-res-sub { font: 500 12px/1.2 var(--font-ui); color: var(--on-navy-dim); }
.ev-res-rating { flex: none; display: grid; justify-items: end; gap: 2px; }
.ev-res-rating-n {
  font: 700 15px/1 var(--font-ui); color: var(--on-navy); font-variant-numeric: tabular-nums;
}
.ev-res-delta { font: 700 12px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
/* ⚠ A SIGN AND A COLOUR, NOT A COLOUR. countTo() writes the "+" itself; red and green alone would
   be the whole message for a reader who cannot separate them. */
.ev-res-delta.is-up { color: var(--chartreuse); }
.ev-res-delta.is-down { color: var(--on-navy-dim); }

.ev-res-you { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ev-res-stat {
  display: grid; justify-items: center; gap: 4px;
  padding: 14px 8px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--on-navy) 7%, transparent);
}
.ev-res-stat-v {
  font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1;
  color: var(--on-navy); font-variant-numeric: tabular-nums;
}
.ev-res-stat-k {
  font: 600 10px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-navy-dim); text-align: center;
}

@media (max-width: 340px) {
  .ev-res-score { font-size: 34px; }
  .ev-res-stat-v { font-size: 19px; }
  /* ⚠ THE CLUB MARK KEEPS ITS BADGE AND DROPS ITS FOUR CHARACTERS, the same trade the queue row
     and the board make at this breakpoint. Measured at 320px with the tag shown: "Emman Mendoza"
     was 22px short and "Migs Alcantara" 4px, on a card whose whole subject is who those four
     people were. The badge stays because the row has the width for it; the tag does not. */
  .tko .clb-tag { display: none; }
  .tko .clb-mark { gap: 0; }
  .ev-res-nl { gap: 4px; }
}

/* The initials disc is event.css's, carried in on `.ev`; these are the two colours that were mixed
   for a cream card and vanish on navy. */
.tko .ev .ev-av {
  background: color-mix(in srgb, var(--on-navy) 16%, transparent);
  color: var(--on-navy);
}
.tko .ev .ev-res-row.is-me .ev-av {
  background: color-mix(in srgb, var(--chartreuse) 30%, transparent);
  color: var(--on-navy);
}