/* ── Sustainability Map — self-contained stylesheet ──────────────────────
   This page no longer loads styles/campus-map.css (the public map's
   stylesheet, ~2500+ lines of .hu-sidebar/.sidebar-tabs/tour/directions rules
   this page never uses). The small set of genuinely shared primitives — brand
   tokens, #map-veil, .visually-hidden, .status, the base #map rule — are
   copied in below instead, so this branch's app has zero dependency on the
   public map's CSS. See build_memory.md, 2026-08-25 branch-cleanup entry.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* Official Howard University brand palette (ouc.howard.edu/.../colors-typography) —
     copied from styles/campus-map.css:root, not the full file. */
  --howard-blue-deep: #003A63;
  --howard-blue:      #2A6EBB;
  --howard-red:       #E51937;
  --howard-red-deep:  #A11228;
  --howard-gray:      #5F6062;
  --heritage-gold:    #C79316;
  --sunglow:          #FFC82E;
  --maximum-green:    #5C8727;
  --maximum-green-900:#3D5C1B;
  --maximum-green-800:#415F1B;
  --maximum-green-700:#4D7422;
  --maximum-green-600:#5C8727;
  --maximum-green-500:#6F9D3D;
  --maximum-green-400:#8FB85C;
  --howard-orange:    #EA7125;
  --parchment:        #F5F5F0;
  --cream:            #FFF8EE;
  --ink:              #1B2C47;
  --stone:            #6B818D;
  --shadow:           rgba(0, 58, 99, 0.24);
  --ui-border:         rgba(0, 58, 99, 0.14);
  --ui-border-strong:  rgba(0, 58, 99, 0.26);
  --ui-surface:        #ffffff;
  --ui-surface-muted:  #F7F9FC;
  --ui-surface-raised: #ffffff;
  --brand-primary:     var(--howard-blue-deep);
  --text-secondary:    var(--howard-gray);
  --hu-sans:          "Open Sans", "Gill Sans", Calibri, Arial, sans-serif;
  --chrome-transition: 320ms;
  --motion-standard: cubic-bezier(0.32, 0.72, 0, 1);

  --sustain-sidebar-width: 280px;
  --sustain-accent: var(--maximum-green-600);
  --accessibility-accent: var(--howard-blue);
  --waste-accent: var(--howard-red-deep);
  --transportation-accent: var(--stone);

  /* Small group accents and matching record badges; map renderers are separate.
     Waste uses Howard's dark crimson (PMS 186, darkened) rather than green so it
     never reads as a second Sustainability group -- the design brief calls for a
     violet/maroon Waste hue, and this is the closest match in Howard's own brand
     spec. --waste-accent and --band-waste are kept equal on purpose: the group's
     left-border/badge color and its own checkboxes must match. */
  --band-sustainability: var(--maximum-green-700);
  --band-accessibility: var(--howard-blue);
  --band-waste: var(--howard-red-deep);
  --band-transportation: #AD4E15;
  --band-outdoor-amenities: var(--howard-blue-deep);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--parchment, #F5F5F0);
  color: var(--ink);
  font-family: var(--hu-sans);
}

.visually-hidden:where(:not(:focus-within, :active)) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
}

.bikeshare-hover {
  position: fixed; z-index: 25; width: 232px; max-width: calc(100vw - 24px);
  padding: 11px 12px; background: white; color: var(--ink); border-radius: 12px;
  border: 1px solid var(--ui-border); box-shadow: 0 4px 16px rgba(0, 38, 65, 0.14);
  font-size: 11px;
}
.bikeshare-hover[hidden] { display: none; }
.bikeshare-hover__stats[hidden] { display: none; }
.mobility-hover--bolt .bikeshare-hover__eyebrow { color: #733DC2; }
.mobility-hover--veo .bikeshare-hover__eyebrow { color: #08776C; }
.mobility-hover--lime .bikeshare-hover__eyebrow { color: #4B6A00; }
.bikeshare-hover::after {
  content: ""; position: absolute; left: var(--tip-left, 50%); bottom: -6px;
  width: 10px; height: 10px; background: white; transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border);
}
.bikeshare-hover--below::after { top: -7px; bottom: auto; transform: translateX(-50%) rotate(225deg); }
.bikeshare-hover__eyebrow { display: block; color: var(--howard-red-deep); font-size: 10px; font-weight: 600; }
.bikeshare-hover__name { display: block; font-size: 13px; margin: 3px 0 9px; line-height: 1.3; overflow-wrap: anywhere; }
.bikeshare-hover__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 7px 8px; border-radius: 8px; background: #F5F7F8; }
.bikeshare-hover__stats > div { display: flex; flex-direction: column; gap: 2px; }
.bikeshare-hover__stats span { white-space: nowrap; font-size: 10px; }
.bikeshare-hover__count { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--ink); }
.bikeshare-hover__note, .bikeshare-hover__updated { display: block; color: var(--text-secondary); font-size: 10px; margin-top: 6px; line-height: 1.3; }
.bikeshare-hover__status { display: block; margin-top: 6px; font-weight: 600; color: var(--howard-red-deep); }
.bikeshare-hover__status[hidden] { display: none; }
@media (hover: none), (pointer: coarse) { .bikeshare-hover { display: none; } }

#map {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.sustain-app {
  position: relative;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
}

.sustain-map-shell {
  position: absolute;
  inset: 0;
  isolation: isolate;
}

/* ── Map veil (startup splash) — copied unchanged from campus-map.css ──── */

#map-veil {
  position: absolute;
  inset: 0;
  z-index: 39;
  background: var(--ui-surface);
  pointer-events: none;
  will-change: opacity;
  display: flex;
  align-items: center;
  justify-content: center;
}
#map-veil.ready {
  opacity: 0;
  transition: opacity 0.62s var(--motion-standard);
}

.map-veil__stage {
  perspective: 900px;
}

.map-veil__bison {
  display: block;
  width: min(160px, 30vw);
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(0, 58, 99, 0.18));
  animation: map-veil-turn 2.4s linear infinite;
}

@keyframes map-veil-turn {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

/* ── Status bar — copied from campus-map.css, offset for this page's own
   sidebar width instead of the public map's 320px. ─────────────────────── */

.status {
  position: fixed;
  left: calc(var(--sustain-sidebar-width) + 1rem);
  bottom: 1rem;
  z-index: 40;
  max-width: min(28rem, calc(100vw - var(--sustain-sidebar-width) - 2rem));
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background: rgba(19, 35, 60, 0.9);
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.35;
  box-shadow: 0 16px 40px rgba(19, 35, 60, 0.24);
  animation: status-enter 0.18s var(--motion-standard) both;
  transition:
    left var(--chrome-transition) var(--motion-standard),
    bottom var(--chrome-transition) var(--motion-standard);
}

@keyframes status-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */

.sustain-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sustain-sidebar-width);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ui-surface);
  border-right: 1px solid var(--ui-border);
  box-shadow: 2px 0 14px rgba(0, 58, 99, 0.08);
  z-index: 15;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(0);
  transition: transform var(--chrome-transition) var(--motion-standard);
}

.sustain-sidebar.closed {
  transform: translateX(-100%);
}

/* ── Sidebar toggle tab ───────────────────────────────────────────────── */
.sustain-sidebar__toggle {
  position: fixed;
  top: 50%;
  left: var(--sustain-sidebar-width);
  transform: translateY(-50%);
  z-index: 16;
  width: 20px;
  height: 46px;
  background: var(--howard-blue);
  color: #ffffff;
  border: none;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 2px 0 8px rgba(0, 58, 99, 0.22);
  transition: left var(--chrome-transition) var(--motion-standard), background 0.15s;
}
.sustain-sidebar__toggle:hover { background: var(--howard-blue-deep); }
body.sustain-sidebar-closed .sustain-sidebar__toggle { left: 0; }
.sustain-sidebar__toggle svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  transition: transform var(--chrome-transition) var(--motion-standard);
}
body.sustain-sidebar-closed .sustain-sidebar__toggle svg { transform: rotate(180deg); }

/* Chrome that's offset by the sidebar's width collapses back to the edge when it's
   hidden — mirrors campus-map's .campus-app.sidebar-closed pattern. */
body.sustain-sidebar-closed .status { left: 1rem; }

.sustain-sidebar__header {
  padding: 1.1rem 1.25rem 0.85rem;
  border-bottom: 1px solid var(--ui-border);
  border-top: 4px solid var(--heritage-gold);
}

.sustain-sidebar__eyebrow {
  margin: 0 0 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.sustain-sidebar__title {
  margin: 0;
  font-family: var(--hu-sans);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--howard-blue-deep);
}

.sustain-sidebar__body {
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sustain-sidebar__intro { padding: 1rem; border-top: 1px solid var(--ui-border); }
.sustain-sidebar__intro p { margin: 0 0 0.25rem; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.sustain-sidebar__intro > span { font-size: 0.75rem; color: var(--text-secondary); }
.sustain-sidebar__actions { display: flex; gap: 0.6rem; margin-top: 0.65rem; }
.sustain-sidebar__actions button {
  min-height: 36px; padding: 0.4rem 0.7rem; border: 1px solid var(--ui-border);
  border-radius: 4px; background: white; color: var(--howard-blue-deep);
  font: 600 0.75rem var(--hu-sans); cursor: pointer;
}
.sustain-sidebar__actions button:hover { background: var(--ui-surface-muted); }
.sustain-sidebar__actions button:disabled { opacity: 0.5; cursor: not-allowed; }
.sustain-sidebar__toggle-label { display: none; }

.sustain-sidebar__footer {
  padding: 0.85rem 1.1rem 1.1rem;
  border-top: 1px solid var(--ui-border);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* ── Layer groups — neutral rows with small accents, collapsed until explored.
   Each row is a single checkbox-drives-state control, not the public map's
   three-affordance stack (group accordion + row-as-expand-button + separate
   switch). ────────────────────────────────────────────────────────────── */

.sustain-group__header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: auto;
  margin: 0;
  padding: 0 12px;
  min-height: 60px;
  border-radius: 0;
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
  border-left: 3px solid var(--group-accent);
}
.sustain-group { --group-accent: var(--band-sustainability); }
.sustain-group--accessibility { --group-accent: var(--band-accessibility); }
.sustain-group--waste { --group-accent: var(--band-waste); }
.sustain-group--transportation { --group-accent: var(--band-transportation); }
.sustain-group--outdoor-amenities { --group-accent: var(--band-outdoor-amenities); }

.sustain-group__trigger {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  min-height: 60px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.12s;
}
.sustain-group__trigger:hover { opacity: 0.9; }

.sustain-group__icon {
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  color: var(--group-accent);
}

.sustain-group__chevron {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  color: var(--howard-blue-deep);
  opacity: 0.85;
  transition: transform 0.16s ease;
}
.sustain-group__trigger[aria-expanded="false"] .sustain-group__chevron { transform: rotate(-90deg); }

.sustain-group__body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.55rem 0.65rem;
  background: var(--ui-surface-muted);
}
.sustain-group__body[hidden] { display: none; }

.sustain-group__label {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--howard-blue-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Group master toggle — the pill switch on each band that turns every connected
   layer in that group on/off at once (see initSustainGroupMasterToggles()). ────── */

.sustain-group__master {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  cursor: pointer;
  min-height: 44px;
}
.sustain-group__master[data-all-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.sustain-group__master-checkbox {
  position: absolute;
  inset: 0;
  width: 42px;
  height: 44px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.sustain-group__master-track {
  display: block;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #77838C;
  transition: background 0.15s;
}

.sustain-group__master-knob {
  display: block;
  width: 18px;
  height: 18px;
  margin: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}

.sustain-group__master-checkbox:indeterminate + .sustain-group__master-track,
.sustain-group__master-checkbox:checked + .sustain-group__master-track {
  background: var(--howard-blue-deep);
}
.sustain-group__master-checkbox:checked + .sustain-group__master-track .sustain-group__master-knob {
  transform: translateX(18px);
  background: #fff;
}
.sustain-group__master-checkbox:indeterminate + .sustain-group__master-track .sustain-group__master-knob {
  transform: translateX(9px);
}
.sustain-group__master-checkbox:focus-visible + .sustain-group__master-track {
  outline: 2px solid var(--howard-blue-deep);
  outline-offset: 2px;
}
.sustain-group__master-checkbox:disabled {
  cursor: not-allowed;
}

.sustain-row {
  display: grid;
  grid-template-columns: 8px 18px minmax(0, 1fr);
  align-items: start;
  column-gap: 0.5rem;
  padding: 0.65rem 0.4rem;
  border-radius: 4px;
  border: 1px solid transparent;
}

.sustain-row.is-selected { background: #fff; border-color: var(--howard-blue-deep); box-shadow: inset 3px 0 var(--heritage-gold); }
.sustain-row.is-selected .sustain-row__name::after { content: "Selected"; display: block; font-size: 0.65rem; color: var(--howard-blue-deep); text-transform: uppercase; margin-top: 0.2rem; }
.sustain-group.has-selection .sustain-group__header { box-shadow: inset 4px 0 var(--heritage-gold); }

.sustain-row__dot {
  display: block;
  width: 8px;
  height: 8px;
  margin-top: 0.4rem;
  border-radius: 50%;
  background: var(--cat, var(--howard-gray));
  flex: 0 0 auto;
}

.sustain-row:not([data-disabled]):hover {
  background: var(--ui-surface-muted);
}

.sustain-row[data-disabled="true"] {
  opacity: 0.55;
}

.sustain-row__checkbox {
  margin-top: 0.2rem;
  width: 16px;
  height: 16px;
  accent-color: var(--sustain-accent);
  flex-shrink: 0;
}

.sustain-group--accessibility .sustain-row__checkbox {
  accent-color: var(--accessibility-accent);
}

.sustain-group--waste .sustain-row__checkbox {
  accent-color: var(--waste-accent);
}

.sustain-group--transportation .sustain-row__checkbox {
  accent-color: var(--transportation-accent);
}

.sustain-row__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  cursor: pointer;
}

.sustain-row[data-disabled="true"] .sustain-row__info {
  cursor: not-allowed;
}

.sustain-row__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.sustain-row__desc {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.sustain-row__status {
  grid-column: 3;
  justify-self: start;
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--ui-surface-muted);
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  margin-top: 0.15rem;
  white-space: nowrap;
}

/* Disabled rows a group couldn't wire up collapse here instead of sitting inline among
   ones a person can actually turn on — see collapseUnavailableSustainRows(). */
.sustain-coming-soon {
  margin-top: 0.3rem;
  border-top: 1px solid var(--ui-border);
}
.sustain-coming-soon > .sustain-row:first-of-type { margin-top: 0.2rem; }
.sustain-coming-soon__summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 0.4rem;
  padding: 0.5rem 0.4rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.sustain-coming-soon__summary:focus-visible {
  outline: 2px solid var(--howard-blue);
  outline-offset: -2px;
  border-radius: 4px;
}
.sustain-coming-soon .sustain-row__status { display: none; }
.sustain-coming-soon .sustain-row[data-disabled="true"] { opacity: 1; }
.sustain-coming-soon .sustain-row__name { color: var(--text-secondary); }
.sustain-coming-soon__summary::-webkit-details-marker { display: none; }
.sustain-coming-soon__summary::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.16s ease;
}
.sustain-coming-soon[open] > .sustain-coming-soon__summary::before { transform: rotate(45deg); }
.sustain-coming-soon__count {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
}

.sustain-subfilters {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin: -0.1rem 0 0.3rem 2rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--ui-border);
}

.sustain-subfilters[hidden] {
  display: none;
}

.sustain-subfilter {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  min-height: 28px;
  padding: 0.28rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.sustain-subfilter:hover {
  background: var(--ui-surface-muted);
  color: var(--ink);
}

.sustain-subfilter[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--status-color, var(--heritage-gold)) 50%, var(--ui-border));
  background: color-mix(in srgb, var(--status-color, var(--heritage-gold)) 14%, white);
  color: var(--ink);
}

.sustain-subfilter__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--status-color, var(--heritage-gold));
  flex: none;
}

/* ── Feature/project details — description, facts, and a public contact. ── */

.record-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: calc(100vw - var(--sustain-sidebar-width) - 1rem);
  height: 100%;
  background: var(--ui-surface);
  border-left: 1px solid var(--ui-border);
  box-shadow: -2px 0 14px rgba(0, 58, 99, 0.08);
  z-index: 16;
  padding: 1.1rem 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 4px solid var(--heritage-gold);
  overflow-wrap: anywhere;
  /* Closed it sits off-canvas and out of the tab order; visibility flips only after the
     slide-out has finished, and at once when it slides in. */
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--chrome-transition) var(--motion-standard), visibility 0s linear var(--chrome-transition);
  will-change: transform;
}
body.record-panel-open .record-panel {
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.record-panel__close {
  position: sticky;
  float: right;
  top: 0;
  margin: -0.25rem -0.35rem 0 0.5rem;
  z-index: 1;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  background: var(--ui-surface-muted);
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.record-panel__close:hover { background: var(--ui-border); }

.record-panel__badge {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0.24rem 0.65rem;
  border-radius: 999px;
  background: var(--badge-color, var(--howard-gray));
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.record-panel__badge[hidden] { display: none; }

.record-panel__badge { max-width: calc(100% - 2rem); }
.record-panel__layer {
  display: block; width: fit-content; margin: 0 2rem 0.9rem 0; padding: 0;
  border: 0; background: transparent; color: var(--howard-blue-deep);
  font: 600 0.8rem var(--hu-sans); text-decoration: underline; text-underline-offset: 3px;
  min-height: 32px; cursor: pointer;
}
.record-panel__layer[hidden] { display: none; }

button:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--howard-blue-deep); outline-offset: 3px; }
.sustain-group__trigger:focus-visible { outline-color: var(--howard-blue-deep); outline-offset: -4px; }

.record-panel__title {
  margin: 0 1.75rem 1rem 0;
  font-size: 1.3rem;
  line-height: 1.35;
  font-weight: 800;
  color: var(--howard-blue-deep);
}

.record-panel__subtitle {
  margin: 0 2.5rem 0.4rem 0;
  font-size: 0.68rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.record-panel__fields {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.record-panel__fields > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--ui-border);
}

.record-panel__fields dt {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.record-panel__fields dd {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink);
}

.record-panel__summary, .record-panel__description {
  margin: 0 0 1.1rem;
  font-size: 0.9rem;
  line-height: 1.65;
  white-space: pre-line;
}
.record-panel__summary { font-weight: 600; }
.record-panel .is-empty { color: var(--text-secondary); font-size: 0.8rem; }
.record-panel__notice { padding: 0.75rem; background: var(--ui-surface-muted); font-size: 0.85rem; line-height: 1.5; }
.record-panel__contact { margin-top: 1.4rem; padding: 1rem; border-left: 3px solid var(--heritage-gold); background: var(--ui-surface-muted); }
.record-panel__contact h3 { margin: 0 0 0.65rem; color: var(--howard-blue-deep); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
.record-panel__contact p { margin: 0.3rem 0 0; font-size: 0.85rem; line-height: 1.5; }
.record-panel__contact-name { font-weight: 700; }
.record-panel a { color: var(--howard-blue-deep); text-underline-offset: 3px; }
.record-panel__website a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.85rem; font-weight: 700; }
.record-panel__metadata { margin-top: 1.25rem; border-top: 1px solid var(--ui-border); }
.record-panel__metadata summary { padding: 0.9rem 0; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.record-panel__source { margin: 1.25rem 0 0; font-size: 0.7rem; color: var(--text-secondary); }


/* Search and a real HTML feature list provide an alternative to map hit targets.
   right leaves an 80px column clear for the .map-navigation icon stack beside it
   (see design brief: search top-left/top-center, navigation controls top-right). */
.feature-search {
  position: fixed;
  z-index: 24;
  top: 1rem;
  left: calc(var(--sustain-sidebar-width) + 1rem);
  right: 80px;
  max-width: 520px;
  margin-inline: auto;
  color: var(--ink);
  transition: left var(--chrome-transition) var(--motion-standard), right var(--chrome-transition) var(--motion-standard);
}
body.sustain-sidebar-closed .feature-search { left: 1rem; }
body.record-panel-open .feature-search { right: 400px; }
.feature-search__bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.25rem 0.3rem 0.25rem 0.85rem;
  background: var(--ui-surface); border: 1px solid var(--ui-border-strong);
  border-radius: 999px; box-shadow: 0 3px 16px rgba(0, 38, 65, 0.12);
}
.feature-search__bar:focus-within { border-color: var(--howard-blue-deep); box-shadow: 0 0 0 3px rgba(0, 58, 99, 0.16); }
.feature-search input:focus-visible { outline: none; }
.feature-search__bar svg { flex: none; color: var(--howard-blue-deep); }
.feature-search input {
  flex: 1; min-width: 0; width: 100%; min-height: 44px;
  border: 0; background: transparent; color: var(--ink); font: 400 0.9rem var(--hu-sans);
}
.feature-search input::placeholder { color: var(--text-secondary); opacity: 1; }
.feature-search button { min-height: 44px; font-family: var(--hu-sans); cursor: pointer; }
.feature-search__bar button {
  padding: 0.5rem 1rem; border: 0; border-radius: 999px;
  background: var(--howard-blue-deep); color: white; font-weight: 700;
}
.feature-search__panel {
  margin-top: 0.5rem; padding: 1rem; max-height: min(65svh, 600px);
  overflow-y: auto; overscroll-behavior: contain; background: white;
  border: 1px solid var(--ui-border); border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 38, 65, 0.14);
}
.feature-search__heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: sticky; top: -1rem; background: white; z-index: 1; }
.feature-search__heading h2 { margin: 0; font-size: 1rem; color: var(--howard-blue-deep); }
.feature-search__heading button { width: 44px; border: 0; border-radius: 50%; background: var(--ui-surface-muted); font-size: 1.2rem; }
.feature-search__panel > label { display: block; margin: 0.5rem 0 0.35rem; font-size: 0.75rem; font-weight: 700; }
.feature-search select { width: 100%; min-height: 44px; padding: 0.5rem; border: 1px solid var(--ui-border-strong); border-radius: 4px; background: white; color: var(--ink); font: 400 0.85rem var(--hu-sans); }
.feature-search__panel p { font-size: 0.75rem; line-height: 1.5; color: var(--text-secondary); }
#feature-search-status { color: var(--ink); font-weight: 600; }
#feature-search-list { list-style: none; padding: 0; margin: 0; }
#feature-search-list li + li { border-top: 1px solid var(--ui-border); }
#feature-search-list button { display: block; width: 100%; padding: 0.85rem 0.5rem; border: 0; background: transparent; text-align: left; border-radius: 4px; }
#feature-search-list button:hover { background: var(--ui-surface-muted); }
.feature-result__title { display: block; color: var(--howard-blue-deep); font-size: 0.9rem; font-weight: 700; overflow-wrap: anywhere; }
.feature-result__context { display: block; margin-top: 0.3rem; color: var(--text-secondary); font-size: 0.72rem; }
.feature-search__more { width: 100%; margin-top: 0.65rem; border: 1px solid var(--ui-border-strong); border-radius: 4px; background: var(--ui-surface-muted); color: var(--howard-blue-deep); font-weight: 700; }
.feature-search button:disabled { opacity: 0.6; cursor: wait; }
.feature-search select:focus-visible { outline: 3px solid var(--howard-blue-deep); outline-offset: 3px; }
/* Building filters are secondary controls inside the layer sidebar. */
.building-filters { border-bottom: 1px solid var(--ui-border); padding: 0 1rem 0.5rem; }
.building-filters summary { min-height: 60px; padding: 1rem 0; cursor: pointer; color: var(--howard-blue-deep); font-size: 0.85rem; font-weight: 700; }
.building-filters summary span { display: block; margin: 0.25rem 0 0 1rem; color: var(--text-secondary); font-size: 0.72rem; font-weight: 400; }
.building-filters > p { font-size: 0.75rem; color: var(--text-secondary); margin: 0 0 0.75rem; }
.category-filter-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-bottom: 0.75rem; }
.category-filter-bar[hidden] { display: none; }
.category-pill {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 0.45rem;
  min-height: 40px; padding: 0.4rem 0.65rem; border-radius: 8px;
  border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ink);
  font: 600 0.75rem var(--hu-sans); cursor: pointer;
}
.category-pill:hover { background: var(--ui-surface-muted); }
.category-pill[aria-pressed="true"] { background: var(--howard-blue-deep); border-color: var(--howard-blue-deep); color: white; }
.building-filters__color-option { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; font-size: 0.75rem; cursor: pointer; }
.building-filters__color-option input { width: 18px; height: 18px; accent-color: var(--howard-blue-deep); }

.category-pill__count {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
}
/* Hidden until loadCategoryFilterCounts() fills it in, so pills don't show an empty
   badge-shaped blob while the queryFeatureCount() calls are still in flight. */
.category-pill__count:empty { display: none; }
.category-pill[aria-pressed="true"] .category-pill__count {
  background: rgba(255, 255, 255, 0.65);
  color: var(--ink);
}

@media (max-width: 720px) {
  .sustain-sidebar {
    width: 100%;
    height: auto;
    max-height: 55svh;
    top: auto;
    bottom: 0;
    border-radius: 16px 16px 0 0;
    border-right: none;
    border-top: 1px solid var(--ui-border);
    z-index: 18;
  }
  .sustain-sidebar.closed { transform: translateY(100%); }
  .sustain-sidebar__header { border-top: 0; }
  .status { left: 1rem; max-width: calc(100vw - 2rem); }
  .record-panel { width: 100%; max-width: 100%; height: 45svh; top: auto; bottom: 0; border-radius: 16px 16px 0 0; transform: translateY(100%); }
  .feature-search, body.sustain-sidebar-closed .feature-search, body.record-panel-open .feature-search {
    left: 1rem; right: 1rem; top: 1rem; max-width: none;
  }
  /* Mobile keeps search full-width (design brief), so navigation controls move back
     below it instead of sharing the top row — see .map-navigation rules further down. */
  .feature-search input { font-size: 1rem; }
  .feature-search__panel { max-height: calc(100svh - 9rem); }
  body.feature-search-open .sustain-sidebar__toggle { visibility: hidden; }
  .sustain-sidebar__toggle, body.sustain-sidebar-closed .sustain-sidebar__toggle {
    display: flex; top: 4.5rem; left: 1rem; transform: none;
    width: auto; height: 44px; gap: 0.65rem; padding: 0 1rem; border-radius: 999px;
    background: var(--howard-blue-deep); font: 700 0.85rem var(--hu-sans);
  }
  .sustain-sidebar__toggle-label { display: inline; }
  .sustain-sidebar__toggle svg { transform: rotate(-90deg); }
  body.sustain-sidebar-closed .sustain-sidebar__toggle svg { transform: rotate(90deg); }
  .sustain-sidebar__body { flex: none; }
  .sustain-group__label { font-size: 0.85rem; }
  body:not(.sustain-sidebar-closed) .status { bottom: calc(55svh + 0.5rem); }
  body.record-panel-open.sustain-sidebar-closed .status { bottom: calc(45svh + 0.5rem); }
  .record-panel__close { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .map-veil__bison { animation: none; }
  .status { animation: none; }
  *, *::before, *::after { transition: none !important; }
}

/* Map navigation — icon buttons in the top-right control stack, per the design
   brief (search top-left/top-center, navigation top-right, sidebar/legend left).
   Sidebar colors and source renderers stay as configured. On mobile the search bar
   goes full-width instead (brief: "compact full-width bar at the top"), so navigation
   drops back to a lower-right stack — clearing the ArcGIS zoom+compass cluster
   (~97px tall from the view edge) the same way it did before this pass. */
.map-navigation { position: fixed; z-index: 20; top: 1rem; right: 16px; display: flex; flex-direction: column; gap: 4px; transition: right var(--chrome-transition) var(--motion-standard), bottom var(--chrome-transition) var(--motion-standard), width .15s ease; }
body.record-panel-open .map-navigation { right: 336px; }
.map-navigation button {
  width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: white; border: 1px solid var(--ui-border); border-radius: 8px;
  color: var(--howard-blue-deep); cursor: pointer; box-shadow: 0 3px 16px rgba(0, 38, 65, 0.12);
}
.map-navigation button:hover { background: var(--ui-surface-muted); }
.map-navigation button:disabled { color: var(--text-secondary); cursor: default; }
.map-navigation button:disabled:hover { background: white; }
.map-navigation button:focus-visible { outline: 2px solid var(--howard-blue-deep); outline-offset: -2px; }

@media (max-width: 720px) {
  .map-navigation, body.record-panel-open .map-navigation { top: auto; right: 16px; bottom: 128px; }
  .status { max-width: calc(100vw - 160px); }
  body:not(.sustain-sidebar-closed) .map-navigation { bottom: calc(55svh + 8px); }
  body.record-panel-open.sustain-sidebar-closed .map-navigation { bottom: calc(45svh + 8px); }
}

.record-panel__contact[hidden] { display: none; }

/* Keep source-backed facts distinct from general guidance. */
.record-panel__guidance { margin: 0 0 1.1rem; padding: .8rem; background: var(--ui-surface-muted); }
.record-panel__guidance h3 { margin: 0 0 .4rem; font-size: .8rem; }
.record-panel__guidance p { margin: 0; font-size: .85rem; line-height: 1.6; }
.record-panel__guidance[hidden], .feature-result__duplicates[hidden] { display: none; }
.map-key { padding: .6rem 1rem; border-bottom: 1px solid var(--ui-border); }
.map-key label { display: block; font-size: .8rem; margin: .5rem 0; }
.map-key select { width: 100%; min-height: 44px; font: inherit; background: var(--ui-surface); color: var(--ink); border: 1px solid var(--ui-border); border-radius: 6px; }
.map-key p, .building-count-note { font-size: .75rem; line-height: 1.5; color: var(--text-secondary); }
.map-key arcgis-legend { width: 100%; --calcite-font-size--1: .8rem; }
.building-count-note { padding: 0 1rem; }
.feature-result__duplicates { padding: 0 .75rem .5rem; }
.feature-result__duplicates summary { cursor: pointer; min-height: 44px; align-content: center; font-size: .78rem; color: var(--text-secondary); }
#feature-search-clear { flex: 0 0 32px; padding: 0; background: transparent; color: var(--text-secondary); font-size: 1.3rem; }
#feature-search-input:placeholder-shown ~ #feature-search-clear { display: none; }
select:focus-visible { outline: 3px solid var(--howard-blue-deep); outline-offset: 3px; }

/* Map tools are labelled and independent of the scrolling layer list. */
.map-navigation { padding: 4px; background: #fff; border: 1px solid #668296; border-radius: 12px; box-shadow: 0 4px 18px #00264126; }
/* Map controls are icon-only at rest and the card hugs the icons. Like the Legend, the card
   itself opens on hover (or keyboard focus): it widens leftwards to show both labels, with no
   filled highlight. Hover styles are limited to devices that have hover, so a touch tap stays a
   single tap. */
.map-navigation { box-sizing: border-box; width: 54px; }
.map-navigation button { width: 100%; gap: 8px; justify-content: flex-start; padding: 0 12px; overflow: hidden; white-space: nowrap; border: 0; box-shadow: none; font: 600 .75rem "Open Sans", sans-serif; }
.map-navigation button svg { flex: 0 0 20px; }
.map-navigation button span { opacity: 0; transition: opacity .1s ease; }
.map-navigation:has(:focus-visible) { width: 172px; }
.map-navigation:has(:focus-visible) button span { opacity: 1; }
@media (hover: hover) {
  .map-navigation:hover { width: 172px; }
  .map-navigation:hover button span { opacity: 1; }
}
.map-key { position: fixed; z-index: 23; top: 126px; right: 16px; transition: right var(--chrome-transition) var(--motion-standard), bottom var(--chrome-transition) var(--motion-standard); padding: 4px; border: 1px solid #668296; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 4px 18px #00264126; }
body.record-panel-open .map-key { right: 336px; }
/* Legend: only the button shows at rest. data-open is the single visibility switch; it is
   set by initMapLegendDisclosure() (hover, keyboard focus, touch tap). */
.map-key__toggle { display: flex; gap: 8px; align-items: center; justify-content: flex-start; width: 44px; min-height: 44px; padding: 0 13px; overflow: hidden; white-space: nowrap; transition: width .15s ease; border: 0; border-radius: 8px; background: transparent; color: var(--howard-blue-deep); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.map-key__toggle::after { content: "+"; font-size: 1rem; }
.map-key[data-open="true"] .map-key__toggle::after { content: "−"; }
.map-key[data-open="true"] .map-key__toggle { width: 116px; background: var(--howard-blue-deep); color: white; }
.map-key__toggle svg { flex: 0 0 18px; }
.map-key__toggle span, .map-key__toggle::after { opacity: 0; transition: opacity .1s ease; }
.map-key[data-open="true"] .map-key__toggle span, .map-key[data-open="true"] .map-key__toggle::after { opacity: 1; }
.map-key__toggle:focus-visible { outline: 3px solid var(--howard-blue-deep); outline-offset: 3px; }
.map-key__content { position: absolute; right: -1px; top: calc(100% + 8px); width: min(300px, calc(100vw - 32px)); max-height: calc(100svh - 210px); overflow: auto; overscroll-behavior: contain; padding: 16px; background: #fff; border: 1px solid #668296; border-radius: 12px; box-shadow: 0 8px 24px #00264126; }
.map-key__content { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .12s ease, visibility 0s linear .12s; }
.map-key[data-open="true"] .map-key__content { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
.map-key__intro { margin-top: 0; font-weight: 700; color: var(--howard-blue-deep) !important; }
.basemap-card { margin: 16px; padding: 14px; border: 1px solid #668296; border-radius: 10px; background: #f1f6f8; }
.basemap-card h2 { margin: 0 0 10px; font-size: .9rem; color: var(--howard-blue-deep); }
.basemap-card label { display: block; font-size: .75rem; margin-bottom: 6px; }
.basemap-card select { width: 100%; min-height: 44px; padding: 0 10px; background: white; border: 1px solid #668296; border-radius: 6px; font: inherit; color: var(--ink); }
.basemap-card p { font-size: .75rem; line-height: 1.5; }
.basemap-card p:empty { display: none; }
@media (min-width: 721px) {
  .feature-search { right: 88px; }
  body.record-panel-open .feature-search { right: 408px; }
}
@media (max-width: 720px) {
  .map-key, body.record-panel-open .map-key { top: auto; bottom: 128px; right: auto; left: 16px; }
  body:not(.sustain-sidebar-closed) .map-key { bottom: calc(55svh + 8px); }
  body.record-panel-open.sustain-sidebar-closed .map-key { bottom: calc(45svh + 8px); }
  .map-key__content { top: auto; bottom: calc(100% + 8px); right: auto; left: -1px; max-height: min(36svh, 320px); }
}
@media (max-width: 720px) {
  body:not(.sustain-sidebar-closed) .map-key__content { max-height: max(80px, calc(45svh - 190px)); }
  body.record-panel-open.sustain-sidebar-closed .map-key__content { max-height: max(80px, calc(55svh - 190px)); }
}


/* ── Fit the screen (2026-10-20) ─────────────────────────────────────────────
   Desktop: the sidebar no longer scrolls as a whole. Header, Select all / Clear all and
   the hint stay in view and only the layer list scrolls. On short windows the helper
   text gives way first. The record panel is tightened so most popups fit without scrolling;
   a long description still scrolls inside the panel, never truncated. */
@media (min-width: 721px) {
  .sustain-sidebar { overflow-y: hidden; }
  .sustain-sidebar__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .sustain-sidebar__header, .sustain-sidebar__intro, .sustain-sidebar__footer { flex: none; }
  .record-panel__badge { margin: 0 0.4rem 0.35rem 0; }
  .record-panel__layer { display: inline-block; margin: 0 0 0.35rem; min-height: 28px; vertical-align: top; }
  .record-panel__title { margin-bottom: 0.7rem; }
  .record-panel__description { line-height: 1.55; margin-bottom: 0.9rem; }
}
@media (min-width: 721px) and (max-height: 780px) {
  .sustain-sidebar__header { padding: 0.8rem 1.25rem 0.6rem; }
  .sustain-sidebar__intro { padding: 0.6rem 1rem; }
  .sustain-sidebar__intro > span, .sustain-sidebar__footer { display: none; }
  .sustain-sidebar__intro p { margin-bottom: 0; }
  .sustain-sidebar__actions { margin-top: 0.4rem; }
}

/* Hover card for every non-live layer: same card as bikeshare, name + one fact. */
.feature-hover { width: auto; min-width: 140px; max-width: 260px; }
.feature-hover .bikeshare-hover__name { margin-bottom: 0; }
.feature-hover [hidden] { display: none; }