/* ============================================================
   PENSIA · TIL/FRA-KONTAKT  (/afbryder.css)

   Én fælles kontakt til ALT der slås til og fra: 2FA, booking,
   påmindelser, ugedage, auto-opdatering, synlighed. Udseendet er
   Apples: bred pille, hvid knap med blød skygge, farvet bane når
   den er slået til, og et lille "squish" mens man holder fingeren
   nede.

   Markup (label'en fanger klik, så hele kontakten er trykflade):

     <label class="sw"><input type="checkbox" id="…" aria-label="…"><span class="bane"></span></label>

   Størrelser: .sw (46x28) og .sw-lille (38x22, til lister og rækker
   med mange kontakter). Farverne styres af to variabler, så en mørk
   flade kan overstyre dem lokalt:

     --sw-til   banen når den er slået TIL   (default: teal, handling)
     --sw-fra   banen når den er slået FRA

   .bk-sw er det gamle navn fra booking-panelet og holdes i live, så
   eksisterende markup virker uændret. Brug .sw i nyt markup.

   BRUG DEN TIL: indstillinger man slår til og fra.
   BRUG DEN IKKE TIL: samtykke ("jeg accepterer"), udvalg af rækker,
   filtre eller registrering af et faktum (fx "ordningen har kursværn").
   Der er et flueben stadig det rigtige.
   ============================================================ */

.sw, .bk-sw {
  --sw-b: 46px;
  --sw-h: 28px;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--sw-b);
  height: var(--sw-h);
  vertical-align: middle;
}
.sw-lille { --sw-b: 38px; --sw-h: 22px; }

/* Selve afkrydsningsfeltet ligger usynligt oven på kontakten: det giver
   tastatur-fokus, korrekt semantik og en trykflade på hele pillen. */
.sw input, .bk-sw input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0;
  cursor: pointer; z-index: 2;
}

.sw .bane, .bk-sw .bane {
  position: absolute; inset: 0;
  border-radius: 99px;
  background: var(--sw-fra, #e3e5e8);
  box-shadow: inset 0 0 0 1px rgba(12, 34, 48, .06);
  transition: background .22s ease;
}
.sw .bane::before, .bk-sw .bane::before {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: calc(var(--sw-h) - 4px);
  height: calc(var(--sw-h) - 4px);
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(12, 34, 48, .22), 0 3px 8px rgba(12, 34, 48, .12);
  /* Let overskydning i kurven, så knappen "lander" som på iOS. */
  transition: transform .24s cubic-bezier(.32, 1.32, .5, 1), width .16s ease;
}

.sw input:checked + .bane, .bk-sw input:checked + .bane {
  background: var(--sw-til, #0b7f83);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.sw input:checked + .bane::before, .bk-sw input:checked + .bane::before {
  transform: translateX(calc(var(--sw-b) - var(--sw-h)));
}

/* Squish: knappen strækker sig mens der trykkes, og bliver på plads. */
.sw input:active + .bane::before, .bk-sw input:active + .bane::before {
  width: calc(var(--sw-h) + 1px);
}
.sw input:checked:active + .bane::before, .bk-sw input:checked:active + .bane::before {
  transform: translateX(calc(var(--sw-b) - var(--sw-h) - 5px));
}

.sw input:focus-visible + .bane, .bk-sw input:focus-visible + .bane {
  outline: 2px solid var(--sw-til, #0b7f83);
  outline-offset: 3px;
}

.sw:has(input:disabled), .bk-sw:has(input:disabled) { opacity: .45; }
.sw input:disabled, .bk-sw input:disabled { cursor: not-allowed; }

/* Indstillings-række: tekst til venstre, kontakt yderst til højre.
   Bruges i profil-modalen, administrationen og guide-editoren. */
.sw-rk { display: flex; align-items: center; gap: 14px; }
.sw-rk-tekst { flex: 1 1 auto; min-width: 0; }
.sw-rk-navn { font-weight: 600; font-size: .93rem; line-height: 1.35; }
.sw-rk-under { font-size: .82rem; opacity: .72; margin-top: 2px; line-height: 1.45; }
.sw-rk > .sw, .sw-rk > .bk-sw { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .sw .bane, .bk-sw .bane,
  .sw .bane::before, .bk-sw .bane::before { transition: none; }
}