/* =====================================================================
   FORSIDE-PRØVEN (handoff 237b + 237c) - forside-proeve.js. Kun telefonen, kun i Bordet, kun med flaget.
   #view-record.fp-paa sættes af modulet, når prøven står. Så skjules startskærmens felt (.record-area: kortene, citatet,
   optageknappen, inkognito- og mikrofonlinjen) og fanerne - de lever videre og trykkes på af modulet.
   Header (Margin + ☰) og margenstregen (.ss-streg, z 9) bliver. Farver = roller (--m-*), form = Bordets --ss-*.
   Bordet-ringene om knappen er hudens egne (bordet.css .rec-button): #F6D9D6 · inkognito #E6E2F0.
   ===================================================================== */
#fp{display:none}

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

body:not(.sk-paa) #view-record.fp-paa > .record-area,
body:not(.sk-paa) #view-record.fp-paa .tabbar{display:none!important}

body:not(.sk-paa) #view-record.fp-paa #fp{display:block;position:fixed;left:0;right:0;top:var(--fp-top,82px);bottom:0;z-index:5;
  overflow:hidden;background:var(--m-bg);color:var(--m-text);font-family:var(--ss-body);
  padding-bottom:env(safe-area-inset-bottom);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  --fp-ring:#F6D9D6;--fp-ring-ink:#E6E2F0;--fp-ease:cubic-bezier(.2,.8,.2,1)}

/* --- nulstil knapper --- */
#fp button{-webkit-appearance:none;appearance:none;box-sizing:border-box;margin:0;border:0;background:none;color:inherit;
  font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
#fp button:focus-visible{outline:3px solid var(--ss-acc);outline-offset:2px}

/* --- fælles dele --- */
#fp .fp-kort{display:flex;flex-direction:column;width:100%;background:var(--m-surface);border:var(--ss-bd);border-radius:var(--ss-r);
  box-shadow:var(--ss-sh);overflow:hidden}
#fp .fp-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#fp .fp-u{display:block;font-size:12px;line-height:1.25;color:var(--m-muted)}
#fp .fp-acc{color:var(--ss-acc);font-weight:700}
#fp .fp-pil{color:var(--ss-acc);font-size:18px;flex:none}
#fp .fp-sq{width:14px;height:14px;flex:none;display:block;border-radius:var(--ss-sq)}
#fp .fp-kick{font:600 22px/1.1 Caveat,cursive;color:var(--ss-acc);transform:rotate(-1deg);transform-origin:0 50%;padding:2px 0 2px}
#fp .fp-nn{display:block;font-family:var(--ss-head);font-weight:var(--ss-hw);font-size:22px;line-height:1.1;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#fp .fp-lt{font-size:15px;font-weight:700;text-align:center}
#fp .fp-tom{font:600 21px/1.15 Caveat,cursive;color:var(--m-muted);padding:6px 2px;text-wrap:pretty}

/* optageknappen (begge forslag): 140 px (237b) / 136 px (237c), rød med Bordets lyserøde ring 14 px */
#fp .fp-knap{width:140px;height:140px;flex:none;border-radius:50%!important;background:var(--m-rec)!important;
  box-shadow:0 0 0 14px var(--fp-ring);touch-action:none;-webkit-touch-callout:none;
  transition:transform 160ms var(--fp-ease),background-color 200ms,box-shadow 200ms}
#fp .fp-knap.ink{background:var(--m-incognito)!important;box-shadow:0 0 0 14px var(--fp-ring-ink)}
#fp .fp-knap:active{transform:scale(.96)}

/* linjen med brief-ikonet (som startskærmens .ss-brief) */
#fp .fp-linje{flex-direction:row;align-items:center;gap:12px;min-height:60px;padding:0 16px}
#fp .fp-bk{width:38px;height:38px;flex:none;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;
  border:2px dashed var(--ss-acc);color:var(--ss-acc);font-size:13px}
#fp .fp-bt{display:block;font-size:15px;font-weight:700}

/* ================= 237b · Før · Nu · Efter ================= */
#fp .fp-faser{height:100%;display:flex;flex-direction:column}
#fp .fp-faner{flex:none;display:flex;gap:6px;padding:4px 16px 10px 38px}
#fp .fp-faner button{flex:1;min-height:44px;border-radius:var(--ss-br);background:var(--m-surface);color:var(--m-text);
  font:700 14px/1 var(--ss-body);text-align:center;transition:background-color 200ms,color 200ms}
#fp .fp-faner button[aria-selected="true"]{background:var(--m-text);color:var(--m-surface)}
#fp .fp-spor{flex:1;min-height:0;position:relative;overflow:hidden;touch-action:pan-y}
#fp .fp-baand{position:absolute;top:0;bottom:0;left:0;width:300%;display:flex;will-change:transform;
  transition:transform 320ms var(--fp-ease)}
#fp .fp-side{width:calc(100% / 3);height:100%;flex:none;box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;padding:10px 16px 24px 38px;display:flex;flex-direction:column;gap:10px}
#fp .fp-side::-webkit-scrollbar{display:none}
#fp .fp-side > *{flex:none}

/* Før */
#fp .fp-raekke{flex-direction:row;align-items:center}
#fp .fp-rk{flex:1;min-width:0;min-height:64px;display:flex;align-items:center;gap:12px;padding:0 4px 0 16px}
#fp .fp-rk.fp-ingen{flex-direction:row;padding:0 16px}
#fp .fp-rn{display:block;font-family:var(--ss-head);font-weight:var(--ss-hw);font-size:20px;line-height:1.1;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#fp .fp-tand{width:48px;min-height:64px;display:grid;place-items:center;font-size:18px;color:var(--m-muted)}
#fp .fp-dh{min-height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;
  font-family:var(--ss-head);font-weight:var(--ss-hw);font-size:18px;letter-spacing:-.02em}
#fp .fp-p{min-height:44px;display:flex;align-items:center;gap:12px;padding:0 16px;border-top:1px solid var(--m-line-soft);font-size:15px}
#fp .fp-pn{width:18px;flex:none;font-weight:700;color:var(--m-muted)}
#fp .fp-pn.fp-dato{width:52px;font-size:12px}
#fp .fp-pt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#fp .fp-mere{min-height:36px;display:flex;align-items:center;padding:0 16px;border-top:1px solid var(--m-line-soft);font-size:13px;color:var(--m-muted)}
#fp .fp-nyt{min-height:48px;display:flex;align-items:center;padding:0 16px;border-top:1px solid var(--m-line-soft);
  font-size:14px;font-weight:700;color:var(--ss-acc)}

/* Nu - knappen står 12 px til højre for midten (margenstregen), som startskærmens #rec-button */
#fp .fp-nu{align-items:center;justify-content:center;gap:20px;padding-left:24px}
#fp .fp-nh{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:100%;text-align:center}
#fp button.fp-nh{min-height:44px}
#fp .fp-sma{display:flex;align-items:center;gap:6px;margin-top:-6px;font-size:13px;color:var(--m-muted)}
#fp .fp-sma button{min-height:44px;padding:0 4px;font-size:13px;color:var(--m-muted)}
#fp .fp-sma button.paa{color:var(--m-incognito);font-weight:700}
#fp .fp-hint{margin-top:18px;font:600 19px/1.1 Caveat,cursive;color:var(--m-faint)}

/* Efter */
#fp .fp-sidst{gap:6px;padding:16px;text-align:left}
#fp .fp-st{font-family:var(--ss-head);font-weight:var(--ss-hw);font-size:20px;line-height:1.1;letter-spacing:-.02em}
#fp .fp-sl{font-size:13px}
#fp .fp-links{display:flex;gap:18px;padding:2px 4px}
#fp .fp-links button{min-height:44px;font-size:14px;font-weight:700;color:var(--ss-acc)}

/* ================= 237c · Hold knappen ================= */
#fp .fp-hold{position:relative;height:100%;--cx:calc(12px + 50%);--cy:46%}
#fp .fp-hh{position:absolute;left:24px;right:0;top:28px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 16px;z-index:2}
#fp button.fp-hh{left:24px;right:0;width:auto;min-height:44px;text-align:center}
#fp .fp-dim{position:absolute;inset:0;z-index:3;background:var(--m-bg);opacity:0;pointer-events:none;transition:opacity 180ms}
#fp .fp-hold.holder .fp-dim{opacity:.92}
#fp .fp-hold.tapvalg .fp-dim{pointer-events:auto}
#fp .fp-hold .fp-knap{position:absolute;z-index:6;left:calc(var(--cx) - 68px);top:calc(var(--cy) - 68px);width:136px;height:136px}
#fp .fp-hold.holder .fp-knap{transform:scale(.82)}
#fp .fp-blad{position:absolute;z-index:5;left:calc(var(--cx) + var(--dx));top:calc(var(--cy) + var(--dy));
  width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%!important;background:var(--m-surface)!important;color:var(--m-text);
  box-shadow:0 6px 18px rgba(24,34,46,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  text-align:center!important;opacity:0;transform:scale(.4);pointer-events:none;
  transition:opacity 160ms var(--fp-ease),transform 160ms var(--fp-ease),background-color 120ms,color 120ms}
#fp .fp-hold.holder .fp-blad{opacity:1;transform:none;transition-delay:calc(var(--i) * 25ms)}
#fp .fp-hold.tapvalg .fp-blad{pointer-events:auto}
#fp .fp-hold .fp-blad.over{background:var(--ss-acc)!important;color:var(--m-ink-fg);transform:scale(1.18);transition-delay:0ms}
#fp .fp-bi{font-size:18px;line-height:1}
#fp .fp-bn{font-size:11px;font-weight:700;line-height:1.1;max-width:60px}
#fp .fp-lbl{position:absolute;z-index:4;left:24px;right:0;top:calc(var(--cy) + 96px);display:flex;flex-direction:column;align-items:center;gap:4px}
#fp .fp-hold .fp-hint{margin-top:0;min-height:44px;font:600 20px/1.1 Caveat,cursive;color:var(--m-faint)}
#fp .fp-hold.holder .fp-hint{visibility:hidden}
#fp .fp-hbrief{position:absolute;z-index:7;left:38px;right:16px;width:auto;bottom:24px;flex-direction:row}

/* Alt i Margin - arket */
#fp .fp-bag{position:absolute;inset:0;z-index:20;background:rgba(24,34,46,.35);display:flex;align-items:flex-end}
#fp .fp-ark{width:100%;background:var(--m-surface);border-radius:28px 28px 0 0;padding:12px 0 calc(18px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;animation:fp-op 260ms var(--fp-ease) both}
#fp .fp-greb{align-self:center;width:40px;height:5px;border-radius:3px;background:var(--m-line)}
#fp .fp-ah{display:flex;align-items:center;padding:8px 6px 6px 24px;font-family:var(--ss-head);font-weight:var(--ss-hw);font-size:24px;letter-spacing:-.02em}
#fp .fp-ah span{flex:1}
#fp .fp-ah button{width:44px;height:44px;display:grid;place-items:center;font-size:18px;color:var(--ss-acc)}
#fp .fp-ar{min-height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-top:1px solid var(--m-line-soft);
  font-size:16px;font-weight:700}
#fp .fp-ar span{color:var(--ss-acc)}

}

@keyframes fp-op{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

@media (prefers-reduced-motion:reduce){
  #fp .fp-baand,#fp .fp-blad,#fp .fp-dim,#fp .fp-knap,#fp .fp-faner button{transition:none!important}
  #fp .fp-ark{animation:none}
}

/* v461 (Robin 28/10): lydkilden under knappen på begge forsider - som appens kildelinje (ikon · kilde · Skift) */
#fp .fp-kilde{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;max-width:100%;padding:0 8px;font-size:13px;color:var(--m-muted)}
#fp .fp-kilde .fp-ki{width:18px;height:18px;flex:none;display:block}
#fp .fp-kilde .fp-ki svg{width:18px;height:18px;display:block;fill:none;stroke:var(--m-muted);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#fp .fp-kilde .fp-kt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fp .fp-kilde .fp-ks{font-weight:700;color:var(--ss-acc,var(--m-accent))}
#fp .fp-nu .fp-kilde{margin-top:-10px}
#fp .fp-hold.holder .fp-kilde{visibility:hidden}

/* v461 (Robin 28/10: "man kan ikke trække baglæns"): siderne ruller selv lodret, og inde i dem gjaldt sporets pan-y ikke -
   telefonen tog det vandrette træk og afbrød det. Hver side siger nu selv pan-y. */
#fp .fp-side{touch-action:pan-y}