/* MDR-overblikket. Alt hentes fra site.css' tokens - der er ingen farver her,
 * som ikke allerede er sitets. Sprogvippen og knapperne står i site.css.
 *
 * Forlægget var NIS 2-overblikket: nøgletal foroven, to visninger, og et træ
 * af niveauer, der hver har et nummer og et navn i venstre spalte og kortene
 * til højre, bundet sammen af en lodret streg. Skrifttyperne og paletten er
 * ikke taget med - sitet henter intet udefra og har én accentfarve.
 *
 * Et valgt kort er malet massivt i accentfarven. Det er fyldet og ikke farven,
 * der siger det, og brødkrummen over træet siger det samme i tekst.
 */

/* Danske sammensatte ord er lange — »Overensstemmelsesvurderingsprocedurer« er
 * bredere end sidespalten. Alt i overblikket må derfor deles med bindestreg,
 * og hvor browseren ikke har en ordbog til sproget, brydes ordet alligevel i
 * stedet for at løbe ud over kanten. `lang` på <html> følger sprogvippen, så
 * orddelingen følger sproget. */
.dash { display: grid; gap: clamp(20px, 2.6vw, 28px); hyphens: auto; overflow-wrap: anywhere; }
.dash .chip, .dash .item-no, .dash .jump-no, .dash .rule-no, .dash .rule-classes,
.dash .level-no, .dash .flow-no, .dash .ref { hyphens: manual; overflow-wrap: normal; }

/* ── Den grafiske oversigt ─────────────────────────────────────────────
 *
 * Billedet med felterne i en SVG ovenpå. Et felt, der peges på eller har
 * fokus, får en tyk mørk kant og et lyst slør - kanten er det, der siger det,
 * og linjen under billedet siger det samme i tekst. */

#graphic { margin-bottom: clamp(20px, 2.6vw, 28px); }

.graphic {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
}

.graphic-summary {
  padding: 14px clamp(16px, 2.4vw, 24px);
  font-weight: 650;
  cursor: pointer;
  list-style-position: inside;
}

.graphic-summary:focus-visible { outline-offset: -2px; }

.graphic-figure { margin: 0; padding: 0 clamp(12px, 2vw, 20px) clamp(14px, 2vw, 20px); }

/* Tegningen er hvid bund med farve på; i mørk tilstand står den på sit eget
 * lyse ark frem for at blive vendt om. */
.graphic-box {
  position: relative;
  background: #ffffff;
  border-radius: var(--r-control);
  overflow: hidden;
}

.graphic-img { display: block; width: 100%; height: auto; }

.graphic-map { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Felterne er usynlige; det er sløret og det oplyste udsnit, der viser,
 * hvor man er. Det er lysstyrken og ikke farven, der siger det - resten af
 * tegningen falmer - og navnet står under billedet i tekst. */
.spot path { fill: transparent; stroke: none; cursor: pointer; }
.spot:focus { outline: none; }

/* Fokus med tastatur får desuden ruteøvelsens stiplede kant, fordi det er
 * dér, man skal kunne se, hvilket felt der står på, uden at have en mus. */
.spot:focus-visible path {
  stroke: var(--accent);
  stroke-width: 5;
  stroke-dasharray: 16 10;
  stroke-linejoin: round;
}

.veil {
  fill: #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
}

.lit { opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }

.graphic-map[data-lit] .veil { opacity: .62; }
.graphic-map[data-lit] .lit { opacity: 1; }

.graphic-say {
  min-height: 1.6em;
  margin-top: 10px;
  font-weight: 600;
}

.graphic-source { margin-top: 4px; color: var(--ink-faint); font-size: var(--step--1); }

/* ── Nøgletal ─────────────────────────────────────────────────────────── */

.facts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 0;
}

.fact-tile {
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
}

.fact-tile dt { font-size: 12.5px; color: var(--ink-soft); }
.fact-tile dd { margin: 3px 0 0; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.fact-tile.is-warn dd { color: var(--accent); }

@media (max-width: 640px) {
  .facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fact-tile { padding: 11px 12px; }
  .fact-tile dd { font-size: 15.5px; }
}

/* ── Visning og sprog ─────────────────────────────────────────────────── */

.dash-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 20px;
  padding-bottom: clamp(16px, 2.4vw, 22px);
  border-bottom: 1px solid var(--line);
}

.views {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
}

.view-pick {
  min-height: 40px;
  padding: 0 18px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}

.view-pick:hover { color: var(--ink); }

/* Den valgte visning står som et hævet ark med kant - formen, ikke farven. */
.view-pick[aria-pressed="true"] {
  background: var(--paper);
  border-color: var(--edge);
  color: var(--ink);
  box-shadow: var(--shadow);
}

/* ── Træet ────────────────────────────────────────────────────────────── */

.path {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: clamp(18px, 2.4vw, 24px);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.path-root { font-weight: 650; color: var(--ink); }
.path-sep { color: var(--ink-faint); }
.path-here { font-weight: 650; color: var(--accent); }

/* Et niveau er en række: nummer og navn til venstre, kortene til højre. Den
 * lodrette streg under nummeret binder niveauerne sammen, så man kan se, at
 * de hænger under hinanden, og ikke ved siden af. */
.level {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 20px 24px;
  padding-bottom: 30px;
  position: relative;
}

.level::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 38px;
  bottom: 4px;
  width: 2px;
  border-radius: var(--r-round);
  background: var(--line-strong);
}

.level.is-last { padding-bottom: 0; }
.level.is-last::before { display: none; }

/* Nummeret står for sig i en smal spalte, og navnet ved siden af, så stregen
 * under nummeret aldrig løber gennem teksten. */
.level-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 12px;
  align-content: start;
  padding-top: 4px;
}

.level-no {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-round);
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 650;
}

.level.is-last .level-no { background: var(--accent); color: var(--on-accent); }

.level-name { font-weight: 650; line-height: 1.3; padding-top: 5px; }
.level-hint { font-size: 13px; color: var(--ink-soft); line-height: 1.35; }

@media (max-width: 760px) {
  .level { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .level::before { display: none; }
  .level-head { grid-template-columns: 28px minmax(0, 1fr); padding-top: 0; }
  .level-no { width: 28px; height: 28px; font-size: 13px; }
  .level-name { padding-top: 3px; }
}

/* ── Kortene ──────────────────────────────────────────────────────────── */

.cards { display: grid; gap: 12px; }
.cards-themes { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.cards-chapters { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cards-items { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }

.card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-control);
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .12s var(--ease);
}

.card:hover { border-color: var(--ink-faint); }
.card:active { transform: scale(.99); }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.card[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

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

.card-title { font-weight: 650; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }
.card-body { font-size: var(--step--1); line-height: 1.45; color: var(--ink-soft); }

.card-theme { min-height: 128px; padding: 18px 20px; }
.card-theme .card-title { font-size: 20px; letter-spacing: -.012em; }
.card-chapter { min-height: 96px; }
.card-chapter .card-title { font-size: 15.5px; }

.card-item { flex-direction: row; align-items: baseline; gap: 12px; padding: 11px 14px; min-height: 52px; }
.item-no { flex-shrink: 0; min-width: 62px; font-weight: 650; font-variant-numeric: tabular-nums; }
.item-name { font-size: 14.5px; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }

/* På en telefon ville ni temakort med brødtekst fylde flere skærme, før man
 * nåede kapitlerne. Så står de to og to med kun navnet, og beskrivelsen
 * kommer igen, når der er plads. */
@media (max-width: 640px) {
  .cards-themes, .cards-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .card-theme { min-height: 0; padding: 12px 13px; gap: 4px; }
  .card-theme .card-title { font-size: 15.5px; }
  .card-theme .card-body { display: none; }
  .card-theme .card-kicker { font-size: 10.5px; letter-spacing: .03em; }
  .card-chapter { min-height: 0; }
  .card-item { flex-direction: column; gap: 2px; padding: 9px 11px; }
  .item-no { min-width: 0; }
  .item-name { font-size: 13.5px; }
}

.card[aria-pressed="true"] .card-kicker,
.card[aria-pressed="true"] .card-body { color: inherit; opacity: .82; }

/* ── Indholdet ────────────────────────────────────────────────────────── */

.content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(24px, 3.4vw, 40px);
  padding: clamp(22px, 3vw, 32px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
  /* Et hop hertil må ikke lande under den faste menu. */
  scroll-margin-top: 88px;
}

.content.is-single { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 900px) {
  .content { grid-template-columns: minmax(0, 1fr); }
}

.content-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.content-context {
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
}

.content-title { font-size: var(--step-2); }
.content-gist { max-width: 64ch; font-size: var(--step-1); color: var(--ink); line-height: 1.5; }

.points {
  display: grid;
  gap: 9px;
  max-width: 68ch;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.points li {
  position: relative;
  padding-left: 20px;
  line-height: 1.5;
}

.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
}

.content-source { align-self: flex-start; margin-top: 6px; font-size: var(--step--1); font-weight: 600; }

.content-side {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-left: clamp(0px, 3vw, 30px);
  border-left: 1px solid var(--line);
}

@media (max-width: 900px) {
  .content-side { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}

.side-block { display: flex; flex-direction: column; gap: 9px; }

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

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  padding: 6px 11px;
  font-size: 14.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 8px;
}

.jumps { display: flex; flex-direction: column; gap: 7px; }

.jump {
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-height: 42px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--ink);
  background: var(--paper-sunk);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s var(--ease);
}

.jump:hover { border-color: var(--edge); }
.jump-no { flex-shrink: 0; font-weight: 650; color: var(--accent); font-variant-numeric: tabular-nums; }
.jump-name { min-width: 0; line-height: 1.35; }
.jump-name::after { content: " →"; color: var(--ink-faint); }

.practice { font-weight: 600; }

/* Bilag VIII's regler står som en tæt liste i fire grupper. */
.rules { display: grid; gap: 14px; margin-top: 6px; }
.rule-group-name { font-weight: 650; font-size: 15px; }

.rule-list {
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  color: var(--ink-soft);
}

.rule-list li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 8px 12px; }
.rule-classes { font-weight: 650; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .rule-list li { grid-template-columns: 62px minmax(0, 1fr); }
  .rule-classes { grid-column: 2; }
}

/* Ruterne pr. klasse: én række pr. klasse, ruterne som mærker ved siden af. */
.routes { display: grid; gap: 10px; margin-top: 6px; }
.route-table { display: grid; gap: 6px; margin: 0; }

.route-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 6px 12px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.route-row dt { font-weight: 650; }
.route-row dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

.route {
  padding: 4px 9px;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  background: var(--paper-sunk);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
}

@media (max-width: 640px) {
  .route-row { grid-template-columns: minmax(0, 1fr); }
}
.rule-no { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── Produktets vej ───────────────────────────────────────────────────── */

.flow-intro { max-width: 70ch; color: var(--ink-soft); font-size: var(--step-1); }

.flow-steps {
  display: grid;
  margin: clamp(18px, 2.6vw, 26px) 0 0;
  padding: 0;
  list-style: none;
}

.flow-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 20px;
  padding-bottom: 24px;
  position: relative;
  scroll-margin-top: 88px;
}

.flow-step::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 48px;
  bottom: 4px;
  width: 2px;
  border-radius: var(--r-round);
  background: var(--line-strong);
}

.flow-step:last-child { padding-bottom: 0; }
.flow-step:last-child::before { display: none; }

.flow-no {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-round);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 17px;
  font-weight: 650;
}

@media (max-width: 640px) {
  .flow-step { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
  .flow-no { width: 32px; height: 32px; font-size: 14px; }
  .flow-step::before { left: 15px; top: 36px; }
}

.flow-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
}

.flow-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 24px;
}

.flow-q {
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
}

.flow-title { margin-top: 4px; font-size: var(--step-2); }

.flow-refs { display: flex; flex-wrap: wrap; gap: 6px; }

.ref {
  min-height: 38px;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: var(--paper-sunk);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s var(--ease);
}

.ref:hover { border-color: var(--edge); }

.flow-desc { max-width: 72ch; color: var(--ink-soft); line-height: 1.5; }

.branches { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.branch {
  padding: 13px 15px;
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
}

.branch-head { font-weight: 650; font-size: 15px; }
.branch-text { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }

.flow-card .practice { align-self: flex-start; font-size: var(--step--1); }

/* ── Note ─────────────────────────────────────────────────────────────── */

.note {
  max-width: var(--measure);
  margin-top: clamp(28px, 4vw, 40px);
  color: var(--ink-faint);
  font-size: var(--step--1);
}