/* ============================================================
   "SLIK FUNKER DET" - scroll-drevet gjennomgang av booking
   og adminsiden.

   Selvstendig blokk. Krever kun at vertssiden definerer de
   vanlige designtokenene (--bg, --card, --ink, --muted,
   --accent, --accent-2, --accent-soft, --line, --ease,
   --shadow-sm) og fontene Inter + Space Grotesk.
   Ingen nye farger eller fonter innfoeres her: frisoerfargene
   under er de samme fire verdiene som allerede brukes i
   "Se det i praksis"-mockupene.

   Alt som beveger seg animerer kun transform og opacity.
   Uten JS faller seksjonen tilbake til vanlige tekstkapitler.
   ============================================================ */

/* ---------- Rammeverk: layout og sticky ---------- */
.sfd-layout{display:block}
.sfd-visual{display:none}

/* Mockupkolonnen maa strekke seg over hele raden (default align-items:stretch),
   ellers har sticky-elementet ingen hoeyde aa kleve langs og scroller bort. */
.sfd.is-enhanced .sfd-layout{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(26px,4.5vw,60px)}
.sfd.is-enhanced .sfd-visual{display:block}
.sfd.is-enhanced .sfd-sticky{position:-webkit-sticky;position:sticky;top:96px;z-index:2}

/* ---------- Scenen: begge enhetene deler samme flate ---------- */
.sfd-stage{position:relative;height:clamp(410px,62svh,580px)}
.sfd-device{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:scale(.965) translateY(10px);
  transition:opacity .42s var(--ease),transform .52s var(--ease),visibility 0s linear .42s}
.sfd-device.is-on{opacity:1;visibility:visible;transform:none;
  transition:opacity .42s var(--ease),transform .52s var(--ease),visibility 0s}

/* ---------- Telefonramme (kundestegene) ---------- */
.sfd-phone{position:relative;height:100%;aspect-ratio:10/19.6;max-width:100%;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:36px;padding:9px;
  box-shadow:0 34px 74px -26px rgba(31,93,67,.36),0 2px 6px rgba(22,32,27,.06)}
.sfd-phone::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:74px;height:5px;border-radius:3px;background:var(--line);z-index:3}
.sfd-phone-screen{position:relative;flex:1;min-height:0;border-radius:28px;overflow:hidden;
  background:var(--bg);border:1px solid var(--line);display:flex;flex-direction:column}
/* Flaten skjermene ligger absolutt plassert oppe i */
.sfd-screens{position:relative;flex:1;min-height:0}
.sfd-phone-top{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:16px 16px 9px;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.sfd-phone-top b{font-weight:600;color:var(--ink)}

/* ---------- Laptop-/browserramme (adminstegene) ---------- */
.sfd-desk{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center}
.sfd-browser{width:100%;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);
  box-shadow:0 26px 58px -24px rgba(31,93,67,.30),0 2px 6px rgba(22,32,27,.05)}
.sfd-browser-bar{display:flex;flex-shrink:0;align-items:center;gap:7px;padding:10px 13px;background:rgba(0,0,0,.025);border-bottom:1px solid var(--line)}
.sfd-browser-bar i{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.sfd-browser-bar i:nth-child(1){background:#e5786a}
.sfd-browser-bar i:nth-child(2){background:#e6b84f}
.sfd-browser-bar i:nth-child(3){background:#7bb37e}
.sfd-browser-url{margin-left:8px;flex:1;min-width:0;font-size:.68rem;color:var(--muted);background:var(--bg);
  border:1px solid var(--line);border-radius:7px;padding:4px 11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sfd-browser-body{position:relative;height:clamp(300px,42svh,404px);display:flex;flex-direction:column}
.sfd-laptop-foot{width:112%;max-width:none;height:11px;flex-shrink:0;border-radius:0 0 13px 13px;
  background:linear-gradient(180deg,var(--bg),var(--card));border:1px solid var(--line);border-top:none}
.sfd-laptop-foot::after{content:"";display:block;width:64px;height:3px;margin:3px auto 0;border-radius:2px;background:var(--line)}

/* ---------- Skjermer inne i rammene ---------- */
.sfd-screen{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:14px 15px 18px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);
  transition:opacity .34s var(--ease),transform .4s var(--ease),visibility 0s linear .34s}
.sfd-screen.is-on{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .34s var(--ease),transform .4s var(--ease),visibility 0s}
.sfd-phone .sfd-screen{padding-top:0}
/* Dagsoversikten scroller i sin egen kalenderboks, ikke i skjermen.
   Kalenderen tar den hoeyden som er igjen, saa overskrift, tegnforklaring
   og hint alltid faar plass uansett skjermhoeyde. */
.sfd-screen--flush{overflow:hidden;display:flex;flex-direction:column}
.sfd-cal-wrap{flex:1;min-height:0;display:flex}

.sfd-h{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.02rem;line-height:1.2;margin-bottom:2px;color:var(--ink)}
.sfd-sub{color:var(--muted);font-size:.76rem;line-height:1.45;margin-bottom:14px}
.sfd-label{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:0 0 9px}

/* ---------- Generisk valgknapp ---------- */
.sfd-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;
  transition:transform .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease)}
.sfd-opt:hover{border-color:var(--accent-2);transform:translateY(-1px)}
.sfd-opt:active{transform:translateY(0) scale(.99)}
.sfd-opt.is-sel{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.sfd-opt-main{display:block;flex:1;min-width:0}
.sfd-opt-name{display:block;font-size:.82rem;font-weight:600;line-height:1.25}
.sfd-opt-meta{display:block;font-size:.75rem;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.sfd-opt-price{font-size:.78rem;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.sfd-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}

/* Rund merkelapp med initial eller hake */
.sfd-av{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;color:#fff;background:var(--sfd-c,var(--accent));font-family:'Space Grotesk',sans-serif}
.sfd-av.is-any{background:var(--accent-soft);color:var(--accent);border:1px dashed var(--accent)}
.sfd-tick{width:18px;height:18px;border-radius:50%;flex-shrink:0;background:var(--accent);color:#fff;
  display:none;align-items:center;justify-content:center}
.sfd-opt.is-sel .sfd-tick{display:flex}
.sfd-tick svg{width:10px;height:10px}

/* Frisoerfarger: samme fire verdier som i "Se det i praksis" */
.sfd-c-mari{--sfd-c:#1f5d43;--sfd-cbg:#e6efe9}
.sfd-c-jonas{--sfd-c:#9e4225;--sfd-cbg:#f4e5dd}
.sfd-c-sara{--sfd-c:#345872;--sfd-cbg:#e3ebf1}
.sfd-c-erik{--sfd-c:#8a6a2e;--sfd-cbg:#f1ead7}

/* ---------- Dato og tid ---------- */
.sfd-days{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:16px}
.sfd-day{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;font:inherit;cursor:pointer;
  border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);
  transition:transform .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease)}
.sfd-day .dow{font-size:.56rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.sfd-day .num{font-size:.86rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.sfd-day:hover:not(:disabled){border-color:var(--accent-2);transform:translateY(-1px)}
.sfd-day.is-sel{background:var(--accent);border-color:var(--accent);color:#fff}
.sfd-day.is-sel .dow{color:rgba(255,255,255,.8)}
.sfd-day:disabled{cursor:not-allowed;opacity:.42;background:transparent;border-style:dashed}
.sfd-day:disabled .num{text-decoration:line-through}

.sfd-times{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.sfd-time{padding:9px 0;font:inherit;font-size:.76rem;font-weight:500;font-variant-numeric:tabular-nums;cursor:pointer;
  border:1px solid var(--accent);border-radius:9px;background:var(--card);color:var(--accent);
  transition:transform .22s var(--ease),background .22s var(--ease),color .22s var(--ease)}
.sfd-time:hover:not(:disabled){transform:translateY(-1px);background:var(--accent-soft)}
.sfd-time.is-sel{background:var(--accent);color:#fff;font-weight:600}
.sfd-time:disabled{cursor:not-allowed;border-color:var(--line);color:var(--muted);background:transparent;text-decoration:line-through}
.sfd-empty{font-size:.72rem;color:var(--muted);padding:14px 0;line-height:1.5}

/* ---------- Skjema og kvittering ---------- */
.sfd-field{margin-bottom:11px}
.sfd-field label{display:block;font-size:.66rem;font-weight:600;color:var(--muted);margin-bottom:4px}
.sfd-field input{width:100%;font:inherit;font-size:.8rem;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;transition:border-color .2s var(--ease)}
.sfd-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,93,67,.12)}
.sfd-summary{background:var(--accent-soft);border:1px solid rgba(31,93,67,.14);border-radius:12px;padding:11px 13px;margin-bottom:13px}
.sfd-row{display:flex;justify-content:space-between;gap:12px;font-size:.74rem;padding:3px 0}
.sfd-row span{color:var(--muted)}
.sfd-row b{font-weight:600;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.sfd-cta{display:block;width:100%;font:inherit;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.86rem;
  padding:12px 0;border:none;border-radius:11px;background:var(--accent);color:#fff;cursor:pointer;
  box-shadow:0 8px 18px rgba(31,93,67,.20);transition:transform .22s var(--ease),background .22s var(--ease)}
.sfd-cta:hover{background:#164733;transform:translateY(-2px)}
.sfd-cta:active{transform:translateY(0) scale(.985)}
.sfd-cta.is-ghost{background:transparent;color:var(--accent);border:1px solid var(--line);box-shadow:none;font-size:.78rem;padding:9px 0}
.sfd-cta.is-ghost:hover{background:var(--accent-soft);border-color:var(--accent)}

.sfd-panel{display:none}
.sfd-panel.is-on{display:block}
.sfd-receipt{text-align:center;padding-top:6px}
.sfd-seal{width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;margin:0 auto 13px;
  display:flex;align-items:center;justify-content:center}
.sfd-seal svg{width:26px;height:26px}
.sfd-receipt .sfd-summary{text-align:left;margin-top:13px}
.sfd-note{font-size:.68rem;color:var(--muted);line-height:1.5;margin-top:11px}

/* ---------- Adminkalender (dagsoversikt) ---------- */
.sfd-admin-head{display:flex;flex-shrink:0;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:11px}
.sfd-cal{--sfd-slot:30px;flex:1;min-height:0;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--card)}
.sfd-cal-head{display:grid;flex-shrink:0;background:var(--bg);border-bottom:1px solid var(--line)}
.sfd-cal-head span{padding:6px 3px;text-align:center;font-size:.62rem;font-weight:600;color:var(--ink);border-left:1px solid var(--line)}
.sfd-cal-head span:first-child{border-left:none}
.sfd-cal-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.sfd-cal-body{display:grid;position:relative}
.sfd-cal-times{display:flex;flex-direction:column}
.sfd-cal-times i{height:var(--sfd-slot);font-size:.56rem;font-style:normal;color:var(--muted);
  display:flex;justify-content:flex-end;padding:2px 5px 0 0;font-variant-numeric:tabular-nums}
.sfd-cal-col{position:relative;border-left:1px solid var(--line)}
.sfd-cal-col u{display:block;height:var(--sfd-slot);border-bottom:1px solid var(--line);text-decoration:none}
.sfd-cal-col u.is-closed{background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(92,102,96,.07) 5px 10px)}

.sfd-bk{position:absolute;left:3px;right:3px;border-radius:7px;padding:3px 6px;overflow:hidden;text-align:left;
  font:inherit;cursor:pointer;border:none;border-left:3px solid var(--sfd-c);background:var(--sfd-cbg);
  transition:transform .22s var(--ease)}
.sfd-bk:hover{transform:translateX(1px)}
.sfd-bk .n{display:block;font-size:.63rem;font-weight:600;color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sfd-bk .s{display:block;font-size:.57rem;color:var(--muted);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sfd-bk.is-sel{box-shadow:0 0 0 2px var(--accent)}
.sfd-pause{position:absolute;left:3px;right:3px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:.55rem;color:var(--muted);border:1px dashed var(--line);
  background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(92,102,96,.08) 4px 8px)}
.sfd-bk.is-mine{box-shadow:0 0 0 1.5px var(--accent)}

/* Ankomst: den nye bookingen glir inn og blinker rolig to ganger */
.sfd-bk.is-arriving{animation:sfdArrive .5s var(--ease) both}
.sfd-bk.is-arriving::after{content:"";position:absolute;inset:-3px;border-radius:9px;box-shadow:0 0 0 2px var(--accent);
  opacity:0;pointer-events:none;animation:sfdPing 1.5s var(--ease) .35s 2}
@keyframes sfdArrive{from{opacity:0;transform:translateY(-12px) scale(.94)}to{opacity:1;transform:none}}
@keyframes sfdPing{0%{opacity:0}35%{opacity:1}100%{opacity:0}}

.sfd-legend{display:flex;flex-shrink:0;flex-wrap:wrap;gap:11px;margin-top:11px}
.sfd-leg{display:flex;align-items:center;gap:6px;font-size:.68rem;color:var(--muted)}
.sfd-leg i{width:12px;height:12px;border-radius:4px;border-left:3px solid var(--sfd-c);background:var(--sfd-cbg)}

/* Detaljkort som glir inn fra hoeyre */
.sfd-detail{position:absolute;right:0;top:0;bottom:0;width:min(238px,74%);z-index:4;
  background:var(--card);border-left:1px solid var(--line);padding:15px;overflow-y:auto;overscroll-behavior:contain;
  box-shadow:-16px 0 34px -22px rgba(22,32,27,.4);
  transform:translateX(101%);opacity:0;visibility:hidden;
  transition:transform .38s var(--ease),opacity .3s var(--ease),visibility 0s linear .38s}
.sfd-detail.is-on{transform:none;opacity:1;visibility:visible;
  transition:transform .38s var(--ease),opacity .3s var(--ease),visibility 0s}
.sfd-detail-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:11px}
.sfd-x{position:relative;width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--muted);
  font:inherit;line-height:1;cursor:pointer;transition:transform .2s var(--ease),color .2s var(--ease)}
/* Usynlig 44x44 trykkflate rundt den 26px store lukkeknappen */
.sfd-x::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px}
.sfd-x svg{width:12px;height:12px}
.sfd-x:hover{color:var(--ink);transform:scale(1.06)}
.sfd-badge{display:inline-block;font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border:1px solid rgba(31,93,67,.16);border-radius:100px;padding:2px 9px;margin-bottom:7px}
.sfd-hint{display:flex;flex-shrink:0;align-items:center;gap:7px;font-size:.68rem;color:var(--muted);margin-top:10px}
.sfd-hint svg{width:13px;height:13px;flex-shrink:0;color:var(--accent)}

/* ---------- Arbeidsplan ---------- */
.sfd-plan{width:100%;border-collapse:collapse;font-size:.66rem;font-variant-numeric:tabular-nums}
.sfd-plan th{font-weight:600;color:var(--muted);text-transform:uppercase;font-size:.56rem;letter-spacing:.05em;
  padding:6px 2px;text-align:center;border-bottom:1px solid var(--line)}
.sfd-plan th:first-child{text-align:left}
.sfd-plan td{padding:4px 2px;text-align:center;border-bottom:1px solid var(--line)}
.sfd-plan tr:last-child td{border-bottom:none}
.sfd-plan-name{text-align:left!important;white-space:nowrap}
.sfd-plan-name span{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
.sfd-plan-name i{width:9px;height:9px;border-radius:2px;background:var(--sfd-c);flex-shrink:0}
.sfd-shift{width:100%;font:inherit;font-size:.64rem;font-variant-numeric:tabular-nums;color:var(--ink);cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:5px 2px;
  transition:transform .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.sfd-shift:hover{border-color:var(--accent);transform:translateY(-1px)}
.sfd-shift.is-off{color:var(--muted);background:transparent;border-style:dashed;opacity:.7}
.sfd-break{font:inherit;font-size:.62rem;color:var(--ink);cursor:pointer;background:var(--bg);
  border:1px solid var(--line);border-radius:100px;padding:4px 10px;white-space:nowrap;
  transition:transform .2s var(--ease),border-color .2s var(--ease)}
.sfd-break:hover{border-color:var(--accent);transform:translateY(-1px)}
.sfd-break.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.sfd-plan-foot{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.sfd-count{font-size:.74rem;color:var(--ink);line-height:1.5}
.sfd-count b{font-family:'Space Grotesk',sans-serif;color:var(--accent);font-size:1.02rem}
.sfd-warn{display:flex;align-items:flex-start;gap:7px;font-size:.68rem;line-height:1.45;color:var(--ink);
  background:#f4e5dd;border:1px solid rgba(158,66,37,.2);border-radius:9px;padding:8px 10px;margin-top:9px}
.sfd-warn svg{width:13px;height:13px;flex-shrink:0;margin-top:2px;color:#9e4225}

/* ---------- Scroll-hint ---------- */
.sfd-scroll-hint{list-style:none;text-align:center;padding:0;margin:0;display:none}
.sfd.is-enhanced .sfd-scroll-hint{display:block}
.sfd-scroll-hint-text{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-weight:600}
.sfd-scroll-arrow{color:var(--muted);animation:sfdBounce 2s ease-in-out infinite;display:inline-block}
@keyframes sfdBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){.sfd-scroll-arrow{animation:none}}

/* ---------- Tekstkapitler ---------- */
.sfd-chapters{list-style:none;margin:0;padding:0}
.sfd-chapter{padding:26px 0}
.sfd-chapter-in{position:relative;padding-left:22px;max-width:48ch}
.sfd-chapter-in::before{content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:2px;border-radius:2px;
  background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.sfd-kicker{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;
  margin-bottom:11px;font-variant-numeric:tabular-nums}
.sfd-chapter h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(1.45rem,2.5vw,1.95rem);
  line-height:1.14;letter-spacing:-.02em;margin-bottom:13px;color:var(--ink)}
.sfd-chapter p{color:var(--muted);font-size:1.02rem;line-height:1.65}
.sfd-chapter p+p{margin-top:12px}
.sfd-chapter--turn .sfd-chapter h3,.sfd-chapter--turn h3{font-size:clamp(1.6rem,2.9vw,2.2rem)}
.sfd-chapter--turn .sfd-kicker{color:var(--muted)}

.sfd.is-enhanced .sfd-chapter{min-height:72svh;display:flex;flex-direction:column;justify-content:center;padding:5vh 0}
/* Inaktive kapitler dimmes med farge i stedet for opacity. Opacity .62 ga
   2,5:1 kontrast paa broedteksten. --dim-body er maalt til 4,6:1 (normal
   tekst), --dim-head til 3,3:1 (stor tekst: h3 er 23px+ i vekt 600). */
.sfd.is-enhanced .sfd-chapter .sfd-kicker{color:var(--dim-body,#666f69);transition:color .45s var(--ease)}
.sfd.is-enhanced .sfd-chapter h3{color:var(--dim-head,#7f8681);transition:color .45s var(--ease)}
.sfd.is-enhanced .sfd-chapter p{color:var(--dim-body,#666f69);transition:color .45s var(--ease)}
.sfd.is-enhanced .sfd-chapter.is-active .sfd-kicker{color:var(--accent)}
.sfd.is-enhanced .sfd-chapter.is-active h3{color:var(--ink)}
.sfd.is-enhanced .sfd-chapter.is-active p{color:var(--muted)}
/* Vendepunktet beholder den dempede kickeren ogsaa naar det er aktivt */
.sfd.is-enhanced .sfd-chapter--turn.is-active .sfd-kicker{color:var(--muted)}
.sfd.is-enhanced .sfd-chapter.is-active .sfd-chapter-in::before{transform:scaleY(1)}

/* ---------- Stegindikator ---------- */
.sfd-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;list-style:none;margin:16px 0 0;padding:0}
.sfd-dots li{display:flex}
.sfd-dot{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font:inherit;font-size:.72rem;
  font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;color:var(--muted);background:transparent;
  border:1px solid var(--line);border-radius:50%;
  transition:transform .25s var(--ease),color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)}
/* Usynlig trykkflate paa 44px hoeyde. Utseendet er uendret. Bredden
   utvides foerst paa smal skjerm, der avstanden mellom prikkene ogsaa
   oekes, saa flatene aldri overlapper hverandre. */
.sfd-dot::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:44px}
.sfd-dot:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.sfd-dot[aria-current="step"]{background:var(--accent);border-color:var(--accent);color:#fff}
.sfd-dot.is-done{border-color:var(--accent-2);color:var(--accent)}

/* Fokusmarkering i tråd med resten av siden */
.sfd button:focus-visible,.sfd input:focus-visible,.sfd a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}

/* ---------- Responsiv: mockup sticky oeverst, tekst under ---------- */
@media(max-width:880px){
  /* Blokkoppsett: da er .sfd-visual et direkte barn av den hoeye .sfd-layout,
     og maa selv vaere sticky. Et indre element ville bare kunne kleve
     innenfor sin egen korte grid-rad. */
  .sfd.is-enhanced .sfd-layout{display:block}
  .sfd.is-enhanced .sfd-sticky{position:static;top:auto}
  /* 68px klarerer navbaren, som er 60px naar den er krympet. Med 56px laa
     toppen av mockupen permanent bak den halvtransparente baren. */
  .sfd.is-enhanced .sfd-visual{position:-webkit-sticky;position:sticky;top:68px;z-index:2;
    padding:10px 0 12px;background:var(--bg);box-shadow:0 14px 22px -20px rgba(22,32,27,.55)}

  /* ---------- Mockupen dimensjoneres etter bredde, ikke hoeyde ----------
     Foer styrte scenehoeyden alt: aspect-ratio 10/19.6 ga en telefon paa
     ca. 139px bredde (uleselig), og .sfd-browser-body hadde en min-hoeyde
     paa 300px som var hoeyere enn selve scenen, saa laptoprammen rant ut
     over stegprikkene. Naa faar telefonen fast bredde, og laptopen fyller
     scenen via flex, saa ingenting kan flyte over. */
  .sfd-stage{height:min(50svh,400px)}
  .sfd-phone{aspect-ratio:auto;width:min(72vw,260px);height:100%}
  .sfd-desk{height:100%;max-width:100%}
  .sfd-browser{display:flex;flex-direction:column;flex:1;min-height:0}
  .sfd-browser-body{height:auto;flex:1;min-height:0}

  .sfd-dots{gap:14px;margin-top:11px}
  .sfd-dot::after{width:44px}
  .sfd.is-enhanced .sfd-chapter{min-height:58svh;padding:4vh 0}
  .sfd-chapter p{font-size:.98rem}
  .sfd-detail{width:min(230px,82%)}

  /* Romsligere trykkflater i mockupen paa touch */
  .sfd-time{padding:12px 0}
  .sfd-day{padding:10px 0}
  .sfd-shift{padding:8px 2px}
  .sfd-break{padding:7px 12px}
  .sfd-opt{padding:12px}
}
@media(max-width:560px){
  .sfd-dot{width:32px;height:32px}
  .sfd-chapter-in{padding-left:16px}
}

/* ---------- Redusert bevegelse: direkte bytte, ingen glid ---------- */
@media(prefers-reduced-motion:reduce){
  .sfd *,.sfd *::before,.sfd *::after{animation:none!important;transition:none!important}
  .sfd-device,.sfd-screen,.sfd-detail{transform:none!important}
  .sfd .sfd-chapter-in::before{transform:scaleY(1)}
  .sfd-bk.is-arriving::after{display:none}
}