/* =========================================================================
   DS v4 — JOURNEYS — the orchestration layer. A journey is an ITINERARY over
   guides, not a guide: it sequences milestones, points at guides, and tracks
   where you are.
   · the route rail — one continuous line with numbered milestones — is the
     page's identity; nothing else on the site uses it
   · step pages reuse the guidance shell (rail right, content left) but the
     rail is the route, not a TOC
   Dark scope adapted [data-mode="dark"] → .dark.
   ========================================================================= */

/* ---- journey facts line ------------------------------------------------------ */
.jy-facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; font-size: 14px; line-height: 20px; color: var(--color-text-secondary); }
.jy-facts span { display: inline-flex; align-items: center; gap: 8px; }
.jy-facts svg { width: 15px; height: 15px; color: var(--color-accent); }
.jy-facts b { font-weight: 650; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }

/* ---- route rail -------------------------------------------------------------- */
.route { list-style: none; margin: calc(32px * var(--rk)) 0 0; padding: 0; counter-reset: mile; max-width: 720px; }
.route > li { position: relative; padding: 0 0 calc(40px * var(--rk)) 64px; counter-increment: mile; }
.route > li::before { content: counter(mile); position: absolute; left: 0; top: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--color-accent-fill); color: var(--color-accent-fill-ink, #fff); font-family: var(--font-heading); font-weight: 700; font-size: 17px; border-radius: 50%; z-index: 1; }
.route > li::after { content: ""; position: absolute; left: 19px; top: 44px; bottom: 4px; width: 2px; background: var(--color-border-light); }
.route > li:last-child::after { display: none; }
.route > li:last-child { padding-bottom: 0; }
.mile-title { font-family: var(--font-heading); font-size: 20px; line-height: 24px; letter-spacing: -0.01em; font-weight: 600; margin: 8px 0 0; }
.mile-title a { color: var(--color-link); text-decoration: none; }
.mile-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.route p { font-size: 15px; line-height: 24px; color: var(--color-text-secondary); margin: 6px 0 0; max-width: 56ch; text-wrap: pretty; }
.mile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 10px; font-size: 13px; line-height: 20px; color: var(--color-text-muted); }
.mile-meta .with { display: inline-flex; align-items: center; gap: 6px; }
.mile-meta .with b { font-weight: 600; color: var(--color-text-secondary); }
.mile-guides { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.mile-guides a { display: inline-flex; align-items: center; gap: 8px; color: var(--color-link); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; width: fit-content; }
.mile-guides a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.mile-guides svg { width: 13px; height: 13px; flex: none; color: var(--color-text-muted); }

/* ---- step page: route rail (right, replaces TOC) ----------------------------- */
.steprail { position: sticky; top: 80px; padding-top: 4px; } /* clears the sticky gv-header */
.steprail h2 { font-family: var(--font-stack); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 16px; }
.steprail ol { list-style: none; padding: 0; margin: 0; }
.steprail li { position: relative; padding: 0 0 4px 36px; }
.steprail li::after { content: ""; position: absolute; left: 11px; top: 26px; bottom: -2px; width: 2px; background: var(--color-border-light); }
.steprail li:last-child::after { display: none; }
.steprail .m { position: absolute; left: 0; top: 2px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 12px; font-weight: 650; font-family: var(--font-heading); background: var(--color-bg-white); border: 2px solid var(--color-border); color: var(--color-text-muted); box-sizing: border-box; }
.steprail a { display: block; padding: 4px 0; color: var(--color-text-secondary); text-decoration: none; font-size: 14px; line-height: 20px; }
.steprail a:hover { color: var(--color-link); }
.steprail li.done .m { background: var(--color-accent); border-color: var(--color-accent); color: transparent; }
.steprail li.done .m::before { content: ""; width: 12px; height: 12px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/></svg>") center/contain no-repeat; }
.dark .steprail li.done .m::before { filter: brightness(0.2); }
.steprail li.now .m { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: var(--color-accent-fill-ink, #fff); }
.steprail li.now a { color: var(--color-text-primary); font-weight: 650; }

/* ---- step hero strip --------------------------------------------------------- */
.step-pos { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.step-pos .pill { background: var(--color-accent-fill); color: var(--color-accent-fill-ink, #fff); border-radius: var(--border-radius-pill); padding: 4px 14px; font-size: 13px; line-height: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.step-pos .of { font-size: 13px; line-height: 20px; color: var(--color-text-muted); font-weight: 500; }

/* ---- do-now checklist (interactive) ------------------------------------------ */
.do-card label { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--color-border-light); cursor: pointer; font-size: 15px; line-height: 24px; }
.do-card label:first-of-type { border-top: 0; padding-top: 0; }
.do-card input { appearance: none; width: 22px; height: 22px; flex: none; margin: 1px 0 0; border: 2px solid var(--color-border); border-radius: 6px; background: var(--color-bg-white); cursor: pointer; display: grid; place-items: center; }
.do-card input:checked { background: var(--color-accent); border-color: var(--color-accent); }
.do-card input:checked::before { content: ""; width: 13px; height: 13px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/></svg>") center/contain no-repeat; }
.do-card input:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.do-card input:checked + span { color: var(--color-text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--color-text-muted) 50%, transparent); }
.do-card .opt { color: var(--color-text-muted); font-size: 13px; }

/* ---- guide reference card ----------------------------------------------------- */
.guide-ref { background: var(--color-bg-white); border: 1px solid var(--color-border-light); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); padding: 20px 24px; }
.guide-ref .ovl { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase; color: var(--color-accent-text); margin: 0 0 8px; display: block; }
.guide-ref h3, .guide-ref h4 { font-family: var(--font-heading); font-size: 18px; line-height: 24px; letter-spacing: -0.01em; font-weight: 600; margin: 0; }
.guide-ref h3 a, .guide-ref h4 a { color: var(--color-link); text-decoration: none; }
.guide-ref h3 a:hover, .guide-ref h4 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.guide-ref p { font-size: 14px; line-height: 20px; color: var(--color-text-secondary); margin: 6px 0 0; max-width: 60ch; }
/* external signpost: eyebrow = favicon + domain provenance */
.guide-ref .ovl--src { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; }
.guide-ref .ovl--src img { width: 14px; height: 14px; border-radius: 3px; flex: none; }
/* external signpost: title carries the leave-arrow */
.guide-ref .ext-title { display: inline-flex; align-items: center; gap: 6px; }
.guide-ref .ext-title svg { width: 12px; height: 12px; flex: none; }

/* ---- prev / next milestone footer --------------------------------------------- */
.step-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid var(--color-border-light); margin-top: calc(48px * var(--rk)); padding-top: calc(24px * var(--rk)); }
.step-nav a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.step-nav .dir { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase; color: var(--color-text-muted); }
.step-nav .ttl { font-family: var(--font-heading); font-size: 17px; line-height: 24px; font-weight: 600; color: var(--color-link); }
.step-nav a:hover .ttl { text-decoration: underline; text-decoration-thickness: 2px; }
.step-nav .next { text-align: right; align-items: flex-end; grid-column: 2; }
@media (max-width: 560px) { .step-nav { grid-template-columns: 1fr; } .step-nav .next { grid-column: 1; text-align: left; align-items: flex-start; } }

/* ---- journey landing: preamble --------------------------------------------
   Sits directly under the hero facts. Authored h2s ("What this journey is
   for") are redundant beside the hero title, so they render as eyebrows,
   and the first block sits close to the hero instead of a full h2 breath. */
.jy-preamble { margin-top: calc(20px * var(--rk)); }
.jy-preamble > * + * { margin-top: calc(20px * var(--rk)); }
.jy-preamble__block { max-width: 720px; }
.jy-preamble .richtext h2 { font-family: var(--font-stack); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase; color: var(--color-text-muted); margin: calc(28px * var(--rk)) 0 8px; }
.jy-preamble .richtext h2:first-child { margin-top: 0; }

/* ---- rich route: milestones carry full content bodies (the existing YAML
   estate: core_content / callout / table / context_wrapper / signpost) -------- */
.route--rich { max-width: none; }
.route--rich > li { padding-bottom: calc(56px * var(--rk)); }
.mile-body { margin-top: 12px; }
.mile-body > * { margin: 0; }
.mile-body > * + * { margin-top: calc(20px * var(--rk)); }
.mile-body > h3 { font-size: 20px; line-height: 24px; letter-spacing: -0.01em; font-weight: 600; margin-top: calc(32px * var(--rk)); }
.mile-body > h3 + * { margin-top: calc(12px * var(--rk)); }
/* authored h2s in richtext fragments demote to the designed sub-head scale —
   a 32px display heading mid-milestone outshouts the milestone title itself */
.mile-body .richtext h2 { font-family: var(--font-heading); font-size: 20px; line-height: 24px; letter-spacing: -0.01em; font-weight: 600; color: var(--color-text-primary); margin: calc(32px * var(--rk)) 0 0; }
.mile-body .richtext h2 + * { margin-top: calc(12px * var(--rk)); }
.mile-body p { font-size: 16px; line-height: 24px; max-width: var(--measure); text-wrap: pretty; }
.mile-body .prose-list { font-size: 15px; line-height: 24px; padding-left: 22px; max-width: var(--measure); }
/* richtext-fragment lists match the mile-body prose voice (16/24 secondary,
   measure-capped) — otherwise they fall through to the app bundle's richtext
   defaults: 17px/1.75, primary ink, full column width */
.mile-body .richtext ul, .mile-body .richtext ol,
.jy-preamble .richtext ul, .jy-preamble .richtext ol { font-size: 16px; line-height: 24px; color: var(--color-text-secondary); padding-left: 22px; margin: calc(12px * var(--rk)) 0 0; max-width: var(--measure); }
.mile-body .richtext li + li, .jy-preamble .richtext li + li { margin-top: 8px; }

/* ---- journey landing: postamble (closing sections after the route rail) ----
   Page level, flush with the milestone rail's column. Boxed children hang
   into the margin so their text shares the left edge (boxes hang, text
   aligns) — same rule as .flux on the hubs. */
.jy-postamble { margin-top: calc(48px * var(--rk)); }
.jy-postamble > * + * { margin-top: calc(20px * var(--rk)); }
.jy-postamble .richtext h2 { font-family: var(--font-heading); font-size: 28px; line-height: 32px; letter-spacing: -0.02em; font-weight: 650; margin: calc(40px * var(--rk)) 0 0; }
.jy-postamble .richtext h2:first-child { margin-top: 0; }
.jy-postamble .richtext h2 + * { margin-top: calc(12px * var(--rk)); }
.jy-postamble .richtext p { font-size: 16px; line-height: 24px; color: var(--color-text-secondary); max-width: var(--measure); text-wrap: pretty; }
.jy-postamble .richtext p + p { margin-top: calc(12px * var(--rk)); }
.jy-postamble .richtext ul, .jy-postamble .richtext ol { font-size: 16px; line-height: 24px; color: var(--color-text-secondary); padding-left: 22px; margin: calc(12px * var(--rk)) 0 0; max-width: var(--measure); }
.jy-postamble .richtext li + li { margin-top: 8px; }
@media (min-width: 721px) {
  .jy-postamble .guide-ref, .jy-postamble .callout { margin-inline: -25px; }
  /* the Ask Guv band shares the hung boxes' edge so the closing stack reads as one column of boxes */
  .brand-block.jy-aside { margin-inline: -25px; }
}
.mile-body .prose-list li + li { margin-top: 8px; }

/* ---- callout variants (YAML callout_type: info | warning) -------------------- */
.callout--warn { background: color-mix(in srgb, #f59e0b 9%, var(--color-bg-white)); border-color: color-mix(in srgb, #f59e0b 32%, transparent); }
.callout--warn .co-label { color: #92590a; }
.callout--warn .co-label svg { color: #d97706; }
.dark .callout--warn { background: color-mix(in srgb, #f59e0b 14%, var(--color-bg-white)); }
.dark .callout--warn .co-label { color: #fcd34d; }
.dark .callout--warn .co-label svg { color: #fbbf24; }

/* ---- data table (YAML core_content tables) ------------------------------------ */
.table-scroll { overflow-x: auto; }
/* richtext tables inside milestone bodies pick up the gv-table treatment */
.mile-body table, .mile-body .richtext table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.mile-body table th { text-align: left; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase; color: var(--color-text-muted); padding: 0 16px 10px 0; border-bottom: 2px solid var(--color-border); }
.mile-body table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--color-border-light); color: var(--color-text-secondary); vertical-align: top; }
.mile-body table td b, .mile-body table td strong { color: var(--color-text-primary); font-weight: 650; }
.mile-body table tr:last-child td { border-bottom: 0; }
.gv-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.gv-table th { text-align: left; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase; color: var(--color-text-muted); padding: 0 16px 10px 0; border-bottom: 2px solid var(--color-border); }
.gv-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--color-border-light); color: var(--color-text-secondary); vertical-align: top; }
.gv-table td b, .gv-table td strong { color: var(--color-text-primary); font-weight: 650; }
.gv-table tr:last-child td { border-bottom: 0; }
.gv-table .badge { white-space: nowrap; }

/* ---- compliance map (unordered journeys) ------------------------------------
   Sections are AREAS, not steps: no numbers, no implied sequence. Each area
   is a flat row: heading, one line of context, guide links. The old
   "Section N" important-callouts map to real h2s. */
.map-section { margin-top: calc(48px * var(--rk)); scroll-margin-top: 24px; }
/* tighten only when the map truly opens the column — a preamble callout
   before the first section keeps the full section margin */
.map-section:first-child { margin-top: calc(8px * var(--rk)); }
.map-section > h2 { font-size: 28px; line-height: 32px; letter-spacing: -0.02em; font-weight: 650; margin: 0; }
.map-section > .sec-intro { margin-top: 8px; }
.areas { display: flex; flex-direction: column; margin-top: calc(20px * var(--rk)); border-top: 1px solid var(--color-border-light); }
.area { position: relative; padding: calc(24px * var(--rk)) 0 calc(24px * var(--rk)) 32px; border-bottom: 1px solid var(--color-border-light); }
.area::before { content: ""; position: absolute; left: 3px; top: calc(24px * var(--rk) + 7px); width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); }
.area h3 { font-family: var(--font-heading); font-size: 20px; line-height: 24px; letter-spacing: -0.01em; font-weight: 600; margin: 0; }
.area > p { font-size: 15px; line-height: 24px; color: var(--color-text-secondary); margin: 6px 0 0; max-width: var(--measure); text-wrap: pretty; }
.area .atom { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--color-accent-text); }
.area .atom svg { width: 13px; height: 13px; }
.area .mile-guides { margin-top: 12px; gap: 6px; }
.area .ext { margin-top: 12px; }

/* requirement callout (YAML sector_callout type: requirement) */
.callout--req .co-label { color: #92590a; }
.callout--req .co-label svg { color: #d97706; }
/* headed variant: the icon moved onto the heading but the family signal didn't */
.callout--req .co-headed svg { color: #d97706; }
/* No max-width: it must fill the stream like its .snippet--card/.guide-ref siblings (narrow .route already caps the container at 720px). */
.callout--req { background: color-mix(in srgb, #f59e0b 9%, var(--color-bg-white)); border-color: color-mix(in srgb, #f59e0b 32%, transparent); margin-top: calc(16px * var(--rk)); }
.callout--req .who { font-size: 13px; line-height: 20px; color: var(--color-text-muted); margin-top: 10px; }
.callout--req .who b { color: var(--color-text-secondary); font-weight: 600; }
.callout--req .ext { display: inline-flex; } /* gap comes from the shared ext-footer rhythm in core.css */
.dark .callout--req { background: color-mix(in srgb, #f59e0b 14%, var(--color-bg-white)); }
.dark .callout--req .co-label { color: #fcd34d; }
.dark .callout--req .co-label svg { color: #fbbf24; }
.dark .callout--req .co-headed svg { color: #fbbf24; }

/* steprail map variant: dot markers, no sequence */
.steprail--map .m { width: 10px; height: 10px; border-width: 0; background: var(--color-accent); top: 9px; left: 7px; }
.steprail--map li { padding-left: 32px; }
.steprail--map li::after { display: none; }

@media print { .route > li, .guide-ref, .area { break-inside: avoid; } .steprail { position: static; } }