/* ===================================================================== *
 * Blurred Lines: table tracker
 *
 * Loaded after tokens.css and nothing else. The tracker does not use
 * base.css or components.css: it is an app with its own chrome, and it has
 * to work offline from a service worker, so it pays for two stylesheets.
 *
 * Measured values come from design/tracker/reference/specs/*.json and the
 * screenshots beside them. Every colour is a token.
 *
 * TWO DELIBERATE DEPARTURES FROM THE DESIGN PACK, both because the site
 * already decided otherwise and the site wins (design/tracker/CLAUDE.md
 * says the design wins where the site is silent -- here it is not):
 *
 * 1. NO LIGHT PALETTE. The pack ships one, and six light frames. The site
 *    removed its light palette in Sep 2026 by owner decision and pinned
 *    color-scheme: dark -- see the note at the top of tokens.css, which
 *    explains why following prefers-color-scheme meant most visitors got
 *    the light palette. The tracker is dark for everyone, like every other
 *    page. To reverse: add the pack's @media block, nothing else changes.
 *
 * 2. THE SITE'S YELLOW AND PINK, NOT THE PACK'S. The pack specifies
 *    #F2EA0C / #FF3E6C; the site recoloured --yellow and --pink to
 *    #FFE01A / #FF7A7A in Sep 2026 for the card redesign, with a standing
 *    instruction in tokens.css to re-apply that when a pack is re-copied.
 *    So the tracker uses --yellow and --pink and reads very slightly warmer
 *    and lighter than its comps. Contrast is unaffected or better: the
 *    lighter pink raises ink-on-pink above the pack's measured 5.4.
 * ===================================================================== */

/* The faces, self-hosted, same files the rest of the site uses. They are
   declared here because base.css declares them for every other page and the
   tracker does not load base.css -- without this it quietly renders in Arial
   Narrow, which looks nearly right and is the wrong width everywhere.
   Only the three the tracker actually uses: no italics. */
@font-face {
  font-family: 'Bebas Neue';
  src: url('/assets/fonts/BebasNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/assets/fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/assets/fonts/AtkinsonHyperlegible-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- names the pack uses, mapped onto the site's tokens -------------- */
  --tr-bg: var(--bg-0);
  --tr-row: var(--bg-1);
  --tr-foot: var(--footer);
  --tr-err: var(--error);
  --tr-accent: var(--accent-text);
  --tr-black: #0A0A0B;            /* timer plates and the logo tile only */

  /* The two brand fills, behind a knob of their own. The site's current
     values are the default (see deviation 2 at the top). To go back to the
     design pack's pair, change these two lines and nothing else:
         --tr-yellow: #F2EA0C;  --tr-pink: #FF3E6C; */
  --tr-yellow: var(--yellow);
  --tr-pink: var(--pink);

  /* ---- podium ---------------------------------------------------------- */
  --tr-gold: #E8B923;
  --tr-silver: #C9CED6;
  --tr-bronze: #CD7F32;

  /* ---- timer plates. Saturated fills, so they never vary -------------- */
  --tr-timer-bg: var(--tr-black);
  --tr-timer-fg: var(--tr-yellow);
  --tr-timer-shadow: var(--tr-pink);
  --tr-timer-debate-border: var(--purple);
  --tr-alert-bg: var(--red);
  --tr-alert-fg: var(--white);
  --tr-alert-shadow: var(--tr-yellow);
  --tr-paused-fg: rgba(255, 255, 255, .66);

  /* ---- shape and layout ------------------------------------------------ */
  --tr-gutter: 16px;              /* NOT --gutter: the site's is 20 and grows */
  --tr-col: 480px;                /* no desktop layout; a phone column, centred */
  --tr-header-h: 64px;
  --tr-shadow-btn: 4px 4px 0;
  --tr-shadow-plate: 6px 6px 0;
  --tr-shadow-dialog: 8px 8px 0;
}

/* ===================================================================== */
/* Base                                                                  */
/* ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* The buttons and rows here are flex and grid, both of which beat the
   browser's own [hidden] rule. Without this, hiding a thing leaves it on
   screen -- an empty outlined box where the secondary button used to be. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body.tr {
  margin: 0 auto;
  max-width: var(--tr-col);
  min-width: 320px;
  background: var(--tr-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.45;
  /* The bar is fixed, so the page keeps its own height clear of it. */
  padding-bottom: calc(var(--tr-bar-h, 143px) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}

h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: var(--text); }

:focus-visible {
  outline: var(--outline);
  outline-offset: var(--outline-offset);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tr-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 12px 16px;
  background: var(--tr-yellow);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.tr-skip:focus { left: 0; }

.tr-icon { display: block; width: 20px; height: 20px; flex: none; }
.tr-icon--14 { width: 14px; height: 14px; }
.tr-icon--15 { width: 15px; height: 15px; }
.tr-icon--17 { width: 17px; height: 17px; }
.tr-icon--18 { width: 18px; height: 18px; }
.tr-icon--20 { width: 20px; height: 20px; }
.tr-icon--22 { width: 22px; height: 22px; }
.tr-icon--26 { width: 26px; height: 26px; }
.tr-icon--38 { width: 38px; height: 38px; }
/* The two social glyphs come from the site's bi_icon(), which sets its own class. */
.bi { display: block; width: 18px; height: 18px; flex: none; fill: currentColor; }

/* ===================================================================== */
/* Header                                                                */
/* ===================================================================== */

.tr-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--tr-header-h);
  padding: 0 var(--tr-gutter);
  background: var(--tr-bg);
}

.tr-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 72px;
  height: 49px;
  padding: 5px 6px;
  background: var(--tr-black);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 19px;
  line-height: .94;
  letter-spacing: .01em;
  text-decoration: none;
  text-transform: uppercase;
  margin-right: auto;
}

.tr-lang {
  display: flex;
  border: 2px solid var(--text);
}
.tr-lang__item {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: .04em;
  text-decoration: none;
}
.tr-lang__item.is-current {
  background: var(--tr-yellow);
  color: var(--ink);
}

.tr-gear {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: var(--border) solid var(--text);
  background: none;
}

/* ===================================================================== */
/* Game section                                                          */
/* ===================================================================== */

.tr-game {
  padding: 28px var(--tr-gutter) 24px;
}

.tr-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tr-progress__track {
  display: flex;
  flex: 1;
  gap: 6px;
}
.tr-progress__seg {
  flex: 1;
  height: 8px;
  background: var(--line);
}
.tr-progress__seg.is-on { background: var(--tr-yellow); }
.tr-progress__turn {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: uppercase;
}

.tr-phase {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: 56px;
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
  /* The longest French phase name is set by fitPhase() in main.js, which only
     ever shrinks it. Never let it wrap: two lines push the timer off screen. */
  white-space: nowrap;
}

.tr-judge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 22px;
  line-height: 1.15;
}
.tr-judge__chip {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: var(--border) solid var(--ink);
  background: var(--tr-yellow);
  color: var(--ink);
}
.tr-judge__name { font-weight: 700; }

.tr-desc {
  margin-top: 12px;
  font-size: 19px;
  line-height: 1.45;
}

/* The "add two players" prompt replaces the description. Dashed, with an
   icon and two lines of text: colour is never the only cue. */
.tr-need {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  padding: 16px;
  border: 2px dashed var(--line);
}
.tr-need__icon { color: var(--tr-accent); margin-top: 2px; }
.tr-need__title { font-weight: 700; }
.tr-need__hint { font-size: 16px; color: var(--muted); }

/* ===================================================================== */
/* Timers                                                                */
/* ===================================================================== */

.tr-timers:empty { display: none; }
.tr-timers {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}
.tr-timers--two {
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
}

.tr-timer { display: contents; }

.tr-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px 12px;
  border: var(--border) solid var(--text);
  background: var(--tr-timer-bg);
  box-shadow: var(--tr-shadow-plate) var(--tr-timer-shadow);
}
.tr-plate--debate {
  border: 6px solid var(--tr-timer-debate-border);
  box-shadow: var(--tr-shadow-plate) var(--tr-timer-shadow);
}
.tr-plate--alert {
  border: var(--border) solid var(--ink);
  background: var(--tr-alert-bg);
  box-shadow: var(--tr-shadow-plate) var(--tr-alert-shadow);
}
.tr-plate--paused {
  border: var(--border) dashed var(--text);
  box-shadow: none;
}

.tr-plate__label {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--white);
  text-transform: uppercase;
}
.tr-plate--paused .tr-plate__label { color: rgba(255, 255, 255, .8); }

.tr-plate__digits {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--tr-timer-fg);
  white-space: nowrap;
}
.tr-plate--alert .tr-plate__digits { color: var(--tr-alert-fg); }
.tr-plate--paused .tr-plate__digits { color: var(--tr-paused-fg); }

/* Three sizes, by layout: the digits are the biggest text on the page and
   are never allowed to wrap. */
.tr-plate--two .tr-plate__digits { font-size: 78px; }
.tr-plate--one .tr-plate__digits { font-size: 120px; }
.tr-plate--debate .tr-plate__digits { font-size: 140px; }

.tr-plate__chip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 3px 8px;
  background: rgba(10, 10, 11, .4);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tr-plate--paused .tr-plate__chip { background: none; }
/* Reserved so a plate does not change height when its chip appears. */
.tr-plate__chip--spacer { visibility: hidden; }

.tr-timer__controls {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}
/* One button under both plates, full width, rather than one under each. */
.tr-timers--two .tr-timer__controls { grid-column: 1 / -1; }

/* ===================================================================== */
/* Reveal notice                                                         */
/* ===================================================================== */

.tr-reveal-slot:empty { display: none; }

.tr-reveal {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 18px;
  padding: 14px 16px 16px;
  border: var(--border) solid var(--ink);
  background: var(--tr-pink);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--tr-shadow-plate) var(--tr-yellow);
}
.tr-reveal__text { display: block; }
.tr-reveal__title {
  display: block;
  font-family: var(--font-display);
  font-size: 31px;
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.tr-reveal__hint {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

/* The ten-second auto-clear, shown rather than just happening. Debate only. */
.tr-reveal__drain {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background: var(--ink);
  transform-origin: left center;
  animation: tr-drain 10s linear forwards;
}
@keyframes tr-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ===================================================================== */
/* Players                                                               */
/* ===================================================================== */

.tr-players { padding-bottom: 8px; }

.tr-players__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px var(--tr-gutter) 12px;
}
.tr-players__heading {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: .9;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.tr-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: var(--border) solid var(--text);
  background: none;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.tr-ghost.is-on {
  background: var(--tr-yellow);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: var(--tr-shadow-btn) var(--tr-pink);
}

.tr-list { border-top: 1px solid var(--line); }
.tr-list:empty { border-top: 0; }

.tr-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 6px;
  min-height: 76px;
  padding: 10px var(--tr-gutter) 10px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--tr-row);
}
/* The judge is marked three ways: a bar, a chip and bold -- never colour alone. */
.tr-row.is-judge::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--tr-yellow);
}

/* The medal sits beside the name rather than in the chip row below it, so a
   player who has one costs no extra height (owner's change, Oct 2026). */
.tr-row__title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tr-row__name {
  min-width: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.12;
  /* Two lines, then ellipsis: a 38-character name must not push the score out. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Bare trophy: no chip, no border, no rank number. The colour is the whole
   visual signal, so the rank's name is spelled out for a screen reader in the
   visually hidden span beside it. */
.tr-medal { width: 22px; height: 22px; flex: none; }
.tr-medal--gold   { color: var(--tr-gold); }
.tr-medal--silver { color: var(--tr-silver); }
.tr-medal--bronze { color: var(--tr-bronze); }

.tr-row__chips {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.tr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.tr-chip--judge { background: var(--tr-yellow); color: var(--ink); }

.tr-row__score {
  justify-self: end;
  min-width: 44px;
  font-family: var(--font-display);
  font-size: 46px;
  line-height: 1.1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tr-score-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: var(--border) solid var(--text);
  background: none;
}
/* The judge's, on their own turn. Still 48x48 and still in the row, so the
   list does not reflow as the judge passes on -- just plainly not available. */
.tr-score-btn:disabled {
  border-color: var(--line);
  background: none;
  color: var(--muted);
  cursor: default;
}
.tr-score-btn--up {
  border-color: var(--ink);
  background: var(--tr-yellow);
  color: var(--ink);
}

/* ---- edit mode ------------------------------------------------------- */

.tr-row--edit {
  grid-template-columns: 44px 44px 1fr 44px;
  gap: 8px;
  padding-left: var(--tr-gutter);
}
.tr-move {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: var(--border) solid var(--text);
  background: none;
}
.tr-move:disabled { border-color: var(--line); color: var(--muted); cursor: default; }
.tr-row__input {
  min-width: 0;
  height: 48px;
  padding: 0 10px;
  border: var(--border) solid var(--text);
  background: var(--input-bg);
  font-size: 20px;
}
.tr-delete {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: var(--border) solid var(--red);
  background: none;
  color: var(--tr-err);
}

.tr-empty {
  margin: 0 var(--tr-gutter);
  padding: 20px;
  border: 2px dashed var(--line);
  color: var(--muted);
  text-align: center;
}

/* ---- add a player ---------------------------------------------------- */

.tr-add { padding: 18px var(--tr-gutter) 20px; }
.tr-add__label {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--tr-accent);
  text-transform: uppercase;
}
.tr-add__row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.tr-input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 12px;
  border: var(--border) solid var(--input-border);
  background: var(--input-bg);
  font-size: 20px;
}
.tr-input[aria-invalid="true"] { border-color: var(--red); }

.tr-field-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--tr-err);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

/* ===================================================================== */
/* Buttons                                                               */
/* ===================================================================== */

.tr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: var(--border) solid var(--text);
  background: none;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.tr-btn--primary {
  min-height: 56px;
  border-color: var(--ink);
  background: var(--tr-yellow);
  color: var(--ink);
  font-size: 28px;
  box-shadow: var(--tr-shadow-btn) var(--tr-pink);
}
.tr-btn--secondary { min-height: 48px; }
.tr-btn--danger {
  border-color: var(--ink);
  background: var(--red);
  color: var(--white);
  min-height: 56px;
  font-size: 28px;
  box-shadow: var(--tr-shadow-btn) var(--tr-yellow);
}
.tr-btn--danger-ghost {
  min-height: 52px;
  border-color: var(--red);
  color: var(--tr-err);
}
.tr-btn--add {
  width: auto;
  flex: none;
  min-height: 56px;
  padding: 0 16px;
  border-color: var(--ink);
  background: var(--tr-yellow);
  color: var(--ink);
  font-size: 26px;
  box-shadow: var(--tr-shadow-btn) var(--tr-pink);
}
.tr-btn--pause { font-size: 24px; }
.tr-btn--resume {
  border-color: var(--ink);
  background: var(--tr-yellow);
  color: var(--ink);
  box-shadow: var(--tr-shadow-btn) var(--tr-pink);
}

.tr-btn:disabled,
.tr-btn[aria-disabled="true"] {
  border-color: var(--line);
  background: none;
  color: var(--muted);
  box-shadow: none;
  cursor: default;
}

/* Mouse only, and never the only signal that a thing is pressable. */
@media (hover: hover) {
  .tr-btn--primary:hover:not(:disabled),
  .tr-btn--danger:hover,
  .tr-btn--add:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--tr-pink);
  }
  .tr-btn--danger:hover { box-shadow: 6px 6px 0 var(--tr-yellow); }
}

/* ===================================================================== */
/* Footer                                                                */
/* ===================================================================== */

.tr-footer {
  padding: 22px var(--tr-gutter) 28px;
  background: var(--tr-foot);
}
.tr-footer__text { font-size: 19px; line-height: 1.45; }
.tr-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.tr-footer__links > li:first-child { flex-basis: 100%; }
.tr-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: var(--border) solid var(--text);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}
.tr-footer__legal {
  margin-top: 18px;
  color: var(--muted);
  font-size: 16px;
}

/* ===================================================================== */
/* Action bar                                                            */
/* ===================================================================== */

.tr-bar {
  position: fixed;
  z-index: 6;
  left: 0; right: 0; bottom: 0;
  margin: 0 auto;
  width: 100%;
  max-width: var(--tr-col);
  display: grid;
  gap: 8px;
  padding: 15px var(--tr-gutter) calc(15px + env(safe-area-inset-bottom, 0px));
  border-top: var(--border) solid var(--text);
  background: var(--tr-bg);
}

/* ===================================================================== */
/* Settings sheet                                                        */
/* ===================================================================== */

.tr-sheet, .tr-dialog {
  color: var(--text);
  border: 0;
  padding: 0;
}
/* A closed <dialog> is hidden by the browser's own stylesheet, and ANY author
   display rule beats that however low its specificity. The sheet below sets
   display:flex for its layout, so without this the closed sheet renders at the
   bottom of the page, under the footer, in full. */
.tr-sheet:not([open]), .tr-dialog:not([open]) { display: none; }
.tr-sheet::backdrop, .tr-dialog::backdrop { background: rgba(10, 10, 11, .74); }

.tr-sheet {
  width: 100%;
  max-width: var(--tr-col);
  height: 100%;
  max-height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--tr-bg);
}
.tr-sheet[open] { display: flex; }

.tr-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px var(--tr-gutter);
  min-height: var(--tr-header-h);
}
.tr-sheet__title {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.tr-sheet__close { width: 48px; height: 48px; padding: 0; }

.tr-sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--tr-gutter) 24px;
}

.tr-set-row { padding: 18px 0; border-bottom: 1px solid var(--line); }
.tr-set-row--switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.tr-set-row[hidden] { display: none; }
.tr-set-text { flex: 1; min-width: 0; }
.tr-set-label {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.tr-set-help {
  margin-top: 6px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.35;
}
.tr-set-field {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.tr-number {
  width: 112px;
  height: 56px;
  padding: 0 8px;
  border: var(--border) solid var(--input-border);
  background: var(--input-bg);
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}
.tr-number[aria-invalid="true"] { border-color: var(--red); }
.tr-set-unit { color: var(--muted); font-size: 18px; }

/* The design draws a 64x36 track. The target rule is 44px, so the BUTTON is
   64x44 and the track is painted inside it: the thing you see is the design's
   size, the thing you hit is the rule's. */
.tr-switch {
  position: relative;
  width: 64px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
}
.tr-switch::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 64px;
  height: 36px;
  border: var(--border) solid var(--text);
}
.tr-switch__knob {
  position: absolute;
  top: 10px;
  left: 6px;
  width: 24px;
  height: 24px;
  background: var(--text);
  transition: left .12s linear, background-color .12s linear;
}
.tr-switch[aria-checked="true"]::before { background: var(--tr-yellow); }
.tr-switch[aria-checked="true"] .tr-switch__knob { left: 34px; background: var(--ink); }

.tr-newgame {
  margin-top: 24px;
  padding: 16px;
  border: var(--border) solid var(--red);
}
.tr-newgame__title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: .03em;
  color: var(--tr-err);
  text-transform: uppercase;
}
.tr-newgame__help {
  margin-top: 10px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.35;
}
.tr-newgame .tr-btn { margin-top: 16px; }

.tr-sheet__foot {
  padding: 15px var(--tr-gutter) calc(15px + env(safe-area-inset-bottom, 0px));
  border-top: var(--border) solid var(--text);
}

/* ===================================================================== */
/* Confirm dialog                                                        */
/* ===================================================================== */

.tr-dialog {
  width: calc(100% - 32px);
  max-width: 328px;
  margin: auto;
  padding: 20px;
  background: var(--tr-row);
  border: var(--border) solid var(--text);
  box-shadow: var(--tr-shadow-dialog) var(--red);
}
.tr-dialog--skip { box-shadow: var(--tr-shadow-dialog) var(--tr-pink); }

.tr-dialog__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tr-dialog__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: var(--border) solid var(--ink);
  background: var(--red);
  color: var(--white);
}
.tr-dialog--skip .tr-dialog__icon { background: var(--tr-yellow); color: var(--ink); }
.tr-dialog__title {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.tr-dialog__body { margin-top: 14px; font-size: 19px; line-height: 1.45; }
.tr-dialog .tr-btn--primary,
.tr-dialog .tr-btn--danger { margin-top: 20px; }
.tr-dialog .tr-btn--secondary { margin-top: 10px; min-height: 52px; }

/* ===================================================================== */
/* Scrolling, motion, narrow screens                                     */
/* ===================================================================== */

/* Entering Scoring brings the list under the header, not under the edge. */
.tr-players { scroll-margin-top: var(--tr-header-h); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  /* The drain becomes a static bar that simply goes when the notice clears. */
  .tr-reveal__drain { animation: none; transform: none; }
  @media (hover: hover) {
    .tr-btn--primary:hover, .tr-btn--danger:hover, .tr-btn--add:hover { transform: none; }
  }
}

/* 320px: the plates and their controls are what run out of room first. */
@media (max-width: 359px) {
  .tr-plate--two .tr-plate__digits { font-size: 66px; }
  .tr-plate--one .tr-plate__digits { font-size: 104px; }
  .tr-plate--debate .tr-plate__digits { font-size: 118px; }
  .tr-row { padding-left: 14px; }
  .tr-row__score { font-size: 40px; min-width: 36px; }
}