/* =====================================================================
   v439 · SLET DET SIDSTE / DET NÆSTE MINUT - BYGGET EFTER DESIGNGUIDEN (handoff 209, testen 24/10)
   Delene ligger i vores optageskærm (#o3 .o3-felt i stedet for "Spørg om mødet" under en inkognito-optagelse).
   Hver del er en byggesten fra komponentarket 209 med dens mål (data.json) og farver som roller:
     sporet = .mk-spor (14 px; fyld, cut, frosset, næste, nu-streg 3 px ±8)
     beskederne = .mk-toast (48 px, 14 px, --m-dark, handling i --m-on-dark)
     knapperne = .mk-btn (52 px, 0 18, 700 15, kant 1,5, --m-radius-btn): farlig / sekundær / samtykke-fyldt
     optageknappen, mens intet gemmes = --m-paused; inkognito-båndets stop = --m-ink-fg med firkant i --m-incognito
   Ingen hex. Mål og tider fra 209: farve 150 ms, ind 260 ms, kurve cubic-bezier(.2,.8,.2,1).
   ===================================================================== */
.sm{position:relative;display:flex;flex-direction:column;gap:12px}
.sm[hidden]{display:none}

/* sporet (209 · 6) */
.sm-spor{position:relative;height:14px;background:var(--m-line)}
.sm-spor i{position:absolute;top:0;bottom:0;transition:left 600ms cubic-bezier(.2,.8,.2,1),width 600ms cubic-bezier(.2,.8,.2,1)}
.sm-fyld{background:var(--m-accent)}
body.incog .sm-fyld{background:var(--m-incognito)}
.sm-plan{transition:left 300ms,width 300ms!important;background:repeating-linear-gradient(135deg,var(--m-rec) 0 4px,color-mix(in srgb,var(--m-rec) 35%,transparent) 4px 8px)}
.sm-frosset{background:repeating-linear-gradient(135deg,var(--m-cut) 0 3px,var(--m-line) 3px 6px);box-shadow:inset 0 0 0 1px var(--m-cut)}
.sm-zone{background:repeating-linear-gradient(135deg,var(--m-consent) 0 4px,transparent 4px 8px)}
.sm-spor i.sm-zslut{top:-8px;bottom:-8px;width:2px;margin-left:-1px;background:var(--m-consent)}
.sm-spor i.sm-nu{top:-10px;bottom:-10px;width:3px;margin-left:-1.5px;background:var(--m-rec);box-shadow:0 0 0 2px var(--m-bg)}
.sm-etiket{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font:500 12px/1 var(--m-font-num);font-variant-numeric:tabular-nums;color:var(--m-muted)}
.sm-etiket > span{white-space:nowrap}
.sm-etiket #sm-m{flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis}
.sm-etiket .rod{color:var(--m-cut)}
.sm-etiket .blaa{color:var(--m-consent)}

/* beskederne (209 · 5): "Det, der siges nu, gemmes ikke · 0:43  Stop nu" og "… er slettet  Fortryd" svæver over fladen,
   så sporet og knapperne aldrig flytter sig */
.sm-over{position:absolute;left:0;right:0;bottom:calc(100% + 12px);z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.sm-over > *{pointer-events:auto}
.sm-over{align-items:stretch}
.sm-toast,.sm-baand{box-sizing:border-box;width:100%;min-height:52px;display:flex;align-items:center;gap:14px;padding:0 16px;background:var(--m-dark);color:var(--m-ink-fg);font:400 15px/1.3 var(--m-font-body);
  border-radius:var(--m-radius-btn,0);box-shadow:0 8px 20px rgba(0,0,0,.25);animation:sm-op 260ms cubic-bezier(.2,.8,.2,1) both}
.sm-toast button,.sm-baand button{margin-left:auto}
/* båndet (207a): 12/14 luft, ringen 44 px med resttiden i midten, to linjer */
.sm-baand{gap:12px;padding:12px 14px}
.sm-ring{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center}
.sm-ring > span{width:34px;height:34px;border-radius:50%;background:var(--m-dark);display:grid;place-items:center;font:500 12px/1 var(--m-font-num);font-variant-numeric:tabular-nums}
.sm-bl{min-width:0}
.sm-bl b{display:block;font-size:15px;font-weight:700}
.sm-bl small{display:block;font-size:12px;margin-top:3px;opacity:.8}
.sm-toast[hidden],.sm-baand[hidden]{display:none}
.sm-toast button,.sm-baand button{color:var(--m-on-dark);cursor:pointer;background:none;border:0;padding:8px 0;font:700 15px/1 var(--m-font-body);white-space:nowrap}
.sm-baand button{font-size:13px}

/* knapperne (207a-koden 24/10): to side om side, 64 px, ikonet over teksten (20 px), 700 14 px, undertekst 11 px,
   +N i et mærke i hjørnet, der hopper frem. Mens den ene er i gang, er den anden dæmpet (.4) og kan ikke trykkes. */
.sm-knapper{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sm-knapper button{position:relative;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:6px;
  font:700 14px/1.2 var(--m-font-body);text-align:center;background:transparent;border-radius:var(--m-radius-btn,0);border:1.5px solid transparent;cursor:pointer;
  user-select:none;-webkit-user-select:none;transition:background 150ms,color 150ms,border-color 150ms,opacity 150ms}
.sm-knapper button:disabled{opacity:.4;cursor:default}
.sm-knapper svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sm-kt small{display:block;font-size:11px;font-weight:600;opacity:.9;margin-top:2px}
/* Slet det sidste minut = farlig (sletter lyd): kant og tekst i --m-rec; mens trykkene samles: fyldt */
.sm-knapper .sm-bagud{color:var(--m-rec);border-color:var(--m-rec)}
.sm-knapper .sm-bagud.paa{background:var(--m-rec);color:var(--m-ink-fg)}
/* Slet det næste minut: kant og tekst i samtykke-rollen; mens intet gemmes: fyldt */
.sm-knapper .sm-frem{color:var(--m-consent);border-color:var(--m-consent)}
.sm-knapper .sm-frem.paa{background:var(--m-consent);color:var(--m-ink-fg)}
/* +N: et lille papirkort i hjørnet med tallet i knappens farve */
.sm-n{position:absolute;top:-10px;right:-6px;display:inline-flex;white-space:nowrap;padding:3px 7px;background:var(--m-paper);
  font:600 20px/1 var(--m-font-head);box-shadow:0 4px 10px rgba(0,0,0,.18);animation:sm-pop 220ms cubic-bezier(.3,1.6,.5,1)}
.sm-bagud .sm-n{color:var(--m-rec)}
.sm-frem .sm-n{color:var(--m-consent)}
@keyframes sm-pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}

/* optagebåndet i inkognito (209 · 1): grund --m-incognito, tekst --m-ink-fg, stop = --m-ink-fg med firkant i --m-incognito
   (hudene har egne regler med !important for grunden; Margin har ingen) */
body.incog .opt-kort{background:var(--m-incognito);color:var(--m-ink-fg)}
body.incog .opt-kort #rec-button{background:var(--m-ink-fg)!important;border-color:var(--m-ink-fg)!important}
body.incog .opt-kort #rec-button .rec-dot{background:var(--m-incognito)!important;background-image:none!important}
/* mærket i båndet (209 §5): cirkel + "Inkognito" - samme form som samtykkets firkant (samtykke-kontakt.css .sam-baand) */
/* må krympe og afkortes - stop, pause og Kassér skal altid kunne ses */
.sm-inkmaerke{display:block;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 12px/1.2 var(--m-font-body,inherit);color:inherit;opacity:.9;margin-left:10px}
.sm-inkmaerke::before{content:'';display:inline-block;width:8px;height:8px;margin-right:6px;vertical-align:0;border-radius:50%;background:currentColor}
/* mens intet gemmes: optageknappen i --m-paused (209 · 5, "Stop virker stadig") */
body.sm-frem .opt-kort #rec-button{background:var(--m-paused)!important;border-color:var(--m-paused)!important}
body.sm-frem .opt-kort #rec-button .rec-dot{background:var(--m-ink-fg)!important}

/* computeren: i bunden hen over dagsordenen og fladen; er der plads (≥ 720 px), sporet og knapperne på én linje */
@media (min-width:900px), (hover:hover) and (pointer:fine){
  body.sk-paa #view-record.o3-paa .o3-felt:has(> .sm:not([hidden])){border-top:1px solid var(--m-line);padding:14px 24px 16px;container-type:inline-size}
  body.sk-paa #view-record.o3-paa .sm-etiket{font-size:13px}
  body.sk-paa #view-record.o3-paa .sm-over{align-items:flex-end}
  @container (min-width:720px){
    body.sk-paa #view-record.o3-paa .sm{flex-direction:row;align-items:center;gap:24px}
    body.sk-paa #view-record.o3-paa .sm-sporvaert{flex:1;min-width:0}
    body.sk-paa #view-record.o3-paa .sm-knapper{flex:none;width:380px}
  }
}

@keyframes sm-op{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.sm-spor i,.sm-baand,.sm-toast,.sm-knapper button,.sm-n{transition:none!important;animation:none!important}}