/* =====================================================================
   STARTSKÆRMEN MED MARGENSTREGEN (handoff 196-199 · 199, Robin 22/10) - kun telefonen, før optagelsen.
   startskaerm.js tegner #ss (kort A Vælg møderække · kort B Dagsorden · citatet i margenen) øverst i #opt-rul og
   sætter #view-record.ss-klar. Alt herunder gælder kun, når ALLE fire er sande: telefon (ingen mus), ikke computerens
   skinne (body.sk-paa), ikke under optagelsen (.kompakt / .o3-paa) og modulet har bygget sig (.ss-klar).
   De gamle elementer (team-kortet, #dk, mødeskabelonen, de gamle rækker) skjules - de slettes ikke.
   Farverne er KUN Margins roller (--m-*). Formen pr. hud (radius, kant, skygge, skrifter, accent) er --ss-* -
   standarden (Margin) står her, Bordet og Lag sætter deres egne i public/hud/<hud>.css.
   Klasser ss-. Menuen nederst (Optag · Møder · Indsigter) røres ikke.
   ===================================================================== */

/* hudens tokens - Margin (199a) som standard */
#view-record,.ss-ramme{
  --ss-bd:1px solid var(--m-line);   /* kortkant */
  --ss-sh:none;                      /* kortskygge */
  --ss-r:0;                          /* kort */
  --ss-ir:0;                         /* ikonfelt */
  --ss-fr:0;                         /* felt */
  --ss-br:0;                         /* knap */
  --ss-sq:0;                         /* farvefirkant */
  --ss-acc:var(--m-accent);          /* links, ›, citatet */
  --ss-head:'Barlow Condensed',sans-serif;
  --ss-hw:600;
  --ss-body:Barlow,sans-serif;
  --ss-mono:ui-monospace,Menlo,monospace;   /* kilden og numrene - som variabel, så hud.js ikke bytter den (199b har også mono) */
}

/* uden for telefonen og under optagelsen findes 199 ikke */
#ss,.ss-streg{display:none}

@keyframes ss-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (max-width:899px) and (hover:none), (max-width:899px) and (pointer:coarse), (max-width:899px) and (pointer:none){

/* --- det, 199 afløser: skjult, ikke slettet --- */
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #team-kort,
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #dk,
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #byg-moede,
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #opt-raekker,
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) .opt-loefte,
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #opt-titel{display:none!important}

/* --- 1 · margenstregen: 24 px fra venstre, 2 px, hudens røde 85 % - stopper over menuen --- */
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) .ss-streg{display:block;position:fixed;left:24px;top:0;
  bottom:var(--ss-bund,0px);width:2px;background:var(--m-rec);opacity:.85;z-index:9;pointer-events:none}

/* --- 2 · hovedet: padding 0/18/12/38, mærket 20 px, Margin 28 px i overskriftsskriften --- */
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) > header.hoved{
  padding:env(safe-area-inset-top) 6px 12px 38px;gap:10px;border-bottom:0;background:var(--m-bg)}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) > header.hoved h1.mk-h{
  gap:10px;font-family:var(--ss-head)!important;font-weight:var(--ss-hw);font-size:28px;letter-spacing:0;color:var(--m-text)}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) > header.hoved .mk-m{position:relative;display:block;
  width:20px;height:20px;flex:none}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) > header.hoved .mk-s{position:absolute;left:3px;top:0;
  bottom:0;width:2.5px;height:auto;background:var(--m-rec)}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) > header.hoved .mk-l{position:absolute;left:9px;top:0;
  display:block;width:11px;height:20px}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) > header.hoved .mk-l i{position:absolute;left:0;
  width:11px;height:2.5px;background:var(--m-text)}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) > header.hoved .mk-l i:nth-child(1){top:3px}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) > header.hoved .mk-l i:nth-child(2){top:9px;width:11px}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) > header.hoved .mk-l i:nth-child(3){top:15px;width:7px}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) > header.hoved .btn-menu{color:var(--m-muted)}

/* --- 3 · rullefeltet: flex 1, padding 6/14/10/38, gap 10 - alle børn flex:none --- */
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) .record-area{padding-left:0;padding-right:0;
  /* Robin 22/10 (Bordet: mikrofonlinjen under den svævende menu): luften måles fra menuens rigtige top (--ss-bund, startskaerm.js) */
  padding-bottom:calc(var(--ss-bund,64px) + 16px)}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #opt-rul{order:1;flex:1 1 auto;min-height:0;
  align-self:stretch;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;margin:0;padding:6px 14px 10px 38px;
  display:flex;flex-direction:column;gap:10px;-webkit-mask-image:none;mask-image:none}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #opt-rul::-webkit-scrollbar{display:none}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #opt-rul > *{flex:none}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #ss{display:flex;flex-direction:column;gap:10px;
  color:var(--m-text);font-family:var(--ss-body)}
#ss > *{flex:none}
/* Robin 23/10 (skærmbillede: "den har sat kalender-delen under citat"): kalenderkortet (#kal-kort, tidslinje.js) ligger uden for
   #ss - #ss opløses i rullefeltet (display:contents, arven bevares), så rækkefølgen kan sættes: Vælg møderække · Dagsorden ·
   næste kalendermøde · citatet · resten */
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #ss{display:contents}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #opt-rul > *{order:5}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #ss-a{order:1}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #ss-b{order:2}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #kal-kort{order:3;margin:0}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #ss-citat{order:4}

/* --- 4 · optageknappen: 120 px i hudens røde → 96 px (300 ms), når et kort er foldet ud. Ét tryk som altid. --- */
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #rec-button{order:2;flex:none;position:relative;left:12px;
  width:120px;height:120px;margin:8px auto 0;border:0;border-radius:50%;background-color:var(--m-rec);
  box-shadow:0 0 0 7px var(--m-bg),0 0 0 8.5px var(--m-line-soft);transition:width 300ms,height 300ms}
body:not(.sk-paa) #view-record.ss-klar.ss-aaben:not(.kompakt):not(.o3-paa) #rec-button{width:96px;height:96px}
/* Robin 22/10: "når man udvider menuen, skal citatet måske bare forsvinde" - et åbent kort skubber det væk, og det kommer
   igen (uden at blive skrevet frem forfra), når kortet lukkes */
body:not(.sk-paa) #view-record.ss-klar.ss-aaben:not(.kompakt):not(.o3-paa) #ss-citat{display:none}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #rec-button.incognito{background-color:var(--m-incognito)}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #rec-button:not(.recording) .rec-dot{display:none}
/* ◌ Inkognito (13 px dæmpet) og mikrofonlinjen (12 px, ellipse + Skift i accent) - gap 10 */
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #ink-linje{order:3;position:relative;left:12px;
  min-height:24px;margin:10px auto 0;padding:0 6px;gap:4px;font:400 13px/1.2 var(--ss-body);color:var(--m-muted)}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #ink-linje .il-ik{display:none}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #ink-linje::before{content:'◌'}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #ink-linje.paa{color:var(--m-incognito);font-weight:600}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #kilde-linje{order:4;position:relative;left:12px;
  min-height:24px;max-width:300px;margin:10px auto 0;padding:0 6px;gap:8px;font:400 12px/1.2 var(--ss-body);color:var(--m-muted)}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #kilde-linje .kl-ik,
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #kilde-linje .kl-ik svg{width:12px;height:12px}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #kilde-linje .kl-skift{font:700 12px/1.2 var(--ss-body);
  color:var(--ss-acc)}

/* --- kortene A og B --- */
#ss .ss-kort{background:var(--m-surface);border:var(--ss-bd);box-shadow:var(--ss-sh);border-radius:var(--ss-r);overflow:hidden}
#ss .ss-hd,#ss .ss-r,#ss .ss-alle,#ss .ss-brief,#ss .ss-sidst,#ss .ss-p,#ss .ss-tand,#ss .ss-skift,#ss .ss-kilde,#ss .ss-tilf{
  -webkit-appearance:none;appearance:none;box-sizing:border-box;margin:0;border:0;border-radius:0;background:none;
  color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
#ss .ss-hd{width:100%;min-height:72px;display:flex;align-items:center;gap:14px;padding:0 14px}
#ss .ss-ik{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:var(--ss-ir);background:var(--m-ink)}
#ss .ss-ik svg{width:20px;height:20px;fill:none;stroke:var(--m-ink-fg);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#ss .ss-ik.gitter svg{stroke-width:1.7;stroke-dasharray:3 2}
#ss .ss-m{flex:1;min-width:0}
#ss .ss-t{display:block;font-family:var(--ss-head);font-weight:var(--ss-hw);font-size:19px;line-height:1.1}
#ss .ss-u{display:block;font-size:14px;color:var(--m-muted);margin-top:3px}
#ss .ss-pil{font-size:18px;color:var(--ss-acc);transition:transform 220ms}
#ss .ss-kort.aaben .ss-pil{transform:rotate(90deg)}
/* folder ud på stedet: 0fr → 1fr, 320 ms */
#ss .ss-fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows 320ms cubic-bezier(.2,.8,.2,1)}
#ss .ss-kort.aaben .ss-fold{grid-template-rows:1fr}
#ss .ss-fi{min-height:0;overflow:hidden}
/* kort A åben: rækkerne á 52 px */
#ss .ss-r{width:100%;min-height:52px;display:flex;align-items:center;gap:12px;padding:0 14px;border-top:1px solid var(--m-line-soft)}
#ss .ss-sq{width:12px;height:12px;flex:none;display:block;border-radius:var(--ss-sq)}
#ss .ss-rn{display:block;font-size:15px;font-weight:700}
#ss .ss-rs{display:block;font-size:12px;color:var(--m-muted);margin-top:2px}
#ss .ss-alle{width:100%;min-height:44px;display:flex;align-items:center;padding:0 14px;border-top:1px solid var(--m-line-soft);
  font-size:14px;font-weight:700;color:var(--ss-acc)}
/* kort A valgt: rækkens kort */
#ss .ss-valgt{min-height:64px;display:flex;align-items:center;gap:12px;padding:0 10px 0 14px}
#ss .ss-valgt.ny{animation:ss-rise 260ms both}
#ss .ss-sq.stor{width:14px;height:14px}
#ss .ss-vn{display:block;font-family:var(--ss-head);font-weight:var(--ss-hw);font-size:20px;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ss .ss-vs{display:block;font-size:12px;color:var(--m-muted);margin-top:3px}
#ss .ss-tand{min-height:36px;display:flex;align-items:center;padding:0 4px;font-size:18px;color:var(--m-muted)}
#ss .ss-skift{min-height:36px;display:flex;align-items:center;padding:0 6px;font-size:14px;font-weight:700;color:var(--ss-acc)}
#ss .ss-under{border-top:1px solid var(--m-line-soft)}
#ss .ss-under.ny{animation:ss-rise 320ms 80ms both}
#ss .ss-brief,#ss .ss-sidst{width:100%;min-height:60px;display:flex;align-items:center;gap:12px;padding:0 14px}
#ss .ss-sidst{border-top:1px solid var(--m-line-soft)}
#ss .ss-bk{width:38px;height:38px;flex:none;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;
  border:1.5px dashed var(--ss-acc);color:var(--ss-acc);font-size:14px}
#ss .ss-bt{display:block;font-size:15px;font-weight:700}
#ss .ss-bs{display:block;font-size:12px;color:var(--m-muted);margin-top:2px}
#ss .ss-mk{width:38px;height:38px;flex:none;display:grid;place-items:center}
#ss .ss-mki{width:18px;height:18px;position:relative;display:block}
#ss .ss-mki i{position:absolute;display:block;height:2px;background:var(--m-text)}
#ss .ss-mki i:nth-child(1){left:3px;top:0;bottom:0;width:2px;height:auto;background:var(--m-rec)}
#ss .ss-mki i:nth-child(2){left:8px;top:3px;width:10px}
#ss .ss-mki i:nth-child(3){left:8px;top:8px;width:10px}
#ss .ss-mki i:nth-child(4){left:8px;top:13px;width:6px}
#ss .ss-sl{font-size:13px;font-weight:700;color:var(--ss-acc);white-space:nowrap}
/* kort B åben: punkterne á 46 px + Nyt punkt */
#ss .ss-p{width:100%;min-height:46px;display:flex;align-items:center;gap:12px;padding:0 14px;border-top:1px solid var(--m-line-soft)}
#ss .ss-pn{width:22px;flex:none;font:500 13px/1 var(--ss-mono);color:var(--m-muted)}
#ss .ss-pt{flex:1;min-width:0;font-size:15px}
#ss .ss-pw{font-size:12px;color:var(--m-muted)}
#ss .ss-nyt{display:flex;gap:8px;padding:10px 14px 12px;border-top:1px solid var(--m-line-soft)}
#ss .ss-in{flex:1;min-width:0;box-sizing:border-box;height:42px;margin:0;padding:0 12px;border:1.5px solid var(--ss-acc);
  border-radius:var(--ss-fr);background:var(--m-bg);color:var(--m-text);font:400 15px/1 var(--ss-body);outline:none;box-shadow:none}
#ss .ss-tilf{min-height:42px;display:grid;place-items:center;padding:0 14px;border-radius:var(--ss-br);
  background:var(--m-ink);color:var(--m-ink-fg);font-size:14px;font-weight:700}

/* --- citatet i margenen (§3.4) --- */
#ss .ss-citat{position:relative;margin:8px 0 0 -38px;padding:4px 0 4px 38px;min-height:96px}
#ss .ss-citat[hidden]{display:none}
#ss .ss-blyant{position:absolute;left:2px;top:6px;font:600 20px/1 Caveat,cursive;transform:rotate(-8deg);color:var(--ss-acc)}
/* Robin 22/10: pennen er en knap - tryk = det næste citat (trykfladen er større end tegnet) */
#ss button.ss-blyant{appearance:none;border:0;background:none;margin:0;padding:6px;left:-4px;top:0;min-width:32px;min-height:32px;cursor:pointer;-webkit-tap-highlight-color:transparent}
#ss button.ss-blyant:active{transform:rotate(-20deg) scale(.92)}
#ss button.ss-blyant:focus-visible{outline:2px solid var(--ss-acc);outline-offset:0}
#ss .ss-kick{font:700 10px/1 var(--ss-body);letter-spacing:.14em;color:var(--m-muted)}
#ss .ss-q{margin-top:8px;font-family:Caveat,cursive;font-weight:600;line-height:1.12;transform:rotate(-2deg);
  transform-origin:0 50%;color:var(--ss-acc);clip-path:inset(0 0 0 0)}
#ss .ss-aq{color:var(--m-rec)}
#ss .ss-q.skriv{clip-path:inset(0 100% 0 0)}
#ss .ss-q.skriv.nu{clip-path:inset(0 0 0 0);transition:clip-path 1500ms linear}
#ss .ss-kilde{display:inline-flex;gap:4px;align-items:center;max-width:100%;margin-top:8px;min-height:24px;padding:0;
  font:500 11px/1 var(--ss-mono);color:var(--m-muted);white-space:nowrap;border-bottom:1px dotted var(--m-muted)}
#ss .ss-kt{min-width:0;overflow:hidden;text-overflow:ellipsis}
#ss .ss-kilde.vent{opacity:0}
#ss .ss-kilde.vent.nu{opacity:1;transition:opacity 500ms 1700ms}

}

@media (prefers-reduced-motion:reduce){
  #ss .ss-fold,#ss .ss-pil,#view-record.ss-klar:not(.kompakt):not(.o3-paa) #rec-button{transition:none!important}
  #ss .ss-valgt.ny,#ss .ss-under.ny{animation:none}
  #ss .ss-q.skriv,#ss .ss-q.skriv.nu{clip-path:none;transition:none}
  #ss .ss-kilde.vent,#ss .ss-kilde.vent.nu{opacity:1;transition:none}
}

/* v462 · citatbogen (hold pennen inde) - arket er husets dialogArk, kun indholdet er nyt */
#ss button.ss-blyant{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.ss-cb-ark .ss-cb{display:flex;flex-direction:column;margin-top:6px;max-height:62vh;overflow-y:auto;overscroll-behavior:contain}
.ss-cb-ark .ss-cb-h{margin:14px 0 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--m-muted)}
.ss-cb-ark .ss-cb-m{margin:10px 0 0;font-size:12px;font-weight:600;color:var(--m-muted)}
.ss-cb-ark .ss-cb-r{appearance:none;display:flex;flex-direction:column;gap:3px;width:100%;margin:0;padding:10px 4px 10px 12px;border:0;
  border-left:2px solid var(--m-accent);border-radius:0;box-shadow:none;background:none;text-align:left;cursor:pointer;color:var(--m-text);-webkit-tap-highlight-color:transparent}
.ss-cb-ark .ss-cb-r + .ss-cb-r{margin-top:6px}
.ss-cb-ark .ss-cb-r:active{background:var(--m-tint)}
.ss-cb-ark .ss-cb-r:focus-visible{outline:2px solid var(--m-accent);outline-offset:2px}
.ss-cb-ark .ss-cb-q{font:600 20px/1.2 Caveat,"Segoe Print",cursive;color:var(--m-text)}
.ss-cb-ark .ss-cb-u{font-size:12px;color:var(--m-muted)}
.ss-cb-ark .ss-cb-tom{margin:4px 0;font-size:13px;color:var(--m-muted)}