/* ==========================================================================
   Vancouver Happy Hour Map - all styling, light and dark.
   Owned by agent U1 together with index.html. No external fonts, no images.
   Palette derived from DESIGN_BRIEF.md section D so the panel sits in the same
   world as the 3D city.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Surfaces - light. Ground, roads, walls and fog from the brief. */
  --bg:            #EDE7DE;   /* fog */
  --bg-stage:      #E9E4DA;   /* ground */
  --panel-bg:      #FBFAF7;   /* roads */
  --surface:       #FFFFFF;
  --surface-2:     #F4EFE6;
  --surface-3:     #E9E4DA;
  --border:        #DCD3C8;   /* walls */
  --border-strong: #B3A796;
  --scrim:         rgba(27, 31, 39, 0.55);

  /* Text */
  --text:          #1B1F27;
  --text-muted:    #5A5F69;
  --text-on-accent:#FFFFFF;

  /* Accent, derived from the water blue */
  --accent:        #14607E;
  --accent-hover:  #0F4E67;
  --accent-soft:   #DDEAF1;
  --focus:         #0F4E67;
  --focus-halo:    #FFFFFF;

  /* Status - "now" is a solid fill so it is the darkest chip in greyscale */
  --now-bg:        #FF6B4A;
  --now-ink:       #1B1F27;
  --now-edge:      #C43F1E;
  --now-quiet:     #8A2A0E;

  --soon-bg:       #FBEBCB;
  --soon-ink:      #6E4A00;
  --soon-edge:     #B67A05;

  --later-bg:      #E3EFED;
  --later-ink:     #1F5A54;
  --later-edge:    #2F7C74;

  --off-bg:        #E9E6E0;
  --off-ink:       #4A4E56;
  --off-edge:      #6C7079;

  /* Honesty - estimates, conflicts, low confidence. Calm, never alarming. */
  --note-bg:       #F5F1E8;
  --note-edge:     #B9A87F;
  --note-ink:      #57503F;
  --estimate-line: #8C8577;

  --fav:           #B4531C;

  /* Shape and motion */
  --radius-s: 4px;
  --radius:   8px;
  --radius-l: 14px;
  --tap: 44px;
  --panel-w: 460px;
  --shadow-1: 0 1px 2px rgba(27, 31, 39, 0.08), 0 2px 8px rgba(27, 31, 39, 0.06);
  --shadow-2: 0 6px 28px rgba(27, 31, 39, 0.18);
  --dur: 160ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
              "Liberation Mono", monospace;
}

/* Dark tokens, shared by the explicit dark class and the system preference. */
:root.theme-dark,
:root:has(#app.theme-dark) {
  color-scheme: dark;

  --bg:            #0E1218;   /* sky */
  --bg-stage:      #1B1F27;   /* ground */
  --panel-bg:      #1B1F27;
  --surface:       #232B36;
  --surface-2:     #2E3542;   /* walls */
  --surface-3:     #39414F;
  --border:        #3C4552;
  --border-strong: #5A6373;
  --scrim:         rgba(6, 9, 13, 0.7);

  --text:          #EDE7DE;
  --text-muted:    #A6AFBD;
  --text-on-accent:#0E1218;

  --accent:        #7CC0E0;
  --accent-hover:  #A2D4EC;
  --accent-soft:   #1C2C38;
  --focus:         #9AD1EA;
  --focus-halo:    #0E1218;

  --now-bg:        #FF6B4A;
  --now-ink:       #1B1F27;
  --now-edge:      #FF9377;
  --now-quiet:     #FFB4A0;

  --soon-bg:       #3A2B0E;
  --soon-ink:      #F2C97D;   /* window amber */
  --soon-edge:     #F2C97D;

  --later-bg:      #14302E;
  --later-ink:     #8FD5CB;
  --later-edge:    #5FB8AD;

  --off-bg:        #262A31;
  --off-ink:       #B4BBC5;
  --off-edge:      #8A929E;

  --note-bg:       #262A22;
  --note-edge:     #7E7350;
  --note-ink:      #D8D0BB;
  --estimate-line: #9A937F;

  --fav:           #E8A87C;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 8px 34px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not(.theme-light):not(:has(#app.theme-light)) {
    color-scheme: dark;

    --bg:            #0E1218;
    --bg-stage:      #1B1F27;
    --panel-bg:      #1B1F27;
    --surface:       #232B36;
    --surface-2:     #2E3542;
    --surface-3:     #39414F;
    --border:        #3C4552;
    --border-strong: #5A6373;
    --scrim:         rgba(6, 9, 13, 0.7);

    --text:          #EDE7DE;
    --text-muted:    #A6AFBD;
    --text-on-accent:#0E1218;

    --accent:        #7CC0E0;
    --accent-hover:  #A2D4EC;
    --accent-soft:   #1C2C38;
    --focus:         #9AD1EA;
    --focus-halo:    #0E1218;

    --now-bg:        #FF6B4A;
    --now-ink:       #1B1F27;
    --now-edge:      #FF9377;
    --now-quiet:     #FFB4A0;

    --soon-bg:       #3A2B0E;
    --soon-ink:      #F2C97D;
    --soon-edge:     #F2C97D;

    --later-bg:      #14302E;
    --later-ink:     #8FD5CB;
    --later-edge:    #5FB8AD;

    --off-bg:        #262A31;
    --off-ink:       #B4BBC5;
    --off-edge:      #8A929E;

    --note-bg:       #262A22;
    --note-edge:     #7E7350;
    --note-ink:      #D8D0BB;
    --estimate-line: #9A937F;

    --fav:           #E8A87C;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 8px 34px rgba(0, 0, 0, 0.55);
  }
}

/* An explicit light choice must beat the system preference, so it comes last. */
:root.theme-light,
:root:has(#app.theme-light) {
  color-scheme: light;

  --bg:            #EDE7DE;
  --bg-stage:      #E9E4DA;
  --panel-bg:      #FBFAF7;
  --surface:       #FFFFFF;
  --surface-2:     #F4EFE6;
  --surface-3:     #E9E4DA;
  --border:        #DCD3C8;
  --border-strong: #B3A796;
  --scrim:         rgba(27, 31, 39, 0.55);

  --text:          #1B1F27;
  --text-muted:    #5A5F69;
  --text-on-accent:#FFFFFF;

  --accent:        #14607E;
  --accent-hover:  #0F4E67;
  --accent-soft:   #DDEAF1;
  --focus:         #0F4E67;
  --focus-halo:    #FFFFFF;

  --now-bg:        #FF6B4A;
  --now-ink:       #1B1F27;
  --now-edge:      #C43F1E;
  --now-quiet:     #8A2A0E;

  --soon-bg:       #FBEBCB;
  --soon-ink:      #6E4A00;
  --soon-edge:     #B67A05;

  --later-bg:      #E3EFED;
  --later-ink:     #1F5A54;
  --later-edge:    #2F7C74;

  --off-bg:        #E9E6E0;
  --off-ink:       #4A4E56;
  --off-edge:      #6C7079;

  --note-bg:       #F5F1E8;
  --note-edge:     #B9A87F;
  --note-ink:      #57503F;
  --estimate-line: #8C8577;

  --fav:           #B4531C;

  --shadow-1: 0 1px 2px rgba(27, 31, 39, 0.08), 0 2px 8px rgba(27, 31, 39, 0.06);
  --shadow-2: 0 6px 28px rgba(27, 31, 39, 0.18);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--accent);
  text-underline-offset: 2px;
}
a:hover { color: var(--accent-hover); }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

[hidden] { display: none !important; }
.is-hidden { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Focus: never the bare browser default. */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}
.card:focus-visible,
.chip:focus-visible,
.btn:focus-visible,
.select:focus-visible,
.input:focus-visible,
.range:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-halo);
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  transform: translateY(-140%);
  margin: 8px;
  padding: 12px 16px;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--focus);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.noscript {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 300;
  margin: 0;
  padding: 16px calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));
  background: var(--note-bg);
  color: var(--note-ink);
  border-top: 2px solid var(--note-edge);
}

/* --------------------------------------------------------------------------
   3. Controls: buttons, chips, fields
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 8px 14px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn:hover { background: var(--surface-2); }
.btn:active { background: var(--surface-3); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:active { background: var(--accent-hover); }

.btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
}
.btn-quiet:hover { background: var(--surface-2); text-decoration-color: currentColor; }

.btn-icon { padding: 8px; }

.btn[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 6px 14px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover { background: var(--surface-2); }
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}
/* The pressed state is not carried by colour alone: a check mark is drawn in CSS. */
.chip[aria-pressed="true"]::before {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -2px);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.field-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.field-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.field-row .field { flex: 1 1 auto; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 14px;
}
.input::placeholder { color: var(--text-muted); opacity: 1; }
.textarea { min-height: 110px; resize: vertical; line-height: 1.5; }

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.select-multi {
  appearance: auto;
  -webkit-appearance: auto;
  background-image: none;
  padding: 4px;
  min-height: 96px;
}
.select-multi option {
  padding: 6px 8px;
  border-radius: var(--radius-s);
}

.hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Range: 44 px tall hit area, 24 px thumb. */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--tap);
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel-bg);
  box-shadow: 0 0 0 1px var(--accent);
}
.range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
}
.range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel-bg);
  box-shadow: 0 0 0 1px var(--accent);
}

/* CSS-drawn glyphs. No icon font, no images, no emoji. */
.btn-glyph {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.glyph-orbit {
  border: 2px solid currentColor;
  border-radius: 50%;
}
.glyph-orbit::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: scaleY(0.45);
}
.glyph-top {
  border: 2px solid currentColor;
  border-radius: 2px;
}
.glyph-top::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  bottom: 2px;
  width: 2px;
  margin-left: -1px;
  background: currentColor;
}
.glyph-walk::before {
  content: "";
  position: absolute;
  left: 6px; top: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.glyph-walk::after {
  content: "";
  position: absolute;
  left: 3px; top: 6px;
  width: 10px; height: 10px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: skewX(-12deg);
}
.glyph-theme {
  border: 2px solid currentColor;
  border-radius: 50%;
  overflow: hidden;
}
.glyph-theme::after {
  content: "";
  position: absolute;
  inset: 0 0 0 50%;
  background: currentColor;
}
.glyph-surprise {
  border: 2px solid currentColor;
  border-radius: 3px;
}
.glyph-surprise::after {
  content: "";
  position: absolute;
  left: 4px; top: 4px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 4px 4px 0 0 currentColor;
}
.glyph-sortdir::after {
  content: "";
  position: absolute;
  left: 4px; top: 4px;
  width: 8px; height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.sort-dir[aria-pressed="true"] .glyph-sortdir::after { transform: rotate(135deg); }
.glyph-back::after {
  content: "";
  position: absolute;
  left: 5px; top: 4px;
  width: 8px; height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.glyph-close::before,
.glyph-close::after {
  content: "";
  position: absolute;
  left: 1px; top: 7px;
  width: 14px; height: 2px;
  background: currentColor;
}
.glyph-close::before { transform: rotate(45deg); }
.glyph-close::after  { transform: rotate(-45deg); }

/* Legend: a key. A filled swatch beside three rules of "text". */
.glyph-legend::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 7px 0 0 currentColor;
}
.glyph-legend::after {
  content: "";
  position: absolute;
  left: 8px; top: 3px;
  width: 8px; height: 2px;
  background: currentColor;
  box-shadow: 0 7px 0 0 currentColor;
}

/* Layers: two stacked sheets seen at an angle. */
.glyph-layers::before,
.glyph-layers::after {
  content: "";
  position: absolute;
  left: 1px;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  transform: scale(1, 0.5) rotate(45deg);
}
.glyph-layers::before { top: -1px; }
.glyph-layers::after  { top: 4px; }

/* --------------------------------------------------------------------------
   4. App shell
   -------------------------------------------------------------------------- */

#app {
  position: relative;
  height: 100%;
  min-height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background: var(--bg);
  isolation: isolate;
}

.stage {
  position: relative;
  grid-area: 1 / 1 / 2 / 2;
  min-width: 0;
  min-height: 0;
  background: var(--bg-stage);
  overflow: hidden;
}

#canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
#canvas > p {
  max-width: 40ch;
  margin: 24px;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   5. Map chrome
   -------------------------------------------------------------------------- */

.map-controls {
  position: absolute;
  top: calc(12px + var(--safe-t));
  right: calc(12px + var(--safe-r));
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  max-width: min(280px, calc(100% - 24px));
}

.mode-group {
  display: flex;
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.btn-mode {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 8px 12px;
}
.btn-mode + .btn-mode { border-left: 1px solid var(--border); }
.btn-mode[aria-pressed="true"] {
  background: var(--accent);
  color: var(--text-on-accent);
}
.btn-mode .btn-text { font-size: 13px; }

.map-controls-row {
  display: flex;
  gap: 8px;
}
.map-controls-row .btn {
  background: var(--panel-bg);
  box-shadow: var(--shadow-1);
}

/* Above 768 px the legend and the layer list are permanent panels, so the
   controls that open them, and the controls that close them, do not exist.
   The mobile block below turns all four on. */
.map-popover-btn,
.popover-close { display: none; }

.compass { position: relative; }
.compass-dial {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.compass-needle {
  position: absolute;
  left: 50%;
  top: 1px;
  width: 0;
  height: 0;
  margin-left: -4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 9px solid currentColor;
}
.compass-letter {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 10px;
  font-weight: 700;
}

.layer-toggles {
  max-width: 220px;
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.layers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 6px;
  margin: 0;
  padding: 6px 8px 8px;
  border: 0;
}
.layers > legend {
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.layer-item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: var(--tap);
  padding: 4px 6px;
  border-radius: var(--radius-s);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.layer-item:hover { background: var(--surface-2); }
.layer-item:focus-within { outline: 3px solid var(--focus); outline-offset: -1px; }
.layer-item input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent);
}

.legend {
  position: absolute;
  left: calc(12px + var(--safe-l));
  bottom: calc(12px + var(--safe-b));
  z-index: 5;
  max-width: 360px;
  padding: 12px 14px;
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.legend-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.legend-list { display: grid; gap: 6px; }
.legend-list li { font-size: 12px; }
.legend-list li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
/* The badge column never wraps; the explanation does. */
.legend-list .pill,
.legend-list .conflict-flag,
.legend-list .confidence-low,
.legend-list .estimated { white-space: nowrap; }
.legend-note { font-size: 12px; line-height: 1.3; color: var(--text-muted); }
.legend-foot {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
  max-width: 30ch;
}

.minimap {
  position: absolute;
  right: calc(12px + var(--safe-r));
  bottom: calc(12px + var(--safe-b));
  z-index: 5;
  display: none;
  width: 150px;
  height: 150px;
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  box-shadow: var(--shadow-1);
}
#app.mode-walk .minimap { display: block; }

.joystick {
  position: absolute;
  left: calc(20px + var(--safe-l));
  bottom: calc(20px + var(--safe-b));
  z-index: 6;
  display: none;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--border-strong);
  opacity: 0.9;
  touch-action: none;
}
.joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel-bg);
}
#app.mode-walk .joystick { display: block; }
@media (pointer: fine) and (min-width: 768px) {
  #app.mode-walk .joystick { display: none; }
}

.walk-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--scrim);
}
.walk-overlay-inner {
  max-width: 460px;
  padding: 20px;
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
}
.walk-overlay-inner h2 { font-size: 17px; margin-bottom: 12px; }
.key-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  margin-bottom: 16px;
  font-size: 13px;
}
.key-list dt { font-weight: 700; }
.key-list dd { margin: 0; color: var(--text-muted); }

/* Walk mode quietens the overview chrome. */
#app.mode-walk .legend,
#app.mode-walk .layer-toggles { display: none; }

/* --------------------------------------------------------------------------
   6. Panel
   -------------------------------------------------------------------------- */

.panel {
  position: relative;
  z-index: 10;
  grid-area: 1 / 1 / 2 / 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel-bg);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}

.sheet-grip { display: none; }

.panel-header {
  flex: 0 0 auto;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.brand-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.brand-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.clock-line {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.clock {
  font-family: var(--font-num);
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.clock-day { font-size: 12px; color: var(--text-muted); }
.tz-note {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--note-ink);
  background: var(--note-bg);
  border: 1px dashed var(--note-edge);
  border-radius: var(--radius-s);
  padding: 4px 8px;
}

.panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.controls {
  flex: 0 0 auto;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.scrub { display: flex; flex-direction: column; gap: 2px; }
.scrub-row { display: flex; align-items: center; gap: 12px; }
.time-readout {
  flex: 0 0 auto;
  min-width: 8ch;
  text-align: right;
  font-family: var(--font-num);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.btn-now { flex: 0 0 auto; }

.label-note {
  margin-left: 6px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.9;
}

/* Advanced filters live behind a real disclosure so the list stays above the fold. */
.more-filters {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.more-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius);
}
.more-summary::-webkit-details-marker { display: none; }
.more-summary::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(-1px, 1px);
  transition: transform var(--dur) var(--ease);
}
.more-filters[open] > .more-summary::before { transform: rotate(45deg); }
.more-filters[open] > .more-summary { border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.more-summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.more-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px 12px;
}

.filter-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.filter-row .more-filters { flex: 1 1 auto; min-width: 0; }
.reset-btn { flex: 0 0 auto; }

.filter-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* The bar above the list: how many matched, and in what order. */
.list-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px 6px 16px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
}
.match-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  min-width: 0;
}
.sort-block {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.select-compact {
  width: auto;
  max-width: 165px;
  padding: 4px 30px 4px 10px;
  font-size: 13px;
  background-position: right 13px center, right 8px center;
}
.sort-dir { padding: 6px; }

.panel-main {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.panel-footer {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 8px 12px calc(8px + var(--safe-b));
  border-top: 1px solid var(--border);
  background: var(--panel-bg);
}
.panel-footer .btn { flex: 1 1 auto; font-size: 13px; padding: 8px 6px; }

/* --------------------------------------------------------------------------
   7. List and cards
   -------------------------------------------------------------------------- */

.list {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.list:focus-visible { outline-offset: -3px; }

.list-empty {
  padding: 20px 16px;
  color: var(--text-muted);
  font-size: 14px;
  border-top: 1px solid var(--border);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.card:hover,
.card.is-hovered {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.card.is-selected {
  border-color: var(--accent);
  border-left-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.card.is-favourite { border-left-color: var(--fav); }
/* Favourites are not marked by colour alone: a ring glyph sits in the corner. */
.card.is-favourite::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 12px;
  height: 12px;
  border: 3px solid var(--fav);
  border-radius: 50%;
}
.card.is-favourite .card-head { padding-right: 22px; }

/* The status pill carries a full sentence ("On now, until 6:00 pm"), so the
   head stacks rather than fighting for one line. */
.card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.card h3,
.card-name,
.card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}
.card-meta,
.card .meta {
  font-size: 12px;
  color: var(--text-muted);
}
.card-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.card-verified {
  font-size: 11px;
  color: var(--text-muted);
}

.card-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
}
.status-time {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text);
}

.card-deals,
.deals {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
}
.deal {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.deal-item { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-price {
  flex: 0 0 auto;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.card-tags,
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.price-tier {
  font-family: var(--font-num);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.verified {
  font-size: 11px;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   8. Status pills
   Four states, each with its own text, its own CSS-drawn glyph, its own border
   style and its own lightness, so they survive greyscale and colour blindness.
   -------------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 100%;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.35;
  border: 1px solid transparent;
}
.pill::before {
  content: "";
  flex: 0 0 auto;
  display: block;
  margin-top: 4px;
}
/* An estimate inside a pill keeps the pill's own colour, not the page's. */
.pill .estimated { color: inherit; border-bottom-color: currentColor; }
.pill .estimated::after { color: inherit; opacity: 0.85; }

/* NOW - solid fill, fully rounded, filled dot. Darkest of the four in greyscale. */
.pill-now {
  position: relative;
  background: var(--now-bg);
  color: var(--now-ink);
  border: 2px solid var(--now-edge);
  border-radius: 999px;
}
/* Filled dot, with the pulsing halo of a venue that is on right now. */
.pill-now::before {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  animation: pill-pulse 2.4s var(--ease) infinite;
}
@keyframes pill-pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* SOON - tinted fill, square-ish corners, solid heavy border, triangle glyph. */
.pill-soon {
  background: var(--soon-bg);
  color: var(--soon-ink);
  border: 2px solid var(--soon-edge);
  border-radius: var(--radius-s);
}
.pill-soon::before {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}

/* LATER - pale fill, dashed border, hollow ring glyph. */
.pill-later {
  background: var(--later-bg);
  color: var(--later-ink);
  border: 2px dashed var(--later-edge);
  border-radius: var(--radius-s);
}
.pill-later::before {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid currentColor;
}

/* OFF - lightest fill, dotted border, square corners, bar glyph. */
.pill-off {
  background: var(--off-bg);
  color: var(--off-ink);
  border: 2px dotted var(--off-edge);
  border-radius: 0;
  font-weight: 600;
}
.pill-off::before {
  width: 10px;
  height: 3px;
  background: currentColor;
}

/* The card carries the state on its left edge as well, but never alone. */
.card:has(.pill-now)   { border-left-color: var(--now-edge); }
.card:has(.pill-soon)  { border-left-color: var(--soon-edge); }
.card:has(.pill-later) { border-left-color: var(--later-edge); }
.card:has(.pill-off)   { border-left-color: var(--off-edge); }
.card.is-favourite:has(.pill-now),
.card.is-favourite:has(.pill-soon),
.card.is-favourite:has(.pill-later),
.card.is-favourite:has(.pill-off) { border-left-color: var(--fav); }

/* --------------------------------------------------------------------------
   9. Honesty styling
   The app admits what it does not know. Visible, calm, never alarming and
   never hidden.
   -------------------------------------------------------------------------- */

/* A time that is an estimate rather than a published clock time. */
.estimated {
  border-bottom: 1px dashed var(--estimate-line);
  color: inherit;
  cursor: help;
}
.estimated::after {
  content: " (estimate)";
  font-size: 0.85em;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Two sources disagree. Both claims are shown; the UI never picks a side. */
.conflict-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--note-ink);
  background: var(--note-bg);
  border: 1px solid var(--note-edge);
  border-radius: var(--radius-s);
}
/* Glyph: two short bars offset from each other - two claims, not one. */
.conflict-flag::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: skewX(-18deg);
}
.card .conflict-flag,
.card-flags .conflict-flag { align-self: flex-start; }

/* In the detail view the same class wraps a whole block: the field in dispute,
   both claims, both links, and the note that says it is unresolved. */
.conflicts { display: flex; flex-direction: column; gap: 8px; }
.conflict-lede { font-size: 13px; color: var(--text-muted); }
div.conflict-flag {
  display: block;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 400;
  background: var(--note-bg);
  border: 1px solid var(--note-edge);
  border-left-width: 3px;
  border-radius: var(--radius-s);
}
div.conflict-flag::before { display: none; }
.conflict-where {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--note-ink);
  margin-bottom: 6px;
}
.conflict-claims {
  display: grid;
  gap: 8px;
}
.conflict-claims > li,
.conflict-claim {
  padding: 8px 10px;
  background: var(--surface);
  border-left: 3px solid var(--note-edge);
  border-radius: var(--radius-s);
  font-size: 13px;
}
.claim-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--note-ink);
}
.conflict-note {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--note-ink);
}

/* A listing whose sourcing is thin. Marked, not buried. */
.confidence-low {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--note-ink);
  background: transparent;
  border: 1px dashed var(--note-edge);
  border-radius: var(--radius-s);
}
.confidence-low::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(45deg);
}
.card.confidence-low {
  border-style: dashed;
  border-left-style: solid;
}

/* Could not be re-verified on the last pass. Says exactly that. */
.unverified-note {
  display: block;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--note-ink);
  background: var(--note-bg);
  border: 1px solid var(--note-edge);
  border-left-width: 3px;
  border-radius: var(--radius-s);
}
.card .unverified-note { font-size: 11.5px; }

/* Both classes together: a block admission, not a badge. */
.confidence-low.unverified-note {
  display: block;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 400;
  border: 1px solid var(--note-edge);
  border-left-width: 3px;
  border-style: solid;
  background: var(--note-bg);
}
.confidence-low.unverified-note::before {
  display: inline-block;
  margin: 0 6px 0 0;
  vertical-align: baseline;
}

.about-warning,
.accuracy-warning {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 12px 14px;
  margin-bottom: 4px;
  color: var(--note-ink);
  background: var(--note-bg);
  border: 1px solid var(--note-edge);
  border-left-width: 3px;
  border-radius: var(--radius-s);
}

/* --------------------------------------------------------------------------
   10. Detail view
   The behaviour layer replaces the whole of #detail when a venue is opened, so
   everything below styles the DOM it emits: .detail-inner and friends, plus
   bare buttons that carry no class of their own.
   -------------------------------------------------------------------------- */

.detail {
  flex: 1 1 auto;
  min-height: 0;
  display: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel-bg);
}
#app.detail-open .detail { display: block; }
#app.detail-open .list,
#app.detail-open .list-bar,
#app.detail-open .list-empty { display: none; }
#app.detail-open .controls-filters { display: none; }

/* The back control sits above the detail, outside it, so it survives a render. */
.detail-back {
  flex: 0 0 auto;
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--panel-bg);
  text-decoration: none;
}
.detail-back:hover { background: var(--surface-2); }
.detail-back:focus-visible { outline-offset: -3px; }

.detail-inner,
.detail-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px calc(24px + var(--safe-b));
}
.detail-inner > section,
.detail-body > section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.detail-name,
.detail-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.detail-name:focus-visible { outline-offset: 4px; }
.detail-inner h3,
.detail-body h3,
.detail-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}
.detail-sub,
.detail-address {
  font-size: 12.5px;
  color: var(--text-muted);
}
.detail-summary { font-size: 14px; }
.detail-status { margin-top: 2px; }
.detail-inner p,
.detail-body p { font-size: 14px; }

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.schedule-table th,
.schedule-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.schedule-table th {
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  width: 8.5em;
}
.schedule-table tr.is-today td,
.schedule-table tr.is-today th { background: var(--surface-2); font-weight: 700; }
.schedule-summary {
  font-size: 13px;
  color: var(--text-muted);
}
.day-windows { display: flex; flex-direction: column; gap: 2px; }
.crosses {
  font-size: 11px;
  color: var(--text-muted);
}

.detail-actions,
.detail-links .links,
.form-actions,
.vote-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.links a,
.link-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.link-grid .btn { justify-content: flex-start; text-align: left; }

.menu-shot {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
}
.menu-shot img { width: 100%; display: block; }
.menu-shot-caption {
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  text-align: left;
}

.venue-notes,
.notes-field { width: 100%; }
.note-status,
.report-status {
  font-size: 12px;
  color: var(--text-muted);
  min-height: 1.2em;
}

.tally,
.community-rating,
.vote-count {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 13px;
}

.sources { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.source-link { word-break: break-word; }

.stars { display: inline-flex; gap: 4px; }
.star {
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  cursor: pointer;
  position: relative;
  color: var(--border-strong);
}
.star::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: currentColor;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.star[aria-pressed="true"],
.star.is-on { color: var(--fav); }
/* A filled star is not only a colour change: it also gains a ring. */
.star[aria-pressed="true"]::after,
.star.is-on::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   10b. Controls the behaviour layer emits without a class of their own.
   They must look like the rest of the app, so they adopt .btn and .input.
   -------------------------------------------------------------------------- */

.detail button:not([class]),
.panel-body button:not([class]),
.shortlist-items button:not([class]),
.changelog button:not([class]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 8px 14px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.detail button:not([class]):hover,
.panel-body button:not([class]):hover,
.shortlist-items button:not([class]):hover,
.changelog button:not([class]):hover { background: var(--surface-2); }

.detail button[aria-pressed="true"]:not([class]),
.panel-body button[aria-pressed="true"]:not([class]) {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.detail select,
.detail textarea,
.detail input:not([type="checkbox"]):not([type="radio"]),
.panel-body select,
.panel-body textarea,
.panel-body input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 14px;
}
.detail textarea,
.panel-body textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

.detail label,
.panel-body label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

/* A button that reads as a link. */
.linklike {
  min-height: var(--tap);
  padding: 4px 0;
  background: none;
  border: 0;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.linklike:hover { color: var(--accent-hover); }

.muted { color: var(--text-muted); font-size: 12.5px; }

/* --------------------------------------------------------------------------
   11. Overlays: sheets, lightbox, toasts, status
   -------------------------------------------------------------------------- */

.overlay-root {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
.overlay-root > * { pointer-events: auto; }

.sheet {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(20px + var(--safe-t)) calc(16px + var(--safe-r))
           calc(20px + var(--safe-b)) calc(16px + var(--safe-l));
  background: var(--scrim);
}
.sheet-inner {
  width: min(680px, 100%);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px 22px;
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
}
.sheet-narrow .sheet-inner { width: min(460px, 100%); }

.sheet-header {
  position: sticky;
  top: -18px;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: -18px -20px 12px;
  padding: 18px 20px 10px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
}
.sheet-header h2 { font-size: 18px; font-weight: 700; }
.sheet-close { flex: 0 0 auto; }
/* A header carrying only the close control collapses to a thin bar. */
.sheet-header > .sheet-close:only-child { margin-left: auto; }
.sheet-header:has(> .sheet-close:only-child) { padding-bottom: 6px; border-bottom: 0; }
.sheet-lede { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.sheet-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.shortlist-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shortlist-item,
.shortlist-items > li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
}
.shortlist-items > li.shortlist-item { padding-left: 48px; }
.stop-index {
  position: absolute;
  left: 12px;
  top: 10px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-on-accent);
  background: var(--accent);
  border-radius: 50%;
}
.stop-name {
  flex: 1 1 100%;
  font-size: 15px;
  font-weight: 700;
}
.stop-walk,
.stop-arrive,
.shortlist-leg {
  flex: 1 1 100%;
  font-size: 12px;
  color: var(--text-muted);
}
.shortlist-item .pill { flex: 0 0 auto; margin-right: 4px; }
.shortlist-note,
.shortlist-items > li.muted {
  display: block;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 10px 2px 0;
  font-size: 12px;
  color: var(--text-muted);
}

.changelog-body { display: flex; flex-direction: column; gap: 10px; }
.changelog {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 10px;
}
.changelog > li,
.change-entry {
  display: block;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.45;
}
.change-date {
  display: inline-block;
  min-width: 6.5em;
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--text-muted);
}
.change-kind {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.change-evidence {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}

/* Checkbox multi-filters, used when the shell hands over a plain container. */
.multi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  max-height: 190px;
  overflow-y: auto;
}
.multi > legend {
  padding: 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.multi-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 2px 4px;
  border-radius: var(--radius-s);
  font-size: 13px;
  cursor: pointer;
}
.multi-item:hover { background: var(--surface-2); }
.multi-item input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent);
}

/* Fallback panel navigation, if the behaviour layer ever injects its own. */
.panel-nav {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.panel-nav-btn {
  flex: 1 1 auto;
  font-size: 13px;
}

.prose { display: flex; flex-direction: column; gap: 10px; }
.prose h3 {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
}
.prose p, .prose li { font-size: 13.5px; line-height: 1.55; }
.source-list { display: flex; flex-direction: column; gap: 8px; }
.source-list li {
  padding-left: 14px;
  position: relative;
  color: var(--text);
}
.source-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
}
.about-runtime:not(:empty) {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}

.report-form { display: flex; flex-direction: column; gap: 12px; }
.report-venue { font-size: 14px; font-weight: 600; }
.report-venue:empty { display: none; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.lightbox {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: calc(20px + var(--safe-t)) calc(16px + var(--safe-r))
           calc(20px + var(--safe-b)) calc(16px + var(--safe-l));
  background: var(--scrim);
}
.lightbox-img {
  display: block;
  max-width: none;
  max-height: none;
  height: auto;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
.lightbox-viewport { flex: 1; min-height: 0; width: 100%; overflow: auto; overscroll-behavior: contain; }
.lightbox-toolbar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; width: 100%; }
.lightbox-toolbar .btn { min-width: 44px; min-height: 44px; }
.lightbox-toolbar span { color: #fff; min-width: 3ch; text-align: center; }
.lightbox-caption {
  font-size: 12px;
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  text-align: center;
}
.lightbox-caption:empty { display: none; }
.lightbox-close {
  position: absolute;
  top: calc(14px + var(--safe-t));
  right: calc(14px + var(--safe-r));
  background: var(--panel-bg);
}

.toasts {
  position: absolute;
  left: 50%;
  bottom: calc(20px + var(--safe-b));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, calc(100% - 32px));
  pointer-events: none;
}
.toast {
  padding: 10px 14px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  font-size: 13px;
  pointer-events: auto;
}

.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 30;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: var(--shadow-2);
  font-size: 13px;
  font-weight: 600;
}
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.error-banner {
  position: absolute;
  top: calc(12px + var(--safe-t));
  left: 50%;
  /* Above the map chrome, below the panel: an error must never cover the list
     or the grip that resizes the sheet. */
  z-index: 12;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 24px));
  padding: 12px 14px;
  background: var(--note-bg);
  color: var(--note-ink);
  border: 1px solid var(--note-edge);
  border-left: 4px solid var(--now-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   12. Desktop layout
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  #app {
    grid-template-columns: var(--panel-w) 1fr;
  }
  .panel {
    grid-area: 1 / 1 / 2 / 2;
    padding-left: var(--safe-l);
    padding-top: var(--safe-t);
  }
  .stage { grid-area: 1 / 2 / 2 / 3; }
  .overlay-root { z-index: 40; }

  /* Walk mode keeps the panel on desktop but gives the city more room. */
  #app.mode-walk { grid-template-columns: 300px 1fr; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root { --panel-w: 340px; }
}

/* Short desktop windows: the list is the product, so the chrome above it gets
   tighter and the quick filters become one sideways-scrolling row. */
@media (min-width: 768px) and (max-height: 900px) {
  .controls { padding: 9px 16px; gap: 8px; }
  .panel-header { padding: 10px 16px 8px; }
  .controls-filters .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }
  .controls-filters .chips .chip { flex: 0 0 auto; scroll-snap-align: start; }
}

@media (min-width: 1440px) {
  :root { --panel-w: 400px; }
}

/* --------------------------------------------------------------------------
   13. Mobile: bottom sheet with three snap points
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  #app { grid-template-columns: 1fr; }

  .panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 20;
    height: 56dvh;
    /* The sheet never covers the controls row, at any snap point, so the
       camera modes stay reachable while the detail is open. */
    max-height: calc(100dvh - 62px - var(--safe-t));
    border-right: 0;
    border-top: 1px solid var(--border-strong);
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    box-shadow: var(--shadow-2);
    padding-bottom: 0;
    transition: height var(--dur) var(--ease);
  }

  .sheet-grip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--tap);
    padding: 16px 0 10px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    cursor: grab;
    touch-action: none;
  }
  .sheet-grip:active { cursor: grabbing; }
  .sheet-grip:focus-visible { outline-offset: -3px; }
  .sheet-grip-bar {
    display: block;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: var(--border-strong);
    transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
  }
  .sheet-grip:hover .sheet-grip-bar,
  .sheet-grip:focus-visible .sheet-grip-bar,
  #app.sheet-dragging .sheet-grip-bar {
    background: var(--accent);
    width: 56px;
  }
  /* While a finger is on the handle the height is driven from script, so the
     transition would fight the drag. */
  #app.sheet-dragging .panel { transition: none; }

  .panel-header { padding: 2px 16px 8px; }
  .brand-title { font-size: 14px; }
  .brand-sub { display: none; }
  .clock { font-size: 17px; }

  .panel-footer { padding-bottom: calc(8px + var(--safe-b)); }

  /* The links block in the detail view is a row of standalone destinations -
     Website, Menu, Directions, Call - not prose, so on a touch screen each one
     gets a real 44 px target. Source links stay inline inside their sentence,
     where the inline exception applies and padding would break the line. */
  /* The "How we know" list is one source URL per row: a standalone target. */
  .sources > li > a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding: 6px 0;
  }
  .links > li { display: flex; }
  .links > li > a,
  .links > li > .linklike {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    min-width: var(--tap);
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration-thickness: 1px;
  }

  /* The chips scroll sideways rather than eating the sheet. */
  .controls-filters .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }
  .controls-filters .chips .chip { flex: 0 0 auto; scroll-snap-align: start; }

  /* Peek: the grip, the quick filters, the count and the sort. Nothing else. */
  #app.panel-peek .panel { height: calc(168px + var(--safe-b)); }
  #app.panel-peek .panel-header,
  #app.panel-peek .controls-time,
  #app.panel-peek .panel-footer,
  #app.panel-peek .controls-filters .field,
  #app.panel-peek .controls-filters .filter-row,
  #app.panel-peek .list,
  #app.panel-peek .list-empty,
  #app.panel-peek .detail { display: none; }
  #app.panel-peek .panel-scroll { overflow: hidden; }
  #app.panel-peek .controls-filters { border-bottom: 0; padding-bottom: 4px; }
  #app.panel-peek .list-bar { border-bottom: 0; }

  /* Half: the quick filters and the cards. Day, time and the rest wait for full. */
  #app.panel-half .panel { height: 56dvh; }
  #app.panel-half .controls-time,
  #app.panel-half .controls-filters .field,
  #app.panel-half .controls-filters .filter-row { display: none; }
  #app.panel-half .controls-filters { border-bottom: 0; padding-bottom: 4px; }
  #app.panel-half .panel-header { padding-bottom: 6px; }
  #app.panel-half .tz-note { display: none; }

  /* Peek with a venue open: the sheet still shows the top of the detail rather
     than an empty strip, and it scrolls. */
  #app.panel-peek.detail-open .detail { display: block; }
  #app.panel-peek.detail-open .panel-scroll { overflow-y: auto; }

  /* Full: everything, detail included. */
  #app.panel-full .panel { height: calc(100dvh - 62px - var(--safe-t)); }

  /* The detail view owns the whole sheet once it is open. */
  #app.detail-open .controls-time,
  #app.detail-open .controls-filters,
  #app.detail-open .list-bar { display: none; }

  /* Walk mode hides the sheet entirely. */
  #app.mode-walk .panel { display: none; }

  /* ---- Map chrome: one compact row -------------------------------------
     Every control that used to be stacked into the top-right corner now sits
     on a single line: the three camera modes as one segmented group, then the
     compass, the theme toggle, surprise, and the two controls that open the
     legend and the layer list. Eight targets, each 44 px, and the row is
     inside the safe-area insets on all four sides. The strip itself does not
     take pointer events, so a drag that starts between two buttons still
     rotates the city. */
  .map-controls {
    top: calc(6px + var(--safe-t));
    right: calc(6px + var(--safe-r));
    left: calc(6px + var(--safe-l));
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    max-width: none;
    pointer-events: none;
  }
  .map-controls-row {
    gap: 4px;
    pointer-events: none;
  }
  .map-controls .mode-group,
  .map-controls .btn,
  .legend,
  .layer-toggles { pointer-events: auto; }

  .map-popover-btn { display: inline-flex; }

  /* The camera modes lose their words, not their names: the label stays in the
     accessible tree, it is only taken out of the picture. Dropping the divider
     rules buys back the two pixels that let all eight targets fit at 390 px. */
  .mode-group { flex: 0 0 auto; }
  .btn-mode {
    position: relative;
    padding: 8px;
    gap: 0;
  }
  .btn-mode + .btn-mode { border-left: 0; }
  .btn-mode .btn-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* ---- Legend and layers become popovers -------------------------------
     Neither is open by default. Each is opened from its own control, closes on
     Escape, on a tap outside, on its own close button, and on a second tap of
     the control that opened it. Both are clamped to the viewport so nothing
     runs off the right edge and no checkbox is ever clipped. */
  .legend,
  .layer-toggles {
    display: none;
    z-index: 25;
    max-height: calc(100dvh - 74px - var(--safe-t) - var(--safe-b));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 12px 12px;
    background: var(--panel-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
  }
  /* The layer list is a child of the controls strip, so it hangs off it. */
  .layer-toggles {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(300px, 100%);
    max-width: none;
  }
  /* The legend is a child of the stage, so it is placed against the stage. */
  .legend {
    position: absolute;
    top: calc(58px + var(--safe-t));
    right: calc(6px + var(--safe-r));
    left: auto;
    bottom: auto;
    width: min(300px, calc(100vw - 12px - var(--safe-l) - var(--safe-r)));
    max-width: none;
  }
  #app.chrome-legend-open .legend,
  #app.chrome-layers-open .layer-toggles { display: block; }
  /* Walk mode owns the screen; no popover survives the transition. */
  #app.mode-walk.chrome-legend-open .legend,
  #app.mode-walk.chrome-layers-open .layer-toggles { display: none; }

  .popover-close {
    display: inline-flex;
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 1;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  .legend-title,
  .layers > legend { padding-right: 44px; }

  /* One column: at 300 px two columns would squeeze "15 min drive zone" until
     the box clipped it, which is exactly the defect being fixed. */
  .layers {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
  }
  .layer-item { white-space: normal; }
  .legend-list { gap: 6px; }

  .minimap {
    width: 108px;
    height: 108px;
    bottom: calc(14px + var(--safe-b));
  }

  /* Keep the camera controls reachable while an error banner is up. */
  .error-banner {
    top: calc(60px + var(--safe-t));
    width: calc(100% - 20px);
  }

  .loading { top: 30%; }

  .sheet { padding: 0; align-items: flex-end; }
  .sheet-inner {
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    padding-bottom: calc(22px + var(--safe-b));
  }
}

/* Short landscape phones: the sheet must not swallow the map. */
@media (max-width: 767px) and (max-height: 480px) {
  #app.panel-half .panel { height: 70dvh; }
  #app.panel-peek .panel { height: calc(136px + var(--safe-b)); }
}

/* --------------------------------------------------------------------------
   14. Motion, contrast and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .pill-now::after { display: none; }
  .spinner { border-top-color: var(--accent); animation: none !important; }
  /* The bottom sheet jumps between its snap points instead of sliding. */
  .panel { transition: none !important; }
  .sheet-grip-bar { transition: none !important; }
}

@media (prefers-contrast: more) {
  :root { --border: var(--border-strong); }
  .card { border-width: 2px; }
  .pill { border-width: 2px; }
}

@media (forced-colors: active) {
  .pill,
  .chip,
  .btn,
  .card {
    border: 1px solid ButtonBorder;
    forced-color-adjust: none;
    background: Canvas;
    color: CanvasText;
  }
  .pill-now { border-width: 3px; }
  .pill-later { border-style: dashed; }
  .pill-off { border-style: dotted; }
  :focus-visible { outline: 3px solid Highlight; }
}

@media print {
  .stage, .map-controls, .overlay-root, .panel-footer, .controls, .sheet-grip { display: none !important; }
  .panel { position: static; height: auto; box-shadow: none; }
  .list { overflow: visible; }
  body { background: #FFFFFF; color: #000000; }
}

/* v2: immediate discovery, quieter map chrome, and explicit menu provenance. */
.brand-eyebrow {font-size: 11px; letter-spacing: .16em; font-weight: 750; color: var(--text-muted); margin-bottom: 7px;}
.brand-title {font-size: 27px; font-weight: 750; line-height: 1.1; letter-spacing: -.055em;}
.brand-sub {font-size: 13px; margin-top: 8px;}
.panel-header {padding: 23px 22px 20px;}
.clock {font-size: 15px;}
.clock-line {padding-top: 3px;}
.controls {padding: 12px 22px; gap: 10px;}
.controls-time {padding-top: 0; padding-bottom: 0;}
.time-planner {width: 100%;}
.time-planner > summary {cursor: pointer; display: flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 650; gap: 10px; list-style: none;}
.time-planner > summary::-webkit-details-marker {display: none;}
.time-planner > summary::before {content: '+'; font-size: 20px; color: var(--text-muted);}
.time-planner[open] > summary::before {content: '−';}
.time-planner[open] {padding-bottom: 12px;}
#planContext {margin-left:auto; color:var(--text-muted); font-size:12px;}
.time-planner .scrub {margin-top:10px;}
.time-planner .scrub-row {flex-direction:column; gap:4px; align-items:stretch;}
.controls-filters .chips {flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; gap:6px;}
.controls-filters .chip {flex:0 0 auto; font-size:13px;}
#extraChips {flex-wrap:wrap;}
.controls-filters .input {font-size:15px;}
.discovery-context {font-size:13px; font-weight:700; padding:13px 22px 0; color:var(--text-muted);}
.list-bar {padding: 8px 18px 10px 22px; border-bottom:0;}
.distance-note {font-size:12px; color:var(--text-muted); padding:0 22px 10px; line-height:1.45;}
.list {padding:0 18px 20px; gap:12px;}
.card {padding:16px; gap:9px; border-radius:12px; flex-shrink:0;}
.card-name {width:100%;}
.card-open {appearance:none; border:0; background:none; padding:0; text-align:left; color:var(--text); font:inherit; font-size:19px; letter-spacing:-.025em; font-weight:750; cursor:pointer; line-height:1.2;}
.card-open:focus-visible, .directions-link:focus-visible {outline:3px solid var(--focus); outline-offset:3px; border-radius:3px;}
.card-meta {font-size:13px;}
.card .deals {font-size:14px; gap:5px;}
.card .deal-item {white-space:normal; line-height:1.35;}
.card .deal-price {max-width:46%; white-space:normal; text-align:right; color:var(--text); font-size:16px;}
.offer-note {font-size:12px; color:var(--text-muted); line-height:1.5;}
.card-footer {display:flex; gap:8px; flex-wrap:wrap; justify-content:space-between; align-items:center; border-top:1px solid var(--border); padding-top:10px; margin-top:2px;}
.card-footer .menu-open { min-height: 44px; }
.cuisine-browser {margin: 0 0 12px; min-width: 0;}
.cuisine-heading {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px;}
.cuisine-heading label {font-size:13px; font-weight:700;}
.cuisine-heading .input {width: auto; max-width: 76%; min-height:44px; padding-top:8px; padding-bottom:8px;}
.cuisine-chips {display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin;}
.cuisine-chip {display:flex; align-items:center; gap:6px; flex:0 0 auto; min-height:44px; border:1px solid var(--border); border-radius:999px; padding:7px 12px; background:var(--surface); color:var(--text); font:inherit; font-size:13px; cursor:pointer;}
.cuisine-chip span {font-size:20px; line-height:1;}
.cuisine-chip[aria-pressed="true"] {background:var(--accent); color:var(--text-on-accent); border-color:var(--accent); font-weight:700;}
.cuisine-chip:focus-visible {outline:3px solid var(--accent); outline-offset:2px;}
@media (max-width: 700px) {
  #app.panel-peek .cuisine-browser, #app.panel-half .cuisine-browser {display:none;}
}
.card-verified {font-size:12px;}
.directions-link {color:var(--text); font-size:13px; font-weight:700; text-decoration:none; min-height:32px; display:inline-flex; align-items:center; white-space:nowrap;}
.directions-link:hover {text-decoration:underline;}
.detail-primary .directions-link {border-radius:8px; background:var(--text); color:var(--panel-bg); min-height:44px; padding:10px 16px; font-size:15px;}
#app.detail-open .discovery-context, #app.detail-open .distance-note {display:none;}
@media (min-width:768px) {
  :root {--panel-w:460px;}
  .map-popover-btn {display:inline-flex;}
  .legend, .layer-toggles {display:none;}
  #app.chrome-legend-open .legend, #app.chrome-layers-open .layer-toggles {display:block;}
  .popover-close {display:inline-flex; position:absolute; top:6px; right:6px;}
  .layer-toggles {position:relative; max-height:calc(100dvh - 170px); overflow:auto;}
  .legend {max-width:360px; max-height:calc(100dvh - 150px); overflow:auto;}
  .legend-title, .layers > legend {padding-right:42px;}
  .panel-scroll {overflow:hidden;}
  .controls-filters:has(.more-filters[open]) {max-height:48dvh; overflow-y:auto;}
  .panel-main {overflow:hidden;}
  .detail {overflow-y:auto; min-height:0;}
}
@media (min-width:768px) and (max-width:1050px) { :root {--panel-w:410px;} .brand-title {font-size:23px;} }
@media (max-width:767px) {
  .panel-header {padding:4px 16px 10px;}
  .brand-eyebrow {font-size:10px; margin-bottom:4px;}
  .brand-title {font-size:23px;}
  .brand-sub {display:none;}
  .clock {font-size:14px;}
  .controls {padding:8px 16px;}
  .controls-time {padding-top:0; padding-bottom:0;}
  .discovery-context {padding:6px 16px 0; font-size:12px;}
  .list-bar {padding:6px 12px 6px 16px;}
  .distance-note {padding:0 16px 8px; font-size:11px;}
  .list {padding:0 12px 16px;}
  .card {padding:13px; gap:7px;}
  .card-open {font-size:18px;}
  #app.panel-half .panel {height:64dvh;}
  #app.panel-half .panel-header {padding-bottom:6px;}
  #app.panel-peek .discovery-context, #app.panel-peek .distance-note {display:none;}
  #app.panel-half .distance-note {font-size:11px;}
  .directions-link {min-height:44px;}
  .time-planner .field-row {gap:8px;}
}
@media (prefers-reduced-motion:reduce) { .card {transition:none;} }
.mobile-nav {display:none;}
@media (max-width:767px) {
  .mobile-nav {display:flex; flex:0 0 auto; margin:0 12px 8px; padding:3px; gap:3px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2);}
  .mobile-nav button {flex:1; min-height:44px; border:0; border-radius:7px; background:transparent; color:var(--text-muted); font:inherit; font-size:14px; font-weight:700; cursor:pointer;}
  .mobile-nav button[aria-pressed="true"] {background:var(--text); color:var(--panel-bg);}
  .mobile-nav button:focus-visible {outline:3px solid var(--focus); outline-offset:1px;}
  #app.panel-peek .panel {height:calc(212px + var(--safe-b));}
  #app.panel-full:not(.filters-open) .controls-time,
  #app.panel-full:not(.filters-open) .controls-filters .field,
  #app.panel-full:not(.filters-open) .controls-filters .filter-row {display:none;}
  #app.panel-full.filters-open .controls-time,
  #app.panel-full.filters-open .controls-filters .field,
  #app.panel-full.filters-open .controls-filters .filter-row {display:block;}
  #app.panel-full.filters-open .time-planner {display:block;}
  #app.detail-open .controls-time, #app.detail-open .controls-filters {display:none!important;}
}
/* Map and 3D are destinations; optional tools have readable names. */
.map-controls {display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; align-items:flex-start; width:auto; max-width:330px;}
#modeTop {order:-1;}
.map-controls .mode-group .btn-text {display:inline!important;}
.map-options {position:relative; pointer-events:auto;}
.map-options > summary {display:flex; align-items:center; min-height:44px; padding:0 14px; font-size:14px; font-weight:650; cursor:pointer; list-style:none; border:1px solid var(--border-strong); border-radius:8px; color:var(--text); background:var(--panel-bg);}
.map-options > summary::-webkit-details-marker {display:none;}
.map-options[open] {min-width:160px; padding:0 0 8px; background:var(--panel-bg); border-radius:8px; box-shadow:var(--shadow-2);}
.map-options .map-controls-row {display:flex; flex-direction:column; gap:4px; padding:4px 8px;}
.map-options .btn {width:100%; justify-content:flex-start; gap:10px;}
.map-options .btn-text {display:inline!important;}
.map-options .compass .compass-dial, .map-options .compass-letter {display:none;}
.map-options #modeWalk {margin-top:6px; padding-left:12px;}
.zoom-controls {display:flex; gap:1px; background:var(--border); border:1px solid var(--border-strong); border-radius:8px; overflow:hidden; pointer-events:auto; margin-left:auto;}
.zoom-controls button {min-width:44px; min-height:44px; border:0; padding:0 12px; background:var(--panel-bg); color:var(--text); font:inherit; font-size:20px; font-weight:650; cursor:pointer;}
.zoom-controls #mapOverview {font-size:13px;}
.zoom-controls button:hover {background:var(--surface-2);}
@media (max-width:767px) {
  .map-controls {display:flex; width:auto; max-width:320px; left:auto; right:8px; top:8px; overflow:visible;}
  .map-controls .mode-group .btn {width:auto; padding:0 12px;}
  .map-controls .mode-group .btn-glyph {display:none;}
  .map-controls .mode-group {display:flex;}
  .map-options .map-controls-row {display:flex;}
  .zoom-controls {flex-basis:auto;}
  #app.panel-peek .panel {height:calc(180px + var(--safe-b));}
  #app.panel-peek .list-bar {padding-top:0;}
  #app.panel-peek .sort-block {display:none;}
}
/* Venue context uses actual venue images and Google's street panoramas. */
#modeWalk {display:none!important;}
.map-controls .btn-mode .btn-text {position:static; width:auto; height:auto; margin:0; overflow:visible; clip-path:none; white-space:normal; font-size:14px;}
.detail-primary {display:flex; flex-wrap:wrap; gap:10px;}
.detail-primary .street-view-link {background:var(--surface-2); color:var(--text); border:1px solid var(--border-strong);}
.venue-photo {margin:0 0 18px;}
.venue-photo img {display:block; width:100%; height:200px; object-fit:cover; border-radius:12px; background:var(--surface-2);}
.venue-photo figcaption {font-size:11px; color:var(--text-muted); margin-top:6px; line-height:1.4;}
.venue-photo figcaption a {color:inherit;}
.map-selection {position:absolute; z-index:5; left:16px; bottom:20px; max-width:310px; padding:14px; border:1px solid var(--border-strong); border-radius:12px; background:var(--panel-bg); box-shadow:var(--shadow-2); pointer-events:auto;}
.map-selection strong, .map-selection span {display:block;}
.map-selection strong {font-size:16px; margin-bottom:4px;}
.map-selection span {font-size:12px; color:var(--text-muted); margin-bottom:10px;}
#app.detail-open .map-selection {display:none;}
@media (max-width:767px) {
  .map-selection {left:12px; right:12px; max-width:none; bottom:calc(192px + var(--safe-b));}
  #app:not(.panel-peek) .map-selection {display:none;}
  #app.panel-peek:has(.map-selection:not([hidden])) .controls-filters {display:none;}
  #app.panel-peek:has(.map-selection:not([hidden])) .panel {height:calc(120px + var(--safe-b));}
  #app.panel-peek .map-selection {bottom:calc(132px + var(--safe-b));}
}
.card-photo {position:absolute; top:14px; right:14px; width:80px; height:80px; object-fit:cover; border-radius:9px;}
.card:has(.card-photo) .card-head {padding-right:92px; min-height:80px;}
.card[data-id="bartholomew"] .card-photo, .detail .venue-photo img[alt*="Bartholomew"] {object-position:center 85%;}
@media (max-width:767px) {
  #app.panel-full:not(.filters-open):not(.detail-open) .controls-filters > .field {display:block;}
  #app.panel-full:not(.filters-open) .panel-header {padding-top:0; padding-bottom:6px;}
  #app.panel-full .brand-eyebrow {display:none;}
  #app.panel-full .brand-title {font-size:19px;}
  #app.panel-full .clock-day {display:none;}
}

/* v3 discovery: a readable street map and a quieter, consistent interface. */
:root:has(#app.theme-light) {
  --panel-bg:#fafbf9; --bg:#f3f5f3; --surface:#fff; --surface-2:#f0f4f1;
  --border:#dfe6e1; --border-strong:#b7c8be; --text:#17382d; --text-muted:#63766c;
  --accent:#176b4e; --accent-hover:#12573f; --accent-soft:#e9f4ec; --focus:#176b4e;
  --now-bg:#e1f3e5; --now-ink:#176b40; --now-edge:#c3e1cd; --now-quiet:#176b40;
  --later-bg:#edf1f0; --later-ink:#50665a; --later-edge:#d6e0da;
}
#streetMap {position:absolute; inset:0; z-index:0; background:#e8eeea; font-family:var(--font);}
#canvas[hidden], #streetMap[hidden] {display:none!important;}
.map-controls, .map-selection {z-index:6;}
.map-controls {top:18px; right:18px; max-width:340px; gap:10px;}
.map-controls .mode-group {box-shadow:0 3px 14px #19382a18; border-radius:12px; overflow:hidden;}
.map-controls .mode-group .btn {min-height:44px; padding:0 18px;}
.map-options > summary, .zoom-controls {border-color:var(--border); box-shadow:0 3px 14px #19382a12;}
.mode-top #compass, .mode-top #layersToggle, .mode-top #layerToggles {display:none!important;}
.map-notice {position:absolute; z-index:8; left:16px; right:16px; top:125px; padding:12px 16px; background:#fff; color:#17382d; border:1px solid #cad9ce; border-radius:10px; max-width:430px; box-shadow:var(--shadow-1); font-size:13px;}
.leaflet-control-attribution {font:10px/1.5 var(--font)!important; background:#fffffff2!important; color:#506357!important; padding:3px 7px!important;}
.leaflet-control-attribution a {color:#24563d!important;}
.place-cluster {border:3px solid #fff; border-radius:50%; background:#176b4e; box-shadow:0 2px 7px #0d362b50; display:grid; place-items:center; color:white; font:700 13px var(--font);}
.place-pin {display:grid; place-items:center; border:0; background:transparent;}
.place-pin span {width:14px; height:14px; background:#758d80; border:2px solid white; border-radius:50%; box-shadow:0 1px 5px #14372470;}
.place-pin.status-now span {background:#178050;}
.place-pin.status-soon span {background:#bf801a;}
.place-pin.selected span {width:23px; height:23px; background:#17382d; border:4px solid white; box-shadow:0 0 0 4px #176b4e55,0 2px 8px #17382d70;}
.place-name {border:0!important; border-radius:7px!important; background:#17382d!important; color:#fff!important; font:600 13px var(--font)!important; padding:8px 11px!important; box-shadow:0 2px 9px #17382d30!important;}
.leaflet-tooltip-top.place-name:before {border-top-color:#17382d;}
.cluster-choices {display:flex; flex-direction:column; gap:4px;}
.cluster-choices button {min-height:44px; text-align:left; background:#f0f5f1; border:0; border-radius:6px; padding:8px 12px; color:#17382d; font:600 14px var(--font); cursor:pointer;}
.panel-header {padding:25px 24px 20px; border-bottom:0;}
.brand-eyebrow {color:var(--accent); font-size:10px; letter-spacing:.15em; margin-bottom:10px;}
.brand-title {font-size:30px; letter-spacing:-.045em; line-height:1.1;}
.brand-sub {font-size:12px; line-height:1.5; margin-top:9px; max-width:270px;}
.clock {font-family:var(--font); font-size:12px; font-weight:600;}
.clock-line {padding-top:0;}
.clock-day {font-size:11px;}
.controls {padding:12px 24px; gap:10px;}
.controls-time {background:var(--surface-2); border-bottom:0; padding:0 24px;}
.time-planner > summary {font-size:12px; min-height:38px;}
.controls-filters .input {border-radius:10px; background:var(--surface); border-color:var(--border); min-height:46px; font-size:13px;}
.controls-filters .chip {font-size:12px; min-height:38px; padding:6px 12px; border-color:var(--border);}
.cuisine-browser {margin:0;}
.cuisine-heading {margin:0;}
.cuisine-heading label {font-size:12px; color:var(--text-muted);}
.cuisine-heading .input {max-width:77%; width:77%; min-height:40px;}
.cuisine-chips {display:none;}
.filter-row .more-filters {flex:1;}
.more-filters > summary {font-size:12px; min-height:38px; padding:8px 12px; border-color:var(--border); background:var(--surface);}
.discovery-context {font-size:11px; padding:16px 24px 0; font-weight:600; letter-spacing:.02em;}
.list-bar {padding:8px 20px 8px 24px;}
.list-count {font-size:13px;}
.sort-block select {font-size:12px; border-color:var(--border);}
.distance-note {font-size:10px; padding:0 24px 12px;}
.list {padding:0 16px 24px; gap:12px; scrollbar-width:thin;}
.card {border:1px solid var(--border); padding:19px; border-radius:14px; gap:8px; box-shadow:0 2px 4px #17382d04;}
.card:hover, .card.is-hovered {border-color:var(--accent); background:var(--surface); box-shadow:0 3px 15px #17382d0c;}
.card.is-selected {background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent);}
.card-open {font-size:20px; font-weight:700; letter-spacing:-.03em; line-height:1.25; padding-right:6px;}
.card-head {gap:10px;}
.card .pill {font-size:11px; font-weight:650; border-width:1px; padding:4px 7px;}
.card-meta {font-size:12px; line-height:1.5;}
.card .deals {background:var(--surface-2); padding:10px 12px; border-radius:8px; gap:6px; font-size:13px;}
.card .deal-price {font-family:var(--font); font-size:14px; font-weight:700;}
.offer-note {font-size:10px;}
.card-verified {font-size:10px;}
.card-footer {gap:8px; justify-content:space-between; padding-top:8px;}
.card-footer .directions-link, .card-footer .menu-open {font-size:12px; min-height:40px; font-weight:650;}
.card-footer .menu-open {padding:6px 0; background:none; border:0;}
.card-photo {width:92px; height:92px; top:18px; right:18px; border-radius:11px;}
.card:has(.card-photo) .card-head {padding-right:104px; min-height:92px;}
.panel-footer {padding:4px 12px calc(4px + var(--safe-b));}
.panel-footer .btn {font-size:11px; color:var(--text-muted);}
.detail {padding:22px 24px;}
.detail h2 {font-size:28px; line-height:1.15; letter-spacing:-.035em;}
.detail-primary {gap:8px;}
.detail-primary .directions-link, .detail-primary .btn {font-size:13px; min-height:44px;}
.venue-photo img {height:220px; border-radius:12px;}
@media (min-width:768px) { :root {--panel-w:440px;} }
@media (min-width:1450px) { :root {--panel-w:480px;} }
@media (max-width:767px) {
  .panel {border-radius:0; box-shadow:none;}
  .sheet-grip {display:none;}
  #app.panel-full .panel, #app.panel-half .panel {height:100dvh;}
  .mobile-nav {order:10; margin:0; padding:8px 12px calc(8px + var(--safe-b)); border:0; border-top:1px solid var(--border); border-radius:0; background:var(--panel-bg); gap:8px;}
  .mobile-nav button {font-size:13px; min-height:44px; border-radius:9px;}
  .mobile-nav button[aria-pressed="true"] {background:var(--accent-soft); color:var(--accent);}
  .panel-footer {display:none;}
  .panel-header, #app.panel-full:not(.filters-open) .panel-header {padding:17px 18px 12px;}
  #app.panel-full .brand-title, .brand-title {font-size:25px;}
  #app.panel-full .brand-eyebrow {display:block; font-size:9px; margin-bottom:6px;}
  .brand-sub {display:none;}
  .controls {padding:10px 18px; gap:9px;}
  .controls-time {padding:0 18px;}
  .controls-filters .chips {scrollbar-width:none;}
  .controls-filters .chip {min-height:40px;}
  #app.panel-full:not(.filters-open) .controls-filters .cuisine-browser {display:block;}
  .discovery-context {padding:12px 18px 0;}
  .list-bar {padding:6px 14px 6px 18px;}
  .distance-note {padding:0 18px 10px; font-size:10px;}
  .card {padding:16px; gap:8px;}
  .card-open {font-size:20px;}
  .card-photo {width:80px; height:80px; top:16px; right:16px;}
  .card:has(.card-photo) .card-head {padding-right:91px; min-height:80px;}
  .card-footer .directions-link, .card-footer .menu-open {min-height:44px;}
  #app.panel-peek .panel, #app.panel-peek:has(.map-selection:not([hidden])) .panel {height:calc(61px + var(--safe-b));}
  #app.panel-peek .panel-header, #app.panel-peek .panel-scroll, #app.panel-peek .panel-footer {display:none;}
  #app.panel-peek #streetMap {bottom:calc(61px + var(--safe-b));}
  #app.panel-peek:has(.map-selection:not([hidden])) #streetMap {bottom:calc(197px + var(--safe-b));}
  #app.panel-peek .map-selection {bottom:calc(73px + var(--safe-b)); min-height:100px; padding:13px 15px;}
  .map-selection span {margin-bottom:6px;}
  .map-selection .btn {min-height:40px;}
  .map-controls {right:10px; top:10px; max-width:305px;}
  .map-controls .mode-group .btn {padding:0 14px;}
  .map-options > summary {font-size:12px;}
  .map-notice {top:118px; left:10px; right:10px;}
  #app.panel-full.filters-open .panel-main {display:none;}
  #app.panel-full.filters-open .panel-scroll {overflow:auto;}
  .detail {padding:18px;}
}
@media (max-width:767px) {
  .panel {max-height:100dvh; border-top:0; transition:none;}
  #app:not(.panel-peek) .map-controls {visibility:hidden;}
}
:root:has(#app.theme-dark) {--now-bg:#193f30; --now-ink:#b6e7c8; --now-edge:#38624c; --accent:#9ad2b3; --accent-soft:#203b30;}
.card:has(.pill-now), .card:has(.pill-soon), .card:has(.pill-later), .card:has(.pill-off) {border-left-color:var(--border);}
.card.is-selected {border-left-color:var(--accent);}
.show-results {display:none;}
@media (max-width:767px) {#app.filters-open .show-results {display:block; flex-shrink:0; margin:16px 18px 24px; min-height:48px;}}
.card[data-id="corso"] .card-photo, .detail .venue-photo img[alt*="Bar Corso"] {object-position:50% 65%;}

/* v4: a place-first directory with a supporting street map. */
:root {--panel-bg:#faf9f6; --surface:#fff; --surface-2:#f0eee8; --border:#e3e4dc; --text:#223b31; --text-muted:#667169; --accent:#196649; --accent-soft:#e6efe8;}
.panel {container-type:inline-size;}
.panel-header {padding:22px 26px 18px;}
.brand-eyebrow {font-size:10px; letter-spacing:.17em; margin-bottom:7px;}
.brand-title {font-family:Georgia,'Times New Roman',serif; font-size:36px; font-weight:500; letter-spacing:-.045em; line-height:1.05;}
.brand-title > span {color:#d5774f;}
.brand-sub {font-size:13px; margin-top:8px; max-width:none;}
.clock-line {flex-shrink:0; padding-top:4px;}
.controls-time {background:transparent; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:0 26px;}
.time-planner > summary {min-height:40px;}
.controls-filters {display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; padding:15px 26px 12px; border-bottom:0;}
.controls-filters > .field {grid-column:1 / -1; grid-row:2; margin:0;}
.controls-filters > .field .input {height:46px; padding-left:16px; border-radius:24px; background:var(--surface-2); border-color:transparent;}
.controls-filters > .cuisine-browser {grid-column:1; grid-row:3; min-width:0;}
.cuisine-heading label {position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);}
.cuisine-heading .input {width:100%; max-width:none; min-width:0; min-height:42px; border-radius:8px;}
.controls-filters > .filter-row {grid-column:2; grid-row:3; min-width:0; margin:0; position:relative;}
.filter-row .reset-btn {font-size:11px; min-width:40px; padding:0 4px;}
.more-filters > summary {min-height:42px; padding:11px 8px; white-space:nowrap;}
.controls-filters > .chips {grid-column:1 / -1; grid-row:4; margin:0; padding-bottom:0;}
.controls-filters .chip {min-height:38px; border-radius:20px; font-size:12px; background:var(--surface);}
.controls-filters .chip[aria-pressed="true"] {background:var(--text); color:var(--surface); border-color:var(--text);}
.controls-filters:has(.more-filters[open]) {overflow:visible; max-height:none;}
.more-body {padding:14px;}
.more-filters[open] .more-body {position:absolute; left:0; right:0; min-width:270px; z-index:16; background:var(--surface); box-shadow:var(--shadow-2); border:1px solid var(--border); border-radius:12px; max-height:45dvh; overflow:auto;}
.desktop-view {display:flex; gap:2px; align-self:flex-end; margin:4px 26px 0; padding:3px; border-radius:20px; background:var(--surface-2);}
.desktop-view button {border:0; border-radius:17px; background:transparent; color:var(--text-muted); padding:7px 12px; font:600 12px var(--font); min-height:34px; cursor:pointer;}
.desktop-view button[aria-pressed="true"] {background:var(--surface); color:var(--text); box-shadow:0 1px 4px #15342610;}
.discovery-context {padding:8px 26px 0; font-size:11px; color:var(--text-muted);}
.list-bar {padding:6px 26px; min-height:44px; flex-wrap:wrap; gap:6px;}
.match-count {font-size:14px;}
.sort-block select {min-height:38px; max-width:175px; background:transparent; border:0; font-weight:600; padding-left:8px;}
.sort-dir {min-width:36px; min-height:36px; width:36px; height:36px; border:0; background:transparent;}
.location-tools {display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:0 26px 12px;}
.location-tools button {border:1px solid var(--border); border-radius:20px; padding:6px 12px; min-height:34px; background:var(--surface); color:var(--accent); font:600 12px var(--font); cursor:pointer;}
#nearMe:before {content:'⌖'; margin-right:6px; font-size:17px;}
#locationStatus {font-size:11px; flex:1; min-width:150px; line-height:1.4; color:var(--text-muted);}
.location-tools button:disabled {opacity:.7; cursor:wait;}
.list {display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); align-content:start; align-items:start; gap:20px 16px; padding:0 26px 26px;}
.card {position:relative; display:block; padding:0; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:none; transition:box-shadow .16s,border-color .16s;}
.card:hover {box-shadow:0 6px 20px #25382c12;}
.card-media {height:160px; overflow:hidden; position:relative; background:var(--surface-2);}
.card .card-photo {position:static; display:block; width:100%; height:100%; border-radius:0; object-fit:cover;}
.card-no-photo {background:radial-gradient(ellipse at 85% 20%,#ffffff80,transparent 70%),repeating-linear-gradient(25deg,transparent,transparent 22px,#ffffff25 23px,#ffffff25 24px),#e4e7dd; color:#627465; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; font:500 10px var(--font); letter-spacing:.06em;}
.card:nth-child(3n+2) .card-no-photo {background-color:#ebe1d5; color:#8b7461;}
.card:nth-child(3n) .card-no-photo {background-color:#dce6e8; color:#607b7d;}
.place-monogram {font:400 48px Georgia,serif; letter-spacing:-.05em; opacity:.6;}
.card-save {position:absolute; right:10px; top:10px; width:40px; height:40px; display:grid; place-items:center; border:1px solid #ffffff90; border-radius:50%; background:#fffffff0; color:#223b31; font:25px Georgia,serif; cursor:pointer; box-shadow:0 2px 7px #0001;}
.card-save[aria-pressed="true"] {color:#a34838;}
.card-content {padding:15px 16px 0;}
.card .card-head, .card:has(.card-photo) .card-head {padding:0; min-height:0; display:flex; flex-direction:column; align-items:flex-start; gap:7px;}
.card-open {font-size:20px; line-height:1.15; font-weight:650; letter-spacing:-.035em; padding:0; min-height:28px; text-align:left;}
.card .pill {font-size:10px; padding:3px 6px; max-width:100%; line-height:1.4; border:0; border-radius:4px;}
.card-meta {font-size:12px; color:var(--text-muted); margin-top:7px; line-height:1.4;}
.card-area {font-size:11px; color:var(--text-muted); margin:3px 0 12px; line-height:1.4;}
.card .offer-note {font-size:10px; line-height:1.4; margin-bottom:5px; color:var(--text-muted);}
.card .deals {margin-bottom:8px; gap:4px;}
.card .deal {font-size:12px; line-height:1.35;}
.card .deal-price {font-family:var(--font); font-size:13px; white-space:normal; text-align:right;}
.card-verified {font-size:10px; margin:10px 0; color:var(--text-muted);}
.card-footer {display:flex; padding:3px 0; border-top:1px solid var(--border); gap:8px; justify-content:space-between;}
.card-footer button {font:600 12px var(--font); color:var(--accent); background:transparent; border:0; cursor:pointer; min-height:42px; padding:0;}
.card-footer button span {margin-left:8px;}
.list-empty {text-align:center; padding:40px 25px; font-size:14px; line-height:1.8;}
.list-empty strong {font:500 26px Georgia,serif; color:var(--text);}
#resetEmpty {padding:10px 18px; margin-top:12px; border:1px solid var(--border); border-radius:20px; background:var(--surface); color:var(--accent); font:600 13px var(--font); min-height:44px;}
.venue-photo {margin:0 auto 20px; width:100%;}
.venue-photo img {height:auto; max-height:340px; object-fit:cover; width:100%; border-radius:12px;}
.detail {max-width:820px; width:100%; align-self:center; padding:20px 26px;}
.detail h2 {font:500 35px/1.1 Georgia,serif; letter-spacing:-.035em;}
.detail-sub {font-size:13px;}
#app.detail-open .desktop-view, #app.detail-open .location-tools {display:none;}
.detail-back {min-height:48px; text-decoration:none; border-bottom:1px solid var(--border); background:var(--panel-bg);}
@media (min-width:768px) {
  :root {--panel-w:min(62vw,880px);}
  #app.places-only .panel {width:100%;}
  #app.places-only .stage {visibility:hidden; pointer-events:none;}
  #app.places-only .panel-header, #app.places-only .controls, #app.places-only .panel-main {width:100%; max-width:1420px; margin-left:auto; margin-right:auto;}
  #app.places-only .list {grid-template-columns:repeat(auto-fill,minmax(275px,1fr));}
  #app.detail-open {--panel-w:min(55vw,720px);}
  .panel-footer {border-top:1px solid var(--border);}
}
@media (max-width:767px) {
  .panel-header, #app.panel-full:not(.filters-open) .panel-header {padding:18px 18px 14px;}
  .brand-title, #app.panel-full .brand-title {font-size:29px;}
  .brand-eyebrow, #app.panel-full .brand-eyebrow {font-size:9px; margin-bottom:6px;}
  .clock-line {max-width:62px;}
  .controls-time {padding:0 18px;}
  .controls-filters {padding:12px 18px 10px; gap:8px;}
  #app.panel-full:not(.filters-open) .controls-filters .filter-row {display:flex;}
  .more-filters > summary {font-size:11px;}
  .controls-filters .chip {min-height:36px; font-size:11px; padding:7px 11px;}
  .desktop-view {display:none;}
  .discovery-context {padding:7px 18px 0; font-size:10px;}
  .list-bar {padding:5px 18px; gap:0; flex-wrap:nowrap;}
  .match-count {font-size:12px;}
  .sort-block select {max-width:130px; font-size:11px; padding-right:22px;}
  .location-tools {padding:0 18px 10px;}
  .location-tools button {min-height:38px;}
  .list {grid-template-columns:1fr; padding:0 18px 24px; gap:18px;}
  .card-media {height:174px;}
  .card-content {padding:15px 16px 0;}
  .card-open {font-size:22px;}
  .card-footer button {min-height:46px; font-size:13px;}
  .card-save {height:44px; width:44px;}
  #app.panel-full.filters-open .controls-filters {display:flex; flex-direction:column;}
  #app.filters-open .filter-row {display:flex; flex-direction:column; width:100%;}
  #app.filters-open .more-filters {width:100%;}
  #app.filters-open .more-filters .more-body {position:static; width:auto; min-width:0; max-height:none; box-shadow:none; border:0; background:transparent; padding:14px 0;}
  #app:not(.filters-open) .more-filters[open] .more-body {position:fixed; top:250px; left:18px; right:18px; min-width:0; max-height:calc(100dvh - 340px);}
  .detail {padding:18px;}
  .detail h2 {font-size:30px;}
  .venue-photo img {max-height:260px;}
}
:root:has(#app.theme-dark) .card-no-photo {background-color:#303f38; color:#acc1b2;}
:root:has(#app.theme-dark) .card:nth-child(3n+2) .card-no-photo {background-color:#493d34; color:#c5b5a8;}
:root:has(#app.theme-dark) .card:nth-child(3n) .card-no-photo {background-color:#304448; color:#a9c1c6;}
/* One natural scroll surface; cards keep their content height. */
.panel-scroll {display:block; overflow:auto; overscroll-behavior:contain;}
.panel-main {display:block; overflow:visible;}
.list {grid-auto-rows:max-content; overflow:visible; min-height:0;}
.panel-header {padding-top:16px; padding-bottom:14px;}
.desktop-view {position:absolute; top:0; right:0; margin-top:0;}
.discovery-context {padding-top:14px; padding-bottom:12px; min-height:42px; margin:0;}
.location-tools {padding-bottom:14px;}
@media (min-width:768px) { .discovery-context {padding-right:240px;} }
@media (max-width:767px) {
  .panel-scroll {display:block; overflow:auto;}
  #app.panel-full:not(.filters-open) .panel-scroll {overflow:auto;}
  .panel-main {display:block; overflow:visible;}
  .discovery-context {min-height:0; padding-bottom:0;}
}
.list-bar {justify-content:flex-start; gap:8px; padding-bottom:14px;}
.list-bar .sort-block {margin-left:auto;}
.list-bar .location-tools {padding:0; flex:1;}
.list-bar .location-tools:has(#locationStatus:empty) {flex:0 0 auto;}
#locationStatus:empty {display:none;}
@media (max-width:767px) {
  .list-bar {flex-wrap:wrap; gap:8px; padding-top:9px;}
  .list-bar .match-count {flex:1;}
  .list-bar .sort-block {margin-left:0;}
  .list-bar .location-tools {order:3; width:100%; flex:1 0 100%;}
  .list-bar .location-tools:has(#locationStatus:empty) {width:auto; flex:1;}
}
/* The primary experience is a directory. Maps are a deliberate view. */
.brand-eyebrow {display:flex; align-items:center; gap:10px; font-size:10px; color:var(--text-muted); letter-spacing:.14em;}
.brand-symbol {display:inline-grid; place-items:center; width:29px; height:29px; border-radius:9px; background:#e87d56; color:#fff; font:800 19px/1 var(--font); letter-spacing:-2px; padding-right:2px;}
.brand-title {font-family:var(--font); font-size:38px; font-weight:750; letter-spacing:-.055em; margin-top:9px;}
.brand-sub {font-size:13px;}
.panel-header {padding:22px 32px 18px;}
#app.detail-open .brand-title, #app.detail-open .brand-sub, #app.detail-open .clock-line {display:none;}
#app.detail-open .panel-header {padding:14px 32px;}
#app.detail-open .controls-time {display:none;}
#app.detail-open .detail-back {padding-left:32px;}
#app.detail-open .detail {max-width:1184px; padding:30px 32px 48px;}
#app.detail-open .venue-heading {margin:0 0 24px;}
.venue-eyebrow {color:var(--accent); font:650 11px var(--font); letter-spacing:.1em; text-transform:uppercase; margin-bottom:9px;}
#app.detail-open .detail-name {font:750 38px/1.08 var(--font); letter-spacing:-.045em; margin:0 0 10px;}
.detail-sub {margin:0 0 12px; line-height:1.5;}
.venue-heading-status {display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:11px; color:var(--text-muted);}
.venue-layout {display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start;}
.venue-main {min-width:0;}
.venue-photo {margin:0 0 24px;}
.venue-photo img {height:280px; max-height:none; border-radius:14px;}
.venue-photo figcaption {font-size:10px; line-height:1.5; margin-top:5px;}
.venue-overview {padding:0 0 20px;}
.venue-overview h3, .visit-card h3 {font-size:17px; font-weight:700; letter-spacing:-.02em; margin:0 0 10px; text-transform:none; color:var(--text);}
.venue-overview .detail-summary {margin:0; font-size:15px; line-height:1.65;}
.venue-disclosure {border-top:1px solid var(--border); margin:0; padding:0;}
.venue-disclosure:last-child {border-bottom:1px solid var(--border);}
.venue-disclosure > summary {font:600 14px var(--font); padding:18px 2px; min-height:52px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;}
.venue-disclosure > summary::-webkit-details-marker {display:none;}
.venue-disclosure > summary:after {content:'+'; font-size:21px; color:var(--text-muted); font-weight:400;}
.venue-disclosure[open] > summary:after {content:'−';}
.disclosure-body {padding:0 0 20px;}
.disclosure-body section {margin:0; border:0;}
.disclosure-body .detail-schedule > h3, .disclosure-body .detail-deals > h3, .disclosure-body .detail-links > h3, .disclosure-body .detail-sources > h3 {display:none;}
.venue-aside {display:flex; flex-direction:column; gap:16px;}
.visit-card {padding:22px; background:var(--surface); border:1px solid var(--border); border-radius:14px;}
.visit-card .detail-address {font-size:13px; line-height:1.6; margin:0 0 14px;}
.visit-card .detail-primary {display:grid; grid-template-columns:1fr; gap:8px; margin:0;}
.visit-card .directions-link, .venue-map-btn, .venue-menu-link {width:100%; justify-content:center; text-align:center; min-height:44px; font-size:13px;}
.street-help {font-size:11px; line-height:1.5; color:var(--text-muted); margin:10px 0;}
.venue-map-btn {background:transparent;}
.menu-card .menu-shot {margin:14px 0 0; padding:0; border:0;}
.menu-card .menu-shot h3 {display:none;}
.menu-card .menu-thumb {max-height:150px; width:100%; object-fit:cover; object-position:top;}
.venue-save-actions {display:flex; gap:8px; flex-wrap:wrap;}
.venue-save-actions button {flex:1; border:1px solid var(--border); border-radius:10px; background:var(--surface); font:600 12px var(--font); min-height:44px; color:var(--text); padding:8px; cursor:pointer;}
.card:not(:has(.card-photo)) .card-content {padding-top:22px;}
.card:not(:has(.card-photo)) .card-head {padding-right:38px; min-height:46px;}
.card:not(:has(.card-photo)) .card-save {box-shadow:none; background:transparent; border:0;}
.card.is-selected {background:var(--surface);}
.location-tools button {white-space:nowrap;}
.map-options > .btn {margin-top:8px; width:100%;}
@media (min-width:900px) {
  #app.places-only .panel {width:100%;}
  #app.places-only .controls-filters {grid-template-columns:minmax(220px,1.5fr) minmax(165px,.75fr) minmax(190px,.85fr); padding:18px 32px 12px;}
  #app.places-only .controls-filters > .field {grid-column:1; grid-row:2;}
  #app.places-only .controls-filters > .cuisine-browser {grid-column:2; grid-row:2;}
  #app.places-only .controls-filters > .filter-row {grid-column:3; grid-row:2;}
  #app.places-only .controls-filters > .chips {grid-column:1/-1; grid-row:3; padding-top:4px;}
  #app.places-only .controls-filters .input, #app.places-only .more-filters > summary {min-height:46px;}
  #app.places-only .list {grid-template-columns:repeat(auto-fill,minmax(265px,1fr)); gap:24px; padding:0 32px 32px;}
  #app.places-only .card-media {height:180px;}
}
@media (min-width:768px) and (max-width:1090px) {
  #app:not(.places-only) .venue-layout {grid-template-columns:1fr;}
  #app:not(.places-only) .venue-aside {display:grid; grid-template-columns:1fr 1fr;}
}
@media (max-width:767px) {
  .brand-title, #app.panel-full .brand-title {font-size:28px; font-family:var(--font); font-weight:750;}
  .brand-symbol {width:24px; height:24px; font-size:16px;}
  .brand-eyebrow, #app.panel-full .brand-eyebrow {font-size:8px; gap:7px;}
  #app.detail-open .panel-header {padding:12px 18px;}
  #app.detail-open .detail-back {padding-left:18px;}
  #app.detail-open .detail {padding:22px 18px 30px;}
  #app.detail-open .detail-name {font-size:30px;}
  .venue-layout {display:flex; flex-direction:column; gap:22px;}
  .venue-main, .venue-aside {width:100%;}
  .venue-aside {order:-1;}
  .venue-aside .menu-card, .venue-aside .venue-save-actions {display:none;}
  .venue-aside .visit-card {padding:16px;}
  .venue-aside .detail-primary {grid-template-columns:1fr 1fr;}
  .venue-map-btn {margin-top:4px;}
  .venue-photo img {height:220px;}
  .venue-disclosure > summary {font-size:14px;}
  .list-bar .location-tools:has(#locationStatus:empty) {flex:0 0 auto;}
}
.venue-mobile-actions {display:none;}
@media (max-width:767px) {
  .venue-aside {order:0;}
  .venue-aside .menu-card, .venue-aside .venue-save-actions {display:flex;}
  .venue-aside .menu-card {flex-direction:column;}
  .venue-aside > .visit-card:first-child {display:none;}
  .venue-mobile-actions {display:flex; flex-wrap:wrap; gap:8px; margin-top:15px;}
  .venue-mobile-actions .directions-link, .venue-mobile-actions .btn {font-size:12px; min-height:44px; padding:8px 12px;}
}
@media (min-width:768px) {
  #app.places-only, #app.places-only.mode-walk {grid-template-columns:minmax(0,1fr);}
  #app.places-only .panel, #app.places-only .stage {grid-area:1 / 1 / 2 / 2;}
  #app.places-only .panel {justify-self:stretch;}
}
.venue-mobile-address {display:none;}
@media (max-width:767px) {.venue-mobile-address {display:block; margin:10px 0; font-size:12px; line-height:1.5; color:var(--text-muted);}}
.streetview-panel .sheet-inner {width:min(1100px,calc(100vw - 40px)); max-width:none; padding:24px; max-height:calc(100dvh - 40px);}
.streetview-panel .sheet-header {align-items:flex-start; margin-bottom:16px; gap:20px;}
.streetview-panel h2 {font-size:23px; letter-spacing:-.03em;}
#streetViewAddress {font-size:13px; color:var(--text-muted); margin-top:6px;}
.streetview-viewport {width:100%; min-height:320px; height:min(60dvh,650px); background:var(--surface-2); border-radius:14px; overflow:hidden;}
.streetview-viewport iframe {display:block; width:100%; height:100%; border:0;}
.streetview-footer {display:flex; gap:20px; align-items:center; justify-content:space-between; padding-top:14px;}
.streetview-footer p {font-size:12px; color:var(--text-muted); max-width:650px;}
.streetview-footer a {white-space:nowrap; font-size:12px;}
.streetview-setup {height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:30px; gap:12px;}
.streetview-setup > span {font:600 48px var(--font); color:var(--accent);}
.streetview-setup h3 {font-size:22px; color:var(--text);}
.streetview-setup p {font-size:14px; line-height:1.6; max-width:500px; color:var(--text-muted);}
@media (max-width:767px) {
  .streetview-panel .sheet-inner {width:100%; padding:18px; max-height:100dvh;}
  .streetview-panel h2 {font-size:20px;}
  .streetview-viewport {height:52dvh; min-height:250px;}
  .streetview-footer {flex-direction:column; align-items:stretch; gap:10px;}
  .streetview-footer .btn {justify-content:center;}
}

/* A user-chosen starting location, independent of venue and cuisine search. */
.controls-location {padding:14px 28px; border-bottom:1px solid var(--border);}
.location-picker summary {cursor:pointer; font-size:14px; font-weight:650; color:var(--accent); padding:8px 0; overflow-wrap:anywhere;}
.address-form {display:flex;gap:8px; margin-top:8px;}
.address-form .input {flex:1; min-width:0;}
.address-form .btn {flex-shrink:0;}
.address-results {list-style:none; padding:0; margin:0; display:grid; gap:6px;}
.address-result {width:100%; text-align:left; padding:12px 14px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:10px; font:inherit; cursor:pointer;}
.address-result:hover {border-color:var(--accent); background:var(--surface-raised);}
.address-status,.address-help {font-size:12px; line-height:1.5; color:var(--muted); margin:8px 0 0;}
.address-status:empty {display:none;}
.controls-location .location-tools {padding:12px 0 0;}
#app.detail-open .controls-location {display:none;}
@media(max-width:767px) {
 .controls-location {padding:10px 18px;}
 .address-form {flex-wrap:wrap;}
 .address-form .input {flex-basis:100%;}
 .address-form .btn {min-height:44px;}
 #app[data-mobile-view="map"] .controls-location {display:none;}
}

#app.detail-open .map-selection:not([hidden]) {display:block;}
.map-selection-actions {display:flex;flex-wrap:wrap;gap:6px;}
.map-selection-actions .directions-link,.map-selection-actions .btn {font-size:12px;min-height:42px;padding:8px 12px;}
.map-selection {max-width:min(360px,calc(100% - 32px));}
@media(max-width:767px) {
 #app.detail-open .map-selection {display:none!important;}
 #app.panel-peek:has(.map-selection:not([hidden])) #canvas {bottom:calc(225px + var(--safe-b));}
 #app.panel-peek:has(.map-selection:not([hidden])) #streetMap {bottom:calc(225px + var(--safe-b));}
}
/* Only the panel scrolls; an inert nested scroller previously trapped wheel gestures. */
#detail, .detail-inner, .venue-layout, .venue-main, .venue-aside {overflow:visible; overscroll-behavior:auto;}
.panel-scroll {min-height:0; overflow-y:auto; overflow-x:hidden; touch-action:pan-y; -webkit-overflow-scrolling:touch;}

/* Clear destinations and one self-contained filter dialog. */
.primary-navigation {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;}
.primary-navigation .desktop-view {position:static;display:flex;margin:0;align-self:auto;border-radius:12px;padding:4px;}
.primary-navigation .desktop-view button {min-height:42px;min-width:92px;font-size:14px;border-radius:9px;}
#app.detail-open .primary-navigation .desktop-view {display:flex;}
.plan-open {border-radius:12px;min-height:44px;background:var(--surface);font-size:13px;}
#planCount {display:inline-grid;place-items:center;margin-left:5px;min-width:22px;height:22px;border-radius:20px;background:var(--accent-soft);font-size:12px;}
#filtersOpen {width:100%;min-height:46px;border-radius:12px;}
.filter-sheet .sheet-inner {width:min(690px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:0;display:flex;flex-direction:column;overflow:hidden;border-radius:20px;}
.filter-sheet-header,.filter-sheet-footer {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;flex-shrink:0;}
.filter-sheet-header {border-bottom:1px solid var(--border);}
.filter-sheet-header h2 {font-size:23px;letter-spacing:-.04em;margin:0 0 5px;}
.filter-sheet-header p {font-size:13px;color:var(--text-muted);margin:0;}
.filter-sheet-body {overflow:auto;overscroll-behavior:contain;padding:22px 26px;min-height:0;}
.filter-sheet .more-body {position:static;max-height:none;overflow:visible;box-shadow:none;border:0;border-radius:0;padding:0;width:100%;}
.filter-sheet .field-grid {display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:22px;}
.filter-choices {display:flex;flex-wrap:wrap;gap:8px;}
.filter-choices label {display:flex;align-items:center;gap:7px;padding:9px 12px;min-height:42px;border:1px solid var(--border);border-radius:10px;font-size:13px;cursor:pointer;background:var(--surface);}
.filter-choices label:has(input:checked) {background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}
.filter-choices input {accent-color:var(--accent);width:16px;height:16px;}
.filter-sheet-footer {border-top:1px solid var(--border);}
.filter-sheet-footer .btn-primary {min-width:170px;}
.list {align-items:stretch;}
.card {display:flex;flex-direction:column;}
.card-footer {margin-top:auto;}
@container(max-width:760px) {
 .venue-layout {grid-template-columns:1fr;gap:22px;}
 .venue-main {min-width:0;}
 .venue-aside {display:grid;grid-template-columns:1fr;position:static;}
 .venue-photo {width:100%;}
 .venue-photo img {height:280px;width:100%;object-fit:cover;}
 .venue-visit-card {padding:22px;}
}
@media(min-width:768px) {
 #app:not(.places-only):not(.detail-open) {grid-template-columns:min(420px,42vw) 1fr;}
 #app:not(.places-only) .controls-filters {grid-template-columns:1fr 1fr;}
 #app:not(.places-only) .controls-filters > .field {grid-column:1/-1;}
 #app:not(.places-only) .controls-filters > .cuisine-browser {grid-column:1;grid-row:3;}
 #app:not(.places-only) .controls-filters > .filter-row {grid-column:2;grid-row:3;}
 #app:not(.places-only) .controls-filters > .chips {grid-column:1/-1;grid-row:4;}
 #app:not(.places-only) .list {grid-template-columns:1fr;}
 #app:not(.places-only) .brand-title {font-size:28px;}
}
@media(max-width:767px) {
 .primary-navigation .desktop-view {display:none!important;}
 .primary-navigation {position:absolute;right:16px;top:10px;margin:0;}
 .primary-navigation .plan-open {min-height:38px;font-size:11px;padding:6px 9px;}
 .clock-line {display:none;}
 .brand-eyebrow {max-width:calc(100% - 115px);font-size:8px;}
 .brand-title {font-size:29px;}
 .brand-sub {font-size:12px;}
 .mobile-nav {grid-template-columns:repeat(4,1fr);}
 .filter-sheet .sheet-inner {width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:16px;}
 .filter-sheet-header,.filter-sheet-footer {padding:16px;}
 .filter-sheet-header h2 {font-size:20px;}
 .filter-sheet-body {padding:18px 16px;}
 .filter-sheet-footer .btn-primary {min-width:140px;}
}

/* Clear scope switching stays above the search on every screen. */
.directory-scope { grid-column:1/-1; grid-row:1; display:flex; gap:4px; padding:4px; background:#edf2ee; border-radius:13px; width:fit-content; max-width:100%; margin-bottom:2px; }
.directory-scope button { min-height:44px; border:0; border-radius:10px; padding:10px 18px; font:inherit; font-weight:700; font-size:14px; line-height:1.3; color:var(--text-muted); background:transparent; cursor:pointer; }
.directory-scope button[aria-pressed="true"] { background:#173e33; color:#fff; box-shadow:0 2px 5px #173e3318; }
.directory-scope button:focus-visible { outline:3px solid #e98255; outline-offset:2px; }
.directory-notice { grid-column:1/-1; grid-row:5; margin:0; color:var(--text-muted); font-size:12px; line-height:1.5; }
@media(min-width:900px){.controls-filters .directory-scope,.controls-filters .directory-notice{grid-column:1/-1;}}
@media(max-width:600px){.directory-scope{width:100%;}.directory-scope button{flex:1;padding:10px 8px;}}

/* Compact browsing controls leave space for the places themselves. */
.controls-location {padding-top:4px;padding-bottom:4px;}
.controls-location > .address-status:empty {display:none;}
@media(min-width:1000px){
 #app.places-only:not(.detail-open) .panel-header {position:relative;padding-right:390px;min-height:128px;}
 #app.places-only:not(.detail-open) .clock-line {display:none;}
 #app.places-only:not(.detail-open) .primary-navigation {position:absolute;right:32px;top:40px;margin:0;gap:12px;}
 #app.places-only:not(.detail-open) .primary-navigation .desktop-view button {min-width:74px;}
}
.streetview-panel.streetview-external-only .sheet-inner {width:min(540px,calc(100vw - 24px));}
.streetview-external-only .streetview-footer {flex-direction:column;align-items:stretch;padding-top:0;gap:16px;}

/* Browsing controls stay reachable; the desktop filter drawer reserves space. */
.filter-badge {display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:6px;padding:0 6px;border-radius:20px;background:var(--accent-soft);color:var(--accent);font-size:12px;}
.filter-badge[hidden],.time-notice[hidden] {display:none;}
.time-notice {display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0;padding:10px 26px;font-size:13px;line-height:1.45;}
.time-notice p {margin:0;}
#app.detail-open .time-notice {display:none;}
.time-notice .btn {min-height:44px;white-space:normal;text-align:left;}
.coordinate-notice {font-size:12px;line-height:1.45;color:var(--text-muted);margin:8px 0;}
#app:not(.detail-open) .controls-filters {position:sticky;top:0;z-index:12;background:var(--panel-bg);}
#app:not(.detail-open) .list-bar {position:sticky;top:var(--toolbar-h,0px);z-index:11;background:var(--panel-bg);}
#app.header-compact:not(.detail-open) .brand-title,
#app.header-compact:not(.detail-open) .brand-sub {display:none;}
#app.header-compact:not(.detail-open) .panel-header {padding-top:12px;padding-bottom:12px;}
#app.header-compact:not(.detail-open) .brand-eyebrow {margin:0;}
.filter-choices .multi {display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0;}
.filter-choices .multi > legend {position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;}
@media(min-width:768px) {
 #app.drawer-open {--drawer-w:clamp(300px,28vw,360px);padding-right:var(--drawer-w);box-sizing:border-box;}
 #app.drawer-open:not(.places-only) {grid-template-columns:minmax(280px,55%) minmax(0,1fr);}
 #app.drawer-open .filter-sheet {inset:0 0 0 auto;width:var(--drawer-w);padding:0;background:none;align-items:stretch;justify-content:stretch;}
 #app.drawer-open .filter-sheet .sheet-inner {width:100%;height:100%;max-height:100%;border-radius:0;border-width:0 0 0 1px;box-shadow:none;}
 #app.drawer-open .filter-sheet-header,#app.drawer-open .filter-sheet-footer {padding:16px 18px;gap:10px;}
 #app.drawer-open .filter-sheet-header h2 {font-size:20px;}
 #app.drawer-open .filter-sheet-body {padding:18px;}
 #app.drawer-open .filter-sheet-footer {flex-wrap:wrap;}
 #app.drawer-open .filter-sheet-footer .btn-primary {flex:1;min-width:0;white-space:normal;}
 #app.drawer-open .filter-sheet .field-grid {grid-template-columns:1fr;}
 #app.header-compact:not(.detail-open) .primary-navigation {margin-top:8px;}
}
@media(min-width:1000px) {
 #app.places-only.header-compact:not(.detail-open) .panel-header {min-height:72px;padding-top:20px;padding-bottom:20px;}
 #app.places-only.header-compact:not(.detail-open) .primary-navigation {top:12px;margin-top:0;}
}
@media(max-width:767px) {
 .filter-sheet {padding:0;align-items:stretch;justify-content:stretch;}
 .filter-sheet .sheet-inner {width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0;}
 .filter-sheet-header {padding-top:calc(16px + var(--safe-t));}
 .filter-sheet-footer {padding-bottom:calc(16px + var(--safe-b));}
 #app.header-compact:not(.detail-open) .panel-header {min-height:68px;}
 #app.header-compact:not(.detail-open) .primary-navigation {top:10px;}
 #app .controls-filters .chip,#app .cuisine-chip,#app .filter-sheet .chip,
 #app .filter-choices label,#app .primary-navigation .plan-open,#app .card-footer button,
 #app .map-selection-actions .btn,#app .map-selection-actions .directions-link,
 #app .sort-block select,#app .sort-dir,#app .time-planner > summary,#app .location-picker > summary,
 #app .filter-row .reset-btn,#app .cuisine-heading .input {min-height:44px;}
 #app .sort-dir {min-width:44px;width:44px;height:44px;}
 .time-notice {padding:10px 18px;}
}

/* Direct planner entry shares one Vancouver clock with the day and slider. */
.planner-timezone {font-size:12px;line-height:1.5;color:var(--text-muted);margin:0 0 8px;}
.time-planner .planner-fields {display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;}
.planner-fields .planner-day {flex:1 1 190px;min-width:0;}
.planner-fields .planner-time {flex:0 1 128px;min-width:112px;}
.planner-fields .select,.planner-fields .input {min-height:44px;width:100%;box-sizing:border-box;}
.planner-fields .btn-now {min-height:44px;margin-bottom:0;}
@media(max-width:767px) {.planner-fields .planner-day {flex-basis:100%;}.planner-fields .planner-time {flex:1;}}

/* The planner is reachable in phone Places, including a resized half sheet. */
@media (max-width:767px) {
  #app.panel-full:not(.detail-open) .controls-time,
  #app.panel-half:not(.detail-open) .controls-time {display:block;}
}
.conflict-evidence > summary {cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:13px;font-weight:650;}
.conflict-evidence > summary::before {content:'+';margin-right:8px;}
.conflict-evidence[open] > summary::before {content:'−';}
.conflict-evidence .conflict-flag + .conflict-flag {margin-top:10px;}

/* Restaurant opening hours and happy-hour eligibility are separate facts. */
.card-statuses {display:flex;flex-direction:column;align-items:flex-start;gap:5px;}
.regular-hours,.happy-hour-status {display:inline-flex;align-items:center;flex-wrap:wrap;gap:3px;font-size:12px;line-height:1.5;}
.status-category {font-size:11px;font-weight:650;color:var(--text-muted);}
.regular-hours {color:var(--text-muted);}
.regular-hours-open {color:#237451;}
.regular-hours-opening-soon {color:#8a5a17;}
.regular-hours-closed {color:var(--text-muted);}
.theme-dark .regular-hours-open {color:#82d1aa;}
.theme-dark .regular-hours-opening-soon {color:#dfbd7f;}

/* Keep reviewed venue media stable if a file fails; never substitute a photo. */
.venue-photo-frame {position:relative;}
.card-photo-credit {position:absolute;bottom:0;left:0;right:0;padding:4px 8px;background:rgba(0,0,0,.7);color:#fff;font-size:10px;line-height:1.4;pointer-events:none;}
.photo-unavailable img[data-venue-photo] {visibility:hidden;}
.photo-load-status {position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:12px;background:var(--surface-2);color:var(--text-muted);font-size:12px;text-align:center;}
.photo-unavailable .card-photo-credit {z-index:1;}