/* =====================================================================
   SAMTYKKE I APPEN (samtykke-kontakt.js) - handoff 205-207 §1-2 efter designguiden 209 (Robin 24/10)
   Forsidens "◌ Inkognito · □ Samtykke", QR-kortet, pladserne rundt om optageknappen, den ventende knap, mærket i båndet og
   mødets side. Kun roller (--m-*): samtykke = --m-consent (209 §3b), knappen venter = --m-field + stiplet --m-rec.
   Klasser sam-. Gælder forsiden på både telefon og computer; telefonens startskærm (199) flytter det hele 12 px mod højre
   som optageknappen (margenstregen) - nederst.
   ===================================================================== */
/* --- kontakterne: én linje, ◌ Inkognito · □ Samtykke, samme sted og form som ◌ Inkognito (startskaerm.css) --- */
#view-record:not(.kompakt):not(.o3-paa) .sam-valg{order:3;display:flex;flex-direction:column;align-items:center;gap:4px;
  margin:10px auto 0}
.sam-raekke{display:flex;align-items:center;justify-content:center;gap:8px}
#view-record:not(.kompakt):not(.o3-paa) .sam-valg #ink-linje{margin:0;left:0}
.sam-valg .sam-prik{order:3;color:var(--m-line);font-size:13px}
.sam-valg .sam-linje{order:4}
#view-record.kompakt .sam-valg,#view-record.o3-paa .sam-valg{display:none}
.sam-linje{-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:24px;display:inline-flex;align-items:center;gap:4px;margin:0;padding:0 6px;
  border:0;background:none;cursor:pointer;font:400 13px/1.2 var(--ss-body,inherit);color:var(--m-muted);transition:color 150ms}
.sam-linje::before{content:'';width:9px;height:9px;box-sizing:border-box;border:1.5px solid currentColor;margin-right:2px}
.sam-linje.paa{color:var(--m-consent);font-weight:600}
.sam-linje.paa::before{background:currentColor}
.sam-linje:focus-visible{outline:2px solid var(--m-consent);outline-offset:2px}
/* linjen under kontakterne: 12 px dæmpet, centreret, højst 250 px (206) */
#view-record:not(.kompakt):not(.o3-paa) .sam-under{max-width:250px;margin:0 auto;
  font:400 12px/1.35 var(--ss-body,inherit);color:var(--m-muted);text-align:center}
.sam-under[hidden],#view-record.kompakt .sam-under,#view-record.o3-paa .sam-under{display:none}

/* --- QR-kortet over knappen (205c): kort med 1,5 px samtykke-kant, QR 84 px --- */
#view-record:not(.kompakt):not(.o3-paa) .sam-qr{order:2;width:min(320px,calc(100% - 48px));margin:8px auto 16px}
.sam-qr{box-sizing:border-box;display:flex;gap:12px;align-items:center;padding:10px 12px;background:var(--m-surface);border:1.5px solid var(--m-consent);border-radius:var(--radius,0)}
#view-record.kompakt .sam-qr,#view-record.o3-paa .sam-qr{display:none}
.sam-qr-billede{flex:none;width:84px;height:84px;background:var(--m-surface)}
.sam-qr-billede svg{display:block;width:84px;height:84px}
.sam-qr-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.sam-kicker{font:700 11px/1.2 var(--m-font-body,inherit);letter-spacing:.12em;text-transform:uppercase;color:var(--m-consent)}
.sam-qr-t b{font-size:15px;font-weight:700;line-height:1.25;color:var(--m-text)}
.sam-qr-t > span:not(.sam-kicker){font-size:12px;line-height:1.35;color:var(--m-muted)}
.sam-stort{align-self:flex-start;padding:4px 0;border:0;background:none;font:700 12px/1.2 var(--m-font-body,inherit);color:var(--m-consent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* --- optageknappen med samtykke: tynd ring i --m-consent, pladserne rundt om (205-207 §1) --- */
body.samtykke #view-record:not(.kompakt):not(.o3-paa) #rec-button,
body.samtykke:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #rec-button{position:relative;box-shadow:0 0 0 7px var(--m-bg),0 0 0 10px var(--m-consent);overflow:visible;
  display:grid;place-items:center}
.sam-pladser{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.sam-pladser i{position:absolute;left:-11px;top:-11px;width:22px;height:22px;box-sizing:border-box;border-radius:50%;border:1.5px dashed var(--m-consent);background:var(--m-bg);
  display:grid;place-items:center;font:700 10px/1 var(--m-font-body,inherit);font-style:normal;color:var(--m-ink-fg);transition:background 150ms}
.sam-pladser i.taget{border:2px solid var(--m-bg)}
.sam-knaptekst{position:relative;max-width:84px;font:700 15px/1.15 var(--m-font-body,inherit);text-align:center;pointer-events:none}
/* venter på deltagere (205c): grå grund, 2,5 px stiplet rød kant, teksten i samtykke-farven, kan ikke trykkes */
body.samtykke #view-record:not(.kompakt):not(.o3-paa) #rec-button.sam-venter,
body.samtykke:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #rec-button.sam-venter{background-color:var(--m-field)!important;
  border:2.5px dashed var(--m-rec)!important;cursor:default}
#rec-button.sam-venter .sam-knaptekst{color:var(--m-consent)}
#rec-button.sam-klar .sam-knaptekst{color:var(--m-ink-fg)}
body.samtykke #view-record:not(.kompakt):not(.o3-paa) #rec-button.sam-venter .rec-dot,
body.samtykke:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #rec-button.sam-venter .rec-dot,
body.samtykke #view-record:not(.kompakt):not(.o3-paa) #rec-button.sam-klar .rec-dot,
body.samtykke:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) #rec-button.sam-klar .rec-dot{display:none}
/* "N af 6 er med" under ringen (15 px 700) */
#view-record:not(.kompakt):not(.o3-paa) .sam-antal{order:3;margin:38px auto 0;
  font:700 15px/1.2 var(--m-font-body,inherit);color:var(--m-text);font-variant-numeric:tabular-nums}
#view-record.kompakt .sam-antal,#view-record.o3-paa .sam-antal{display:none}

/* --- QR i fuld skærm: papirets lyse flade, så telefonen kan scannes (205c "Vis stort") --- */
.sam-stor{position:fixed;inset:0;z-index:230;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;
  background:var(--m-paper);color:var(--m-paper-text);cursor:pointer}
.sam-stor-qr{width:260px;height:260px}
.sam-stor-qr svg{display:block;width:260px;height:260px}
.sam-stor code{font:500 15px/1.3 var(--m-font-num,ui-monospace);color:var(--m-paper-text);word-break:break-all;text-align:center}
.sam-stor span{font-size:13px;color:var(--m-paper-muted)}

/* --- under optagelsen: mærket i det almindelige bånd (205c §2) - firkant + "Samtykke · N er med" --- */
/* mærket må krympe og afkortes (…) - stop, pause og Kassér skal altid kunne ses (Robin 24/10: stop var skubbet ud på telefonen) */
.sam-baand{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}
.sam-baand::before{content:'';display:inline-block;width:8px;height:8px;margin-right:6px;vertical-align:0;background:currentColor}
/* uret, Kassér, pause og stop krymper aldrig - kun mærket giver plads */
#view-record.kompakt .opt-kort #rec-timer,#view-record.kompakt .opt-kort #btn-discard,#view-record.kompakt .opt-kort #rec-controls,#view-record.kompakt .opt-kort #rec-button{flex-shrink:0}
/* appens inkognito-mærker skjules - optagelsen er inkognito bag skærmen, men det er samtykke, man ser */
body.samtykke-rec #rec-incog-mark,body.samtykke-rec #incog-lock{display:none!important}

/* --- mødets side = den fælles side (samtykke-flow.js) --- */
#view-samtykke{background:var(--m-bg);min-height:100vh}
.sam-side-hoved{display:flex;align-items:center;gap:8px;padding:12px 12px 0;font:700 13px/1 var(--m-font-body,inherit);color:var(--m-muted)}
.sam-side-hoved .icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sam-side{max-width:520px;margin:0 auto;padding:12px 20px 96px}
@media (min-width:900px), (hover:hover) and (pointer:fine){
  .sam-side{padding:24px 32px 64px}
}
/* computeren (computer.css §5): forsidens gitter får en række mere til hver del, når samtykke er tændt -
   QR-kortet over knappen, "N af 6 er med" under, så kontakterne, linjen under dem og lydkilden. Uden samtykke er gitteret urørt. */
@media (min-width:900px), (hover:hover) and (pointer:fine){
  /* uden samtykke: blokken står, hvor ◌ Inkognito stod (række 4) */
  body.sk-paa #view-record:not(.kompakt):not(.o3-paa) .sam-valg{grid-row:4}
  body.sk-paa.samtykke #view-record:not(.kompakt):not(.o3-paa) .record-area{grid-template-rows:1fr auto auto auto auto auto auto 1fr}
  body.sk-paa.samtykke #view-record:not(.kompakt):not(.o3-paa) .fs-klar{display:none}
  body.sk-paa #view-record:not(.kompakt):not(.o3-paa) .sam-qr{grid-row:2;width:360px;margin:0 auto 8px}
  body.sk-paa.samtykke #view-record:not(.kompakt):not(.o3-paa) .rec-button{grid-row:3}
  body.sk-paa #view-record:not(.kompakt):not(.o3-paa) .sam-antal{grid-row:4;margin:30px auto 0}
  body.sk-paa.samtykke #view-record:not(.kompakt):not(.o3-paa) .sam-valg{grid-row:5}
  body.sk-paa.samtykke #view-record:not(.kompakt):not(.o3-paa) .kilde-linje{grid-row:6}
  body.sk-paa.samtykke #view-record:not(.kompakt):not(.o3-paa) .rec-advarsel,
  body.sk-paa.samtykke #view-record:not(.kompakt):not(.o3-paa) #upload-state{grid-row:7}
  body.sk-paa.samtykke #view-record:not(.kompakt):not(.o3-paa) .rec-button{box-shadow:0 0 0 10px var(--m-bg),0 0 0 13px var(--m-consent)}
  body.sk-paa #view-record:not(.kompakt):not(.o3-paa) .sam-valg{grid-column:1}
}
/* telefonens startskærm (startskaerm.css): optageknappen står 12 px til højre for margenstregen - delene følger med */
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) .sam-valg,
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) .sam-qr,
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) .sam-antal{position:relative;left:12px}
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) .sam-valg #ink-linje{left:0;margin:0}
@media (prefers-reduced-motion:reduce){.sam-linje,.sam-pladser i{transition:none}}

/* --- mødebordet (211a, public/moedebord.js - låst komponent, ret aldrig i filen) i stedet for knappen og pladserne ---
   Huden giver rød, ring, tekst og skrift; træet og bordkortene er de samme i alle hude (designerens valg). Baggrunden bag
   tegningen er gjort gennemsigtig udefra, så skærmens egen grund står bag (Robin 24/10). */
margin-moedebord{--mb-rec:var(--m-rec);--mb-steel:var(--m-consent);--mb-ink:var(--m-text);--mb-muted:var(--m-muted);
  --mb-font:var(--m-font-body,inherit);--mb-font-head:var(--m-font-head,inherit)}
#view-record:not(.kompakt):not(.o3-paa) .sam-bord{order:3;width:370px;max-width:100%;margin:0 auto}
#view-record.kompakt .sam-bord,#view-record.o3-paa .sam-bord{display:none}
body.sam-med-bord:not(.sam-221) #view-record:not(.kompakt):not(.o3-paa) #rec-button,
body.sam-med-bord #view-record:not(.kompakt):not(.o3-paa) .sam-antal{display:none!important}
/* bordet er 370 px bredt (designerens mål) - det centreres på telefonen i stedet for at følge margenstregen, så det ikke rækker ud over kanten */
body:not(.sk-paa) #view-record.ss-klar:not(.kompakt):not(.o3-paa) .sam-bord{align-self:center}
@media (min-width:900px), (hover:hover) and (pointer:fine){
  body.sk-paa #view-record:not(.kompakt):not(.o3-paa) .sam-bord{grid-row:3}
}
/* telefonen: bordets størrelse regnes ud i samtykke-kontakt.js (passBord) efter pladsen, der er tilbage under QR-kortet og over
   Samtykke-linjen og mikrofonen - startskærmen ruller ikke. Er pladsen for lille til 60 %, må optagedelen rulle, så intet
   nogensinde står uden for rækkevidde (Robin 24/10). */
body.sam-rul:not(.sk-paa) #view-record:not(.kompakt):not(.o3-paa) .record-area{overflow-y:auto;scrollbar-width:none}
body.sam-rul:not(.sk-paa) #view-record:not(.kompakt):not(.o3-paa) .record-area > *{flex-shrink:0}
body.sam-rul:not(.sk-paa) #view-record:not(.kompakt):not(.o3-paa) #opt-rul{display:none}

/* v446 (221a, Robin 25/10): margin-samtykke-bord - knappen folder sig ud til bordet. Bordet ligger OVEN PÅ siden (absolut), med sin
   røde knap i optageknappens midtpunkt (samtykke-kontakt.js plac221) - resten af siden står stille: optageknappen, Inkognito ·
   Samtykke, mikrofonlinjen og kortene bliver usynlige, men beholder deres plads. Komponenten har selv QR, tæller og kontakter. */
#view-record:not(.kompakt):not(.o3-paa) .sam-bord-221{position:absolute;width:384px;max-width:none;margin:0;z-index:5;transform-origin:206px 326px;grid-row:auto!important;grid-column:auto;align-self:auto!important;order:0}
body.sam-221 #view-record:not(.kompakt):not(.o3-paa) #rec-button,
body.sam-221 #view-record:not(.kompakt):not(.o3-paa) .sam-valg,
body.sam-221 #view-record:not(.kompakt):not(.o3-paa) #kilde-linje,
body.sam-221 #view-record:not(.kompakt):not(.o3-paa) #opt-rul{visibility:hidden}
body.sam-221 #view-record:not(.kompakt):not(.o3-paa) #sam-qr,
body.sam-221 #view-record:not(.kompakt):not(.o3-paa) #sam-under{display:none!important}