/* ==========================================================================
   Dr. Sara Cheikh · Moodboard v2 · journey.css
   Shell chrome: body, nav, progress indicator, sound toggle, reading-size
   picker, motion override, revisit pills, skip link, focus styles.
   Scoped to .journey body and .journey__* BEM classes — no collision risk
   with route CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Skip link
   Hidden off-screen until focused; then snaps to top-left.
   -------------------------------------------------------------------------- */

:where(.skip-link) {
  position: absolute;
  inset-block-start: -999px;
  inset-inline-start: 0;
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-decoration: none;
  z-index: 9999;
  /* border-radius intentionally 0 — banned patterns */
}

:where(.skip-link:focus) {
  inset-block-start: 0;
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Body — journey variant
   -------------------------------------------------------------------------- */

:where(body.journey) {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-agency);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
  /* scroll-snap deliberately off per art direction spec */
}

/* --------------------------------------------------------------------------
   Nav — sticky shell chrome
   -------------------------------------------------------------------------- */

:where(.journey__nav) {
  position: sticky;
  inset-block-start: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-2);
  padding-inline: var(--space-5);
  background-color: var(--paper);
  border-block-end: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  /* Backdrop blur on scroll added via JS class .is-scrolled — see below */
  transition: background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

:where(.journey__nav.is-scrolled) {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background-color: color-mix(in srgb, var(--paper) 88%, transparent);
}

/* --------------------------------------------------------------------------
   Progress indicator — left of nav
   -------------------------------------------------------------------------- */

:where(.journey__progress) {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-shrink: 0;
}

:where(.journey__progress-current) {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: var(--ls-mono);
}

:where(.journey__progress-label) {
  font-size: var(--fs-eyebrow);
  color: var(--ink-quiet);
  letter-spacing: var(--ls-eyebrow);
}

/* --------------------------------------------------------------------------
   Revisit pills — center of nav; hidden by default
   -------------------------------------------------------------------------- */

:where(#act-pills-wrapper) {
  flex: 1;
  display: flex;
  justify-content: center;
  overflow-x: auto;
  /* scroll-snapping pills within nav — only horizontal scroll, no snap */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

:where(#act-pills-wrapper::-webkit-scrollbar) {
  display: none;
}

:where(.journey__revisit.pill-list) {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}

/* Pills injected by JS — base appearance */
:where(.journey__revisit .pill-list__item > button,
       .journey__revisit .pill-btn) {
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  border: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
  /* Minimum touch target */
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
}

:where(.journey__revisit .pill-btn:hover,
       .journey__revisit .pill-btn:focus-visible) {
  border-color: var(--ink);
  color: var(--ink);
}

:where(.journey__revisit .pill-btn.is-current) {
  background-color: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* --------------------------------------------------------------------------
   Controls — right of nav
   -------------------------------------------------------------------------- */

:where(.journey__controls) {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-inline-start: auto;
  flex-shrink: 0;
}

/* Sound toggle */
:where(.journey__sound-btn) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  border: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-quiet);
  cursor: pointer;
  min-block-size: 2.75rem;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

:where(.journey__sound-btn:hover,
       .journey__sound-btn:focus-visible) {
  color: var(--ink);
  border-color: var(--ink);
}

:where(.journey__sound-btn[aria-pressed="true"]) {
  color: var(--ink);
  border-color: var(--ink);
}

/* Reading-size picker — 4 A glyphs */
:where(.journey__size-picker) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline-start: var(--space-4);
  border-inline-start: 1px solid var(--hairline);
}

:where(.size-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  color: var(--ink-quiet);
  cursor: pointer;
  font-family: var(--font-agency);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-standard);
}

:where(.size-btn:hover,
       .size-btn:focus-visible) {
  color: var(--ink);
}

:where(.size-btn[aria-pressed="true"]) {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink);
}

/* Motion toggle */
:where(.journey__motion-btn) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  border: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-quiet);
  cursor: pointer;
  min-block-size: 2.75rem;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

:where(.journey__motion-btn:hover,
       .journey__motion-btn:focus-visible) {
  color: var(--ink);
  border-color: var(--ink);
}

/* Mobile hamburger — shown only at narrow viewport */
:where(.nav-hamburger) {
  display: none;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  border: 1px solid var(--hairline);
  font-size: var(--fs-body);
  color: var(--ink);
  cursor: pointer;
  margin-inline-start: auto;
}

/* --------------------------------------------------------------------------
   Journey acts — structural containers
   -------------------------------------------------------------------------- */

:where(.journey__act) {
  position: relative;
}

/* --------------------------------------------------------------------------
   Focus rings — global shell scope
   All interactive elements get a visible 2px ring in --focus color.
   -------------------------------------------------------------------------- */

:where(.journey__nav :focus-visible,
       .journey__act :focus-visible,
       body.journey :focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Remove default focus ring only when we're supplying our own */
:where(button:focus:not(:focus-visible),
       a:focus:not(:focus-visible)) {
  outline: none;
}

/* --------------------------------------------------------------------------
   Global scroll behaviour — no snap per art direction
   -------------------------------------------------------------------------- */

:where(html) {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  :where(html) {
    scroll-behavior: auto;
  }
}

:where(html.motion-reduced) {
  scroll-behavior: auto !important;
}

/* --------------------------------------------------------------------------
   Responsive: collapse nav at ≤767px
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :where(.journey__nav) {
    padding-inline: var(--space-4);
    flex-wrap: wrap;
  }

  :where(.journey__controls) {
    gap: var(--space-3);
  }

  :where(.journey__size-picker) {
    padding-inline-start: var(--space-3);
  }

  :where(.nav-hamburger) {
    display: inline-flex;
  }

  /* Controls hidden by default on mobile; JS toggles .is-open */
  :where(.journey__controls:not(.is-open)) {
    display: none;
  }

  :where(#act-pills-wrapper:not([hidden])) {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    padding-block: var(--space-2);
    border-block-start: 1px solid var(--hairline);
  }
}