/* Kjørerapport – visuell stil 1.0 (v0.9.14). Lastes etter app.css og overstyrer farger, typografi, former og de
   vanligste komponentene, likt i begge appene.
   Retning: vei og skilt, men rolig. Signalgult for det man skal trykke på, skiltblått for lenker og informasjon,
   grønt og rødt bare for bra og dårlig. Hvite kort uten streker i lys modus, egne flater i mørk modus.
   Brukervennlighet: kontrast minst 4,5:1 på all tekst (også grå), trykkflater minst 48 px, tydelig fokusring,
   og liten tekst aldri under 15 px. */

/* ---------- Farger ----------
   Én farge betyr én ting (designgjennomgang etter Apples retningslinjer, color.md › Best practices):
   blått = lenker og informasjon, fiolett = akselerasjon, oransje = svinger, rødt = bremsing og feil,
   grønt = bra. Nøytrale dataserier (uker, poengutvikling, veityper) har egne farger (--chart, --cat-2, --cat-3). */
:root {
  --bg: #f3f4f1; --surface: #ffffff; --surface-2: #eff1ee; --ink: #14181b; --muted: #545e66; --line: #e0e4df;
  --primary: #f5c518; --on-primary: #14181b; --link: #1e5aa8; --focus: #1e5aa8;
  --brake: #c0392b; --accel: #6941c6; --turn: #a15c0b; --good: #23784a; --sign: #c8102e;
  --chart: #0e7c86; --cat-2: #5f6b76; --cat-3: #b07d12; --on-color: #ffffff;
  --asphalt: #262c31; --road-edge: #1b2024; --lane: #f5c518;
  --radius: 20px; --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 32, .04), 0 6px 20px rgba(16, 24, 32, .06);
  --shadow-lg: 0 14px 34px rgba(16, 24, 32, .16);
  --card-border: transparent;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1214; --surface: #181c1f; --surface-2: #22272b; --ink: #eceeed; --muted: #a5aeb5; --line: #2b3136;
    --primary: #f5c518; --on-primary: #14181b; --link: #84b6f4; --focus: #84b6f4;
    --brake: #f07a66; --accel: #b69cf7; --turn: #f0a257; --good: #5cc08a; --sign: #e0384f;
    --chart: #4cc3c9; --cat-2: #9aa6b0; --cat-3: #e0b04a; --on-color: #101315;
    --asphalt: #3a4248; --road-edge: #4c555c; --lane: #f5c518;
    --shadow: none; --shadow-lg: 0 14px 34px rgba(0, 0, 0, .5); --card-border: var(--line);
  }
}
:root[data-theme="dark"] {
  --bg: #0f1214; --surface: #181c1f; --surface-2: #22272b; --ink: #eceeed; --muted: #a5aeb5; --line: #2b3136;
  --primary: #f5c518; --on-primary: #14181b; --link: #84b6f4; --focus: #84b6f4;
  --brake: #f07a66; --accel: #b69cf7; --turn: #f0a257; --good: #5cc08a; --sign: #e0384f;
  --chart: #4cc3c9; --cat-2: #9aa6b0; --cat-3: #e0b04a; --on-color: #101315;
  --asphalt: #3a4248; --road-edge: #4c555c; --lane: #f5c518;
  --shadow: none; --shadow-lg: 0 14px 34px rgba(0, 0, 0, .5); --card-border: var(--line);
}

/* ---------- Typografi ----------
   Teksten følger tekststørrelsen i iPhonens innstillinger (accessibility.md › Vision: «Support larger text
   sizes»). -apple-system-body gir 17 px som standard og vokser med valget; alle størrelser i rem følger med.
   Andre nettlesere får 17 px. */
html { font-size: 106.25%; }
@supports (font: -apple-system-body) { html { font: -apple-system-body; } }
body { font-size: 1rem; line-height: 1.5; letter-spacing: .005em; -webkit-font-smoothing: antialiased; }
h1 { font-size: 1.65rem; letter-spacing: -.01em; }
h2, .card-title { font-size: 1.08rem; font-weight: 800; letter-spacing: -.005em; }
.small, .muted.small { font-size: .9rem; }          /* 15,3 px ved standard tekststørrelse */
.stat-chips dt, .tile-label, .tag { font-size: .8rem; }   /* minst 13,6 px */
.eyebrow { font-size: .8rem; letter-spacing: .08em; }
.muted { color: var(--muted); }
a, .link { color: var(--link); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

/* ---------- Flater ---------- */
.card, .tile, .banner { background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow); }
.card { border-radius: var(--radius); padding: 18px; margin-bottom: 14px; }
.tile { border-radius: var(--radius-sm); }
.card .tile, .stat-chips div, .last-tip { background: var(--surface-2); box-shadow: none; border: 0; }
.notice { border-radius: 12px; border-left-width: 4px; }

/* Korttitler: ikonet i en farget brikke, så kortene er lette å skille fra hverandre */
.card-title { display: flex; align-items: center; gap: 10px; }
.card-title .ico { width: 32px; height: 32px; padding: 6px; border-radius: 10px; color: var(--link); background: color-mix(in srgb, var(--link) 13%, transparent); }
.group-title { color: var(--muted); font-size: .8rem; letter-spacing: .08em; margin: 26px 6px 10px; }
.group-title .ico { color: var(--muted); }
.section-title { font-size: 1.12rem; margin: 22px 4px 10px; }

/* ---------- Knapper ---------- */
.btn { border-radius: 16px; min-height: 54px; font-weight: 800; border-width: 0; }
.btn.primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent); }
.btn.secondary { background: var(--surface-2); color: var(--ink); border: 1px solid var(--card-border); }
.btn.danger { background: transparent; color: var(--brake); border: 2px solid color-mix(in srgb, var(--brake) 55%, transparent); }
.btn.small-btn { min-height: 48px; border-radius: 14px; }
.link { min-height: 48px; display: inline-flex; align-items: center; }
.icon-btn { border: 0; background: transparent; }
.icon-btn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }

/* Valg med flere knapper: rolig bakgrunn, valgt knapp løftet fram */
.segment { border: 0; background: var(--surface-2); padding: 4px; border-radius: 16px; gap: 4px; }
.segment span { min-height: 48px; border-radius: 12px; color: var(--muted); transition: background .15s, color .15s; }
.segment input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 24, 32, .14); }
:root[data-theme="dark"] .segment input:checked + span { background: #343b41; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .segment input:checked + span { background: #343b41; } }
.chip { border: 0; background: var(--surface-2); min-height: 44px; }
.chip.on { background: var(--ink); color: var(--bg); }
.quicknav { background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.quicknav a { min-height: 44px; border: 0; background: var(--surface-2); }
.quicknav a.on { background: var(--ink); color: var(--bg); }
input.switch { background: color-mix(in srgb, var(--muted) 35%, var(--surface-2)); }
input.switch:checked { background: var(--good); }

/* Skjemafelt */
.field input, .field select, .add-row input, .add-student input, select, textarea, input[type="date"], input[inputmode] {
  font: inherit; color: var(--ink); background: var(--surface-2); border: 1px solid var(--card-border); border-radius: 12px; min-height: 48px; padding: 10px 12px;
}

/* ---------- Appens topp ---------- */
.appbar { background: color-mix(in srgb, var(--bg) 85%, transparent); border-bottom-color: transparent; }
.appbar .brand { font-size: 1.25rem; letter-spacing: -.01em; }

/* ---------- Forsiden ---------- */
/* Rekkefølge etter det man oftest vil: starte, se siste tur, vise trafikklæreren, så oversikt og resten */
#home:not([hidden]) { display: flex; flex-direction: column; }
#home > .appbar { order: 0; } #home > #update-banner { order: 1; } #home > .start-card { order: 2; }
#home > #backup-banner { order: 3; } #home > #install-hint { order: 4; } #home > #guide-card { order: 5; }
#home > #driver-chips { order: 6; } #home > #last-drive { order: 7; } #home > #more-cards { order: 8; } #home > #ready-card { order: 8; }
#home > #summary { order: 9; display: none !important; }   /* samme tall står i kjøreloggen og utviklingen */ #home > #log-card { order: 10; } #home > #goals { order: 11; } #home > #trend { order: 12; }
#home > .cam-card { order: 13; } #home > #drive-section { order: 14; } #home > .report-foot { order: 15; }
.start-card { background: radial-gradient(120% 90% at 0% 0%, #343c42 0%, #20262a 55%, #171b1e 100%); border-radius: 24px; padding: 24px 20px 16px; }
.start-hello { font-size: 1.75rem; letter-spacing: -.01em; }
.start-btn { background: var(--primary); color: var(--on-primary); border-radius: 18px; min-height: 64px; box-shadow: 0 8px 22px rgba(245, 197, 24, .35); }
.start-demo { color: #f2f4f3; display: flex; justify-content: center; margin: 0 auto; }
.start-suggest { background: rgba(255, 255, 255, .08); border-radius: 12px; padding: 8px 12px; font-size: .95rem; }
.mini-grid { gap: 12px; }
.mini-card, .t-cta, .log-card-btn, .last-card, .cam-card { transition: transform .12s var(--ease); }
.mini-card:active, .t-cta:active, .log-card-btn:active, .cam-card:active { transform: scale(.985); }
.t-cta { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, var(--surface)) 0%, var(--surface) 70%); }
.t-cta .card-title .ico { color: #6b5300; background: color-mix(in srgb, var(--primary) 45%, transparent); }
:root[data-theme="dark"] .t-cta .card-title .ico { color: var(--primary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .t-cta .card-title .ico { color: var(--primary); } }
.drives.card, .drive-section .drives { padding: 4px 14px; }
.drives li + li { border-top-color: var(--line); }

/* ---------- Rapporten ---------- */
.hero { padding: 20px; }
.hero .rating { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.stat-chips div { border-radius: 12px; }
.summary-list { gap: 12px; }
.practice-list li::before { background: var(--primary); color: var(--on-primary); }
.more-details > summary.btn { background: var(--surface); border: 1px dashed var(--line); box-shadow: none; }

/* ---------- Under kjøring ---------- */
.stop { box-shadow: 0 0 0 10px var(--surface), 0 0 0 12px var(--line), 0 18px 40px rgba(200, 16, 46, .25); }

/* Mindre bevegelse for de som har bedt om det */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Designgjennomgang (v0.9.15) ---------- */
/* Fargebetydning: blått bare for lenker og informasjon, egne farger for nøytrale dataserier */
.last-tip .ico, .last-cta { color: var(--link); }
.cam-card-ico { background: color-mix(in srgb, var(--link) 14%, transparent); color: var(--link); }
.wk-bar, .t-bar span { background: var(--chart); }
.segment input:focus-visible + span, input.switch:focus-visible, .file-btn:focus-within { outline-color: var(--focus); }

/* Tekst og ikoner på fargede flater: hvite i lys modus, mørke i mørk modus (der er fargene lyse; hvitt ga 2,2:1) */
.sum-good .ico, .sum-work .ico, .sum-brake .ico, .sum-accel .ico, .sum-turn .ico, .sum-limits .ico,
.event .num, .lm-ev, .goal-ok .goal-icon, .f-ok .f-ico, .f-no .f-ico, .sit-high, .spot-n, .btn.danger-fill { color: var(--on-color); }
[data-state="ok"] .check-icon::after, .flow-step[data-state="done"] .flow-num::after { border-color: var(--on-color); }

/* Trykkflater på minst 44 px (accessibility.md › Mobility: 44 × 44 pt) */
.leaflet-touch .leaflet-bar a, .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
.seg-mini button { min-height: 44px; min-width: 52px; }
.report-foot a, #settings p.small a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }

/* «Øk kontrast» og «Reduser gjennomsiktighet» i iPhonens innstillinger */
@media (prefers-contrast: more) {
  :root { --muted: #3a4249; --line: #a9b1ab; --card-border: var(--line); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --muted: #d0d6da; --line: #59626a; }
}
@media (prefers-reduced-transparency: reduce) {
  .appbar, .quicknav { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Fanelinje (v0.9.16) ---------- */
/* De fem hoveddelene (0.12.0: Guide er den femte) alltid nederst, der tommelen når (tab-bars.md › Best practices) */
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 720px; z-index: 70;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  padding: 0 max(4px, env(safe-area-inset-right)) 0 max(4px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border-top: 1px solid var(--line); }
/* Trykkflaten (0.12.3) er hele høyden av linjen, også ned mot kanten, men ikke bredere enn sin egen femdel */
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-height: calc(54px + env(safe-area-inset-bottom)); border-radius: 0;
  padding: 8px 0 max(6px, env(safe-area-inset-bottom)); touch-action: manipulation; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
  color: var(--muted); text-decoration: none; font-size: .74rem; font-weight: 700; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.tabbar a .ico { width: 26px; height: 26px; }
.tabbar a.on { color: var(--link); }
.tabbar a.on .ico { stroke-width: 2.4; }
.tabbar a:active, .tabbar a.press { background: none; }
.tabbar a.press > span { opacity: .55; transform: scale(.94); transition: transform .08s, opacity .08s; }
body.has-tabbar #app { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
body.has-tabbar .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-transparency: reduce) { .tabbar { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media print { .tabbar { display: none !important; } body.has-tabbar #app { padding-bottom: 0; } }
/* Fanenes egne skjermer har ingen tilbakeknapp (tittelen står likevel midt på) */
#log .btn-back, #plan .btn-back, #teacher .btn-back { visibility: hidden; }
/* Forsiden: turlisten, kjøreloggen og snarveiene ligger nå i fanene */
#home > #log-card, #home > #more-cards, #home > #drive-section { display: none !important; }
.plan-spots { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; text-align: left; }

/* Nivåskala (0.12.0): veityper, lysforhold og føre bruker de samme fargene i samme rekkefølge, fra lyst til mørkt.
   By/dagslys/tørt = 1, landevei/skumring/vått = 2, motorvei/mørke/snø = 3, is = 4. */
:root { --lv1: #f2be22; --lv2: #e8892b; --lv3: #34404b; --lv4: #c4262e; }
:root[data-theme="dark"] { --lv3: #9aabba; --lv4: #ff5a5f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lv3: #9aabba; --lv4: #ff5a5f; } }
.mix-by, .light-day, .surf-dry { background: var(--lv1); }
.mix-land, .light-twilight, .surf-wet { background: var(--lv2); }
.mix-motor, .light-dark, .surf-snow { background: var(--lv3); }
.surf-ice { background: var(--lv4); }
#home > #homework-home { order: 6; } #home > #game-card { order: 8; }