/* Runner screen — read while running, at night and in full sun.
   Dark by default, big tabular numbers, high contrast. Every color/size is a variable so
   the app shell (Task 4) can theme it by overriding .rn-root { --rn-… } or :root.
   For LOOKING only (2026-10-01): the only tap targets are the two icon buttons on top. */
.rn-root {
  --rn-bg: var(--bg-deep, #070b19);
  --rn-panel: var(--bg-card, #0d1631);
  --rn-border: var(--border, #1a2b52);
  --rn-text: #ffffff;
  --rn-muted: #aab3c8;
  --rn-accent: var(--accent, #d1a659);
  --rn-ok: #34d672;
  --rn-warn: #ffb020;
  --rn-bad: #ff5a5a;
  --rn-info: #6fb2ff;
  --rn-radius: 14px;
  --rn-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --rn-mono: "SF Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
  --rn-clock-size: clamp(76px, 25vw, 132px);
  --rn-value-size: clamp(30px, 9.4vw, 48px);
  --rn-label-size: 13px;
  /* One grid for the whole screen (Juri 2026-10-09 „clean"): 12 px between everything, 16 px
     side margin, 14/16 px inside every tile; three number sizes, each with a fixed line box so
     tiles of a kind are always equally tall (also with „—" or a short note inside). */
  --rn-gap: 12px;
  --rn-side: 16px;
  --rn-pad: 14px 16px;
  --rn-num-big: clamp(36px, 12vw, 56px);
  --rn-num-mid: clamp(32px, 10vw, 46px);
  --rn-num-small: clamp(26px, 8vw, 36px);

  box-sizing: border-box;
  width: 100%; max-width: 100vw; overflow-x: hidden;
  min-height: 100dvh;
  display: flex; flex-direction: column; gap: var(--rn-gap);
  padding: max(12px, env(safe-area-inset-top)) var(--rn-side) max(16px, env(safe-area-inset-bottom));
  background: var(--rn-bg); color: var(--rn-text);
  font-family: var(--rn-font); font-size: 16px; line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.rn-root *, .rn-root *::before, .rn-root *::after { box-sizing: border-box; }
.rn-root [hidden] { display: none !important; }
.rn-root button { font-family: inherit; cursor: pointer; }

/* Top: Einstellungen on the right (as in the Jarvis race-day screen), Verlassen on the left —
   icon only, apart from each other so a thumb never hits the wrong one. */
.rn-top { display: flex; align-items: center; justify-content: flex-end; gap: var(--rn-gap); }
.rn-top .rn-leave { order: -1; margin-right: auto; }
.rn-icon { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; background: transparent; color: var(--rn-text);
  border: 1.5px solid var(--rn-border); }
.rn-icon svg { width: 22px; height: 22px; display: block; }
.rn-icon:active { filter: brightness(1.2); }
/* Keyboard / switch access: a visible ring on every button of the screen and its sheets. */
.rn-root button { touch-action: manipulation; }
.rn-root button:focus { outline: none; }
.rn-root button:focus-visible { outline: 2px solid var(--rn-text); outline-offset: 3px; }

/* Sheets over the race screen (Einstellungen, Ziel-Rundenzeit). */
.rn-sheet-back { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end;
  justify-content: center; background: rgba(0, 0, 0, .6); padding: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.rn-sheet { width: 100%; max-width: 480px; background: var(--rn-panel);
  border: 1.5px solid var(--rn-border); border-radius: 18px; padding: 18px 16px 16px;
  display: flex; flex-direction: column; gap: 10px; }
.rn-sheet-title { font-size: 20px; font-weight: 800; }
.rn-sheet-stay { min-height: 64px; border-radius: 14px; border: 0; background: var(--rn-accent);
  color: #10131c; font-size: 20px; font-weight: 800; }

.rn-main { display: flex; flex-direction: column; gap: var(--rn-gap); flex: 1; min-width: 0; }

/* Hero (before the start, in the camp): centred in the room above the music remote. */
.rn-hero { text-align: center; padding: 6px 0 2px; margin-block: auto; }
.rn-hero-label { font-size: 16px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rn-muted); }
.rn-clock { font-family: var(--rn-mono); font-weight: 800; font-size: var(--rn-clock-size);
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: 4px 0; }
.rn-clock[data-level="tight"] { color: var(--rn-warn); }
.rn-clock[data-level="late"] { color: var(--rn-bad); }
/* Uhr blinkt vor der Glocke (bell-signal.js; Puls + reduced-motion in crew.css). */
.rn-clock.bell-warn, .rn-clock.bell-urgent { color: var(--rn-bad) !important; }
.rn-hero-sub { font-size: 20px; font-weight: 700; }

/* Pacer ± — ahead/behind the plan (Plan 2026-09-27, Punkt 3); in the loop under the camp
   arrival, a little smaller than buffer and arrival (Juri 2026-10-09). Colour follows the bell
   (core/format.js bellTone, 2026-10-01): neutral, tight = orange, late = red. No green. */
.rn-pacer { background: var(--rn-panel); border: 1.5px solid var(--rn-border);
  border-radius: var(--rn-radius); padding: var(--rn-pad); text-align: center; min-width: 0;
  display: flex; flex-direction: column; gap: 8px; }
.rn-pacer-label { font-size: var(--rn-label-size); font-weight: 700; color: var(--rn-muted);
  text-transform: uppercase; letter-spacing: .05em; }
.rn-pacer-value { font-family: var(--rn-mono); font-weight: 800; font-size: var(--rn-num-mid);
  line-height: var(--rn-num-mid); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; }
.rn-pacer-sub { font-size: 15px; font-weight: 600; color: var(--rn-muted); }
.rn-pacer[data-level="tight"] { border-color: var(--rn-warn); }
.rn-pacer[data-level="tight"] .rn-pacer-value { color: var(--rn-warn); }
.rn-pacer[data-level="late"] { border-color: var(--rn-bad); background: rgba(255, 90, 90, 0.12); }
.rn-pacer[data-level="late"] .rn-pacer-value { color: var(--rn-bad); }
.rn-pacer[data-level="empty"] .rn-pacer-value { font-size: 28px; color: var(--rn-muted); }
/* Special lap / live change of this lap: its name small under the clock (in the loop on top). */
.rn-special { text-align: center; font-size: 16px; font-weight: 800; letter-spacing: .02em;
  color: var(--rn-accent); }

/* Loop (Juri 2026-10-09, Jarvis race-day layout): buffer and camp arrival full width and big —
   "12–13 min zu spät" and "14:48–14:51" stay whole on a 360 px phone (fit() shrinks the rest);
   under the ± two small tiles side by side (pace now, Ø loop). */
.rn-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rn-gap); }
.rn-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rn-tile { background: var(--rn-panel); border: 1.5px solid var(--rn-border);
  border-radius: var(--rn-radius); padding: var(--rn-pad); min-width: 0; text-align: center;
  display: flex; flex-direction: column; gap: 8px; }
.rn-tile-label { font-size: var(--rn-label-size); font-weight: 700; color: var(--rn-muted);
  text-transform: uppercase; letter-spacing: .05em; }
.rn-tile-value { margin-top: auto; font-family: var(--rn-mono); font-weight: 800;
  font-size: var(--rn-value-size); line-height: 1.05; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-tile[data-level="tight"] { border-color: var(--rn-warn); }
.rn-tile[data-level="tight"] .rn-tile-value { color: var(--rn-warn); }
.rn-tile[data-level="late"] { border-color: var(--rn-bad); background: rgba(255, 90, 90, 0.12); }
.rn-tile[data-level="late"] .rn-tile-value { color: var(--rn-bad); }
.rn-tile[data-level="empty"] .rn-tile-value { font-family: var(--rn-font); font-size: 20px;
  font-weight: 700; color: var(--rn-muted); }
.rn-tile-big .rn-tile-value { font-size: var(--rn-num-big); line-height: var(--rn-num-big); }
.rn-tile-small .rn-tile-value { font-size: var(--rn-num-small); line-height: var(--rn-num-small); }
/* „Loop 4 · Start 15:00" / „Loop-Zeit 24:01 · zuletzt 50:03": two short lines, small, muted. */
.rn-status { text-align: center; font-size: 14px; font-weight: 600; line-height: 1.45;
  color: var(--rn-muted); font-variant-numeric: tabular-nums; }
.rn-status-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Browser only, when the screen cannot be kept on: one short line, amber, no box. */
.rn-wake { text-align: center; font-size: 13px; font-weight: 600; line-height: 1.35;
  color: var(--rn-warn); padding: 0 8px; }
.rn-wake[hidden] { display: none; }
/* Phone settings hint (core/settingsAlert.js): amber frame, calmer than the red "Kein GPS";
   title, one line how to fix, two buttons. On top of the screen while it applies. */
.rn-sethint { background: var(--rn-panel); border: 1.5px solid var(--rn-warn);
  border-radius: var(--rn-radius); padding: var(--rn-pad); display: flex; flex-direction: column;
  gap: 6px; min-width: 0; }
.rn-sethint[hidden] { display: none; }
.rn-sethint-title { font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--rn-warn); }
.rn-sethint-detail { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--rn-text); }
.rn-sethint-actions { display: flex; gap: 8px; margin-top: 4px; }
.rn-sethint-actions button { flex: 1 1 0; min-width: 0; min-height: 44px; border-radius: 12px;
  font-size: 15px; font-weight: 800; background: transparent; color: var(--rn-text);
  border: 1.5px solid var(--rn-border); }
.rn-sethint-actions .rn-sethint-open { flex-grow: 2; white-space: nowrap; border-color: var(--rn-warn);
  color: var(--rn-warn); }
.rn-sethint-actions button[hidden] { display: none; }
/* Music remote (Android app only): anchored at the bottom — the free room lies between the
   numbers and the remote. Three icon buttons like the gear, bigger for a thumb in motion. */
.rn-music { margin-top: auto; padding-top: var(--rn-gap); display: flex; justify-content: center; gap: 32px; }
.rn-music .rn-icon { width: 56px; height: 56px; }
.rn-music .rn-icon svg { width: 24px; height: 24px; }

/* Empty state */
.rn-empty { margin: auto 0; text-align: center; display: flex; flex-direction: column;
  gap: 12px; align-items: center; }
.rn-empty-title { font-size: 26px; font-weight: 800; }
.rn-empty-reason { font-size: 17px; color: var(--rn-muted); }

/* Toast */
.rn-toast { position: fixed; left: 12px; right: 12px; bottom: max(16px, env(safe-area-inset-bottom));
  background: var(--rn-text); color: var(--rn-bg); border-radius: var(--rn-radius);
  padding: 14px 16px; font-size: 18px; font-weight: 800; text-align: center;
  box-shadow: 0 6px 30px rgba(0, 0, 0, .5); z-index: 10; pointer-events: none; }

/* Camp rest: calmer accent on the clock */
.rn-root[data-mode="rest"] .rn-clock { color: var(--rn-info); }
.rn-root[data-mode="pre"] .rn-clock { color: var(--rn-accent); }

/* 034: backyard without a live location — the hint plus lap and bell, nothing recorded */
.rn-off { margin: auto 0; text-align: center; display: flex; flex-direction: column; gap: 10px;
  align-items: center; }
.rn-off-text { font-size: 19px; font-weight: 700; line-height: 1.4; max-width: 22em;
  padding: 14px 16px; border: 2px solid var(--rn-info); border-radius: var(--rn-radius); }
.rn-off .rn-hero-label { margin-top: 14px; }

/* Ziel-Rundenzeit sheet (from Einstellungen): the slider (time-slider.js) scaled up */
.rn-tsheet { gap: 12px; }
.rn-tsheet .tslider { padding: 12px 10px 8px; }
.rn-tsheet .tslider-label { font-size: 13px; }
.rn-tsheet .tslider-link { font-size: 16px; }
.rn-tsheet .tslider-big { gap: 8px; }
.rn-tsheet .tslider-value { min-width: 0; font-family: var(--rn-mono); font-size: clamp(40px, 13.5vw, 64px); font-weight: 800; }
.rn-tsheet .tslider-step { width: 60px; height: 60px; font-size: 32px; font-weight: 800; }
.rn-tsheet .tslider-range { height: 56px; }
.rn-tsheet .tslider-range::-webkit-slider-thumb { width: 44px; height: 44px; margin-top: -17px; }
.rn-tsheet .tslider-scale { font-size: 14px; }
.rn-tsheet .tslider-none { font-size: 22px; font-weight: 700; }
.rn-tsheet .tslider-set { min-height: 56px; font-size: 18px; padding: 0 18px; }
.rn-tsheet-take { min-height: 76px; font-size: 24px; }
.rn-tsheet-take:disabled { opacity: .6; }
.rn-tsheet-cancel { min-height: 52px; border-radius: 12px; background: transparent;
  border: 1.5px solid var(--rn-border); color: var(--rn-text); font-size: 17px; font-weight: 700; }

/* Einstellungs-Tab im Rennmodus (Plan 2026-09-27, Punkt 6): big targets, one column,
   scrolls when the phone is small. */
.rn-ssheet { gap: 10px; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.rn-set-toggle { min-height: 64px; border-radius: 14px; background: transparent;
  border: 2px solid var(--rn-border); color: var(--rn-text); font-size: 20px; font-weight: 800; }
.rn-set-toggle[data-level="ok"] { color: var(--rn-ok); border-color: var(--rn-ok); }
.rn-set-toggle:disabled { opacity: .5; }
.rn-set-label { margin-top: 8px; font-size: 15px; font-weight: 800; color: var(--rn-muted); }
.rn-set-pacing { margin-top: 8px; }
.rn-set-hint { font-size: 14px; color: var(--rn-muted); }
.rn-set-test { min-height: 48px; border-radius: 12px; background: transparent;
  border: 1.5px solid var(--rn-border); color: var(--rn-text); font-size: 16px; font-weight: 700; }
.rn-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; margin-top: 8px; padding: 0 14px; border-radius: 12px; background: transparent;
  border: 1.5px solid var(--rn-border); color: var(--rn-text); font-size: 17px; font-weight: 700; }
.rn-set-rowvalue { font-family: var(--rn-mono); font-size: 22px; font-weight: 800; }
.rn-set-done { margin-top: 8px; }
/* Plan item 7: the crew's pages, one big row each — label + what is there, arrow right. */
.rn-set-crew { display: flex; flex-direction: column; }
.rn-set-crewbtn { text-align: left; padding-top: 8px; padding-bottom: 8px; }
.rn-set-crewtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rn-set-crewsub { font-size: 14px; font-weight: 500; color: var(--rn-muted); }
.rn-set-crewgo { font-size: 26px; font-weight: 700; color: var(--rn-muted); flex: 0 0 auto; }

/* Locked phone = display only (lockGate.js): over the whole page, the runner screen without
   tap targets, the GPS line and one big „Entsperren". Light theme: the app tokens (as
   tokens.css maps them for #page-runner); dark: the night look „warmweiss-gedimmt" of the
   runner page (tokens.css body.on-runner) — pure black, warm white, 1px dark lines. */
.rn-lockgate, .rn-lockgate .rn-root {
  --rn-bg: var(--bg, #000); --rn-panel: var(--surface, #000); --rn-border: var(--hairline-strong, #1f1d1a);
  --rn-text: var(--text, #fff); --rn-muted: var(--text-2, #aab3c8); --rn-accent: var(--accent, #fff);
  --rn-ok: var(--ok, #34d672); --rn-warn: var(--warn, #ffb020); --rn-bad: var(--bad, #ff5a5a);
  --rn-info: var(--info, #6fb2ff); --rn-radius: var(--radius, 14px);
  --rn-font: var(--font-display, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  --rn-mono: var(--mono, "SF Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace);
}
.rn-lockgate {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  background: var(--rn-bg); color: var(--rn-text); font-family: var(--rn-font);
  padding: env(safe-area-inset-top) 0 max(12px, env(safe-area-inset-bottom));
  user-select: none; -webkit-tap-highlight-color: transparent;
}
:root:not([data-theme="light"]) :is(.rn-lockgate, .rn-lockgate .rn-root) {
  --rn-bg: #000; --rn-panel: #000; --rn-border: #1f1d1a;
  --rn-text: #d8d0c4; --rn-muted: #8f877b; --rn-accent: #d8d0c4; --rn-info: #d8d0c4;
  --rn-ok: #3f9a62; --rn-warn: #c49530; --rn-bad: #c94c43;
}
:root:not([data-theme="light"]) .rn-lockgate :is(.rn-pacer, .rn-tile, .rn-off-text) { border-width: 1px; background: #000; }
:root:not([data-theme="light"]) .rn-lockgate .rn-tile[data-level="late"] { background: #000; }
.rn-lockgate-head { padding: 10px 16px 0; text-align: center; font-size: 13px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--rn-muted); }
.rn-lockgate-screen { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.rn-lockgate .rn-root { flex: 1 1 auto; min-height: 0; padding-top: 4px; padding-bottom: 4px; }
/* The free room of the locked screen is shared evenly between the tiles. Buffer and arrival sit
   in their own grid (runnerView.js) — flattened here, so space-evenly counts them like every
   other tile and the gap above the ± is the same as the one between them (2026-10-13). */
.rn-lockgate .rn-main { justify-content: space-evenly; }
.rn-lockgate .rn-main > .rn-grid:not(.rn-grid-2) { display: contents; }
.rn-lockgate-foot { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.rn-lockgate-gps { text-align: center; font-size: 16px; font-weight: 700; color: var(--rn-muted); }
.rn-lockgate-gps:is([data-level="bad"], [data-level="off"], [data-level="lost"]) { color: var(--rn-bad); }
.rn-lockgate-gps[data-level="weak"] { color: var(--rn-warn); }
.rn-lockgate-unlock { min-height: 64px; width: 100%; border-radius: 14px; background: transparent;
  border: 2px solid var(--rn-text); color: var(--rn-text); font-family: inherit;
  font-size: 20px; font-weight: 800; cursor: pointer; }
.rn-lockgate-unlock:active { filter: brightness(1.2); }
.rn-lockgate-unlock:focus { outline: none; } /* focused on open; its own 2px border is the frame */
.rn-lockgate-unlock:disabled { opacity: .6; }