/* Gameify Theme Toggle · mörkt ↔ ljust */

.gthm {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  opacity: .75;
  transition: opacity .2s cubic-bezier(.2, .7, .2, 1);
  -webkit-appearance: none;
  appearance: none;
}
.gthm:hover { opacity: 1; }
.gthm:focus-visible {
  outline: 2px solid var(--green-ink, #9ee627);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

/* Båda ikonerna ligger i samma cell; CSS avgör vilken som syns. Ingen layout-
   förskjutning när de byts, och knappen är rätt redan före första paint. */
.gthm__icon {
  grid-area: 1 / 1;
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* ── Tillståndsväxlingen ──────────────────────────────────────────────────
   Utan klassen = mörkt läge aktivt  → visa SOL   ("byt till ljust")
   html.color-scheme--alt            → visa MÅNE  ("byt till mörkt")
   Samma villkor styr både ikon och skärmläsaretikett, så de kan aldrig
   glida isär. */
.gthm__icon--mane,
.gthm__sr--till-morkt { display: none; }

html.color-scheme--alt .gthm__icon--sol,
html.color-scheme--alt .gthm__sr--till-ljust { display: none; }

html.color-scheme--alt .gthm__icon--mane { display: block; }
html.color-scheme--alt .gthm__sr--till-morkt { display: inline; }

/* Samma krok som resten av temat lyssnar på, så växlaren funkar även när
   ljust läge sätts för hand från konsolen. */
html[data-gmfy-theme="light"] .gthm__icon--sol,
html[data-gmfy-theme="light"] .gthm__sr--till-ljust { display: none; }
html[data-gmfy-theme="light"] .gthm__icon--mane { display: block; }
html[data-gmfy-theme="light"] .gthm__sr--till-morkt { display: inline; }

/* ── Header-varianten ─────────────────────────────────────────────────────
   Ärver färg från header-raden, precis som språkväljaren, så de två läser
   som ett par och inte som två påklistrade widgetar. */
.gthm--header { width: 28px; height: 28px; }
.gthm--header .gthm__icon { width: 16px; height: 16px; }

/* Ikonens färg ägs av headerns eget tokenlager (components/header/header.css),
   som byter kulör med färgläget. Stod tidigare hårdkodat #fff med motiveringen
   "headern förblir mörk även i ljust läge" — det gäller inte längre: headern
   följer numera färgläget, och ett vitt bläck hade blivit osynligt där. */
.header .gthm { color: var(--hdr-link, #fff); }

@media (prefers-reduced-motion: reduce) {
  .gthm { transition: none; }
}