/* Switch card geometry atomically so visible speech never wraps through a
   collapsed-width grid column during expansion. */
body #veileder{transition:opacity var(--movli-motion-standard) var(--movli-ease),transform var(--movli-motion-standard) var(--movli-ease)}
@media(prefers-reduced-motion:reduce){body #veileder{transition:none}}

/* A1: preserve the live portrait; give its message a separate reading surface. */
#vSpeech{
  position:relative;min-width:0;box-sizing:border-box;
  background:var(--movli-hud-surface);color:var(--movli-hud-text);
  border-radius:var(--movli-radius-control);box-shadow:var(--movli-shadow-panel);
}
#vSpeech:has(#vTekst:empty):has(#vControls:empty):has(#vSteg:empty){display:none}
body:not(.touch) #veileder:not(.minimert){
  display:grid;grid-template-columns:236px minmax(0,1fr);grid-template-rows:auto 1fr;
  column-gap:var(--movli-space-4);width:min(700px,calc(100vw - 370px));
  background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;
  max-height:calc(100dvh - 28px);overflow:visible;align-items:start;
}
body:not(.touch) #veileder:not(.minimert) #vAnsikt{
  grid-column:1;grid-row:1;border-radius:var(--movli-radius-control);
  box-shadow:var(--movli-shadow-panel);
}

body:not(.touch) #veileder:not(.minimert) #vSpeech{
  grid-column:2;grid-row:1 / 3;margin-top:var(--movli-space-3);
  padding:var(--movli-space-6);max-height:calc(100dvh - 54px);
  overflow-y:auto;pointer-events:auto;
}
/* The tail sits in the gap, independently of the scrollable reading surface. */
body:not(.touch) #veileder:not(.minimert):has(#vSpeech:not([hidden])):has(#vTekst:not(:empty))::after{
  content:'';position:absolute;left:244px;top:52px;width:16px;height:16px;
  transform:rotate(45deg);background:var(--movli-hud-surface);pointer-events:none;
}
body:not(.touch) #veileder:not(.minimert) #vTekst{
  padding:0;font:550 21px/1.5 var(--movli-font-body);color:var(--movli-hud-text);
  overflow-wrap:anywhere;max-height:none;
}
body:not(.touch) #veileder:not(.minimert) #vControls:not(:empty){padding:var(--movli-space-4) 0 0}
body:not(.touch) #veileder:not(.minimert) #vSteg{padding:var(--movli-space-3) 0 0}
body:not(.touch) #veileder:not(.minimert) #vSteg div{color:var(--movli-hud-muted);font-size:16px}
body:not(.touch) #veileder:not(.minimert) #vSteg div.ok{color:var(--movli-go-500)}

body:not(.touch) #veileder #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;
}
body:not(.touch) #veileder #vLydStatus{padding-right:0;color:var(--movli-cloud-000);font-size:12px;letter-spacing:0;font-weight:400}
body:not(.touch) #veileder :is(#vMute,#vMinimer){
  width:44px;height:44px;background:var(--movli-surface);color:var(--movli-text);border-color:var(--movli-mist-300);
}
body:not(.touch) #veileder #vMinimer{right:61px}
#veileder :is(#vMute,#vMinimer,#vMiniVisual):focus-visible{outline:3px solid var(--movli-sky-700);outline-offset:3px}
/* Keep compact/mobile and minimized coaching states, without truncating speech. */
body.touch #veileder #vSpeech{grid-column:2;grid-row:1;flex:1 1 0;box-shadow:none}
body.touch #veileder #vSpeech #vTekst{font:500 16px/1.5 var(--movli-font-body);padding:var(--movli-space-3);max-height:none;overflow:visible;color:var(--movli-hud-text)}
body.touch #veileder #vSpeech #vControls{margin-left:0;padding:0 var(--movli-space-3) var(--movli-space-3)}
body.touch #veileder.rituale #vSpeech #vSteg{margin-left:0;flex-wrap:wrap;padding:var(--movli-space-3)}
body.touch #veileder:not(.minimert){overflow-y:auto;max-height:calc(100dvh - 130px - var(--sat))}
@media(max-width:900px){
  body:not(.touch) #veileder:not(.minimert){width:min(360px,calc(100vw - 28px));display:flex;flex-direction:column;gap:var(--movli-space-3);max-height:calc(100dvh - 28px);overflow-y:auto}
  body:not(.touch) #veileder:not(.minimert) #vAnsikt{width:236px;min-height:178px;flex-shrink:0;border-radius:var(--movli-radius-control)}
  body:not(.touch) #veileder:not(.minimert) #vSpeech{width:100%;margin:0;max-height:none;overflow:visible;padding:var(--movli-space-4)}
  body:not(.touch) #veileder:not(.minimert)::after{display:none}

}
/* Turning the teacher off must still leave the optional coaching action usable. */
body.utenveileder #veileder.has-guidance:not(.minimert){display:block;width:236px;max-width:calc(100vw - 28px)}
body.utenveileder #veileder.has-guidance:not(.minimert)::after{display:none}

/* Shared teacher controls: the advice context lives in a tooltip. */
body #veileder .guidance-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body #veileder #assistance-phase{
  position:absolute;grid-area:auto;left:71px;top:9px;z-index:6;width:44px;height:44px;
  padding:0;border:0;background:transparent;overflow:visible;max-height:none;
}
body #veileder :is(#vMute,#vMinimer,#vMiniVisual,.guidance-help){
  box-sizing:border-box;width:44px;height:44px;min-height:44px;margin:0;padding:0;
  display:grid;place-items:center;border:0;border-radius:var(--movli-radius-round);
  background:var(--movli-surface);color:var(--movli-text);cursor:pointer;pointer-events:auto;
  box-shadow:none;backdrop-filter:none;
  transition:background var(--movli-motion-micro),transform var(--movli-motion-micro),box-shadow var(--movli-motion-micro);
}
body #veileder :is(#vMute,#vMinimer,.guidance-help) svg{width:var(--movli-icon-size-default);height:var(--movli-icon-size-default);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body #veileder :is(#vMute,#vMinimer,#vMiniVisual,.guidance-help)[aria-pressed="true"]{background:var(--movli-mist-200);box-shadow:none}
@media(hover:hover){
 body #veileder :is(#vMute,#vMinimer,#vMiniVisual,.guidance-help):enabled:hover{background:var(--movli-mist-200);transform:none}
}
body #veileder :is(#vMute,#vMinimer,#vMiniVisual,.guidance-help):enabled:active{background:var(--movli-mist-300);box-shadow:none;transform:none}
body #veileder :is(#vMute,#vMinimer,#vMiniVisual,.guidance-help):disabled{background:transparent;color:var(--movli-text-muted);box-shadow:none;cursor:default;transform:none}
body #veileder :is(#vMute,#vMinimer,#vMiniVisual,.guidance-help):focus-visible{outline:3px solid var(--movli-focus);outline-offset:3px;box-shadow:0 0 0 3px var(--movli-surface)}
body #veileder.has-guidance.minimert{width:112px;min-height:60px;max-height:60px;padding:0;background:transparent;border:0;box-shadow:none;overflow:visible}
body #veileder.has-guidance.minimert #vMiniVisual{inset:8px auto auto 0;width:44px;height:44px}
body #veileder.has-guidance.minimert #assistance-phase{left:56px;top:8px;padding:0}
body.utenveileder #veileder.has-guidance{width:44px;min-height:44px;background:transparent;border:0;box-shadow:none}
body.utenveileder #veileder.has-guidance #assistance-phase{left:0;top:0;padding:0}
/* Touch controls form a full-sized row below the small portrait. */
body.touch #veileder:not(.minimert){padding-bottom:60px;min-width:168px}
body.touch #veileder #vAnsikt{position:relative;overflow:hidden;transform:none}
body.touch #veileder #vMinimer{left:60px;right:auto;top:auto;bottom:8px}
body.touch #veileder #vMute{left:112px;right:auto;top:auto;bottom:8px}
body.touch #veileder:not(.minimert) #assistance-phase{left:8px;top:auto;bottom:8px;padding:0;border:0}
body.touch.utenveileder #veileder.has-guidance{padding:0;min-width:44px}
body.touch.utenveileder #veileder.has-guidance #assistance-phase{left:0;top:0;bottom:auto}
.teacher-tooltip{position:fixed;z-index:10000;box-sizing:border-box;width:max-content;max-width:min(360px,calc(100vw - 16px));padding:var(--movli-space-2) var(--movli-space-3);border-radius:var(--movli-radius-tooltip);background:var(--movli-tooltip-surface);color:var(--movli-tooltip-text);box-shadow:none;font:400 14px/1.5 var(--movli-font-body);overflow-wrap:anywhere;cursor:default;pointer-events:auto}
@media(prefers-reduced-motion:reduce){body #veileder :is(#vMute,#vMinimer,#vMiniVisual,.guidance-help){transition:none!important;transform:none!important}}
body #veileder.has-guidance.minimert > :not(#vMiniVisual):not(#assistance-phase){display:none}
body #veileder.has-guidance.minimert #assistance-phase{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:none}
body.utenveileder #veileder.has-guidance > :not(#assistance-phase){display:none}
body.utenveileder #veileder.has-guidance #assistance-phase{opacity:1;visibility:visible;pointer-events:auto;transform:none}

body:not(.touch) #veileder #vMinimer{left:123px;right:auto}
body:not(.touch) #veileder #vMute{left:175px;right:auto}

/* A dedicated utility band keeps all controls clear of the live portrait. */
#vControlBand{
  box-sizing:border-box;background:var(--movli-surface-subtle);
  border-radius:0 0 var(--movli-radius-control) var(--movli-radius-control);
}
body:not(.touch) #veileder:not(.minimert) #vControlBand{
  grid-column:1;grid-row:2;width:236px;height:64px;flex-shrink:0;
}
body:not(.touch) #veileder:not(.minimert) #vAnsikt{
  border-bottom-left-radius:0;border-bottom-right-radius:0;
}
body:not(.touch) #veileder:not(.minimert) :is(#vMinimer,#vMute,#assistance-phase){top:186px}
body:not(.touch) #veileder:not(.minimert) #assistance-phase{left:44px}
body:not(.touch) #veileder:not(.minimert) #vMinimer{left:96px}
body:not(.touch) #veileder:not(.minimert) #vMute{left:148px}
body.touch #veileder:not(.minimert) #vControlBand{position:absolute;left:0;right:0;bottom:0;height:60px}
#veileder.minimert #vControlBand,body.utenveileder #veileder #vControlBand{display:none}
body.utenveileder #veileder.has-guidance:not(.minimert) #assistance-phase{left:0;top:0}
@media(max-width:900px){
  body:not(.touch) #veileder:not(.minimert) #vControlBand{margin-top:calc(-1 * var(--movli-space-3))}
}

/* Expanded teacher utilities divide the entire band into equal hit areas. */
body:not(.utenveileder) #veileder:not(.minimert){--teacher-band-width:236px;--teacher-band-height:64px;--teacher-section-count:2}
body:not(.utenveileder) #veileder.has-guidance:not(.minimert){--teacher-section-count:3}
body:not(.utenveileder) #veileder:not(.minimert) :is(#vMinimer,#vMute,#assistance-phase){
  top:178px;bottom:auto;width:calc(var(--teacher-band-width) / var(--teacher-section-count));height:var(--teacher-band-height);
}
body:not(.utenveileder) #veileder:not(.minimert) #assistance-phase{left:0}
body:not(.utenveileder) #veileder:not(.minimert) #vMinimer{left:0}
body:not(.utenveileder) #veileder.has-guidance:not(.minimert) #vMinimer{left:calc(var(--teacher-band-width) / 3)}
body:not(.utenveileder) #veileder:not(.minimert) #vMute{left:calc(var(--teacher-band-width) - var(--teacher-band-width) / var(--teacher-section-count))}
body:not(.utenveileder) #veileder:not(.minimert) :is(#vMinimer,#vMute,.guidance-help){
  border-radius:0;background:var(--movli-surface-subtle);
}
body:not(.utenveileder) #veileder:not(.minimert) #assistance-phase .guidance-help{width:100%;height:100%;border-bottom-left-radius:var(--movli-radius-control)}
body:not(.utenveileder) #veileder:not(.minimert) #vMute{border-bottom-right-radius:var(--movli-radius-control);border-left:1px solid var(--movli-mist-300)}
body:not(.utenveileder) #veileder.has-guidance:not(.minimert) #vMinimer{border-left:1px solid var(--movli-mist-300)}
body:not(.utenveileder) #veileder:not(.has-guidance):not(.minimert) #vMinimer{border-bottom-left-radius:var(--movli-radius-control)}
body:not(.utenveileder) #veileder:not(.minimert) :is(#vMinimer,#vMute,.guidance-help)[aria-pressed="true"]{background:var(--movli-mist-200)}
@media(hover:hover){
 body:not(.utenveileder) #veileder:not(.minimert) :is(#vMinimer,#vMute,.guidance-help):enabled:hover{background:var(--movli-mist-200)}
}
body:not(.utenveileder) #veileder:not(.minimert) :is(#vMinimer,#vMute,.guidance-help):enabled:active{background:var(--movli-mist-300)}
body:not(.utenveileder) #veileder:not(.minimert) :is(#vMinimer,#vMute,.guidance-help):disabled{background:transparent}
body:not(.utenveileder) #veileder:not(.minimert) :is(#vMinimer,#vMute,.guidance-help):focus-visible{outline-offset:-3px;box-shadow:none}
body.touch:not(.utenveileder) #veileder:not(.minimert){--teacher-band-width:100%;--teacher-band-height:60px}
body.touch:not(.utenveileder) #veileder:not(.minimert) :is(#vMinimer,#vMute,#assistance-phase){top:auto;bottom:0}

/* Supporting labels stay readable on the driving HUD surface. */
body #veileder #vSpeech #vTekst[data-message-category]::before{color:var(--movli-hud-muted)}
body #veileder #vSpeech #vSteg div.na{color:var(--movli-hud-text)}

/* Selected utilities stay visually separate from the navy portrait label. */
body #veileder :is(#vMute,.guidance-help)[aria-pressed="true"],
body:not(.utenveileder) #veileder:not(.minimert) :is(#vMute,.guidance-help)[aria-pressed="true"]{
  background:var(--movli-mist-200);color:var(--movli-road-900);
}
@media(hover:hover){
 body #veileder :is(#vMute,.guidance-help)[aria-pressed="true"]:enabled:hover,
 body:not(.utenveileder) #veileder:not(.minimert) :is(#vMute,.guidance-help)[aria-pressed="true"]:enabled:hover{background:var(--movli-mist-300)}
}
body #veileder :is(#vMute,.guidance-help)[aria-pressed="true"]:enabled:active,
body:not(.utenveileder) #veileder:not(.minimert) :is(#vMute,.guidance-help)[aria-pressed="true"]:enabled:active{background:var(--movli-mist-300)}

body #veileder #vMute svg path{stroke-width:2;fill:none}

/* Status stays within the existing portrait strip, even in longer locales. */
body:not(.touch) #veileder #vNavn{gap:var(--movli-space-3)}
body:not(.touch) #veileder #vNavnTxt{flex:0 0 auto;white-space:nowrap}
body:not(.touch) #veileder #vLydStatus{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}