/* Plan Your Art Crawl glass panel — docs/design-system.md §7/§9.
 * PHASE 2.4: capped to the approved mockup's narrower proportions
 * (380–420px on desktop — the hero grid reserves a 400px column at 1280+,
 * 380px at 1024–1279; full width when stacked on mobile). Presentation
 * only — every legacy id/class/handler inside is untouched. */
.nac-glass-panel {
  position: relative;
  z-index: 3;
  width: 100%;
  /* H-D2V-R3 §3: outer width ~355px (was 390px) — about the Morning/Afternoon/
     Evening row's width; all inner controls remain width:100% so they fill it.
     H-D2V-R4A (A3, revised): 300px OUTER card (border-box: includes padding
     and border), per Robert's measured on-screenshot target of ~304px.
     Floor math: daypart labels are 10px uppercase Archivo; with the tile
     padding fix (legacy-controls.css) and the 3-column grid below, the
     three-tile row needs ~201px min-content; this panel offers 266px of
     content width (2x16px padding + 2px border) — one-line dayparts keep
     ~65px of slack. Absolute one-line floor is ~235px outer; do not go
     below ~290px, or slack for longer localized labels disappears. */
  max-width: 300px;
  justify-self: end;
  background: var(--nac-glass-bg);
  backdrop-filter: blur(var(--nac-glass-blur));
  -webkit-backdrop-filter: blur(var(--nac-glass-blur));
  border: 1px solid var(--nac-glass-border);
  border-radius: var(--nac-radius-lg);
  box-shadow: var(--nac-shadow-glass);
  color: var(--nac-white);
  /* H-D2V-R4A (A3, revised): side padding 20px -> 16px (now uniform with
     the existing <=767px padding) — outer padding gives way before control
     space does, per the approved width-reduction priority. */
  padding: var(--nac-space-4);
  opacity: 0;
  transform: scale(0.98);
  animation: nac-fade-scale-in var(--nac-duration-slow) var(--nac-ease-out) forwards;
  animation-delay: 100ms;
}
/* Flat fallback for browsers/GPUs without backdrop-filter support, and for
   the slow-network/low-power path — docs/responsive-spec.md */
@supports not (backdrop-filter: blur(1px)) {
  .nac-glass-panel { background: var(--nac-glass-bg-flat-fallback); }
}
.nac-glass-panel.nac-glass-panel--flat { background: var(--nac-glass-bg-flat-fallback); backdrop-filter: none; }

@keyframes nac-fade-scale-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .nac-glass-panel { opacity: 1; transform: none; animation: none; } }

/* V2 (approved-homepage parity): header row carries the title plus a
 * decorative map glyph in the far corner (Reference/approved-homepage.png). */
.nac-glass-panel__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--nac-space-3); }
.nac-glass-panel__header h2 { font-size: 1.05rem; margin-bottom: 0; }
.nac-glass-panel__glyph {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--nac-radius-sm);
  border: 1px solid var(--nac-glass-border);
  color: var(--nac-muted);
}
.nac-field-group { margin-bottom: var(--nac-space-3); }
.nac-field__label {
  display: block;
  font-size: var(--nac-fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--nac-tracking-eyebrow);
  color: var(--nac-muted);
  margin-bottom: var(--nac-space-2);
}

.nac-chip-list { display: flex; flex-wrap: wrap; gap: var(--nac-space-2); }
.nac-chip {
  display: inline-flex; align-items: center; gap: var(--nac-space-2);
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--nac-glass-border);
  border-radius: var(--nac-radius-pill);
  padding: var(--nac-space-2) var(--nac-space-3);
  font: var(--nac-fw-medium) var(--nac-fs-small) var(--nac-font-body);
  color: var(--nac-white);
  transition: background var(--nac-duration-fast) var(--nac-ease-standard);
}
.nac-chip[aria-pressed="true"] { background: rgba(255,255,255,0.22); }
.nac-chip__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.nac-chip__remove { opacity: 0.7; min-width: 24px; min-height: 24px; display: inline-grid; place-items: center; background: none; border: none; color: inherit; }

.nac-field {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--nac-glass-border);
  border-radius: var(--nac-radius-md);
  padding: var(--nac-space-3) var(--nac-space-4);
  color: var(--nac-white);
}
.nac-add-stop { display: flex; align-items: center; }
.nac-add-stop__input { border: none; background: none; color: inherit; flex: 1; }
.nac-add-stop__button {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--nac-gradient-primary); color: #fff; border: none;
  flex: none;
}

.nac-segmented, .nac-daypart-group { display: flex; gap: var(--nac-space-2); flex-wrap: wrap; }
.nac-segmented__opt, .nac-daypart {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--nac-glass-border);
  border-radius: var(--nac-radius-pill);
  padding: var(--nac-space-2) var(--nac-space-4);
  color: var(--nac-white);
  font: var(--nac-fw-medium) var(--nac-fs-small) var(--nac-font-body);
  transition: box-shadow var(--nac-duration-fast) var(--nac-ease-standard);
}
.nac-segmented__opt[aria-checked="true"], .nac-daypart[aria-checked="true"] {
  box-shadow: 0 0 0 2px var(--nac-orange) inset;
}

.nac-plan-cta { width: 100%; justify-content: center; margin-top: var(--nac-space-2); }

/* V2 (approved-homepage parity): daypart icon tiles. Same .opt buttons and
 * data-dp values (contract untouched) — only presentation: stacked icon +
 * label, orange ring + soft fill on the checked tile, matching
 * Reference/approved-homepage.png's Time-of-Day row. */
/* H-D2V: .nac-glass-panel prefix so this grid outranks the later-loading
   legacy .oprow{display:flex} (which was wrapping the 4th tile).
   H-D2V-R4A (A3, revised): 3 columns, not 4 — the fourth track had been
   EMPTY since H-D2V-R2 §6 removed the Anytime tile, wasting a quarter of
   the row and forcing uneven track widths at narrow panel sizes. Three
   equal tracks let the 300px panel keep Morning/Afternoon/Evening on one
   comfortable line. */
.nac-glass-panel .nac-daypart-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nac-space-2); }
.nac-daypart-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--nac-space-2) var(--nac-space-1);
  border-radius: var(--nac-radius-md);
}
.nac-daypart-tile .nac-daypart-tile__icon { color: var(--nac-muted); display: inline-grid; place-items: center; }
.nac-daypart-tile .nac-daypart-tile__label { font-size: 10px; }
/* H-D2V-R2 §6: daypart tiles are now multiselect toggles (aria-pressed),
   not a single-select radiogroup (aria-checked). Selected-state styling keys
   off aria-pressed. */
.nac-daypart-tile[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--nac-orange) inset;
  background: rgba(249, 119, 47, 0.12);
}
.nac-daypart-tile[aria-pressed="true"] .nac-daypart-tile__icon { color: var(--nac-orange); }

/* V2: reassurance microcopy under the Build CTA. */
.nac-plan-note {
  text-align: center;
  color: var(--nac-muted);
  font-size: 11px;
  margin: var(--nac-space-2) 0 0;
}

@media (max-width: 1023px) {
  /* Stacked layout: panel goes full-width under the copy (hero.css). */
  .nac-glass-panel { max-width: none; justify-self: stretch; }
}
@media (max-width: 767px) {
  .nac-glass-panel { padding: var(--nac-space-4); }
  /* PHASE 2.4 FIX: chips/segments previously switched to flex-direction:
     column here, producing the tall full-width stacked rows visible in the
     mobile preview screenshots — the approved mockup keeps them as compact
     wrapping pills at every width. Row + wrap restores that. */
  .nac-chip-list, .nac-segmented, .nac-daypart-group { flex-direction: row; flex-wrap: wrap; }

  /* H-D2V-R4A (I1): on phones the District and More-options controls render
     INLINE in the planner — no popovers, nothing hidden behind a dropdown.
     ui-controls.js skips the portal/popover enhancement below this same
     breakpoint (one matchMedia each side, same 767px), leaves both
     .nac-disclosure__panel nodes in their field groups, keeps them visible,
     and keeps the toggles [hidden] — so the no-JS state and the mobile JS
     state are the SAME state: one set of controls, one DOM, no duplicated
     inputs, selections preserved across resize because the nodes never get
     cloned. Presentation order comes from flex `order` (approved sequence:
     Time of Day → Districts → More options → CTA); :has() carries the
     reordering and is supported by every target browser (Safari 15.4+) —
     without it the panel simply keeps DOM order, fully functional. */
  .nac-glass-panel { display: flex; flex-direction: column; }
  .nac-glass-panel > * { order: 7; }
  .nac-glass-panel__header { order: 0; }
  .nac-field-group:has(.nac-daypart-group) { order: 1; }
  .nac-field-group:has(.nac-district-panel) { order: 2; }
  .nac-field-group:has(.nac-more-options-panel) { order: 3; }
  .nac-gen-row { order: 4; }
  .nac-plan-note { order: 5; }
  /* Inline panels: same compact spacing as the rest of the panel. */
  .nac-field-group .nac-disclosure__panel { margin-top: var(--nac-space-2); }
}
@media (max-width: 420px) {
  /* V2: four icon tiles get cramped on the narrowest phones — 2×2 grid. */
  .nac-daypart-group { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
 * H-D2V-R1 §7: compact control heights + disclosures + dialogs
 * ============================================================ */
/* Target control heights (approved): chips 32–36, inputs 42–46, CTA ~48. */
.nac-glass-panel .dchip { min-height: 34px; }
/* Scoped to the planner — never restyles input[type="time"] site-wide. */
.nac-glass-panel .nac-field,
.nac-glass-panel input[type="time"] { min-height: 44px; }
.nac-glass-panel .nac-daypart-tile { min-height: 44px; }
.nac-plan-cta { width: 100%; justify-content: center; margin-top: var(--nac-space-2); min-height: 48px; }

/* H-D2V-R4A (hero-stability geometry fix): route-app.js's build() runs on
   EVERY filter change (live preview) and writes "☀ N of M stops land in
   their best light" into #sunhint (route-app.js:238) — previously an empty
   zero-size span in the wrapping .gen-row. The text appearing added a row
   inside the planner, the planner grew, and because .nac-hero's height is
   content-driven at common window heights, the hero recomputed its `cover`
   crop and the background visibly jumped on daypart/district selection.
   Fix the GEOMETRY, not the symptom: the hint permanently reserves exactly
   one line (filled or empty) and can never wrap to a second one — so
   selecting Morning/Afternoon/Evening changes the planner height by zero.
   Scoped to the planner; #sunhint's id, content, and JS are untouched. */
.nac-glass-panel .nac-sunhint {
  flex-basis: 100%;
  min-height: 1.4em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Disclosure toggles (district popover + "More options"). Visibility driven
 * by [hidden]: server-side [hidden] (no-JS keeps panels open); ui-controls.js
 * reveals the toggle + collapses the panel. */
.nac-disclosure__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nac-space-2);
  width: 100%; min-height: 44px; padding: 8px 12px;
  border-radius: var(--nac-radius-md);
  background: rgba(255,255,255,0.06); border: 1px solid var(--nac-glass-border);
  color: var(--nac-white); cursor: pointer;
  font: var(--nac-fw-regular) var(--nac-fs-small) var(--nac-font-body);
}
.nac-disclosure__toggle[hidden] { display: none; }
.nac-disclosure__summary { font-weight: var(--nac-fw-medium); }
/* H-D2V-R4A (A4): both disclosure summaries (districts + More options) can
   now carry live selection text — truncate inside the toggle instead of
   ever widening the 340px panel. flex:1 + min-width:0 lets the ellipsis
   engage; the chevron keeps its natural size on the right. */
.nac-disclosure__toggle .nac-disclosure__summary {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nac-disclosure__chev { transition: transform var(--nac-duration-fast) var(--nac-ease-standard); }
.nac-disclosure__toggle[aria-expanded="true"] .nac-disclosure__chev { transform: rotate(180deg); }
.nac-disclosure__panel { margin-top: var(--nac-space-2); }
.nac-disclosure__panel[hidden] { display: none; }

/* H-D2V-R3 §2: BOTH planner disclosures (district + "More options") are
   portaled to <body> by ui-controls.js and shown as FIXED popovers anchored to
   their toggles (position/top/left/width/max-height are set inline in JS). This
   supersedes R2's absolute, desktop-only district popover.

   Why fixed + portaled instead of absolute: .nac-glass-panel has
   backdrop-filter + a transform animation, each of which makes it the
   containing block for position:fixed/absolute descendants — so a popover left
   inside it is trapped and clipped by .nac-hero{overflow:hidden} (the Safari
   clipping defect, at every width). Portaling to <body> escapes both the
   containing block and the hero overflow, and — being out of flow — opening
   either panel cannot change the hero height, re-crop the background, or move
   the hero copy / planner. Works identically on desktop and ~390px mobile.

   This class carries only APPEARANCE; JS owns positioning + internal scroll. */
.nac-disclosure__panel.nac-popover--fixed {
  z-index: 1200;
  margin: 0;
  background: var(--nac-navy-800);
  border: 1px solid var(--nac-glass-border);
  border-radius: var(--nac-radius-md);
  padding: var(--nac-space-3);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  -webkit-overflow-scrolling: touch;
}
.nac-more-options-panel { display: grid; gap: var(--nac-space-3); }

/* Real "Preview map" button — keeps the approved glyph treatment. */
.nac-glass-panel__map-toggle {
  background: none; border: 1px solid var(--nac-glass-border); color: var(--nac-muted);
  width: 34px; height: 34px; border-radius: var(--nac-radius-sm);
  display: inline-grid; place-items: center; cursor: pointer;
}
.nac-glass-panel__map-toggle:hover { color: var(--nac-white); border-color: rgba(255,255,255,0.35); }

/* ---------- Native <dialog> modals (search + map) ---------- */
.nac-dialog {
  box-sizing: border-box;
  border: 1px solid var(--nac-glass-border);
  border-radius: var(--nac-radius-lg);
  background: var(--nac-navy-800);
  color: var(--nac-white);
  padding: 0;
  max-width: min(92vw, 720px);
  width: 100%;
  max-height: min(90dvh, 760px);
  overflow: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.nac-dialog::backdrop { background: rgba(4, 9, 18, 0.62); }
.nac-dialog__head { display: flex; align-items: center; justify-content: space-between; padding: var(--nac-space-4) var(--nac-space-5); border-bottom: 1px solid var(--nac-glass-border); }
.nac-dialog__body { padding: var(--nac-space-4); }
.nac-dialog__close {
  background: none; border: 1px solid var(--nac-glass-border); color: var(--nac-white);
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer; flex: none;
  display: inline-grid; place-items: center; font-size: 0.9rem;
}
.nac-dialog__close:hover { background: rgba(255,255,255,0.1); }

.nac-search-form { display: flex; gap: var(--nac-space-2); align-items: center; padding: var(--nac-space-5); flex-wrap: wrap; }
.nac-search-form__input {
  flex: 1 1 240px; min-height: 46px; min-width: 0;
  background: rgba(255,255,255,0.06); border: 1px solid var(--nac-glass-border);
  border-radius: var(--nac-radius-md); color: var(--nac-white);
  padding: 0 var(--nac-space-4); font: var(--nac-fw-regular) var(--nac-fs-body) var(--nac-font-body);
}
.nac-search-form__submit { min-height: 46px; }

/* Map dialog: reuse the real .nac-map-frame; #map gets a dialog height. It is
 * display:none in the (pending) builder until moved here, then re-measured. */
.nac-map-dialog { max-width: min(94vw, 900px); }
.nac-map-dialog .nac-dialog__body { padding: 0; }
.nac-map-dialog .nac-map-frame { display: block; }
.nac-map-dialog #map { height: min(70vh, 520px); border-radius: 0 0 var(--nac-radius-lg) var(--nac-radius-lg); }

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