/* Den illustrative datarejse er afgrænset til denne sektion.
   v1.7.9 (24/10-2026, P1.2): fire trin (Input → Oversættelse → Sammenholdning → Output), to kildebeskeder
   i trin 01 og et sammenholdningstrin med pejlekort, sammenligning og tre neutrale udfald (intet valgt).
   ↗ i trinknapperne er erstattet af → (↗ bruges kun ved eksterne links).
   QA-rettelser (24/10): fanerne har samme tekstbredde valgt og ikke valgt (V4); tabellerne deler ikke ord
   midt i (V1, V2); pejlekortet står over sammenligningen ved 761–1180 px (V1); mindste tekst er hævet (T06). */
.journey-section {
  --journey-ice: #a9dded;
  --journey-ink: #edf4f7;
  --journey-muted: #a5b6c2;
  --journey-copper: #c6aa78;
  --journey-line: rgba(169, 221, 237, .17);
  background: #081522;
  color: var(--journey-ink);
  padding: clamp(76px, 8vw, 128px) 0;
  border-block: 1px solid var(--journey-line);
  overflow: hidden;
  scroll-margin-top: 88px;
}
.journey-layout { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(40px, 6vw, 92px); align-items: center; }
.journey-intro { min-width: 0; }
.journey-eyebrow { color: var(--journey-copper); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 20px; }
.journey-intro h2 { max-width: 8em; font-family: "Barlow Condensed", sans-serif; font-size: clamp(48px, 5.3vw, 76px); font-weight: 500; line-height: .98; letter-spacing: -.02em; margin: 0 0 24px; color: var(--journey-ink); }
.journey-lede { color: var(--journey-muted); font-size: 18px; line-height: 1.6; max-width: 32em; }
.journey-steps { margin-top: 32px; display: grid; }
.journey-steps[hidden] { display: none; }
.journey-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; gap: 15px; align-items: center; width: 100%; border: 0; border-top: 1px solid var(--journey-line); border-radius: 0; padding: 19px 15px 19px 0; text-align: left; font: inherit; color: var(--journey-muted); background: transparent; cursor: pointer; transition: color .2s ease, padding .2s ease, background .2s ease; }
.journey-step:last-child { border-bottom: 1px solid var(--journey-line); }
.journey-step-number { font-family: "Barlow Condensed", sans-serif; font-size: 18px; letter-spacing: .04em; color: #8095a7; }
.journey-step-copy { display: grid; gap: 4px; }
.journey-step-copy strong { color: inherit; font-size: 21px; font-weight: 500; line-height: 1.15; }
.journey-step-copy > span { font-size: 13px; line-height: 1.45; color: var(--journey-muted); }
.journey-step-arrow { align-self: start; margin-top: 3px; color: #8095a7; font-size: 21px; line-height: 1; transition: transform .2s ease; }
.journey-step:hover { color: var(--journey-ink); background: rgba(169, 221, 237, .04); }
.journey-step[aria-pressed="true"] { color: var(--journey-ink); background: linear-gradient(90deg, rgba(169, 221, 237, .08), transparent); padding-left: 13px; padding-right: 2px; }
.journey-step[aria-pressed="true"] .journey-step-number { color: var(--journey-copper); }
.journey-step[aria-pressed="true"] .journey-step-arrow { color: var(--journey-ice); transform: translateX(3px); }
.journey-step:focus-visible { position: relative; outline: 2px solid var(--journey-ice); outline-offset: 4px; z-index: 1; }
.journey-disclaimer { max-width: 37em; margin-top: 26px; font-size: 12px; line-height: 1.7; color: var(--journey-muted); }
.journey-screenreader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.journey-workspace { min-width: 0; position: relative; border: 1px solid rgba(169, 221, 237, .24); background: radial-gradient(ellipse at 80% 20%, rgba(41, 84, 106, .17), transparent 65%), #0d2030; box-shadow: 0 32px 64px rgba(0, 0, 0, .15); }
.journey-workspace::before { content: ""; position: absolute; height: 1px; width: 46%; top: -1px; left: 0; background: linear-gradient(90deg, var(--journey-ice), transparent); }
.journey-workspace-head { min-height: 55px; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 24px; border-bottom: 1px solid var(--journey-line); background: rgba(8, 21, 34, .36); }
.journey-example { display: inline-flex; align-items: center; gap: 8px; color: var(--journey-copper); font-size: 11px; line-height: 1.5; letter-spacing: .015em; }
.journey-example-dot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.journey-observation-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #8fa8bb; font-size: 10px; letter-spacing: .05em; white-space: nowrap; }
.journey-panel { padding: 30px 30px 24px; }
.journey-panel + .journey-panel { border-top: 1px solid var(--journey-line); }
.journey-section[data-journey-enhanced] .journey-panel + .journey-panel { border-top: 0; }
.journey-panel[hidden] { display: none; }
.journey-panel-heading { display: flex; gap: 15px; align-items: center; min-height: 44px; }
.journey-panel-index { flex: 0 0 auto; color: var(--journey-copper); font-size: 10px; letter-spacing: .06em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.journey-panel h3 { font-family: "Barlow", sans-serif; font-size: 19px; line-height: 1.25; font-weight: 500; letter-spacing: -.01em; color: var(--journey-ink); }
.journey-input-visual, .journey-mapping, .journey-receiver-visual { height: 166px; display: flex; align-items: center; justify-content: center; gap: 20px; margin: 14px 0 18px; }
.journey-bearing { width: 170px; height: 146px; color: var(--journey-ice); flex: 0 1 170px; }
.journey-bearing-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.journey-bearing-copy > span:first-child { color: var(--journey-muted); font-size: 12px; }
.journey-bearing-copy strong { font-family: "Barlow Condensed", sans-serif; font-weight: 400; font-size: 64px; line-height: 1; color: var(--journey-ink); letter-spacing: -.025em; }
.journey-bearing-copy strong > span { font-size: 38px; color: var(--journey-ice); vertical-align: top; }
.journey-bearing-uncertainty { color: var(--journey-copper); font-size: 11px; line-height: 1.5; }
.journey-document { border: 1px solid var(--journey-line); background: rgba(5, 17, 28, .44); min-width: 0; overflow-x: auto; }
.journey-document-head { display: flex; gap: 9px; align-items: center; min-height: 43px; padding: 12px 15px; border-bottom: 1px solid var(--journey-line); color: #bdcdd8; font-size: 11px; line-height: 1.4; }
.journey-file-icon { display: inline-block; flex: 0 0 11px; height: 14px; width: 11px; border: 1px solid var(--journey-ice); border-radius: 1px; position: relative; opacity: .75; }
.journey-file-icon::after { content: ""; position: absolute; top: 4px; left: 2px; width: 5px; height: 1px; background: var(--journey-ice); box-shadow: 0 3px 0 var(--journey-ice); }
.journey-document-tag { margin-left: auto; padding-left: 8px; color: #95aebe; font-size: 9px; letter-spacing: .09em; }
.journey-fields { margin: 0; padding: 10px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.journey-fields > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 7px 15px; min-height: 31px; }
.journey-fields dt { color: #91a7b8; min-width: 0; overflow-wrap: anywhere; }
.journey-fields dd { margin: 0; color: #d8e5ed; overflow-wrap: anywhere; min-width: 0; }
.journey-fields .journey-field-highlight { background: rgba(169, 221, 237, .045); }
.journey-fields .journey-field-highlight dd { color: var(--journey-ice); }
.journey-fields .journey-value-pending { color: var(--journey-copper); }
.journey-panel-caption { color: var(--journey-muted); font-size: 13px; line-height: 1.6; margin-top: 18px; min-height: 42px; }
.journey-continuity { display: flex; gap: 10px; align-items: center; padding: 17px 24px; border-top: 1px solid var(--journey-line); color: #bdcdd8; font-size: 11px; line-height: 1.5; background: rgba(8, 21, 34, .36); }
.journey-continuity svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--journey-copper); }

.journey-mapping { gap: 0; }
.journey-mapping-node { display: flex; flex-direction: column; gap: 7px; align-items: center; min-width: 0; padding: 14px 7px; flex: 1; }
.journey-mapping-node > span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--journey-muted); font-size: 11px; }
.journey-mapping-node > strong { font-family: "Barlow Condensed", sans-serif; font-size: 52px; font-weight: 400; line-height: 1; letter-spacing: -.02em; }
.journey-mapping-node > small { color: var(--journey-muted); font-size: 11px; }
.journey-mapping-normalised { border: 1px solid rgba(169, 221, 237, .2); background: rgba(169, 221, 237, .035); }
.journey-mapping-normalised > strong, .journey-mapping-normalised > span { color: var(--journey-ice); }
.journey-mapping-bridge { display: flex; align-items: center; width: 94px; padding-inline: 8px; flex: 0 1 94px; color: var(--journey-copper); }
.journey-mapping-bridge > span { height: 1px; min-width: 5px; flex: 1; background: rgba(198, 170, 120, .4); }
.journey-mapping-bridge svg { width: 32px; height: 32px; flex: 0 0 32px; }
.journey-receiver-visual { gap: 0; padding-inline: 10px; }
.journey-packet { width: 104px; padding: 14px; border: 1px solid rgba(169, 221, 237, .3); background: rgba(169, 221, 237, .035); display: grid; grid-template-columns: 11px 1fr; gap: 8px; align-items: center; }
.journey-packet > span:nth-child(2) { font-family: "Barlow Condensed", sans-serif; font-size: 12px; color: var(--journey-ice); letter-spacing: .03em; white-space: nowrap; }
.journey-packet i { grid-column: 1 / -1; height: 2px; background: var(--journey-ice); opacity: .3; }
.journey-packet i:last-child { width: 65%; }
.journey-transfer-line { flex: 1; display: flex; align-items: center; max-width: 95px; margin-inline: 12px; color: var(--journey-copper); }
.journey-transfer-line > span { height: 1px; flex: 1; background: currentColor; opacity: .6; }
.journey-transfer-line b { font-size: 18px; line-height: 1; font-weight: 400; }
.journey-receiver { width: 123px; min-height: 110px; border: 1px solid rgba(169, 221, 237, .2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--journey-ice); background: rgba(169, 221, 237, .035); }
.journey-receiver svg { width: 52px; height: 40px; }
.journey-receiver span { font-size: 11px; color: #bdcdd8; }

@media (max-width: 1000px) {
  .journey-layout { gap: 34px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .journey-panel { padding-inline: 22px; }
  .journey-input-visual { gap: 8px; }
  .journey-bearing { width: 140px; flex-basis: 140px; }
  .journey-bearing-copy strong { font-size: 58px; }
}
@media (max-width: 760px) {
  .journey-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .journey-intro h2 { max-width: 10em; font-size: clamp(45px, 8vw, 64px); }
  .journey-lede { font-size: 17px; }
  .journey-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 26px; border-bottom: 1px solid var(--journey-line); }
  .journey-step, .journey-step[aria-pressed="true"] { display: flex; flex-direction: column; gap: 8px; align-items: start; padding: 16px 8px 18px; border-top: 1px solid var(--journey-line); border-bottom: 2px solid transparent; }
  .journey-step:last-child { border-bottom: 2px solid transparent; }
  .journey-step[aria-pressed="true"] { border-bottom-color: var(--journey-ice); background: linear-gradient(0deg, rgba(169, 221, 237, .08), transparent); }
  .journey-step-number { font-size: 14px; }
  .journey-step-copy strong { font-size: 17px; }
  .journey-step-copy > span, .journey-step-arrow { display: none; }
  .journey-disclaimer { margin-top: 20px; }
  .journey-panel { padding-inline: 24px; }
  .journey-workspace-head { padding-inline: 24px; }
  .journey-input-visual { gap: 24px; }
  .journey-bearing { width: 170px; flex-basis: 170px; }
}
@media (max-width: 420px) {
  .journey-workspace-head { padding-inline: 16px; gap: 8px; }
  .journey-example { font-size: 10px; }
  .journey-observation-id { font-size: 9px; }
  .journey-panel { padding: 23px 16px 20px; }
  .journey-panel-heading { gap: 12px; }
  .journey-panel h3 { font-size: 17px; }
  .journey-input-visual { gap: 4px; margin-top: 8px; }
  .journey-bearing { width: 133px; flex-basis: 133px; }
  .journey-bearing-copy strong { font-size: 53px; }
  .journey-bearing-copy > span:first-child { font-size: 11px; }
  .journey-bearing-uncertainty { font-size: 10px; }
  .journey-document-head { padding-inline: 12px; font-size: 10px; gap: 7px; }
  .journey-fields { font-size: 10px; }
  .journey-fields > div { gap: 8px; padding-inline: 12px; }
  .journey-continuity { padding-inline: 16px; font-size: 10px; }
  .journey-mapping-node > span { font-size: 10px; }
  .journey-mapping-node > strong { font-size: 47px; }
  .journey-mapping-bridge { width: 58px; flex-basis: 58px; padding-inline: 4px; }
  .journey-receiver-visual { padding-inline: 0; }
  .journey-receiver { width: 110px; }
  .journey-transfer-line { margin-inline: 9px; }
}
/* v1.7.9 · tabeller i trin 01 og 03 (samme udtryk som .journey-fields) */
.journey-table { width: 100%; border-collapse: collapse; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.45; }
.journey-table th, .journey-table td { padding: 7px 15px; text-align: left; vertical-align: top; font-weight: 400; overflow-wrap: normal; }
.journey-table tbody th, .journey-table td { white-space: nowrap; }
.journey-table-compare td { white-space: normal; }
.journey-table thead th { padding-top: 11px; padding-bottom: 6px; color: #95aebe; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; }
.journey-table tbody th { color: #91a7b8; }
.journey-table td { color: #d8e5ed; }
.journey-table .journey-field-highlight > * { background: rgba(169, 221, 237, .045); }
.journey-table .journey-field-highlight td { color: var(--journey-ice); }
.journey-table tbody tr:last-child > * { padding-bottom: 11px; }

/* v1.7.9 · trin 03: pejlekort og sammenligning side om side */
.journey-correlate { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px; align-items: center; margin: 14px 0 18px; }
.journey-map { margin: 0; min-width: 0; padding: 10px 10px 9px; border: 1px solid var(--journey-line); background: rgba(5, 17, 28, .44); }
.journey-map svg { display: block; width: 100%; height: auto; max-height: 180px; color: var(--journey-ice); }
.journey-map figcaption { margin-top: 6px; color: var(--journey-muted); font-size: 11.5px; line-height: 1.45; }
.journey-table-compare { font-size: 11.5px; }
.journey-table-compare th, .journey-table-compare td { padding-inline: 8px; }
.journey-table-compare thead th { color: #bdcdd8; }
.journey-table-compare thead th span { white-space: nowrap; }
.journey-compare { padding-top: 14px; border-top: 1px solid var(--journey-line); }
.journey-compare-title { margin: 0 0 9px; color: var(--journey-copper); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.journey-compare-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.journey-compare-list li { color: var(--journey-muted); font-size: 12px; line-height: 1.5; }
.journey-compare-list strong { color: var(--journey-ink); font-weight: 500; }
.journey-outcomes { margin-top: 16px; }
.journey-outcome-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.journey-outcome-list li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid rgba(169, 221, 237, .28); border-radius: 999px; color: #bdcdd8; font-size: 12px; line-height: 1.3; }
.journey-outcome-list li::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; opacity: .7; }
#journey-correlation .journey-panel-caption { margin-top: 16px; }

/* v1.7.9 · ved to kolonner deler panelerne én højde (det højeste panel), så fanerne til venstre
   ikke flytter sig, når et trin vælges. Skjulte paneler er usynlige og uden for tilgængelighedstræet. */
@media (min-width: 761px) {
  .journey-section[data-journey-enhanced] .journey-workspace { display: grid; grid-template-columns: minmax(0, 1fr); }
  .journey-section[data-journey-enhanced] .journey-workspace-head { grid-row: 1; }
  .journey-section[data-journey-enhanced] .journey-panel { grid-row: 2; grid-column: 1; }
  .journey-section[data-journey-enhanced] .journey-panel[hidden] { display: block; visibility: hidden; }
  .journey-section[data-journey-enhanced] .journey-continuity { grid-row: 3; }
}

/* V1: ved to kolonner under 1181 px er der for lidt plads til kort og tabel side om side. */
@media (min-width: 761px) and (max-width: 1180px) {
  .journey-correlate { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 640px) {
  .journey-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .journey-correlate { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .journey-map svg { max-height: 190px; }
  .journey-compare-list { grid-template-columns: minmax(0, 1fr); gap: 7px; }
}
@media (max-width: 420px) {
  .journey-table { font-size: 10px; }
  .journey-table th, .journey-table td { padding-inline: 12px; }
  .journey-table thead th { font-size: 10px; }
  .journey-table-compare { font-size: 10.5px; }
  .journey-table-compare th, .journey-table-compare td { padding-inline: 6px; }
  .journey-compare-list li, .journey-outcome-list li { font-size: 11.5px; }
}
/* V2: trin 01-tabellen ved 360 og 320 px — mindre luft, så felt-id'er og tider står på én linje. */
@media (max-width: 380px) {
  .journey-table:not(.journey-table-compare) th, .journey-table:not(.journey-table-compare) td { padding-inline: 7px; }
}
@media (max-width: 340px) {
  .journey-fields > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .journey-table:not(.journey-table-compare) th, .journey-table:not(.journey-table-compare) td { padding-inline: 6px; }
  .journey-table:not(.journey-table-compare) tbody th, .journey-table:not(.journey-table-compare) td { font-size: 9.5px; }
  /* trin 03 ved 320 px: tabellen var 0,4 px for bred (vandret rulning); lidt mindre luft og tekst */
  .journey-table-compare tbody th, .journey-table-compare td { font-size: 10px; }
  .journey-table-compare th, .journey-table-compare td { padding-inline: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-step, .journey-step-arrow { transition: none; }
}