/* =====================================================================
   SAMTYKKE · FORLØBET FOR DELTAGEREN (samtykke-flow.js) - handoff 199-204 efter designguiden 209 (24/10)
   Kun roller (--m-*). Byggesten fra 209: kort (.mk-kort), knap (.mk-btn 52/56 px), mærke/chip, felt (48 px), papir,
   besked (.mk-toast). Typografi fra 209: t-1 28 px overskrift (hudens overskrift-skrift), brødtekst 15, lille 13, kicker 11.
   Afstande i trin: 4 · 8 · 12 · 16 · 20 · 24 · 32. Slet mødet = sletter lyd → --m-rec (guiden: rød = optagelse og det,
   der sletter den). Klasser sy-.
   ===================================================================== */
.sf{display:flex;flex-direction:column;gap:16px;color:var(--m-text);font-family:var(--m-font-body,inherit)}
.sy-kicker{font:700 11px/1.2 var(--m-font-body,inherit);letter-spacing:.12em;text-transform:uppercase;color:var(--m-muted)}
.sy-h{margin:-8px 0 0;font-family:var(--m-font-head,inherit);font-weight:var(--m-head-weight,600);text-transform:var(--m-head-case,none);font-size:28px;line-height:1.1;
  letter-spacing:-.005em;text-wrap:balance}
.sy-tekst{margin:0;font-size:15px;line-height:1.5;color:var(--m-muted);max-width:42ch}
.sy-lille{margin:0;font-size:13px;line-height:1.4;color:var(--m-muted)}
.sy-k2{margin:0;font:700 13px/1.3 var(--m-font-body,inherit);color:var(--m-text)}
.sy-fejl{margin:0;font-size:13px;color:var(--m-wait)}
.sy-raekke{display:flex;flex-wrap:wrap;gap:8px}

/* felter (209 · 8): 48 px, i brug 2 px accent */
.sy-felt{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--m-muted)}
.sy-felt i{font-style:normal;color:var(--m-faint)}
.sy-felt input{box-sizing:border-box;height:48px;padding:0 14px;border:1.5px solid var(--m-line);border-radius:var(--radius,0);background:var(--m-field);
  font:400 16px/1 var(--m-font-body,inherit);color:var(--m-text);outline:none}
.sy-felt input:focus{border:2px solid var(--m-accent);background:var(--m-surface);padding:0 13.5px}

/* knapper (209 · 2): primær = --m-ink; sekundær; farlig = kant i --m-rec; 56 px hovedknap */
.sy-btn{box-sizing:border-box;min-height:56px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;
  border-radius:var(--m-radius-btn,0);font:700 15px/1 var(--m-font-body,inherit);cursor:pointer;transition:background 150ms,opacity 150ms,filter 150ms,transform 150ms}
.sy-btn:active{filter:brightness(.88);transform:scale(.98)}
.sy-btn[disabled]{opacity:.4;cursor:default;filter:none;transform:none}
.sy-btn.p{background:var(--m-ink);color:var(--m-ink-fg);width:100%}
.sy-btn.s{background:var(--m-surface);color:var(--m-accent);border-color:var(--m-accent)}
.sy-btn.f{background:transparent;color:var(--m-rec);border-color:var(--m-rec)}
.sy-btn.fyldt-slet{background:var(--m-rec);color:var(--m-ink-fg);width:100%}
.sy-link{background:none;border:0;padding:8px 0;font:700 13px/1.2 var(--m-font-body,inherit);color:var(--m-accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sy-bund{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:4px}

/* på listen (199-204 §1.2): rød prik, der pulserer, mens der optages */
.sy-liste{display:flex;gap:12px;align-items:flex-start}
.sy-liste .sy-h{margin:0 0 8px}
.sy-prik{flex:none;width:12px;height:12px;margin-top:10px;border-radius:50%;box-sizing:border-box;border:2px solid var(--m-paused)}
.sy-prik.paa{border:0;background:var(--m-rec);animation:sy-puls 1s infinite}
.sy-slet{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid var(--m-line-soft)}

/* valgkortene (199-204 §3 → 209 kort): radio 20 px, valgt = --m-tint + 2 px --m-ink */
.sy-valg{display:flex;flex-direction:column;gap:8px}
.sy-vk{-webkit-appearance:none;appearance:none;box-sizing:border-box;display:flex;gap:12px;align-items:flex-start;width:100%;margin:0;padding:12px 14px;text-align:left;cursor:pointer;
  background:var(--m-surface);border:1px solid var(--m-line);border-radius:var(--radius,0);color:var(--m-text);font:inherit;transition:background 150ms,border-color 150ms}
.sy-vk.valgt{background:var(--m-tint);border:2px solid var(--m-ink);padding:11px 13px}
.sy-vk.slet{margin-top:12px}
.sy-vk.slet .sy-vk-t b{color:var(--m-rec)}
.sy-vk.slet.valgt{background:color-mix(in srgb,var(--m-rec) 9%,var(--m-surface));border-color:var(--m-rec)}
.sy-radio{flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;box-sizing:border-box;border:1.5px solid var(--m-muted);transition:border 150ms}
.sy-vk.valgt .sy-radio{border:6px solid var(--m-ink)}
.sy-vk.slet .sy-radio{border-color:var(--m-rec)}
.sy-vk-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.sy-vk-t b{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:16px;font-weight:700;line-height:1.25}
.sy-vk-t > span{font-size:13px;line-height:1.4;color:var(--m-muted)}
/* mærker (209 · 7): "gælder alle" = --m-ink · "kun dig" / Margins gæt = --m-tint + --m-accent */
.sy-maerke{display:inline-flex;align-items:center;height:20px;padding:0 7px;font:700 11px/1 var(--m-font-body,inherit);white-space:nowrap;border-radius:var(--m-radius-btn,0)}
.sy-maerke.alle{background:var(--m-ink);color:var(--m-ink-fg)}
.sy-maerke.dig{background:var(--m-tint);color:var(--m-accent)}
.sy-vk.valgt .sy-maerke.dig{background:var(--m-surface)}   /* på det valgte kort (som selv er --m-tint) */
.sy-maerke.anden{background:transparent;color:var(--m-muted);padding:0}
.sy-spg{display:flex;flex-direction:column;gap:12px;padding:14px;border:1.5px solid var(--m-rec);border-radius:var(--radius,0);background:color-mix(in srgb,var(--m-rec) 6%,var(--m-surface))}
.sy-spg p{margin:0;font-size:14px;line-height:1.5}
.sy-spg .sy-btn{flex:1}

/* find din stemme (199-204 §4) */
.sy-stemmer{display:flex;flex-direction:column;gap:8px}
.sy-stemme{display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:var(--m-surface);border:1px solid var(--m-line);border-radius:var(--radius,0)}
.sy-stemme.valgt{border:2px solid var(--m-ink);padding:11px 13px}
/* 202a: mærket øverst - nødvendigt (--m-wait) eller valgfrit (--m-accent) · niveauet */
.sy-behov{align-self:flex-start;display:inline-flex;align-items:center;min-height:26px;padding:0 9px;font:700 12px/1 var(--m-font-body,inherit);color:var(--m-ink-fg);background:var(--m-accent)}
.sy-behov.noedv{background:var(--m-wait)}
/* 202a: lyt (36 px) · lydkurve (24 streger) · tid; nederst "Taler N · X replikker" og Det er mig */
.sy-st-top{display:flex;align-items:center;gap:10px}
.sy-lyt{flex:none;width:36px;height:36px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:var(--m-tint);color:var(--m-accent);transition:background 150ms}
.sy-lyt svg{width:16px;height:16px;fill:currentColor}
.sy-lyt.paa{background:var(--m-accent);color:var(--m-ink-fg)}
.sy-kurve{flex:1;display:flex;align-items:center;gap:2px;height:24px}
.sy-kurve i{flex:1;border-radius:1px;background:var(--m-line);transition:background 150ms}
.sy-kurve.paa i{background:var(--m-accent)}
.sy-st-top .sy-tid{font:500 12px/1 var(--m-font-num,ui-monospace);color:var(--m-muted)}
.sy-st-bund{display:flex;align-items:center;gap:8px}
.sy-st-meta{flex:1;font-size:12px;line-height:1.3;color:var(--m-muted)}
.sy-ingen{align-self:center;text-decoration:none;font-weight:400;font-size:14px;min-height:44px}
/* 202a trin 2: "Er det dig?" - to sætninger mere, kant 2 px --m-ink */
.sy-tjek{padding:14px;background:var(--m-surface);border:2px solid var(--m-ink);border-radius:var(--radius,0)}
.sy-tjek .sy-kicker{font-size:10px;margin-bottom:4px}
.sy-tjek-l{display:flex;gap:10px;margin:0;padding:10px 0;border-top:1px solid var(--m-line-soft)}
.sy-tjek-l .sy-tid{width:38px;flex:none;font:500 12px/1.6 var(--m-font-num,ui-monospace);color:var(--m-muted)}
.sy-tjek-l .sy-citat{flex:1;font-size:15px}
.sy-tjek-knap .sy-btn{flex:1}
.sy-citat{margin:0;font:400 16px/1.45 var(--m-font-paper,Georgia,serif);color:var(--m-text)}
.sy-detmig{min-height:40px;padding:0 14px;border:0;border-radius:var(--m-radius-btn,0);background:var(--m-ink);color:var(--m-ink-fg);
  font:700 14px/1 var(--m-font-body,inherit);cursor:pointer;transition:filter 150ms,transform 150ms}
.sy-detmig:active{filter:brightness(.88);transform:scale(.98)}

/* "Se et eksempel" (204b): en fold under valgkortene */
.sy-eks{display:flex;flex-direction:column;gap:8px}
.sy-eks summary{cursor:pointer;font:700 14px/1.3 var(--m-font-body,inherit);color:var(--m-accent);padding:4px 0}
.sy-eks[open] summary{margin-bottom:8px}
.sy-eks > .sy-lille{margin-bottom:8px}

/* den fælles side (199-204 §5 / 203b) */
.sy-tak{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sy-tak p{margin:0;font-size:15px}
.sy-taeller{display:flex;flex-direction:column;gap:8px;padding:14px;border:1.5px solid var(--m-ink);border-radius:var(--radius,0);background:var(--m-surface)}
.sy-taeller b{font-size:18px;font-variant-numeric:tabular-nums}
.sy-felter{display:flex;gap:4px}
.sy-felter i{width:10px;height:10px;background:var(--m-line)}
.sy-felter i.valgt{background:var(--m-ink)}
.sy-felter i.slet{background:var(--m-rec)}
.sy-taeller p{margin:0;font-size:13px;line-height:1.4;color:var(--m-muted)}
.sy-laast{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1.5px dashed var(--m-faint);border-radius:var(--radius,0)}
.sy-laast svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--m-muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sy-laast p{margin:0;font-size:14px;line-height:1.5;color:var(--m-muted)}
.sy-slettet{padding:14px;border:1.5px solid var(--m-rec);border-radius:var(--radius,0);background:color-mix(in srgb,var(--m-rec) 8%,var(--m-surface));font-size:14px;line-height:1.5}
/* kvitteringen "Det, Margin gemmer" (199-204 §6) */
.sy-kvit{display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--m-surface);border:1px solid var(--m-line);border-radius:var(--radius,0)}
.sy-kvit dl{margin:0;display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:8px 12px;font-size:13px;line-height:1.4}
.sy-kvit dt{color:var(--m-muted)}
.sy-kvit dd{margin:0;color:var(--m-text)}
/* referatet på papir (199-204 §7): --m-paper på --m-field, hudens papir-skrift 16/1.55 */
.sy-papirbag{padding:16px;background:var(--m-field);border-radius:var(--radius,0)}
.sy-papir{padding:20px 22px;background:var(--m-paper);color:var(--m-paper-text);font:400 16px/1.55 var(--m-font-paper,Georgia,serif);
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 18px rgba(0,0,0,.06)}
.sy-papir p{margin:0 0 10px}
.sy-papir h3{margin:16px 0 6px;font:700 11px/1.2 var(--m-font-body,inherit);letter-spacing:.12em;text-transform:uppercase;color:var(--m-paper-muted)}
.sy-pkick{margin:0 0 12px;font:700 11px/1.2 var(--m-font-body,inherit);letter-spacing:.12em;text-transform:uppercase;color:var(--m-paper-muted)}
.sy-note{font-style:italic;color:var(--m-paper-muted)}
.sy-tr{display:flex;gap:10px;font-size:15px}
/* et slettet felt er et hul der, hvor det var - aldrig hvem (Robin 24/10) */
.sy-tr.sy-hul{margin:8px 0;padding:6px 0;border-top:1px dashed var(--m-paper-line);border-bottom:1px dashed var(--m-paper-line);font-size:13px;font-style:italic;color:var(--m-paper-muted)}
.sy-tid{flex:none;font:500 12px/1.9 var(--m-font-num,ui-monospace);color:var(--m-paper-muted)}

/* beskeden (209 · 5) ligger fast nederst */
.sy-besked{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:240;max-width:calc(100% - 32px)}
/* prøveværktøjet - kun lokalt */
.sy-proeve{margin-top:16px;padding:10px 12px;border:1.5px dashed var(--m-line);font-size:13px;color:var(--m-muted)}
.sy-proeve summary{cursor:pointer;font-weight:700}
.sy-proeve p{margin:8px 0 0}

@keyframes sy-puls{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.sy-prik.paa{animation:none}.sy-btn,.sy-vk,.sy-detmig{transition:none}}