/* #85 Journey so far, a full-page 2D game (owner, 2026-10-05: "not a box within a screen"). The stage is the whole
   page: the app's graph paper used as a knowledge graph (time across, knowledge up), scrolling with the camera; the
   dateline, title, timeline tabs and "Continue" float over it like a game's display. */
.journey-page{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;row-gap:var(--vq-space-3);height:100%;overflow:hidden}
.journey-page>.journey-stage{grid-area:1/1/-1/-1;position:relative;min-height:0;overflow:hidden;background-color:var(--vq-paper);background-image:linear-gradient(var(--vq-grid-strong) 1px,transparent 1px),linear-gradient(90deg,var(--vq-grid-strong) 1px,transparent 1px);background-size:var(--vq-grid-size) var(--vq-grid-size);cursor:pointer}
/* The display: above the stage, with the page's gutter; taps go through it to the stage except on its controls. */
.journey-page>:not(.journey-stage){grid-column:1;position:relative;z-index:1;margin-inline:var(--vq-gutter);pointer-events:none}
.journey-page>:not(.journey-stage) button{pointer-events:auto}
.journey-caption{grid-row:1;margin-top:var(--vq-space-4)}
.journey-periods{grid-row:2}
/* The daily story on /student (journey-view.js) fills the page and hides the home and the tab bar until "Continue". */
.journey-story{height:100%;min-height:420px}
.student-surface:has(>.journey-story:not([hidden]))>:not(.journey-story){display:none}
body:has(.journey-story:not([hidden])) .app-tabbar{display:none}
.journey-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* The stairs as question cards stacked like a shelf (owner's photo, 2026-10-05): filled cards, boards and dividers
   like cubbies; tomorrow's cards empty dashed frames. */
.journey-cards{fill:var(--vq-accent);fill-opacity:.16;stroke:none}
.journey-board{stroke:var(--vq-accent);stroke-opacity:.45;stroke-width:1.5}
.journey-frame{stroke:var(--vq-success);stroke-opacity:.55;stroke-width:1.5;stroke-dasharray:4 5}
/* The brain's hop from one day's stairs to the next (Max, day by day), dotted once hopped. */
.journey-hop{fill:none;stroke:var(--vq-accent);stroke-opacity:.7;stroke-width:2;stroke-dasharray:1 6;stroke-linecap:round}
.journey-trail{fill:none;stroke:var(--vq-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.journey-hero{position:absolute;left:0;top:0;width:calc(var(--vq-grid-size) * 2.5);transform-origin:50% 50%;pointer-events:none}
.journey-hero img{display:block;width:100%;height:auto;transform-origin:50% 50%}
/* "You are here": the brain breathes and a ring ripples from today's point (still under reduced motion). */
.journey-hero.is-here img{animation:journey-pulse 1.6s ease-in-out infinite}
.journey-here{fill:none;stroke:var(--vq-accent);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:journey-ripple 1.6s ease-out infinite}
@keyframes journey-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes journey-ripple{from{transform:scale(.9);opacity:1}to{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.journey-hero.is-here img,.journey-here{animation:none}}
/* The road ahead (#85): the projection at the last 7 days' pace, dashed, to the boards; the end game under the summary. */
.journey-ahead{fill:none;stroke:var(--vq-success);stroke-width:2.5;stroke-dasharray:6 6;stroke-linecap:round}
/* The road ahead is a call to climb on the child's phone: a tap there starts today's practice. */
.journey-star-call{fill:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-xs) var(--vq-font);paint-order:stroke;stroke:var(--vq-paper);stroke-width:4px;stroke-linejoin:round}
.journey-ahead-call{fill:var(--vq-success);font:var(--vq-weight-bold) var(--vq-text-sm) var(--vq-font);paint-order:stroke;stroke:var(--vq-paper);stroke-width:4px;stroke-linejoin:round}
/* The two hero numbers (owner, 2026-10-05: "too much text"): the score (so far, then projected at the boards) and
   the days to the boards. Together they are the screen's title. */
.journey-stats{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--vq-space-4);margin:0}
.journey-stat{display:grid;gap:var(--vq-space-1)}
.journey-stat:last-child{text-align:right}
.journey-stat strong{color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-2xl)/1 var(--vq-font);letter-spacing:var(--vq-tracking-tight)}
.journey-stat small{color:var(--vq-ink-muted);font:var(--vq-weight-bold) var(--vq-text-xs)/1.3 var(--vq-font);letter-spacing:.08em;text-transform:uppercase}
/* Reading the graph like a stock chart (#85): a crosshair and the point's time (or date) and score. Dragging a
   finger across the stage reads it, so the stage takes the touch instead of scrolling. */
.journey-page>.journey-stage{touch-action:none}
.journey-scrub-line{stroke:var(--vq-ink-muted);stroke-width:1.5;stroke-dasharray:4 4}
.journey-scrub-dot{fill:var(--vq-accent);stroke:var(--vq-paper);stroke-width:2}
.journey-scrub-label{fill:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-sm) var(--vq-font);paint-order:stroke;stroke:var(--vq-paper);stroke-width:4px;stroke-linejoin:round}
/* The view's parts (before | now | next): faint dividers and their names at the bottom, the only text on the graph. */
.journey-divider{stroke:var(--vq-ink-subtle);stroke-width:1;stroke-dasharray:2 6}
.journey-part{fill:var(--vq-ink-muted);font:var(--vq-weight-bold) var(--vq-text-xs) var(--vq-font);letter-spacing:.08em;text-transform:uppercase}
/* Like full-screen map navigation (owner, 2026-10-05): the graph is the whole screen and the controls float on it,
   the numbers on a card, the views on a pill, and a round control at the bottom right (the bottom-left corner is
   the graph's origin). */
.journey-caption{padding:var(--vq-space-3) var(--vq-space-4);border:var(--vq-border);border-radius:var(--vq-radius-lg);background:var(--vq-surface)}
.journey-periods{background:var(--vq-surface)}
.journey-page>.journey-control{position:absolute;margin:0;right:var(--vq-gutter);bottom:var(--vq-space-5);z-index:2;display:grid;place-items:center;width:var(--vq-button-height);height:var(--vq-button-height);padding:0;border:var(--vq-border);border-radius:var(--vq-radius-pill);background:var(--vq-surface);color:var(--vq-ink);cursor:pointer;pointer-events:auto}
.journey-page>.journey-control svg{width:24px;height:24px;stroke-width:2.4}
.journey-page>.journey-control:focus-visible{outline:3px solid var(--vq-focus);outline-offset:2px}
/* Share the climb (#85): stacked above the close, as map controls stack; what happened (copied, couldn't share) beside it. */
.journey-page>.journey-control--share{bottom:calc(var(--vq-space-5) + var(--vq-button-height) + var(--vq-space-3))}
.journey-page>.journey-status{position:absolute;margin:0;right:calc(var(--vq-gutter) + var(--vq-button-height) + var(--vq-space-3));bottom:calc(var(--vq-space-5) + var(--vq-button-height) + var(--vq-space-3));z-index:2;color:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-sm) var(--vq-font)}
.journey-page>.journey-status:empty{display:none}
/* Like Gapminder's year (owner, 2026-10-05): the date the brain stands on, big and faint behind the climb. */
.journey-date{position:absolute;inset-inline:0;top:50%;margin:0;transform:translateY(-50%);text-align:center;color:var(--vq-ink-subtle);opacity:.22;font:var(--vq-weight-bold) calc(var(--vq-text-2xl) * 2.5)/1 var(--vq-font);letter-spacing:var(--vq-tracking-tight);font-variant-numeric:tabular-nums;pointer-events:none;user-select:none}
/* The timeline: play or pause, and a slider through the story, along the bottom beside the round controls. */
.journey-page>.journey-timeline{grid-row:4;display:flex;align-items:center;gap:var(--vq-space-2);height:var(--vq-button-height);margin-block-end:var(--vq-space-5);margin-inline-end:calc(var(--vq-gutter) + var(--vq-button-height) + var(--vq-space-3));padding-inline:var(--vq-space-2) var(--vq-space-4);border:var(--vq-border);border-radius:var(--vq-radius-pill);background:var(--vq-surface);pointer-events:auto}
.journey-toggle{display:grid;place-items:center;flex:none;width:var(--vq-space-6);height:var(--vq-space-6);padding:0;border:0;border-radius:var(--vq-radius-pill);background:transparent;color:var(--vq-ink);cursor:pointer}
.journey-toggle svg{width:20px;height:20px;stroke-width:2.4}
.journey-toggle:focus-visible{outline:3px solid var(--vq-focus);outline-offset:2px}
.journey-toggle .lucide-pause,.journey-toggle.is-playing .lucide-play{display:none}
.journey-toggle.is-playing .lucide-pause{display:block}
.journey-range{flex:1;min-width:0;margin:0;accent-color:var(--vq-accent);cursor:pointer}
/* The ticker under the score (#85): green and rising when the stairs climbed today; quiet otherwise. */
.journey-stat .journey-change{color:var(--vq-ink-muted);font:var(--vq-weight-bold) var(--vq-text-xs)/1.3 var(--vq-font);letter-spacing:0;text-transform:none;white-space:nowrap}
.journey-stat .journey-change.is-up{color:var(--vq-success)}
/* Milestones on the path (#85): the start flag, then a gold flag with its number every 5%; the next star's gold star. */
.journey-mark{stroke:var(--vq-ink);stroke-width:1.5;stroke-linejoin:round}
.journey-mark--mastered{fill:var(--vq-warning)}
.journey-mark--start{fill:var(--vq-accent)}
.journey-mark--level{fill:var(--vq-warning)}
.journey-mark-label{fill:var(--vq-ink);font:var(--vq-weight-bold) var(--vq-text-xs) var(--vq-font);paint-order:stroke;stroke:var(--vq-paper);stroke-width:4px;stroke-linejoin:round}
.journey-mark-pole{stroke:var(--vq-ink);stroke-width:1.5}
/* The hike (#85, journey-hike.js): full-screen cards, a day each, like Stories. Each card draws its day top left and
   its score top right (owner: "part of the slide, not floating"); the brain fixed (its feet on the path), shaking. */
.hike-card-day,.hike-card-score{fill:var(--vq-ink);font-family:var(--vq-font);font-size:var(--vq-text-2xl);font-weight:var(--vq-weight-bold);letter-spacing:var(--vq-tracking-tight);paint-order:stroke;stroke:var(--vq-paper);stroke-width:6px;stroke-linejoin:round}
/* One card: where each day begins, a dashed line labelled with that day. */
.hike-boundary{stroke:var(--vq-accent);stroke-opacity:.7;stroke-width:1.5;stroke-dasharray:6 6}
.hike-boundary-label{fill:var(--vq-ink-muted);font-family:var(--vq-font);font-size:var(--vq-text-xs);font-weight:var(--vq-weight-bold);paint-order:stroke;stroke:var(--vq-paper);stroke-width:4px;stroke-linejoin:round}
/* Question hurdles: one cell tall on the path, a character a cell (Q|7), plain tiles after. */
.hike-tile{fill:var(--vq-surface);stroke:var(--vq-accent);stroke-width:1.5}
.hike-tile-char{fill:var(--vq-ink);font-family:var(--vq-font);font-weight:var(--vq-weight-bold)}
/* Each day a card (owner: "I need to see the card borders"): graph paper inside a bordered, rounded card on the
   stage's surface; the next card slides in beside it. The brain stands where journey-hike.js puts its feet. */
.journey-page>.journey-stage.hike-stage{background:var(--vq-surface)}
.hike-card{fill:var(--vq-paper)}
.hike-grid-line{fill:none;stroke:var(--vq-grid-strong);stroke-width:1}
.hike-border{fill:none;stroke:var(--vq-ink-subtle);stroke-width:1.5}
.hike-date{fill:var(--vq-ink-subtle);font-family:var(--vq-font);font-weight:var(--vq-weight-bold);letter-spacing:var(--vq-tracking-tight)}
.hike-hero{position:absolute;left:50%;top:50%;width:var(--vq-grid-size);transform:translate(-50%,-100%) scaleX(-1);pointer-events:none;z-index:1}
.hike-hero img{display:block;width:100%;height:auto}
.hike-hero--blink img{animation:hike-blink var(--hike-blink-ms,500ms) step-end infinite}
@keyframes hike-blink{50%{opacity:0}}
.hike-feed-card{fill:var(--vq-surface);stroke:var(--vq-line);stroke-width:1.5}
.hike-feed-reply{fill:var(--vq-accent-soft);stroke:var(--vq-accent);stroke-width:1.5}
.hike-feed-reply--waiting{stroke-dasharray:4 3}
.hike-feed-mark--right{fill:var(--vq-success)}
.hike-feed-mark--wrong{fill:var(--vq-danger)}
.hike-feed-meta{fill:var(--vq-ink-muted);font-weight:var(--vq-weight-medium)}
.hike-feed-divider{stroke:var(--vq-accent);stroke-opacity:.7;stroke-width:1.5;stroke-dasharray:6 6}
.hike-feed-header{fill:var(--vq-paper)}
.hike-feed-now{cursor:pointer}
.hike-feed-now rect{fill:var(--vq-ink)}
.hike-feed-now text{fill:var(--vq-on-ink);font-family:var(--vq-font);font-size:var(--vq-text-sm);font-weight:var(--vq-weight-bold)}
@media (prefers-reduced-motion:reduce){.hike-hero img{animation:none}}