/* ─────────────────────────────────────────────────────────────
   VAREN — Coordinate HUD Overlay
   Brand-styled modal that opens when any coord stamp is clicked.
   Real interactive map (Leaflet + CartoDB dark tiles) under the
   HUD chrome. No Google. Stays on-site.
   ───────────────────────────────────────────────────────────── */

/* Modal root. Hidden by default, fades in on .is-open */
.hud-map {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Shared gutter: the card's fluid min()/calc() sizing below subtracts
     this same value, so the card always keeps a consistent breathing
     margin instead of clipping at mid-size windows (Bug 2, 2026-06-12). */
  --hud-gutter: clamp(1rem, 4vw, 2.5rem);
  padding: var(--hud-gutter);
  background: rgba(11, 11, 11, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  font-family: "Söhne Mono", "Soehne Mono", "SF Mono", Menlo, monospace;
  color: #F4F1EA;
}
.hud-map[hidden] { display: none; }
.hud-map.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Explicit box-sizing (2026-06-12): every host page ships a global
   border-box reset today, but the HUD injects into six different
   documents — its geometry (the fluid min()/calc() sizing below, and the
   JS clamp math comparing offsetWidth against style.width) must never
   depend on page-level CSS being present. */
.hud-map,
.hud-map *,
.hud-map *::before,
.hud-map *::after { box-sizing: border-box; }

/* Frame wraps the card so the resize-hint (crosshair arms) can extend
   outside the card's edge. The card itself needs overflow:hidden for
   the resize:both browser behavior, but the hint's arms must reach
   beyond the card. Frame is sized via display:inline-block so it
   collapses to the card's resized dimensions. */
.hud-map__frame {
  position: relative;
  display: inline-block;
}

/* Card — flex column so the canvas grows when the card is resized.
   Resize is now handled by JS (.hud-map__resize-hint pointerdown) so
   we can give the user a generous 48×48 hit zone instead of the
   browser's native ~16×16 resize handle. */
.hud-map__card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Fluid, viewport-clamped sizing (Bug 2, 2026-06-12). The card was a
     fixed 540×640 with a fixed 880px max-height — any window 501-640px
     tall clipped it top AND bottom (owner recording receipts). Every
     dimension now yields to the viewport minus the shared gutter, so the
     card tracks window resizes continuously instead of clipping. The
     vh fallbacks precede the dvh declarations for older engines. The JS
     drag/clamp handlers read these via getComputedStyle, so their bounds
     resolve to the same viewport-aware pixels automatically. */
  width: min(540px, calc(100vw - 2 * var(--hud-gutter)));
  height: min(640px, calc(100vh - 2 * var(--hud-gutter)));
  height: min(640px, calc(100dvh - 2 * var(--hud-gutter)));
  /* 360px → 420px (2026-06-12): at 360 the heading row ellipsized the
     HARVARD BLDG eyebrow link to "[ …" — information cut off at the
     minimum, the exact Bug-3 complaint. 420 keeps title + eyebrow + close
     intact at the smallest drag size. Card mode only exists above the
     640px sheet breakpoint, so this never exceeds the viewport. */
  min-width: min(420px, calc(100vw - 2 * var(--hud-gutter)));
  min-height: min(540px, calc(100vh - 2 * var(--hud-gutter)));
  min-height: min(540px, calc(100dvh - 2 * var(--hud-gutter)));
  max-width: min(960px, calc(100vw - 2 * var(--hud-gutter)));
  max-height: min(880px, calc(100vh - 2 * var(--hud-gutter)));
  max-height: min(880px, calc(100dvh - 2 * var(--hud-gutter)));
  background: rgba(8, 8, 8, 0.96);
  border: 1px solid rgba(244, 241, 234, 0.12);
  padding: 1.5rem 1.5rem 1.25rem;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.22s ease 0.04s;
  overflow: hidden;
}
.hud-map.is-open .hud-map__card {
  transform: translateY(0);
  opacity: 1;
}

/* Transient class — JS (clampAndNudge in js/hud-map.js) wraps the
   programmatic viewport clamp in this so the size change eases in and
   out per the global VAREN transition rule instead of hard-cutting. */
.hud-map__card.is-clamp-easing {
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.22s ease 0.04s,
              width 0.22s ease,
              height 0.22s ease;
}

/* Gold corner brackets. Positioned just inside the card border so that
   overflow: hidden (required for resize) doesn't clip them. The
   bottom-right bracket transforms into a solid gold triangle when the
   user hovers near the corner — the resize affordance. */
.hud-map__card::before,
.hud-map__card::after,
.hud-map__brackets::before,
.hud-map__brackets::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: #C8A96F;
  border-style: solid;
  border-width: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.2s ease;
}
.hud-map__card::before  { top: 4px; left: 4px;  border-top-width: 1.5px; border-left-width: 1.5px; }
.hud-map__card::after   { top: 4px; right: 4px; border-top-width: 1.5px; border-right-width: 1.5px; }
.hud-map__brackets::before { bottom: 4px; left: 4px;  border-bottom-width: 1.5px; border-left-width: 1.5px; }
.hud-map__brackets::after  { bottom: 4px; right: 4px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* Resize affordance — bottom-right corner only.
   Lives OUTSIDE .hud-map__card (sibling inside .hud-map__frame) so the
   crosshair arms can extend past the card's edge — the card itself
   needs overflow:hidden for resize:both to work, which would clip
   pseudo-elements drawn outside it.
   The hint is a 32×32 hover-zone at the card's bottom-right corner.
   On hover it reveals: a solid gold triangle inside the corner, plus
   two crosshair arms extending right and down BEYOND the card edge. */
.hud-map__resize-hint {
  position: absolute;
  bottom: 0;
  right: 0;
  /* Generous 48×48 hit zone for drag-resize. JS in initMap() attaches
     pointerdown on this element and drives card.style.width/height
     manually — that lets us have a bigger handle than the browser's
     native ~16×16 resize affordance and keeps the resize behavior off
     the card itself (which previously interfered with Mapbox events). */
  width: 48px;
  height: 48px;
  pointer-events: auto;
  cursor: nwse-resize;
  z-index: 6;
  /* Visual children inside DON'T capture events — only this container. */
  touch-action: none;
}
.hud-map__resize-hint > * { pointer-events: none; }
/* Solid gold filled SE-resize triangle, nested INSIDE the card's
   existing corner bracket (the bracket sits at bottom: 4px / right:
   4px; this triangle sits in the same area so the bracket's L-frame
   surrounds the filled triangle). Bryan QA 2026-05-11: "The filled-
   in solid right angle triangle should be inside the window of the
   original corner crosshair graphic, not on the outside." */
.hud-map__resize-tri {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  background: #C8A96F;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0;
  transform: scale(0.7);
  transform-origin: bottom right;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
/* L-BRACKET horizontal arm. Sits just OUTSIDE the card's bottom edge
   with a small gap from the card corner — close enough to read as
   visually connected to the triangle inside the bracket. */
.hud-map__resize-arm-h {
  position: absolute;
  bottom: -6px;       /* top edge at card_bottom + 4 */
  right: -26px;       /* spans card_right + 4 → card_right + 26 */
  width: 22px;
  height: 2px;
  background: #C8A96F;
  /* Reveal animation: arm starts slid INWARD toward the card by
     14px, snaps outward to natural position on hover. */
  transform: translateX(-14px);
  opacity: 0;
  transition: opacity 0.22s ease 0.04s, transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) 0.04s;
  pointer-events: none;
}
/* L-BRACKET vertical arm. Sits just OUTSIDE the card's right edge
   forming the second leg of the L. */
.hud-map__resize-arm-v {
  position: absolute;
  right: -6px;        /* left edge at card_right + 4 */
  bottom: -26px;      /* spans card_bottom + 4 → card_bottom + 26 */
  width: 2px;
  height: 22px;
  background: #C8A96F;
  transform: translateY(-14px);
  opacity: 0;
  transition: opacity 0.22s ease 0.04s, transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) 0.04s;
  pointer-events: none;
}

/* Note: previously body.hud-resize-hover hid the global VAREN cursor
   while the resize zone was active. Removed in v10 because hiding the
   cursor caused a perceived "jump" on drag release — under
   setPointerCapture the cursor's currentX/currentY froze at drag-
   start and the fade-in revealed it at a stale position. Simpler:
   leave the cursor visible. The triangle/L still reveal on hover. */
/* Reveal state — JS adds .is-near when the mouse is within ~36px of
   the card's bottom-right corner (see initMap mousemove handler).
   Arms snap back to their natural OUTSIDE position; triangle scales
   to full size. */
.hud-map__resize-hint.is-near .hud-map__resize-tri {
  opacity: 1;
  transform: scale(1);
}
.hud-map__resize-hint.is-near .hud-map__resize-arm-h {
  opacity: 1;
  transform: translateX(0);
}
.hud-map__resize-hint.is-near .hud-map__resize-arm-v {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 640px), (max-height: 500px) {
  /* No drag-resize on mobile (fullscreen sheet) — hide the affordance.
     Landscape phones (e.g. iPhone landscape 844×390) match via max-height
     even though their width exceeds 640. Without the OR, the HUD card
     stayed at 540×640 on landscape and the readout scrolled off-screen
     (Bryan QA 2026-05-12 — "lon and lat missing on landscape view"). */
  .hud-map__resize-hint { display: none; }
}

/* Heading-left wraps title + eyebrow tag inline so they share the row
   with the close button on the right. */
.hud-map__heading-left {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  min-width: 0;
  flex: 1 1 auto;
}

/* Title — Signifier display label. Italic ampersand per varen-joining-
   convention (Rule 6) but SAME color as the rest of the title.
   Anchor to the full-page /locate experience. Hover (owner revision
   2026-06-12, replacing the scramble): gold lift + center-out underline,
   both eased in AND out — transitions live on the base rules per the
   global VAREN transition rule. */
.hud-map__title {
  position: relative;
  display: inline-block;
  font-family: "Signifier", Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: rgba(244, 241, 234, 0.92);
  white-space: nowrap;
  text-transform: none;
  text-decoration: none;
  transition: color 0.25s ease;
}
.hud-map__title em {
  font-style: italic;
  color: inherit; /* keep same color as the rest of the title */
}
/* Underline draws from center under the letters — same vocabulary as the
   eyebrow-link (.eb-text::after) so the heading's two links feel like one
   system. */
.hud-map__title::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.hud-map__title:hover,
.hud-map__title:focus-visible {
  color: #C8A96F; /* Command Gold lift (owner 2026-06-12) */
  outline: none;
}
.hud-map__title:hover::after,
.hud-map__title:focus-visible::after {
  transform: scaleX(1);
}

/* Eyebrow row — flex, never wraps */
.hud-map__eyebrow {
  flex: 0 0 auto;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #C8A96F;
  margin: 0 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding-left: 18px; /* clear of the top-left bracket */
  padding-right: 18px; /* clear of the top-right bracket */
}
.hud-map__eyebrow-tag {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  /* Room for the hover underline (.eb-text::after at bottom -3px) inside
     this box's overflow:hidden clip. */
  padding-bottom: 4px;
  margin-bottom: -4px; /* keep the row's visual rhythm unchanged */
}

/* Eyebrow link — ported verbatim from the /locate eyebrow system
   (locate.html #spine-pilot block, owner 2026-06-12: "same word, same
   eyebrow, same system"). Color fade + brackets-to-underline hover:
   brackets keep their layout width (opacity, not display) so nothing
   shifts; the underline draws from center as the brackets retreat
   outward. Scoped under .hud-map so locate.html's own inline copy stays
   canonical on that page (it also loads this stylesheet). */
.hud-map .hud-map__eyebrow-tag.eyebrow-link {
  position: relative;
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
  transition: color 0.25s ease;
}
.hud-map .eyebrow-link .eb-bracket {
  display: inline-block;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
/* Underline spans ONLY the letters (H to G), not the bracket slots */
.hud-map .eyebrow-link .eb-text {
  position: relative;
  display: inline-block;
}
.hud-map .eyebrow-link .eb-text::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
/* Hover: LIGHTER GOLD (not white) — Command Gold lifted, brand-safe */
.hud-map .eyebrow-link:hover,
.hud-map .eyebrow-link:focus-visible { color: #E2CC9A; }
.hud-map .eyebrow-link:hover .eb-bracket--l,
.hud-map .eyebrow-link:focus-visible .eb-bracket--l { opacity: 0; transform: translateX(-4px); }
.hud-map .eyebrow-link:hover .eb-bracket--r,
.hud-map .eyebrow-link:focus-visible .eb-bracket--r { opacity: 0; transform: translateX(4px); }
.hud-map .eyebrow-link:hover .eb-text::after,
.hud-map .eyebrow-link:focus-visible .eb-text::after { transform: scaleX(1); }
.hud-map .eyebrow-link:focus-visible { outline: none; }
.hud-map__close {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 2px 8px;
  margin: -2px -4px;
  font-family: inherit;
  font-size: 0.95rem;          /* the × renders larger than text caps */
  line-height: 1;
  letter-spacing: 0;
  color: rgba(244, 241, 234, 0.6);
  cursor: pointer;
  transition: color 0.18s ease;
  white-space: nowrap;
}
.hud-map__close:hover,
.hud-map__close:focus-visible { color: #C8A96F; outline: none; }

/* Map canvas — Leaflet container.
   flex: 1 makes it grow to fill the card vertically when resized.
   CSS filter applies a desaturated, slightly warm tint to the dark
   CartoDB tiles for brand fidelity. */
.hud-map__canvas {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  /* 280px → 120px (2026-06-12): the map pane is the element that gives
     way when the card is squeezed (small windows, drag-to-min). At the
     old 280px floor the card's min content height exceeded its 540px
     min-height, so the TIME row sliced mid-line and OPEN MAP vanished
     under overflow:hidden (Bug 3 receipt). Data rows never clip now —
     the map shrinks instead. Default-size cards are unaffected (flex
     grows the pane well past this floor). */
  min-height: 120px;
  margin: 0 0 1rem;
  background: #0a0a0a;
  overflow: hidden;
  border: 1px solid rgba(244, 241, 234, 0.08);
}
/* Mapbox container — palette is baked into the style via
   applyVarenPalette() in hud-map.js, so no CSS filter needed.
   z-index: 0 keeps the map firmly at the back of the canvas stacking
   context.
   Bryan QA on 44668ad: 'Only when I click on the gold dot can I drag
   the map.' Diagnosis: Mapbox's .mapboxgl-marker wrapper has
   pointer-events: auto by default and was capturing events that
   should have reached the canvas. Forcing pointer-events: none on
   the marker wrapper + pointer-events: auto on the canvas + touch-
   action: none on the container so Mapbox's gesture system works
   on touch devices too. */
.hud-map__mapbox {
  position: relative;
  width: 100%;
  height: 100%;
  background: #0a0a0a;
  z-index: 0;
  pointer-events: auto;
  touch-action: none;
}
/* Static annex-map fallback image (injected by hud-map.js showMapUnavailable
   when Mapbox / WebGL can't render) — fills the map pane exactly like the
   live tiles, so the footer HUD floor matches /locate. Compass + zoom + status
   overlays keep their own higher stacking inside .hud-map__canvas and stay
   visible over it. (Fallback Floor Protocol, P2 reconcile.) */
.hud-map__static-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.hud-map__mapbox .mapboxgl-canvas,
.hud-map__mapbox .mapboxgl-canvas-container {
  pointer-events: auto !important;
  outline: none;
}
.hud-map__mapbox .mapboxgl-marker {
  /* Critical: marker visuals are decorative; events MUST pass through
     to the canvas so Bryan can drag/zoom the map by clicking anywhere
     including over the marker. */
  pointer-events: none !important;
}
.hud-map__mapbox .mapboxgl-ctrl-attrib { display: none !important; }
.hud-map__mapbox .mapboxgl-ctrl-logo,
.hud-map__mapbox .mapboxgl-ctrl-bottom-left { display: none !important; }
/* Leaflet's built-in zoom + attribution boxes hidden — we draw our own. */
.hud-map__canvas .leaflet-control-container,
.hud-map__canvas .leaflet-control-attribution { display: none !important; }

/* HUD overlay on top of the map — corner reticle + compass marks, all
   pointer-events: none so map interaction passes through. */
.hud-map__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
/* Cardinal points — true Soehne Mono spans (replaced the stretched SVG,
   2026-06-05). The modal card keeps the 11px scale; /locate's full-page
   compass scales up via its own .locate-compass__pt rules. */
.hud-map__pt {
  position: absolute;
  font-family: "Söhne Mono", "Soehne Mono", "SF Mono", Menlo, monospace;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(200, 169, 111, 0.78);
  user-select: none;
}
.hud-map__pt--n { top: 8px;    left: 50%; transform: translateX(-50%); }
.hud-map__pt--s { bottom: 6px; left: 50%; transform: translateX(-50%); }
.hud-map__pt--w { left: 10px;  top: 50%;  transform: translateY(-50%); }
.hud-map__pt--e { right: 10px; top: 50%;  transform: translateY(-50%); }

/* Loading / error status indicator. Covers the canvas with a centered
   monospace message until tiles successfully load (or until we time
   out and surface a failure).
   z-index: 1 — must be BEHIND .hud-map__zoom (z-index 3) so the zoom
   controls are never visually obscured by this overlay, even during
   its fade-out transition. Once ready, also visibility: hidden so it's
   fully gone from the a11y tree. */
.hud-map__status {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Söhne Mono", "Soehne Mono", "SF Mono", Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.4);
  background: #0a0a0a;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  pointer-events: none;
}
.hud-map__status.is-ready {
  opacity: 0;
  visibility: hidden;
}

/* Custom zoom controls — top-right of the map canvas, HUD-styled */
.hud-map__zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 3;
}
.hud-map__zoom button {
  appearance: none;
  width: 28px;
  height: 28px;
  background: rgba(8, 8, 8, 0.78);
  border: 1px solid rgba(200, 169, 111, 0.45);
  color: #C8A96F;
  font-family: "Söhne Mono", "Soehne Mono", "SF Mono", Menlo, monospace;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.hud-map__zoom button:hover {
  background: rgba(200, 169, 111, 0.12);
  border-color: #C8A96F;
}
.hud-map__zoom button:focus-visible { outline: 1px solid #C8A96F; outline-offset: 2px; }
.hud-map__zoom button:disabled { opacity: 0.35; cursor: not-allowed; }

/* HUD-reticle marker — center dot, gold ring, outer pulse, N/S/E/W ticks.
   Reads like a tactical target pin, not just a gold blob. Placed at the
   Annex coordinate by Mapbox; we define all visuals here. */
.hud-map__marker {
  width: 36px;
  height: 36px;
  position: relative;
  pointer-events: none;
  transform: translate(-50%, -50%);
  /* Mapbox positions the marker by its top-left; the translate centers
     it on the coord. */
  left: 50%;
  top: 50%;
}
/* Center pip — solid gold dot */
.hud-map__marker-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  top: 50%;
  left: 50%;
  margin: -3px 0 0 -3px;
  background: #C8A96F;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(200, 169, 111, 0.8);
}
/* Inner ring — gold border, fixed */
.hud-map__marker-ring {
  position: absolute;
  inset: 8px;
  border: 1.5px solid rgba(200, 169, 111, 0.9);
  border-radius: 50%;
}
/* Outer pulse — scales + fades on loop */
.hud-map__marker-pulse {
  position: absolute;
  inset: 4px;
  border: 1.5px solid #C8A96F;
  border-radius: 50%;
  opacity: 0.65;
  animation: hud-marker-pulse 2.4s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
@keyframes hud-marker-pulse {
  0%   { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(1.9); opacity: 0;   }
}
/* N/S/E/W tick marks outside the ring */
.hud-map__marker-tick {
  position: absolute;
  background: #C8A96F;
}
.hud-map__marker-tick--n,
.hud-map__marker-tick--s {
  left: 50%;
  width: 1.5px;
  height: 4px;
  margin-left: -0.75px;
}
.hud-map__marker-tick--e,
.hud-map__marker-tick--w {
  top: 50%;
  width: 4px;
  height: 1.5px;
  margin-top: -0.75px;
}
.hud-map__marker-tick--n { top: 0; }
.hud-map__marker-tick--s { bottom: 0; }
.hud-map__marker-tick--e { right: 0; }
.hud-map__marker-tick--w { left: 0; }

@media (prefers-reduced-motion: reduce) {
  .hud-map__marker-pulse { animation: none; opacity: 0; }
}

/* Readout block — sits below the flex-grown canvas */
.hud-map__readout {
  flex: 0 0 auto;
  border-top: 1px solid rgba(244, 241, 234, 0.12);
  padding-top: 0.875rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  line-height: 1.55;
}
.hud-map__row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0.5rem;
  padding: 0.18rem 0;
  color: rgba(244, 241, 234, 0.85);
}
.hud-map__label {
  color: rgba(244, 241, 234, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.hud-map__value { color: #F4F1EA; }
.hud-map__row--accent .hud-map__value { color: #C8A96F; }

/* External-action footer — "Open in Maps →" escape hatch for users who
   want real navigation. Low visual weight; positioned below the readout. */
.hud-map__action {
  flex: 0 0 auto;
  width: 100%;
  border-top: 1px solid rgba(244, 241, 234, 0.12);
  margin: 0.875rem 0 0;
  padding-top: 0.875rem;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.45);
  text-align: center;
}
.hud-map__action a {
  color: rgba(244, 241, 234, 0.65);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 241, 234, 0.16);
  padding-bottom: 1px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.hud-map__action a:hover,
.hud-map__action a:focus-visible {
  color: #C8A96F;
  border-bottom-color: #C8A96F;
  outline: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hud-map, .hud-map__card { transition: none !important; }
  .hud-map__marker::after { animation: none; }
}

/* ── Mobile sheet variant ──────────────────────────────────────────────
   Touch devices can't grab a 16px desktop resize handle. On phones the
   HUD becomes a fullscreen sheet — no resize, no padding around the
   modal, larger touch targets. resize: none disables the desktop handle. */
@media (max-width: 640px), (max-height: 500px) {
  .hud-map {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  /* The frame is display:inline-block on desktop (shrink-to-fit so the
     resize hint tracks the card corner). In sheet mode that shrink-to-fit
     capped the "fullscreen" sheet at the card's max-content width
     (~447px) — full-bleed only happened on phones narrower than that, by
     accident. Caught by hud-card.spec.mjs on iphone-15-landscape
     (2026-06-12): an 852px-wide sheet rendered 447px wide. Stretch the
     frame explicitly; the resize hint is display:none here anyway. */
  .hud-map__frame {
    display: block;
    width: 100%;
    height: 100%;
  }
  .hud-map__card {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    resize: none;
    border: 0;
    background: rgba(8, 8, 8, 0.98);
    /* Allow internal scroll so the LAT/LON readout always reachable
       on landscape phones where 390px height < card content height. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Brackets sit closer to the edge on a phone */
  .hud-map__card::before,
  .hud-map__card::after,
  .hud-map__brackets::before,
  .hud-map__brackets::after { width: 12px; height: 12px; }
  .hud-map__card::before  { top: 8px; left: 8px; }
  .hud-map__card::after   { top: 8px; right: 8px; }
  .hud-map__brackets::before { bottom: 8px; left: 8px; }
  .hud-map__brackets::after  { bottom: 8px; right: 8px; }

  .hud-map__eyebrow { font-size: 0.6rem; letter-spacing: 0.16em; padding: 0 16px; margin-bottom: 0.75rem; }
  .hud-map__close { font-size: 1.1rem; padding: 6px 10px; margin: -6px -10px; }
  .hud-map__readout { font-size: 0.7rem; }
  .hud-map__row { grid-template-columns: 60px 1fr; }
  /* Larger zoom buttons for fingers */
  .hud-map__zoom button { width: 36px; height: 36px; font-size: 18px; }
  /* Map canvas — shrink min-height so the LAT/LON/LOC/SITE/SUNRISE
     readout always fits within the visible viewport on landscape phones
     (iPhone landscape ~393px tall). Default min-height: 280px would
     consume nearly the full short-axis viewport, pushing the readout
     off the bottom. Bryan QA 2026-05-12 — "the landscape mode is still
     missing the lon and lat on the bottom." */
  .hud-map__canvas { min-height: 140px; margin-bottom: 0.5rem; }

  /* One line on phones (owner 2026-06-12, iPhone screenshot): the old
     column-stack was a fix for a LONGER title ("Design Studio &
     Prototype Lab") that no longer exists — "VAREN Design Annex" +
     "[ HARVARD BLDG ]" fit a 360px sheet on one row, and the stacked
     layout left the close × floating against a two-line block. Row
     layout puts title, eyebrow and × on one baseline grid; the tag's
     ellipsis (base rule) is the fallback if a future title grows. */
  .hud-map__heading-left {
    flex-direction: row;
    align-items: baseline;
    gap: 0.625rem;
    min-width: 0;
  }
  .hud-map__title {
    white-space: nowrap;
    font-size: 0.9rem;
    line-height: 1.25;
  }
  .hud-map__eyebrow-tag {
    font-size: 0.58rem;
    letter-spacing: 0.16em;
  }
  /* Close × anchors to the single heading line, flush to the row end —
     same grid as the top-right bracket inset. */
  .hud-map__eyebrow { align-items: baseline; }
}

/* ── HUD parity with /locate (2026-06-05): course name chip + clickable
   LOC/LAT/LON readout values ───────────────────────────────────────── */
.course-chip {
  position: fixed;
  top: 0; left: 0;
  z-index: 100000;            /* above the HUD modal */
  background: rgba(8, 8, 8, 0.85);
  border: 1px solid rgba(200, 169, 111, 0.55);
  color: #C8A96F;
  font-family: "Söhne Mono", "Soehne Mono", "SF Mono", Menlo, monospace;
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.4rem 0.65rem;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.course-chip.is-visible { opacity: 1; transform: translateY(0); }

.hud-map__readout .hud-map__value.loc-recenter {
  pointer-events: auto;
  cursor: pointer;
  position: relative;
  transition: color 0.25s ease;
}
.hud-map__readout .hud-map__value.loc-recenter::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.hud-map__readout .hud-map__value.loc-recenter:hover,
.hud-map__readout .hud-map__value.loc-recenter:focus-visible {
  color: #E2CC9A;
}
.hud-map__readout .hud-map__value.loc-recenter:hover::after,
.hud-map__readout .hud-map__value.loc-recenter:focus-visible::after {
  transform: scaleX(1);
}
.hud-map__readout .hud-map__value.loc-recenter:focus-visible { outline: none; }