/* Layout: timing-sheet column — title, track picker, direction switch, podium strip, full results table; editor bar pinned to the bottom */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111715; --surface: #19211e; --ink: #e7ece9; --muted: #92a199; --line: #2b3632;
    --accent: #ff7a3d; --accent-ink: #160b04; --danger: #ff8a7a;
    --gold: #e0b33c; --silver: #b4c0c7; --bronze: #d38a5c;
    color-scheme: dark;
  }
}
.wrap {
  max-width: 1760px; margin: 0 auto;   /* made for a 1920 × 1080 screen */
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 28px 120px;
  display: grid; gap: 24px;
}
.top { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: space-between; }
.top > div { display: grid; gap: 6px; min-width: 0; }
.eyebrow, .label { font-family: var(--font-data); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
h1 {
  font-family: var(--font-display); font-weight: 800; font-style: italic;
  font-size: clamp(2.4rem, 8vw, 4.2rem); line-height: .9; margin: 0;
  text-transform: uppercase; letter-spacing: -.01em; text-wrap: balance;
}
h1 span { color: var(--accent); }
h2 { font: 800 italic clamp(1.8rem, 5vw, 2.4rem)/1 var(--font-display); text-transform: uppercase; margin: 0; text-wrap: balance; }
.sub { color: var(--muted); }

button { font: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn {
  font: 600 .9rem/1 var(--font-body); padding: 10px 14px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); white-space: nowrap;
}
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.danger { color: var(--danger); }
.btn.danger.armed { background: var(--danger); border-color: var(--danger); color: var(--surface); }
.btn.small { padding: 6px 9px; font-size: .8rem; }
.btn:disabled { opacity: .5; cursor: default; }

.tracks { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.track-tab {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 10px 14px; text-align: left; display: grid; gap: 2px; flex: 0 0 auto;
}
.track-tab strong { font: 800 1.05rem/1.1 var(--font-display); text-transform: uppercase; }
.track-tab small { font-family: var(--font-data); font-size: 11px; color: var(--muted); }
.track-tab[aria-selected="true"] { border-color: var(--ink); box-shadow: inset 0 -4px 0 var(--accent); }
.track-tab.add { border-style: dashed; color: var(--muted); display: flex; align-items: center; }

.track-head { display: grid; gap: 4px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; align-items: end; }
.field { display: grid; gap: 4px; min-width: 0; }
.field input {
  font: inherit; padding: 9px 11px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 100%; box-sizing: border-box;
}

.board-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.switch { display: flex; flex-wrap: wrap; border: 2px solid var(--ink); width: fit-content; max-width: 100%; }
.switch button {
  font: 800 1.1rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  padding: 11px 20px; border: 0; background: transparent; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.switch button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.switch svg { width: 16px; height: 16px; }

.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; }
.step { background: var(--surface); border: 1px solid var(--line); padding: 14px 14px 12px; display: grid; gap: 2px; min-width: 0; }
.step.p1 { border-top: 5px solid var(--gold); padding-top: 22px; order: 2; }
.step.p2 { border-top: 5px solid var(--silver); order: 1; }
.step.p3 { border-top: 5px solid var(--bronze); order: 3; }
.step .pos { font: 800 italic 2rem/1 var(--font-display); }
.step.p1 .pos { color: var(--gold); } .step.p2 .pos { color: var(--silver); } .step.p3 .pos { color: var(--bronze); }
.step .name { font: 800 1.35rem/1.1 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.step .car { color: var(--muted); font-size: .9rem; }
.step .time { font: 700 1.25rem/1.2 var(--font-data); font-variant-numeric: tabular-nums; margin-top: 6px; }
.step .gap { font: 500 .8rem var(--font-data); color: var(--muted); }

.panel { background: var(--surface); border: 1px dashed var(--accent); padding: 14px; display: grid; gap: 10px; }
.panel .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.msg { color: var(--danger); font-size: .9rem; }

.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.toolbar input {
  font: inherit; padding: 9px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: min(100%, 280px);
}
.count { font-family: var(--font-data); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.table-box { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; min-width: 520px; }
th { font: 600 11px var(--font-data); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--ink); }
td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.editing-row td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.num { text-align: right; font-family: var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
td.rank { font: 800 italic 1.3rem/1 var(--font-display); width: 3ch; }
tr.r1 td.rank { color: var(--gold); } tr.r2 td.rank { color: var(--silver); } tr.r3 td.rank { color: var(--bronze); }
td.driver strong { font: 800 1.1rem/1.1 var(--font-display); text-transform: uppercase; }
td.driver span { display: block; color: var(--muted); font-size: .88rem; }
td.time { font-weight: 700; }
td.gap { color: var(--muted); font-size: .85rem; }
td.acts { text-align: right; white-space: nowrap; }
td.acts .btn + .btn { margin-left: 6px; }
.bar { height: 4px; background: var(--line); margin-top: 6px; }
.bar i { display: block; height: 100%; background: var(--accent); }
.unknown { color: var(--muted); }
.empty { padding: 28px 16px; text-align: center; color: var(--muted); }

.editbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  background: var(--ink); color: var(--bg);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.editbar .in { max-width: 1760px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.editbar .status { font-family: var(--font-data); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.editbar .status b { color: var(--accent); }
.editbar .row { display: flex; gap: 8px; flex-wrap: wrap; }
.editbar .btn { border-color: transparent; }

@media (max-width: 560px) {
  .podium { grid-template-columns: 1fr; }
  .step.p1, .step.p2, .step.p3 { order: 0; }
  .step.p1 { padding-top: 14px; }
  .switch button { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Base reset for the standalone site */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; margin: 0; }
[hidden] { display: none !important; }

/* Owner sign-in */
.linkish { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; font-size: .85rem; }
.login { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.login input { font: inherit; padding: 9px 11px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: min(100%, 240px); }
.notice { color: var(--muted); font-size: .9rem; }

/* Site header */
.site { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.brand { font: 800 italic 1.4rem/1 var(--font-display); text-transform: uppercase; color: var(--ink); text-decoration: none; letter-spacing: .01em; }
.brand span { color: var(--accent); }
.site-nav { display: flex; gap: 4px; flex: 1; }
.site-nav a { font: 600 .95rem/1 var(--font-body); color: var(--muted); text-decoration: none; padding: 8px 10px; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }
a { color: inherit; }
a.step { text-decoration: none; color: inherit; }
a.step:hover { border-color: var(--ink); }
td.driver a { text-decoration: none; display: block; }
td.driver a:hover strong { color: var(--accent); }
.notice a, .empty a { color: var(--accent); }

/* Garage */
.garage { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.car-card { background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; display: grid; min-width: 0; }
.car-card:hover { border-color: var(--ink); }
.car-card .thumb { aspect-ratio: 3 / 2; max-width: 100%; background: var(--line); overflow: hidden; display: grid; place-items: center; }
.car-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-card .thumb span { font: 800 italic 2rem/1 var(--font-display); text-transform: uppercase; color: var(--muted); padding: 0 12px; text-align: center; overflow-wrap: anywhere; }
.car-card-body { padding: 12px 14px 14px; display: grid; gap: 2px; }
.car-card-body strong { font: 800 1.3rem/1.1 var(--font-display); text-transform: uppercase; }
.car-card-body span { color: var(--muted); }
.car-card-body small { font: 500 11px var(--font-data); color: var(--muted); margin-top: 6px; }

/* Car page */
.back { color: var(--muted); text-decoration: none; font-weight: 600; width: fit-content; }
.back:hover { color: var(--ink); }
.car-hero { display: grid; gap: 6px; }
.specs { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--font-data); font-size: .9rem; color: var(--muted); }
.specs b { color: var(--ink); }
.main-photo { background: var(--line); aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; }
.main-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-wrap { display: grid; gap: 6px; flex: 0 0 auto; }
.thumb-btn { padding: 0; border: 2px solid transparent; background: none; width: 120px; aspect-ratio: 3 / 2; overflow: hidden; }
.thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-btn[aria-pressed="true"] { border-color: var(--accent); }
.thumb-acts { display: flex; gap: 4px; flex-wrap: wrap; max-width: 120px; }
.car-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.car-cols .col { display: grid; gap: 18px; min-width: 0; }
h3 { font: 800 1.3rem/1 var(--font-display); text-transform: uppercase; margin: 0 0 10px; }
.about p { margin: 0; max-width: 65ch; }
.mods { display: grid; gap: 12px; }
.mod-group ul { margin: 4px 0 0; padding-left: 18px; }
.mod-group li { padding: 2px 0; }
.mod-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 8px; align-items: center; }
.mod-edit input, .field textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 100%; box-sizing: border-box; min-width: 0; }
table.compact { min-width: 0; }
.sub-line { display: block; color: var(--muted); font-size: .8rem; font-family: var(--font-body); }
.times td a { font-weight: 600; text-decoration: none; }
.times td a:hover { color: var(--accent); }
b.p1 { color: var(--gold); } b.p2 { color: var(--silver); } b.p3 { color: var(--bronze); }

@media (max-width: 700px) {
  .car-cols { grid-template-columns: 1fr; }
  .mod-edit { grid-template-columns: 1fr; }
}

/* Teams */
.teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.team-card { background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--accent); padding: 16px; display: grid; gap: 12px; min-width: 0; }
.team-head { display: flex; gap: 14px; align-items: center; min-width: 0; }
.team-head > div:last-child { min-width: 0; }
.team-head h2 { font-size: 1.7rem; overflow-wrap: anywhere; }
.team-logo { width: 64px; height: 64px; flex: 0 0 auto; background: var(--line); display: grid; place-items: center; overflow: hidden; }
.team-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-logo span { font: 800 italic 1.6rem/1 var(--font-display); text-transform: uppercase; color: var(--muted); }
.team-about { margin: 0; color: var(--muted); }
.members { list-style: none; margin: 0; padding: 0; display: grid; }
.members li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); }
.members strong { font: 800 1.1rem/1.1 var(--font-display); text-transform: uppercase; margin-right: auto; }
.members a { text-decoration: none; color: var(--muted); font-size: .9rem; }
.members a:hover { color: var(--accent); }
.members small { font-family: var(--font-data); font-size: 11px; }
.team-edit { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.member-edit { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.member-edit li { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.car-hero .eyebrow a { color: var(--accent); text-decoration: none; }

/* 3D models */
canvas.model-view { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .4s; }
canvas.model-view.ready { opacity: 1; }
.car-card .thumb.has-model, .model-stage { background: radial-gradient(ellipse at 50% 60%, var(--surface) 0%, var(--bg) 75%); }
.model-stage { aspect-ratio: 16 / 9; max-width: 100%; border: 1px solid var(--line); position: relative; margin: 0; }
.model-stage canvas.model-view[data-interactive="1"] { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.model-stage canvas.model-view.grabbing { cursor: grabbing; }
.model-stage figcaption { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; pointer-events: none; font-family: var(--font-data); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* Accounts */
.head-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.head-acts a.btn { text-decoration: none; }
.badge { display: inline-block; min-width: 18px; padding: 1px 5px; margin-left: 4px; background: var(--accent); color: var(--accent-ink); font: 700 11px/16px var(--font-data); text-align: center; }
.box { background: var(--surface); border: 1px solid var(--line); padding: 16px; display: grid; gap: 12px; min-width: 0; }
.box h3 { margin: 0; }
.box p { margin: 0; }
.flash { border-left: 4px solid var(--accent); background: var(--surface); padding: 12px 14px; }
.login-box { max-width: 420px; }
.login-box input, .box select, .login select { font: inherit; padding: 9px 11px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.check { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.avatar { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: var(--line); display: grid; place-items: center; }
.avatar.big { width: 96px; height: 96px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar span { font: 800 italic 1.5rem/1 var(--font-display); text-transform: uppercase; color: var(--muted); }
.avatar.big span { font-size: 2.2rem; }
.driver-hero { display: flex; gap: 16px; align-items: center; min-width: 0; }
.driver-hero > div:last-child { display: grid; gap: 4px; min-width: 0; }
.driver-hero h1 { overflow-wrap: anywhere; }
.eyebrow a, .insta { color: var(--accent); text-decoration: none; }
.car-hero .eyebrow a { color: var(--accent); }
.members strong a { text-decoration: none; }
.members strong a:hover { color: var(--accent); }
.subs { list-style: none; margin: 0; padding: 0; display: grid; }
.subs li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.subs li .notice { flex-basis: 100%; }
.subs small { color: var(--muted); font-family: var(--font-data); font-size: 11px; }
.status { font: 600 11px var(--font-data); text-transform: uppercase; letter-spacing: .06em; padding: 2px 6px; border: 1px solid currentColor; }
.status.pending { color: var(--gold); }
.status.approved { color: var(--accent); }
.status.rejected { color: var(--danger); }
.review { border: 1px solid var(--line); padding: 12px; display: grid; gap: 10px; }
.review-head small { color: var(--muted); font-family: var(--font-data); font-size: 11px; margin-left: 6px; }
.change { display: grid; gap: 6px; }
.change > .label a { color: var(--ink); }
.diff-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; font-size: .92rem; overflow-wrap: anywhere; }
del { color: var(--muted); }
ins { text-decoration: none; background: color-mix(in srgb, var(--accent) 14%, transparent); }
img.mini { width: 72px; height: 48px; object-fit: cover; vertical-align: middle; margin: 2px 4px 2px 0; border: 1px solid var(--line); }
table.accounts { min-width: 640px; }
table.accounts input[type="text"], table.accounts input:not([type]) { font: inherit; padding: 6px 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 100%; box-sizing: border-box; min-width: 120px; }
@media (max-width: 560px) {
  .diff-row { grid-template-columns: 1fr; gap: 2px; }
}
.field select, table.accounts select { font: inherit; padding: 9px 11px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 100%; box-sizing: border-box; min-width: 0; }
table.accounts select { padding: 6px 8px; min-width: 180px; }
.field.wide { grid-column: 1 / -1; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.login-box select { max-width: 100%; }

/* Comments */
.comments { display: grid; gap: 12px; }
.comments h3 { margin: 0; }
.comment-form { display: grid; gap: 8px; max-width: 640px; }
.comment-form input, .comment-form textarea { font: inherit; padding: 9px 11px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 100%; box-sizing: border-box; }
.comment-form .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.comment-list { list-style: none; margin: 0; padding: 0; display: grid; }
.comment-list li { padding: 12px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.comment-list p { margin: 0; overflow-wrap: anywhere; }
.c-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.c-head a { color: var(--ink); text-decoration: none; }
.c-head a:hover { color: var(--accent); }
.c-head small { color: var(--muted); font-family: var(--font-data); font-size: 11px; }
.status.member { color: var(--muted); }
.linkish.armed-text { color: var(--danger); }

/* Team page */
.team-hero { display: flex; gap: 18px; align-items: center; min-width: 0; }
.team-hero > div:last-child { display: grid; gap: 6px; min-width: 0; }
.team-hero h1 { overflow-wrap: anywhere; }
.team-logo.big { width: 112px; height: 112px; }
.team-logo.big span { font-size: 2.6rem; }
.team-card h2 a { color: inherit; text-decoration: none; }
.team-card h2 a:hover { color: var(--accent); }
.team-card .sub a { color: var(--accent); text-decoration: none; }
.driver-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.driver-chip { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); padding: 10px 12px; min-width: 0; }
.driver-chip .avatar { width: 48px; height: 48px; }
.driver-chip .avatar span { font-size: 1.1rem; }
.driver-chip > div:last-child { display: grid; gap: 2px; min-width: 0; }
.driver-chip strong { font: 800 1.15rem/1.1 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.driver-chip strong a { text-decoration: none; }
.driver-chip strong a:hover { color: var(--accent); }
.driver-chip small { color: var(--muted); font-family: var(--font-data); font-size: 11px; }
@media (max-width: 560px) { .team-logo.big { width: 80px; height: 80px; } }

/* Rankings: separate driver and car links */
td.driver a + a { margin-top: 1px; }
td.driver a:hover span { color: var(--accent); }

/* Photos always fill their frame, cropped evenly around the middle, whatever shape they were taken in */
.car-card .thumb, .main-photo, .thumb-btn { position: relative; overflow: hidden; min-height: 0; }
.car-card .thumb img, .main-photo img, .thumb-btn img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.team-logo img, .avatar img, img.mini { object-fit: cover; object-position: center; }

.subs li .row { display: inline-flex; gap: 6px; margin-left: auto; }

/* 3D course maps (80s arcade style) */
.course-map-box { display: grid; gap: 6px; }
.course-map { position: relative; }
.c3d { position: relative; aspect-ratio: 16 / 9; max-height: 85vh; width: 100%; overflow: hidden; background: #05010f; border: 2px solid #7a1cff; box-shadow: 0 0 0 1px #000, 0 0 24px rgba(122, 28, 255, .35); }
.c3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; touch-action: none; cursor: grab; }
.c3d-canvas:active { cursor: grabbing; }
.c3d-labels, .c3d-hud { position: absolute; inset: 0; pointer-events: none; font-family: "Press Start 2P", ui-monospace, monospace; }
.c3d-label { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 9px; letter-spacing: .04em; color: #fff; background: #c4002f; border: 2px solid #ff5c7a; padding: 4px 6px; box-shadow: 0 0 10px rgba(255, 42, 74, .7); }
.c3d-label.section { background: transparent; border: 0; box-shadow: none; color: #5dff3a; font-size: 16px; text-shadow: 0 0 6px #5dff3a; padding: 0; }
.c3d-title { position: absolute; left: 12px; top: 12px; background: rgba(5, 1, 15, .78); border: 2px solid #27e8ff; box-shadow: 0 0 12px rgba(39, 232, 255, .45); padding: 10px 12px; color: #fff; display: grid; gap: 6px; max-width: min(46%, 300px); }
.c3d-sub { font-size: 8px; color: #27e8ff; }
.c3d-name { font-size: clamp(13px, 2.4vw, 20px); color: #ff2bd6; text-shadow: 0 0 8px #ff2bd6; line-height: 1.2; overflow-wrap: anywhere; }
.c3d-lay { font-size: 9px; color: #5dff3a; text-shadow: 0 0 6px #5dff3a; }
.c3d-stats { display: grid; gap: 3px; font-size: 8px; margin-top: 2px; }
.c3d-stats div { display: flex; justify-content: space-between; gap: 14px; }
.c3d-stats span:first-child { color: #ffd23f; }
.c3d-compass { position: absolute; right: 14px; top: 14px; width: 54px; height: 54px; overflow: visible; }
.c3d-compass circle { fill: rgba(5, 1, 15, .7); stroke: #27e8ff; stroke-width: 1.5; }
.c3d-compass .n { fill: #ff2a4a; } .c3d-compass .s { fill: #fff; }
.c3d-compass text { fill: #ffd23f; font-size: 7px; text-anchor: middle; font-family: "Press Start 2P", monospace; }
.c3d-profile { position: absolute; left: 12px; right: 12px; bottom: 26px; width: calc(100% - 24px); height: 15%; min-height: 44px; background: rgba(5, 1, 15, .6); border: 1px solid rgba(93, 255, 58, .5); }
.c3d-hint { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 8px; color: #ffd23f; animation: c3dblink 1.2s steps(2) infinite; }
.c3d.touched .c3d-hint { display: none; }
.c3d-credit { position: absolute; right: 8px; bottom: 8px; font: 9px var(--font-body); color: rgba(255, 255, 255, .55); }
.c3d-scan { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px); box-shadow: inset 0 0 90px rgba(0, 0, 0, .75); }
@keyframes c3dblink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .c3d-hint { animation: none; } }
@media (max-width: 560px) {
  .c3d { aspect-ratio: 4 / 5; }
  .c3d-title { max-width: 62%; padding: 8px; }
  .c3d-compass { width: 40px; height: 40px; }
}
.map-picker { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }

/* "New version" bar */
.new-version { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 20;
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: center; max-width: calc(100vw - 32px);
  background: var(--ink); color: var(--bg); padding: 10px 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); border-left: 4px solid var(--accent); }
.new-version .btn:not(.primary) { background: transparent; color: var(--bg); border-color: transparent; }

.track-tab.hidden-track { border-style: dashed; opacity: .8; }
.track-tab.hidden-track small { color: var(--accent); }

/* Replaying a time on the map */
.play-run { font: 700 11px/1 var(--font-data); width: 26px; height: 22px; margin-right: 8px; vertical-align: middle; border: 1px solid var(--line); background: var(--surface); color: var(--accent); cursor: pointer; }
.play-run:hover { border-color: var(--accent); }
.c3d-timer { position: absolute; right: 12px; top: 78px; display: grid; gap: 5px; justify-items: end; text-align: right; background: rgba(5, 1, 15, .78); border: 2px solid #5dff3a; box-shadow: 0 0 12px rgba(93, 255, 58, .4); padding: 8px 10px; font-size: 9px; color: #fff; max-width: 52%; }
.c3d-timer b { color: #5dff3a; font-weight: normal; text-shadow: 0 0 6px #5dff3a; overflow-wrap: anywhere; }
.c3d-timer span { color: #fff; }
.c3d-timer .g { color: #27e8ff; }
.c3d-timer .fin { color: #ffd23f; animation: c3dblink 1s steps(2) infinite; }
.c3d-label.runner { background: #0b3d00; border-color: #5dff3a; box-shadow: 0 0 10px rgba(93, 255, 58, .7); }
.c3d-label.ghost { background: #002f3d; border-color: #27e8ff; box-shadow: 0 0 10px rgba(39, 232, 255, .6); }
@media (max-width: 560px) { .c3d-timer { top: auto; bottom: calc(15% + 34px); right: 8px; font-size: 8px; } }

/* Racing several times on the map */
.compare-bar { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; color: var(--muted); font-size: .9rem; }
.play-run.on { background: var(--accent); border-color: var(--accent); color: #05010f; }
.c3d-timer { gap: 4px; min-width: 190px; }
.c3d-clock { font-size: 14px; color: #ffd23f; text-shadow: 0 0 6px #ffd23f; justify-self: end; }
.c3d-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; width: 100%; text-align: left; }
.c3d-row i { width: 8px; height: 8px; display: block; }
.c3d-row b { font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c3d-row .gap { color: #27e8ff; min-width: 6ch; text-align: right; }
.c3d-row.fin span:not(.gap) { color: #ffd23f; }
.c3d-label.racer { background: rgba(5, 1, 15, .85); border-width: 2px; border-style: solid; }

/* Improvement badges */
.badge-up { display: inline-block; margin-left: 6px; padding: 1px 5px; font: 700 11px/1.4 var(--font-data); color: #fff; background: #14833b; vertical-align: middle; white-space: nowrap; }
.move { display: inline-block; margin-left: 4px; font: 700 10px/1 var(--font-data); vertical-align: middle; font-style: normal; }
.move.up { color: #1fa64b; } .move.down { color: #d4372c; } .move.new { color: var(--accent); letter-spacing: .04em; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .move.up { color: #3ddc6e; } :root:not([data-theme="light"]) .move.down { color: #ff6b5e; } }
:root[data-theme="dark"] .move.up { color: #3ddc6e; } :root[data-theme="dark"] .move.down { color: #ff6b5e; }
td.rank { white-space: nowrap; }

/* Small turning 3D models next to car names */
td.driver a.car-link { display: flex; align-items: center; gap: 6px; }
canvas.model-view.mini-model { width: 54px; height: 32px; flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.step .car { display: flex; align-items: center; gap: 6px; }
.step .car canvas.mini-model { width: 64px; height: 38px; }

/* Garage cards: small turning model at the end of the driver · hp line */
.car-card-body .card-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; }
.car-card-body .card-sub canvas.mini-model { width: 64px; height: 38px; }

/* 3D model library */
.lib-card { display: grid; gap: 6px; justify-items: start; border: 1px solid var(--line); background: var(--surface); padding: 8px; min-width: 0; }
.lib-card.on { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.lib-card span { font-weight: 600; overflow-wrap: anywhere; font-size: .9rem; }
canvas.model-view.lib-preview { width: 100%; height: auto; aspect-ratio: 3 / 2; display: block; background: radial-gradient(ellipse at 50% 60%, var(--surface) 0%, var(--bg) 80%); }
canvas.model-view.lib-preview.review { width: 180px; display: inline-block; vertical-align: middle; }
#lib-search { font: inherit; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: min(100%, 320px); }
/* Dots / Cars switch on map races */
.seg { display: inline-flex; }
.seg .btn { border-radius: 0; }
.seg .btn + .btn { margin-left: -1px; }
.seg .btn.on { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* Malta course map */
.mm { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
@media (max-width: 760px) { .mm { grid-template-columns: 1fr; } .mm-menu { order: 2; } }
.mm-menu { display: grid; gap: 6px; align-content: start; }
.mm-head { display: grid; padding: 2px 2px 6px; }
.mm-head strong { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; line-height: 1.1; }
.mm-head small, .mm-item small { color: var(--muted); }
.mm-item, .mm-back { display: grid; gap: 2px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s; }
.mm-back { padding: 8px 12px; font-weight: 600; }
.mm-item strong { font-family: var(--font-display); font-size: 1.2rem; text-transform: uppercase; letter-spacing: .02em; }
.mm-item.hot { border-color: #5dff3a; box-shadow: inset 4px 0 0 #5dff3a, 0 0 12px #5dff3a55; }
.mm-item.on { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.mm-stage { position: relative; background: radial-gradient(ellipse at 50% 40%, #1a0636 0%, #05010f 75%); border: 1px solid #3a1a6a; box-shadow: 0 0 18px #ff2bd622 inset; }
#malta-map { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; max-height: 85vh; touch-action: pan-y; cursor: grab; }
#malta-map:active { cursor: grabbing; }
.mm-zoom { position: absolute; left: 8px; top: 8px; display: grid; gap: 4px; }
.mm-zoom .btn { width: 34px; height: 34px; padding: 0; font-size: 1.1rem; background: rgba(5,1,15,.8); color: #fff; border-color: #7a1cff; }
.mm-land { fill: #120a26; stroke: #27e8ff; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: drop-shadow(0 0 3px #27e8ff99); }
.mm-road { fill: none; stroke: #ff2bd6; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s, stroke-width .15s; pointer-events: none; }
.mm-road.dim { opacity: .35; stroke-width: 2; }
.mm-road.on { stroke: #ffd23f; stroke-width: 4; }
.mm-road.hot { stroke: #5dff3a; stroke-width: 6; filter: drop-shadow(0 0 5px #5dff3a); }
.mm-hit { fill: none; stroke: transparent; stroke-width: 22; vector-effect: non-scaling-stroke; cursor: pointer; pointer-events: stroke; }
.mm-hit:focus { outline: none; }
.mm-label { fill: #fff; font-family: var(--font-data); font-weight: 700; text-transform: uppercase; paint-order: stroke; stroke: #05010f; stroke-width: 4px; vector-effect: non-scaling-stroke; opacity: 0; pointer-events: none; transition: opacity .15s; }
.mm-label.on, .mm-label.hot { opacity: 1; }
.mm-label.hot { fill: #5dff3a; }
.mm-start { fill: #5dff3a; stroke: #05010f; stroke-width: 2; vector-effect: non-scaling-stroke; }
.mm-credit { position: absolute; right: 6px; bottom: 4px; font-size: .65rem; color: #8a7fb0; }
.mm-item strong svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px; }
.team-line { justify-content: space-between; border-bottom: 1px solid var(--line); padding: 6px 0; }
.home-pick { max-width: 320px; }

/* Show / hide maps by genre */
.mm-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.mm-filter .label { margin-right: 4px; }
.mm-filter .btn[aria-pressed="false"] { opacity: .5; text-decoration: line-through; }
.course-facts { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } .course-facts b { color: var(--ink); font-family: var(--font-data); }
.waze-stops { position: relative; }
.waze-stops summary { list-style: none; cursor: pointer; }
.waze-stops summary::-webkit-details-marker { display: none; }
.waze-stops[open] > div, .waze-stops[open] > ol, .waze-stops[open] > p { position: relative; }
.waze-stops ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.waze-stops li a { display: inline-block; padding: 4px 10px; border: 1px solid var(--line); background: var(--surface); }
.waze-stops p { margin: 6px 0 0; }
/* Library colours and bulk remove */
.lib-chip { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); padding: 0; cursor: pointer; }
.lib-chip.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.lib-tick { display: flex; gap: 6px; align-items: center; font-size: .85rem; color: var(--muted); }
.lib-card.picked { border-color: var(--danger); box-shadow: inset 0 -3px 0 var(--danger); }
.lib-bulk { margin: 8px 0; }
.lib-pill { font: inherit; font-size: .75rem; padding: 2px 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; } .lib-pill.on { border-color: var(--accent); color: var(--accent); }
/* Library cards: wide enough for many versions, and everything stays inside the card */
.lib-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-items: stretch; }
.lib-card { overflow: hidden; align-content: start; }
.lib-card > * { max-width: 100%; }
canvas.model-view.lib-preview { max-width: 100%; }
.lib-colours { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; max-width: 100%; }
.lib-pill { white-space: normal; text-align: left; max-width: 100%; }
.lib-card .btn { white-space: normal; text-align: left; }
/* Stand-in models for cars without a photo */
.car-card .thumb { position: relative; }
.stand-in { position: absolute; left: 6px; top: 6px; font-family: var(--font-data); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; background: rgba(0,0,0,.6); color: #fff; padding: 2px 6px; }
.lib-ver { font: inherit; font-size: .85rem; padding: 4px 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); max-width: 100%; flex: 1 1 140px; min-width: 0; }
.lib-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); flex: none; }
.lib-colours .notice { flex-basis: auto; }

/* ---------- Polish ---------- */
/* Header stays reachable while scrolling */
.site { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding-top: 12px; margin-top: -12px; }
@media (max-width: 560px) {
  .site { gap: 6px 10px; padding-bottom: 8px; }
  .site-nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; padding: 8px 10px 9px; }
  .head-acts { margin-left: auto; }
}
/* Loading screen */
.boot { min-height: 70vh; display: grid; place-content: center; gap: 16px; justify-items: center; }
.boot .brand { font-size: 2.2rem; }
.boot-bar { width: 180px; height: 4px; background: var(--line); overflow: hidden; }
.boot-bar i { display: block; width: 40%; height: 100%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: boot 1.1s ease-in-out infinite; }
@keyframes boot { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
/* Pages fade in */
.page-in > :not(.site) { animation: page-in .28s ease-out both; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Hover feedback */
tbody tr { transition: background-color .15s; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
a.step, .car-card, .team-card { transition: transform .15s ease, box-shadow .15s ease, border-color .15s; }
a.step:hover, .car-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.25); border-color: var(--accent); }
/* Your own times */
tr.mine { background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 4px 0 0 var(--accent); }
.you-tag { font: 700 10px/1 var(--font-data); text-transform: uppercase; letter-spacing: .06em; background: var(--accent); color: var(--accent-ink); padding: 3px 5px; margin-left: 6px; vertical-align: 2px; }
/* Back to top */
.to-top { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 44px; height: 44px; border: 2px solid var(--accent); background: var(--surface); color: var(--ink); font-size: 1.2rem; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.to-top[hidden] { display: none; }
.to-top.above-bar { bottom: 88px; }
.to-top:hover { background: var(--accent); color: var(--accent-ink); }
/* Map hints */
.c3d-tip, .mm-hint { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); background: rgba(5,1,15,.82); color: #fff; border: 1px solid #7a1cff; padding: 6px 12px; font: 600 .85rem/1.2 var(--font-body); pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 5; white-space: nowrap; }
.c3d-tip.show, .mm-hint.show { opacity: 1; }
.c3d-done { position: absolute; right: 10px; bottom: 10px; z-index: 6; font: 700 .85rem var(--font-body); padding: 8px 14px; background: #5dff3a; color: #05010f; border: 0; cursor: pointer; }
.c3d-done[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .page-in > :not(.site), .boot-bar i { animation: none; } a.step:hover, .car-card:hover { transform: none; } }
td.driver .you-tag, .you-tag { display: inline-block; width: auto; color: var(--accent-ink); font-size: 10px; }
/* Timing guide */
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.guide-steps li { display: grid; grid-template-columns: 40px minmax(0, 320px) 1fr; gap: 12px; align-items: start; border-top: 1px solid var(--line); padding-top: 12px; }
.guide-num { width: 36px; height: 36px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 800 1.1rem var(--font-display); }
.guide-photo img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.guide-text p { margin: 0; font-size: 1.02rem; }
.guide-text textarea { width: 100%; font: inherit; padding: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
@media (max-width: 640px) { .guide-steps li { grid-template-columns: 36px 1fr; } .guide-photo, .guide-text { grid-column: 2; } }
/* Button rows: space between buttons and the text beside them */
.row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.wrap > .row, .top + .row { margin: 12px 0; }
/* Role badges under a name */
.role-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.role-badge { display: inline-flex; align-items: center; gap: 4px; font: 700 11px/1 var(--font-data); text-transform: uppercase; letter-spacing: .05em; padding: 5px 8px; border: 1px solid currentColor; text-decoration: none; }
.role-badge.team { color: var(--gold); }
.role-badge.keeper { color: #2fb7d6; }
a.role-badge:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
/* Events */
.events { display: grid; gap: 12px; margin: 12px 0; }
.event { display: grid; gap: 12px; border: 1px solid var(--line); background: var(--surface); padding: 14px; scroll-margin-top: 90px; }
.event-top { display: grid; grid-template-columns: 64px 1fr; gap: 14px; }
.event.going { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.event.past { opacity: .7; }
.event-date { display: grid; place-content: center; text-align: center; background: var(--bg); border: 1px solid var(--line); height: 64px; }
.event-date b { font: 800 1.7rem/1 var(--font-display); color: var(--accent); }
.event-date span { font: 700 .75rem/1.2 var(--font-data); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.event h3 { margin: 0 0 2px; font: 800 1.4rem/1.1 var(--font-display); text-transform: uppercase; }
.event p { margin: 8px 0; }
.event-going { margin: 8px 0; color: var(--muted); }
.event-going b { color: var(--ink); }
.past-events summary { cursor: pointer; font-weight: 600; margin: 16px 0 4px; }
#event-form { margin: 12px 0; }
#event-form textarea, #event-form input { width: 100%; }
.role-badge.founder { color: #e0b33c; }
.role-badge.spotter { color: #9be22d; }
.role-badge.shop { color: #ff9ad5; }
.role-badge.record { color: #ffd23f; }
.role-badge.rise { color: #5dff3a; }
.role-badge.hp { color: #ff7a3d; }
.role-badge.hp300 { color: #ff4d3d; }
.role-badge.hp400 { color: #ff2bd6; }
/* Visitors without an account */
.members-only { max-width: 640px; margin: 40px 0; }
.members-only p { font-size: 1.05rem; color: var(--muted); }
td.driver .car-plain { display: block; color: var(--muted); font-size: .88rem; }
.ev-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .ev-team { align-items: end; }

/* Event pictures, people and chat */
.ev-cover { display: block; margin: -14px -14px 0; }
.ev-cover img { display: block; width: 100%; max-height: 340px; object-fit: cover; }
.ev-gallery { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ev-gallery img { width: 110px; height: 74px; object-fit: cover; display: block; border: 1px solid var(--line); }
.ev-people { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.ev-people li { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); background: var(--bg); padding: 6px; }
.ev-people li div { display: grid; min-width: 0; }
.ev-people a { overflow-wrap: anywhere; }
.ev-car-pic { width: 64px; height: 44px; object-fit: cover; flex: none; display: block; background: var(--surface); }
canvas.model-view.ev-car-pic { width: 64px; height: 44px; }
.ev-car-pic.empty { border: 1px dashed var(--line); }
.ev-car-select { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); }
.ev-car-select select { font: inherit; padding: 6px 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.ev-chat-toggle { margin-top: 6px; font-weight: 600; }
.ev-chat { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.ev-chat ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; max-height: 360px; overflow-y: auto; }
.ev-chat li p { margin: 2px 0 0; }
.ev-chat small { color: var(--muted); }
.ev-chat-form { display: flex; gap: 8px; }
.ev-chat-form input { flex: 1; font: inherit; padding: 8px 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); min-width: 0; }
.ev-photo-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.ev-thumb { display: grid; gap: 4px; justify-items: start; }
.ev-thumb img { width: 120px; height: 80px; object-fit: cover; display: block; border: 1px solid var(--line); }
/* Comparing gaps to a chosen time */
.gap-btn { font: inherit; color: inherit; background: none; border: 1px dashed transparent; padding: 3px 6px; cursor: pointer; }
.gap-btn:hover { border-color: var(--accent); color: var(--ink); }
.gap-btn.ahead { color: #2fbf4a; font-weight: 700; }
.gap-btn.behind { color: var(--danger); font-weight: 700; }
td.gap.ref .gap-btn { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.compare-note { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); padding: 8px 12px; margin: 8px 0; }
.compare-note span { flex: 1 1 260px; }
.compare-tip { margin: 6px 0; }
/* Event attendees: photo or car */
.ev-people li { gap: 12px; padding: 8px; }
.ev-pic { width: 56px; height: 56px; object-fit: cover; flex: none; display: block; background: var(--surface); border: 1px solid var(--line); }
canvas.model-view.ev-pic { width: 72px; height: 56px; }
.ev-pic.initials { display: grid; place-items: center; font: 800 1.2rem var(--font-display); text-transform: uppercase; color: var(--muted); }
.ev-car-name { font-size: .85rem; color: var(--muted); display: block; }
/* Keep the 3D map's space while it redraws, so the page doesn't jump */
.course-map:empty { aspect-ratio: 16 / 9; max-height: 85vh; background: #05010f; border: 2px solid #7a1cff; }
@media (max-width: 560px) { .course-map:empty { aspect-ratio: 4 / 5; } }
/* Phone stopwatch in the add-a-time form (hidden on computers) */
.stopwatch { display: none; grid-column: 1 / -1; gap: 10px; justify-items: stretch; border: 1px solid var(--line); background: var(--bg); padding: 12px; }
@media (pointer: coarse), (max-width: 700px) { .stopwatch { display: grid; } }
.sw-display { font: 700 3rem/1 var(--font-data); text-align: center; letter-spacing: .02em; font-variant-numeric: tabular-nums; padding: 6px 0; }
.sw-buttons { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.sw-go, .sw-reset { font: 800 1.4rem var(--font-display); text-transform: uppercase; padding: 18px 10px; border: 0; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.sw-go { background: #2fbf4a; color: #05140a; }
.sw-go.stop { background: var(--danger); color: #fff; }
.sw-reset { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.sw-reset:disabled { opacity: .4; }
.stopwatch .notice { margin: 0; text-align: center; }
/* Admin: site activity */
.activity h3, section[aria-label="Change history"] h3 { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.stat-tile { border: 1px solid var(--line); background: var(--bg); padding: 10px 12px; display: grid; gap: 2px; }
.stat-tile b { font: 800 2.2rem/1 var(--font-display); }
.stat-tile small { color: var(--muted); }
.stat-tile.live b { color: #2fbf4a; }
.stat-tile.live .label::before { content: "● "; color: #2fbf4a; }
.day-bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; align-items: end; height: 110px; margin: 6px 0 10px; }
.day-bar { display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; }
.day-bar i { align-self: end; display: block; background: var(--accent); min-height: 2px; }
.day-bar span { font: 600 .7rem var(--font-data); color: var(--muted); padding-top: 3px; }
/* Admin: change history */
#hist-search { font: inherit; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: min(100%, 420px); margin-bottom: 10px; }
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.history > li { border: 1px solid var(--line); background: var(--bg); padding: 8px 12px; display: grid; gap: 6px; justify-items: start; }
.history .h-head small { color: var(--muted); margin-left: 6px; }
.history ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: .9rem; }
/* Hiding an event from people or teams: search + tags */
.hide-box { border: 1px solid var(--line); background: var(--bg); padding: 10px 12px; margin: 6px 0 10px; display: grid; gap: 8px; }
.hide-opt { color: var(--muted); text-transform: none; letter-spacing: 0; }
.hchips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; align-items: center; }
.hchip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: .9rem; }
.hchip.team { border-color: var(--gold); color: var(--gold); }
.hchip button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: .95rem; padding: 2px 6px; line-height: 1; }
.hchip button:hover { color: var(--danger); }
.hide-search { position: relative; }
#hide-q { width: 100%; font: inherit; padding: 9px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
#hide-q:focus { border-color: var(--accent); outline: none; }
.hide-sugg { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(0,0,0,.35); max-height: 300px; overflow-y: auto; }
.hide-sugg[hidden] { display: none; }
.hsugg { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; cursor: pointer; }
.hsugg:hover, .hsugg:focus, .hsugg.first { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.hsugg span:last-child { display: grid; }
.hsugg small { color: var(--muted); }
.hs-pic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); font-weight: 800; text-transform: uppercase; overflow: hidden; }
.hs-pic.team { color: var(--gold); }
.hs-pic img { width: 100%; height: 100%; object-fit: cover; }
.hs-none { padding: 10px; }
.rmark { margin-left: 4px; font-size: .85em; text-decoration: none; }
/* Class filters on the leaderboard */
.classes { border: 1px solid var(--line); background: var(--surface); padding: 8px 12px; margin: 10px 0; }
.classes summary { cursor: pointer; font-weight: 600; }
.cls-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.cls-row .label { min-width: 90px; }
.cls-row .btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* Progress charts on driver pages */
.prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.prog { border: 1px solid var(--line); background: var(--surface); padding: 10px; display: grid; gap: 6px; }
.prog-head, .prog-foot { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; }
.prog-head span, .prog-foot { color: var(--muted); }
.prog svg { width: 100%; height: auto; display: block; background: var(--bg); }
.prog-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.prog circle { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.prog circle.best { fill: #2fbf4a; stroke: #2fbf4a; }
.ahead { color: #2fbf4a; }
/* Head-to-head */
.h2h-pick { align-items: end; }
.h2h-vs { font: 800 1.4rem var(--font-display); color: var(--accent); align-self: center; }
.h2h-score { display: flex; justify-content: center; align-items: center; gap: 24px; margin: 16px 0; text-align: center; }
.h2h-score b { display: block; font: 800 3rem/1 var(--font-display); }
.h2h-score .lead b { color: var(--accent); }
.h2h-dash { font: 800 2rem var(--font-display); color: var(--muted); }
table.h2h td.win { color: #2fbf4a; font-weight: 700; }
/* Onboard videos (YouTube's player, nothing stored on the site) */
button.rmark { border: 0; background: none; padding: 0 2px; cursor: pointer; font: inherit; }
button.rvideo.on { filter: drop-shadow(0 0 4px var(--accent)); }
.video-row td { padding: 0 8px 12px; }
.yt { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; margin: 0 auto; background: #000; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Event results and album */
.ev-tabs { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ev-section { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; display: grid; gap: 8px; }
.ev-results { width: 100%; max-width: 560px; }
.ev-res-form { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-res-form input { font: inherit; padding: 7px 9px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); flex: 1 1 110px; min-width: 0; }
.ev-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.ev-album figure { margin: 0; display: grid; gap: 2px; }
.ev-album img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border: 1px solid var(--line); }
/* "Your changes were approved" on the site */
.decision-note { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; border: 1px solid #2fbf4a; border-left-width: 4px; background: color-mix(in srgb, #2fbf4a 10%, var(--surface)); padding: 10px 12px; margin: 12px 0; }
.decision-note.no { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.decision-note span { flex: 1 1 260px; }
/* Announcements */
.announce { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; border: 1px solid; border-left-width: 4px; padding: 10px 12px; margin: 12px 0; }
.announce span:first-child { flex: 1 1 260px; font-weight: 500; }
.announce.info { border-color: #2fb7d6; background: color-mix(in srgb, #2fb7d6 10%, var(--surface)); }
.announce.good { border-color: #2fbf4a; background: color-mix(in srgb, #2fbf4a 10%, var(--surface)); }
.announce.warn { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.announce.alert { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.note-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.note-list li { display: grid; gap: 4px; }
.note-list li.off .announce { opacity: .5; }
.note-list .announce { margin: 0; }
.note-list small { color: var(--muted); }
/* Pictures: centred, and shown whole on the car page */
.gallery { display: grid; gap: 10px; justify-items: center; }
.main-photo { width: 100%; max-width: 1200px; margin: 0 auto; background: #0b0d0c; }
.main-photo img { object-fit: contain; object-position: center; }
.thumbs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; justify-content: center; }
.guide-photo img, .ev-cover img, .ev-gallery img, .ev-album img, .ev-thumb img { object-position: center; margin-left: auto; margin-right: auto; }
.ev-gallery, .ev-photo-edit { justify-content: center; }
.ev-cover img { max-width: 1200px; }
.no-photo { aspect-ratio: 16 / 6; background: var(--surface); border: 1px dashed var(--line); display: grid; place-items: center; color: var(--muted); font-family: var(--font-data); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin-left: auto; margin-right: auto; max-width: 1200px; }
/* 3D map: hide the info panels for a clear view */
.c3d-clean { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 6; font: 700 .8rem var(--font-body); padding: 6px 10px; background: rgba(5,1,15,.82); color: #fff; border: 1px solid #7a1cff; cursor: pointer; }
.c3d.clean .c3d-title, .c3d.clean .c3d-timer, .c3d.clean .c3d-profile, .c3d.clean .c3d-hint, .c3d.clean .c3d-label:not(.racer) { display: none !important; }
/* Timekeepers' proof */
.proof-box { border: 1px dashed var(--accent); padding: 10px 12px; margin: 8px 0 12px; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.proof-thumb { height: 64px; width: auto; border: 1px solid var(--line); display: block; }
.proof-show { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.proof-show img { max-height: 220px; max-width: 100%; border: 1px solid var(--line); display: block; }
/* Shop */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 10px 0 18px; }
.product { border: 1px solid var(--line); background: var(--surface); display: grid; grid-template-rows: auto 1fr; }
.product.off { opacity: .55; }
.product-pic { aspect-ratio: 1; background: var(--bg); display: grid; place-items: center; overflow: hidden; }
.product-pic img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.product-pic span { font: 800 italic 3rem var(--font-display); color: var(--muted); text-transform: uppercase; }
.product-body { padding: 12px; display: grid; gap: 6px; align-content: start; }
.product h3 { margin: 0; font: 800 1.3rem/1.1 var(--font-display); text-transform: uppercase; }
.price { font: 700 1.2rem var(--font-data); color: var(--accent); }
.product p { margin: 0; color: var(--muted); }
.order-row { display: flex; gap: 6px; flex-wrap: wrap; }
.order-row select, .order-row input { font: inherit; padding: 7px 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.order-row input { width: 64px; }
.shop-thumb { height: 48px; border: 1px solid var(--line); }
.orders { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.orders li { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; border: 1px solid var(--line); padding: 8px 12px; background: var(--bg); }
.orders li > span:first-child { flex: 1 1 240px; }
.orders .status { font: 700 .75rem var(--font-data); text-transform: uppercase; }
.orders .st-ready .status { color: #2fbf4a; } .orders .st-cancelled { opacity: .55; }

/* ======================================================================
   Touge-night theme: ink black, paper white, a sharp red; heavy italic
   type with red slashes, film grain and small 峠 touches.
   (The 3D maps keep their own neon arcade look.)
   ====================================================================== */
:root { --font-display: "Barlow Condensed", "Arial Narrow", sans-serif; --font-body: "Barlow", system-ui, sans-serif; --font-data: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); --bg: #f1eee6; --surface: #faf8f2; --ink: #111111; --muted: #6b665c; --line: #d6d0c3; --accent: #d4231d; --accent-ink: #ffffff; --danger: #b3140f; --gold: #b8860b; --silver: #6f7478; --bronze: #9c4f2a; --red-soft: rgba(212, 35, 29, .12); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0b0b; --surface: #141414; --ink: #f2f0ea; --muted: #9b958a; --line: #2a2826;
    --accent: #e8322b; --accent-ink: #ffffff; --danger: #ff6b63;
    --gold: #e0b33c; --silver: #c3c7ca; --bronze: #d38a5c; --red-soft: rgba(232, 50, 43, .14);
  }
}
:root[data-theme="dark"] { color-scheme: dark; --bg: #0b0b0b; --surface: #141414; --ink: #f2f0ea; --muted: #9b958a; --line: #2a2826; --accent: #e8322b; --accent-ink: #ffffff; --danger: #ff6b63; --gold: #e0b33c; --silver: #c3c7ca; --bronze: #d38a5c; --red-soft: rgba(232, 50, 43, .14); }

/* Film grain over everything (very faint, ignores taps) */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) { body::after { animation: grain .9s steps(3) infinite; } }
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }

/* A quiet vertical strip of Japanese on wide screens */
@media (min-width: 1860px) {
  body::before {
    content: "峠 ・ 走 り 屋 ・ マ ル タ"; position: fixed; left: 14px; top: 50%; transform: translateY(-50%);
    writing-mode: vertical-rl; font: 700 13px/1 "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; letter-spacing: .45em;
    color: var(--muted); opacity: .45; pointer-events: none; z-index: 1;
  }
}

/* Header: heavy italic name with a red 峠 stamp and a slashed red rule */
.brand { letter-spacing: .02em; display: inline-flex; align-items: center; gap: 8px; }
.brand::before {
  content: "峠"; display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; background: var(--accent); color: #fff;
  font: 900 .78em/1 "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; font-style: normal; transform: rotate(-4deg);
}
.site { border-bottom: 0; box-shadow: none; }
.site::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 5px;
  background: linear-gradient(90deg, var(--ink) 0 60%, transparent 60%), repeating-linear-gradient(-55deg, var(--accent) 0 6px, transparent 6px 11px);
}
.site { position: sticky; }
.site-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }

/* Big titles: italic, tight, with a red slash */
h1 { font-style: italic; letter-spacing: -.01em; position: relative; }
h1 span { color: var(--accent); }
.top h1::after { content: ""; display: block; width: 72px; height: 6px; margin-top: 8px; background: var(--accent); transform: skewX(-30deg); transform-origin: left; }
h2, h3, .track-head h2 { font-style: italic; }
.eyebrow { color: var(--accent); letter-spacing: .18em; }

/* Square, poster-like panels */
.box, .panel, .table-box, .car-card, .team-card, .event, .product, .step, .stat-tile, .prog { border-radius: 0; }
.car-card, .team-card, .product { border-top: 3px solid var(--ink); }
.car-card:hover, .product:hover { border-top-color: var(--accent); }

/* Buttons: hard edges, red primary with a slanted tick */
.btn { border-radius: 0; letter-spacing: .03em; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 3px 3px 0 var(--ink); }
.btn.primary:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn.primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* Leaderboard: thicker rules, red P1 stripe, numbers like a timing sheet */
thead th { border-bottom: 2px solid var(--ink); }
tbody tr.r1 { box-shadow: inset 4px 0 0 var(--gold); }
td.rank { font-style: italic; font-weight: 800; }
.time { font-variant-numeric: tabular-nums; }
.bar i { background: var(--accent); }
.podium .step { border-top: 4px solid var(--line); }
.podium .p1 { border-top-color: var(--gold); }
.podium .p2 { border-top-color: var(--silver); }
.podium .p3 { border-top-color: var(--bronze); }

/* Tags, badges and highlights pick up the red */
.mm-tag { font-family: var(--font-data); font-size: .7rem; text-transform: uppercase; border: 1px solid currentColor; padding: 0 4px; white-space: nowrap; color: var(--accent); }
tr.mine { background: var(--red-soft); box-shadow: inset 4px 0 0 var(--accent); }
.you-tag, td.driver .you-tag { background: var(--accent); color: #fff; }
.boot .brand::before { font-size: .7em; }
.boot-bar i { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
footer { color: var(--muted); font-size: .85rem; border-top: 2px solid var(--ink); }
a.btn, a.btn:hover { text-decoration: none; }

/* ---------- Phone app ---------- */
.tabbar, .m-sub { display: none; }
.ptr { position: fixed; top: 0; left: 50%; transform: translate(-50%, -60px); opacity: 0; z-index: 60; background: var(--ink); color: var(--bg); font: 700 .8rem var(--font-body); padding: 6px 12px; transition: opacity .15s; pointer-events: none; }
.install-note, .offline-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border: 1px solid var(--line); background: var(--surface); padding: 10px 12px; margin: 12px 0; }
.install-note img { border-radius: 9px; }
.install-note span { flex: 1 1 200px; }
.offline-bar { border-color: var(--accent); background: var(--red-soft); font-weight: 600; }
@media (max-width: 700px) {
  /* Tabs at the bottom, within thumb reach; the top keeps the name and account button */
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 2px solid var(--ink); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .tab { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 2px 7px; color: var(--muted); text-decoration: none; font: 700 .68rem var(--font-body); text-transform: uppercase; letter-spacing: .04em; }
  .tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
  .tab.on { color: var(--accent); }
  .tab.on::before { content: ""; position: absolute; top: -2px; left: 25%; right: 25%; height: 3px; background: var(--accent); }
  .tab-badge { position: absolute; top: 4px; left: 55%; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font: 700 11px/18px var(--font-body); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .site-nav { display: none; }
  .to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .site { padding-top: max(12px, env(safe-area-inset-top, 0px)); }
  /* Leaderboard fits the screen: gap and power go under the time */
  .table-box > table:not(.compact) { min-width: 0; }
  .table-box > table:not(.compact) th:nth-child(4), .table-box > table:not(.compact) td:nth-child(4),
  .table-box > table:not(.compact) th:nth-child(5), .table-box > table:not(.compact) td:nth-child(5) { display: none; }
  .m-sub { display: block; font: 600 .75rem var(--font-data); color: var(--muted); margin-top: 2px; }
  td, th { padding-left: 8px; padding-right: 8px; }
  td.driver .mini-model { display: none; }
  /* Bigger targets for thumbs */
  .btn.small { min-height: 34px; }
  .play-run, .rmark { min-width: 30px; min-height: 30px; }
}
.site { padding-top: max(12px, env(safe-area-inset-top, 0px)); }
@media (max-width: 700px) { .btn { display: inline-flex; align-items: center; justify-content: center; } }
/* Shop designs */
.design-list { display: grid; gap: 12px; }
.design { display: grid; grid-template-columns: 160px 1fr; gap: 14px; border: 1px solid var(--line); padding: 10px; background: var(--bg); }
@media (max-width: 560px) { .design { grid-template-columns: 1fr; } }
.design small { display: block; color: var(--muted); }
.design p { margin: 4px 0; }
.design-pic { display: grid; place-items: center; aspect-ratio: 1; padding: 6px;
  background-color: #fff; background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%), linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; border: 1px solid var(--line); }
.design-pic img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.design-pic.small { width: 56px; height: 56px; padding: 3px; }
.design-approve input { font: inherit; padding: 7px 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.alert-kinds { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
.theme-btn { min-width: 34px; font-size: 1rem; }
.dotm { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-left: 4px solid #d4a017; background: var(--bg); padding: 10px 14px; margin: 0 0 14px; }
.dotm-cup { font-size: 1.8rem; line-height: 1; }
.dotm-car { color: var(--muted); }
.role-badge.dotm-badge { border-color: #d4a017; }
.report-imps { margin: 4px 0 8px; padding-left: 1.4em; display: grid; gap: 4px; }
@media (max-width: 700px) { .dotm { padding: 8px 10px; font-size: .92rem; } .dotm-cup { font-size: 1.4rem; } }
.standings { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 4px; }
.standings li { display: grid; grid-template-columns: 2.2em 1fr auto auto; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); background: var(--bg); }
.standings li:first-child { border-left: 4px solid #d4a017; }
.st-pos { font: 800 1.4rem/1 var(--font-display); text-align: center; }
.st-meta { color: var(--muted); font-size: .85rem; }
.st-pts { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .standings li { grid-template-columns: 2em 1fr auto; } .st-meta { grid-column: 2; grid-row: 2; } }
.sw-log { width: 100%; }
.run-log { grid-column: 1 / -1; border: 1px solid var(--line); background: var(--bg); padding: 10px 12px; display: grid; gap: 8px; }
.run-log ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.run-log li { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.rl-time { font-family: var(--font-mono, monospace); font-size: 1.1rem; }
.ev-weather { font-size: .92rem; padding: 6px 10px; border: 1px solid var(--line); background: var(--bg); margin: 6px 0; display: inline-block; }
.ev-weather.wet { border-color: #3a8dde; }
.here-tick { color: #2fbf4a; font-size: .85rem; }
.ev-people li.here .ev-pic { outline: 2px solid #2fbf4a; outline-offset: 1px; }
.ev-checkin { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.ev-checkin input { width: 9em; text-transform: uppercase; letter-spacing: .15em; font-weight: 700; }
.checkin-code { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.checkin-code img { background: #fff; padding: 6px; image-rendering: pixelated; max-width: 100%; height: auto; }
.checkin-code .code { display: block; font: 800 2.4rem/1.1 var(--font-mono, monospace); letter-spacing: .18em; }
.checkin-list { list-style: none; padding: 0; margin: 8px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px; }
.spot-map { width: 100%; max-width: 420px; display: block; background: var(--bg); border: 1px solid var(--line); }
.spot-road { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.spot-start, .spot-key.start { fill: #2fbf4a; background: #2fbf4a; }
.spot-finish, .spot-key.finish { fill: #e5484d; background: #e5484d; }
.spot-key { display: inline-block; width: .7em; height: .7em; border-radius: 50%; }
.spot-dot circle { fill: var(--bg); stroke: #d4a017; stroke-width: 2.5; }
.spot-dot.taken circle { fill: #d4a017; }
.spot-dot.preview circle { stroke-dasharray: 3 2; stroke: var(--red, #e5484d); }
.spot-dot text { font: 700 10px sans-serif; fill: var(--text, currentColor); }
.spot-dot.taken text { fill: #000; }
.spot-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; }
.spot-list li { display: grid; grid-template-columns: 2em 1fr auto auto auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.spot-n { font-weight: 800; text-align: center; }
.alb-car { display: inline-flex; gap: 4px; align-items: center; }
.alb-car select { max-width: 9em; }
@media (max-width: 700px) {
  .spot-list li { grid-template-columns: 2em 1fr auto auto; row-gap: 2px; }
  .spot-list li > :nth-child(1) { grid-row: 1 / 3; }
  .spot-list li > :nth-child(3) { grid-column: 2; grid-row: 2; font-size: .9rem; }
  .spot-list li > :nth-child(4) { grid-column: 3; grid-row: 1 / 3; }
  .spot-list li > :nth-child(5) { grid-column: 4; grid-row: 1 / 3; }
  .checkin-code img { width: 180px; }
}
.guide-jump { margin: 0 0 12px; }
.guide-sec { border: 1px solid var(--line); background: var(--bg); margin: 0 0 10px; padding: 0 14px; scroll-margin-top: 80px; }
.guide-sec summary { cursor: pointer; padding: 12px 0; font: 800 1.3rem/1.2 var(--font-display); }
.guide-sec ol { margin: 0 0 14px; padding-left: 1.3em; display: grid; gap: 8px; line-height: 1.5; }
.updates { display: grid; gap: 12px; }
.update { border: 1px solid var(--line); background: var(--bg); padding: 12px 16px; }
.update.fresh { border-left: 4px solid var(--red, #e5484d); }
.update-head { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: .9rem; }
.update h3 { margin: 4px 0 6px; }
.update ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 6px; line-height: 1.45; }
.new-btn { white-space: nowrap; }
@media (max-width: 420px) { .new-btn { padding-inline: 6px; } }
.more-sheet, .more-back { display: none; }
@media (max-width: 700px) {
  button.tab { background: none; border: 0; cursor: pointer; }
  .more-back { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,.35); }
  .more-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; position: fixed; left: 8px; right: 8px; z-index: 46;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border: 2px solid var(--ink); padding: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.3); }
  .more-item { position: relative; display: grid; justify-items: center; gap: 4px; padding: 12px 4px; color: var(--ink); text-decoration: none; font: 700 .75rem var(--font-body); text-transform: uppercase; letter-spacing: .03em; border: 1px solid var(--line); text-align: center; }
  .more-item svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
  .more-item.on { color: var(--accent); border-color: var(--accent); }
  .more-item .tab-badge { top: 4px; left: auto; right: 4px; }
}
@media (max-width: 700px) { button.more-item { background: none; cursor: pointer; } .more-item.logout { color: var(--accent); } }
.history { display: grid; gap: 10px; }
.hist-tracks { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.hist-tracks .btn { white-space: nowrap; flex: none; }
.hist-board { display: grid; gap: 4px; }
.hist-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.history tr.pb td { background: color-mix(in srgb, #2fbf4a 10%, transparent); }
.pb-tag { font: 800 .7rem var(--font-body); color: #fff; background: #2fbf4a; padding: 1px 5px; vertical-align: middle; }
.history .behind { color: var(--muted); }
@media (max-width: 700px) { .history table.compact td, .history table.compact th { padding: 6px; font-size: .88rem; } }
/* Time wheels */
.tw { position: relative; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; max-width: 320px; border: 1px solid var(--line); background: var(--bg); user-select: none; }
.tw-col { height: 180px; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; position: relative; z-index: 1;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.tw-col::-webkit-scrollbar { display: none; }
.tw-col:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tw-pad { height: 72px; }
.tw-item { height: 36px; line-height: 36px; text-align: center; scroll-snap-align: center; font: 600 1.35rem/36px var(--font-data, monospace); color: var(--muted); cursor: pointer; }
.tw-item.on { color: var(--ink); font-weight: 800; font-size: 1.6rem; }
.tw:not(.set) .tw-item.on { color: var(--muted); }
.tw-sep { font: 800 1.6rem var(--font-data, monospace); z-index: 1; }
.tw-band { position: absolute; left: 6px; right: 6px; top: 72px; height: 36px; border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); pointer-events: none; }
.tw-units { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; max-width: 320px; text-align: center; font: 600 .7rem var(--font-body); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.tw-units span:nth-child(2), .tw-units span:nth-child(4) { width: .9rem; }
.tw-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.runlog-banner { display: grid; gap: 8px; border: 1px solid var(--accent); background: var(--red-soft); padding: 10px 12px; margin: 12px 0; }
.runlog-banner .proof-box { background: var(--bg); padding: 8px; }
.rev-btn { margin-left: 6px; min-height: 28px; padding: 2px 8px; font-size: .75rem; }
.earlier { border: 1px dashed var(--line); padding: 8px 10px; display: grid; gap: 6px; grid-column: 1 / -1; }
.earlier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.earlier li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.flash-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.history td.time { white-space: nowrap; }
.history .rev-btn, .history .now-tag { display: block; margin: 4px 0 0 auto; width: max-content; }
.now-tag { font: 700 .7rem var(--font-body); color: #2fbf4a; text-transform: uppercase; letter-spacing: .04em; }
.earlier .now-tag, .earlier .rev-btn { display: inline-block; margin: 0; }
@media (max-width: 700px) { .history table.compact th:nth-child(4), .history table.compact td:nth-child(4) { font-size: .8rem; } .history table.compact td:nth-child(2) { max-width: 6.5em; } }
.price-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.stock { font: 700 .8rem var(--font-body); text-transform: uppercase; letter-spacing: .05em; }
.stock.in { color: #2fbf4a; }
.stock.soon { display: inline-block; width: max-content; padding: 3px 8px; border: 1px solid var(--accent); color: var(--accent); font-size: .85rem; }
.product.soon .product-pic img { filter: grayscale(.4); }
.hidden-products { margin: 4px 0 18px; }
.hidden-products summary { cursor: pointer; color: var(--muted); font-weight: 600; padding: 6px 0; }
.stock-pick select { max-width: 100%; }
.stock.out { color: var(--muted); }
.stock.hid { color: var(--muted); }
.product.off { opacity: .6; border-style: dashed; }
/* Accounts on a phone: one card per account instead of a wide table */
@media (max-width: 700px) {
  table.accounts, table.accounts tbody { display: block; min-width: 0 !important; }
  table.accounts thead { display: none; }
  table.accounts tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 10px; border-bottom: 2px solid var(--line); }
  table.accounts td { display: block; padding: 0 !important; border: 0 !important; }
  table.accounts td.acc-name, table.accounts td.acc-drivers, table.accounts td.acts { grid-column: 1 / -1; }
  table.accounts td.acc-user { grid-column: 1 / -1; font-size: .9rem; }
  table.accounts td.acc-name input, table.accounts td.acc-drivers input, table.accounts td.acc-drivers select { width: 100%; }
  table.accounts td[data-label]:not(.tick)::before { content: attr(data-label); display: block; font: 600 .7rem var(--font-body); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 2px; }
  table.accounts td.tick { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
  table.accounts td.tick::after { content: attr(data-label); }
  table.accounts td.tick input { width: 20px; height: 20px; margin: 0; }
  table.accounts td.acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .table-box:has(> table.accounts) { overflow: visible; }
}
@media (max-width: 700px) { .table-box > table.accounts td:nth-child(4), .table-box > table.accounts td:nth-child(5) { display: block; } }
/* Phones: the "tap the map" label is clear and there from the start (also with Hide info on) */
.c3d-tip.tap { bottom: calc(max(15%, 44px) + 34px); font-size: 1rem; padding: 10px 16px; border-width: 2px; }   /* just above the height graph */
   /* Hide info: the graph is gone, so right at the bottom */
.c3d.clean .c3d-tip.tap { bottom: 14px; display: block !important; }
.row.space { justify-content: space-between; align-items: center; }
.past-tabs { display: flex; gap: 0; margin: 4px 0 12px; }
.past-tabs .btn { flex: 1; }
.past-tabs .btn.on { background: var(--ink); color: var(--bg); }
.past-month h3 { margin-bottom: 6px; }
.req { color: var(--accent); }
.drive-banner { display: grid; gap: 6px; border: 2px solid var(--accent); background: var(--surface); padding: 10px 12px; margin: 12px 0; }
.drive-banner ul, .drive-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.drive-banner li, .drive-list li { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--line); }
.drive-banner select, .drive-list select { min-width: 7.5em; }
#add-car-form { flex-wrap: wrap; }
#add-car-form #add-car-hp, #add-car-form #add-car-year { width: 9em; }
.course-new { border: 1px dashed var(--line); padding: 10px; margin-bottom: 10px; }
.fields.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.more-opts summary { cursor: pointer; color: var(--muted); font-weight: 600; padding: 4px 0; }
.course-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.course-list li { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.course-list li.hid { opacity: .6; }
.course-list .course-edit { grid-column: 1 / -1; border: 1px dashed var(--line); padding: 10px; }
.cl-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cl-progress { font-size: .85rem; color: var(--accent); margin-top: 2px; }
.cl-progress.bad { color: var(--danger, #e5484d); }
@media (max-width: 700px) { .fields.two { grid-template-columns: 1fr; } .course-list li { grid-template-columns: 1fr; } .cl-acts { justify-content: flex-start; } }
/* Admin tabs */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 4px 0; }
.admin-tabs .btn { flex: 1 1 auto; white-space: nowrap; }
.admin-tabs .btn.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.admin-tabs .badge { margin-left: 4px; }
@media (max-width: 700px) { .admin-tabs { display: grid; grid-template-columns: repeat(4, 1fr); } .admin-tabs .btn { padding-inline: 2px; font-size: .72rem; } }
.bell-btn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.bell-btn.on { border-color: #2fbf4a; }
.bell-btn.on .bell-text { color: #2fbf4a; }
@media (max-width: 700px) { .bell-btn .bell-text { display: none; } .bell-btn { min-width: 34px; justify-content: center; } }
/* 🔔 list */
.bell-btn { position: relative; }
.bell-btn.open { background: var(--ink); color: var(--bg); }
.bell-count { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font: 700 11px/18px var(--font-body); }
.bell-back { position: fixed; inset: 0; z-index: 48; background: rgba(0,0,0,.25); }
.bell-panel { position: fixed; z-index: 49; top: 70px; right: max(16px, calc((100vw - 1240px) / 2)); width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 100px); overflow: auto; background: var(--bg); border: 2px solid var(--ink); box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); }
.bell-phone { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: .88rem; background: var(--surface); }
.bell-list { list-style: none; margin: 0; padding: 0; }
.bell-list li a { display: grid; gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.bell-list li a:hover { background: var(--surface); }
.bell-list li.new a { border-left: 4px solid var(--accent); padding-left: 8px; }
.bell-list span { color: var(--ink); font-size: .9rem; }
.bell-list small { color: var(--muted); }
.bell-empty { padding: 12px; margin: 0; }
@media (max-width: 700px) { .bell-panel { top: 12px; left: 8px; right: 8px; width: auto; max-height: calc(100vh - 100px - env(safe-area-inset-bottom, 0px)); } }
/* Meeting points */
.mm-meet { cursor: pointer; }
.mm-meet .mm-meet-dot { fill: #ff7a3d; stroke: #05010f; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mm-meet .mm-meet-hit { fill: transparent; }   /* a bigger, invisible area so the small pin is still easy to tap */
.mm-meet.on .mm-meet-dot, .mm-meet:hover .mm-meet-dot { fill: #ffd23f; }
.mm-meet text { fill: #ff7a3d; font-weight: 700; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.mm-meet-head { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.meet-box { margin: 12px 0; }
.course-about { border: 1px solid var(--line); background: var(--surface); padding: 10px 14px; margin: 8px 0 14px; line-height: 1.5; }
.glb-hint { align-self: center; }
.meet-size input[type=range] { width: 100%; accent-color: var(--accent); }
.ev-place-list { margin: 4px 0 6px; padding-left: 1.4em; display: grid; gap: 4px; }
.ev-place-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ev-places .row input { flex: 1; min-width: 0; }
.ev-where a { white-space: nowrap; }
.spot-course { margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--line); } .ev-spots-course:first-child .spot-course { border-top: 0; padding-top: 0; margin-top: 4px; }
/* Events: groups, status and the event page */
.ev-group { font: 800 1.4rem/1.2 var(--font-display); text-transform: uppercase; margin: 18px 0 8px; }
.ev-group small { color: var(--muted); font-size: .9rem; }
.ev-group.now { color: #2fbf4a; }
.ev-group.soon { color: var(--accent); }
.ev-status { display: inline-block; font: 700 .72rem var(--font-body); text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; margin-bottom: 4px; border: 1px solid; }
.ev-status.now { color: #2fbf4a; animation: c3dblink 1.6s steps(2) infinite; }
.ev-status.soon { color: var(--accent); }
.ev-status.past { color: var(--muted); }
.event.row h3 a { color: inherit; text-decoration: none; }
.event.row h3 a:hover { text-decoration: underline; }
.ev-maps { margin: 10px 0; display: grid; gap: 8px; }
.ev-map-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.event.full .course-map { min-height: 260px; }
@media (prefers-reduced-motion: reduce) { .ev-status.now { animation: none; } }
@media (max-width: 700px) {
  .event.full .event-top { display: block; }
  .event.full .event-date { display: inline-grid; margin: 0 0 8px; }
}
.cn-ver-field[hidden], .cn-name-field[hidden] { display: none; }
.course-list li.cl-map { display: block; padding: 12px 0 2px; border-top: 2px solid var(--line); }
.course-list li.cl-version { padding-left: 14px; border-top: 1px dashed var(--line); }
/* PS1 car maker window */
body.cm-open { overflow: hidden; }
.cm { position: fixed; inset: 0; z-index: 100; background: rgba(5,1,15,.7); display: grid; place-items: center; }
.cm-win { width: min(1200px, 100vw); height: min(820px, 100dvh); background: var(--bg); border: 2px solid var(--ink); display: grid; grid-template-rows: auto 1fr auto; }
.cm-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cm-acts { display: flex; gap: 6px; }
.cm-body { display: grid; grid-template-columns: 1.3fr 1fr; min-height: 0; }
.cm-view { position: relative; background: #1a0636; min-height: 0; }
.cm-view canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.cm-hint { position: absolute; left: 8px; bottom: 6px; color: #c9b8ff; font-size: .75rem; }
.cm-side { overflow: auto; padding: 10px 14px; border-left: 1px solid var(--line); }
.cm-panel section { border-bottom: 1px solid var(--line); padding: 8px 0 12px; display: grid; gap: 6px; }
.cm-panel h3 { margin: 4px 0; font: 800 1.1rem var(--font-display); text-transform: uppercase; }
.cm-field { display: grid; gap: 2px; font-size: .85rem; }
.cm-field input[type=range] { width: 100%; accent-color: var(--accent); }
.cm-field input[type=color] { width: 100%; height: 34px; padding: 0; border: 1px solid var(--line); background: none; }
.cm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cm-note { margin: 0; color: var(--muted); font-size: .8rem; }
.cm-photo { border: 1px dashed var(--line); padding: 8px; display: grid; gap: 4px; }
.cm-photo-head { display: flex; gap: 6px; align-items: center; }
.cm-photo-head b { flex: 1; }
.cm-photo small { color: var(--muted); }
.cm-crop { position: relative; touch-action: none; cursor: crosshair; user-select: none; }
.cm-crop img { width: 100%; display: block; pointer-events: none; }
.cm-box { position: absolute; border: 2px solid #5dff3a; box-shadow: 0 0 0 9999px rgba(0,0,0,.45); pointer-events: none; }
.cm-crop { overflow: hidden; }
.cm-msg { padding: 6px 12px; font-size: .85rem; color: var(--accent); min-height: 1.2em; }
@media (max-width: 760px) {
  .cm-win { height: 100dvh; border: 0; }
  .cm-body { grid-template-columns: 1fr; grid-template-rows: 42vh 1fr; }
  .cm-side { border-left: 0; border-top: 1px solid var(--line); }
}
/* Forum */
.forum-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.forum-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.forum-list li { border: 1px solid var(--line); background: var(--surface); padding: 10px 12px; display: grid; gap: 4px; }
.forum-list li.pinned { border-left: 4px solid var(--accent); }
.ft-main { display: grid; gap: 2px; color: var(--ink); text-decoration: none; }
.ft-main b { font-size: 1.05rem; }
.ft-main span { color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.forum-list small { color: var(--muted); }
.thread { border: 1px solid var(--line); background: var(--surface); padding: 12px 14px; display: grid; gap: 8px; }
.th-title { margin: 4px 0; font-size: clamp(1.4rem, 5vw, 2rem); overflow-wrap: anywhere; }
.th-text, .th-reply p { line-height: 1.55; overflow-wrap: anywhere; margin: 0; }
.th-replies { display: grid; gap: 8px; margin: 14px 0; }
.th-reply { border-left: 3px solid var(--line); padding: 4px 0 4px 12px; }
.th-meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.th-form textarea { width: 100%; }
#reply-form, #forum-form { display: grid; grid-template-columns: 1fr; }
#reply-form textarea { width: 100%; }
.forum-cats small { margin-left: 5px; opacity: .7; }
.id-tag { font: 700 .8em var(--font-data, monospace); color: var(--muted); letter-spacing: .02em; }
h1 .id-tag { font-size: .45em; vertical-align: middle; }
.acc-bell { white-space: nowrap; text-align: center; }
.acc-bell small { color: #2fbf4a; font-weight: 700; }
.bell-off { opacity: .45; }
.danger-zone { border: 2px solid var(--danger, #e5484d); padding: 10px; }
.legal ul, .legal ol { margin: 4px 0; padding-left: 1.3em; display: grid; gap: 6px; line-height: 1.5; }
.road-note { border-left: 4px solid var(--accent); }
.su-agree { font-size: .9rem; }
.report-btn { color: var(--muted); font-size: .8rem; }
.mod-list { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 8px; }
.mod-list li { border: 1px solid var(--line); padding: 8px 10px; display: grid; gap: 6px; }
.mod-list li p { margin: 2px 0; overflow-wrap: anywhere; }
.mod-member { display: flex !important; justify-content: space-between; align-items: center; }
.role-badge.og { color: #ff7a3d; }
.role-badge.mod { color: #27e8ff; }
.acc-savebar { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 8px 0; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
table.accounts tr.edited td { background: color-mix(in srgb, var(--accent) 9%, transparent); }
@media (max-width: 700px) { .acc-savebar { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); top: auto; border-top: 1px solid var(--line); } }
.invite-banner { border: 2px solid #2fbf4a; background: var(--surface); padding: 10px 12px; margin: 0 0 12px; }
.invite-link { display: flex; gap: 6px; }
.invite-link input { flex: 1; min-width: 0; font-family: var(--font-data, monospace); }
.invited { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 4px; }
.appeal-box { border-left: 4px solid var(--accent); }
.mod-person { display: grid; gap: 6px; }
.mod-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mod-acts select { max-width: 7.5em; }
.mm-tag.bad, .bad { color: var(--danger, #e5484d); }

/* Radio frequency reminder on every track */
.radio-note { margin: 0; padding: 8px 12px; border: 1px dashed var(--accent, #d42020); background: color-mix(in srgb, var(--accent, #d42020) 7%, transparent); font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.radio-note b { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Recommended radios in the shop */
.radios { display: grid; gap: 12px; margin-top: 8px; }
.radios h2 { margin: 0; }
.radio-product .product-pic img { object-fit: contain; background: #fff; }
.radio-product .btn { justify-self: start; }

/* Admin editing of the site's wording */
.admin-edit { margin-bottom: 4px; }
.md-intro p { margin: 0 0 8px; color: var(--muted); }
.box.legal p { margin: 0 0 8px; }
.page-editor textarea { width: 100%; font: 14px/1.5 ui-monospace, Menlo, Consolas, monospace; }
.md-help { font-size: 13px; }
.edit-pen { margin-left: 8px; padding: 2px 8px; vertical-align: middle; }
.site-text-form { align-items: flex-end; flex-wrap: wrap; gap: 8px; }
.site-text-form .field { flex: 1 1 200px; }
.site-text-form textarea { width: 100%; }
.link-add { flex-wrap: wrap; gap: 8px; }
.link-add input { flex: 1 1 260px; min-width: 0; }
.link-tools { flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.link-edit-form { display: grid; gap: 8px; }
.link-edit-form textarea, .link-edit-form input { width: 100%; }
.link-edit-pic { width: 100%; max-height: 160px; object-fit: contain; background: #fff; }

/* Add an old time */
.old-time h3 { margin: 0; }
.ot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.ot-grid .ot-wide { grid-column: 1 / -1; }
.ot-grid select, .ot-grid input { width: 100%; }
.older-link { display: block; margin-left: auto; background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }

/* Admin: edit or delete a time on a profile */
.time-tools, .time-edit { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; flex-wrap: wrap; justify-content: flex-end; }
.time-tools .btn { padding: 2px 6px; font-size: 12px; }
.time-edit { display: flex; margin: 6px 0 0; }
.time-edit input { width: 92px; font-size: 13px; padding: 4px 6px; }
.time-edit input[type=date] { width: 140px; }
.prog-time { font: 600 11px var(--font-mono, ui-monospace, monospace); fill: var(--ink); }
.prog-time.best { fill: #1f9a3a; }
.prog-date { font-size: 10px; fill: var(--muted); }
.prog-axis { stroke: var(--line); stroke-width: 1; }

/* Badges: the Admin badge and badges the owner makes up */
.role-badge.admin { color: #ff4d6d; }
.role-badge.custom { color: var(--bc, #e0b33c); }
.badge-fields { display: grid; grid-template-columns: 90px 1fr 80px; gap: 8px; }
.badge-fields .bf-about { grid-column: 1 / -1; }
.badge-fields input { width: 100%; }
.badge-fields input[type=color] { height: 40px; padding: 2px; }
.badge-new { display: grid; gap: 10px; }
.badge-new .btn { justify-self: start; }
.badge-card { display: grid; gap: 10px; }
.badge-people { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-x { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 2px 6px; font: inherit; }
.chip-x:hover { color: var(--danger, #c33); }

/* Drivers without an account */
.unlinked { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.unlinked li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.invite-made { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1 1 260px; justify-content: flex-end; }
.invite-made input { flex: 1 1 180px; min-width: 0; font-size: 13px; }

/* Site health */
.health { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.health li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.health li.ok span { color: #1f9a3a; }
.health li.bad span { color: var(--danger, #c33); font-weight: 700; }
.health small { color: var(--muted); }

/* Event places: drag ⠿ to reorder */
.ev-place-list li { display: flex; align-items: center; gap: 8px; }
.ev-place-list li > span { flex: 1; }
.ev-drag { cursor: grab; touch-action: none; user-select: none; background: none; border: 1px solid var(--line); color: var(--muted); font-size: 18px; line-height: 1; padding: 6px 8px; min-width: 36px; min-height: 36px; }
.ev-drag:active { cursor: grabbing; }
.ev-place-list li.dragging { background: var(--surface); outline: 2px dashed var(--accent); opacity: .9; }

/* Banned & deleted accounts */
.gone-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.gone-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.gone-list small { color: var(--muted); }

/* Weather for a time */
.time-tap { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.time-tap.on { color: var(--accent); }
.weather-row td { background: var(--surface); padding: 10px 12px !important; text-align: left !important; }
.wx-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wx-head small { display: block; color: var(--muted); }
.wx-icon { font-size: 30px; line-height: 1; }
.wx-tag { margin-left: auto; padding: 2px 8px; border: 1px solid var(--line); font-size: 12px; }
.wx-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.wx-part { margin: 0; }
.wx-hour { display: grid; justify-items: center; gap: 2px; min-width: 46px; padding: 4px; border: 1px solid var(--line); font-size: 15px; }
.wx-hour small { font-size: 10px; color: var(--muted); }
.wx-hour .wx-rain { color: #2a7bd4; }
/* the hour strip scrolls inside the panel instead of stretching the table on phones */
.wx { display: grid; gap: 8px; font-size: 14px; max-width: calc(100vw - 64px); }
.wx-strip { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; }
/* Phones: the time cell (▶ race button, time, marks) may wrap, so the table fits the screen instead of cutting times off */
@media (max-width: 560px) {
  .table-box td.num.time { white-space: normal; }
  .table-box td.num.time .time-tap, .table-box td.num.time .play-run { white-space: nowrap; }
}

/* ---------- Profile: tidy header, Times / Cars tabs, one card per course ---------- */
.driver-hero { align-items: flex-start; }
.dh-main { display: grid; gap: 6px; min-width: 0; }
.dh-main h1 { margin: 0; }
.dh-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--muted); }
.dh-stats b { color: var(--ink); font-family: var(--font-data); }
.dh-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-tabs { display: flex; gap: 0; margin: 18px 0 12px; border-bottom: 2px solid var(--ink); }
.pf-tabs button { flex: 1; max-width: 220px; background: none; border: 0; padding: 10px 12px; font: 800 italic 18px var(--font-display); text-transform: uppercase; color: var(--muted); cursor: pointer; border-bottom: 4px solid transparent; margin-bottom: -2px; }
.pf-tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.pf-tabs small { font: 600 12px var(--font-data); color: var(--muted); }
.pf-times { display: grid; gap: 10px; }
.tc-track { margin: 8px 0 0; }
.tc-track a { color: inherit; text-decoration: none; }
.tc-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tcard { border: 1px solid var(--line); border-top: 3px solid var(--ink); background: var(--surface); padding: 12px; display: grid; gap: 8px; min-width: 0; }
.tcard header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tc-board { display: inline-flex; align-items: center; gap: 4px; font: 800 italic 15px var(--font-display); text-transform: uppercase; }
.tc-board svg { width: 14px; height: 14px; }
.tc-car { color: var(--muted); font-size: 14px; }
.tc-pos { margin-left: auto; font: 800 italic 20px var(--font-display); }
.tc-pos small { font: 600 12px var(--font-data); color: var(--muted); }
.tc-pos.p1 { color: #d4a017; } .tc-pos.p2 { color: #8a96a3; } .tc-pos.p3 { color: #b0703a; }
.tc-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.tc-time { font: 700 26px var(--font-data); }
.tc-meta { font-size: 13px; color: var(--muted); }
.tc-chart { width: 100%; height: auto; display: block; background: var(--bg); }
.tc-chart circle { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.tc-chart circle.best { fill: #2fbf4a; stroke: #2fbf4a; }
.tc-more { justify-self: start; background: none; border: 0; padding: 2px 0; color: var(--accent); font: 600 14px var(--font-body, inherit); cursor: pointer; }
.tc-hist { width: 100%; }
.tc-hist td { padding: 6px 4px; }
.tc-wx { border-top: 1px dashed var(--line); padding-top: 8px; }
.tc-wx .wx { max-width: 100%; }
.tc-video { border-top: 1px dashed var(--line); padding-top: 8px; }
.time-edit input.vid-in { width: min(260px, 60vw); }
@media (max-width: 560px) {
  .tc-grid { grid-template-columns: 1fr; }
  .driver-hero .avatar.big { width: 72px; height: 72px; }
  .pf-tabs button { font-size: 16px; }
}
.tc-grid { align-items: start; }
.tcard { align-content: start; }
.tc-main .time-tools { margin-left: auto; }
/* the days on a time card: wrap onto two lines on a phone instead of getting wider */
.tc-days { display: grid; border-top: 1px solid var(--line); }
.tc-day { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tc-day-date { min-width: 96px; color: var(--muted); font-size: 13px; }
.tc-day-time { font: 700 16px var(--font-data); }
.tc-day-diff { font: 600 13px var(--font-data); }
.tc-day-tools { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.tc-day-tools:empty { display: none; }

/* Members: everyone's profile with a search */
.members-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.members-bar input { flex: 1 1 220px; min-width: 0; }
.mgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 12px; }
.mcard { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-top: 3px solid var(--ink); background: var(--surface); color: inherit; text-decoration: none; min-width: 0; }
.mcard:hover { border-top-color: var(--accent); }
.mcard .avatar { width: 64px; height: 64px; flex: none; }
.mc-body { display: grid; gap: 2px; min-width: 0; }
.mc-name { font: 800 italic 20px var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.mc-user, .mc-line { color: var(--muted); font-size: 13px; }
.mc-line b { color: var(--ink); }
.mc-badges { font-size: 14px; letter-spacing: 2px; }
@media (max-width: 560px) { .mgrid { grid-template-columns: 1fr; } .mcard .avatar { width: 56px; height: 56px; } }
.acc-user-edit { display: inline-flex; align-items: center; gap: 2px; }
.acc-user-edit input { width: 130px; min-width: 0; }

/* ---------- Site look: Neon (the third theme, next to Light and Dark) ---------- */
:root[data-theme="neon"] {
  --bg: #0c0518; --surface: #160a2a; --ink: #f4ecff; --muted: #a891cc; --line: #36205c;
  --accent: #ff2bd6; --accent-ink: #14001c; --danger: #ff6b8a;
  --gold: #ffd23f; --silver: #b9c6ff; --bronze: #ff9a5c;
  color-scheme: dark;
}
:root[data-theme="neon"] body { background: radial-gradient(ellipse at 50% -10%, #2a0d4f 0%, var(--bg) 55%) fixed; }
:root[data-theme="neon"] .top h1 span, :root[data-theme="neon"] .site .brand span { text-shadow: 0 0 10px rgba(255, 43, 214, .6); }

/* ---------- Map looks: Daylight and Midnight blueprint (Neon arcade is the default above) ---------- */
.c3d.theme-real { background: #c9e2f7; border-color: #2b3a42; box-shadow: none; }
.c3d.theme-real .c3d-canvas { image-rendering: auto; }
.c3d.theme-real .c3d-title { background: rgba(255, 255, 255, .88); border-color: #2b3a42; box-shadow: none; color: #1d2a30; }
.c3d.theme-real .c3d-sub { color: #3b6f8f; }
.c3d.theme-real .c3d-name { color: #e8461e; text-shadow: none; }
.c3d.theme-real .c3d-lay { color: #2f7d32; text-shadow: none; }
.c3d.theme-real .c3d-label.section { color: #e8461e; text-shadow: 0 0 3px #fff; }
.c3d.theme-blueprint { background: #06213f; border-color: #7fb8ff; box-shadow: 0 0 18px rgba(127, 184, 255, .25); }
.c3d.theme-blueprint .c3d-canvas { image-rendering: auto; }
.c3d.theme-blueprint .c3d-title { background: rgba(2, 11, 26, .82); border-color: #7fb8ff; box-shadow: 0 0 10px rgba(127, 184, 255, .35); }
.c3d.theme-blueprint .c3d-sub { color: #7fb8ff; }
.c3d.theme-blueprint .c3d-name { color: #ffd23f; text-shadow: 0 0 6px rgba(255, 210, 63, .6); }
.c3d.theme-blueprint .c3d-lay { color: #ffffff; text-shadow: none; }
.c3d.theme-blueprint .c3d-label.section { color: #ffd23f; text-shadow: 0 0 6px #ffd23f; }
/* the Malta overview map */
:root[data-map-theme="real"] .mm-stage { background: radial-gradient(ellipse at 50% 40%, #dcecf9 0%, #a9cdee 80%); border-color: #2b3a42; box-shadow: none; }
:root[data-map-theme="real"] .mm-land { fill: #ece5d2; stroke: #6b7f5a; filter: none; }
:root[data-map-theme="real"] .mm-road { stroke: #e8461e; }
:root[data-map-theme="real"] .mm-zoom .btn { background: rgba(255,255,255,.9); color: #1d2a30; border-color: #2b3a42; }
:root[data-map-theme="blueprint"] .mm-stage { background: radial-gradient(ellipse at 50% 40%, #0b3460 0%, #020b1a 80%); border-color: #2f6fa8; box-shadow: none; }
:root[data-map-theme="blueprint"] .mm-land { fill: #041528; stroke: #7fb8ff; filter: drop-shadow(0 0 2px #7fb8ff88); }
:root[data-map-theme="blueprint"] .mm-road { stroke: #ffd23f; }
:root[data-map-theme="blueprint"] .mm-zoom .btn { background: rgba(2,11,26,.85); color: #fff; border-color: #2f6fa8; }

/* ---------- Settings ---------- */
.theme-picks { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.theme-pick { display: grid; gap: 6px; padding: 8px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; font: inherit; }
.theme-pick.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.theme-pick b { font: 800 italic 16px var(--font-display); text-transform: uppercase; }
.theme-pick small { color: var(--muted); }
.theme-swatch { display: block; height: 70px; border: 1px solid rgba(0,0,0,.15); position: relative; overflow: hidden; }
.theme-swatch i { position: absolute; display: block; }
.theme-swatch svg { width: 100%; height: 100%; display: block; }
/* the 🌳 trees on/off button on each 3D map */
.c3d-trees { position: absolute; right: 18px; top: 78px; z-index: 3; width: 44px; height: 44px; font-size: 22px; line-height: 1; border: 2px solid #27e8ff; background: rgba(5, 1, 15, .75); cursor: pointer; pointer-events: auto; }
.c3d-trees[aria-pressed="false"] { opacity: .45; filter: grayscale(1); }
.c3d.theme-real .c3d-trees { border-color: #2b3a42; background: rgba(255, 255, 255, .88); }
.c3d.theme-blueprint .c3d-trees { border-color: #7fb8ff; background: rgba(2, 11, 26, .82); }
/* meeting-point maps in the Realistic and Blueprint looks */
.c3d.meet3d.theme-real .c3d-title { background: rgba(255, 255, 255, .88); border-color: #2b3a42; box-shadow: none; color: #1d2a30; }
.c3d.meet3d.theme-real .c3d-place { color: #e8461e; text-shadow: none; }
.c3d.meet3d.theme-blueprint .c3d-title { background: rgba(2, 11, 26, .82); border-color: #7fb8ff; }
.c3d.meet3d.theme-blueprint .c3d-place { color: #ffd23f; }

/* ---------- Site look: Initial D (night pass, AE86 panda black and white, tofu-shop orange) ---------- */
:root[data-theme="initiald"] {
  --bg: #0d0e11; --surface: #16181c; --ink: #f4f4f2; --muted: #9a9ca3; --line: #2c2f35;
  --accent: #ff6a00; --accent-ink: #120700; --danger: #ff5a4f;
  --gold: #ffcf3f; --silver: #c9ccd3; --bronze: #d98a52;
  color-scheme: dark;
}
:root[data-theme="initiald"] body { background: linear-gradient(180deg, #0b1020 0%, var(--bg) 340px) fixed; }
/* the panda: white tops on cards, like the AE86's white over black */
:root[data-theme="initiald"] .tcard, :root[data-theme="initiald"] .mcard, :root[data-theme="initiald"] .product, :root[data-theme="initiald"] .car-card, :root[data-theme="initiald"] .team-card { border-top-color: #f4f4f2; }
:root[data-theme="initiald"] .top h1 span { color: var(--accent); }
:root[data-theme="initiald"] .site .brand span { color: #fff; text-shadow: 0 0 1px #000, 2px 2px 0 #ff6a00; }

/* ---------- Site look: Wangan Midnight (midnight blue, Devil Z blue, sodium-light gold) ---------- */
:root[data-theme="wangan"] {
  --bg: #040a1e; --surface: #0a1433; --ink: #e9eeff; --muted: #8b98c9; --line: #1b2a5e;
  --accent: #3d7bff; --accent-ink: #ffffff; --danger: #ff6b6b;
  --gold: #ffc23d; --silver: #b9c6f0; --bronze: #e39a5a;
  color-scheme: dark;
}
:root[data-theme="wangan"] body { background: radial-gradient(ellipse at 50% -20%, #13265f 0%, var(--bg) 60%) fixed; }
:root[data-theme="wangan"] .top h1 span { color: var(--accent); text-shadow: 0 0 14px rgba(61, 123, 255, .55); }
:root[data-theme="wangan"] .tcard, :root[data-theme="wangan"] .mcard { border-top-color: var(--accent); }
:root[data-theme="wangan"] .eyebrow { color: var(--gold); }

/* ---------- Site look: Rally (white and navy, WRC blue and gold) ---------- */
:root[data-theme="rally"] {
  --bg: #eef1f7; --surface: #ffffff; --ink: #0d1b4a; --muted: #56618a; --line: #d3d9ea;
  --accent: #1a3fa0; --accent-ink: #ffffff; --danger: #c62828;
  --gold: #c99a06; --silver: #7d8aa3; --bronze: #a0522d;
}
:root[data-theme="rally"] .top h1 span { color: #f5b800; text-shadow: 1px 1px 0 var(--accent); }
:root[data-theme="rally"] .tcard, :root[data-theme="rally"] .mcard, :root[data-theme="rally"] .product, :root[data-theme="rally"] .car-card { border-top-color: #f5b800; }
/* map labels in the Initial D and Wangan looks */
.c3d.theme-initiald { background: #0b1222; border-color: #e8e8e8; box-shadow: none; }
.c3d.theme-initiald .c3d-canvas, .c3d.theme-wangan .c3d-canvas { image-rendering: auto; }
.c3d.theme-initiald .c3d-title { background: rgba(10, 10, 12, .85); border-color: #e8e8e8; box-shadow: none; }
.c3d.theme-initiald .c3d-sub { color: #9a9ca3; }
.c3d.theme-initiald .c3d-name, .c3d.theme-initiald .c3d-place { color: #ff6a00; text-shadow: none; }
.c3d.theme-initiald .c3d-lay { color: #ffffff; text-shadow: none; }
.c3d.theme-initiald .c3d-trees { border-color: #e8e8e8; background: rgba(10, 10, 12, .85); }
.c3d.theme-wangan { background: #071542; border-color: #3d7bff; box-shadow: 0 0 18px rgba(61, 123, 255, .3); }
.c3d.theme-wangan .c3d-title { background: rgba(1, 3, 12, .85); border-color: #3d7bff; box-shadow: 0 0 10px rgba(61, 123, 255, .4); }
.c3d.theme-wangan .c3d-sub { color: #8fb0ff; }
.c3d.theme-wangan .c3d-name, .c3d.theme-wangan .c3d-place { color: #ffa63d; text-shadow: 0 0 8px rgba(255, 166, 61, .6); }
.c3d.theme-wangan .c3d-lay { color: #8fb0ff; text-shadow: none; }
.c3d.theme-wangan .c3d-trees { border-color: #3d7bff; background: rgba(1, 3, 12, .85); }
/* the Malta overview map */
:root[data-map-theme="initiald"] .mm-stage { background: radial-gradient(ellipse at 50% 40%, #1c2740 0%, #03050b 80%); border-color: #3a3d44; box-shadow: none; }
:root[data-map-theme="initiald"] .mm-land { fill: #1a2a1e; stroke: #e8e8e8; filter: none; }
:root[data-map-theme="initiald"] .mm-road { stroke: #ff6a00; }
:root[data-map-theme="wangan"] .mm-stage { background: radial-gradient(ellipse at 50% 40%, #1a2c78 0%, #01030c 80%); border-color: #3d7bff; box-shadow: none; }
:root[data-map-theme="wangan"] .mm-land { fill: #101a36; stroke: #3d7bff; filter: drop-shadow(0 0 3px #3d7bff88); }
:root[data-map-theme="wangan"] .mm-road { stroke: #ffa63d; filter: drop-shadow(0 0 3px #ffa63d); }

/* Forum polls */
.poll-make { border: 1px dashed var(--line); padding: 10px; display: grid; gap: 8px; }
.poll-make legend { font-weight: 700; }
.poll-opt input { flex: 1 1 auto; min-width: 0; }
.poll { border: 1px solid var(--line); background: var(--surface); padding: 12px; display: grid; gap: 8px; margin-top: 10px; }
.poll-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.poll-head small { color: var(--muted); }
.poll-choice { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); cursor: pointer; }
.poll-choice:has(input:checked) { border-color: var(--accent); }
.poll-row { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 10px; border: 1px solid var(--line); overflow: hidden; }
.poll-row.mine { border-color: var(--accent); }
.poll-bar { position: absolute; inset: 0 auto 0 0; background: var(--accent); opacity: .16; }
.poll-text, .poll-pct, .poll-who { position: relative; }
.poll-who { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }

/* Radio coverage bars */
.radio-cov { display: inline-flex; align-items: flex-end; gap: 5px; vertical-align: middle; }
.rc-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.rc-bars i { display: block; width: 5px; border-radius: 1px; }
.radio-cov b { font-size: 13px; }
.rn-set { display: inline-flex; gap: 4px; margin-left: auto; }
.rn-set .btn { color: var(--rc); letter-spacing: -2px; padding: 2px 8px; }
.rn-set .btn.on { background: var(--rc); color: #fff; border-color: var(--rc); }

/* Achievements */
.ach { display: grid; gap: 6px; }
.ach-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: none; border: 1px solid var(--line); padding: 6px 10px; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.ach-icons { letter-spacing: 2px; }
.ach-more { margin-left: auto; color: var(--muted); }
.ach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ach-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface); opacity: .55; filter: grayscale(.8); }
.ach-list li.done { opacity: 1; filter: none; border-color: var(--accent); }
.ach-list li > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ach-list small { color: var(--muted); }
.ach-i { font-size: 22px; line-height: 1; }
.ach-ok { color: var(--accent); }
.ach-prog { display: block; height: 5px; background: var(--line); }
.ach-prog i { display: block; height: 100%; background: var(--accent); }

/* Photo of the month */
.potm-banner { display: flex; gap: 12px; align-items: center; padding: 8px; margin: 8px 0; border: 1px solid var(--line); border-left: 4px solid var(--gold); background: var(--surface); color: inherit; text-decoration: none; }
.potm-banner img { width: 96px; height: 64px; object-fit: cover; flex: none; }
.potm-banner span { display: grid; gap: 1px; min-width: 0; }
.potm-banner small { color: var(--muted); }
.potm-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.potm-grid.small { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.potm-card { margin: 0; border: 1px solid var(--line); background: var(--surface); display: grid; color: inherit; text-decoration: none; }
.potm-card.mine { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.potm-card.won { border-top: 3px solid var(--gold); }
.potm-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--line); }
.potm-card figcaption, .potm-card > span { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px; }
.potm-card > span { display: grid; }
.potm-card figcaption > span { display: grid; min-width: 0; }
.potm-card small { color: var(--muted); }
.potm-hall { margin-bottom: 14px; }
/* Radio coverage on the 3D maps: the 📻 button under 🌳, and a small legend */
.c3d-zones { position: absolute; right: 18px; top: 130px; z-index: 3; width: 44px; height: 44px; font-size: 22px; line-height: 1; border: 2px solid #27e8ff; background: rgba(5, 1, 15, .75); cursor: pointer; pointer-events: auto; }
.c3d-zones[aria-pressed="false"] { opacity: .45; filter: grayscale(1); }
.c3d.theme-real .c3d-zones { border-color: #2b3a42; background: rgba(255, 255, 255, .88); }
.c3d.theme-blueprint .c3d-zones, .c3d.theme-wangan .c3d-zones { border-color: #7fb8ff; background: rgba(2, 11, 26, .82); }
.c3d.theme-initiald .c3d-zones { border-color: #e8e8e8; background: rgba(10, 10, 12, .85); }
.c3d-cov-legend { display: none; position: absolute; left: 50%; top: 46px; transform: translateX(-50%); z-index: 4; padding: 4px 10px; background: rgba(5, 1, 15, .82); color: #fff; font: 600 11px var(--font-body); white-space: nowrap; pointer-events: none; max-width: calc(100% - 140px); overflow: hidden; text-overflow: ellipsis; }
.c3d.cov-on .c3d-cov-legend:not(:empty) { display: block; }
.c3d.clean .c3d-cov-legend { display: none !important; }
.c3d-cov-legend .g { color: #3ddc6a; } .c3d-cov-legend .y { color: #ffc400; } .c3d-cov-legend .r { color: #ff5a4f; }
.c3d-cov-legend small { opacity: .7; }
@media (max-width: 560px) { .c3d-cov-legend { font-size: 10px; top: 44px; max-width: calc(100% - 24px); white-space: normal; text-align: center; } }
.radio-fix { margin: 6px 0; display: grid; gap: 6px; }
.radio-fix .row { flex-wrap: wrap; gap: 6px; }
.c3d.radio-edit { outline: 3px dashed var(--accent); outline-offset: -3px; }

/* ---------- Radio links: under course maps and on events' spotters ---------- */
.radio-links { border: 1px solid var(--line); border-left: 4px solid #22b04b; background: var(--surface); padding: 10px 12px; margin: 10px 0; display: grid; gap: 6px; }
.radio-links.weak { border-left-color: #e8b400; }
.rl-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rl-head .btn { margin-left: auto; }
.rl-list { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.rl-list li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.rl-list li > small { flex-basis: 100%; color: var(--muted); }
.rl-dot { font-size: .78rem; padding: 1px 7px; border-radius: 999px; color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.rl-dot.good { background: #22b04b; } .rl-dot.spotty { background: #c99a00; } .rl-dot.awful { background: #e5372b; }
.rl-rate { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex-basis: 100%; }
.rl-relay { padding: 8px 10px; border: 1px dashed #5dff3a; background: rgba(93, 255, 58, .07); }
.rl-relay .btn { margin: 4px 4px 0 0; }
.side-view { flex-basis: 100%; width: 100%; max-width: 560px; height: auto; background: rgba(39, 232, 255, .05); border: 1px solid var(--line); }
.sv-land { fill: rgba(120, 140, 110, .55); stroke: #7a8f6a; stroke-width: 1; }
.sv-zone { fill: rgba(39, 232, 255, .16); stroke: none; }
.sv-los { stroke-width: 2; stroke-dasharray: 5 3; } .sv-los.good { stroke: #22b04b; } .sv-los.spotty { stroke: #e8b400; } .sv-los.awful { stroke: #e5372b; }
.sv-radio { fill: #fff; stroke: #111; stroke-width: 1.5; }
.sv-block { fill: #e5372b; } .sv-block.spotty { fill: #e8b400; }
.sv-text { font: 600 9px var(--font-data); fill: var(--muted); }
.rl-edit { margin: 0 0 8px; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.rl-edit li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.spot-radio { display: flex; flex-wrap: wrap; gap: 4px; flex-basis: 100%; font-size: .85rem; }
.spot-list li .spot-radio { grid-column: 1 / -1; }

/* ---------- Wrapped: story cards ---------- */
.wr-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 10px 0 14px; color: #fff; text-decoration: none; background: linear-gradient(120deg, #1a0636, #5b0f5a 60%, #ff2bd6); border-radius: 6px; }
.wr-banner span:nth-child(2) { display: grid; flex: 1; } .wr-banner b { font: 800 italic 1.4rem var(--font-display); text-transform: uppercase; } .wr-banner small { opacity: .8; }
.wr-spark { font-size: 2rem; }
.wr-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.wr-month { display: grid; gap: 4px; padding: 18px; color: #fff; text-decoration: none; background: linear-gradient(140deg, #1a0636, #5b0f5a 70%, #ff2bd6); border-radius: 6px; }
.wr-month b { font: 800 italic 1.3rem var(--font-display); text-transform: uppercase; }
.wr { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: #05010f; color: #fff; padding: calc(env(safe-area-inset-top, 0px) + 28px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px); }
.wr-bars { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 12px; right: 12px; display: flex; gap: 4px; z-index: 3; }
.wr-bars i { flex: 1; height: 3px; background: rgba(255, 255, 255, .25); border-radius: 2px; }
.wr-bars i.done, .wr-bars i.on { background: #fff; }
.wr-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 22px); right: 14px; z-index: 4; color: #fff; font-size: 1.5rem; text-decoration: none; }
.wr-draft { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 24px); left: 14px; z-index: 4; font: 600 .8rem var(--font-body); background: #ff7a3d; color: #160b04; padding: 2px 8px; border-radius: 4px; }
.wr-card { position: relative; z-index: 2; width: min(520px, calc(100vw - 32px)); box-sizing: border-box; max-height: calc(100vh - 90px); overflow: auto; display: grid; gap: 12px; align-content: center; text-align: center; padding: 26px 20px; border-radius: 14px; background: linear-gradient(160deg, #2a0d4f, #5b0f5a); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); animation: wr-in .35s ease; }
@keyframes wr-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .wr-card { animation: none; } }
.wr-card > small { text-transform: uppercase; letter-spacing: .14em; opacity: .75; font-weight: 600; }
.wr-card h2 { margin: 0; font: 800 italic clamp(2rem, 9vw, 3.4rem)/1 var(--font-display); text-transform: uppercase; }
.wr-card h2 span { color: #5dff3a; }
.wr-card p { margin: 0; font-size: 1.05rem; } .wr-card p small { opacity: .8; }
.wr-card .btn { justify-self: center; }
.wr-big { font-family: var(--font-data) !important; font-style: normal !important; color: #5dff3a; font-size: clamp(3rem, 16vw, 5.5rem) !important; }
.wr-times { font: 700 1.3rem var(--font-data); } .wr-sub { opacity: .75; font-size: .92rem !important; }
.wr-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.wr-nums div { display: grid; padding: 12px 6px; background: rgba(255, 255, 255, .08); border-radius: 8px; }
.wr-nums b { font: 700 2.4rem var(--font-data); } .wr-nums span { font-size: .85rem; opacity: .8; }
.wr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.wr-list li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 10px; background: rgba(255, 255, 255, .07); border-radius: 6px; }
.wr-list li b { font-family: var(--font-data); white-space: nowrap; text-align: right; display: grid; } .wr-list li b small { font-weight: 500; opacity: .7; }
.wr-list li b.p1 { color: #ffd23f; } .wr-list li b.p2 { color: #d7dde2; } .wr-list li b.p3 { color: #e09a6a; }
.wr-list.icons li { justify-content: flex-start; } .wr-list.icons i { font-style: normal; font-size: 1.5rem; }
.wr-photo { width: 100%; max-height: 42vh; object-fit: cover; border-radius: 8px; }
.wr-model { width: 100%; height: 34vh; }
.wr-line { width: min(240px, 70%); justify-self: center; } .wr-line polyline { fill: none; stroke: #5dff3a; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px #5dff3a); }
.wr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .wr-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.wr-names a { color: #fff; }
.wr-video .yt { margin: 0; }
.wr-tap { position: absolute; top: 0; bottom: 0; width: 22%; z-index: 3; background: none; border: 0; cursor: pointer; }
.wr-tap.prev { left: 0; } .wr-tap.next { right: 0; } .wr-tap:disabled { cursor: default; }
.wr-dotm, .wr-records { background: linear-gradient(160deg, #3d2a05, #7a4a00); } .wr-dotm h2 span, .wr-records h2 span { color: #ffd23f; }
.wr-best, .wr-pbs { background: linear-gradient(160deg, #053d1a, #0f5b2a); }
.wr-rival { background: linear-gradient(160deg, #4f0d1a, #8a1030); }
.wr-club, .wr-busiest, .wr-faces { background: linear-gradient(160deg, #06213f, #0b3460); }
.wr-share, .wr-outro { background: linear-gradient(160deg, #5b0f5a, #ff2bd6); }

/* ---------- Donate ---------- */
.donate { display: grid; gap: 12px; max-width: 640px; }
.donate-go { display: grid; gap: 6px; justify-items: start; }
.donate-btn { font-size: 1.15rem; padding: 12px 22px; }
.donate-qr { margin: 0; display: grid; gap: 4px; justify-items: start; } .donate-qr img { background: #fff; padding: 8px; border-radius: 6px; }

/* ---------- Data quality (Admin) and car-page nudges ---------- */
.dates-list, .dupes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dates-list li, .dupes-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface); }
.dates-list li.sus { border-left: 4px solid #e8b400; }
.car-gaps { border-left: 4px solid var(--accent); padding: 8px 12px; margin-bottom: 10px; background: var(--red-soft, rgba(212, 35, 29, .08)); }
.car-gaps ul { margin: 4px 0 0; padding-left: 1.2em; }

/* ---------- Live event times ---------- */
.live-note { margin: 0 0 8px; color: #ff3b2f; }
.evr-run { margin: 12px 0 4px; font: 800 italic 1.05rem var(--font-display); text-transform: uppercase; } .evr-run small { font: 500 .8rem var(--font-body); color: var(--muted); text-transform: none; }
.ev-results tr.just-in td { animation: just-in 2s ease 2; background: rgba(93, 255, 58, .12); }
@keyframes just-in { 50% { background: rgba(93, 255, 58, .35); } }
@media (prefers-reduced-motion: reduce) { .ev-results tr.just-in td { animation: none; } }
.ev-res-form select { max-width: 100%; }
/* Shop: who has paid */
.paid-btn { opacity: .75; }
.paid-btn.on { opacity: 1; border-color: var(--good, #2e9d5b); color: var(--good, #2e9d5b); }
.money-line { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; }
/* Admin: member activity */
.activity-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.activity-groups details { border: 1px solid var(--line); padding: 8px 12px; background: var(--bg); }
.activity-groups summary { cursor: pointer; }
.activity-groups ul { margin: 8px 0 0; padding-left: 18px; }
.activity-groups small { color: var(--muted); }
/* Top bar: the less-used pages under More ▾ */
.nav-more { position: relative; }
.nav-more summary { list-style: none; cursor: pointer; font: 600 .95rem/1 var(--font-body); color: var(--muted); padding: 8px 10px; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary:hover, .nav-more[open] summary { color: var(--ink); }
.nav-more summary.on { color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }
.nav-more-list { position: absolute; top: 100%; left: 0; z-index: 40; min-width: 180px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 30px rgb(0 0 0 / .25); padding: 4px 0; }
.nav-more-list a { padding: 10px 14px !important; white-space: nowrap; }
.nav-more-list a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent) !important; }
@media (max-width: 560px) { .nav-more-list { position: fixed; top: auto; left: 16px; right: 16px; } }
/* Rankings: highlights strip */
.highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 8px 0 14px; }
.highlights > * { margin: 0 !important; min-width: 0; }
@media (max-width: 560px) {
  .highlights.many { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .highlights.many::-webkit-scrollbar { display: none; }
  .highlights.many > * { flex: 0 0 86%; scroll-snap-align: start; }
  .highlights .wr-banner { padding: 10px 12px; } .highlights .wr-banner b { font-size: 1.15rem; }
}
/* Phone rankings: one line for the time and its buttons, so each row stays short */
@media (max-width: 700px) {
  .table-box > table:not(.compact) td.time { padding-left: 4px; padding-right: 6px; }
  .table-box > table:not(.compact) td.rank, .table-box > table:not(.compact) th:first-child { width: 34px; padding-left: 6px; padding-right: 2px; }
  .table-box > table:not(.compact) td.time .rmark { min-width: 26px; padding: 0 2px; }
  .table-box > table:not(.compact) td.driver strong { overflow-wrap: anywhere; }
}
/* Phone podium: the top three side by side, P1 in the middle, so the full list starts a screen sooner */
@media (max-width: 560px) {
  .podium { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .step { padding: 10px 8px 8px; }
  .step.p1 { order: 2; padding-top: 16px; } .step.p2 { order: 1; } .step.p3 { order: 3; }
  .step .pos { font-size: 1.4rem; }
  .step .name { font-size: .95rem; }
  .step .car { font-size: .75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .step .time { font-size: .95rem; margin-top: 4px; }
  .step .gap { font-size: .7rem; }
}
/* Loading placeholders */
.skel { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); background: var(--surface); }
.skel i { display: block; height: 18px; background: linear-gradient(90deg, var(--line) 0%, color-mix(in srgb, var(--line) 40%, var(--surface)) 50%, var(--line) 100%); background-size: 200% 100%; animation: skel 1.2s ease-in-out infinite; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skel i { animation: none; } }
/* Keyboard focus shows on everything you can reach with Tab */
select:focus-visible, textarea:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible, .tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Thumb-sized targets on touch screens */
@media (pointer: coarse) {
  .btn, .btn.small, select, .tab, .more-item, .linkish, .nav-more summary { min-height: 44px; }
  .linkish { display: inline-flex; align-items: center; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
}
.more-h { grid-column: 1 / -1; margin: 6px 4px 0; font: 700 .7rem var(--font-data); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.more-h:first-child { margin-top: 0; }
/* Phone header on one line: What's new already has a badge on the More tab */
@media (max-width: 700px) {
  .head-acts .new-btn { display: none; }
  .site { flex-wrap: nowrap; }
  .site .brand { min-width: 0; white-space: nowrap; }
}
/* Notices at the top: the page's own spacing is enough, and the buttons sit beside the text */
.wrap > .announce, .wrap > .install-note { margin: 0; }
@media (max-width: 560px) {
  .announce { padding: 8px 10px; flex-wrap: nowrap; }
  .announce span:first-child { flex: 1 1 auto; min-width: 0; }
  .announce .notice { display: none; }
}
/* 💬 Chats */
.chat-btn { text-decoration: none; }
.chat-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); background: var(--surface); }
.chat-list li + li { border-top: 1px solid var(--line); }
.chat-list a { display: flex; gap: 12px; align-items: center; padding: 12px 14px; color: var(--ink); text-decoration: none; min-height: 64px; }
.chat-list a:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.chat-list a.unread b { color: var(--accent); }
.chat-list a.unread small { color: var(--ink); font-weight: 600; }
.chat-list img, .chat-av, .chat-person img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; }
.chat-av { display: grid; place-items: center; background: var(--line); font: 800 1.1rem var(--font-display); color: var(--ink); }
.chat-av.group { background: var(--accent); color: #fff; }
.chat-sum { flex: 1; min-width: 0; display: grid; gap: 2px; }
.chat-sum small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-when { display: grid; justify-items: end; gap: 4px; color: var(--muted); font-size: .78rem; white-space: nowrap; }
.chat-when .tab-badge { position: static; }
.chat-new input[type="search"] { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); margin-bottom: 8px; }
.chat-people { list-style: none; margin: 0 0 10px; padding: 0; max-height: 320px; overflow: auto; border: 1px solid var(--line); }
.chat-person { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-height: 52px; }
.chat-person span:not(.chat-av) { flex: 1; } .chat-person small { color: var(--muted); }
.chat-person.on { background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.chat-person img, .chat-person .chat-av { width: 34px; height: 34px; font-size: .9rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font: 600 .85rem var(--font-body); padding: 6px 10px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--ink); cursor: pointer; }
.chat-h { overflow-wrap: anywhere; }
.chat-tools { margin-bottom: 8px; }
.chat-msgs { display: flex; flex-direction: column; gap: 2px; height: min(60vh, 560px); overflow-y: auto; padding: 12px; border: 1px solid var(--line); background: var(--bg); overscroll-behavior: contain; }
.chat-day { align-self: center; margin: 10px 0 4px; font: 600 .72rem var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.chat-msg { display: grid; justify-items: start; max-width: 82%; margin-top: 8px; }
.chat-msg.same { margin-top: 1px; }
.chat-msg.mine { align-self: flex-end; justify-items: end; }
.chat-who { color: var(--muted); font-weight: 600; margin: 0 4px 2px; }
.chat-bubble { padding: 8px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); overflow-wrap: anywhere; line-height: 1.35; }
.chat-msg.mine .chat-bubble { background: var(--accent); border-color: var(--accent); color: #fff; }
.chat-bubble.gone { font-style: italic; opacity: .6; }
.chat-meta { color: var(--muted); font-size: .72rem; margin: 2px 6px 0; display: flex; gap: 6px; align-items: center; }
.chat-meta .linkish { font-size: .72rem; min-height: 0; }
.chat-msg:not(:hover):not(:focus-within) .chat-meta .linkish { opacity: .45; }
.chat-empty { margin: auto; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; position: sticky; bottom: 0; background: var(--bg); padding: 6px 0; }
.chat-form textarea { flex: 1; font: inherit; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); resize: none; max-height: 160px; min-height: 44px; }
@media (max-width: 700px) {
  .chat-btn .bell-text { display: none; } .chat-btn { min-width: 34px; justify-content: center; }
  .chat-msgs { height: calc(100dvh - 330px); min-height: 260px; }
  .chat-form { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 700px) { .head-acts > a.btn[href="/account"] { display: none; } .head-acts { flex-wrap: nowrap; gap: 6px; } }
/* Chats: photos, typing */
.chat-photo { display: block; margin-top: 2px; }
.chat-photo img { display: block; max-width: min(260px, 70vw); max-height: 320px; border-radius: 12px; border: 1px solid var(--line); object-fit: cover; }
.chat-typing { align-self: flex-start; margin: 8px 4px 0; color: var(--muted); font-size: .82rem; font-style: italic; }
.chat-photo-btn { flex: none; min-width: 44px; cursor: pointer; }
/* ⏱ Timing: the timekeeper's big button, and the driver's live clock */
.tm-head { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tm-head select { font: inherit; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); min-height: 44px; margin-top: 4px; }
.tm-queued { color: var(--accent); font-weight: 600; }
.tm-sub { margin: 14px 0 6px; font: 700 .72rem var(--font-data); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.tm-pick { width: 100%; display: grid; gap: 2px; text-align: left; padding: 12px 14px; min-height: 60px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.tm-pick:hover, .tm-pick:focus-visible { border-color: var(--accent); }
.tm-pick small { color: var(--muted); }
#tm-q { width: 100%; font: inherit; padding: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.tm-who { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); background: var(--surface); margin-bottom: 10px; font-size: 1.1rem; }
.tm-zone { width: 100%; min-height: min(58vh, 520px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center;
  border: 3px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
button.tm-zone { cursor: pointer; }
.tm-zone .tm-big { font: 800 clamp(3.2rem, 17vw, 7rem)/1 var(--font-data); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tm-zone.ready { border-color: #2fbf4a; background: color-mix(in srgb, #2fbf4a 12%, var(--surface)); }
.tm-zone.ready .tm-big { color: #2fbf4a; }
.tm-zone.running { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.tm-zone.done .tm-big { color: var(--accent); }
.tm-zone.watch { min-height: min(50vh, 440px); }
.tm-row { justify-content: center; margin-top: 12px; }
.tm-row .btn { min-height: 48px; }
.tm-banner { display: block; text-align: center; padding: 12px 14px; background: var(--surface); border: 2px solid var(--line); color: var(--ink); text-decoration: none; }
.tm-banner.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); animation: tm-pulse 1.4s ease-in-out infinite; }
@keyframes tm-pulse { 50% { border-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .tm-banner.on { animation: none; } }
/* What's new: the owner's edit buttons */
.upd-acts { margin-left: auto; display: inline-flex; gap: 10px; }
.update.upd-hidden { opacity: .5; }
.upd-form textarea { width: 100%; font: inherit; }
/* The Timer sits at the end of the direction buttons */
.board-row .tm-open-btn { margin-left: auto; }
/* 🔔 Notification choices */
.notify-choices { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.notify-choices label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.notify-choices label span { display: grid; gap: 1px; }
.notify-choices small { color: var(--muted); }
.bell-choose { border-bottom: 1px solid var(--line); padding: 8px 12px; }
.bell-choose summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
/* 🔍 Search */
.site-q { width: 100%; font: inherit; font-size: 1.1rem; padding: 14px 16px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); margin-bottom: 14px; }
.site-q:focus { border-color: var(--accent); outline: none; }
.sr-h { margin: 18px 0 6px; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sr-h small { font-weight: 400; }
.sr-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); background: var(--surface); }
.sr-list li + li { border-top: 1px solid var(--line); }
.sr-list a { display: grid; gap: 2px; padding: 10px 14px; min-height: 48px; color: var(--ink); text-decoration: none; }
.sr-list a:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.sr-list small { color: var(--muted); }
@media (max-width: 700px) { .search-btn { min-width: 34px; justify-content: center; } }
/* Phone top bar: search, chats and notifications only (light / dark is in Settings → Site look) */
@media (max-width: 700px) { .head-acts .theme-btn { display: none; } }

/* ---------- More site looks ---------- */
/* Carbon: matte black, carbon grey and race red */
:root[data-theme="carbon"] {
  --bg: #0b0b0c; --surface: #18181b; --ink: #f2f2f3; --muted: #9a9aa3; --line: #2a2a30;
  --accent: #e10600; --accent-ink: #ffffff; --danger: #ff5a4f;
  --gold: #e6be3c; --silver: #c3c7cf; --bronze: #c9814f;
  color-scheme: dark;
}
:root[data-theme="carbon"] body { background: repeating-linear-gradient(45deg, #0b0b0c 0 6px, #0f0f11 6px 12px) fixed; }
:root[data-theme="carbon"] .tcard, :root[data-theme="carbon"] .mcard, :root[data-theme="carbon"] .car-card { border-top-color: var(--accent); }
/* Sunset Touge: dusk on the pass */
:root[data-theme="sunset"] {
  --bg: #1a0f24; --surface: #26163a; --ink: #fff2e8; --muted: #c7a9c9; --line: #3d2557;
  --accent: #ff8a3d; --accent-ink: #1f0b00; --danger: #ff6b7d;
  --gold: #ffcf5c; --silver: #d6c6e8; --bronze: #f09a6a;
  color-scheme: dark;
}
:root[data-theme="sunset"] body { background: linear-gradient(180deg, #3a1638 0%, #1a0f24 420px) fixed; }
:root[data-theme="sunset"] .top h1 span { text-shadow: 0 0 14px rgba(255, 138, 61, .5); }
/* Limestone: Malta's golden stone and the sea */
:root[data-theme="limestone"] {
  --bg: #f3ead7; --surface: #fffaf0; --ink: #2b2215; --muted: #7a6a4f; --line: #e2d3b3;
  --accent: #0a6aa8; --accent-ink: #ffffff; --danger: #b3261e;
  --gold: #b8860b; --silver: #8a8f98; --bronze: #a0522d;
  color-scheme: light;
}
:root[data-theme="limestone"] .top h1 span { color: #c8962e; }
:root[data-theme="limestone"] .tcard, :root[data-theme="limestone"] .mcard, :root[data-theme="limestone"] .car-card { border-top-color: #c8962e; }
/* Racing Green: deep green, cream and brass */
:root[data-theme="racing"] {
  --bg: #0d2118; --surface: #143024; --ink: #f3ecd8; --muted: #a9b9a6; --line: #24473a;
  --accent: #d6b25e; --accent-ink: #13200f; --danger: #ff7a6b;
  --gold: #e8c15a; --silver: #c7cfc4; --bronze: #c98a52;
  color-scheme: dark;
}
:root[data-theme="racing"] .eyebrow { color: #d6b25e; }
/* Cherry: soft pink and plum */
:root[data-theme="cherry"] {
  --bg: #fbf0f3; --surface: #ffffff; --ink: #2e1422; --muted: #8a6377; --line: #f0d6df;
  --accent: #b0306a; --accent-ink: #ffffff; --danger: #c62828;
  --gold: #b88a00; --silver: #8d8a99; --bronze: #a0522d;
  color-scheme: light;
}
:root[data-theme="cherry"] .top h1 span { color: #e0548f; }
/* High contrast: as easy to read as possible */
:root[data-theme="contrast"] {
  --bg: #000000; --surface: #000000; --ink: #ffffff; --muted: #e6e6e6; --line: #ffffff;
  --accent: #ffd400; --accent-ink: #000000; --danger: #ff6b6b;
  --gold: #ffd400; --silver: #ffffff; --bronze: #ffb26b;
  color-scheme: dark;
}
:root[data-theme="contrast"] a { color: #ffd400; }
:root[data-theme="contrast"] .btn { border-width: 2px; }
:root[data-theme="contrast"] :focus-visible { outline: 3px solid #ffd400 !important; outline-offset: 2px; }
/* Me: profile, account and settings as tabs */
.me-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.me-tabs::-webkit-scrollbar { display: none; }
.me-tabs .btn { white-space: nowrap; }
.me-tabs .btn.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* Getting set up */
.setup-card h3 small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.setup-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.setup-list li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.setup-list li > span:nth-child(2) { flex: 1; display: grid; gap: 1px; min-width: 0; }
.setup-list small { color: var(--muted); }
.setup-tick { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-weight: 800; color: var(--accent-ink); }
.setup-list li.done .setup-tick { background: var(--accent); border-color: var(--accent); }
.setup-list li.done b { text-decoration: line-through; color: var(--muted); }
/* Empty spots: what's missing, and one button for what to do */
.empty-next { display: grid; justify-items: center; gap: 10px; padding: 24px 16px; text-align: center; border: 1px dashed var(--line); background: var(--surface); }
.empty-next p { margin: 0; color: var(--muted); }
/* ▾ All tracks: the list instead of scrolling sideways */
.track-tab.all-tracks { border-style: dashed; }
.tracks-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.tracks-list button { width: 100%; display: grid; gap: 2px; text-align: left; padding: 12px 14px; min-height: 56px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.tracks-list button.on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.tracks-list small { color: var(--muted); }
/* ⬇ Jump to the times: on phones, where the map and radios come first */
.track-head .jump-times { display: none; margin-top: 8px; }
@media (max-width: 700px) { .track-head .jump-times { display: inline-flex; } }
.board-row { scroll-margin-top: 90px; }
/* New event: the optional parts folded away */
.ev-more { border: 1px solid var(--line); padding: 10px 12px; background: var(--bg); }
.ev-more > summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.ev-more[open] > summary { margin-bottom: 10px; }
.ev-more > .fields, .ev-more > .field { margin-top: 10px; }