/* Quiet Shelf QS-5 Walk: W1 Find my way, W2 Live guide, W3 Arrived, On your way. Tokens only
   (theme/tokens.css). Floors (QUESTIONS Q0.4): text 18 px and up, targets 48 px and up, chips 48,
   the standard button 56 and the primary 72 (components.css). The live map layers (photo, route
   line, dot, pin, rings) keep the explorer's own guide classes, so the engine draws them as before.
   QS-13: shapes follow the regenerated reference W1 to W3 (.srch, .map, .eb, .chips, .btn.sec,
   .dir-line, .ok-big, .list / .li, .sug). The shell sets the 16 px gutter on #main; nothing here
   adds side padding. The bar, panels, lists, eyebrows and buttons are the shared classes. */

.qsWalk {
  display: grid;
  gap: var(--gap);
}

.qsWalk h1 {
  margin: 0;
}

.qsWalk__text,
.qsWalk__place,
.qsWalk__where,
.qsWalk__filter,
.qsWalk__caption,
.qsWalk .wfStatus {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.qsWalk__place,
.qsWalk__caption,
.qsWalk__trend,
.qsWalk .wfStatus {
  color: var(--muted);
}

/* Kept rendered while empty: a live region must be in the tree before its first message. */
.qsWalk__where:empty,
.qsWalk__filter:empty {
  margin-top: calc(-1 * var(--gap));
}

/* SC 2.2.2: the proximity rings pulse once per update, never forever; the badge text carries the
   same information. */
.qsWalk .proximityRings .ring {
  animation-iteration-count: 1;
}

/* ---------- W1 "Where to?" (the shared .qsBar holding a real search field) ---------- */
.qsWalk__q {
  flex: 1;
  min-width: 0;
  min-height: var(--target-min);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
}

.qsWalk__q::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* No outer margin: the shell's #main gutter is the only side space. */
.qsWalk .qsWalk__bar {
  margin: 0;
}

/* The field draws its own ring, inside the bar's edge. */
.qsWalk__q:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: 1px;
}

/* ---------- Map preview (W1, and W2 with no live guide): the reference .map card ---------- */
.qsWalk__preview {
  overflow: hidden;
  border: var(--line-w) solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}

.qsWalk__previewImg {
  display: block;
  width: 100%;
  height: 272px;
  object-fit: contain;
}

.qsWalk__plan {
  height: 272px;
  background:
    linear-gradient(var(--line) 0 0) 10% 20% / 30% 10% no-repeat,
    linear-gradient(var(--line) 0 0) 10% 45% / 30% 10% no-repeat,
    linear-gradient(var(--line) 0 0) 10% 70% / 30% 10% no-repeat,
    linear-gradient(var(--primary-soft) 0 0) 70% 75% / 30% 20% no-repeat,
    var(--card);
}

/* ---------- Chips: "Find these areas" (the reference .chips) ---------- */
.qsWalk__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.qsWalkChip {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  min-height: var(--target-min);
  padding: 9px 14px;
  border: var(--line-w) solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-action);
  line-height: var(--lh-head);
  text-align: left;
  cursor: pointer;
}

.qsWalkChip[hidden] {
  display: none;
}

.qsWalkChip:hover {
  background: var(--primary-soft);
}

.qsWalkChip:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* ---------- W2 live map card with pan and zoom buttons along its foot (Q5.1) ---------- */
.qsWalkMap {
  border: var(--line-w) solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}

/* Only the map clips (zoom); the buttons below keep their whole focus ring. */
.qsWalkMap__viewport {
  overflow: hidden;
  border-radius: calc(var(--r-card) - var(--line-w)) calc(var(--r-card) - var(--line-w)) 0 0;
}

.qsWalkMap__stage {
  transform-origin: 50% 50%;
}

.qsWalk .qsWalkMap__map {
  width: 100%;
  max-height: none;
}

.qsWalkMap__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px;
  padding: 2px 4px;
  border-top: var(--line-w) solid var(--line);
}

.qsWalkMap__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target-min);
  min-height: var(--target-min);
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  background: transparent;
  color: var(--primary);
  cursor: pointer;
}

.qsWalkMap__btn:hover {
  background: var(--primary-soft);
}

/* At a limit: dimmed as well as muted, so the state never rests on hue alone (1.4.1). */
.qsWalkMap__btn[aria-disabled="true"] {
  color: var(--muted);
  opacity: 0.4;
  cursor: default;
}

.qsWalkMap__btn:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: calc(-1 * var(--focus-w));
}

.qsWalk__rings {
  display: grid;
  justify-items: center;
  gap: var(--gap);
  padding: 14px;
  border: var(--line-w) solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}

/* ---------- The direction card (the reference .dir-line) ---------- */
.qsWalk__dir {
  display: grid;
  gap: 3px;
  padding: 14px;
}

/* One instruction: the live route text when the engine has one, else the first written step. */
.qsWalk__instruction {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-action);
  font-weight: var(--weight-head);
  line-height: var(--lh-head);
}

.qsWalk__route:not(:empty) + .qsWalk__first {
  display: none;
}

/* The engine rewrites the badge's class every tick ("badge b-..."): size it from here. */
.qsWalk__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.qsWalk__status:has(.badge:empty):has(.qsWalk__trend:empty) {
  display: none;
}

.qsWalk .badge {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-action);
  line-height: var(--lh-head);
}

/* The badge is a live region: kept in the tree while empty, just without its padding. */
.qsWalk .badge:empty {
  padding: 0;
}

.qsWalk .wfStatus:empty,
.qsWalk__caption:empty {
  display: none;
}

/* Read aloud and Steps side by side (the reference W2 pair); they stack at large text. */
.qsWalk__pair {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
}

.qsWalk__pair .qsBtn {
  flex: 1 1 0;
  min-width: fit-content;
  padding-inline: 12px;
}

.qsWalk__steps {
  margin: 8px 0 0;
  padding-left: 1.5em;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.qsWalk__steps li + li {
  margin-top: 8px;
}

.qsWalk__code {
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-code);
}

.qsWalk__other .qsList,
.qsWalkWay__list {
  margin-top: 8px;
}

.qsWalk .qsEyebrow__title:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* ---------- W3: the arrival mark (the reference .ok-big) ---------- */
.qsWalk__here {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 14px 0;
  text-align: center;
}

.qsWalk__ring {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: var(--r-pill);
  background: var(--acc-events-wash);
  color: var(--success);
}

.qsWalk__ring .ic {
  width: 46px;
  height: 46px;
}

.qsWalk__hereName {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-section);
  font-weight: var(--weight-head);
  line-height: var(--lh-head);
}

.qsWalk__shelf {
  max-width: 315px;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* The item you came for, with Check out as its row action (the reference .li .act). */
.qsWalk__item .qsRow {
  padding-block: 8px;
}

.qsWalk__act {
  margin-inline-start: auto;
  min-height: var(--target-min);
  padding: 0 4px;
  background: transparent;
  color: var(--primary);
  font-size: var(--fs-body);
  white-space: nowrap;
}

.qsWalk__how[hidden] {
  display: none;
}

/* ---------- Next stop and On your way: the reference .sug panel ---------- */
.qsWalk__next,
.qsWalkWay__item,
.qsWalkWay__gone {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: var(--line-w) solid var(--line);
  border-radius: var(--r-card);
  background: var(--acc-discover-wash);
  color: var(--fg);
}

.qsWalk__next p,
.qsWalkWay__item p,
.qsWalkWay__gone p {
  margin: 0;
}

.qsWalkWay__list {
  display: grid;
  gap: var(--gap);
  padding: 0;
  list-style: none;
}

.qsWalkWay__title {
  font-weight: var(--weight-head);
}

.qsWalkWay__why {
  color: var(--fg);
}

.qsWalk__acts,
.qsWalkWay__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 5px;
}

/* The panel's actions sit on --card in the Discover accent text (the reference .sug .acts). */
.qsWalk__acts .qsBtn,
.qsWalkWay__btns .qsBtn {
  flex: 1 1 8em;
  border: 0;
  background: var(--card);
  color: var(--acc-discover-text);
  font-size: var(--fs-body);
}

/* Pressed is shown by the check mark as well as the fill, never by colour alone. */
.qsWalkWay__chk {
  display: none;
}

.qsWalkWay__btns [aria-pressed="true"] {
  background: var(--primary);
  color: var(--on-primary);
}

.qsWalkWay__btns [aria-pressed="true"] .qsWalkWay__chk {
  display: inline-flex;
}

.qsWalk__end {
  display: grid;
  gap: var(--gap);
}

@media (forced-colors: active) {
  .qsWalkChip,
  .qsWalkMap__btn,
  .qsWalk__act,
  .qsWalk__acts .qsBtn,
  .qsWalkWay__btns .qsBtn {
    border: var(--line-w) solid ButtonText;
  }

  .qsWalk__preview,
  .qsWalkMap,
  .qsWalk__next,
  .qsWalkWay__item,
  .qsWalkWay__gone,
  .qsWalk__ring {
    border: var(--line-w) solid CanvasText;
  }

  .qsWalkWay__btns [aria-pressed="true"] {
    border: 3px solid Highlight;
  }

  .qsWalkChip:focus-visible,
  .qsWalkMap__btn:focus-visible,
  .qsWalk__q:focus-visible,
  .qsWalk .qsEyebrow__title:focus-visible {
    outline: 3px solid Highlight;
  }

  .qsWalkMap__btn[aria-disabled="true"] {
    color: GrayText;
    border-color: GrayText;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qsWalkMap__stage {
    transition: none;
  }
}