/* ============================================================
   EXPEDITION DIAGNOSTIC v4 · the flow (/diagnostic) and the
   results page (/report). Built on tokens.css and components.css.
   Replaces diagnostic.css and report.css.
   ============================================================ */

/* ── The flow ── */
.dx-page[hidden] { display: none; }
.dx-page { min-height: 85vh; padding: calc(var(--nav-h) + var(--space-6)) var(--gutter) var(--space-8); background: var(--bg); }
#dx { max-width: 760px; margin: 0 auto; }

.dx-card {
    container-type: inline-size;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 768px) { .dx-card { padding: var(--space-6) var(--space-7); } }
.dx-card.dx-enter { opacity: 0; transform: translateY(8px); }

.dx-progress { margin-bottom: var(--space-5); }
.dx-top { display: flex; align-items: center; gap: var(--space-4); min-height: var(--tap); }
.dx-back { color: var(--ink-muted); }
.dx-leg { margin-left: auto; font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); text-align: right; }
.dx-ascent { height: 3px; margin-top: var(--space-2); border-radius: 3px; background: var(--line); overflow: hidden; }
.dx-ascent span { display: block; height: 100%; background: var(--accent); transition: width var(--dur) var(--ease); }

.dx-question { margin-bottom: var(--space-5); font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); font-weight: 400; line-height: 1.25; outline: none; }
.dx-q .scale-ends { max-width: none; }
.dx-continue { margin-top: var(--space-5); }
.dx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-4); }
.dx-thought { min-height: 96px; }

/* The six-point statement scale: stacked on phones, one row when the card is wide */
.dx-likert { grid-template-columns: 1fr; }
@container (min-width: 600px) {
    .dx-likert { grid-template-columns: repeat(6, 1fr); }
    .dx-likert .option { justify-content: center; text-align: center; min-height: 72px; padding: var(--space-3) var(--space-2) var(--space-6); font-size: var(--text-sm); }
    .dx-likert .option[aria-checked="true"]::after { right: auto; left: 50%; top: auto; bottom: 12px; margin: 0 0 0 -4px; }
}
.dx-q .scale { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@container (min-width: 520px) {
    .dx-q .scale { grid-template-columns: repeat(10, minmax(44px, 52px)); }
}
.dx-q .options-2, .dx-q .options-3 { grid-template-columns: 1fr; }
@container (min-width: 480px) { .dx-q .options-2 { grid-template-columns: 1fr 1fr; } }
@container (min-width: 540px) { .dx-q .options-3 { grid-template-columns: repeat(3, 1fr); } }

.dx-intro > * + * { margin-top: var(--space-4); }
.dx-intro .h2 { outline: none; }
.dx-intro .btn { margin-top: var(--space-6); }
.dx-breath { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; outline: none; }

.dx-gate > * + * { margin-top: var(--space-4); }
.dx-gate .h2 { outline: none; }
.dx-gate .btn { margin-top: var(--space-5); }
.dx-pair { display: grid; gap: var(--space-4); }
@container (min-width: 480px) { .dx-pair { grid-template-columns: 1fr 1fr; } }

/* ── The results page ── */
.rp-body { background: var(--bg); }
.rp-status { max-width: 760px; margin: 0 auto; padding: calc(var(--nav-h) + var(--space-8)) var(--gutter); font-size: var(--text-lg); }
.rp-in { max-width: 760px; margin: 0 auto; }
.rp-top .rp-in { max-width: 1180px; }

/* Top screen: dark, like the photo heroes */
.rp-top { padding: calc(var(--nav-h) + var(--space-6)) var(--gutter) var(--space-7); background: var(--dark); color: var(--on-dark); }
.rp-top-grid { display: grid; gap: var(--space-5); grid-template-areas: "head" "side" "intro"; }
.rp-top-head { grid-area: head; }
.rp-top-side { grid-area: side; display: grid; gap: var(--space-4); }
.rp-top-intro { grid-area: intro; }
.rp-top-intro > * + * { margin-top: var(--space-4); }
@media (min-width: 960px) {
    .rp-top { padding-top: calc(var(--nav-h) + var(--space-8)); padding-bottom: var(--space-8); }
    .rp-top-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto 1fr; grid-template-areas: "head side" "intro side"; column-gap: var(--space-8); row-gap: var(--space-4); align-items: start; }
}
.rp-line { font-size: var(--text-sm); color: var(--on-dark-muted); }
.rp-pattern { margin-top: var(--space-2); font-family: var(--font-display); font-size: clamp(2.3rem, 1.6rem + 3.4vw, 4.6rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.02em; outline: none; }
.rp-second { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--on-dark-muted); }
.rp-words { font-size: var(--text-lg); color: var(--on-dark-cream); }
.rp-opening { color: var(--on-dark-muted); max-width: 60ch; }
.rp-top .notice { background: rgba(233, 130, 30, 0.14); color: var(--on-dark); }

.rp-map, .rp-next { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--dark-2); }
.rp-map .eyebrow, .rp-next .eyebrow { margin-bottom: var(--space-3); }
.rp-bars { list-style: none; display: grid; gap: var(--space-2); }
.rp-bar, .rp-fuel { display: grid; grid-template-columns: 7.8rem 1fr 5.4rem; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.rp-fuel { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line-on-dark); }
.rp-bar-name { color: var(--on-dark); }
.rp-bar-tier { color: var(--on-dark-muted); text-align: right; font-size: var(--text-xs); }
.rp-bar-track { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.rp-bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.rp-fuel-segs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.rp-seg { height: 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
.rp-seg.is-on { background: var(--sky); }
.rp-trend { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--on-dark-muted); }
.rp-next-text { color: var(--on-dark); }
.rp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-4); }
.rp-retake { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.rp-inline { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.rp-inline p, .rp-inline .check { flex-basis: 100%; }
.rp-inline .field-input { flex: 1 1 200px; }
.rp-done { outline: none; }

/* Numbered sections */
.rp-section { padding: var(--section-y) var(--gutter); background: var(--bg); }
.rp-section.alt { background: var(--surface-2); }
.rp-in > * + * { margin-top: var(--space-4); }
.rp-num { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; color: var(--accent-text); }
.rp-h { margin-top: var(--space-2) !important; margin-bottom: var(--space-5); }
.rp-in > .eyebrow, .rp-in h3.eyebrow { margin-top: var(--space-6); margin-bottom: 0; }
.rp-big { font-size: var(--text-lg); line-height: 1.55; }
.rp-evidence { list-style: none; display: grid; gap: var(--space-2); }
.rp-evidence li { padding-left: var(--space-4); border-left: 2px solid var(--accent); font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); }
.rp-ev-lead { font-family: var(--font-body); font-style: normal; font-size: var(--text-sm); color: var(--ink-muted); }
.rp-thought { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); }

.rp-readings { display: grid; gap: var(--space-4); }
.rp-reading { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.rp-reading.is-marked { box-shadow: inset 0 0 0 1.5px var(--accent), var(--shadow); }
.rp-reading > * + * { margin-top: var(--space-3); }
.rp-reading-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.rp-reading-name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; }
.rp-reading-tier { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.rp-tag { margin-left: auto; padding: 2px var(--space-3); border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-size: var(--text-xs); font-weight: 600; }
.rp-blind { padding: var(--space-3) var(--space-4); border-left: 3px solid var(--sky); background: rgba(141, 201, 222, 0.14); font-size: var(--text-sm); }

.rp-tool { margin-top: var(--space-6) !important; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); }
.rp-tool > * + * { margin-top: var(--space-3); }
.rp-tool-steps { padding-left: 1.3em; display: grid; gap: var(--space-2); }
.rp-clues { padding-left: 1.1em; display: grid; gap: var(--space-2); color: var(--ink-muted); font-size: var(--text-sm); }

/* Route trail: across on desktop, down on phones */
.rp-trail { list-style: none; display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .rp-trail { grid-template-columns: repeat(5, 1fr); gap: var(--space-3); } }
.rp-trail-step { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: var(--space-1) var(--space-3); align-items: center; }
@media (min-width: 760px) { .rp-trail-step { grid-template-columns: 1fr; text-align: left; } }
.rp-trail-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink-muted); background: var(--bg); }
.rp-trail-step.is-done .rp-trail-dot { background: var(--ink-muted); }
.rp-trail-step.is-next .rp-trail-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.rp-trail-name { font-weight: 600; }
.rp-trail-step.is-next .rp-trail-name { color: var(--accent-text); }
.rp-trail-note { grid-column: 2; font-size: var(--text-sm); color: var(--ink-muted); }
@media (min-width: 760px) { .rp-trail-note { grid-column: 1; } }

.rp-end { padding-top: var(--space-7); }
.rp-closing { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.rp-closing > * + * { margin-top: var(--space-3); }
.rp-safety { margin-bottom: var(--space-5); }
.rp-footnote { margin-top: var(--space-6) !important; font-size: var(--text-sm); color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) {
    .dx-card, .dx-ascent span { transition: none !important; }
    .dx-card.dx-enter { opacity: 1; transform: none; }
}
@media print {
    .nav, .footer, .rp-actions, .rp-closing .rp-actions { display: none !important; }
    .rp-top { background: none; color: var(--ink); padding-top: var(--space-5); }
}

/* ── The landing page (copy v5): the hero and sections come from pages.css (f-hero-split, pg).
   While the steps run, the landing is hidden and .dx-page is the plain light page. ── */
.dx-start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.f-hero .dx-start { margin-top: 0 !important; }
.dx-start-end { margin-top: var(--space-6) !important; }
.f-hero .dx-carry { max-width: 580px; margin: calc(-1 * var(--space-5)) 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-lg); font-style: italic; color: var(--on-dark); }
/* The Start buttons appear when the script runs: keep their row, so nothing below them moves */
.dx-start[data-dx-actions], .dx-start-end { min-height: var(--tap); }