/* Billige eltimer — statisk side, ingen byggeskridt, ingen afhængigheder.

   To ting styrer designet:
   - Den læses på en telefon i et maskinrum. Store tal, høj kontrast, ingen
     tynde grå typer.
   - Farve er ALDRIG den eneste kanal. Hver time bærer sit ord («Høj»,
     «Middel», «Lav») ved siden af sin farve, så siden virker i gråtoner og
     for en farveblind læser. */

:root {
  color-scheme: light dark;

  --bg: #f6f7f9;
  --kort: #ffffff;
  --kant: #d8dce3;
  --tekst: #14181f;
  --svag: #5a6472;

  --accent: #17466e;

  /* Sandsynlighedsbåndene. En sekventiel skala fra bleg til mættet — ikke
     rød/grøn: rød og grøn læses som forkert/rigtigt, og en billig time er
     ikke «rigtig», den er billig. */
  --lav-bg: #eef1f5;
  --lav-fg: #4a5462;
  --mel-bg: #cfe2f0;
  --mel-fg: #1c4a67;
  --hoj-bg: #1f6f9c;
  --hoj-fg: #ffffff;

  --advarsel-bg: #fff4d6;
  --advarsel-kant: #d9a520;
  --advarsel-fg: #4a3708;
  --fejl-bg: #fdeceb;
  --fejl-kant: #c0392b;
  --fejl-fg: #6d1d15;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10141a;
    --kort: #191f27;
    --kant: #2c3541;
    --tekst: #eef1f5;
    --svag: #9aa5b4;
    --accent: #7fb8e0;

    --lav-bg: #212832;
    --lav-fg: #97a2b1;
    --mel-bg: #24455e;
    --mel-fg: #c5e0f2;
    --hoj-bg: #4d9fd0;
    --hoj-fg: #08131c;

    --advarsel-bg: #3a300f;
    --advarsel-kant: #c79c22;
    --advarsel-fg: #f6e6b8;
    --fejl-bg: #3a1815;
    --fejl-kant: #d0574a;
    --fejl-fg: #f7d6d1;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  background: var(--bg);
  color: var(--tekst);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main, header, footer { max-width: 46rem; margin-inline: auto; }

h1 { font-size: 1.45rem; margin: 0; }
h2 { font-size: 1.15rem; margin: 0 0 .35rem; }
h3 { font-size: 1rem; margin: 0; }
p { margin: .5rem 0; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- porten ---------- */

.port { display: flex; min-height: 100svh; align-items: center; }
.port-kort {
  width: 100%; background: var(--kort); border: 1px solid var(--kant);
  border-radius: 12px; padding: 1.5rem;
}
.port-brod { color: var(--svag); }
.port form { margin: 1.25rem 0 1rem; }
.port label { display: block; font-weight: 600; margin-bottom: .35rem; }
.port input {
  width: 100%; padding: .7rem .8rem; font-size: 1.1rem;
  border: 1px solid var(--kant); border-radius: 8px;
  background: var(--bg); color: var(--tekst);
}
.port input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.port button {
  margin-top: .75rem; width: 100%; padding: .75rem;
  font-size: 1.05rem; font-weight: 600; cursor: pointer;
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent); border-radius: 8px;
}
.port-note { font-size: .85rem; color: var(--svag); margin-bottom: 0; }
.fejl { color: var(--fejl-kant); font-weight: 600; }

/* ---------- top ---------- */

.top { padding: 1.25rem 0 .5rem; }
.top-rk { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.vaerk { color: var(--svag); font-size: .9rem; margin: .15rem 0 0; }
.lnk {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; font-size: .85rem;
  text-decoration: underline;
}

/* ---------- bannere ---------- */

.banner {
  max-width: 46rem; margin: .75rem auto; padding: .8rem 1rem;
  border: 1px solid; border-left-width: 5px; border-radius: 8px;
  font-size: .95rem;
}
.banner strong { display: block; margin-bottom: .2rem; }
.banner-advarsel { background: var(--advarsel-bg); border-color: var(--advarsel-kant); color: var(--advarsel-fg); }
.banner-fejl { background: var(--fejl-bg); border-color: var(--fejl-kant); color: var(--fejl-fg); }
.banner button {
  margin-top: .6rem; padding: .45rem .9rem; cursor: pointer; font: inherit;
  border: 1px solid currentColor; border-radius: 6px;
  background: transparent; color: inherit;
}

/* ---------- valg ---------- */

.valg { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.valg fieldset { border: 0; padding: 0; margin: 0; }
.valg legend {
  padding: 0; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--svag);
  margin-bottom: .35rem;
}
.knapper { display: flex; gap: .4rem; flex-wrap: wrap; }
.knapper button {
  min-width: 3.2rem; padding: .55rem .85rem; cursor: pointer;
  font: inherit; font-weight: 600;
  background: var(--kort); color: var(--tekst);
  border: 1px solid var(--kant); border-radius: 8px;
}
.knapper button[aria-pressed="true"] {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.knapper button[disabled] { opacity: .45; cursor: not-allowed; }
.aarsag { font-size: .85rem; color: var(--svag); margin: .5rem 0 0; max-width: 34rem; }

/* ---------- blokke og kort ---------- */

.blok { margin: 1.75rem 0; }
.grundlag {
  font-size: .9rem; color: var(--svag);
  border-left: 3px solid var(--kant); padding-left: .75rem; margin: .5rem 0 1rem;
}

.kort {
  background: var(--kort); border: 1px solid var(--kant);
  border-radius: 12px; padding: 1.1rem 1.2rem; margin-bottom: 1rem;
}
.kort:last-child { margin-bottom: 0; }
.kort .fod { font-size: .8rem; color: var(--svag); margin: .6rem 0 0; }

/* ---------- døgnkort ---------- */

.doegn { margin-bottom: 1rem; }
.doegn-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; margin-bottom: .5rem;
}
.doegn-h .naar { color: var(--svag); font-size: .85rem; }

.spaend { font-size: .8rem; color: var(--svag); margin: 0 0 .45rem; }

.timer {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--kant); border-radius: 10px;
  overflow: hidden; background: var(--kort);
}
@media (min-width: 40rem) {
  /* To spalter på en skærm med plads. 24 rækker i én spalte er ikke
     forkert, men det er en masse rulning for noget, der er ét overblik. */
  .spaend { font-size: .8rem; color: var(--svag); margin: 0 0 .45rem; }

.timer { columns: 2; column-gap: 0; border-radius: 10px; }
  .timer li { break-inside: avoid; }
}

.timer li {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .7rem; border-bottom: 1px solid var(--kant);
  border-left: 4px solid transparent;
}
.timer li:last-child { border-bottom: 0; }
.timer .kl {
  font-variant-numeric: tabular-nums; font-weight: 600;
  min-width: 4.4rem; font-size: .9rem;
}
.timer .stang { flex: 1; height: .55rem; background: var(--lav-bg); border-radius: 3px; }
.timer .stang i { display: block; height: 100%; border-radius: 3px; background: var(--hoj-bg); }
.timer .ord {
  min-width: 4.2rem; text-align: right; font-size: .8rem; font-weight: 700;
  padding: .1rem .4rem; border-radius: 5px;
}
.b-lav .ord { background: var(--lav-bg); color: var(--lav-fg); }
.b-mel .ord { background: var(--mel-bg); color: var(--mel-fg); }
.b-hoj .ord { background: var(--hoj-bg); color: var(--hoj-fg); }
.b-lav .stang i { background: var(--lav-fg); opacity: .35; }
.b-mel .stang i { background: var(--mel-fg); opacity: .6; }

.markeret { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.markeret .kl::after { content: " ●"; color: var(--accent); font-size: .7em; }

.forklar-mark { font-size: .8rem; color: var(--svag); margin: .5rem 0 0; }

.hul {
  border: 1px dashed var(--kant); border-radius: 10px;
  padding: 1rem; background: var(--kort); color: var(--svag); font-size: .9rem;
}
.hul strong { color: var(--tekst); }

/* ---------- kronetal ---------- */

.tal { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tal-enhed { font-size: 1rem; font-weight: 600; color: var(--svag); }
.par { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: .75rem 0 .25rem; }
.par > div { flex: 1 1 9rem; }
.par h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--svag); }
.par .naar { font-size: .82rem; color: var(--svag); }
.samhoerighed {
  font-size: .87rem; border-left: 3px solid var(--kant);
  padding-left: .75rem; margin: .9rem 0 0;
}

/* Dagsprisens timerække. Bevidst en ANDEN form end prognosens: prognosen er
   ord, dagsprisen er tal. Ligner de to hinanden, læses sandsynligheden som
   en pris — præcis den forveksling, §1's ordkrav findes for at forhindre. */
.pristabel { width: 100%; border-collapse: collapse; font-size: .87rem; margin-top: .6rem; }
.pristabel th, .pristabel td { padding: .3rem .5rem; text-align: right; }
.pristabel th:first-child, .pristabel td:first-child { text-align: left; }
.pristabel thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--svag); border-bottom: 1px solid var(--kant); }
.pristabel td { font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--kant); }
.pristabel tr:last-child td { border-bottom: 0; }
.pristabel .neg { color: var(--fejl-kant); font-weight: 700; }
.prisrul { max-height: 17rem; overflow-y: auto; overscroll-behavior: contain; }

/* ---------- bund ---------- */

.bund { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--kant); font-size: .85rem; color: var(--svag); }
.bund .stor { font-size: .95rem; color: var(--tekst); }
.svag { opacity: .8; }