/* Co-driver notebook world. Semantic tokens only; components never use raw colours,
   so a later styleguide can replace this file without touching behaviour. */
/* atkinson-hyperlegible-latin-ext-400-normal */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2') format('woff2'), url('/fonts/atkinson-hyperlegible-latin-ext-400-normal.woff') format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* atkinson-hyperlegible-latin-400-normal */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2'), url('/fonts/atkinson-hyperlegible-latin-400-normal.woff') format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* atkinson-hyperlegible-latin-ext-700-normal */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2') format('woff2'), url('/fonts/atkinson-hyperlegible-latin-ext-700-normal.woff') format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* atkinson-hyperlegible-latin-700-normal */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2'), url('/fonts/atkinson-hyperlegible-latin-700-normal.woff') format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* kalam-devanagari-400-normal */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/kalam-devanagari-400-normal.woff2') format('woff2'), url('/fonts/kalam-devanagari-400-normal.woff') format('woff');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}

/* kalam-latin-ext-400-normal */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/kalam-latin-ext-400-normal.woff2') format('woff2'), url('/fonts/kalam-latin-ext-400-normal.woff') format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* kalam-latin-400-normal */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/kalam-latin-400-normal.woff2') format('woff2'), url('/fonts/kalam-latin-400-normal.woff') format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* kalam-devanagari-700-normal */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/fonts/kalam-devanagari-700-normal.woff2') format('woff2'), url('/fonts/kalam-devanagari-700-normal.woff') format('woff');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}

/* kalam-latin-ext-700-normal */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/fonts/kalam-latin-ext-700-normal.woff2') format('woff2'), url('/fonts/kalam-latin-ext-700-normal.woff') format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* kalam-latin-700-normal */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/fonts/kalam-latin-700-normal.woff2') format('woff2'), url('/fonts/kalam-latin-700-normal.woff') format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --paper: #f4f1e8;
  --paper-raised: #fbf9f3;
  --grid: #e0dacb;
  --ink: #2b2e33;
  --ink-muted: #5f6166;
  --rule: #2b2e33;
  --rule-soft: #cfc8b6;
  --highlight: #f6e04a;
  --caution: #c8306f;
  --focus: #1f5fbf;
  --font-ui: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-hand: 'Kalam', 'Atkinson Hyperlegible', cursive;
  --step-gap: 2.5rem;
  /* Runs in the analysis view, in fixed order (validated: adjacent CVD and
     normal-vision floors pass; light slots 2-5 need the visible labels the view shows). */
  --run-1: #2a78d6;
  --run-2: #eb6834;
  --run-3: #1baf7a;
  --run-4: #eda100;
  --run-5: #e87ba4;
  --run-6: #008300;
  --channel-speed: var(--ink);
  --channel-throttle: #16703a;
  --channel-brake: #bc3434;
  --channel-steering: #537b00;
  --channel-gear: #7951ae;
  --channel-rpm: #956000;
  --channel-longitudinal: #a04278;
  --channel-lateral: #007876;
  --telemetry-compare: #145bcc;
  --setup-brakes: #b6394a;
  --setup-differential: #a36a00;
  --setup-springs: #28794a;
  --setup-dampers: #286eab;
  --setup-antiroll: #8052ae;
  --setup-geometry: #007b7f;
  --setup-tyres: #976229;
  --setup-gearbox: #75567a;
  --setup-compare: #b84d19;
  color-scheme: light;
}

/* Night page: graphite on dark card, for use next to the running game. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #1e2024;
    --paper-raised: #25282d;
    --grid: #2a2d32;
    --ink: #ebe6da;
    --ink-muted: #a9a59b;
    --rule: #ebe6da;
    --rule-soft: #3b3f45;
    --highlight: #6e620e;
    --caution: #f07aa8;
    --focus: #8db7ff;
    --run-1: #3987e5;
    --run-2: #d95926;
    --run-3: #199e70;
    --run-4: #c98500;
    --run-5: #d55181;
    --run-6: #008300;
    --channel-throttle: #64ce87;
    --channel-brake: #ff7972;
    --channel-steering: #b9d963;
    --channel-gear: #c2a0ef;
    --channel-rpm: #edbf67;
    --channel-longitudinal: #ef94c3;
    --channel-lateral: #70cecc;
    --telemetry-compare: #85b8ff;
  --setup-brakes: #ff8491;
  --setup-differential: #e6b55a;
  --setup-springs: #6bc48d;
  --setup-dampers: #7eb9ef;
  --setup-antiroll: #bc9bdf;
  --setup-geometry: #6acacd;
  --setup-tyres: #d5ae77;
  --setup-gearbox: #bca0c2;
  --setup-compare: #ffad78;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --paper: #1e2024;
  --paper-raised: #25282d;
  --grid: #2a2d32;
  --ink: #ebe6da;
  --ink-muted: #a9a59b;
  --rule: #ebe6da;
  --rule-soft: #3b3f45;
  --highlight: #6e620e;
  --caution: #f07aa8;
  --focus: #8db7ff;
  --run-1: #3987e5;
  --run-2: #d95926;
  --run-3: #199e70;
  --run-4: #c98500;
  --run-5: #d55181;
  --run-6: #008300;
  --channel-throttle: #64ce87;
  --channel-brake: #ff7972;
  --channel-steering: #b9d963;
  --channel-gear: #c2a0ef;
  --channel-rpm: #edbf67;
  --channel-longitudinal: #ef94c3;
  --channel-lateral: #70cecc;
  --telemetry-compare: #85b8ff;
  --setup-brakes: #ff8491;
  --setup-differential: #e6b55a;
  --setup-springs: #6bc48d;
  --setup-dampers: #7eb9ef;
  --setup-antiroll: #bc9bdf;
  --setup-geometry: #6acacd;
  --setup-tyres: #d5ae77;
  --setup-gearbox: #bca0c2;
  --setup-compare: #ffad78;
  color-scheme: dark;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--font-ui);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--highlight);
  color: var(--ink);
}

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

a {
  color: inherit;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

button {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3 {
  text-wrap: balance;
  margin: 0;
}

/* The highlighter stroke: the one mark for "chosen" and "here". */
.marked {
  background: linear-gradient(transparent 52%, var(--highlight) 52%, var(--highlight) 92%, transparent 92%);
}

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

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

/* Shared compact pointer; full explanations live on the Help page. */

/* Composition only; app.css owns colors, type and day/night tokens. */
* { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
/* Plain paper around the app captures; their own notebook grid is in the PNG. */
body { background-image:none; }
.book { display:grid; grid-template-columns:52px minmax(0,1fr); min-height:100vh; }
.spiral { display:flex; flex-direction:column; justify-content:space-around; align-items:center; padding:32px 0; border-right:2px solid var(--rule); background:var(--paper); }
.spiral span { width:24px; height:9px; border:2px solid var(--rule); border-radius:6px; }
.sheet { min-width:0; max-width:1360px; width:100%; margin-inline:auto; }
header { display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px; padding:22px 30px; border-bottom:2px solid var(--rule); background:var(--paper); }
.brand { font-size:1.35rem; font-weight:700; white-space:nowrap; text-decoration:none; }
header nav { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.95rem; }
header nav a { text-decoration:none; color:var(--ink-muted); padding-block:5px; }
header nav a:hover { color:var(--ink); text-decoration:underline; }
header nav [aria-current] { color:var(--ink); font-weight:700; text-decoration:underline; text-decoration-thickness:2px; }
.header-actions { display:flex; gap:14px; align-items:center; margin-left:auto; }
button { background:var(--paper); border:1px solid var(--rule-soft); padding:8px 12px; cursor:pointer; }
.primary { background:var(--highlight); border:1px solid var(--rule); padding:10px 16px; font-weight:700; text-decoration:none; white-space:nowrap; }
main { padding:18px clamp(20px,4vw,56px) 0; }
.page-heading { margin-bottom:16px; }
.kicker { font-family:var(--font-hand); font-size:1.05rem; margin:0 0 3px; }
h1 { font-size:clamp(1.65rem,2.4vw,2rem); line-height:1.12; letter-spacing:-.025em; }
.lead { max-width:105ch; font-size:1rem; color:var(--ink-muted); margin:8px 0 0; }
p { max-width:76ch; }
h2 { font-size:1.5rem; margin:24px 0 10px; }
figure { display:grid; grid-template-columns:minmax(0,72%) minmax(0,1fr); align-items:start; gap:24px; margin:0 0 32px; min-width:0; width:100%; }
img { display:block; width:100%; height:auto; }
figure picture { display:block; }
figcaption { color:var(--ink-muted); font-size:.95rem; min-width:0; padding:0; }
.neighbors { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--rule-soft); padding-block:24px; margin-top:36px; }
footer { display:flex; flex-wrap:wrap; gap:14px 28px; padding:24px 30px 32px; border-top:2px solid var(--rule); font-size:.85rem; color:var(--ink-muted); background:var(--paper); }
.downloads { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; max-width:850px; margin:24px 0; }
.download { padding:18px; border:1px solid var(--rule); background:var(--paper-raised); display:flex; justify-content:space-between; gap:12px; text-decoration:none; }
.release-links { display:flex; flex-wrap:wrap; gap:24px; margin:24px 0; }
details { padding:20px 0; border-block:1px solid var(--rule-soft); }
summary { cursor:pointer; font-weight:700; }
.skip { position:absolute; left:12px; top:-80px; padding:12px; background:var(--paper); z-index:10; }
.skip:focus { top:12px; }
@media(max-width:760px) { .book { grid-template-columns:minmax(0,1fr); } .spiral { display:none; } header { padding:20px; gap:16px; } .header-actions { margin-left:0; flex-wrap:wrap; } main { padding-top:28px; } footer { padding-inline:20px; } }
@media(max-width:480px) { .downloads { grid-template-columns:minmax(0,1fr); } header nav { gap:6px 16px; } }
.shot-image { position:relative; outline:1px solid var(--rule-soft); }
.hotspot { position:absolute; background:transparent; border:1px solid transparent; padding:0; border-radius:0; }
.hotspot[aria-pressed=true] { border-color:var(--ink-muted); box-shadow:0 0 0 1px var(--paper); }
.hotspot:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.hint-list { list-style:none; padding:0; margin:0; }
.hint-list li { border-left:2px solid transparent; padding:0 0 0 12px; margin:0 0 22px; }
.hint-list li[data-active=true] { border-color:var(--ink-muted); }
.hint-list strong { display:block; color:var(--ink); margin-bottom:4px; }
.cycle-control { font-size:.8rem; padding:2px 6px; margin-top:4px; }
@media(min-width:761px) {
  /* One public capture uses the space left after the actual header and copy.
     Container units bound both dimensions; hotspots retain the image's ratio. */
  .sheet:has(figure) { height:100dvh; display:flex; flex-direction:column; }
  .sheet:has(figure) header, .sheet:has(figure) footer, .page-heading, .neighbors { flex-shrink:0; }
  .sheet:has(figure) main { flex:1; min-height:min-content; container-type:inline-size; display:flex; flex-direction:column; }
  figure { flex:1; min-height:calc(60cqw / var(--shot-ratio)); container-type:size; display:flex; gap:24px; margin:0; }
  .shot-image { flex:none; width:min(72cqw,calc(100cqh * var(--shot-ratio))); min-width:60cqw; aspect-ratio:var(--shot-ratio); }
  figcaption { flex:1; }
  .sheet:has(figure) .neighbors { margin-top:16px; padding-block:14px; }
  .sheet:has(figure) footer { padding-block:16px; }
}
@media(max-width:760px) { figure { grid-template-columns:minmax(0,1fr); gap:16px; } .hotspot,.cycle-control { display:none; } .hint-list li { border:0; padding:0; margin-bottom:14px; } }
.project-credits { max-width:950px; margin:32px 0; }
.project-credits>div { display:grid; grid-template-columns:180px minmax(0,1fr); border-top:1px solid var(--rule-soft); padding:16px 0; gap:20px; }
.project-credits dt { font-weight:700; }
.project-credits dd { margin:0; }
.project-credits p { color:var(--ink-muted); margin:4px 0 0; }
.credit-names { display:flex; flex-wrap:wrap; gap:8px 24px; list-style:none; padding:0; max-width:1000px; }
@media(max-width:480px) { .project-credits>div { grid-template-columns:minmax(0,1fr); gap:8px; } }