/* 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); }

.ev-res-lines { display: grid; gap: 6px; }
.ev-res-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--on-navy) 7%, 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. */
.ev-res-row.is-me { background: color-mix(in srgb, var(--chartreuse) 18%, transparent); }
.ev-res-who { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.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 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);
}