/* ==========================================================================
   »Hent friske tal« — knappen i topbjælken og dens besked i statuslinjen.

   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 de 34 .html-filer:
   `ui/friskeknap.py` sprøjter `<link rel="stylesheet" href="_friske.css">` ind i
   hovedet ved leveringen, samme sted som knappen selv. Stod linket i filerne,
   ville en ny flade mangle det — og en knap uden stilark er en knap der ser ud
   som en fejl.

   ⛔ 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.
   ========================================================================== */

/* Knappen står SIDST i topbjælken. `margin-left:auto` skubber den yderst til
   højre, også på de flader der ikke har en `.spacer` — så den er samme sted i
   hver eneste visning. UI-UX-STANDARD § 7: en knap man skal kunne finde uden at
   læse rækken, skal stå samme sted hver gang. */
.friskeknap {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  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;
}

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

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

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

/* Mens der hentes. ⛔ Ingen `opacity` — den ville tage kontrasten på teksten med
   sig, og »Henter…« er netop den tekst brugeren skal kunne læse. Farve er
   heller ikke eneste signal: ordet på knappen skifter samtidig. */
.friskeknap[disabled] {
  background: var(--graa-flade);
  color: var(--txt-2);
  cursor: progress;
}
.friskeknap[disabled]:hover { background: var(--graa-flade); }

/* Berøringsmål: 28 px er husets knaphøjde i chrome-bjælken, men på en
   berøringsflade skal målet være 44 px (UI-UX-STANDARD § 10). Højden vokser
   kun dér, så tætheden på skrivebordet er uændret. */
@media (pointer: coarse) {
  .friskeknap { height: 44px; padding: 0 14px; }
}

/* ---------- beskeden i statuslinjen ---------- */

/* ⛔ Udfaldet står HER, aldrig i en `alert()`. En browserdialog blokerer hele
   fladen, kan ikke ses på et skærmbillede bagefter og kan ikke prøves
   automatisk. UI-UX-STANDARD § 9: knappen siger hvad der sker, statuslinjen
   bekræfter at det skete. */
.friskestatus {
  max-width: 60ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tomt felt fylder intet — heller ikke statuslinjens 16 px mellemrum.
   `display:none` tager elementet helt ud af flexlayoutet; `visibility:hidden`
   ville efterlade hullet. */
.friskestatus:empty { display: none; }

.friskestatus--arbejder { color: var(--txt-2); }
.friskestatus--ok { color: var(--txt); }

/* »rolig« = kaldet lykkedes, men der var intet nyt at hente. Det er ikke en
   fejl og må ikke se ud som en. */
.friskestatus--rolig { color: var(--txt-2); }

/* Fejl. `--neg` er husets eget token og kontrastmålt i begge temaer. Ordlyden
   bærer resten: farven står aldrig alene (UI-UX-STANDARD § 10). */
.friskestatus--fejl { color: var(--neg); }

/* Ingen bevægelse overhovedet i denne flade — hverken snurrende ikon eller
   indtoning. Reglen om `prefers-reduced-motion` (§ 10) er dermed opfyldt ved
   ikke at have noget at slå fra, og det er den billigste måde at opfylde den. */

/* ═══ TILSTANDSPRIKKEN ════════════════════════════════════════════════════════
   Christian 26-08-2026: »bare en farve, at den er grøn … således vi visuelt kan
   se, at det hele bliver opdateret«.

   ⛔ FARVE ER ALDRIG DET ENESTE SIGNAL. `ui-ux-pro-max`s højest prioriterede
      regel er »Don't convey information by color alone«, og 8 % af mænd er
      rødgrønt farveblinde — grøn/rød er netop den værste kombination.
      Derfor tre lag, og hvert af dem virker alene:
        1. farven   (husets tokens, kontrastmålt i begge temaer)
        2. FORMEN   — fyldt · ring · trekant. Ses uden farvesyn overhovedet
        3. teksten  — »14 min« ved siden af, sat af JS'en. Grøn er tavs
   ⚠ Tokens fra ui/design/* LÆSES her, men filen ligger i ui/flade/ og rører
     dermed ikke det hash-låste design (ADR-0005). */
.friskeprik {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-left: .5rem;
  flex: none;                 /* ⚠ maa aldrig klemmes af knappens tekst */
}

/* Frisk: fyldt, rolig. ⭐ Ingen tekst — den er diskret naar alt er godt. */
.friskeprik[data-tilstand="frisk"]   { background: var(--pos); }

/* Traeg: en RING i stedet for en fyldt cirkel. Forskellen ses uden farvesyn. */
.friskeprik[data-tilstand="traeg"] {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--warn);
}

/* Stoppet: en TREKANT. Den mest afvigende form, og den eneste der bryder
   cirklen helt — genkendes selv i udkanten af synsfeltet. */
.friskeprik[data-tilstand="stoppet"] {
  background: transparent;
  border-radius: 0;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid var(--neg);
}

/* Ukendt: hul ring i daempet farve. ⛔ Dette er STARTVAERDIEN — se
   `_knapmarkup`. Prikken maa ALDRIG starte groen: fragmentet leveres foer
   friskheden er slaaet op, og en flade hvor opslaget fejler, ville da love at
   tallene er friske praecis naar vi ikke ved det. */
.friskeprik[data-tilstand="ukendt"] {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--txt-2);
}

/* Tekstledsageren. Tom naar tilstanden er `frisk`, saa den fylder intet. */
.friskeprik-tekst {
  margin-left: .35rem;
  font-size: .75rem;
  color: var(--txt-2);
  white-space: nowrap;
}