/**
 * Journey-first navigation (2026-08-11 IA change).
 *
 * The module icon strip that used to sit under the header is gone; the top row
 * now carries the member's position in the 32-step journey, and the modules
 * moved to a right-side tray behind the header's grid icon.
 *
 * Every measurement below is transcribed from the prototype's rendered DOM —
 * docs/design-reference/extracted/nav-hub-journey-rail.html (+ -core-written),
 * nav-journey-chapter-popover.html, nav-step-condensed-bar.html,
 * nav-modules-tray-open.html and nav-journey-complete.html — with its
 * component source (nav-journey-first-source.jsx.js) as the cross-check.
 *
 * Literal pixel sizes from the captures are written calc(Npx * var(--text-scale))
 * — identical to the reference at the default text size, while keeping
 * Settings -> text size working. That is the convention components/drawers.css
 * established.
 */

/* ── The chrome band ─────────────────────────────────────────────────────── */

/* Header-adjacent bars live in one sticky band so --chrome-height (published
   by chrome_height_controller, consumed by the right-side trays) measures the
   same edge in all three variants — including the complete state, which
   stacks two bars. */
.app-chrome {
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}

.journey-bar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  padding: 0.35rem var(--pad-x);
  position: relative;
  z-index: 6;
}

/* ── Shared pieces: hub pill, connectors, continue ───────────────────────── */

.journey-rail,
.journey-line {
  display: flex;
  align-items: center;
  /* Centered (owner, 2026-08-11): with the Continue button gone the line is
     pure orientation, so it reads as a centered caption for the page. */
  justify-content: center;
  max-width: var(--width-app);
  margin: 0 auto;
}

/* The rail must NOT clip: the chapter popovers hang below their nodes. */
.journey-rail {
  gap: 0.35rem;
  overflow: visible;
}

.journey-line {
  gap: 0.75rem;
  overflow-x: auto;
}

.journey-hub-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-shrink: 0;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 0.55rem;
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: calc(12.5px * var(--text-scale));
  text-decoration: none;
  cursor: pointer;
}

.journey-hub-pill i {
  font-size: calc(15.5px * var(--text-scale));
}

.journey-hub-pill.is-current,
.journey-hub-pill:hover {
  background: var(--bg-primary);
  box-shadow: var(--shadow-sm);
  color: var(--navy-primary);
}

.journey-rail-divider {
  width: 1px;
  height: 22px;
  background: var(--border-light);
  flex-shrink: 0;
  margin: 0 0.2rem;
}

.journey-line .journey-rail-divider {
  margin: 0;
}

/* The connecting rail between two chapter nodes, lit once the chapter behind
   it is complete. */
.journey-rail-link {
  flex: 1 1 12px;
  min-width: 12px;
  max-width: 46px;
  height: 2px;
  background: var(--border-light);
}

.journey-rail-link.is-lit {
  background: var(--teal-accent);
  opacity: 0.55;
}

.journey-rail-spacer {
  flex: 1 1 12px;
  min-width: 8px;
}

/* A complete journey renders no Continue button, so the spacer is the row's
   last child — and a growing spacer with nothing after it just shoves the
   chapter nodes off-center (owner, 2026-08-14). */
.journey-rail-spacer:last-child {
  flex: 0 0 0px;
  min-width: 0;
}

.journey-continue {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  min-height: var(--tap);
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--teal-accent);
  background: var(--teal-light);
  color: var(--teal-ink);
  cursor: pointer;
  max-width: 320px;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.journey-continue:hover,
.journey-continue:focus-visible {
  background: var(--teal-fill);
  color: #fff;
}

.journey-continue i {
  font-size: calc(15px * var(--text-scale));
}

.journey-continue-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  min-width: 0;
}

.journey-continue-label {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: calc(11px * var(--text-scale));
  opacity: 0.8;
}

.journey-continue-title {
  font-family: var(--font-body);
  font-size: calc(13.5px * var(--text-scale));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 230px;
}

/* ── The full rail's chapter nodes ───────────────────────────────────────── */

.journey-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.journey-node-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
  padding: 0.2rem 0.45rem 0.2rem 0.2rem;
  border: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.journey-node-btn.is-current {
  background: var(--bg-primary);
  box-shadow: var(--shadow-sm);
}

.journey-node-mark {
  /* Positioned so the ceremony ripple (::after, below) can anchor to it. */
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: calc(13px * var(--text-scale));
  letter-spacing: 0.02em;
  background: var(--bg-primary);
  color: var(--text-secondary);
  border: 1px solid var(--border-medium);
}

.journey-node-mark i {
  font-size: calc(15px * var(--text-scale));
}

.journey-node-btn.is-complete .journey-node-mark,
.journey-node-btn.is-current .journey-node-mark {
  background: var(--teal-fill);
  color: #fff;
  border-color: var(--teal-accent);
}

/* Only the chapter the member is standing in wears the ring. */
.journey-node-btn.is-current .journey-node-mark {
  box-shadow: 0 0 0 4px rgba(72, 156, 184, 0.2);
}

.journey-node-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  text-align: left;
}

.journey-node-title {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: calc(12.5px * var(--text-scale));
  white-space: nowrap;
  font-weight: 500;
  color: var(--text-secondary);
}

.journey-node-btn.is-complete .journey-node-title,
.journey-node-btn.is-current .journey-node-title {
  color: var(--navy-primary);
}

.journey-node-btn.is-current .journey-node-title {
  font-weight: 600;
}

.journey-node-state {
  font-family: var(--font-body);
  font-size: calc(11.5px * var(--text-scale));
  white-space: nowrap;
  color: var(--text-muted);
}

.journey-node-btn.is-complete .journey-node-state {
  color: var(--teal-ink);
}

/* ── Chapter popover ─────────────────────────────────────────────────────── */

/* Hover is DEFERRED, macOS-dock style: sweeping the pointer across the rail
   must not ripple every popover open, so opening waits out a 180ms
   hover-intent delay while closing is immediate. Same idiom the old module
   nav used, and CSS rather than a JS timer — nothing to leak on disconnect.
   :focus-within is what opens it from the keyboard. */
.journey-node-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: 250px;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  padding: 0.7rem 0.8rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--motion-quick) var(--ease-out), visibility 0s linear var(--motion-quick);
}

/* :focus-visible, not :focus-within: a mouse click leaves the node focused,
   which pinned the popover open over the hub hero until the member clicked
   elsewhere. Keyboard focus still shows it; a mouse click does not. */
.journey-node:hover .journey-node-pop,
.journey-node:has(:focus-visible) .journey-node-pop {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--motion-quick) var(--ease-out) var(--hover-intent), visibility 0s linear var(--hover-intent);
}

/* The last two nodes sit close enough to the right edge that a left-anchored
   popover would run off the shell. */
.journey-node:nth-last-of-type(-n + 2) .journey-node-pop {
  left: auto;
  right: 0;
}

.journey-pop-title {
  font-family: var(--font-heading);
  font-size: calc(15px * var(--text-scale));
  color: var(--navy-primary);
  margin-bottom: 3px;
}

.journey-pop-blurb {
  font-family: var(--font-body);
  font-size: calc(13.5px * var(--text-scale));
  color: var(--text-secondary);
  line-height: 1.5;
}

.journey-pop-steps {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.journey-pop-step {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  font-family: var(--font-body);
  font-size: calc(13px * var(--text-scale));
  color: var(--text-dark);
  text-decoration: none;
}

.journey-pop-step:hover {
  color: var(--teal-ink);
  text-decoration: underline;
}

.journey-pop-step i {
  font-size: calc(11px * var(--text-scale));
  color: var(--border-medium);
}

.journey-pop-step.is-done {
  color: var(--text-muted);
}

.journey-pop-step.is-done i {
  color: var(--teal-ink);
}

.journey-pop-more {
  font-family: var(--font-body);
  font-size: calc(12.5px * var(--text-scale));
  color: var(--text-muted);
  padding-left: 1.05rem;
}

/* ── The condensed line (module pages) ───────────────────────────────────── */

.journey-line-where {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex-shrink: 0;
}

.journey-line-chapter {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: calc(12px * var(--text-scale));
  color: var(--navy-primary);
  white-space: nowrap;
}

.journey-meter {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

/* One segment per step in this chapter. The bar it draws is 4px tall; the hit
   target is a full 44px, extended with a pseudo-element rather than a taller
   box so the whole line stays the ~37px the design calls for. */
.journey-seg {
  position: relative;
  width: 24px;
  min-height: var(--tap);
  padding: 0;
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  cursor: pointer;
}

.journey-seg::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.journey-seg.is-here {
  width: 34px;
}

.journey-seg-bar {
  display: block;
  width: 100%;
  height: 4px;
  background: var(--border-light);
  border-radius: var(--radius-full);
}

.journey-seg.is-done .journey-seg-bar,
.journey-seg.is-here .journey-seg-bar {
  background: var(--teal-accent);
}

.journey-seg.is-here .journey-seg-bar {
  /* "You are here" must read at a glance (owner, 2026-08-11: 1px taller was
     too subtle): twice the height, the darker teal, and a soft halo. */
  height: 8px;
  background: var(--teal-dark);
  box-shadow: 0 0 0 3px var(--teal-light);
}

.journey-line-position {
  font-family: var(--font-body);
  font-size: calc(13.5px * var(--text-scale));
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Progress ceremony (motion & polish spec §1) ──
   progress_ceremony_controller marks the just-saved step's segment and the
   just-completed chapter's node with .just-done for one arrival. Each
   animation runs once and settles; reduced motion pins them globally. */

/* The meter segment that just flipped done: ONE soft pulse. */
.journey-seg.just-done .journey-seg-bar {
  animation: journey-seg-pulse var(--motion-ceremony) var(--ease-out);
}

@keyframes journey-seg-pulse {
  0% {
    transform: scaleY(1);
  }
  35% {
    transform: scaleY(2);
    box-shadow: 0 0 0 3px var(--teal-light);
  }
  100% {
    transform: scaleY(1);
  }
}

/* The chapter node that just went complete: one ripple ring out of the mark. */
.journey-node-btn.just-done .journey-node-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: journey-node-ripple var(--motion-ceremony) var(--ease-out) both;
}

@keyframes journey-node-ripple {
  from {
    box-shadow: 0 0 0 0 rgba(72, 156, 184, 0.45);
  }
  to {
    box-shadow: 0 0 0 14px rgba(72, 156, 184, 0);
  }
}

/* ── Journey complete: the module bar + the retired journey strip ────────── */

.module-bar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  padding: 0.5rem;
}

.module-bar-inner {
  display: flex;
  justify-content: flex-start;
  gap: 0.25rem;
  max-width: var(--width-app);
  margin: 0 auto;
  overflow-x: auto;
}

/* Labels are ALWAYS open in this bar — it is the primary nav by then, so the
   hover-expand the old module strip used is gone with it. */
.module-bar-btn {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: var(--tap);
  padding: 0.6rem 0.5rem;
  border: none;
  border-radius: 0;
  gap: 0.1rem;
  background: var(--bg-primary);
  color: var(--navy-primary);
  font-family: var(--font-body);
  font-size: calc(0.8rem + var(--text-bump));
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.module-bar-btn i {
  font-size: calc(1rem + var(--text-bump));
  flex-shrink: 0;
}

/* The Hub rides as a bare icon so all ten tabs fit. */
.module-bar-btn.is-icon-only {
  background: transparent;
  color: var(--text-secondary);
}

.module-bar-btn.active {
  box-shadow: var(--shadow-sm);
  font-weight: 500;
}

.module-bar-btn .module-nav-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 190px;
  opacity: 1;
  padding-left: 0.4rem;
  overflow: hidden;
}

/* Journey complete: the promoted bar's one-time staggered settle, played only
   on the arrival that finished the journey (progress_ceremony_controller adds
   .ceremony-finale for that single render — spec §1). */
.module-bar.ceremony-finale .module-bar-btn {
  animation: motion-rise var(--motion-ceremony) var(--ease-out) backwards;
  animation-delay: 200ms;
}

.module-bar.ceremony-finale .module-bar-btn:nth-child(1) { animation-delay: 0ms; }
.module-bar.ceremony-finale .module-bar-btn:nth-child(2) { animation-delay: 40ms; }
.module-bar.ceremony-finale .module-bar-btn:nth-child(3) { animation-delay: 80ms; }
.module-bar.ceremony-finale .module-bar-btn:nth-child(4) { animation-delay: 120ms; }
.module-bar.ceremony-finale .module-bar-btn:nth-child(5) { animation-delay: 160ms; }

.journey-done {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
  position: relative;
  z-index: 5;
}

.journey-done-line {
  max-width: var(--width-app);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 36px;
  cursor: pointer;
  list-style: none;
}

.journey-done-line::-webkit-details-marker {
  display: none;
}

.journey-done-mark {
  color: var(--teal-ink);
  font-size: calc(14px * var(--text-scale));
}

.journey-done-label {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: calc(12px * var(--text-scale));
  color: var(--navy-primary);
}

.journey-done-count {
  font-family: var(--font-body);
  font-size: calc(13px * var(--text-scale));
  color: var(--text-muted);
}

.journey-done-spacer {
  flex: 1;
}

.journey-done-more {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--tap);
  padding: 0 0.4rem;
  color: var(--teal-ink);
  font-family: var(--font-body);
  font-size: calc(13.5px * var(--text-scale));
}

.journey-done-more i {
  font-size: calc(11px * var(--text-scale));
  transition: transform var(--transition-fast);
}

.journey-done[open] .journey-done-more i {
  transform: rotate(180deg);
}

/* The rail folded behind "Revisit the journey" — same rail, no second border. */
.journey-bar--nested {
  border-bottom: none;
  box-shadow: none;
  padding-bottom: 0.6rem;
}

/* ── Modules tray ────────────────────────────────────────────────────────── */

/* Lighter than the other trays' scrim — the capture's own value. */
.modules-tray-backdrop {
  background: rgba(0, 0, 0, 0.18);
}

.modules-tray {
  position: fixed;
  top: var(--chrome-height, 0px);
  right: 0;
  bottom: 0;
  width: 372px;
  max-width: 100%;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-light);
  box-shadow: none;
  visibility: hidden;
  z-index: 1100;
  transform: translateX(100%);
  transition: transform var(--transition-normal), visibility 0s linear var(--motion-enter);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modules-tray.open {
  transform: translateX(0);
  box-shadow: var(--shadow-lg);
  visibility: visible;
  transition: transform var(--transition-normal);
}

.modules-tray-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.modules-tray-eyebrow {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--teal-ink);
  font-weight: 400;
  margin: 0 0 2px;
}

.modules-tray-sub {
  font-family: var(--font-body);
  font-size: calc(13.5px * var(--text-scale));
  color: var(--text-secondary);
}

.modules-tray-close {
  min-width: var(--tap);
  min-height: var(--tap);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.modules-tray-list {
  flex: 1;
  overflow-y: auto;
  /* Don't hand the flick to the page behind the scrim (see .drawer-body). */
  overscroll-behavior: contain;
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modules-tray-row {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--bg-primary);
  border-left: 4px solid transparent;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
              background var(--transition-fast);
}

.modules-tray-row:focus-visible {
  box-shadow: var(--shadow-md);
}

/* Hover grammar (spec §6): tray rows scale a touch and deepen — hover-capable
   pointers only, so an iPad tap doesn't stick a scaled row. */
@media (hover: hover) {
  .modules-tray-row:hover {
    box-shadow: var(--shadow-md);
    transform: scale(1.02);
  }
}

/* Tray rows stagger in as the tray opens (spec §8) — keyed off .open flipping
   so it plays once per open. Capped at the sixth row. */
.modules-tray.open .modules-tray-row {
  animation: motion-rise var(--motion-enter) var(--ease-out) backwards;
  animation-delay: 200ms;
}

.modules-tray.open .modules-tray-row:nth-child(1) { animation-delay: 0ms; }
.modules-tray.open .modules-tray-row:nth-child(2) { animation-delay: 40ms; }
.modules-tray.open .modules-tray-row:nth-child(3) { animation-delay: 80ms; }
.modules-tray.open .modules-tray-row:nth-child(4) { animation-delay: 120ms; }
.modules-tray.open .modules-tray-row:nth-child(5) { animation-delay: 160ms; }

.modules-tray-row.is-current {
  border-left-color: var(--teal-accent);
}

.modules-tray-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: 8px;
  font-size: 1.25rem;
}

.modules-tray-body {
  flex: 1;
  min-width: 0;
}

.modules-tray-name {
  display: block;
  font-family: var(--font-heading);
  font-size: calc(16px * var(--text-scale));
  color: var(--navy-primary);
}

.modules-tray-blurb {
  display: block;
  font-family: var(--font-body);
  font-size: calc(13px * var(--text-scale));
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Narrow screens ──────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  /* The rail scrolls sideways rather than wrapping, and the popovers go: a
     scrolling container has to clip, and a touch pointer never hovers. */
  .journey-rail {
    overflow-x: auto;
  }

  .journey-node-pop {
    display: none;
  }
}

@media (max-width: 768px) {
  .journey-bar {
    padding: 0.35rem 0.75rem;
  }

  /* The chapter name and the position readout are the first things to go when
     the line runs out of room — the meter is the sense of place. */
  .journey-line-position {
    display: none;
  }
}

/* Quiet chapter node on the full rail (returning-member de-emphasis): muted,
   never a not-done signal — the state label reads "optional". */
.journey-node.is-quiet .journey-node-title,
.journey-node.is-quiet .journey-node-state {
  color: var(--text-muted);
}

.journey-node.is-quiet .journey-node-btn {
  opacity: 0.7;
}