/* Lær, Øv, Prøve, Alle emner, Profil: one component kit (chips, chunky cards, round buttons, bars). */
.learn,.practice,.exam-start,.topics,.profile{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.screen-title{margin:2px 0 0;font:800 32px/1.05 var(--font-display);letter-spacing:-.01em}
.screen-head{display:flex;align-items:center;gap:10px}
.screen-head h1{margin:0;font:800 24px var(--font-display)}
.back-round{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--ink)}
.back-round svg,.row-go svg,.set-row svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.list-label{margin:8px 0 -4px;font:800 12px var(--font-display);letter-spacing:.1em;color:var(--muted)}
.empty-note{margin:0;color:var(--muted);font-size:15px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;background:#fff;border:2px solid var(--line);box-shadow:0 2px 0 var(--line);font:600 14px var(--font-body,inherit)}
.chip b{font:800 15px var(--font-display)}
.pill-btn{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:12px;background:#fff;border:2px solid var(--line);box-shadow:0 3px 0 var(--line);font:800 15px var(--font-display);color:var(--ink)}
.big-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;border-radius:16px;border:0;background:var(--accent,#FFD60A);
  box-shadow:0 5px 0 var(--accent-shadow,#C9A200);font:800 18px var(--font-display);color:#1F2328;cursor:pointer}
.big-btn:active{translate:0 4px;box-shadow:0 1px 0 var(--accent-shadow,#C9A200)}
.big-btn--ghost{background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}

/* ---------- Lær ---------- */
.learn-chips{display:flex;flex-wrap:wrap;gap:8px}
/* the unit banner: a brand plate (ink in the light theme, yellow in the dark one) with the unit number,
   the title, a way to all units and the lessons as lane markings that light up as they are done */
.unit-banner{--ub-bg:#1F2328;--ub-edge:#000000;--ub-fg:#FFFFFF;--ub-hi:#FFD60A;--ub-hi-ink:#1F2328;--ub-dim:rgba(255,255,255,.16);
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 14px;padding:14px 14px 14px 14px;
  border-radius:20px;background:var(--ub-bg);color:var(--ub-fg);text-decoration:none;box-shadow:0 5px 0 var(--ub-edge);transition:translate .12s,box-shadow .12s}
.unit-banner:active{translate:0 3px;box-shadow:0 2px 0 var(--ub-edge)}
.unit-num{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:var(--ub-hi);color:var(--ub-hi-ink);
  font:900 30px/1 var(--font-display);box-shadow:inset 0 -4px 0 rgba(0,0,0,.16);rotate:-4deg}
.unit-text{min-width:0}
.unit-kicker{display:block;font:800 12px var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--ub-hi)}
#main .unit-banner h1,.unit-banner h1{margin:3px 0 0;font:800 22px/1.12 var(--font-display)!important;color:var(--ub-fg);overflow-wrap:anywhere}
.unit-all{display:inline-flex;align-items:center;gap:2px;padding:7px 8px 7px 12px;border-radius:999px;background:var(--ub-dim);
  color:var(--ub-fg);font:800 13px var(--font-display);white-space:nowrap;transition:background-color .15s,color .15s}
.unit-all svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.unit-banner:hover .unit-all,.unit-banner:focus-visible .unit-all{background:var(--ub-hi);color:var(--ub-hi-ink)}
.unit-road{grid-column:1/-1;display:flex;align-items:center;gap:7px}
.unit-road i{flex:1;height:7px;border-radius:4px;background:var(--ub-dim);transition:background-color .4s}
.unit-road i.on{background:var(--ub-hi)}
.unit-count{flex:none;margin-left:5px;font:800 14px var(--font-display);color:var(--ub-fg)}
@media (max-width:480px){.unit-all-label{display:none}.unit-all{padding:8px}#main .unit-banner h1{font-size:20px!important}}
.learn-path-wrap{position:relative;padding:10px 0 4px}
.learn-guide{position:absolute;left:0;top:20%;width:28%;max-width:120px;pointer-events:none}
.learn-guide .cast-img{width:100%!important}
.learn-path{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:18px}
.pn{position:relative;display:flex;flex-direction:column;align-items:center;left:calc(var(--x) * 46px);animation:reveal .5s var(--out) backwards;animation-delay:calc(var(--i) * 60ms + 150ms)}
.pn-btn{display:grid;place-items:center;width:72px;height:68px;border-radius:50%;text-decoration:none;font:800 24px var(--font-display);color:#1F2328;
  background:#fff;border:3px solid var(--line);box-shadow:0 6px 0 var(--line)}
.pn-btn:active{translate:0 4px;box-shadow:0 2px 0 var(--line)}
.pn-btn svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.pn--done .pn-btn{background:var(--good,#58CC02);border-color:#46A302;box-shadow:0 6px 0 #46A302;color:#fff}
.pn--review .pn-btn{background:#1CB0F6;border-color:#1899D6;box-shadow:0 6px 0 #1899D6;color:#fff}
.pn--repair .pn-btn{background:#FF9600;border-color:#E08600;box-shadow:0 6px 0 #E08600;color:#fff}
.pn--next .pn-btn{width:88px;height:84px;font-size:30px;background:var(--accent,#FFD60A);border-color:var(--accent-shadow,#C9A200);box-shadow:0 7px 0 var(--accent-shadow,#C9A200),0 0 0 8px rgba(255,214,10,.35);animation:next-pulse 2.4s var(--in-out) infinite}
@keyframes next-pulse{50%{box-shadow:0 7px 0 var(--accent-shadow,#C9A200),0 0 0 14px rgba(255,214,10,.18)}}
.pn-start{position:absolute;right:calc(100% + 10px);top:22px;white-space:nowrap;padding:7px 12px;border-radius:12px;background:#fff;border:2px solid var(--line);box-shadow:0 3px 0 var(--line);
  font:800 14px var(--font-display);animation:bob 1.6s var(--in-out) infinite}
.pn-start::after{content:"";position:absolute;right:-7px;top:50%;width:10px;height:10px;margin-top:-5px;background:#fff;border:2px solid var(--line);border-left:0;border-bottom:0;rotate:45deg}
@keyframes bob{50%{translate:-4px 0}}
.pn-title{max-width:150px;margin-top:6px;text-align:center;font:700 13px/1.25 var(--font-display);color:var(--muted)}
.pn--next .pn-title{color:var(--ink);font-size:14px}
.learn-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:18px;background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--line);color:var(--ink);text-decoration:none}
.learn-card strong{display:block;font:800 17px/1.25 var(--font-display)}.learn-card small{color:var(--muted);font-size:14px}
.goal-dots{display:flex;gap:6px}.goal-dots i{width:14px;height:14px;border-radius:50%;background:var(--line)}.goal-dots i.on{background:#FF9600}
#road-slot + .road-loop{margin-top:4px}

/* ---------- Øv ---------- */
/* The Øv hero is an asphalt poster with the traffic light: big white type on grainy asphalt (the skid marks are the page's),
   the light on the right showing where you stand, and a yellow button. Its colours are fixed: it reads the same in
   both themes. */
.practice-signal{--sig-ink:#FFFFFF;--sig-muted:#C2CCD6;--sig-yellow:#FFD60A;--sig-asphalt:#1F2328;position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-height:228px;padding:24px 14px 24px 24px;border-radius:24px;text-decoration:none;color:var(--sig-ink);
  background:var(--asphalt) 0 0/220px 220px,var(--sig-asphalt);box-shadow:0 5px 0 #000}
.practice-signal-kicker{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--sig-yellow);color:var(--sig-asphalt);font:800 12px/1.2 var(--font-display);letter-spacing:.1em;text-transform:uppercase}
.practice-signal--red .practice-signal-kicker{background:#FF4B4B;color:#FFFFFF}
.practice-signal--green .practice-signal-kicker{background:#58CC02;color:var(--sig-asphalt)}
#main .practice-signal strong,.practice-signal strong{display:block;margin:12px 0 6px;font:900 clamp(26px,7vw,40px)/1.02 var(--font-display)!important;letter-spacing:-.02em;color:var(--sig-ink)!important}
.practice-signal small{display:block;color:var(--sig-muted);font-size:14px;line-height:1.45;max-width:34ch}
.practice-signal-go{display:inline-flex;align-items:center;min-height:48px;margin-top:16px;padding:0 22px;border-radius:16px;background:var(--gloss),var(--grain-ink) 0 0/200px 200px,var(--sig-yellow);color:var(--sig-asphalt);font:700 17px var(--font-display);box-shadow:0 4px 0 #C9A200;transition:translate .15s,box-shadow .15s}
.practice-signal:hover .practice-signal-go{translate:0 -2px;box-shadow:0 6px 0 #C9A200}
.practice-signal:active .practice-signal-go{translate:0 4px;box-shadow:none}
.practice-signal-light{position:relative;display:block;width:clamp(108px,30vw,170px);height:clamp(150px,40vw,230px);margin:-12px -6px -12px 0}
.practice-signal-light img{width:100%;height:100%;object-fit:contain}
@media (min-width:900px){.practice-signal{min-height:260px;padding:30px 24px 30px 32px}}
.row-list{display:flex;flex-direction:column;gap:10px}
.row-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--line);color:var(--ink);text-decoration:none}
.row-card--plain{grid-template-columns:1fr auto}
.row-card strong{display:block;font:800 16px var(--font-display)}.row-card small{color:var(--muted);font-size:14px}
.row-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--c);font-size:22px}
.row-go{color:var(--muted)}
.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.game-card{display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:18px;background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--line);color:var(--ink);text-decoration:none;min-height:110px}
.game-card:first-child{grid-column:1 / -1;background:#FFF6E5;border-color:#F5D9A6;box-shadow:0 4px 0 #F5D9A6}
.game-ico{font-size:26px;line-height:1.2}.game-card strong{font:800 16px var(--font-display)}.game-card small{color:var(--muted);font-size:13px}

/* ---------- Prøve ---------- */
.exam-talk,.practice-talk{display:flex;align-items:flex-end;gap:10px}
.exam-talk .cast-img{width:96px!important}
.talk-bubble{position:relative;flex:1;margin:0 0 16px;padding:12px 14px;border-radius:18px 18px 18px 6px;background:#fff;border:2px solid var(--line);box-shadow:0 3px 0 var(--line);font-size:16px;line-height:1.4}
.exam-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:16px 10px;border-radius:18px;background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--line);text-align:center}
.exam-facts b{display:block;font:800 26px/1.1 var(--font-display)}.exam-facts small{color:var(--muted);font-size:13px}
.exam-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.exam-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}
.exam-row strong{display:block;font:800 16px var(--font-display)}.exam-row small{color:var(--muted);font-size:14px}
.exam-badge{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;font:800 20px var(--font-display)}
.is-ok .exam-badge{background:#E8F9D5;color:#2F6F00}.is-near .exam-badge{background:#FFF0D6;color:#9A5300}.is-off .exam-badge{background:#FFE3E3;color:#B42318}
.fine-details{color:var(--muted);font-size:14px}.fine-details summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}

/* ---------- Alle emner ---------- */
.topic-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.topic{position:relative;display:flex;align-items:stretch;border-radius:18px;background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}
.topic > a:first-child{flex:1;display:flex;align-items:center;gap:12px;padding:12px 14px;color:var(--ink);text-decoration:none;min-width:0}
.topic strong{display:block;font:800 16px/1.2 var(--font-display)}.topic small{color:var(--muted);font-size:13px}
.topic-n{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#F3F5F7;font:800 20px var(--font-display)}
.topic.is-active{border-color:var(--accent-shadow,#C9A200);box-shadow:0 4px 0 var(--accent-shadow,#C9A200)}
.topic.is-active .topic-n{background:var(--accent,#FFD60A)}.topic.is-done .topic-n{background:var(--good,#58CC02);color:#fff}
.topic > a:first-child > div{flex:1;min-width:0}
.topic-bar{display:block;height:8px;margin:6px 0 4px;border-radius:8px;background:#EEF0F2;overflow:hidden}
.topic-bar i{display:block;height:100%;border-radius:8px;background:var(--good,#58CC02);transform-origin:0 50%;scale:var(--p) 1}
.topic-cards{display:grid;place-items:center;padding:0 14px;border-left:2px solid var(--line);color:var(--blue-ink,#0A66C2);font:800 14px var(--font-display);text-decoration:none;min-width:58px}
.topics .search-box{margin:0}

/* ---------- Profil ---------- */
.tile-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile,.panel{padding:14px 16px;border-radius:18px;background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}
.tile{text-align:center}.tile b{display:block;font:800 30px/1.1 var(--font-display)}.tile small{color:var(--muted);font-size:13px}
.tile-fire{color:#FF9600}
.panel h2{margin:0 0 10px;font:800 17px var(--font-display)}
.week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.week small{display:block;font:700 12px var(--font-display);color:var(--muted);margin-bottom:4px}
.week i{display:block;aspect-ratio:1;border-radius:10px;background:#EEF0F2}
.week .on i{background:#FF9600}.week .today i{box-shadow:inset 0 0 0 2px #FF9600}
.sw{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sw li{display:flex;flex-direction:column;gap:4px;font-size:14px}
.sw-bar{display:block;height:8px;border-radius:8px;background:#EEF0F2;overflow:hidden}
.sw-bar i{display:block;height:100%;border-radius:8px;transform-origin:0 50%;scale:var(--p) 1}
.sw-bar.good i{background:var(--good,#58CC02)}.sw-bar.weak i{background:#FF9600}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 16px;border-radius:16px;background:#fff;border:2px solid var(--line);box-shadow:0 3px 0 var(--line);
  font:800 16px var(--font-display);color:var(--ink);text-decoration:none;width:100%;text-align:left;cursor:pointer}
.set-row small{display:inline-flex;align-items:center;color:var(--muted);font:600 14px var(--font-body,inherit)}
.set-row input{position:absolute;opacity:0;width:1px;height:1px}
.set-row i{position:relative;flex:none;width:50px;height:30px;border-radius:999px;background:#DDE1E5;transition:background .2s}
.set-row i::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:translate .25s var(--spring)}
.set-row input:checked + i{background:var(--good,#58CC02)}.set-row input:checked + i::after{translate:20px 0}
.set-row input:focus-visible + i{outline:3px solid #1CB0F6;outline-offset:2px}
.set-row{position:relative}

/* ---------- full-screen lessons: no tab bar, no top bar (their own ← leads out) ---------- */
body.focus-mode .topbar,body.focus-mode #mobile-nav{display:none!important}
@media (max-width:700px){body.focus-mode #main{padding-top:10px!important;padding-bottom:24px!important}}

@media (min-width:900px){.learn,.practice,.exam-start,.topics,.profile{max-width:640px}}
/* the legacy h2 style is loud and uppercase: these labels win over it */
:is(.learn,.practice,.exam-start,.topics,.profile) h2.list-label{margin:8px 0 -4px;font:800 12px/1.2 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
:is(.learn,.practice,.exam-start,.topics,.profile) .panel h2{margin:0 0 10px;font:800 17px/1.2 var(--font-display);letter-spacing:0;text-transform:none;color:var(--ink)}
#main :is(.learn,.practice,.exam-start,.topics,.profile) h2.list-label{font-size:12px!important;line-height:1.2}
#main :is(.learn,.practice,.exam-start,.topics,.profile) .panel h2{font-size:17px!important;line-height:1.2}
/* contrast: white text needs a deeper green than the bright brand green; orange numbers get a darker ink */
.tile-fire{color:#B35400}
/* top bar = logo, Boosters, settings (mockup D notes). Humour and sound live in Profil now. */
#humor-toggle,#sound-toggle,.top-strap,.small-license,.sidebar-label{display:none!important}
/* "Læs" is a pill inside the row, not a segment behind a divider line */
.topic-cards{border-left:0!important;align-self:center;min-height:40px;margin-right:12px;padding:0 14px!important;border-radius:999px;background:#EEF4FF;min-width:0!important}

/* your car on the road opens Lær, wider than the column: edge to edge on phones */
.road-top .road-loop{max-width:1100px;margin:0 auto 16px}
@media (max-width:700px){
  .road-top .road-loop{width:calc(100% + 32px);margin:0 -16px 16px;border-radius:0;border-left:0;border-right:0;box-shadow:0 4px 0 var(--line);height:190px}
  .road-top .road-car{width:160px;height:160px;margin-left:-100px}
}
@media (min-width:701px){.road-top .road-loop{height:230px}.road-top .road-car{width:210px;height:210px;margin-left:-130px}}
@media (max-width:360px){.road-top .road-loop{width:calc(100% + 24px);margin-left:-12px;margin-right:-12px}}
/* the loop pins under the top bar and folds down a little while day turns to night, so you watch the sunset */
.road-top{position:sticky;top:var(--stick,0px);z-index:6}
.road-top .road-loop{--h0:190px;height:calc(var(--h0) - var(--n,0) * 64px)!important;transition:none}
.road-top .road-car{scale:calc(1 - var(--n,0) * .2);transform-origin:50% 100%}
.road-top .road-label{scale:calc(1 - var(--n,0) * .12);transform-origin:0 0}
@media (min-width:701px){.road-top .road-loop{--h0:230px}}
/* streak + goal chips sit at the very top of Lær, above your car */
#view > .learn-chips{max-width:1100px;margin:0 auto 10px}
@media (max-width:700px){#view > .learn-chips{margin:0 0 10px}}

/* ---------- menu: colour-coded tabs, chunky active card ---------- */
[data-tab="home"]{--tile:#E6F8D2;--tint:#2F7D00;--edge:#9BD86A}
[data-tab="practice"]{--tile:#DDF4FF;--tint:#0B6BA8;--edge:#84CFF5}
[data-tab="exam"]{--tile:#FFEFD3;--tint:#9A5300;--edge:#F5C27A}
[data-tab="minbil"]{--tile:#FFE4F1;--tint:#B0236E;--edge:#F3A6CB}
[data-tab="profil"]{--tile:#EEF1F4;--tint:#3E454D;--edge:#C9D0D7}
.sidebar{background:#F7F9FB!important;border-right:0!important;padding:22px 14px 18px!important}
#desktop-nav{display:flex;flex-direction:column;gap:6px}
.sidebar .nav-item{display:flex;align-items:center;gap:14px;min-height:58px;margin:0;padding:8px 12px;border-radius:18px;border:2px solid transparent;background:none;
  font:800 16px var(--font-display);color:#3E454D;text-decoration:none;transition:background-color .2s,border-color .2s,translate .16s var(--spring)}
.sidebar .nav-item .icon{flex:none;width:42px;height:42px;padding:9px;border-radius:13px;background:var(--tile);color:var(--tint);stroke:var(--tint);stroke-width:2.4;transition:background-color .2s,color .2s}
.sidebar .nav-item:hover{background:#fff;border-color:var(--line);translate:0 -1px}
.sidebar .nav-item.active{background:#fff!important;color:var(--ink);border-color:var(--edge);box-shadow:0 4px 0 var(--edge)}
.sidebar .nav-item.active .icon{background:var(--tint);color:#fff;stroke:#fff}
.sidebar .nav-item .nav-label{display:inline!important}
.sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.nav-item--profile{border-top:0}
/* phone tab bar: the chosen tab gets its colour */
#mobile-nav a.active{color:var(--tint)!important;background:none!important}
#mobile-nav a.active svg{background:var(--tile);color:var(--tint);stroke:var(--tint);border-radius:12px;padding:3px 10px;box-sizing:content-box}
.topic-cards{color:#0A4F8F!important}

/* readiness: a chip on Lær and an explained meter in Profil */
.chip--ready{color:var(--ink);text-decoration:none}
.ready-row{display:flex;align-items:center;gap:12px}
.ready-row b{font:800 30px var(--font-display);min-width:76px}
.ready-bar{flex:1;height:14px;border-radius:999px;background:#EEF0F2;overflow:hidden}
.ready-bar i{display:block;height:100%;border-radius:999px;background:var(--good,#58CC02);transform-origin:0 50%;scale:var(--p) 1;transition:scale .8s var(--out)}
.ready-panel p{margin:10px 0 4px;font-size:15px;color:#3E454D}.ready-panel small{color:var(--muted);font-size:13px}
/* the road loop scrolls with the page (no pinning, no folding); day still turns to night as it scrolls away */
.road-top{position:static!important}
.road-top .road-loop{height:var(--h0)!important}
.road-top .road-car{scale:none}
.road-top .road-label{scale:none}

/* the app's own line icons instead of emojis */
.ui-ico{flex:none;width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
.chip .ui-ico{width:18px;height:18px}
.chip--streak .ui-ico,.tile-fire .ui-ico{color:#E8590C}
.chip--date .ui-ico{color:#0B6BA8}.chip--goal .ui-ico{color:#C2255C}.chip--ready .ui-ico{color:#2F7D00}
.tile-fire{display:inline-flex;align-items:center;gap:6px;justify-content:center}.tile-fire .ui-ico{width:26px;height:26px}
.row-ico .ui-ico{width:24px;height:24px;color:#1F2328}
.game-ico{display:grid;place-items:center;width:44px;height:44px;margin-bottom:6px;border-radius:13px;background:#F3F5F7}
.game-card:first-child .game-ico{background:#FFE7C2}
.game-ico .ui-ico{width:26px;height:26px;color:#1F2328}
.plan-ico .ui-ico{width:24px;height:24px;color:#1F2328}
.result-boost .ui-ico,.jp-done-stats .ui-ico{color:#5C8A00}
.jp-done-goal .ui-ico{color:#C2255C}
.on-chip i .ui-ico{width:14px;height:14px}
/* the chat tab: its own colour, like the other tabs */
[data-tab="chat"]{--tile:#EDE7FF;--tint:#5B3CC4;--edge:#B9A6F5}

/* ---------- menu v2: duotone icons on chunky tiles ---------- */
[data-tab="home"]{--tile:#E3F7D1;--tint:#4E9E0A;--edge:#A6DB79}
[data-tab="practice"]{--tile:#DDF2FD;--tint:#1690D2;--edge:#8FCDF1}
[data-tab="exam"]{--tile:#FFEFD6;--tint:#E98300;--edge:#F5C27A}
[data-tab="minbil"]{--tile:#FFE5F0;--tint:#DE3F86;--edge:#F2A6C8}
[data-tab="chat"]{--tile:#EEE8FF;--tint:#7650E6;--edge:#BDAAF6}
[data-tab="profil"]{--tile:#EEF1F4;--tint:#56616B;--edge:#CAD2D9}
.duo{display:block;overflow:visible}
.duo .d{fill:currentColor;opacity:.2}
.duo .s{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-tile{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;color:var(--tint);
  background:linear-gradient(180deg,color-mix(in oklab,var(--tile) 55%,#fff) 0,var(--tile) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1.5px color-mix(in oklab,var(--edge) 55%,transparent),0 3px 0 var(--edge);
  transition:background .25s ease,box-shadow .25s ease,color .25s ease,scale .2s var(--spring,ease)}
.nav-tile .duo{width:26px;height:26px}

/* side menu */
.sidebar{background:#fff!important;border-right:2px solid #EEF1F4!important;padding:22px 14px 18px!important}
#desktop-nav{display:flex;flex-direction:column;gap:8px}
.sidebar .nav-item{display:flex;align-items:center;gap:14px;min-height:62px;margin:0;padding:8px 14px 8px 9px;border-radius:20px;border:2px solid transparent;background:none;box-shadow:none;
  font:800 16px var(--font-display);letter-spacing:.005em;color:#2B3138;text-decoration:none;transition:background-color .2s,border-color .2s,box-shadow .2s,translate .16s var(--spring,ease)}
.sidebar .nav-item .icon{display:none}
.sidebar .nav-item:hover{background:#F7F9FB;translate:0 -1px}
.sidebar .nav-item:hover .nav-tile{scale:1.05}
.sidebar .nav-item.active{background:linear-gradient(180deg,#fff 0,color-mix(in oklab,var(--tile) 45%,#fff) 100%)!important;border-color:var(--edge);box-shadow:0 4px 0 var(--edge);color:#1F2328}
.sidebar .nav-item.active .nav-tile{color:#fff;background:linear-gradient(180deg,color-mix(in oklab,var(--tint) 78%,#fff) 0,var(--tint) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 0 color-mix(in oklab,var(--tint) 72%,#000)}
.sidebar .nav-item.active .duo .d{opacity:.32}
.sidebar .nav-count{margin-left:auto;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#FF4B4B;color:#fff;font:800 12px/24px var(--font-display);text-align:center}
.sidebar-bottom .nav-item{min-height:56px}

/* phone tab bar */
#mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:#5B6670!important;font:700 11.5px var(--font-display)}
#mobile-nav a .icon{display:none}
#mobile-nav .nav-tile{width:46px;height:30px;border-radius:12px;background:none;box-shadow:none}
#mobile-nav .nav-tile .duo{width:24px;height:24px}
#mobile-nav a.active{color:var(--tint)!important;background:none!important}
#mobile-nav a.active .nav-tile{background:linear-gradient(180deg,color-mix(in oklab,var(--tile) 40%,#fff),var(--tile));box-shadow:inset 0 0 0 1.5px var(--edge);animation:nav-hop .5s var(--spring,ease)}
#mobile-nav a.active .nav-label{font-weight:800}
#mobile-nav a.active svg{background:none!important;padding:0!important}

/* ---------- chips v2: each with its own colour and a round duotone icon ---------- */
.learn-chips{gap:8px}
.learn-chips .chip{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 15px 0 5px;border-radius:999px;
  background:linear-gradient(180deg,#fff,color-mix(in oklab,var(--chip-tile) 60%,#fff));border:2px solid var(--chip-edge);box-shadow:0 3px 0 var(--chip-edge);
  font:700 14px var(--font-display);color:#2B3138;text-decoration:none}
.learn-chips .chip b{font:800 16px var(--font-display);color:#1F2328}
.chip-ico{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:var(--chip-ink);
  background:linear-gradient(180deg,#fff,var(--chip-tile));box-shadow:inset 0 0 0 1.5px var(--chip-edge)}
.chip-ico .duo{width:19px;height:19px}
.flame-art{display:block;object-fit:contain}.chip-ico .flame-art{width:22px;height:22px}.tile-fire .chip-ico .flame-art{width:30px;height:30px}
.chip-ico .duo .d{opacity:.28}
.chip--streak{--chip-tile:#FFE6CC;--chip-edge:#F6C08A;--chip-ink:#E8590C}
.chip--date{--chip-tile:#DDF2FD;--chip-edge:#9ED3F2;--chip-ink:#1078B5}
.chip--goal{--chip-tile:#FFE3EC;--chip-edge:#F4AFC5;--chip-ink:#C2255C}
.chip--ready{--chip-tile:#E3F7D1;--chip-edge:#AEDD86;--chip-ink:#3F8A06}
.chip .ui-ico{display:none}
.tile-fire{--chip-tile:#FFE6CC;--chip-edge:#F6C08A;--chip-ink:#E8590C}
.tile-fire .chip-ico{width:36px;height:36px}.tile-fire .chip-ico .duo{width:22px;height:22px}
/* the flame sits beside the number, both centred (.tile b would otherwise put it on a line of its own) */
.tile b.tile-fire{display:flex;align-items:center;justify-content:center;gap:6px}
.tile-fire .chip-ico{position:relative;width:40px;height:40px}
.chip-t{white-space:nowrap}
.learn-chips .chip small{font:700 14px var(--font-display);color:#3A434C}
/* phones: three compact tiles on one row (number on top, label under) */
@media (max-width:560px){
  #view > .learn-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:7px}
  .learn-chips .chip{min-height:0;padding:7px 8px 7px 6px;border-radius:18px;gap:7px}
  .learn-chips .chip .chip-t{display:grid;white-space:nowrap;line-height:1.1;min-width:0}
  .learn-chips .chip b{font-size:15px}
  .learn-chips .chip small{font-size:12px;font-weight:700}
  .chip-ico{width:28px;height:28px}.chip-ico .duo{width:17px;height:17px}
}
@media (max-width:379px){
  .learn-chips .chip{flex-direction:column;justify-content:center;gap:4px;padding:8px 4px;text-align:center}
  .learn-chips .chip .chip-t{justify-items:center}
}
.sidebar .nav-item .nav-label{font-size:16px!important;line-height:1.2}
#mobile-nav .nav-label{font-size:11.5px!important}
/* tablet: the side menu is a slim column of tiles (names are in aria-label) */
@media (min-width:701px) and (max-width:950px){
  :root{--sidebar:92px}
  .sidebar{width:92px!important;padding:20px 12px!important;align-items:center}
  #desktop-nav,.sidebar-bottom{align-items:center}
  .sidebar .nav-item,.sidebar-bottom .nav-item{justify-content:center;width:66px;min-height:66px;padding:9px;border-radius:20px}
  .sidebar .nav-item .nav-label{display:none!important}
}

/* ---------- menu v3: one accent, the app's own yellow (same as the big buttons) ---------- */
[data-tab]{--tile:#F4F6F8;--tint:#3A434C;--edge:#E2E6EA}
.nav-tile{background:linear-gradient(180deg,#fff 0,#F4F6F8 100%);color:#3A434C;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1.5px #E6E9ED,0 3px 0 #E2E6EA}
.duo .d{opacity:.16}
.sidebar .nav-item{gap:12px;padding-right:10px;color:#2B3138}
.sidebar .nav-item .nav-label{white-space:nowrap}
.sidebar .nav-item:hover .nav-tile{color:#1F2328}
.sidebar .nav-item.active{background:#fff!important;border-color:var(--accent-shadow,#C9A200);box-shadow:0 4px 0 var(--accent-shadow,#C9A200);color:#1F2328}
.sidebar .nav-item.active .nav-tile{color:var(--accent-ink,#1F2328);background:var(--accent,#FFD60A);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 3px 0 var(--accent-shadow,#C9A200)}
.sidebar .nav-item.active .duo .d{opacity:.28}
#mobile-nav a{color:#5B6670!important}
#mobile-nav .nav-tile{background:none;box-shadow:none;color:#5B6670}
#mobile-nav a.active{color:#1F2328!important}
#mobile-nav a.active .nav-tile{color:#1F2328;background:var(--accent,#FFD60A);box-shadow:inset 0 0 0 1.5px var(--accent-shadow,#C9A200)}

/* the logo: the original /// stripes (measured from the logo typeface), black on the yellow tile, always centred */
.brand-mark{display:inline-block;flex:none;width:1.45em;height:1.45em;margin-right:2px;padding:0!important;border-radius:.34em;
  background:#FFD60A!important;color:#101614!important;font-size:inherit!important;letter-spacing:0!important;transform:none!important;line-height:0}
.brand-mark svg{display:block;width:100%;height:100%;fill:currentColor}

/* Udseende: a small segmented control (Følg enheden / Lys / Mørk) */
.set-row--theme{flex-wrap:wrap;gap:10px;height:auto!important;min-height:0;padding-top:12px!important;padding-bottom:14px!important}
.seg{display:inline-flex;gap:3px;padding:3px;border-radius:999px;background:var(--panel2);box-shadow:inset 0 0 0 1.5px var(--line)}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:block;padding:7px 12px;border-radius:999px;font:700 14px var(--font-display);color:var(--muted);white-space:nowrap;transition:background-color .2s,color .2s}
.seg input:checked + span{background:var(--accent,#FFD60A);color:var(--accent-ink,#1F2328);box-shadow:0 2px 0 var(--accent-shadow,#C9A200)}
.seg input:focus-visible + span{outline:3px solid #1CB0F6;outline-offset:2px}

/* ---------- account: "Gem din fremgang" / "Din konto" ---------- */
.account-panel{display:grid;gap:12px}
.account-panel h2{margin:0}
.acc-lead,.acc-note{margin:0;font-size:15px;line-height:1.45;color:var(--ink)}
.acc-fine{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.acc-actions{display:flex;flex-wrap:wrap;gap:10px}
.acc-actions--stack{flex-direction:column}
.acc-actions .big-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px}
.acc-actions:not(.acc-actions--stack) .big-btn{width:auto;flex:1 1 140px}
.acc-g{width:20px;height:20px;flex:none}
.acc-ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.acc-form{display:grid;gap:8px}
.acc-form label{font:700 14px var(--font-display);color:var(--ink)}
.acc-row{display:flex;gap:8px;flex-wrap:wrap}
.acc-row input{flex:1 1 200px;min-height:52px;padding:0 14px;border-radius:14px;border:2px solid var(--line);background:var(--panel);color:var(--ink);font:500 16px var(--font-body,inherit)}
.acc-row input:focus-visible{outline:3px solid #1CB0F6;outline-offset:1px;border-color:transparent}
.acc-row .big-btn{flex:0 0 auto;min-height:52px;padding:0 20px}
.acc-who{display:grid;gap:2px;margin:0}
.acc-who b{font:800 17px var(--font-display);overflow-wrap:anywhere}
.acc-who small,.acc-sync{color:var(--muted);font-size:14px;margin:0}
.acc-links{display:flex;gap:18px;flex-wrap:wrap}
.acc-link{justify-self:start;padding:6px 0;border:0;background:none;font:700 15px var(--font-display);color:var(--blue-ink,#0A7BBF);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.acc-link--danger{color:var(--bad-ink,#D42F2F)}
.acc-confirm{display:grid;gap:10px;padding:14px;border-radius:16px;background:var(--panel2);border:2px solid var(--line)}
.acc-confirm p{margin:0;font-size:15px}
.acc-confirm--danger{border-color:var(--bad-ink,#D42F2F)}
.big-btn.acc-danger{background:#C62828;color:#fff;box-shadow:0 4px 0 #8E1B1B}
.acc-error{margin:0;padding:10px 12px;border-radius:12px;background:var(--bad-bg,#FFE5E5);color:#B42318;font-weight:600;font-size:14px}

/* ---------- Missioner ---------- */
.mission-intro{display:flex;align-items:center;gap:14px;margin:0 0 12px;padding:14px 16px;border:2px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:0 4px 0 var(--line)}
.mission-intro .cast-img{flex:none;width:72px!important}
.mission-intro strong{display:block;font:800 18px var(--font-display);color:var(--ink)}
.mission-intro small{display:block;margin-top:4px;color:var(--muted);font-size:15px;line-height:1.45}
.mission-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 6px;padding:0;list-style:none}
.mission-steps li{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 10px;border-radius:14px;background:var(--panel2);color:var(--ink);font:700 14px var(--font-display)}
.mission-steps b{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent,#FFD60A);color:#1A1605;font:800 12px var(--font-display)}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.feature-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;border:2px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:0 4px 0 var(--line);color:var(--ink);text-decoration:none;transition:translate .15s,border-color .15s}
.feature-card:hover{translate:0 -2px;border-color:var(--blue-ink,#0A7BBF)}
.feature-card:active{translate:0 2px;box-shadow:0 2px 0 var(--line)}
.feature-ico{display:grid;place-items:center;width:56px;height:56px;margin-bottom:4px;border-radius:16px;background:var(--c)}
.feature-ico .ui-ico{width:30px;height:30px}
.feature-tag{position:absolute;top:16px;right:16px;padding:4px 9px;border-radius:999px;background:var(--panel2);color:var(--muted);font:800 11px var(--font-display);letter-spacing:.06em}
.feature-card strong{font:800 19px/1.2 var(--font-display)}
.feature-card small{color:var(--muted);font-size:15px;line-height:1.4}
.feature-meta{margin-top:auto;padding-top:8px;color:var(--blue-ink,#0A7BBF);font:700 13px var(--font-display)}
.topic-cards--go{background:var(--accent,#FFD60A)!important;color:#1A1605!important;border-color:var(--accent-shadow,#C9A200)!important;box-shadow:0 3px 0 var(--accent-shadow,#C9A200)!important}
@media (max-width:860px){.feature-grid{grid-template-columns:1fr}.mission-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:380px){.mission-intro{align-items:flex-start}.mission-intro .cast-img{width:56px!important}}
.mission-intro .cast{flex:none;margin:0}
#main .missions h2.list-label{margin:22px 0 10px;font-size:12px!important;line-height:1.2}
/* phones: the recommended missions as compact rows, icon beside the text */
@media (max-width:860px){
  .feature-card{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:14px;row-gap:3px;align-items:start;padding:14px}
  .feature-ico{grid-row:1/span 4;width:52px;height:52px;margin:0}
  .feature-tag{position:static;justify-self:start;grid-column:2;padding:3px 8px;font-size:10px}
  .feature-card strong,.feature-card small,.feature-meta{grid-column:2}
  .feature-meta{padding-top:4px}
}

/* icon tiles: one neutral tile everywhere, like the menu; only "done" gets the green of success */
.row-ico,.feature-ico,.game-ico{background:linear-gradient(180deg,var(--panel) 0,var(--panel2) 100%)!important;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line),0 2px 0 var(--line)}
.row-ico .ui-ico,.feature-ico .ui-ico,.game-ico .ui-ico{color:var(--ink)}
.row-ico.is-done{background:var(--good-bg,#E8FBD5)!important;box-shadow:inset 0 0 0 1.5px var(--good,#58CC02)}
.row-ico.is-done .ui-ico{color:var(--good-ink,#3B8A00)}

/* Yellow surfaces are the design manual's buttons on a hard edge, with a gloss: a light sweep from the top-left
   corner, like light on lacquer. */
:root{--gloss:linear-gradient(135deg,rgba(255,255,255,.62) 0,rgba(255,255,255,.18) 34%,rgba(255,255,255,0) 52%)}
:is(.home-cta,.mybil-tab.is-active,.chip.active,.topic-cards--go,.journey-goal--active,.seg input:checked + span,#mobile-nav a.active .nav-tile,.nav-item.active,.topic.is-active .topic-n,.journey-step--active .journey-node__circle){background-image:var(--gloss),var(--grain-ink)!important}
/* the yellow main buttons also get the next-step card's light sweep (that card has its own, an ::after): a soft band
   of light passes over now and then. The band's place is an animated custom property, so the docks' own !important
   backgrounds cannot pin it, and its colour is a variable, so the dark theme's generator leaves it light.
   (html body: the rule must outweigh those !important backgrounds) */
@property --sweep-x{syntax:'<percentage>';inherits:false;initial-value:-20%}
:root{--sweep-light:rgba(255,255,255,.6)}
html body :is(.btn-primary,.judge__start,.pn--next .pn-btn,.turn-shell .turn-primary,.voice-control-primary,.chat-send,.chat-quiz-check,.journey-jump,.mybil-dream){background-image:var(--gloss),linear-gradient(100deg,transparent calc(var(--sweep-x) - 9%),var(--sweep-light) var(--sweep-x),transparent calc(var(--sweep-x) + 9%)),var(--grain-ink)!important;
  animation:btn-shine 5s 1.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes btn-shine{0%{--sweep-x:-20%}32%,100%{--sweep-x:120%}}
@media (prefers-reduced-motion:reduce){:is(.btn-primary,.judge__start,.pn--next .pn-btn,.turn-shell .turn-primary,.voice-control-primary,.chat-send,.chat-quiz-check,.journey-jump,.mybil-dream){animation:none}}
body.no-motion :is(.btn-primary,.judge__start,.pn--next .pn-btn,.turn-shell .turn-primary,.voice-control-primary,.chat-send,.chat-quiz-check,.journey-jump,.mybil-dream){animation:none}
/* the next-step card's way forward: a drawn chevron in an asphalt disc, like the topic banner's */
.home-cta .cta-go{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#1F2328;font-size:0;animation:none}
.home-cta .cta-go svg{width:22px;height:22px;fill:none;stroke:#FFD60A;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:translate .2s}
.home-cta:hover .cta-go svg{translate:2px 0}

/* skid marks: two faint white tyre tracks for the dark page (dark.css); the light page has ink ones (light.css) */
:root{--skid:url("assets/road/skid.webp")}
/* Asphalt: stones, fine grit and pits in three noise layers (--asphalt, for dark surfaces); --grain-ink is the grit
   for yellow surfaces, --grain-soft a whisper of it for the light page */
:root{--asphalt:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'220'%20height%3D'220'%3E%3Cfilter%20id%3D'n0'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.5'%20numOctaves%3D'2'%20seed%3D'3'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%203.2%200%200%200%20-2.05'%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D'n1'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.95'%20numOctaves%3D'2'%20seed%3D'7'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%202.4%200%200%200%20-1.35'%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D'n2'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.72'%20numOctaves%3D'2'%20seed%3D'11'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%202.8%200%200%200%20-1.5'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'220'%20height%3D'220'%20filter%3D'url(%23n0)'%20opacity%3D'0.34'%2F%3E%3Crect%20width%3D'220'%20height%3D'220'%20filter%3D'url(%23n1)'%20opacity%3D'0.24'%2F%3E%3Crect%20width%3D'220'%20height%3D'220'%20filter%3D'url(%23n2)'%20opacity%3D'0.5'%2F%3E%3C%2Fsvg%3E");--grain-ink:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'200'%3E%3Cfilter%20id%3D'n0'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.8'%20numOctaves%3D'2'%20seed%3D'5'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%202.6%200%200%200%20-1.42'%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D'n1'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.9'%20numOctaves%3D'2'%20seed%3D'9'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%202.4%200%200%200%20-1.4'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'200'%20height%3D'200'%20filter%3D'url(%23n0)'%20opacity%3D'0.26'%2F%3E%3Crect%20width%3D'200'%20height%3D'200'%20filter%3D'url(%23n1)'%20opacity%3D'0.28'%2F%3E%3C%2Fsvg%3E");--grain-soft:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'200'%3E%3Cfilter%20id%3D'n0'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.8'%20numOctaves%3D'2'%20seed%3D'13'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%202.6%200%200%200%20-1.45'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'200'%20height%3D'200'%20filter%3D'url(%23n0)'%20opacity%3D'0.08'%2F%3E%3C%2Fsvg%3E")}
/* the topic banner is asphalt */
.unit-banner{background-image:var(--asphalt);background-size:220px 220px;background-repeat:repeat}

/* the streak flame is a character, so it is shown big: it breaks out of the small icon discs */
.streak-flame{position:relative;display:inline-block;flex:none;width:38px;height:38px;margin:-8px -2px -8px -4px;vertical-align:middle}
.streak-flame .flame-art{width:100%;height:100%}
.journey-streak .streak-flame{grid-row:span 2;width:46px;height:46px;margin:-6px 0}
.tile-fire .chip-ico{width:64px;height:64px;margin:-10px 0 -6px;background:none;box-shadow:none}
.tile-fire .chip-ico .flame-art{width:56px;height:56px}

/* The Lær path is a road poster: a signal-yellow panel with a thick asphalt road winding through the lessons
   (drawn by mountLearnRoad in journey-road.js). The colours are variables so the dark theme keeps the poster. */
.learn-path-wrap{--poster-yellow:#FFD60A;--road-asphalt:#1F2328;--road-line:#FFFFFF;
  background:var(--grain-ink) 0 0/200px 200px,var(--poster-yellow);border-radius:28px;padding:44px 0 40px;margin-top:6px;overflow:hidden;isolation:isolate}
.learn-road{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:visible}
.learn-road path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.learn-road-asphalt{stroke:var(--road-asphalt);stroke-width:64px}
.learn-road-line{stroke:var(--road-line);stroke-width:3px;stroke-dasharray:14 13;opacity:.9}
/* the lesson names are small white road signs, so they read on the road and on the yellow */
.learn-path .pn-title{background:var(--road-line);color:var(--road-asphalt);padding:4px 10px;border-radius:999px;margin-top:8px;box-shadow:0 2px 0 rgba(31,35,40,.18)}
.learn-path .pn--next .pn-title{color:var(--road-asphalt)}
/* the next lesson keeps its pulse and gets the buttons' light sweep too */
html body .pn--next .pn-btn{animation:next-pulse 2.4s var(--in-out) infinite,btn-shine 5s 1.6s cubic-bezier(.45,0,.55,1) infinite}
@media (prefers-reduced-motion:reduce){html body .pn--next .pn-btn{animation:none}}
/* on wide screens the road swings wider, like the poster */
@media (min-width:700px){.learn-path .pn{left:calc(var(--x) * 72px)}}
/* on wide screens the poster gets its headline: the topic's name in giant upright capitals along the right edge,
   like the type on a motorbike poster */
.learn-poster-word{display:none}
.learn-path{position:relative;z-index:1}
@media (min-width:700px){
  .learn-poster-word{display:block;position:absolute;top:30px;right:22px;bottom:30px;overflow:hidden;writing-mode:vertical-rl;white-space:nowrap;
    font:900 64px/.84 var(--font-display);letter-spacing:-.02em;text-transform:uppercase;color:var(--road-asphalt);pointer-events:none}
}

/* Road posters. The colours are variables so the dark theme's generator leaves the posters as they are drawn. */
.road-poster,.mybil-head{--poster-yellow:#FFD60A;--poster-ink:#1F2328;--poster-line:#FFFFFF}
/* the exam start: "Retning er vigtigere end fart." beside a tilted yellow road with the car seen from above */
.road-poster{position:relative;overflow:hidden;min-height:210px;margin:0 0 16px;border-radius:24px;background:var(--panel,#fff);border:2px solid var(--line);box-shadow:0 4px 0 var(--line);isolation:isolate}
.road-poster-band{position:absolute;top:-40%;bottom:-40%;right:5%;width:96px;background:var(--poster-yellow);rotate:14deg;z-index:-1}
.road-poster-band::after{content:'';position:absolute;top:0;bottom:0;left:50%;width:4px;margin-left:-2px;background:repeating-linear-gradient(var(--poster-line) 0 22px,transparent 22px 46px)}
.road-poster-car{position:absolute;left:calc(50% + 5px);top:50%;width:40px;height:auto;translate:0 -50%;filter:drop-shadow(0 6px 6px rgba(31,35,40,.25))}
.road-poster-words{position:relative;margin:0;padding:26px 0 26px 22px;max-width:62%;font:900 clamp(26px,7.2vw,46px)/.94 var(--font-display);letter-spacing:-.02em;text-transform:uppercase;color:var(--ink)}
.road-poster-words span{display:inline-block}
.road-poster-mark{background:var(--poster-yellow);color:var(--poster-ink);padding:2px 8px 0;margin:4px 0;border-radius:6px;box-decoration-break:clone}
@media (min-width:700px){.road-poster{min-height:250px}.road-poster-band{width:128px;right:16%}.road-poster-car{width:54px;left:calc(50% + 8px)}}

/* Min bil: the header is a yellow panel with a big tyre rolling in from the right edge */
.mybil-head{position:relative;overflow:hidden;isolation:isolate;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:10px;min-height:150px;
  padding:22px 22px 20px;border-radius:24px;background:var(--grain-ink) 0 0/200px 200px,var(--poster-yellow);color:var(--poster-ink)}
.mybil-head h1,.mybil-head .eyebrow{color:var(--poster-ink)!important;position:relative}
.mybil-head .eyebrow::before{background:var(--poster-ink)}
.mybil-head > div{max-width:62%}
.mybil-head .booster-chip{position:relative}
.mybil-head-tyre{position:absolute;right:-74px;bottom:-96px;width:250px;height:auto;rotate:-12deg;z-index:-1;pointer-events:none}
@media (min-width:700px){.mybil-head{min-height:190px;padding:28px}.mybil-head-tyre{width:330px;right:-60px;bottom:-130px}}
@media (max-width:380px){.mybil-head > div{max-width:60%}.mybil-head-tyre{width:190px;right:-88px;bottom:-78px}}
/* the stops keep clear of the poster word: the road runs in the space to its left */
@media (min-width:700px){.learn-path{padding-right:104px}}
/* Desktop: Lær uses the width the mirror and the road above it use. The road poster fills the left; the topic
   banner and today's card stand in a column on the right that stays in view while the road scrolls. */
@media (min-width:1100px){
  .learn{max-width:1100px;display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto auto 1fr;column-gap:22px;row-gap:14px;align-items:start}
  .learn > .learn-path-wrap{grid-column:1;grid-row:1 / span 3;margin-top:0}
  .learn > .unit-banner{grid-column:2;grid-row:1;position:sticky;top:96px}
  .learn > .learn-card{grid-column:2;grid-row:2;position:sticky;top:290px}
  .learn-path{padding-right:132px}
  .learn-path .pn{left:calc(var(--x) * 96px)}
}
/* the exam start's status: the poster traffic light beside what it means */
.exam-signal{--signal-ink:#1F2328;display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:12px 18px 12px 10px;border-radius:20px;background:var(--panel,#fff);border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}
.exam-signal-light{position:relative;flex:none;display:block;width:76px;height:96px}
.exam-signal-light img{width:100%;height:100%;object-fit:contain}
.exam-signal-kicker{display:block;font:800 11px/1.2 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.exam-signal strong{display:block;margin:2px 0;font:800 22px/1.1 var(--font-display);color:var(--ink)}
.exam-signal small{display:block;color:var(--muted);font-size:14px;line-height:1.4}
/* the drawn icons are pictures: they keep their own colours and fill the box the line icons used */
img.icon-art{display:block;object-fit:contain;flex:none}
img.ui-ico.icon-art{width:24px;height:24px}
.mh-stat--goal .mh-ico{background:none;box-shadow:none}.mh-ico img.duo{width:26px;height:26px}
/* the menu's sticker icons fill their tile; the white sticker border keeps them readable on every background */
.nav-tile img.nav-art{display:block;width:30px;height:30px;object-fit:contain}
.sidebar .nav-tile img.nav-art{width:28px;height:28px}
/* Din profil: pick your profile picture */
.avatar-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.avatar-opt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border-radius:18px;border:2px solid var(--line);background:var(--panel,#fff);box-shadow:0 4px 0 var(--line);color:var(--ink);font:700 13px/1.2 var(--font-display);text-align:center;cursor:pointer}
.avatar-opt img{width:64px;height:64px;object-fit:contain}
.avatar-opt.is-on{border-color:#E8BC00;background:#FFF6C7;box-shadow:0 4px 0 #C9A200;color:#1F2328}
.avatar-opt:active{translate:0 4px;box-shadow:none}
/* More asphalt. The Prøve poster is an asphalt plate like the Øv hero, in both themes */
.road-poster{background:var(--asphalt) 0 0/220px 220px,#1F2328;border-color:#1F2328;box-shadow:0 5px 0 #000}
#main .road-poster-words,.road-poster-words{color:#FFFFFF}
/* the light theme's white cards get a whisper of the same grain, so they feel printed, not flat */
:is(.learn-card,.row-card,.game-card,.tile,.panel,.exam-signal,.avatar-opt,.mybil-item,.mybil-base){background-image:var(--grain-soft);background-size:200px 200px}
/* the cast's Rive canvas lies exactly over the drawing; the drawing keeps the size */
.cast-art{position:relative;display:block;line-height:0}
/* Din bil's road scene, drawn in the series' style (assets/scene): a muted sky, clouds, the far Danish hills with the
   farm, church and wind turbines, the near verge with birches and a fence, and an asphalt road. Each strip scrolls at
   its own speed; --w is the strip's width at its shown height, so the loop is seamless. */
.road-loop{background:linear-gradient(#8FBCD4 0,#C9DEE2 52%,#E6E2CF 60%)!important}
.road-loop .road-clouds{inset:6px 0 auto;height:54px;background:url("assets/scene/loop-clouds.webp") 0 0/auto 100% repeat-x;--w:398px;animation:scroll-x 60s linear infinite;opacity:calc(1 - var(--dark) * .55)}
.road-loop .road-hills--far{bottom:40%;height:100px;opacity:1;background:url("assets/scene/loop-far.webp") 0 100%/auto 100% repeat-x;--w:552px;animation:scroll-x 34s linear infinite}
.road-loop .road-hills--near{display:none}
.road-loop .road-trees{bottom:40%;height:72px;background:url("assets/scene/loop-near.webp") 0 100%/auto 100% repeat-x;--w:530px;animation:scroll-x 9s linear infinite}
.road-loop .road-sun{background:#F3E2A6;box-shadow:0 0 0 2px rgba(43,47,51,.35);animation:none}
.road-loop .road-sun::before{display:none}
.road-loop .road-asphalt{background:var(--asphalt) 0 0/220px 220px,#3A3F47}
.road-loop .road-asphalt::before{height:5px;background:#E8DFC8}
.road-loop .road-dashes{background:repeating-linear-gradient(90deg,#F1E6CC 0 34px,transparent 34px 70px);background-size:70px 5px}
.road-loop .road-speed{display:none}
/* the mirror sees the same countryside behind you at golden hour; the road is laid on top and keeps rolling */
.mh-scene{background:url("assets/scene/mirror.webp") 50% 58%/cover!important}
.mh-sun,.mh-hills{display:none}
.mh-ground{background:none!important}
.mh-ground::after{display:none}
.mh-road{background:linear-gradient(90deg,#E8DFC8 0 3%,#3A3F47 3% 97%,#E8DFC8 97%)!important}
.mh-road i{background:repeating-linear-gradient(0deg,#F1E6CC 0 26px,transparent 26px 58px)!important}