/* venue-hud-v13.css — Walk instrumentation, rebuilt from the presentation's
   own language rather than patched on top of the accumulated panel chrome.

   What the presentation actually does, read out of brief.css:
     · No rounded rectangles anywhere. Every corner is 0 or a full circle.
     · No boxed panels. Structure comes from hairline rules and spacing:
       `.hero-meta div + div` separates with a 1px pearl@20% border-left.
     · One label voice: mono, meta-size, meta-tracking, uppercase, muted.
     · The eyebrow is the recurring unit — an ember marker, a thin rule, then
       an uppercase label (`.eyebrow`, `.section-mark`).
     · The accent is --ds-portfolio-ember. The HUD had been built on iris,
       which is why it read as a control panel borrowed from another product.

   Applied here: chrome (labels, numbers, active states) speaks ember like the
   rest of the page; the plan geometry keeps iris because it mirrors the guide
   lines drawn in the 3D scene, so the two stay legibly the same system. */

/* ── 1. Clear the inherited panel chrome ─────────────────────────────────── */

.venue-stage .venue-stage__presets,
.venue-stage .venue-stage__walk,
.venue-stage .venue-stage__map {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  border-top: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-pearl) 20%, transparent);
  background: color-mix(in srgb, var(--ds-portfolio-ink) 74%, transparent);
  backdrop-filter: blur(var(--ds-portfolio-media-settings-backdrop-blur));
  color: var(--ds-portfolio-muted);
  font-family: "Oxygen Mono Local", var(--ds-portfolio-mono-font);
  font-size: var(--ds-portfolio-meta-size);
  letter-spacing: var(--ds-portfolio-meta-tracking);
  line-height: var(--ds-portfolio-meta-leading);
  text-transform: uppercase;
}

/* The cluster label is the presentation's eyebrow: ember marker, thin rule. */
.venue-stage .venue-stage__presets::before,
.venue-stage .venue-stage__walk::before,
.venue-stage .venue-stage__map::before {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ds-portfolio-grid-gap);
  align-items: center;
  margin: 0;
  padding: calc(var(--ds-portfolio-grid-gap) / 1.5) calc(var(--ds-portfolio-grid-gap) * 1.15) calc(var(--ds-portfolio-grid-gap) / 2);
  color: var(--ds-portfolio-ember);
  font-size: var(--ds-portfolio-meta-size);
  letter-spacing: var(--ds-portfolio-meta-tracking);
}

/* ── 2. View ─────────────────────────────────────────────────────────────── */

/* View and Move are anchored independently, and the trailing padding pushed
   View's bottom edge 4px into Move's top rule. With no trailing padding the two
   clusters stack as a pair, each carrying its own hairline. */
.venue-stage .venue-stage__presets {
  display: grid;
  min-width: 0;
  width: min(12rem, calc(100vw - var(--ds-portfolio-gutter) * 2));
  padding: 0;
}

.venue-stage .venue-stage__presets button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ds-portfolio-grid-gap);
  align-items: center;
  min-height: 0;
  margin: 0;
  padding: calc(var(--ds-portfolio-grid-gap) / 1.5) calc(var(--ds-portfolio-grid-gap) * 1.15);
  border: 0;
  border-left: var(--ds-portfolio-focus-width) solid transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--ds-portfolio-muted);
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
  transition: color var(--ds-motion-fast), border-color var(--ds-motion-fast);
}

.venue-stage .venue-stage__presets button span { color: var(--ds-portfolio-ember); }

.venue-stage .venue-stage__presets button:hover,
.venue-stage .venue-stage__presets button:focus-visible,
.venue-stage .venue-stage__presets button[aria-pressed="true"] {
  border-left-color: var(--ds-portfolio-ember);
  background: none;
  box-shadow: none;
  color: var(--ds-portfolio-pearl);
}

.venue-stage .venue-stage__presets button:focus-visible {
  outline: var(--ds-portfolio-focus-width) solid var(--ds-portfolio-ember);
  outline-offset: calc(var(--ds-portfolio-focus-width) * -1);
}

/* ── 3. Move ─────────────────────────────────────────────────────────────── */

.venue-stage .venue-stage__walk {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(12rem, calc(100vw - var(--ds-portfolio-gutter) * 2));
  gap: 0;
  padding: 0 0 calc(var(--ds-portfolio-grid-gap) / 2);
}

.venue-stage .venue-stage__walk > strong,
.venue-stage .venue-stage__walk > span:last-child {
  display: none;
}

/* The progress rule spans the cluster, as a hairline under the two controls. */
.venue-stage .venue-stage__walk > i {
  grid-column: 1 / -1;
  order: 3;
  width: auto;
  height: calc(var(--ds-portfolio-focus-width) / 2);
  margin: calc(var(--ds-portfolio-grid-gap) / 2) calc(var(--ds-portfolio-grid-gap) * 1.15) 0;
  background: color-mix(in srgb, var(--ds-portfolio-pearl) 16%, transparent);
}

.venue-stage .venue-stage__walk > i > b {
  display: block;
  height: 100%;
  background: var(--ds-portfolio-ember);
  transform-origin: left center;
}

.venue-stage .venue-stage__walk button {
  min-height: 0;
  margin: 0;
  padding: calc(var(--ds-portfolio-grid-gap) / 1.5) calc(var(--ds-portfolio-grid-gap) * 1.15);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--ds-portfolio-muted);
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
  transition: color var(--ds-motion-fast);
}

/* Separated by a rule, the way the presentation separates hero-meta columns. */
.venue-stage .venue-stage__walk button + button {
  border-left: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-pearl) 20%, transparent);
}

.venue-stage .venue-stage__walk button:hover,
.venue-stage .venue-stage__walk button:focus-visible {
  background: none;
  color: var(--ds-portfolio-pearl);
}

/* ── 4. Quick map ────────────────────────────────────────────────────────── */

.venue-stage .venue-stage__map {
  display: grid;
  width: min(21rem, calc(100vw - var(--ds-portfolio-gutter) * 2));
  max-height: none;
  gap: 0;
  padding: 0 0 calc(var(--ds-portfolio-grid-gap) * 1.15);
}

.venue-stage .venue-stage__map::before { display: none; }

.venue-stage .venue-stage__map header {
  display: grid;
  gap: calc(var(--ds-portfolio-grid-gap) / 4);
  margin: 0;
  padding: calc(var(--ds-portfolio-grid-gap) / 1.5) calc(var(--ds-portfolio-grid-gap) * 1.15) calc(var(--ds-portfolio-grid-gap) / 1.5);
  border: 0;
  text-transform: uppercase;
}

.venue-stage .venue-stage__map header small {
  color: var(--ds-portfolio-ember);
  font-size: var(--ds-portfolio-meta-size);
  letter-spacing: var(--ds-portfolio-meta-tracking);
}

.venue-stage .venue-stage__map header strong {
  color: var(--ds-portfolio-pearl);
  font-size: var(--ds-portfolio-meta-size);
  font-weight: var(--ds-portfolio-proposal-weight-functional);
  letter-spacing: var(--ds-portfolio-meta-tracking);
}

/* The plan sits directly on the scrim: no frame, no grid paper, no min-height
   fighting the ratio. --map-aspect is published by renderMiniMap from the
   venue's real proportion, so the drawing fills its width exactly. */
.venue-stage .venue-stage__map-plot {
  align-self: start;
  width: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0 calc(var(--ds-portfolio-grid-gap) * 1.15);
  aspect-ratio: var(--map-aspect, 1.62);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
}

.venue-stage .venue-stage__map-plot .venue-map__frame {
  fill: none;
  stroke: none;
}

/* Landmark pins: a circle is the one curved shape the presentation allows. */
.venue-stage .venue-stage__map .venue-stage__map-plot button {
  width: calc(var(--ds-portfolio-grid-gap) * 0.9);
  height: calc(var(--ds-portfolio-grid-gap) * 0.9);
  border: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-iris) 70%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ds-portfolio-ink) 70%, transparent);
  box-shadow: none;
}

.venue-stage .venue-stage__map .venue-stage__map-plot button[data-pin-kind="featured"],
.venue-stage .venue-stage__map .venue-stage__map-plot button[aria-pressed="true"] {
  border-color: var(--ds-portfolio-ember);
  background: var(--ds-portfolio-ember);
  box-shadow: none;
}

.venue-stage .venue-stage__map .venue-stage__map-plot button::before { content: none; }

.venue-stage .venue-stage__map .venue-stage__map-plot button::after {
  max-width: calc(var(--ds-portfolio-grid-gap) * 13);
  padding: calc(var(--ds-portfolio-focus-width) / 2) calc(var(--ds-portfolio-grid-gap) / 2);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--ds-portfolio-ink) 88%, transparent);
  color: var(--ds-portfolio-pearl);
  font-size: var(--ds-portfolio-meta-size);
  letter-spacing: var(--ds-portfolio-meta-tracking);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 60rem) {
  .venue-stage .venue-stage__presets,
  .venue-stage .venue-stage__walk { width: min(10rem, calc(100vw - var(--ds-portfolio-gutter) * 2)); }
  .venue-stage .venue-stage__map { width: min(17rem, calc(100vw - var(--ds-portfolio-gutter) * 2)); }

  /* On a phone the map is wide enough to sit on top of Back / Next, and it wins
     on z-index, so the only touch controls for walking disappeared under it.
     Stack them instead: the controls take the bottom edge and the map rests
     directly above them. Move is a single fixed row, so the offset is stable. */
  .venue-stage .venue-stage__walk {
    top: auto;
    bottom: var(--ds-portfolio-grid-gap);
  }

  .venue-stage .venue-stage__map {
    top: auto;
    bottom: calc(var(--ds-portfolio-grid-gap) * 2 + 4.4rem);
    transform: none;
  }
}

/* --- Leave Walk ----------------------------------------------------------
   The exit was a 28px lilac circle carrying a bare ×: too small to hit with
   confidence, and the last piece of the old palette left on screen. It is the
   one control that undoes the whole mode, so it now says what it does and
   matches the rest of the HUD. */
.venue-stage .venue-stage__close {
  top: var(--ds-portfolio-gutter);
  right: var(--ds-portfolio-gutter);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ds-portfolio-grid-gap) / 1.4);
  width: auto;
  min-height: 2.75rem;
  aspect-ratio: auto;
  padding: 0 calc(var(--ds-portfolio-grid-gap) * 1.15);
  border: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-ember) 55%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--ds-portfolio-ink) 88%, transparent);
  box-shadow: none;
  backdrop-filter: blur(var(--ds-portfolio-media-settings-backdrop-blur));
  color: var(--ds-portfolio-ember);
  font-family: "Oxygen Mono Local", var(--ds-portfolio-mono-font);
  font-size: 1.15rem;
  line-height: 1;
}

.venue-stage .venue-stage__close::after {
  content: "Back to plan";
  color: var(--ds-portfolio-pearl);
  font-size: var(--ds-portfolio-meta-size);
  letter-spacing: var(--ds-portfolio-meta-tracking);
  text-transform: uppercase;
}

.venue-stage .venue-stage__close:hover,
.venue-stage .venue-stage__close:focus-visible {
  border-color: var(--ds-portfolio-ember);
  background: color-mix(in srgb, var(--ds-portfolio-ember) 16%, color-mix(in srgb, var(--ds-portfolio-ink) 88%, transparent));
  color: var(--ds-portfolio-ember);
}

.venue-stage .venue-stage__close:focus-visible {
  outline: var(--ds-portfolio-focus-width) solid var(--ds-portfolio-ember);
  outline-offset: 2px;
}

@media (max-width: 60rem) {
  .venue-stage .venue-stage__close {
    top: calc(var(--ds-portfolio-grid-gap) * 1.5);
    right: var(--ds-portfolio-grid-gap);
    min-height: 2.5rem;
  }
  .venue-stage .venue-stage__close::after { content: "Plan"; }
}