/* Postrally: one stylesheet for organizer and team pages. Tokens copied from the
   Postrally design system (paper and ink, course magenta as the one brand
   colour, flag orange for marks only). Light theme, high contrast for phones
   used outdoors. Spacing on a 4 px grid. */
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/archivo-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/archivo-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* The timer never jumps: optional, with tabular system digits as the fallback. */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: optional; src: url("/static/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: optional; src: url("/static/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
/* Metric-matched fallbacks, so text doesn't jump when the web fonts arrive. */
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 103%; ascent-override: 87%; descent-override: 21%; }
@font-face { font-family: "Schibsted Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 98%; ascent-override: 96%; descent-override: 26%; }

:root {
  /* Postrally tokens (light) */
  --paper: #f8faf7;
  --surface: #ffffff;
  --surface-sunken: #edf1ec;
  --ink: #17201c;
  --ink-muted: #536059;
  --line: #d5dbd5;         /* hairlines and dividers only */
  --border: #7f8a83;       /* every control the user touches: 3:1 on surface */
  --course: #b0136c;       /* the brand: primary buttons, links, route, posts */
  --course-strong: #8c0f56;
  --course-tint: #fbe8f2;
  --on-course: #ffffff;
  --flag: #f2650f;         /* marks only, never text, never the only state cue */
  --forest: #21754a;
  --forest-tint: #e2f2e8;
  --danger: #c0322b;
  --danger-tint: #fbe9e7;
  --signal: #f5b83d;
  --on-signal: #17201c;
  --focus: #1f6fd1;
  --shadow-raised: 0 1px 2px rgba(23, 32, 28, 0.08), 0 4px 16px rgba(23, 32, 28, 0.08);
  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 18px;
  --font: "Schibsted Grotesk", "Schibsted Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Archivo", "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* Older names, kept so every rule reads the new tokens. */
  --bg: var(--paper);
  --muted: var(--ink-muted);
  --accent: var(--course);
  --accent-ink: var(--on-course);
  --err: var(--danger);
}
/* The big-screen reveal is dark (set on body by the reveal page). */
body.tt-dark {
  --paper: #0f1513; --surface: #18201d; --surface-sunken: #0a0f0d; --ink: #edf2ee; --ink-muted: #a3aea7; --line: #2a3430; --border: #6f7a73;
  --course: #f272b4; --course-strong: #ff9bcb; --course-tint: #3a1529; --on-course: #1d0812; --flag: #ff7a2e; --forest: #6fcf97; --forest-tint: #123222; --danger: #ff8a80; --danger-tint: #3b1512; --focus: #7fb4ff;
  /* The older names resolve where they are declared, so they are restated here. */
  --bg: var(--paper); --muted: var(--ink-muted); --accent: var(--course); --accent-ink: var(--on-course); --err: var(--danger);
  color-scheme: dark;
}
/* "hidden" always hides, whatever display a class sets. Without this the
   reveal's rows (display: grid) showed every place before it was revealed. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font); display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
a { color: var(--course); text-underline-offset: 2px; }
a:hover { color: var(--course-strong); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em; text-wrap: balance; }
h3 { font-weight: 700; }

.tt-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
/* The lockup: mark plus lowercase wordmark. */
.tt-brand { display: inline-flex; align-items: center; gap: 7px; font: 800 22px/1 var(--font-display); letter-spacing: -0.035em; color: var(--ink); }
.tt-mark { width: 1.2em; height: 1.2em; flex: none; }
.tt-mark-ring { fill: none; stroke: var(--course); stroke-width: 7; }
.tt-mark-white { fill: #fff; }
.tt-mark-orange { fill: var(--flag); }
.tt-mark-edge { fill: none; stroke: var(--ink); stroke-width: 2; }
.tt-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tt-main > * { flex: 1; min-height: 0; }

button { font: inherit; font-weight: 600; min-height: 44px; padding: 8px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; transition: background 150ms ease-out; }
button:hover { background: var(--surface-sunken); }
/* Focus: blue, never the brand colour, with a gap, so it shows on magenta buttons too. */
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tt-lang { margin: 0; }

.tt-split { display: grid; grid-template-columns: 1fr 400px; }
.tt-map-wrap { position: relative; min-height: 320px; }
/* Loaded after MapLibre's stylesheet, which sets .maplibregl-map to position: relative. */
.tt-map { position: absolute; inset: 0; }
.tt-status { position: absolute; inset: auto 16px 16px 16px; margin: 0; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); z-index: 1; }
.tt-err { color: var(--err); border-color: var(--err); }
.tt-panel { padding: 24px; background: var(--surface); border-left: 1px solid var(--line); overflow: auto; }
.tt-panel h1 { margin: 0 0 8px; font-size: 20px; }
.tt-muted { color: var(--muted); margin: 0; }

.tt-landing { flex: 0 0 auto !important; width: 100%; max-width: 32rem; margin: 0 auto; padding: 48px 24px; text-align: center; }
.tt-landing h1 { font-size: 28px; margin: 0 0 12px; }

/* Forms */
input, textarea, select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; min-height: 44px; width: 100%; }
textarea { resize: vertical; }
input[type="radio"], input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--accent); }
input[type="range"] { padding: 0; border: 0; accent-color: var(--accent); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.tt-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.tt-field { display: flex; flex-direction: column; gap: 4px; }
.tt-field > span:first-child { font-size: 14px; color: var(--muted); }
.tt-range { display: flex; align-items: center; gap: 12px; }
.tt-range output { min-width: 4.5em; text-align: right; font-variant-numeric: tabular-nums; }
.tt-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.tt-primary:hover { background: var(--course-strong); border-color: var(--course-strong); }
button:disabled { opacity: 0.45; cursor: default; }
.tt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tt-small { font-size: 13px; }
.tt-link-danger { border: 0; background: none; color: var(--err); padding: 8px 0; text-decoration: underline; align-self: flex-start; }
.tt-link-danger:hover { background: none; }

/* Notices */
.tt-notice { padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); margin: 8px 0; }
.tt-notice ul { margin: 4px 0 0; padding-left: 20px; }
.tt-ok { border-color: var(--forest); background: var(--forest-tint); color: var(--forest); }
.tt-warn { border-color: #b7791f; background: #fff6df; }

/* Route list */
.tt-routes { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tt-routes li { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.tt-routes a { color: var(--ink); font-weight: 600; text-decoration: none; }
.tt-routes a:hover { text-decoration: underline; }

/* Editor */
.tt-posts { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tt-post { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tt-post.is-selected { border-color: var(--course); background: var(--course-tint); }
.tt-post.is-dragging { opacity: 0.5; }
.tt-post-pick { flex: 1; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; text-align: left; border: 0; background: none; padding: 8px; }
.tt-post-pick .tt-small { grid-column: 2; }
.tt-post-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-post-tools { display: flex; gap: 2px; padding-right: 4px; }
.tt-post-tools button { min-height: 36px; min-width: 36px; padding: 0; }
.tt-post-delete { color: var(--err); }
.tt-post-delete:hover { background: var(--danger-tint); border-color: var(--err); }
.tt-num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 13px; background: var(--surface); color: var(--course); border: 2.5px solid var(--course); font: 700 13px var(--font-display); }
.tt-detail { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 8px; }
.tt-detail h2 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.tt-detail h3 { margin: 8px 0 0; font-size: 15px; }
.tt-task { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.tt-task legend { font-weight: 600; padding: 0 4px; }
.tt-option { display: flex; align-items: center; gap: 8px; }
.tt-option button { min-width: 44px; padding: 0; }
.tt-danger { margin-top: 32px; color: var(--muted); }
.tt-danger summary { cursor: pointer; }
.tt-marker { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 15px; border: 2px solid #fff; background: var(--accent); color: var(--accent-ink); font: 700 13px var(--font-display); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.5); cursor: grab; }
.tt-marker:hover { background: var(--course-strong); }
/* Orienteering symbols on the route: post 1 starts at a triangle, the last post is the finish double circle. */
.tt-marker.is-start::before { content: ""; position: absolute; left: 50%; top: -15px; transform: translateX(-50%); border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 13px solid var(--course); filter: drop-shadow(0 0 1.5px #fff); }
.tt-marker.is-finish { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--course), 0 2px 8px 6px rgba(0, 0, 0, 0.3); }
.tt-marker.is-selected { background: #fff; color: var(--accent); border-color: var(--accent); transform: scale(1.15); }
.tt-editor .tt-panel { width: 100%; }

/* Event pages */
.tt-page { width: 100%; max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; overflow: auto; }
.tt-page h1 { margin: 0 0 4px; font-size: 26px; }
.tt-page h2 { font-size: 18px; margin: 24px 0 8px; }
.tt-columns { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.3fr); gap: 32px; }
fieldset.tt-field { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin: 0; }
fieldset.tt-field legend { font-size: 14px; color: var(--muted); padding: 0 4px; }
.tt-radio { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.tt-teams { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 8px; }
.tt-team { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; background: var(--surface); }
.tt-team-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.tt-team-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tt-inline { display: flex; gap: 4px; margin: 0; }
.tt-inline input { width: 12em; }
.tt-invite { margin-top: 8px; }
.tt-invite-form { margin: 0; }
.tt-invite-form .tt-field { margin: 0; }
.tt-invite-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-invite-row input { flex: 1 1 14em; min-width: 0; }
.tt-invite-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.tt-invite-status p { margin: 4px 0 0; }
/* The captain's QR code (S34): always black on white, also in dark mode and in sunlight. */
.tt-gather { text-align: left; }
.tt-gather h2 { margin: 0 0 4px; }
.tt-gather p { margin: 8px 0; }
.tt-qr-tap { display: block; margin: 12px auto; padding: 0; border: 0; background: #fff; border-radius: 8px; }
.tt-qr-img { display: block; width: min(80vw, 300px); height: auto; image-rendering: pixelated; background: #fff; }
.tt-qr-full { position: fixed; inset: 0; z-index: 50; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 16px; }
.tt-qr-full .tt-qr-img { width: min(92vw, 92vh, 520px); }
.tt-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.tt-table th, .tt-table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); }
.tt-table th { font-size: 14px; color: var(--muted); font-weight: 600; }

/* Team cards */
.tt-cards { width: 100%; max-width: 900px; margin: 0 auto; padding: 24px 16px; overflow: auto; }
/* Printed for the captain: the lockup, a stripe in the team colour (a border, which prints), the name in Archivo. */
.tt-card { border: 1px solid var(--line); border-left: 8mm solid var(--team, var(--course)); border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 16px; background: #fff; color: var(--ink); break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.tt-card .tt-brand { font-size: 18px; margin-bottom: 8px; }
.tt-card h2 { margin: 0 0 4px; font-size: 30px; }
.tt-qrs { display: flex; flex-wrap: wrap; gap: 24px; }
.tt-qr { margin: 0; display: flex; gap: 12px; align-items: center; }
.tt-qr img { image-rendering: pixelated; }
.tt-qr code { word-break: break-all; color: var(--muted); }
@media print {
  .tt-top, .tt-noprint { display: none !important; }
  body { background: #fff; }
  .tt-card { border-top-color: #999; border-right-color: #999; border-bottom-color: #999; }
}

/* Team phone */
.tt-phone { max-width: 520px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 32px; font-size: 18px; }
.tt-phone button { min-height: 48px; }
.tt-phone-head { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.tt-phone-team { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 18px; }
.tt-phone-team strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-team-color { flex: none; width: 14px; height: 14px; border-radius: 7px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px rgba(23, 32, 28, 0.55); }
.tt-phone-time { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 28px; line-height: 1.1; }
.tt-pen { color: var(--err); font: 600 13px var(--font-mono); white-space: nowrap; }
.tt-menu-btn { padding: 8px 12px; }
.tt-sheet { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.tt-screen { display: flex; flex-direction: column; gap: 12px; }
.tt-center { text-align: center; align-items: center; padding-top: 24px; }
.tt-huge { font: 800 56px/1 var(--font-display); letter-spacing: -0.03em; margin: 0; font-variant-numeric: tabular-nums; }
.tt-big { font-size: 20px; padding: 14px 20px; width: 100%; }
.tt-big-text { font: 700 22px/1.25 var(--font-display); }
.tt-card-soft { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.tt-phone-map { height: 32vh; min-height: 200px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); position: relative; }
.tt-find { text-align: center; }
.tt-find p { margin: 4px 0; }
.tt-dir { font-size: 20px; display: flex; justify-content: center; align-items: center; gap: 12px; }
/* A compass, not a turn signal: the arrow points at the post from north, so it sits in a ring marked N (S37). */
.tt-compass { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 2px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--course); }
.tt-compass-n { position: absolute; top: -2px; left: 50%; transform: translate(-50%, -50%); font-size: 11px; font-weight: 800; background: var(--bg); padding: 0 3px; color: var(--muted); }
.tt-arrow { display: inline-block; font-size: 28px; line-height: 1; transition: transform 300ms ease-out; }
.tt-post-line { font: 700 18px/1.3 var(--font-display); color: var(--ink); }
.tt-task-context { display: flex; flex-direction: column; gap: 4px; }
.tt-task-context p { margin: 0; }
.tt-task-context .tt-dots { justify-content: flex-start; margin-top: 4px; }
.tt-gps-ok { margin: 0; color: var(--forest); font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 6px; justify-content: center; }
.tt-gps-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--forest); }
.tt-me { width: 18px; height: 18px; border-radius: 9px; background: #1f5fbf; border: 3px solid #fff; box-shadow: 0 0 0 1.5px rgba(23, 32, 28, 0.7), 0 1px 4px rgba(0, 0, 0, 0.35); }
.tt-found h1 { margin: 0; }
.tt-dots { display: flex; gap: 6px; justify-content: center; }
.tt-dot { width: 10px; height: 10px; border-radius: 5px; background: var(--line); }
.tt-dot.is-done { background: var(--accent); }
.tt-dot.is-current { outline: 2px solid var(--accent); outline-offset: 2px; }
.tt-prompt { font-size: 21px; line-height: 1.4; font-weight: 500; margin: 4px 0; }
.tt-options { display: flex; flex-direction: column; gap: 8px; }
.tt-option-btn { text-align: left; font-size: 19px; font-weight: 500; padding: 14px 16px; border-width: 2px; min-height: 56px; }
.tt-option-btn.is-selected { border-color: var(--course); background: var(--course-tint); font-weight: 700; }
/* Members read the options at full contrast; they are not buttons (S40). */
.tt-option-btn.is-readonly { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: default; }
.tt-option-btn.is-chosen { border-color: var(--course); background: var(--course-tint); font-weight: 700; }
.tt-chosen-badge { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
/* The verdict (S38): a pill over the header, out of the page flow, never in the way of a tap. */
.tt-main > .tt-verdict-host, .tt-verdict-host { flex: none; height: 0; z-index: 20; pointer-events: none; }
.tt-verdict-host.is-page { position: fixed; top: 0; left: 0; right: 0; }
.tt-verdict-host.is-framed { position: sticky; top: 0; }
.tt-verdict { position: absolute; left: 50%; top: 8px; max-width: calc(100% - 32px); transform: translate(-50%, -12px); opacity: 0; padding: 10px 18px; border-radius: 999px; font-size: 18px; font-weight: 700; color: var(--ink); background: var(--surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow-raised); transition: opacity 150ms ease-out, transform 200ms ease-out; }
.tt-verdict.is-shown { opacity: 1; transform: translate(-50%, 0); }
.tt-verdict.is-ok { background: var(--forest-tint); color: var(--forest); }
.tt-verdict.is-err { background: var(--danger-tint); color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .tt-verdict, .tt-verdict.is-shown { transform: translate(-50%, 0); transition: opacity 150ms linear; } }
.tt-banner { position: sticky; top: 0; z-index: 6; }
.tt-testmode { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 32px; max-width: 1000px; margin: 0 auto; padding: 24px 16px; overflow: auto; }
.tt-frame { width: 390px; height: 780px; border: 12px solid #17201c; border-radius: 36px; overflow: auto; background: var(--bg); }
.tt-frame .tt-phone-map { height: 300px; }

/* Control view */
.tt-live { display: grid; grid-template-columns: 1fr 380px; grid-template-rows: auto 1fr; height: 100%; }
.tt-live-alerts { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; }
.tt-alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--danger-tint); border-bottom: 2px solid var(--err); color: var(--err); }
.tt-live-map { position: relative; min-height: 360px; }
.tt-live-side { padding: 16px 20px; overflow: auto; border-left: 1px solid var(--line); background: var(--surface); }
.tt-live-side h1 { margin: 4px 0 8px; font-size: 22px; }
.tt-live-teams { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.tt-live-team { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.tt-live-team.is-help { border-color: var(--err); box-shadow: inset 4px 0 0 var(--err); }
.tt-live-team.is-stale { opacity: 0.6; }
.tt-team-dot { width: 16px; height: 16px; border-radius: 8px; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); position: relative; }
.tt-team-dot span { position: absolute; left: 20px; top: -4px; white-space: nowrap; background: rgba(255, 255, 255, 0.92); padding: 0 6px; border-radius: 4px; font-size: 13px; font-weight: 700; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.tt-team-dot.is-help { background: var(--err); }
.tt-team-dot.is-stale { background: #6b7280; opacity: 0.85; }
/* Street map or aerial photo, top left of the organizer maps. */
.tt-basemap { background: none; box-shadow: none; }
.tt-basemap-switch { display: inline-flex; background: #fff; border-radius: var(--radius); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
.tt-basemap-switch button { min-height: 36px; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 0; background: #fff; color: var(--ink); font-size: 14px; }
.tt-basemap-switch button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.tt-basemap-switch button:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-left: 0; }
/* Beats MapLibre's own ".maplibregl-ctrl button:not(:disabled):hover" and ":active". */
.tt-basemap .tt-basemap-switch button:not(:disabled):hover, .tt-basemap .tt-basemap-switch button:not(:disabled):active { background: var(--surface-sunken); }
.tt-basemap .tt-basemap-switch button[aria-pressed="true"]:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.tt-basemap-note { margin: 6px 0 0; padding: 4px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.95); font-size: 13px; color: var(--ink); }
.tt-button-link { display: inline-block; padding: 10px 16px; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; }

/* Reveal on the big screen */
.tt-reveal { width: 100%; max-width: 1200px; margin: 0 auto; padding: 32px 24px; min-height: 100%; cursor: pointer; user-select: none; }
.tt-reveal-head { display: flex; flex-direction: column; gap: 12px; }
.tt-reveal-head h1 { font-size: 48px; margin: 0; }
.tt-reveal-list { list-style: none; padding: 0; margin: 24px 0; display: flex; flex-direction: column; gap: 12px; }
.tt-reveal-row { display: grid; grid-template-columns: 70px auto 1fr auto; align-items: center; gap: 20px; padding: 16px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 32px; }
.tt-reveal-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--team, var(--course)); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px rgba(255, 255, 255, 0.35); }
.tt-reveal-row[data-place="1"] { border-color: var(--course); font-size: 48px; padding: 28px 24px; }
.tt-reveal-row[data-place="1"] .tt-reveal-dot { width: 44px; height: 44px; background: var(--flag); box-shadow: 0 0 0 8px var(--team, var(--course)), 0 0 0 10px var(--surface); }
.tt-reveal-place { font: 800 1em var(--font-display); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.tt-reveal-row[data-place="1"] .tt-reveal-place { color: var(--course); }
.tt-reveal-name { font: 800 1em/1.1 var(--font-display); letter-spacing: -0.02em; }
.tt-reveal-time { font: 500 26px var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.tt-reveal-row.is-new { animation: tt-rise 400ms ease-out; }
@keyframes tt-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.tt-slides { position: relative; height: 80vh; }
.tt-slide { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.tt-slide img { max-width: 100%; max-height: 72vh; border-radius: 12px; object-fit: contain; }
.tt-slide figcaption { font-size: 32px; font-weight: 700; }

@media (max-width: 800px) {
  .tt-split { grid-template-columns: 1fr; grid-template-rows: 60vh auto; }
  .tt-panel { border-left: 0; border-top: 1px solid var(--line); }
  .tt-columns { grid-template-columns: 1fr; }
  .tt-testmode { grid-template-columns: 1fr; }
  .tt-live { grid-template-columns: 1fr; grid-template-rows: auto 50vh auto; }
  .tt-live-side { border-left: 0; border-top: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Practice runs: one amber mark on every surface. */
.tt-pill-practice { display: inline-block; padding: 1px 10px; border-radius: 999px; background: #fff3d6; color: #7a4b00; border: 1px solid #e8b44c; font-size: 0.75em; font-weight: 700; vertical-align: middle; }
.tt-practice-note p { margin: 0 0 6px; }
.tt-practice-create { margin-top: 8px; }
.tt-outline { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.tt-practice-bar { margin: 0; padding: 4px 12px; background: #fff3d6; color: #7a4b00; border-bottom: 1px solid #e8b44c; font-size: 13px; font-weight: 700; text-align: center; }
.tt-card-practice { margin: 0 0 4px; font-variant: small-caps; letter-spacing: 0.08em; font-weight: 700; color: #7a4b00; }
.tt-reveal-practice { position: fixed; top: 12px; right: 16px; margin: 0; padding: 2px 12px; border-radius: 999px; background: #fff3d6; color: #7a4b00; border: 1px solid #e8b44c; font-weight: 700; }

/* Who is signed in, Konto and Log ud in the header. */
.tt-account-bar { display: flex; align-items: center; gap: 12px; margin-left: auto; font-size: 14px; }
.tt-who { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted, #5f6368); }
.tt-link { background: none; border: 0; padding: 0; min-height: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }
.tt-login { max-width: 420px; margin: 32px auto; }
.tt-lang-link { margin-left: auto; }
@media (max-width: 480px) { .tt-who { display: none; } }

/* Super admin overview. */
.tt-admin { max-width: 1200px; }
.tt-scroll { overflow-x: auto; }
.tt-count { text-align: right; font-variant-numeric: tabular-nums; }
.tt-muted-row td, .tt-muted-row th { color: var(--muted); }
.tt-pill-deleting { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--danger-tint); color: var(--err); border: 1px solid var(--err); font-size: 0.85em; font-weight: 600; }
.tt-row-danger { margin-top: 0; }
.tt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The final button in a delete box: unmistakably a delete. */
.tt-danger-button { background: var(--err); border-color: var(--err); color: #fff; font-weight: 600; }
.tt-danger-button:hover { filter: brightness(0.92); }

/* Start at a time or by hand (S35), staggered or all at once (S36). Labels switch with the choices, no script. */
.tt-start-box { border: 2px solid var(--accent); border-radius: var(--radius); padding: 16px; margin: 12px 0; background: var(--surface); }
.tt-start-box h2 { margin: 0 0 8px; }
.tt-check { display: flex; align-items: center; gap: 8px; }
.tt-settings:has(input[name="start_mode"][value="manual"]:checked) .tt-when-time { display: none; }
.tt-settings:not(:has(input[name="start_mode"][value="manual"]:checked)) .tt-when-manual { display: none; }
.tt-settings:has(input[name="staggered"]:checked) .tt-when-together { display: none; }
.tt-settings:not(:has(input[name="staggered"]:checked)) .tt-when-staggered { display: none; }
.tt-settings:not(:has(input[name="staggered"]:checked)) .tt-interval-field { display: none; }
.tt-waiting { font-size: 26px; font-weight: 800; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; line-height: 1.2; }
.tt-pulse { width: 12px; height: 12px; border-radius: 6px; background: var(--accent); animation: tt-pulse 1.6s ease-in-out infinite; }
@keyframes tt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .tt-pulse { animation: none; } }
/* Without :has(), the labels follow the saved choices (server-rendered classes) instead of the live ones. */
@supports not selector(:has(*)) {
  .tt-settings.is-manual .tt-when-time, .tt-settings:not(.is-manual) .tt-when-manual { display: none; }
  .tt-settings.is-together .tt-when-staggered, .tt-settings:not(.is-together) .tt-when-together { display: none; }
}

/* S41: help on its way, under the top bar, in the page flow. Amber, ink text, never colour alone. */
.tt-help-line { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: var(--radius); background: var(--signal); color: var(--on-signal); font-weight: 700; }
.tt-help-dot { width: 10px; height: 10px; border-radius: 5px; background: var(--on-signal); flex: none; }
.tt-help-line span:nth-child(2) { flex: 1; }
.tt-help-cancel { min-height: 48px; min-width: 48px; padding: 8px 14px; background: transparent; border: 2px solid var(--on-signal); color: var(--on-signal); }
.tt-help-cancel:hover { background: rgba(255, 255, 255, 0.35); }
/* S42 */
.tt-start-line { margin: 0; font-size: 18px; color: var(--ink); font-weight: 600; }
/* S43 */
.tt-verdict.is-neutral { background: var(--surface); color: var(--ink); }
.tt-verdict { display: inline-flex; align-items: center; gap: 10px; }
.tt-pill-thumb { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; flex: none; }
.tt-link-quiet { background: none; border: none; color: var(--muted); text-decoration: underline; font-size: 16px; min-height: 48px; }
.tt-skip-confirm { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; background: var(--surface); }
.tt-skip-confirm p { margin: 0 0 10px; }
.tt-skip-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.tt-skip-buttons button { flex: 1 1 8em; }
.tt-skip-note { color: #8a4b00; font-weight: 600; }
/* S44: the moments. The ring is the team colour with a dark outline, so light colours still show. */
.tt-moment-ring { width: 96px; height: 96px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 48px; line-height: 1;
  border: 8px solid var(--team, var(--accent)); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(0, 0, 0, 0.55); background: var(--surface); color: var(--forest); position: relative; }
/* The finish: the orienteering finish symbol (two course circles) inside the team ring, not an emoji. */
.tt-moment-ring.is-finish::before, .tt-moment-ring.is-finish::after { content: ""; position: absolute; left: 50%; top: 50%; border: 5px solid var(--course); border-radius: 50%; transform: translate(-50%, -50%); }
.tt-moment-ring.is-finish::before { width: 64px; height: 64px; }
.tt-moment-ring.is-finish::after { width: 40px; height: 40px; }
.tt-moment-ring.is-pop { animation: tt-pop 250ms ease-out; }
.tt-moment-ring.is-finish { width: 112px; height: 112px; font-size: 56px; }
@keyframes tt-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tt-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 30; }
.tt-confetti span { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: tt-fall 1.6s ease-in forwards; }
@keyframes tt-fall { to { transform: translateY(105vh) rotate(540deg); opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .tt-moment-ring.is-pop { animation: none; } .tt-confetti { display: none; } }
.tt-help-error { margin: 6px 0 0; color: var(--err); font-weight: 600; }
.tt-result-notes { margin: 8px 0; padding-left: 20px; color: var(--muted); }
.tt-play-foot { margin: 16px 0 0; font-size: 13px; color: var(--muted); }

/* S45: the typed member code on the start page. */
.tt-or { display: flex; align-items: center; gap: 12px; margin: 28px 0 20px; color: var(--muted); font-size: 14px; }
.tt-or::before, .tt-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tt-code-form { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.tt-code-label { font: 700 18px/1.3 var(--font-display); }
.tt-code-form .tt-muted { margin: 0; }
.tt-code-error { margin: 4px 0 0; color: var(--danger); font-weight: 600; }
.tt-code-input { font: 500 24px/1 var(--font-mono); letter-spacing: 0.18em; text-align: center; min-height: 56px; font-variant-numeric: tabular-nums; }
.tt-code-input[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }
.tt-code-form .tt-big { min-height: 56px; margin-top: 4px; }
/* S46: on the card, under the members' QR code. Ink, never a team colour. */
.tt-card-code { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink); }
.tt-card-host { font: 500 13px var(--font-mono); white-space: nowrap; }
.tt-card-digits { font: 700 24px/1.2 var(--font-mono); letter-spacing: 0.06em; white-space: nowrap; }

/* S48: Danish or English, quiet but a full 48 px target. */
.tt-lang-switch { align-self: center; min-height: 48px; padding: 8px 16px; background: transparent; border: 0; color: var(--course); font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }
.tt-lang-switch:hover { background: var(--course-tint); }
.tt-sheet .tt-lang-switch { align-self: flex-start; padding-left: 0; }

/* S49: who has a phone in, before the start. */
.tt-joined { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; }
.tt-joined p { margin: 0; }
.tt-joined-summary { font: 700 18px/1.3 var(--font-display); }
.tt-joined-missing { color: var(--ink); }
.tt-joined-missing:empty { display: none; }
.tt-joined-line { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 14px; color: var(--ink-muted); }

/* S50: with the phone's compass, N rides round the ring to where north is, and the arrow means "walk this way". */
.tt-compass.is-live .tt-compass-n { top: 50%; color: var(--course); }
.tt-compass.is-live { border-color: var(--course); }

/* W1: the guided event setup */
.tt-wizard { max-width: 600px; }
.tt-wizard-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 4px 0 16px; counter-reset: wz; }
.tt-wizard-steps li { counter-increment: wz; color: var(--ink-muted); font-size: 0.95em; }
.tt-wizard-steps li::before { content: counter(wz) ". "; }
.tt-wizard-steps li.is-done { color: var(--ink); }
.tt-wizard-steps li[aria-current="step"] { color: var(--course-strong); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.tt-wizard fieldset { border: 0; padding: 0; margin: 0; }
.tt-wizard legend h2 { margin: 0 0 8px; }
.tt-choice { align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 8px; }
.tt-choice input { margin-top: 4px; }
.tt-choice.is-disabled { opacity: 0.7; border-style: dashed; }
.tt-settings .tt-choice { border: 0; padding: 4px 0; background: none; margin: 0; }
.tt-pill { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--forest-tint); color: var(--forest); border: 1px solid var(--forest); font-size: 0.8em; font-weight: 600; }
.tt-field-error { color: var(--err); font-weight: 600; margin: 4px 0 0; }
[aria-invalid="true"] { border-color: var(--err); }
.tt-wizard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.tt-wizard-try { margin-top: 12px; }
.tt-wizard-try p { margin: 2px 0 0; }
.tt-review { padding-left: 20px; }
.tt-review li { margin: 6px 0; }
.tt-review .tt-link { margin-left: 6px; }
.tt-wizard input[name="team_name"] { display: block; width: 100%; margin: 6px 0; }
.tt-more { margin: 12px 0; }
.tt-more summary { cursor: pointer; font-weight: 600; }
@media (max-width: 560px) {
  .tt-wizard-actions { flex-direction: column; align-items: stretch; }
  .tt-wizard-actions .tt-big { width: 100%; }
}

/* W3: readiness checklist and the home list's "Mangler" tag */
.tt-checklist { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 12px 16px; margin: 16px 0; }
.tt-checklist h2 { margin: 0 0 8px; }
.tt-checklist.is-ready summary { cursor: pointer; font-weight: 700; color: var(--forest); }
.tt-checklist-items { list-style: none; padding: 0; margin: 0 0 8px; }
.tt-checklist-items li { display: flex; gap: 10px; padding: 4px 0; }
.tt-ck-mark { flex: none; width: 1.4em; text-align: center; font-weight: 700; }
.tt-checklist-items .is-done .tt-ck-mark { color: var(--forest); }
.tt-checklist-items .is-stale .tt-ck-mark { color: var(--danger); }
.tt-checklist-items .is-todo .tt-ck-mark { color: var(--ink-muted); }
.tt-checklist-extra { margin-top: 8px; }
.tt-checklist-extra form { display: inline; }
.tt-ready-tag { margin-left: 8px; font-size: 0.85em; font-weight: 600; color: var(--course-strong); }