/* ==========================================================
   Semantic color variables
   Replace these placeholder values with the real palette later.
   Naming is by ROLE (e.g. "surface", "text-primary"), not by
   literal color, so swapping values later won't require renaming
   anything that uses them.
   ========================================================== */
:root {
  --color-bg: #f2f2f2;          /* page background, behind the mobile frame */
  --color-surface: #ffffff;     /* screen / card background */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #666666;
  --color-accent: #3366ff;      /* buttons, links, highlights */
  --color-border: #dddddd;

  /* Walk-card surface/text pairs, one per barrier category.
     Not part of the general palette (illustration-driven colors
     from the design), so they're scoped to their own tokens
     rather than reusing --color-accent etc. */
  --color-card-neuro-surface: #ede6f9;
  --color-card-neuro-text: #4e3c86;
  --color-card-visual-surface: #dff5f0;
  --color-card-visual-text: #0b5c52;
  --color-card-audi-surface: #e6edfb;
  --color-card-audi-text: #1c3b6e;
  --color-card-physical-surface: #fceedc;
  --color-card-physical-text: #8a4300;

  /* Shared muted/secondary descriptive text (walk-card disclaimer,
     pathway station meta) — same token, used across screens. */
  --color-text-muted: #6e6188;

  /* Pathway overview screen: purple accent pair from the Figma
     "schemes" tokens, distinct from --color-accent since it's
     specific to this illustration-driven screen. */
  --color-pathway-primary: #5b3e9e;
  --color-pathway-accent-light: #cebbed;
  --color-pathway-text-primary: #211943;
}

/* Basic reset so margins/paddings behave predictably */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: system-ui, sans-serif;

  /* Center the mobile frame in the browser window. */
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* ==========================================================
   Mobile container
   Fixed 393x830 to match the Figma phone frame exactly (every
   screen's absolute/fixed measurements assume this exact size),
   clipping like a Figma frame instead of growing with content.
   ========================================================== */
.app-container {
  width: 393px;
  height: 830px;
  background-color: var(--color-surface);
  position: relative;
  overflow: hidden;
}

/* ==========================================================
   Screens
   Only the screen with the "active" class is visible.
   showScreen() in script.js toggles this class.
   Matches the Figma frame's own auto-layout: 12px padding on
   every side, children stacked in a column with a 24px gap.
   ========================================================== */
.screen {
  display: none;
  width: 100%;
  height: 100%;
  padding: 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.screen.active {
  display: flex;
}

/* Placeholder button styling so navigation is easy to see/click */
button {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: var(--color-surface);
  background-color: var(--color-accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

button:hover {
  opacity: 0.9;
}

/* ==========================================================
   Walk list screen (#walk-list)
   ========================================================== */

/* -- Header: menu / logo / cart -- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

/* Reset the generic full-width button styling for icon-only buttons */
.icon-button {
  display: inline-flex;
  width: auto;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.app-logo {
  object-fit: cover;
}

/* -- Breadcrumbs -- */
.breadcrumbs {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.375rem;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
}

.breadcrumbs__item {
  color: var(--color-text-secondary);
}

.breadcrumbs__item--current {
  color: var(--color-text-primary);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-text-primary);
}

.breadcrumbs__item--link {
  cursor: pointer;
}

/* -- Section title -- */
.section-title {
  width: 100%;
}

.section-title h1 {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.section-title p {
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* -- Walk cards -- */
.walk-card-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
}

.walk-card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  height: 142px;
  margin-top: 0;
  padding: 0.75rem;
  text-align: left;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.walk-card__title {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.011em;
}

.walk-card__icon {
  flex-shrink: 0;
}

.walk-card--neuro {
  background-color: var(--color-card-neuro-surface);
  color: var(--color-card-neuro-text);
}

.walk-card--visual {
  background-color: var(--color-card-visual-surface);
  color: var(--color-card-visual-text);
}

.walk-card--audi {
  background-color: var(--color-card-audi-surface);
  color: var(--color-card-audi-text);
}

.walk-card--physical {
  background-color: var(--color-card-physical-surface);
  color: var(--color-card-physical-text);
}

/* ==========================================================
   Walk detail screen (#walk-detail)
   Reuses .walk-card/.walk-card__title/.walk-card__icon and the
   color modifiers above. Two extra modifiers cover the two
   shapes this screen needs:
   - walk-card--narrow: the collapsed Visual/Audi/Physical cards
     (same as the list card, just without the fixed hero height)
   - walk-card--expanded: the opened Neurodivergence card, which
     switches the card from a row layout to a column of sections
   ========================================================== */

/* Fixed heights match the Figma frame exactly (390px / 59px) so the
   overall screen comes out to the same 830px as the other screens
   instead of hugging to whatever the text happens to wrap to. */
.walk-card--narrow {
  height: 59px;
}

.walk-card--expanded {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: 390px;
  padding: 1rem;
  cursor: pointer;
}

.walk-card__title--lg {
  font-size: 1.5rem;
  letter-spacing: -0.011em;
}

.walk-card__meta {
  display: flex;
  gap: 1.5rem;
  margin-top: 20px;
}

.walk-card__meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.75rem;
}

.walk-card__disclaimer {
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.walk-card__description {
  margin-top: 28px;
  font-size: 0.875rem;
  line-height: 1.5;
  padding-right: 35px;
}

.walk-card__start {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: auto;
  /* Pushes the button to the bottom of the fixed-height card,
     mirroring the flex-grow row Figma uses for the same purpose. */
  margin-top: auto;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.walk-card__start-icon {
  transform: rotate(180deg);
}

/* ==========================================================
   Pathway overview screen (#pathway-overview)
   ========================================================== */
.pathway-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* -- Station path -- */
.pathway {
  position: relative;
  width: 100%;
  height: 626px;
}

.pathway__illustration {
  position: absolute;
  left: -12px;
  top: 331px;
  width: 393px;
  height: 307px;
  pointer-events: none;
}

.pathway__track {
  position: absolute;
  left: 121px;
  top: 13px;
  width: 153px;
  height: 521px;
}

.pathway__line {
  position: absolute;
}

.pathway__line--1 {
  left: 29px;
  top: 18px;
}

.pathway__line--2 {
  left: 29px;
  top: 144px;
}

.pathway__line--3 {
  left: 29px;
  top: 270px;
}

.pathway__line--4 {
  left: 29px;
  top: 396px;
}

.pathway__flag {
  position: absolute;
  left: 51.8px;
  top: 419.9px;
}

/* -- Station node --
   One reusable shape (circle, centered icon), just like .walk-card
   is one reusable shape driven by its category modifier. A state
   modifier (--completed / --in-progress / --upcoming) drives the
   look; a position modifier (.pathway__node--1..5) places it on the
   track. The two vary independently. Resets the generic full-width
   button styling, since the in-progress node is a <button>. */
.station-node {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 59px;
  height: 59px;
  margin-top: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: default;
}

.station-node__icon {
  pointer-events: none;
}

.station-node--completed {
  background-color: var(--color-pathway-primary);
}

.station-node--in-progress {
  background-color: var(--color-card-neuro-surface);
  cursor: pointer;
}

.station-node--upcoming {
  background-color: var(--color-surface);
  border: 2.4px dashed var(--color-pathway-accent-light);
}

.pathway__node--1 {
  left: 82px;
  top: 0;
}

.pathway__node--2 {
  left: 5px;
  top: 114px;
}

.pathway__node--3 {
  left: 90px;
  top: 240px;
}

.pathway__node--4 {
  left: 0;
  top: 361px;
}

.pathway__node--5 {
  left: 94px;
  top: 462px;
}

/* -- Station labels -- */
.pathway-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Odd stations sit left of the track and read right-aligned;
   even stations sit right of the track and read left-aligned. */
.pathway-label--1,
.pathway-label--3,
.pathway-label--5 {
  align-items: flex-end;
  text-align: right;
}

.pathway-label--2,
.pathway-label--4 {
  align-items: flex-start;
  text-align: left;
}

.pathway-label--1 {
  left: 24px;
  top: 25px;
  width: 150px;
}

.pathway-label--2 {
  left: 206px;
  top: 139px;
  width: 160px;
}

.pathway-label--3 {
  left: 24px;
  top: 254px;
  width: 150px;
}

.pathway-label--4 {
  left: 206px;
  top: 375px;
  width: 160px;
}

.pathway-label--5 {
  left: 24px;
  top: 487px;
  width: 150px;
}

.pathway-label__title {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-pathway-text-primary);
}

.pathway-label__title--lg {
  font-size: 1.0625rem;
}

.pathway-label__meta {
  font-size: 0.71875rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text-muted);
}

.pathway-label__meta--accent {
  font-weight: 700;
  color: var(--color-pathway-primary);
}

.pathway-label--muted .pathway-label__title {
  color: var(--color-text-muted);
}

.pathway-label__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px 3px 8px;
  background-color: var(--color-pathway-primary);
  color: var(--color-surface);
  font-size: 0.59375rem;
  font-weight: 700;
  border-radius: 9px;
}

/* ==========================================================
   Bottom sheet overlay (Pathway / Station Preview)
   Sits on top of #pathway-overview rather than replacing it, so it's
   a sibling of the .screen sections (not one itself), positioned
   against .app-container's full 393x830 box. Hidden by default;
   script.js toggles --open on tap/dismiss.
   ========================================================== */
.bottom-sheet-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 10;
}

.bottom-sheet-overlay--open {
  display: block;
}

.bottom-sheet-scrim {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 468px;
  background-color: rgba(28, 18, 51, 0.4);
  cursor: pointer;
}

.bottom-sheet {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 404px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.bottom-sheet__crest {
  flex-shrink: 0;
  pointer-events: none;
}

.bottom-sheet__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
  padding: 0 12px 27px;
  background-color: var(--color-card-neuro-surface);
}

.bottom-sheet__heading-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
}

.bottom-sheet__heading {
  padding-bottom: 6px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-pathway-text-primary);
  text-align: center;
}

.bottom-sheet__status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--color-pathway-primary);
}

.bottom-sheet__status-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-pathway-primary);
}

.bottom-sheet__text {
  max-width: 300px;
  font-size: 0.9375rem;
  line-height: 22px;
  color: var(--color-card-neuro-text);
  text-align: center;
}

.bottom-sheet__start {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 45px;
  margin-top: 0;
  padding: 0;
  background-color: var(--color-pathway-primary);
  border: 1.6px solid var(--color-pathway-primary);
  border-radius: 30px;
  color: var(--color-card-neuro-surface);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================
   Station detail screen (#station-detail)
   Figma's frame has no bottom padding here (the sticky continue
   button bleeds to the true screen edge, with its own internal
   pb built in), unlike the uniform 12px the other screens use.
   ========================================================== */
#station-detail {
  padding-bottom: 0;
}

.station-detail-intro {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.75rem;
}

/* -- Progress bar -- */
.progress-bar {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.625rem;
}

.progress-bar__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #aeaeae;
}

.progress-bar__track {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 12px;
  padding-left: 4px;
  gap: 0.375rem;
}

.progress-bar__fill {
  flex: 0 0 49.5%;
  height: 8px;
  border-radius: 4px;
  background-color: var(--color-pathway-primary);
}

.progress-bar__remainder {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background-color: var(--color-card-neuro-surface);
}

.progress-bar__stop {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-surface);
}

.progress-bar__stop-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-pathway-primary);
}

/* -- Scrollable task content --
   Fixed height + its own scroll, matching Figma exactly: the header
   above and the continue button below stay in place while this
   region scrolls internally. */
.station-detail-scroll {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 494px;
  gap: 1.5rem;
  overflow-x: hidden;
  overflow-y: auto;
}

/* -- Timeline items -- */
.timeline-item {
  display: flex;
  width: 100%;
  gap: 2.5rem;
}

.timeline-item__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 36px;
  flex-shrink: 0;
  gap: 1rem;
}

.timeline-item__divider {
  flex: 1;
  width: 2px;
  background-color: rgba(174, 174, 174, 0.5);
}

.timeline-item__text {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 0.75rem;
}

.timeline-item__subheading {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.timeline-item__heading {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.timeline-item__body {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.timeline-item__body p {
  margin: 0;
}

.timeline-item--closing .timeline-item__rail {
  width: 46px;
}

.timeline-item--closing .timeline-item__divider {
  background-color: rgba(0, 0, 0, 0.15);
}

.timeline-item__closing-text {
  flex: 1;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-primary);
}

/* -- Audio illustration card -- */
.station-audio {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 212px;
  border-radius: 6px;
  overflow: hidden;
}

.station-audio__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.station-audio__controls {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px;
  gap: 0.75rem;
}

.station-audio__time {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-pathway-text-primary);
}

.station-audio__track {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 8px;
  background-color: var(--color-surface);
}

.station-audio__handle {
  position: absolute;
  left: 20%;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  border-radius: 8px;
  background-color: var(--color-pathway-text-primary);
}

/* -- Sticky continue button -- */
.station-detail-footer {
  width: 100%;
  flex-shrink: 0;
  padding-bottom: 25px;
}

.station-detail-continue {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 45px;
  margin-top: 0;
  padding: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-pathway-primary);
  border-radius: 30px;
  color: var(--color-pathway-primary);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}

/* ==========================================================
   View transitions
   Giving the header/breadcrumbs/title and each card a stable
   view-transition-name lets the browser morph matching elements
   between screens (see the startViewTransition wrapper in
   script.js) instead of hard-cutting — this is what makes the
   Neurodivergence card visually grow into its detail view.
   ========================================================== */
.app-header {
  view-transition-name: app-header;
}

.breadcrumbs {
  view-transition-name: breadcrumbs;
}

.section-title {
  view-transition-name: section-title;
}

.walk-card--neuro {
  view-transition-name: card-neuro;
}

.walk-card--visual {
  view-transition-name: card-visual;
}

.walk-card--audi {
  view-transition-name: card-audi;
}

.walk-card--physical {
  view-transition-name: card-physical;
}

::view-transition-group(*) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}