/* Paid-question journey. Inherits the shared page theme. */
.journey-details { margin-top: var(--space-5); border-block: 1px solid var(--border); scroll-margin-top: calc(var(--nav-height, 64px) + var(--space-4)); }
.journey-details > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 56px; padding-block: var(--space-4); color: var(--accent-text); font-size: var(--type-body-m); font-weight: 500; list-style: none; cursor: pointer; }
.journey-details > summary::-webkit-details-marker { display: none; }
.journey-details > summary:hover { color: var(--accent-text-hover); }
.journey-details > summary .journey-chevron { width: 20px; height: 20px; transition: transform var(--motion-fast) var(--motion-ease); }
.journey-details[open] > summary .journey-chevron { transform: rotate(180deg); }
.journey-details-content { padding-block: var(--space-3) var(--space-5); }
.question-journey h2, .question-journey h3, .question-journey h4 { font-family: var(--font-body); font-weight: 600; color: var(--text-strong); }
.journey-map, .journey-branch { padding: var(--space-5); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.journey-map-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); border-bottom: 1px solid var(--border); padding-bottom: var(--space-5); }
.journey-map-label { color: var(--text-primary); font-size: var(--type-body-m); font-weight: 500; }
.journey-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; font-size: var(--type-body-s); }
.journey-legend li { display: flex; align-items: center; gap: var(--space-2); }
.journey-legend li::before { content: ''; width: var(--space-2); height: var(--space-2); border-radius: 50%; background: currentColor; }
.journey-legend li:nth-child(1) { color: var(--actor-fan); }
.journey-legend li:nth-child(2) { color: var(--actor-creator); }
.journey-legend li:nth-child(3) { color: var(--actor-platform); }
.journey-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding-top: var(--space-5); }
.journey-stage { --actor-color: var(--actor-creator); --actor-bg: var(--accent-soft); position: relative; display: flex; flex-direction: column; min-width: 0; padding-right: var(--space-5); }
.journey-stage:nth-child(1), .journey-stage:nth-child(3) { --actor-color: var(--actor-fan); --actor-bg: var(--actor-fan-bg); }
.journey-stage-paid { --actor-color: var(--actor-platform); --actor-bg: var(--surface-subtle); }
.journey-stage:last-child { padding-right: 0; }
.journey-stage:not(:last-child)::before { content: ''; position: absolute; top: 16px; left: 32px; right: 0; height: 1px; background: var(--border-strong); }
.journey-station { display: flex; align-items: center; gap: var(--space-2); color: var(--actor-color); font-size: var(--type-body-xs); font-weight: 500; position: relative; z-index: 1; }
.journey-station > span:last-child { background: var(--surface-raised); padding-right: var(--space-2); }
.journey-number { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid currentColor; border-radius: var(--radius-md); background: var(--surface-raised); font-size: var(--type-body-xs); font-variant-numeric: tabular-nums; }
.journey-visual { display: flex; align-items: center; gap: var(--space-4); min-height: var(--space-8); margin-block: var(--space-4); color: var(--actor-color); }
.journey-icon { display: grid; place-items: center; width: var(--space-7); height: var(--space-7); border-radius: var(--radius-lg); background: var(--actor-bg); }
.question-journey svg { width: 24px; height: 24px; flex-shrink: 0; }
.journey-clock { font: 500 var(--type-display-l)/1.1 var(--font-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.journey-clock-unit { margin-left: var(--space-2); font: 500 var(--type-body-m)/1.5 var(--font-body); letter-spacing: 0; }
.journey-stage h3 { font-size: var(--type-heading); line-height: 1.2; letter-spacing: -0.015em; margin-bottom: var(--space-3); }
.journey-stage > p { color: var(--text-muted); font-size: var(--type-body-m); line-height: 1.5; letter-spacing: -0.005em; margin-bottom: var(--space-4); }
.journey-stage strong { color: var(--text-primary); font-weight: 500; }
.journey-caption, .journey-branch-link { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; margin-top: auto; font-size: var(--type-body-xs); }
.journey-caption { color: var(--text-muted); }
.journey-caption-paid { color: var(--actor-platform); }
.journey-caption svg, .journey-branch-link svg { width: 16px; height: 16px; }
.journey-branch-link { width: fit-content; color: var(--accent-text); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; transition: color var(--motion-fast) var(--motion-ease); }
.journey-branch-link:hover { color: var(--accent-text-hover); }
.journey-branch-link:active { color: var(--text-strong); }
.journey-branch-link:focus-visible, .journey-branch:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-md); }
.journey-branches { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-5); }
.journey-branch { scroll-margin-top: calc(var(--nav-height, 64px) + var(--space-4)); }
.journey-branch:target { border-color: var(--focus-ring); }
.journey-branch-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
.journey-eyebrow { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--type-body-s); }
.journey-kind { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); color: var(--text-muted); background: var(--surface-subtle); font-size: var(--type-body-xs); font-weight: 500; }
.journey-branch h3 { font-size: var(--type-display-s); line-height: 1.2; letter-spacing: -0.015em; margin-bottom: var(--space-3); }
.journey-branch > p { color: var(--text-muted); font-size: var(--type-body-m); line-height: 1.5; }
.journey-fan-action { color: var(--actor-fan); font-weight: 500; }
.journey-refund-reasons { display: grid; gap: var(--space-5); list-style: none; margin-block: var(--space-5); }
.journey-refund-reasons li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--actor-platform); }
.journey-refund-reasons li:first-child { color: var(--actor-creator); }
.journey-refund-reasons strong { display: block; font-size: var(--type-body-m); font-weight: 500; }
.journey-refund-reasons div > span { display: block; color: var(--text-muted); font-size: var(--type-body-s); margin-top: var(--space-1); }
.journey-refund-result { display: flex; align-items: flex-start; gap: var(--space-2); border-top: 1px solid var(--border); padding-top: var(--space-4); color: var(--actor-platform); font-size: var(--type-body-s); }
.journey-refund-result svg { width: 20px; height: 20px; }
.journey-decisions { display: grid; gap: var(--space-5); margin-top: var(--space-5); padding-left: var(--space-4); border-left: 1px solid var(--border-strong); }
.journey-decision { position: relative; display: flex; align-items: flex-start; gap: var(--space-2); color: var(--actor-platform); }
.journey-decision::before { content: ''; position: absolute; left: -16px; top: 12px; width: 16px; height: 1px; background: var(--border-strong); }
.journey-decision h4 { font-size: var(--type-body-m); font-weight: 500; line-height: 1.5; }
.journey-decision p { color: var(--text-muted); font-size: var(--type-body-s); line-height: 1.5; margin-top: var(--space-1); }
.journey-footnote { max-width: 640px; margin-inline: auto; color: var(--text-muted); font-size: var(--type-body-s); text-align: center; margin-top: var(--space-6); }

@media (max-width: 1023px) {
  .journey-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
  .journey-stage { padding-right: 0; }
  .journey-stage::before { display: none; }
  .journey-stage:nth-child(odd) { padding-right: var(--space-5); border-right: 1px solid var(--border); }
  .journey-stage:nth-child(n+3) { padding-top: var(--space-5); border-top: 1px solid var(--border); }
  .journey-branches { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .journey-map, .journey-branch { padding: var(--space-4); }
  .journey-map-top { align-items: flex-start; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-4); }
  .journey-stages { display: block; padding-top: var(--space-5); }
  .journey-stage, .journey-stage:nth-child(odd), .journey-stage:nth-child(n+3) { padding: 0 0 var(--space-6) var(--space-7); border: none; }
  .journey-stage:last-child { padding-bottom: 0; }
  .journey-stage:not(:last-child)::before { display: block; left: 16px; right: auto; top: 16px; bottom: -16px; width: 1px; height: auto; }
  .journey-station { margin-left: calc(-1 * var(--space-7)); gap: var(--space-4); font-size: var(--type-body-s); }
  .journey-station > span:last-child { background: none; }
  .journey-visual { margin-block: var(--space-3); }
  .journey-clock { font-size: var(--type-display-m); }
  .journey-branches { gap: var(--space-4); margin-top: var(--space-4); }
}