/* Info-knappen og guiden — husets fælles lag. Se ui/infoguide.py.
 *
 * ⭐ Christian, 27-08-2026: *»Ideen med «info»-symbolet skal være gældende
 *    generelt i hele Finance […] OVERALT hvor der er meget lov-info, som ikke er
 *    nødvendigt at se/læse.«*
 *
 * ⛔ INGEN EGNE FARVER. Alt herunder bruger grundlagets tokens, så mørkt tema
 *    følger med af sig selv. En hårdkodet farve ville stå fast i det ene tema og
 *    være ulæselig i det andet — og temaet kan skiftes fra topbjælken på hver
 *    eneste flade.
 *
 * ⛔ **OG KUN TOKENS DER FAKTISK FINDES I `ui/design/nerve-finance-apple.css`.**
 *    Første udkast brugte `--btn-flade`, `--acc-tekst` og `--fokus`. Ingen af de
 *    tre står i grundlaget — de var LOKALE fallbacks i `rykkerpolitik.css`. På
 *    den ene flade blev luk-knappen derfor knaldblå (fallbacken var `#0071E3`),
 *    og på de 35 andre ville den have været farveløs.
 *
 *    ⚠ Set på et skærmbillede, ikke i en prøve. En manglende variabel giver
 *      ingen fejl — den giver bare ingen farve, og det ligner et designvalg.
 *      `tests/ui/test_infoguide.py::test_stilen_bruger_KUN_tokens_der_findes`
 *      måler det nu, så den næste opdager det uden at kigge.
 *
 * ⚠ Filen er STILEN, ikke laget. Den serveres som en almindelig fil fra
 *   `ui/flade/`, præcis som `_tema.css` og `_friske.css`.
 */

/* Overskriften skal kunne bære knappen i sit højre hjørne. `margin-left: auto`
   på knappen gør resten — men det kræver at overskriften er flex. */
.rpkort > h2,
.rpkort > h3,
section > h2,
section > h3,
fieldset > legend,
.trinhdr {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nfinfo,
.rpinfo {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* ⛔ 44×44 er WCAG 2.5.5's mindstemål for et berøringsmål. Ikonet er 18px;
     det er FELTET der skal være stort nok, ikke tegningen. */
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--txt-3);
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.nfinfo svg,
.rpinfo svg,
.rpinfo .ic { width: 18px; height: 18px; }

.nfinfo:hover,
.rpinfo:hover {
  color: var(--acc);
  background: var(--graa-flade);
  border-color: var(--line);
}
.nfinfo:focus-visible,
.rpinfo:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* ── Guiden ────────────────────────────────────────────────────────────────── */

.nfguide,
.rpguide {
  width: min(640px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--win);
  color: var(--txt);
  box-shadow: var(--skygge);
}
.nfguide::backdrop,
.rpguide::backdrop { background: rgb(0 0 0 / .45); }

.nfguidehdr,
.rpguidehdr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px 20px;
  border-bottom: 1px solid var(--line);
  /* Overskriften bliver stående når man ruller i en lang guide. */
  position: sticky;
  top: 0;
  background: var(--win);
  border-radius: 12px 12px 0 0;
}
.nfguidehdr h2,
.rpguidehdr h2 { margin: 0; font-size: 1.05rem; }

.nfguideluk,
.rpguideluk {
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--chrome-3);
  color: var(--txt-2);
  cursor: pointer;
}
.nfguideluk:hover,
.rpguideluk:hover { color: var(--txt); border-color: var(--line-2); }
.nfguideluk:focus-visible,
.rpguideluk:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.nfguidekrop,
.rpguidekrop {
  padding: 4px 20px 20px;
  overflow-y: auto;
  /* 65-75 tegn pr. linje — en guide man ikke gider læse, er ikke en guide. */
  max-width: 68ch;
  line-height: 1.6;
}
.nfguidekrop h3,
.rpguidekrop h3 { margin: 18px 0 6px; font-size: .92rem; color: var(--txt); }
.nfguidekrop p,
.rpguidekrop p { margin: 0 0 10px; color: var(--txt-2); }
.nfguidekrop ul,
.rpguidekrop ul { margin: 0 0 10px; padding-left: 20px; color: var(--txt-2); }
.nfguidekrop li,
.rpguidekrop li { margin-bottom: 8px; }
.nfguidekrop b,
.rpguidekrop b { color: var(--txt); }
.nfguidekrop code,
.rpguidekrop code { font-size: .88em; }

/* ⚠ Paragraffen står KUN her, i guiden — aldrig på siden selv. Den er dæmpet,
   fordi den er belægget for det der lige er sagt, ikke selve beskeden. */
.nfguidekrop .ghjem,
.rpguidekrop .ghjem {
  font-size: .82rem;
  color: var(--txt-3);
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 12px;
}

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