/* Filterøvelsen. Tokens kommer fra site.css; det eneste, der er nyt her, er
 * de to kurvefarver.
 *
 * To kurver i det samme diagram skal kunne skelnes af alle, og farve alene
 * gør det ikke. Derfor er den anden kurve både stiplet og navngivet dér, hvor
 * den bliver brugt — farven er det tredje kendetegn, ikke det første. Det er
 * den samme regel som fyldet i forventningsafstemningen.
 */

:root {
  --series-a: var(--accent);
  --series-b: #9a4a10;
  --grid: #e6ebef;
  --weights: rgba(20, 66, 92, .22);
}

@media (prefers-color-scheme: dark) {
  :root {
    --series-b: #e8a36a;
    --grid: #232c34;
    --weights: rgba(111, 179, 216, .26);
  }
}

/* ── Kapitlerne ──────────────────────────────────────────────────────────── */

.chapters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chapter-pick {
  display: flex;
  align-items: baseline;
  gap: 9px;
  width: 100%;
  height: 100%;
  padding: 10px 14px 12px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}

.chapter-pick:hover { border-color: var(--edge); }
.chapter-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.chapter-pick .chapter-no {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.chapter-pick .chapter-name { font-weight: 650; font-size: var(--step--1); line-height: 1.3; }

.chapter-pick[aria-current="step"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.chapter-pick[aria-current="step"] .chapter-no { color: var(--on-accent); }

.chapter-head { padding: clamp(26px, 3.4vw, 40px) 0 clamp(14px, 1.8vw, 20px); }

.chapter-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.chapter-head h2 { margin-top: 5px; font-size: var(--step-2); }

.chapter-head .lede {
  margin-top: 12px;
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: var(--step-1);
}

/* ── Skydere og valg ─────────────────────────────────────────────────────── */

/* Dækket: skyderne, forudindstillingerne og tallene i ét, og det bliver
 * siddende under menuen, når der rulles. Ellers skal man op og ned mellem
 * ordenen og den kurve, den flytter - og det er dét, øvelsen går ud på at
 * se. Baggrunden er sidens egen, så diagrammerne ikke skinner igennem. */
.deck {
  position: sticky;
  top: 64px;
  z-index: 5;
  padding-bottom: 12px;
  background: var(--bg);
}

/* Under den faste menus egen højde er der ikke skærm nok til begge dele, og
 * på en telefon ville dækket æde halvdelen. Så står det stille. */
@media (max-width: 900px) {
  .deck { position: static; }
}

.controls {
  padding: 14px clamp(14px, 2vw, 20px) 12px;
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
}

.control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(18px, 3vw, 34px);
}

.control { display: grid; gap: 3px 12px; min-width: 210px; max-width: 380px; flex: 1 1 210px; }
.control.tight { min-width: 160px; flex: 0 1 auto; }

.control-label {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--ink-faint);
}

.control-value {
  font-size: var(--step--1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  align-self: center;
}

.control:has(.slider) { grid-template-columns: minmax(90px, 1fr) auto; }

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.slider::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: var(--r-round);
  background: var(--line-strong);
}

.slider::-moz-range-track {
  height: 5px;
  border-radius: var(--r-round);
  background: var(--line-strong);
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin-top: -6px;
  border-radius: var(--r-round);
  background: var(--accent);
  border: 2px solid var(--paper);
}

.slider::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border-radius: var(--r-round);
  background: var(--accent);
  border: 2px solid var(--paper);
}

.slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-round); }

.pick {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--edge);
  border-radius: var(--r-control);
  overflow: hidden;
  width: fit-content;
}

.pick-one {
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}

.pick-one + .pick-one { border-left: 1px solid var(--edge); }
.pick-one:hover { color: var(--ink); }
.pick-one[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.pick-one:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── Tallene ─────────────────────────────────────────────────────────────── */

.readout-wrap { margin-top: 10px; overflow-x: auto; }

.readout {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.readout th, .readout td {
  padding: 9px 12px;
  text-align: right;
  border-bottom: 1px solid var(--line);
}

.readout thead th {
  font-size: 12px;
  font-weight: 650;
  color: var(--ink-faint);
  white-space: nowrap;
}

.readout tbody th { text-align: left; }
.readout th.corner { border-bottom-color: transparent; }
.readout tbody tr:last-child th, .readout tbody tr:last-child td { border-bottom: 0; }

/* Navnet på kurven med kurvens egen streg foran: solid for den første,
 * stiplet for den anden, så rækken kan findes i diagrammet uden farve. */
.series-key { font-weight: 650; white-space: nowrap; }

.series-key::before {
  content: "";
  display: inline-block;
  width: 22px;
  margin-right: 8px;
  vertical-align: .22em;
  border-top: 3px solid currentColor;
}

.series-key.series-a { color: var(--series-a); }
.series-key.series-b { color: var(--series-b); }
.series-key.series-b::before { border-top-style: dashed; }

/* ── Diagrammerne ────────────────────────────────────────────────────────── */

.board { display: grid; gap: 14px; }

@media (min-width: 920px) {
  .board { grid-template-columns: 1fr 1fr; }
  .fig.wide { grid-column: 1 / -1; }
}

.fig {
  margin: 0;
  /* Uden den kan et bredt diagram skubbe sin egen kasse ud over skærmen: et
   * grid-element er som udgangspunkt mindst så bredt som sit indhold. */
  min-width: 0;
  padding: clamp(12px, 1.6vw, 18px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
}

.fig figcaption { display: grid; gap: 2px; padding: 0 2px 8px; }
.fig-title { font-weight: 650; font-size: var(--step--1); }
.fig-note { color: var(--ink-faint); font-size: 13px; line-height: 1.45; }

.plot { display: block; width: 100%; height: auto; overflow: visible; }

/* HTML'ens egen [hidden]-regel gælder ikke elementer i SVG-navnerummet, så et
 * skjult mærke i et diagram bliver stående, hvis den ikke står her. */
.plot [hidden] { display: none; }

/* På en telefon bliver et diagram, der skaleres ned til 310 px, ulæseligt:
 * aksens tal ender på under syv pixels. Så hellere et diagram, der skubbes
 * sidelæns, som arket i forventningsafstemningen. */
.plot-hint { display: none; }

@media (max-width: 720px) {
  .plot-host { overflow-x: auto; }
  .plot { min-width: 460px; }
  .fig.wide .plot { min-width: 720px; }
  .plot-hint {
    display: block;
    padding: 8px 2px 0;
    color: var(--ink-faint);
    font-size: 13px;
  }
}

.plot .grid { stroke: var(--grid); stroke-width: 1; }
.plot .grid.zero { stroke: var(--line-strong); }
.plot .axis { stroke: var(--line-strong); stroke-width: 1; }

.plot .tick, .plot .axis-label, .plot .rule-text, .plot .span-text, .plot .weights-text {
  font: 11px var(--font);
  fill: var(--ink-faint);
}

.plot .axis-label { font-weight: 650; }

.plot .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.plot .line.raw { stroke: var(--ink-faint); stroke-width: 1; opacity: .75; }
.plot .line.series-a { stroke: var(--series-a); }
.plot .line.series-b { stroke: var(--series-b); stroke-dasharray: 7 4; }

.plot .stem .stem-bar { stroke-width: 1.5; fill: none; }
.plot .stem .stem-dot { stroke: none; }
.plot .stem.series-a .stem-bar { stroke: var(--series-a); }
.plot .stem.series-a .stem-dot { fill: var(--series-a); }
.plot .stem.series-b .stem-bar { stroke: var(--series-b); }
.plot .stem.series-b .stem-dot { fill: var(--series-b); }

.plot .rule.mark line { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.plot .rule.cursor line { stroke: var(--ink); stroke-width: 1.25; }

.plot .dot.raw-dot { fill: var(--ink-faint); }
.plot .dot.series-a-dot { fill: var(--series-a); }
.plot .dot.series-b-dot { fill: var(--series-b); }

.plot .span path { stroke: var(--ink); stroke-width: 1.25; fill: none; }
.plot .span-text { fill: var(--ink); font-weight: 650; }

/* Vægtene under markøren: fladen er filtrets impulsrespons spejlet, stregen er
 * dens tyngdepunkt, og pilen derfra op til markøren er forsinkelsen. */
.plot .weights { fill: var(--weights); stroke: var(--accent); stroke-width: 1; stroke-opacity: .45; }
.plot .weights-com { stroke: var(--accent); stroke-width: 1.5; }
.plot .weights-arrow { stroke: var(--ink); stroke-width: 1.25; stroke-dasharray: 2 3; }
.plot .weights-text { fill: var(--ink); font-weight: 650; }

/* ── Signalet ved skopet ─────────────────────────────────────────────────── */

.scope-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px clamp(14px, 2.4vw, 26px);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.scope-note {
  flex: 1 1 200px;
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.4;
}

.scope-bar .play { margin-left: auto; }

/* ── Prøv selv ─────────────────────────────────────────────────────────────
 *
 * Knapperne stiller skyderne lige over dem, så de står i den samme kasse og
 * ikke et stykke nede på siden. Forklaringen på det valgte forsøg står til
 * højre for knapperne og ikke under, så dækkets højde holder sig i ro. */

.tries {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.tries h3 {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--ink-faint);
}

.watch h3, .extra h3 { font-size: var(--step-1); }

.try-row { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.try[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }

.try-say {
  flex: 1 1 240px;
  min-width: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

/* ── Brødtekst ───────────────────────────────────────────────────────────── */

.prose { margin-top: clamp(22px, 3vw, 32px); display: grid; gap: 14px; }
.prose p { max-width: var(--measure); color: var(--ink-soft); }

.watch { margin-top: clamp(22px, 3vw, 32px); }
.watch ul { margin: 10px 0 0; padding-left: 1.1em; max-width: var(--measure); color: var(--ink-soft); }
.watch li { margin-top: 6px; }

/* ── Panelerne under diagrammerne ────────────────────────────────────────── */

.extra {
  margin-top: clamp(26px, 3.4vw, 40px);
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--line);
}

.extra-lede { margin-top: 8px; max-width: var(--measure); color: var(--ink-soft); }

.cost-row { display: grid; gap: 14px; margin-top: 14px; }

@media (min-width: 760px) { .cost-row { grid-template-columns: 1fr 1fr; } }

.cost-card {
  padding: clamp(14px, 2vw, 20px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
}

.cost-card h4 { margin: 0; font-size: var(--step--1); font-weight: 650; }

.meter { margin: 12px 0 6px; }
.meter-svg { display: block; width: 100%; max-width: 300px; height: auto; }
.meter-track { fill: var(--paper-sunk); stroke: var(--line); }
.meter-fill { fill: var(--accent); }
.meter-fill[data-over] { fill: var(--series-b); }
.meter-limit { stroke: var(--ink-faint); stroke-width: 1.5; }

/* Passer det eller ej står som ord og tal, ikke kun som en farve på søjlen. */
.cost-verdict { font-size: var(--step--1); color: var(--ink-soft); }
.cost-pct { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.cost-verdict[data-fit="nej"] .cost-pct::before { content: "⚠ "; }

.cost-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin: 14px 0 0;
  font-size: 13px;
}

.cost-list dt { color: var(--ink-faint); }
.cost-list dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.cost-short {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-strong);
  font-size: 13px;
  color: var(--ink-soft);
}

/* ── Valgtabellen ────────────────────────────────────────────────────────── */

.choice-wrap { margin-top: 12px; overflow-x: auto; }

.choice {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: var(--step--1);
  text-align: left;
}

.choice th, .choice td {
  padding: 11px 14px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.choice thead th { font-size: 12px; font-weight: 650; color: var(--ink-faint); }
.choice td:first-child { width: 32%; color: var(--ink); }
.choice td:last-child { color: var(--ink-soft); }
.choice tbody tr:last-child td { border-bottom: 0; }

.tag {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--r-round);
  white-space: nowrap;
}

/* ── Koden ───────────────────────────────────────────────────────────────── */

.code-row { display: grid; gap: 14px; margin-top: 14px; }

@media (min-width: 860px) { .code-row { grid-template-columns: 1fr 1fr; align-items: start; } }

.code {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  overflow: hidden;
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-soft);
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--line);
}

.code pre {
  margin: 0;
  padding: 14px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.55;
  tab-size: 2;
}

.code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ── Bunden ──────────────────────────────────────────────────────────────── */

.actions { margin-top: clamp(28px, 4vw, 44px); display: flex; gap: 10px; flex-wrap: wrap; }

.note {
  margin-top: 16px;
  max-width: var(--measure);
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.55;
}

/* To klammer i luppen, når to filtre sammenlignes: hver i sin kurves farve,
 * med kurvens navn skrevet på, så farven ikke er det eneste kendetegn. */
.plot .span.series-a path, .plot .span.series-a .span-text { stroke: var(--series-a); fill: none; }
.plot .span.series-a .span-text { fill: var(--series-a); stroke: none; }
.plot .span.series-b path { stroke: var(--series-b); }
.plot .span.series-b .span-text { fill: var(--series-b); stroke: none; }