/* Mode selection is the action: three illustrated, keyboard-accessible buttons. */
body.course-home-active:has(.competency-home) #menuOv{background:linear-gradient(160deg,var(--movli-sky-300),var(--movli-sky-500) 65%,var(--movli-sky-700))}
#course-home.competency-home{width:min(1280px,100%);gap:clamp(16px,3vh,36px)}
.competency-home .course-home-bar{margin-bottom:0}
.competency-board{color:var(--movli-road-900);margin:auto 0}
.competency-board h1{color:var(--movli-cloud-000);font:800 clamp(28px,3.5vw,44px)/1.15 var(--movli-font-display);letter-spacing:-.035em;margin:0 0 28px;text-shadow:0 2px 5px color-mix(in srgb,var(--movli-road-900) 55%,transparent)}
.mode-choices{display:grid;grid-template-columns:1.12fr 1fr 1fr;gap:20px}
.mode-choice{appearance:none;font:inherit;text-align:left;display:flex;flex-direction:column;min-width:0;padding:0;margin:0;overflow:hidden;cursor:pointer;color:var(--movli-road-900);background:var(--movli-cloud-000);border:0;border-radius:var(--movli-radius-panel);box-shadow:0 7px 0 var(--movli-mist-300),var(--movli-shadow-panel);transition:transform var(--movli-motion-micro) var(--movli-ease)}
.mode-choice:hover{transform:translateY(-4px)}
.mode-choice:active{transform:translateY(4px)}
.mode-choice.mode-guided{background:var(--movli-go-500);box-shadow:var(--movli-shadow-control-edge),var(--movli-shadow-panel)}
.mode-art{display:block;width:100%;background:var(--movli-mist-100);overflow:hidden}
.mode-art svg{display:block;width:100%;height:clamp(190px,22vw,270px)}
.mode-guided .mode-art{background:color-mix(in srgb,var(--movli-go-500) 22%,var(--movli-mist-100))}
.mode-free .mode-art{background:color-mix(in srgb,var(--movli-sky-300) 20%,var(--movli-cloud-000))}
.mode-copy{display:flex;flex:1;flex-direction:column;padding:28px;gap:12px}
.mode-title{font:850 clamp(23px,2.3vw,30px)/1.15 var(--movli-font-display);letter-spacing:-.035em}
.mode-description{font:400 16px/1.5 var(--movli-font-body)}
.mode-action{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:800;font-size:16px;padding-top:24px;margin-top:auto}
.mode-action>span{display:grid;place-items:center;width:40px;height:40px;border:2px solid currentColor;border-radius:var(--movli-radius-round);font-size:24px;flex-shrink:0}
#course-home.competency-home .course-home-tools .course-button{margin:0}
.competency-home button:focus-visible,.competency-page :is(button,input,select,summary):focus-visible,.mode-choice:focus-within{outline:3px solid var(--movli-sky-700)!important;outline-offset:4px}
.competency-page .course-card{background:var(--movli-cloud-000);color:var(--movli-road-900);width:min(660px,100%);border-radius:var(--movli-radius-panel)}.competency-page summary{cursor:pointer;padding:14px 0;min-height:44px;font-weight:700}.competency-page details{border-bottom:1px solid var(--movli-mist-200)}.competency-page :is(select,input[type=search]){font:inherit;width:100%;min-height:48px;border:2px solid var(--movli-mist-300);border-radius:var(--movli-radius-control);padding:10px;background:var(--movli-cloud-000);color:var(--movli-road-900)}.skill-list{max-height:45vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px}.skill-list button{margin:0;text-align:left}.competency-page label{margin-bottom:16px}
#competency-progress{position:fixed;z-index:8;bottom:calc(var(--movli-space-4) + var(--sab,0px));left:50%;transform:translateX(-50%);box-sizing:border-box;width:min(460px,80vw);padding:var(--movli-space-3) var(--movli-space-4);border:1px solid transparent;overflow:hidden;font:400 14px/1.4 var(--movli-font-body);pointer-events:none}
#competency-progress .drive-mode{font-size:13px;font-weight:700;letter-spacing:.04em}
#competency-progress .drive-title{display:block;font:800 22px/1.2 var(--movli-font-display);margin-top:var(--movli-space-2)}
#competency-progress .drive-footer{margin:var(--movli-space-2) calc(-1 * var(--movli-space-4)) calc(-1 * var(--movli-space-3));padding:var(--movli-space-2) var(--movli-space-4) var(--movli-space-3)}
#competency-progress .drive-stage{font-size:14px;font-weight:700}
#competency-progress progress{display:block;width:100%;height:6px;margin-top:var(--movli-space-2)}
#competency-progress [hidden]{display:none}
body:has(#pauseOv:not(.hidden)) #competency-progress{visibility:hidden}

@media(max-width:650px){.mode-choices{grid-template-columns:1fr}.skill-list{grid-template-columns:1fr}.competency-home .course-home-bar{flex-wrap:wrap}.competency-home .course-home-tools{flex-direction:row;flex-wrap:wrap}#competency-progress{width:min(360px,calc(100vw - 28px))}}
@media(prefers-reduced-motion:reduce){.competency-home *,.competency-page *{transition:none!important;animation:none!important}}

@media(max-width:760px){
  .mode-choices{grid-template-columns:1fr;gap:18px}
  .mode-choice{flex-direction:row;min-height:160px}
  .mode-art{width:32%;flex-shrink:0;display:flex;align-items:center}
  .mode-art svg{height:auto;min-height:150px;width:155%;max-width:none;flex-shrink:0;margin-left:-27.5%}
  .mode-copy{padding:20px;gap:8px}
  .mode-title{font-size:24px}.mode-action{padding-top:8px;font-size:14px}
  .mode-action>span{width:30px;height:30px;font-size:20px}
  .competency-board h1{margin-bottom:22px}
  #course-home.competency-home .course-home-tools{flex-direction:row;gap:0}
}
@media(max-width:380px){.mode-art{width:25%}.mode-copy{padding:16px}.course-wordmark span{font-size:16px}}

/* Full pages share navigation, type, spacing and a short directional transition. */
.competency-page{position:fixed;inset:0;z-index:160;overflow:auto;overscroll-behavior:contain;background:var(--movli-mist-100);color:var(--movli-road-900);font-family:var(--movli-font-body);animation:movli-page-in var(--movli-motion-standard) var(--movli-ease) both}
.competency-page-shell{max-width:1200px;min-height:100%;margin:auto;padding:32px 40px;box-sizing:border-box;display:flex;flex-direction:column}
.competency-page .course-home-bar{margin:0 0 40px;flex-shrink:0}
.competency-page .course-wordmark{color:var(--movli-road-900);text-shadow:none}.competency-page .course-wordmark img{filter:none}
.page-section{font-size:14px;color:var(--movli-slate-600)}
.competency-page .course-card{width:100%;max-height:none;overflow:visible;padding:32px 0;margin:auto 0;background:transparent;border:0;border-radius:0;box-shadow:none;box-sizing:border-box}
.competency-page h1{font:800 clamp(30px,4vw,52px)/1.12 var(--movli-font-display);letter-spacing:-.035em;max-width:20ch;margin:0 0 24px}
.competency-page h1:focus{outline:none}
.competency-page .page-intro{font-size:18px;line-height:1.65;color:var(--movli-slate-600);max-width:60ch;margin-bottom:32px}
.competency-page .course-button:disabled{cursor:wait}
.competency-page .drive-introduction{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.introduction-art{grid-column:2;grid-row:1}.introduction-art .mode-art{background:transparent;border-radius:var(--movli-radius-panel);width:100%}.introduction-art .mode-art svg{height:auto;width:100%;margin:0;min-height:0}
.introduction-copy{grid-column:1;grid-row:1}.competency-page .introduction-note{color:var(--movli-slate-600);font-size:14px;margin:24px 0}
.competency-page .introduction-continue{min-width:160px;margin:8px 0 20px}
.competency-page .preparation-status{font-size:14px;color:var(--movli-slate-600);margin:8px 0}
.competency-page .skill-list{max-height:none;overflow:visible;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}
.competency-page .skill-list button{padding:20px;line-height:1.4;border:1px solid var(--movli-mist-200);background:var(--movli-cloud-000)}
.competency-page input[type=search]{max-width:600px}.competency-page details{max-width:850px}
body.competency-page-open #menuOv{visibility:hidden}body.competency-page-open #competency-progress{visibility:hidden}
.competency-page.is-leaving{pointer-events:none;animation:movli-page-out var(--movli-motion-standard) var(--movli-ease) both}
/* Moving this full-height child creates temporary overflow in #menuCard. */
#course-home.competency-home{animation:movli-home-in var(--movli-motion-standard) var(--movli-ease) both}
@keyframes movli-home-in{from{opacity:0}to{opacity:1}}
@keyframes movli-page-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes movli-page-out{to{opacity:0;transform:translateY(-8px)}}
@media(max-width:760px){.competency-page-shell{padding:24px}.competency-page .course-home-bar{margin-bottom:24px}.page-section{display:none}.competency-page .drive-introduction{grid-template-columns:1fr;gap:20px}.introduction-art{grid-column:1;grid-row:1;max-width:290px;justify-self:center}.introduction-copy{grid-column:1;grid-row:2}.competency-page .course-card{padding:12px 0}.competency-page .skill-list{grid-template-columns:1fr 1fr}.competency-page h1{font-size:34px}.competency-page .page-intro{font-size:16px;margin-bottom:20px}}
@media(max-width:420px){.competency-page .skill-list{grid-template-columns:1fr}.introduction-art{max-width:220px}}
@media(prefers-reduced-motion:reduce){.competency-page,.competency-page.is-leaving,#course-home.competency-home{animation:none!important;transform:none!important}}

/* Phase status and teacher pointers share the product's brand tokens. */
/* Guidance belongs to the teacher, not to a floating control over the road. */
#veileder.has-guidance{z-index:8;background:var(--movli-cloud-000);border-color:var(--movli-mist-300);border-radius:var(--movli-radius-control);box-shadow:var(--movli-shadow-panel);max-height:calc(100dvh - 28px);overflow-y:auto}
#veileder.has-guidance #vTekst{color:var(--movli-road-900);font-family:var(--movli-font-body)}
#veileder.has-guidance #vTekst:empty{display:none}
#veileder.has-guidance #vNavn{background:var(--movli-road-900);color:var(--movli-cloud-000);border:0;padding:var(--movli-space-2) var(--movli-space-3);font:700 14px var(--movli-font-body);letter-spacing:0;text-transform:none}
#veileder.has-guidance #vLydStatus{color:var(--movli-cloud-000);padding-right:0;font-size:12px;font-weight:400;letter-spacing:0}
#veileder.has-guidance #vMute,#veileder.has-guidance #vMinimer{background:var(--movli-cloud-000);color:var(--movli-road-900);border-color:var(--movli-mist-300)}
#veileder.has-guidance #vMute:hover,#veileder.has-guidance #vMinimer:hover{background:var(--movli-mist-100);border-color:var(--movli-sky-500)}
#veileder.has-guidance #vMiniVisual{background:var(--movli-cloud-000);color:var(--movli-road-900);box-shadow:none}
#veileder.has-guidance .vMiniPortrait{background:var(--movli-mist-100);color:var(--movli-sky-700);box-shadow:none}
#veileder.has-guidance .vMiniExpand{background:var(--movli-sky-700);stroke:var(--movli-cloud-000);fill:var(--movli-sky-700);box-shadow:none}

/* Compact teacher keeps the guidance state and action alongside its portrait. */
#veileder.has-guidance.minimert{box-sizing:border-box;width:300px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 28px);min-height:68px;padding:0 0 0 68px;border-radius:var(--movli-radius-control);overflow:hidden;background:var(--movli-mist-100)}

#veileder.has-guidance.minimert #vMiniVisual{inset:var(--movli-space-2) auto auto var(--movli-space-2);width:52px;height:52px}

body.touch #veileder.has-guidance{flex-wrap:wrap;gap:0;padding-right:0;max-height:calc(100dvh - 90px - var(--sat))}
body.touch #veileder.has-guidance #vTekst{padding:var(--movli-space-2);font-size:14px;max-height:none}

body.touch #veileder.has-guidance.minimert{display:block;width:280px;padding-left:60px;min-height:60px;max-height:calc(100dvh - 90px - var(--sat))}
body.touch #veileder.has-guidance.minimert #vMiniVisual{width:44px;height:44px}
body.touch #veileder.has-guidance:not(.minimert){display:grid;grid-template-columns:52px minmax(0,1fr);align-items:start}
body.touch #veileder.has-guidance #vAnsikt{grid-column:1;grid-row:1;margin:var(--movli-space-2) 0 0 var(--movli-space-2);width:44px}
body.touch #veileder.has-guidance #vTekst{grid-column:2;grid-row:1}
body.touch #veileder.has-guidance #vControls{grid-column:1 / -1;margin-left:0;width:auto;padding:0 var(--movli-space-3)}

body.touch #veileder.has-guidance.minimert{border-radius:var(--movli-radius-control)}

@media(min-width:640px) and (max-height:550px){
  body.touch #veileder.has-guidance,body.touch #veileder.has-guidance.has-controls,body.touch #veileder.has-guidance.minimert{
    left:calc(206px + var(--sal));top:calc(8px + var(--sat));width:min(320px,calc(100vw - 444px - var(--sal) - var(--sar)));max-height:calc(100dvh - 130px - var(--sat));
  }
}

body.course-driving.utenveileder #veileder.has-guidance{display:block;opacity:1;transform:none;padding:0}

#teacher-arrow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30;display:none;overflow:hidden;color:var(--movli-sky-700);filter:drop-shadow(0 2px 3px color-mix(in srgb,var(--movli-road-900) 22%,transparent))}
#teacher-arrow :is(.teacher-arrow-halo,.teacher-arrow-line){fill:none;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
#teacher-arrow .teacher-arrow-halo{stroke:var(--movli-cloud-000);stroke-width:7;opacity:.8}
#teacher-arrow .teacher-arrow-line{stroke:currentColor;stroke-width:2.5;marker-end:url(#teacher-arrow-head)}
#teacher-arrow marker path{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
#teacher-arrow .teacher-arrow-origin{fill:var(--movli-cloud-000);stroke:currentColor;stroke-width:2}
#teacher-arrow.is-entering :is(.teacher-arrow-halo,.teacher-arrow-line){animation:movli-teacher-arrow-draw var(--movli-motion-celebration) var(--movli-ease) both}
#teacher-arrow.is-entering .teacher-arrow-origin{animation:movli-teacher-arrow-origin var(--movli-motion-standard) var(--movli-ease) both}
#teacher-arrow.is-entering marker path{animation:movli-teacher-arrow-tip var(--movli-motion-celebration) var(--movli-ease) both}
@keyframes movli-teacher-arrow-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes movli-teacher-arrow-origin{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes movli-teacher-arrow-tip{0%,70%{opacity:0}100%{opacity:1}}
.competency-page-open #assistance-phase{display:none}

@media(prefers-reduced-motion:reduce){#teacher-arrow *,#assistance-phase{animation:none!important;transition:none!important}}

/* Driving introductions keep the prepared road visible around one decision. */
.competency-page.drive-introduction-overlay{display:flex;padding:var(--movli-space-6);box-sizing:border-box;background:color-mix(in srgb,var(--movli-road-900) 32%,transparent);animation:none}
.drive-introduction-overlay .competency-page-shell{width:min(680px,100%);min-height:0;padding:0;margin:auto}
.competency-page.drive-introduction-overlay .drive-introduction{display:block;padding:0;overflow:hidden;background:var(--movli-surface);border-radius:var(--movli-radius-panel);box-shadow:var(--movli-shadow-panel)}
.drive-introduction-overlay .introduction-heading{padding:var(--movli-space-6) var(--movli-space-8);background:linear-gradient(115deg,var(--movli-mist-100),var(--movli-mist-200))}
.drive-introduction-overlay .introduction-eyebrow{margin:0 0 var(--movli-space-2);font-size:16px;font-weight:700;color:var(--movli-sky-700)}
.drive-introduction-overlay h1{font-size:36px;line-height:1.15;margin:0}
.drive-introduction-overlay .introduction-copy{padding:var(--movli-space-6) var(--movli-space-8)}
.introduction-steps{list-style:none;counter-reset:introduction;margin:0;padding:0;display:grid;gap:var(--movli-space-6)}
.introduction-steps li{counter-increment:introduction;display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--movli-space-4)}
.introduction-steps li::before{content:counter(introduction);display:grid;place-items:center;align-self:start;width:44px;height:44px;border-radius:var(--movli-radius-control);background:var(--movli-surface-subtle);color:var(--movli-sky-700);font-size:20px;font-weight:800}
.introduction-steps strong{font-size:21px;line-height:1.4}
.introduction-steps p{font-size:18px;line-height:1.5;color:var(--movli-text-muted);margin:var(--movli-space-1) 0 0}
@media(max-width:520px){
  .competency-page.drive-introduction-overlay{padding:var(--movli-space-4)}
  .drive-introduction-overlay .introduction-heading,.drive-introduction-overlay .introduction-copy{padding:var(--movli-space-6)}
  .drive-introduction-overlay h1{font-size:30px}
}

/* Category stays with the message in full, compact and muted presentations. */
#veileder.has-guidance #vTekst[data-message-category]::before{content:attr(data-message-category);display:block;font-family:var(--movli-font-body);font-size:12px;font-weight:700;color:var(--movli-slate-600);margin-bottom:var(--movli-space-1)}

/* A stable brand field conceals construction, uploads and the first frame. */
#drive-transition-cover{position:fixed;inset:0;z-index:150;display:grid;place-items:center;background:linear-gradient(155deg,var(--movli-sky-300),var(--movli-sky-500));opacity:1;transition:opacity var(--movli-motion-scene) var(--movli-ease)}
#drive-transition-cover.is-revealing{opacity:0;pointer-events:none}
#drive-transition-cover>.drive-preparation{box-sizing:border-box;width:min(420px,calc(100% - var(--movli-space-12)));padding:var(--movli-space-8);background:var(--movli-surface);border-radius:var(--movli-radius-panel);box-shadow:var(--movli-shadow-panel)}
.drive-preparation{margin-top:var(--movli-space-6);color:var(--movli-text-muted);font:500 14px/1.5 var(--movli-font-body)}
.drive-preparation p{margin:0 0 var(--movli-space-2)}
.drive-preparation progress{display:block;width:100%;height:8px;border:0;border-radius:var(--movli-radius-round);overflow:hidden;background:var(--movli-mist-200);accent-color:var(--movli-progress)}
.drive-preparation progress::-webkit-progress-bar{background:var(--movli-mist-200)}
.drive-preparation progress::-webkit-progress-value{background:var(--movli-progress);transition:width var(--movli-motion-standard) var(--movli-ease)}
.drive-preparation progress::-moz-progress-bar{background:var(--movli-progress)}
.drive-introduction-overlay .drive-introduction{animation:movli-drive-dialog-in var(--movli-motion-dialog) var(--movli-ease) both}
.drive-introduction-overlay.is-leaving{animation:movli-drive-dialog-out var(--movli-motion-dialog) var(--movli-ease) both}
@keyframes movli-drive-dialog-in{from{opacity:0;transform:translateY(var(--movli-space-4)) scale(.985)}to{opacity:1;transform:none}}
@keyframes movli-drive-dialog-out{to{opacity:0;transform:translateY(calc(-1 * var(--movli-space-2)))}}
body.drive-preparing :is(#topControls,#nav,#competency-progress,#veileder){visibility:hidden}
@media(prefers-reduced-motion:reduce){.drive-introduction-overlay .drive-introduction,.drive-introduction-overlay.is-leaving{animation:none}#drive-transition-cover,.drive-preparation progress::-webkit-progress-value{transition:none}}

/* Optional support context stays in startup utilities, below the next action. */
.startup-diagnostics{flex-basis:100%;width:100%;min-width:0}
.startup-diagnostics summary{color:var(--movli-text-muted);font:600 14px/1.5 var(--movli-font-body)}
.startup-diagnostics textarea{display:block;box-sizing:border-box;width:100%;max-width:100%;margin:var(--movli-space-2) 0;padding:var(--movli-space-4);border:1px solid var(--movli-mist-300);border-radius:var(--movli-radius-control);background:var(--movli-surface-subtle);color:var(--movli-text);font:400 12px/1.5 var(--movli-font-body);resize:vertical}
.startup-diagnostics textarea:focus-visible{outline:3px solid var(--movli-sky-700);outline-offset:var(--movli-space-1)}

.startup-welcome .dialog-actions .drive-preparation.has-connection-error{max-height:none;overflow:visible}