/* ==========================================================================
   Dag/nat-kontakten i topbjælken — søskende til `_friske.css`.

   Filen ligger i FLADELAGET og ikke i ../design/*, som er hash-låst af ADR-0005
   og aldrig rettes. Den er hverken linket eller nævnt i .html-filerne:
   `ui/temaknap.py` sprøjter `<link rel="stylesheet" href="_tema.css">` ind i
   hovedet ved leveringen, samme sted som kontakten selv.

   ⛔ Ingen egne farver. Rollerne er grundlagets egne tokens, som er
      kontrastmålt dér (UI-UX-STANDARD § 3), og de skifter selv i mørkt tema.
      Det er ikke pænhed: en kontakt der TEGNEDE sit eget mørke, ville stå
      forkert i præcis det tema den selv lige har slået til.
   ========================================================================== */

/* ⛔ IKKE `margin-left:auto`. `.friskeknap` bærer den og skubber sig selv yderst
   til højre; kontakten sættes ind EFTER den og skal blive liggende KLINDT op ad
   den — det var hele ønsket (»lige ved siden af«). Fik begge `auto`, ville de
   to dele den frie plads mellem sig og drive fra hinanden på brede skærme. */
.temaknap {
  flex: 0 0 auto;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 6px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--chrome);
  color: var(--txt);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
}

.temaknap:hover { background: var(--graa-flade); }

/* `:focus-visible`, ikke `:focus` — en musebruger skal ikke have ring
   (UI-UX-STANDARD § 10). */
.temaknap:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}

.temaknap-ikon {
  width: 15px;
  height: 15px;
  color: var(--txt-2);
}

/* ⭐ BEGGE ikoner står i markuppen; her vælges hvilket der ses. Bindingen er
   `aria-checked` — den SAMME attribut som skærmlæseren læser. Derfor kan det
   man ser og det der bliver læst højt ikke komme ud af trit: der findes kun
   én kilde til begge dele. Skiftede scriptet ikonet i stedet, ville de være
   to kilder, og to kilder bliver uenige. */
.temaknap[aria-checked="false"] .temaknap-maane,
.temaknap[aria-checked="true"]  .temaknap-sol { display: none; }

/* Teksten har fast bredde, så bjælken ikke hopper når »Dag« bliver til »Nat«.
   To tegn er nok forskel til at flytte alt til højre for kontakten et pixelryk
   — og et ryk ved hvert klik ser ud som en fejl. UI-UX-STANDARD § 7. */
.temaknap-tekst {
  min-width: 24px;
  text-align: left;
}

/* Selve kontakten. Den er `aria-hidden`: skærmlæseren får tilstanden fra
   `role="switch"` + `aria-checked` på knappen, og en oplæsning af sporet
   oveni ville være støj. */
.temaknap-spor {
  position: relative;
  width: 26px;
  height: 15px;
  border-radius: 999px;
  background: var(--line);
  flex: 0 0 auto;
  transition: background 180ms ease;
}

.temaknap-spor > i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--chrome);
  box-shadow: 0 1px 2px rgb(0 0 0 / .28);
  transition: transform 180ms ease;
}

.temaknap[aria-checked="true"] .temaknap-spor { background: var(--acc); }
.temaknap[aria-checked="true"] .temaknap-spor > i { transform: translateX(11px); }

/* ⛔ Farven er ALDRIG eneste signal (UI-UX-STANDARD § 3, WCAG 1.4.1). Tre ting
   skifter samtidig: ikonet (sol/måne), ordet (»Dag«/»Nat«) og knappens
   position. En bruger der ikke skelner accentfarven fra en grå, kan stadig se
   hvilken tilstand skærmen står i — og kan i øvrigt bare kigge på siden. */

/* Respekterer `prefers-reduced-motion`: den glidende kugle er pynt, og pynt må
   ikke påtvinges nogen der har bedt om ro. Tilstanden skifter stadig — den
   springer bare i stedet for at glide. */
@media (prefers-reduced-motion: reduce) {
  .temaknap-spor,
  .temaknap-spor > i { transition: none; }
}