* { box-sizing: border-box; }

[hidden] {
  display: none !important;
}

:root {
  --howard-blue:      #123A72;
  --howard-blue-deep: #0B274E;
  --howard-red:       #B12A3A;
  --howard-red-deep:  #7E1726;
  --heritage-gold:    #C8A24A;
  --parchment:        #F3E9D7;
  --cream:            #FFF8EE;
  --paper:            rgba(250, 243, 231, 0.95);
  --paper-strong:     rgba(255, 248, 238, 0.98);
  --ink:              #1B2C47;
  --stone:            #697284;
  --shadow:           rgba(11, 39, 78, 0.24);
  --ui-border:         rgba(18, 58, 114, 0.14);
  --ui-border-strong:  rgba(18, 58, 114, 0.26);
  --ui-surface:        #ffffff;
  --ui-surface-muted:  #F7F9FC;
  --hu-sans:          "Open Sans", "Segoe UI", system-ui, sans-serif;
  --hu-serif:         "Serif12Beta", Georgia, "Times New Roman", serif;
}

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

body {
  overflow: hidden;
  background: #ffffff;
  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;
}

:where(button, input):focus-visible {
  outline: 3px solid var(--heritage-gold);
  outline-offset: 2px;
}

/* ── App shell ──────────────────────────────────────────────────────── */
.campus-app {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

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

#map {
  position: absolute;
  inset: 0;
}

/* ── Sidebar ────────────────────────────────────────────────────────── */
.hu-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  z-index: 15;
  box-shadow: 2px 0 14px rgba(11, 39, 78, 0.08);
  border-right: 1px solid var(--ui-border);
  border-radius: 0 20px 20px 0;
  overflow: hidden;
  container-type: inline-size;
  contain: layout style paint;
  transform: translateX(0);
  transition: transform 0.28s ease;
  font-family: var(--hu-sans);
  font-size-adjust: from-font;
}

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

/* Header */
.hu-sidebar__header {
  background: var(--howard-blue-deep);
  padding: 1.5rem 1.25rem 1.15rem;
  display: block;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.hu-sidebar__header::after {
  content: "1867";
  position: absolute;
  right: 1rem;
  bottom: -0.6rem;
  font-family: var(--hu-serif);
  font-size: clamp(2.7rem, 10.5cqi, 3.2rem);
  line-height: 1;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.hu-sidebar__titles {}

.hu-sidebar__eyebrow {
  margin: 0 0 0.32rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hu-sidebar__mapname {
  font-family: var(--hu-serif);
  color: #ffffff;
  font-size: clamp(1.75rem, 6.4cqi, 2.05rem);
  font-size-adjust: from-font;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 0.98;
}

.hu-sidebar__tagline {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.78rem;
  margin: 0.3rem 0 0;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Navy-to-red accent stripe */
.hu-sidebar__accent-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--heritage-gold) 0 16%, var(--howard-blue) 16% 68%, var(--howard-red) 68% 100%);
  flex-shrink: 0;
  opacity: 0.85;
}

/* ── Sidebar tab bar ─────────────────────────────────────────────────── */
.sidebar-tabs {
  display: flex;
  flex-shrink: 0;
  background: #ffffff;
  border-bottom: 1px solid rgba(18, 58, 114, 0.1);
  padding: 0 0.25rem;
}

.sidebar-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.82rem 0.4rem 0.74rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: #9AABBD;
  font-family: var(--hu-sans);
  cursor: pointer;
  transition: color 0.14s, border-color 0.14s;
}
.sidebar-tab:hover {
  color: var(--howard-blue-deep, #123A72);
}
.sidebar-tab.active {
  color: var(--howard-blue-deep, #123A72);
  border-bottom-color: var(--heritage-gold, #C8A24A);
}
.sidebar-tab__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
}
.sidebar-tab__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

/* ── Tab panels ──────────────────────────────────────────────────────── */
.sidebar-panels {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sidebar-tab-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.sidebar-tab-panel.active {
  display: flex;
}

.sidebar-tab-panel--explore {
  overflow-y: auto;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcff 24%, #ffffff 100%);
  scrollbar-gutter: stable;
}
.sidebar-tab-panel--explore::-webkit-scrollbar { width: 4px; }
.sidebar-tab-panel--explore::-webkit-scrollbar-track { background: transparent; }
.sidebar-tab-panel--explore::-webkit-scrollbar-thumb {
  background: rgba(18, 58, 114, 0.18);
  border-radius: 2px;
}


/* ── Tour tab ────────────────────────────────────────────────────────── */
.tour-header {
  flex-shrink: 0;
  padding: 0.82rem 1rem 0.78rem;
  border-bottom: 1px solid rgba(18, 58, 114, 0.08);
  background: #f8fafd;
}
.tour-header__title {
  margin: 0 0 0.22rem;
  font-family: var(--hu-serif);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.12;
  color: var(--howard-blue-deep, #123A72);
}
.tour-header__desc {
  margin: 0 0 0.68rem;
  font-size: 0.74rem;
  line-height: 1.48;
  color: #65758C;
}
.tour-header__actions {
  display: flex;
  gap: 0.45rem;
  align-items: stretch;
  flex-wrap: wrap;
}
.tour-start-btn,
.tour-secondary-btn--danger,
.tour-next-btn {
  min-height: 34px;
  padding: 0.52rem 1rem;
  border-radius: 7px;
  font-family: var(--hu-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.tour-start-btn {
  flex: 1 1 100%;
  background: var(--howard-blue-deep, #123A72);
  color: #fff;
  border: none;
}
.tour-start-btn:hover { background: #0d2d5c; }
.tour-secondary-btn--danger {
  flex: 1 1 0;
  border: 1px solid rgba(177, 42, 58, 0.22);
  background: #ffffff;
  color: var(--howard-red);
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.tour-secondary-btn--danger:hover {
  background: rgba(177, 42, 58, 0.04);
  border-color: rgba(177, 42, 58, 0.35);
}
.tour-list-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.tour-list__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(18, 58, 114, 0.08);
  background: #ffffff;
  color: #4A5D78;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tour-list__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(18, 58, 114, 0.07);
  color: #4A5D78;
  font-size: 0.65rem;
}
.tour-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-left: 0;
  scrollbar-gutter: stable;
}
.tour-list::-webkit-scrollbar { width: 4px; }
.tour-list::-webkit-scrollbar-track { background: transparent; }
.tour-list::-webkit-scrollbar-thumb {
  background: rgba(18, 58, 114, 0.18);
  border-radius: 2px;
}
.tour-stop {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  padding: 0.88rem 1rem;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(18, 58, 114, 0.06);
  text-align: left;
  cursor: pointer;
  font-family: var(--hu-sans);
  transition: background-color 0.12s, border-color 0.12s;
  position: relative;
}
.tour-stop:hover { background: #F5F8FD; }
.tour-stop.active {
  background: #F4F7FB;
  border-left: 3px solid var(--howard-blue);
  border-bottom-color: rgba(18, 58, 114, 0.1);
}
.tour-stop__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.tour-stop__name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1C2D45;
  line-height: 1.25;
}
.tour-stop.active .tour-stop__name { color: var(--howard-blue-deep, #123A72); }
.tour-stop__desc {
  font-size: 0.72rem;
  line-height: 1.45;
  color: #65758C;
  text-wrap: pretty;
}
.tour-stop__label {
  align-self: flex-start;
  padding: 0.15rem 0.42rem;
  border-radius: 999px;
  background: rgba(18, 58, 114, 0.06);
  color: #53637B;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tour-stop__arrow {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 0.28rem;
  color: #C8D4E3;
  transition: color 0.12s;
}
.tour-stop:hover .tour-stop__arrow,
.tour-stop.active .tour-stop__arrow { color: var(--howard-blue-deep, #123A72); }

/* ── Sustainability tab panel ─────────────────────────────────────────── */
.sidebar-tab-panel--sustain {
  overflow: hidden;        /* panel clips; .sustain-categories scrolls */
  flex-direction: column;
  background: #ffffff;
}

.sustain-header {
  flex-shrink: 0;
  padding: 1.1rem 1rem 1rem;
  border-bottom: 1px solid rgba(18, 58, 114, 0.08);
  background: #f8fafd;
  flex-shrink: 0;
}
.sustain-header__eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--howard-red);
}
.sustain-header__title {
  margin: 0 0 0.42rem;
  font-family: var(--hu-serif);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--howard-blue-deep);
}
.sustain-header__desc {
  margin: 0;
  font-size: 0.77rem;
  line-height: 1.58;
  color: #55657D;
  text-wrap: pretty;
}

.sustain-categories {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  overflow-anchor: none;
  scrollbar-gutter: stable;
  padding: 0.4rem 0 1.5rem;
}
.sustain-categories::-webkit-scrollbar { width: 4px; }
.sustain-categories::-webkit-scrollbar-track { background: transparent; }
.sustain-categories::-webkit-scrollbar-thumb {
  background: rgba(18, 58, 114, 0.18);
  border-radius: 2px;
}
.sustain-cat {
  display: flex;
  align-items: center;
  gap: 0.88rem;
  width: 100%;
  padding: 0.88rem 1rem;
  border-bottom: 1px solid rgba(18, 58, 114, 0.06);
  border-left: 0;
  border-right: 0;
  border-top: 0;
  background: transparent;
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: background 0.12s;
}
.sustain-cat:hover { background: #f5f8fd; }
.sustain-cat--button {
  cursor: pointer;
}
.sustain-cat--button.active {
  background: rgba(192, 96, 32, 0.08);
}
.sustain-cat--button.active .sustain-cat__badge {
  background: rgba(192, 96, 32, 0.14);
  color: #8F3F12;
}
.sustain-layer {
  border-bottom: 1px solid rgba(18, 58, 114, 0.06);
}
.sustain-layer__row {
  display: flex;
  align-items: stretch;
  background: transparent;
}
.sustain-layer.active .sustain-layer__row {
  background: rgba(192, 96, 32, 0.08);
}
.sustain-layer .sustain-cat {
  flex: 1;
  min-width: 0;
  border-bottom: 0;
  padding-right: 0.55rem;
}
.sustain-layer .sustain-cat:hover {
  background: rgba(192, 96, 32, 0.08);
}
.sustain-cat__chevron {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  color: #8F3F12;
  transition: transform 0.16s ease;
}
.sustain-cat--expand.expanded .sustain-cat__chevron {
  transform: rotate(180deg);
}
.sustain-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 0.92rem 0 0.35rem;
  cursor: pointer;
}
.sustain-switch__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.sustain-switch__track {
  position: relative;
  width: 2.42rem;
  height: 1.34rem;
  border: 1px solid rgba(143, 63, 18, 0.36);
  border-radius: 999px;
  background: #E8DED4;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.sustain-switch__thumb {
  position: absolute;
  top: 50%;
  left: 0.16rem;
  width: 0.92rem;
  height: 0.92rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(65, 32, 12, 0.28);
  transform: translateY(-50%);
  transition: transform 0.16s ease;
}
.sustain-switch__input:checked + .sustain-switch__track {
  border-color: #8F3F12;
  background: #C06020;
}
.sustain-switch__input:checked + .sustain-switch__track .sustain-switch__thumb {
  transform: translate(1.05rem, -50%);
}
.sustain-switch__input:focus-visible + .sustain-switch__track {
  outline: 2px solid #8F3F12;
  outline-offset: 2px;
}
.sustain-cat__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--cat, #123A72);
}
.sustain-cat__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
}
.sustain-cat__name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--howard-blue-deep, #123A72);
  line-height: 1.25;
}
.sustain-cat__desc {
  font-size: 0.7rem;
  color: #65758C;
  line-height: 1.42;
}
.sustain-cat__badge {
  flex-shrink: 0;
  padding: 0.2rem 0.52rem;
  border-radius: 999px;
  background: rgba(18, 58, 114, 0.06);
  color: #7A8BA3;
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sustain-layer-list {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.38rem 0.65rem 0.72rem 2.35rem;
  border-bottom: 1px solid rgba(18, 58, 114, 0.06);
  background: rgba(192, 96, 32, 0.045);
  overflow-anchor: none;
}

.sustain-location {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
}

.sustain-location--button-only {
  grid-template-columns: minmax(0, 1fr);
}

.sustain-location.is-disabled .sustain-location__button {
  opacity: 0.54;
}

.sustain-location__check {
  width: 0.92rem;
  height: 0.92rem;
  margin: 0;
  accent-color: var(--location-color, #C06020);
}

.sustain-location__button {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sustain-location__button:hover,
.sustain-location__button[aria-pressed="true"] {
  border-color: rgba(192, 96, 32, 0.18);
  background: rgba(255, 255, 255, 0.72);
}

.sustain-location__button:focus-visible {
  outline: 2px solid var(--location-color, #C06020);
  outline-offset: 2px;
}

/* ── Dining category sub-headers ─────────────────────────────────────── */
.dining-category-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem 0.25rem;
  margin-top: 0.35rem;
  border-top: 1px solid rgba(18, 58, 114, 0.08);
}
.dining-category-header:first-child {
  border-top: none;
  margin-top: 0;
}
.dining-category-header__icon {
  font-size: 0.82rem;
  line-height: 1;
  color: var(--location-color, var(--howard-blue-deep, #123A72));
}
.dining-category-header__label {
  font-size: 0.67rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--howard-blue-deep, #123A72);
  opacity: 0.7;
}

/* ── Dining list thumbnail (replaces the coloured swatch) ──────────── */
.sustain-location__thumb {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 6px;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--location-color, #C06020);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sustain-location__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sustain-location__thumb--text {
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
}
/* Solar panel thumb — lightweight vector status icon */
.sustain-location__thumb--solar {
  background: var(--location-color, #C8A24A);
  color: #fff;
}
.sustain-location__thumb--solar svg {
  flex-shrink: 0;
}
/* ── Transportation / sustain-group parent ────────────────────────────── */
.sustain-group {
  border-bottom: 1px solid rgba(18, 58, 114, 0.10);
}
.sustain-group__header {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  width: 100%;
  padding: 0.78rem 1rem 0.78rem 0.85rem;
  background: rgba(18, 58, 114, 0.04);
  border: 0;
  color: #123A72;
  font: inherit;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.sustain-group__header:hover { background: rgba(18, 58, 114, 0.09); }
.sustain-group__icon {
  flex: 0 0 auto;
  color: #1A5276;
}
.sustain-group__label {
  flex: 1;
}
.sustain-group__header .sustain-cat__chevron {
  color: #123A72;
}
.sustain-group__header[aria-expanded="false"] .sustain-cat__chevron {
  transform: rotate(-90deg);
}
.sustain-group__body {
  border-top: 1px solid rgba(18, 58, 114, 0.06);
}
/* Sub-layer indentation */
.sustain-sublayer .sustain-cat,
.sustain-sublayer.sustain-cat {
  padding-left: 1.6rem;
}
.sustain-sublayer__bullet {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cat, #6B7280);
  flex: 0 0 auto;
  margin-right: 0.2rem;
}
.sustain-sublayer--soon {
  opacity: 0.6;
}
.sustain-sublayer-list {
  padding-left: 1.6rem;
}

/* Bike rack thumb — bicycle SVG icon */
.sustain-location__thumb--bike-rack {
  background: var(--location-color, #2D6A4F);
  color: #fff;
}
.sustain-location__thumb--bike-rack svg {
  flex-shrink: 0;
}

/* Trash bin thumb — trash can SVG icon */
.sustain-location__thumb--trash-bin {
  background: var(--location-color, #5F7A3A);
  color: #fff;
}
.sustain-location__thumb--trash-bin svg {
  flex-shrink: 0;
}

/* Bench thumb — user-provided bench photo */
.sustain-location__thumb--bench {
  background: #d7ddd2;
}

.sustain-location__thumb--recycle-bin {
  background: var(--location-color, #2D8A72);
  color: #fff;
}
.sustain-location__thumb--recycle-bin svg {
  flex-shrink: 0;
}

/* Bike lane legend */
.bike-lane-legend {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem 0.65rem 2.25rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.bike-lane-legend__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  color: var(--text-secondary, #555);
}
.bike-lane-legend__swatch {
  flex-shrink: 0;
  width: 1.8rem;
  height: 4px;
  border-radius: 2px;
}
.bike-lane-legend__swatch--dashed {
  background: repeating-linear-gradient(
    to right,
    #F5A623 0, #F5A623 6px,
    transparent 6px, transparent 10px
  ) !important;
}
.bike-lane-legend__label {
  line-height: 1;
}

/* Capital Bikeshare station thumb */
.sustain-location__thumb--bikeshare {
  background: var(--location-color, #E8003D);
  color: #fff;
}
.sustain-location__thumb--bikeshare svg {
  flex-shrink: 0;
}

/* Metro Bus Stop thumb */
.sustain-location__thumb--bus-stop {
  background: var(--location-color, #E57200);
  color: #fff;
}
.sustain-location__thumb--bus-stop svg {
  flex-shrink: 0;
}

/* Metro Station thumb */
.sustain-location__thumb--metro {
  /* background set inline per-station (line color) */
  color: #fff;
}
.sustain-location__thumb--metro svg {
  flex-shrink: 0;
}

/* LEED / Green Certified Buildings thumb — building/layers SVG icon */
.sustain-location__thumb--leed {
  background: var(--location-color, #1A7340);
  color: #fff;
}
.sustain-location__thumb--leed svg {
  flex-shrink: 0;
}

.sustain-location__swatch {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--location-color, #C06020);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
}

.sustain-location__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
}

.sustain-location__name {
  overflow: hidden;
  color: var(--howard-blue-deep, #123A72);
  font-size: 0.74rem;
  font-weight: 750;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sustain-location__meta {
  overflow: hidden;
  color: #6E7B8F;
  font-size: 0.62rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ── Tour control buttons ────────────────────────────────────────────── */
.tour-next-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex: 1 1 0;
  background: var(--howard-blue-deep, #123A72);
  color: #fff;
  border: none;
  white-space: nowrap;
  transition: background-color 0.12s;
}
.tour-next-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}
.tour-next-btn:hover { background: #0d2d5c; }
.tour-next-btn:disabled {
  background: #8A9BB5;
  cursor: default;
}
.tour-next-btn.end-tour {
  background: var(--howard-red, #B12A3A);
}

/* Search */
.hu-sidebar__search-wrap {
  position: relative;
  padding: 0.9rem 0.95rem 0.85rem;
  border-bottom: 1px solid rgba(18, 58, 114, 0.08);
  background: #ffffff;
  flex-shrink: 0;
}

.sidebar-tab-panel--explore .hu-sidebar__search-wrap {
  padding-top: 0.82rem;
  padding-bottom: 0.8rem;
}

.hu-sidebar__search-icon {
  position: absolute;
  left: 1.55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  color: var(--stone);
  pointer-events: none;
}

.hu-sidebar__search-input {
  width: 100%;
  min-height: 46px;
  padding: 0.72rem 6.75rem 0.72rem 2.35rem;
  border: 1px solid rgba(18, 58, 114, 0.14);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-size-adjust: from-font;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #F8FAFD 100%);
  box-shadow: 0 1px 2px rgba(11, 39, 78, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  outline: none;
  transition: border-color 0.12s, background-color 0.12s, box-shadow 0.12s;
  font-family: var(--hu-sans);
}

.hu-sidebar__search-input::placeholder {
  color: #6F7D91;
  font-weight: 500;
}

.hu-sidebar__search-input:focus {
  border-color: var(--howard-blue);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(18, 58, 114, 0.11), 0 1px 2px rgba(11, 39, 78, 0.06);
}

.hu-sidebar__directions-toggle {
  position: absolute;
  top: 50%;
  right: 1.18rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 82px;
  height: 28px;
  padding: 0 0.54rem;
  border: 1px solid rgba(18, 58, 114, 0.18);
  border-radius: 999px;
  background: #ffffff;
  color: var(--howard-blue);
  font-family: var(--hu-sans);
  font-size: 0.69rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(11, 39, 78, 0.08);
  transition: border-color 0.12s, background-color 0.12s, color 0.12s, box-shadow 0.12s;
}

.hu-sidebar__directions-toggle svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.hu-sidebar__directions-toggle span {
  white-space: nowrap;
}

.hu-sidebar__directions-toggle:hover {
  border-color: rgba(18, 58, 114, 0.42);
  background: #F9FBFE;
  box-shadow: 0 2px 4px rgba(11, 39, 78, 0.1);
}

.hu-sidebar__directions-toggle[aria-expanded="true"] {
  border-color: var(--howard-blue);
  background: var(--howard-blue);
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(18, 58, 114, 0.18);
}

.hu-sidebar__directions-toggle:active {
  transform: translateY(-50%);
}

.directions-panel {
  flex-shrink: 0;
  padding: 0.82rem 0.95rem 0.95rem;
  border-top: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
  background: #ffffff;
}

.directions-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.72rem;
}

.directions-panel__title {
  margin: 0;
  font-family: var(--hu-serif);
  font-size: 1.05rem;
  line-height: 1.15;
  color: var(--howard-blue-deep);
}

.directions-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: #ffffff;
  color: #3C4B61;
  cursor: pointer;
}

.directions-panel__close svg {
  width: 18px;
  height: 18px;
}

.directions-panel__close:hover {
  background: var(--ui-surface-muted);
}

.directions-form {
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
}

.directions-modes {
  display: flex;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.directions-mode {
  position: relative;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 38px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: #ffffff;
  color: #43516A;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s, color 0.12s;
}

.directions-mode input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.directions-mode svg {
  width: 17px;
  height: 17px;
}

.directions-mode:has(input:checked) {
  border-color: var(--howard-blue);
  background: #F3F6FA;
  color: var(--howard-blue-deep);
}

.directions-mode:has(input[value="cycling"]:checked) {
  border-color: rgba(15, 118, 110, 0.42);
  background: rgba(15, 118, 110, 0.08);
  color: #0F5F59;
}

.directions-mode:has(input[value="driving"]:checked) {
  border-color: rgba(177, 42, 58, 0.38);
  background: rgba(177, 42, 58, 0.08);
  color: var(--howard-red);
}

.directions-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  column-gap: 0.5rem;
  row-gap: 0.5rem;
  align-items: center;
}

.directions-field {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 0.62rem;
  width: 100%;
  min-height: 48px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--ui-border-strong);
  border-radius: 6px;
  background: #ffffff;
  color: #26364B;
  text-align: left;
  cursor: pointer;
}

.directions-field:hover,
.directions-field[aria-expanded="true"] {
  border-color: var(--howard-blue);
  background: var(--ui-surface-muted);
}

.directions-field[aria-expanded="true"] {
  border-bottom-color: var(--ui-border-strong);
  border-radius: 6px 6px 0 0;
  background: #ffffff;
}

.directions-field__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.54rem;
  font-weight: 900;
  flex-shrink: 0;
}

.directions-field__badge--start {
  background: #18864B;
}

.directions-field__badge--end {
  background: var(--howard-red);
}

.directions-field__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 700;
}

.directions-field-actions {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: -0.35rem;
  overflow: hidden;
  border: 1px solid var(--ui-border-strong);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: #ffffff;
  box-shadow: 0 8px 14px rgba(11, 39, 78, 0.1);
  z-index: 3;
}

.directions-action {
  display: flex;
  align-items: center;
  gap: 0.78rem;
  width: 100%;
  min-height: 52px;
  padding: 0.68rem 0.82rem;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color: var(--howard-blue);
  font-family: var(--hu-sans);
  font-size: 0.92rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.directions-action + .directions-action {
  border-top: 1px solid var(--ui-border);
}

.directions-action svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.directions-action:hover {
  background: var(--ui-surface-muted);
}

.directions-action--primary {
  background: var(--howard-blue);
  color: #ffffff;
}

.directions-action--primary:hover {
  background: #0d2d5c;
}

/* Typed search inside the A/B field dropdowns */
.directions-search {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--ui-border);
  background: #ffffff;
}

.directions-search__input {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.82rem;
  border: 0;
  background: transparent;
  color: var(--howard-blue);
  font-family: var(--hu-sans);
  font-size: 1rem;
  font-weight: 600;
}

.directions-search__input::placeholder {
  color: #8A93A3;
  font-weight: 500;
}

.directions-search__input:focus {
  outline: 2px solid var(--howard-blue);
  outline-offset: -2px;
}

.directions-suggestions {
  display: flex;
  flex-direction: column;
  max-height: 216px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--ui-border);
}

.directions-suggestion {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  min-height: 48px;
  padding: 0.52rem 0.82rem;
  border: 0;
  background: #ffffff;
  font-family: var(--hu-sans);
  text-align: left;
  cursor: pointer;
}

/* "Closest" chip on the top proximity-ranked suggestion */
.directions-suggestion__chip {
  position: absolute;
  top: 0.56rem;
  right: 0.72rem;
  padding: 0.16rem 0.52rem;
  border-radius: 999px;
  background: var(--howard-blue);
  color: #FFD100;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.directions-suggestion + .directions-suggestion {
  border-top: 1px solid var(--ui-border);
}

.directions-suggestion:hover,
.directions-suggestion:focus-visible {
  background: var(--ui-surface-muted);
}

.directions-suggestion__name {
  color: var(--howard-blue);
  font-size: 0.88rem;
  font-weight: 700;
}

.directions-suggestion__sub {
  color: #7D8796;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Discovery hint at the bottom of the A/B dropdowns */
.directions-field-hint {
  margin: 0;
  padding: 0.5rem 0.82rem 0.62rem;
  border-top: 1px solid var(--ui-border);
  background: var(--ui-surface-muted, #F5F6F8);
  color: #6F7680;
  font-family: var(--hu-sans);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.45;
}

.directions-swap {
  grid-column: 2;
  grid-row: 1 / span 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 82px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #7D8796;
  cursor: pointer;
}

.directions-swap svg {
  width: 20px;
  height: 20px;
}

.directions-swap:hover {
  border-color: var(--ui-border);
  background: var(--ui-surface-muted);
  color: var(--howard-blue);
}

.directions-status {
  min-height: 1.1rem;
  margin: -0.1rem 0 0;
  color: #62718A;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.45;
}

.directions-status.error {
  color: var(--howard-red);
}

/* Building list container */
.hu-sidebar__list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: #ffffff;
}

.sidebar-tab-panel--explore .hu-sidebar__list {
  flex: none;
  overflow: visible;
  border-bottom: 1px solid rgba(18, 58, 114, 0.08);
}

.hu-sidebar__list::-webkit-scrollbar { width: 4px; }
.hu-sidebar__list::-webkit-scrollbar-track { background: transparent; }
.hu-sidebar__list::-webkit-scrollbar-thumb {
  background: rgba(18, 58, 114, 0.18);
  border-radius: 2px;
}

/* ── Category sections ──────────────────────────────────────────────── */
.sidebar-category {
  border-bottom: 1px solid rgba(18, 58, 114, 0.07);
  content-visibility: auto;
  contain-intrinsic-size: auto 48px;
}

/* Categories with zero matches for the active search are hidden entirely,
   so headers never show a count over an empty section. */
.sidebar-category.search-empty {
  display: none;
}

@supports not (content-visibility: auto) {
  .sidebar-category {
    contain: layout style paint;
  }
}

.sidebar-category__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.9rem 0.6rem 0.82rem;
  cursor: pointer;
  background: #f5f7fb;
  border: none;
  border-top: 1px solid rgba(18, 58, 114, 0.06);
  width: 100%;
  text-align: left;
  user-select: none;
  transition: background 0.12s;
}

.sidebar-category__header:hover { background: #edf1f9; }

.sidebar-category__name {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4A5D78;
}

.sidebar-category__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255, 248, 238, 0.95);
}

.sidebar-category__count {
  font-size: 0.72rem;
  color: #6F7D91;
  font-weight: 700;
  margin-left: 0.1rem;
}

.sidebar-category__chevron {
  width: 11px;
  height: 11px;
  color: #6F7D91;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.sidebar-category.open .sidebar-category__chevron {
  transform: rotate(180deg);
}

.sidebar-category__items { display: none; }
.sidebar-category.open .sidebar-category__items { display: block; }

/* ── Building items ─────────────────────────────────────────────────── */
.sidebar-building {
  display: flex;
  align-items: center;
  gap: 0.68rem;
  padding: 0.7rem 0.9rem 0.7rem 0.82rem;
  cursor: pointer;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  width: 100%;
  text-align: left;
  position: relative;
  min-height: 50px;
  transition: background 0.12s, border-color 0.12s;
}

.sidebar-building:hover {
  background: #f0f4fc;
  border-left-color: rgba(200, 162, 74, 0.4);
}

.sidebar-building.active {
  background: var(--howard-blue-deep, #0B274E);
  border-left-color: var(--heritage-gold);
}

.sidebar-building.hidden { display: none; }

.sidebar-building__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(18, 58, 114, 0.08);
  color: var(--howard-blue-deep, #123A72);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.02em;
  transition: background 0.12s, color 0.12s;
}

.sidebar-building.active .sidebar-building__num {
  background: var(--howard-red);
  color: #ffffff;
}

.sidebar-building__name {
  font-size: 0.9rem;
  color: #1B2C47;
  line-height: 1.3;
  font-weight: 600;
  min-width: 0;
}

.sidebar-building.active .sidebar-building__name {
  color: #ffffff;
  font-weight: 600;
  padding-right: 0.6rem;
}

.sidebar-building.active::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--heritage-gold);
  position: absolute;
  right: 0.78rem;
  top: 50%;
  transform: translateY(-50%);
}

/* ── Sidebar footer ─────────────────────────────────────────────────── */
.hu-sidebar__footer {
  padding: 0.8rem 0.95rem 0.85rem;
  border-top: 1px solid rgba(18, 58, 114, 0.08);
  background: #F5F7FA;
  flex-shrink: 0;
}

.hu-sidebar__footer p {
  margin: 0;
  font-size: 0.72rem;
  color: #6F7D91;
  line-height: 1.6;
}

.hu-sidebar__footer p + p {
  margin-top: 0.2rem;
}

.hu-sidebar__footer em {
  font-family: var(--hu-serif);
  font-style: italic;
}

/* ── Sidebar toggle tab ─────────────────────────────────────────────── */
.hu-sidebar__toggle {
  position: fixed;
  top: 50%;
  left: 320px;
  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(11, 39, 78, 0.22);
  transition: left 0.28s ease, background 0.15s;
}

.hu-sidebar__toggle:hover { background: var(--howard-blue-deep); }

.campus-app.sidebar-closed .hu-sidebar__toggle { left: 0; }

.hu-sidebar__toggle svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  transition: transform 0.28s;
}

.campus-app.sidebar-closed .hu-sidebar__toggle svg {
  transform: rotate(180deg);
}

/* ── Howard logo overlay (tracks sidebar, sits on map canvas) ─────── */
.hu-branding {
  position: fixed;
  top: 1rem;
  left: calc(320px + 1rem); /* sits on white map canvas when sidebar is open */
  z-index: 20;
  pointer-events: none;
  transition: left 0.28s ease; /* matches sidebar animation */
}

.campus-app.sidebar-closed .hu-branding {
  left: 1rem;
}

.hu-branding__logo {
  width: 88px;
  height: auto;
  display: block;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.93);
  padding: 5px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

@media (max-width: 640px) {
  .hu-branding__logo { width: 70px; }
}

/* ── Map veil — hides raw base-style flash before custom mask renders ── */
/* Sits between the map canvas (z 0) and all UI chrome (z 20+).          */
/* JS removes the "ready" class on first map idle after initMapLayers.   */
#map-veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #ffffff;
  pointer-events: none;
  /* no transition on entry — must be instantly opaque */
}
#map-veil.ready {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

/* ── Status bar ─────────────────────────────────────────────────────── */
.status {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0.8rem 1rem;
  border-radius: 999px;
  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);
}

/* ── "Back to campus view" pill ─────────────────────────────────────── */
/* Shown after an overlay/building fly-to zooms the camera in, so users can
   step back to the wider view without hunting for the global Home button. */
.zoom-back-pill {
  position: fixed;
  bottom: 1.35rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(18, 58, 114, 0.94);
  color: #ffffff;
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(19, 35, 60, 0.3);
}

.zoom-back-pill:hover,
.zoom-back-pill:focus-visible {
  background: rgba(18, 58, 114, 1);
}

.zoom-back-pill:focus-visible {
  outline: 2px solid #FFD100;
  outline-offset: 2px;
}

.zoom-back-pill__icon {
  font-size: 0.95rem;
  line-height: 1;
}

@media (max-width: 640px) {
  .zoom-back-pill {
    bottom: calc(60px + 0.9rem); /* clear the mobile tab bar */
  }
}

/* ── Building hover preview ─────────────────────────────────────────── */
.building-hover-card {
  position: fixed;
  top: 0;
  left: 0;
  width: 205px;
  max-width: calc(100vw - 24px);
  z-index: 25;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 38px rgba(11, 39, 78, 0.28), 0 0 0 1px rgba(18, 58, 114, 0.1);
  pointer-events: auto;
  opacity: 0;
  translate: 0 6px;
  transition: opacity 0.14s ease, translate 0.14s ease;
  contain: layout style paint;
}

.building-hover-card.visible {
  opacity: 1;
  translate: 0 0;
}

.building-hover-card__media {
  position: relative;
  width: 100%;
  height: 112px;
  overflow: hidden;
  background: var(--howard-blue-deep);
}

.building-hover-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.building-hover-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 24% 18%, rgba(200, 162, 74, 0.36), transparent 30%),
    linear-gradient(150deg, var(--howard-blue-deep) 0%, var(--howard-blue) 60%, var(--howard-red-deep) 100%);
}

.building-hover-card__placeholder span {
  color: rgba(255, 248, 238, 0.22);
  font-size: 3.1rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.building-hover-card__body {
  padding: 0.54rem 0.64rem 0.62rem;
  border-top: 2px solid var(--heritage-gold);
}

.building-hover-card__meta {
  display: block;
  margin-bottom: 0.16rem;
  color: var(--howard-red);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-transform: uppercase;
}

.building-hover-card__name {
  display: block;
  color: var(--howard-blue-deep);
  font-family: var(--hu-serif);
  font-size: 0.9rem;
  line-height: 1.14;
  font-weight: 700;
}

@media (hover: none), (pointer: coarse), (max-width: 640px) {
  .building-hover-card {
    display: none;
  }
}

/* ── Right info panel ───────────────────────────────────────────────── */
.info-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 340px;
  height: 100%;
  z-index: 14;
  --category-color: var(--howard-blue);
  background: #ffffff;
  box-shadow: -4px 0 32px rgba(11, 39, 78, 0.12);
  border-left: 1px solid rgba(18, 58, 114, 0.08);
  contain: layout style paint;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  overflow: hidden;
  container-type: inline-size;
}

.info-panel.open {
  transform: translateX(0);
}

.info-panel__close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  color: var(--howard-blue-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  transition: background 0.15s, color 0.15s;
}

.info-panel__close:hover {
  background: var(--howard-red);
  color: #fff;
}

/* Image area */
.info-panel__image-wrap {
  width: 100%;
  height: 210px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  background: var(--howard-blue-deep);
}

.info-panel__image-wrap::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 72px;
  background: linear-gradient(180deg, rgba(11, 39, 78, 0), rgba(11, 39, 78, 0.62));
  pointer-events: none;
}

.info-panel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.info-panel__placeholder {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 22% 22%, rgba(200, 162, 74, 0.38), transparent 28%),
    linear-gradient(150deg, var(--howard-blue-deep) 0%, var(--howard-blue) 58%, var(--howard-red-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.info-panel__placeholder::before {
  content: "HU";
  position: absolute;
  top: 1.05rem;
  left: 1rem;
  color: rgba(255, 248, 238, 0.58);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.info-panel__placeholder-num {
  font-size: 5.3rem;
  font-weight: 800;
  color: rgba(255, 248, 238, 0.18);
  letter-spacing: -0.05em;
  user-select: none;
}

/* Scrollable body */
.info-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 1.08rem 1.15rem 1.45rem;
  border-top: 4px solid var(--category-color);
  scrollbar-gutter: stable;
}

.info-panel__body::-webkit-scrollbar { width: 4px; }
.info-panel__body::-webkit-scrollbar-track { background: transparent; }
.info-panel__body::-webkit-scrollbar-thumb {
  background: rgba(18, 58, 114, 0.28);
  border-radius: 2px;
}

.info-panel__kicker {
  margin: 0 0 0.56rem;
  color: var(--howard-red);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.info-panel__name {
  font-family: var(--hu-serif);
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--howard-blue-deep);
  line-height: 1.12;
  margin: 0 0 0.5rem;
  text-wrap: balance;
}

.info-panel__summary {
  margin: 0 0 0.65rem;
  font-size: 0.86rem;
  line-height: 1.58;
  color: #31425D;
  text-wrap: pretty;
}

.info-panel__campus-card,
.info-panel__section {
  margin: 0 0 0.6rem;
  padding: 0.62rem 0.78rem;
  background: #f8fafd;
  border: 1px solid rgba(18, 58, 114, 0.08);
  border-radius: 10px;
}

.info-panel__section-label {
  display: block;
  margin-bottom: 0.32rem;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--howard-red);
}

.info-panel__namesake {
  margin: 0 0 0.6rem;
  padding: 0.6rem 0.78rem;
  background: #ffffff;
  border: 1px solid rgba(18, 58, 114, 0.1);
  border-left: 3px solid var(--howard-blue-deep, #123A72);
  border-radius: 10px;
}
.info-panel__namesake-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--howard-blue-deep, #123A72);
  margin-bottom: 0.28rem;
}
.info-panel__namesake-text {
  margin: 0;
  font-size: 0.76rem;
  color: #374860;
  line-height: 1.5;
  text-wrap: pretty;
}

.info-panel__chapter {
  margin: 0;
  color: #43536E;
  font-size: 0.78rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.info-panel__history {
  font-size: 0.78rem;
  color: #526178;
  line-height: 1.65;
  margin: 0;
  text-wrap: pretty;
}

.info-panel__approx {
  font-size: 0.71rem;
  color: #7A4F00;
  font-style: normal;
  margin: 0.85rem 0 0;
  padding: 0.55rem 0.7rem;
  background: rgba(200, 140, 0, 0.10);
  border-left: 3px solid #C8A000;
  border-radius: 0 6px 6px 0;
  line-height: 1.5;
}

/* ── Get Directions CTA button ──────────────────────────────────────── */
.info-panel__footer-actions {
  flex-shrink: 0;
  padding: 0.95rem 1.15rem 1.2rem;
  background: #ffffff;
  border-top: 1px solid rgba(18, 58, 114, 0.08);
}

.info-panel__directions-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.72rem 1rem;
  background: var(--category-color, var(--howard-blue));
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--hu-sans);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.info-panel__directions-btn:hover {
  opacity: 0.88;
}

.info-panel__directions-btn:active {
  transform: scale(0.97);
  opacity: 0.75;
}

.info-panel__directions-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.info-panel__directions-btn svg {
  flex-shrink: 0;
}

/* ── Tour swipe hint (shown on mobile in tour mode) ─────────────────── */
.info-panel__tour-hint {
  display: none; /* shown only on mobile via media query */
}

@keyframes hint-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hint-pulse {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 1; }
}

.info-panel__mini {
  display: none;
}

/* ── Sheet drag handle (shown only on mobile) ────────────────────────── */
.sheet-handle {
  display: none;
  width: 44px;
  height: 5px;
  background: var(--heritage-gold);
  border-radius: 3px;
  margin: 10px auto 4px;
  flex-shrink: 0;
  opacity: 0.72;
  touch-action: pan-x; /* reserve vertical drag for the sheet, allow incidental horizontal motion */
}

/* ── Mobile bottom tab bar (hidden on desktop) ───────────────────────── */
.mobile-tab-bar {
  display: none; /* shown via mobile media query */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 35;
  background: var(--howard-blue-deep);
  border-top: 3px solid var(--heritage-gold);
  box-shadow: 0 -3px 22px rgba(11, 39, 78, 0.42);
  /* safe-area: home bar on iPhone */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-tab {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.45rem 0.25rem 0.3rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--hu-sans);
  cursor: pointer;
  transition: color 0.14s;
  -webkit-tap-highlight-color: transparent;
}

.mobile-tab:hover,
.mobile-tab.active {
  color: #ffffff;
}

/* Gold underline pill on active tab */
.mobile-tab.active::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  background: var(--heritage-gold);
  border-radius: 2px;
}

.mobile-tab__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke: currentColor;
}

.mobile-tab__label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.mobile-map-action {
  display: none;
}

/* ── Mobile scrim / backdrop ─────────────────────────────────────────── */
.mobile-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 28;
  background: rgba(11, 39, 78, 0.48);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

.mobile-scrim.visible { display: block; }

/* Peek bar is mobile-only — hidden everywhere except inside the mobile media query */
.sidebar-peek-bar { display: none; }

/* ── Mobile layout (≤640px) ──────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Show mobile-only elements */
  .sheet-handle    { display: block; }
  .mobile-tab-bar  { display: flex; }

  /* Enlarge the sidebar drag handle hit area on mobile */
  #sidebar-sheet-handle {
    min-height: 36px;
    padding: 14px 0 10px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pan-x;
  }
  /* The visual pill inside – keep it 44px wide */
  #sidebar-sheet-handle::after {
    content: "";
    display: block;
    width: 44px;
    height: 6px;
    background: var(--heritage-gold, #CFB53B);
    border-radius: 3px;
    opacity: 0.72;
  }
  /* Hide the old pill (now rendered via ::after) */
  #sidebar-sheet-handle.sheet-handle {
    background: transparent;
    height: auto;
  }

  /* Hide desktop-only elements */
  .hu-sidebar__toggle  { display: none !important; }
  .hu-sidebar__footer  { display: none; }
  .layers-control      { display: none; }
  .sidebar-tabs        { display: none; }
  .hu-sidebar__directions-toggle { display: none; }

  .hu-sidebar__search-input {
    padding-right: 1rem;
  }

  /* Compact Howard header — visible in the mobile bottom sheet */
  .hu-sidebar__header {
    display: block;
    padding: 0.64rem 1.15rem 0.58rem;
  }
  .hu-sidebar__header::after {
    font-size: 2.45rem;
    bottom: -0.46rem;
    right: 0.9rem;
  }
  .hu-sidebar__eyebrow {
    font-size: 0.58rem;
    margin-bottom: 0.12rem;
  }
  .hu-sidebar__mapname  { font-size: 1.18rem; }
  .hu-sidebar__tagline  { font-size: 0.64rem; margin-top: 0.12rem; }

  /* Gold/navy/red accent stripe */
  .hu-sidebar__accent-bar { display: block; height: 3px; }

  /* Logo always at left edge – no sidebar offset on mobile */
  .hu-branding,
  .campus-app.sidebar-closed .hu-branding { left: 1rem; }

  /* ── Sidebar → mobile nav bottom sheet ───────────────────────────── */
  .hu-sidebar,
  .hu-sidebar.closed {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: var(--mobile-nav-sheet-height, 75svh);
    /* last 60px overlapped by tab bar; content padded so it clears */
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0;
    border-right: none;
    z-index: 29;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -4px 24px rgba(11, 39, 78, 0.15);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .hu-sidebar.mobile-open { transform: translateY(0); }

  /* Peek state: sidebar partially visible above tab bar */
  .hu-sidebar.mobile-peek {
    transform: translateY(calc(var(--mobile-nav-sheet-height, 75svh) - var(--mobile-nav-sheet-peek-height, 140px) - env(safe-area-inset-bottom, 0px)));
    pointer-events: auto;
  }

  /* Peek bar – shown when sidebar is in peek state */
  .sidebar-peek-bar {
    display: none;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    gap: 12px;
    border-bottom: 1px solid rgba(18, 58, 114, 0.10);
    touch-action: pan-x;
  }
  .hu-sidebar.mobile-peek .sidebar-peek-bar {
    display: flex;
  }
  .sidebar-peek-bar__tab {
    display: none;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary, #555);
    font-size: 14px;
    font-weight: 500;
    flex: 1;
  }
  /* Show only the tab that matches the active panel */
  .hu-sidebar[data-active-tab="tab-explore"]        .sidebar-peek-bar__tab[data-peek-tab="tab-explore"],
  .hu-sidebar[data-active-tab="tab-tour"]           .sidebar-peek-bar__tab[data-peek-tab="tab-tour"],
  .hu-sidebar[data-active-tab="tab-sustainability"] .sidebar-peek-bar__tab[data-peek-tab="tab-sustainability"] {
    display: flex;
  }
  .sidebar-peek-bar__tab span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sidebar-peek-bar__tab svg {
    flex-shrink: 0;
    stroke: var(--brand-primary, #123a72);
    opacity: 0.7;
  }
  .sidebar-peek-search {
    position: relative;
    flex: 1;
    min-width: 0;
  }
  .sidebar-peek-search svg {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }
  .sidebar-peek-search__input {
    width: 100%;
    min-height: 38px;
    padding: 0.58rem 0.9rem 0.58rem 2.35rem;
    border: 1px solid rgba(18, 58, 114, 0.14);
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #F8FAFD 100%);
    box-shadow: 0 1px 2px rgba(11, 39, 78, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    color: var(--ink);
    font-family: var(--hu-sans);
    font-size: 0.9rem;
    font-weight: 600;
    outline: none;
  }
  .sidebar-peek-search__input::placeholder {
    color: #6F7D91;
    font-weight: 500;
  }
  .sidebar-peek-search__input:focus {
    border-color: var(--howard-blue);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(18, 58, 114, 0.11), 0 1px 2px rgba(11, 39, 78, 0.06);
  }
  /* "Begin Tour" mini button inside peek bar */
  .sidebar-peek-tour-btn {
    background: var(--brand-primary, #123a72);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
  }
  .sidebar-peek-tour-btn:active { opacity: 0.85; }

  /* ── Info panel → live-map building detail bottom sheet ─────────── */
  .info-panel {
    width: 100%;
    height: var(--mobile-info-panel-height, 62svh);
    max-height: calc(100svh - 84px);
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 24px 24px 0 0;
    border-left: none;
    border-top: none;
    z-index: 29;
    transform: translateY(100%);
    padding-bottom: 0;
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
      height 0.24s ease;
  }

  .info-panel.open { transform: translateY(0); }

  .info-panel.mobile-minimized {
    height: var(--mobile-info-panel-minimized-height, 118px);
    border-radius: 20px 20px 0 0;
  }

  .info-panel__image-wrap {
    height: 136px;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
  }

  .info-panel.mobile-minimized .sheet-handle,
  .info-panel.mobile-minimized .info-panel__close,
  .info-panel.mobile-minimized .info-panel__image-wrap,
  .info-panel.mobile-minimized .info-panel__body,
  .info-panel.mobile-minimized .info-panel__footer-actions {
    display: none;
  }

  .info-panel__body {
    padding: 0.82rem 1rem 1rem;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Tour swipe hint – shown on mobile when tour is active */
  .info-panel__tour-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin: 0 0 0.75rem;
    padding: 0.38rem 0.85rem;
    background: rgba(18, 58, 114, 0.07);
    border: 1px solid rgba(18, 58, 114, 0.14);
    border-radius: 20px;
    color: #123A72;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    animation: hint-fade-in 0.35s ease both, hint-pulse 2.4s ease-in-out 0.5s 3;
    user-select: none;
    -webkit-user-select: none;
  }

  .tour-hint__arrow {
    display: flex;
    align-items: center;
    opacity: 0.65;
  }

  .tour-hint__label {
    flex: 1;
    text-align: center;
  }

  .info-panel__mini {
    display: none;
    height: 100%;
    padding: 0.82rem 1rem calc(0.72rem + env(safe-area-inset-bottom, 0px));
    gap: 0.65rem;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
  }

  .info-panel.mobile-minimized .info-panel__mini {
    display: flex;
  }

  /* Drag pill at top of minimized strip — hints at pull-up gesture */
  .info-panel.mobile-minimized .info-panel__mini::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: rgba(18, 58, 114, 0.22);
    border-radius: 2px;
  }

  .info-panel__mini-main {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-family: var(--hu-sans);
    color: var(--howard-blue-deep);
  }

  .info-panel__mini-kicker {
    display: block;
    margin-bottom: 0.16rem;
    color: var(--howard-red);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .info-panel__mini-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.2;
  }

  .info-panel__mini-actions {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    flex-shrink: 0;
  }

  .info-panel__pill {
    min-height: 32px;
    padding: 0 0.72rem;
    border: 1px solid rgba(18, 58, 114, 0.18);
    border-radius: 999px;
    background: #ffffff;
    color: var(--howard-blue-deep);
    font-family: var(--hu-sans);
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
  }

  .info-panel__pill--primary {
    border-color: var(--howard-blue-deep);
    background: var(--howard-blue-deep);
    color: #ffffff;
  }

  /* building-active indicator no overlap with scrollbar */
  .sidebar-building.active::after { right: 0.55rem; }

  /* ── Map controls: float above tab bar by default ────────────────── */
  .mapboxgl-ctrl-bottom-right {
    bottom: calc(var(--mobile-home-bottom, 118px) + env(safe-area-inset-bottom, 0px)) !important;
    right: 0 !important;
    transition: bottom 0.28s ease !important;
  }

  .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-attrib {
    position: fixed !important;
    left: 10px !important;
    right: auto !important;
    bottom: calc(var(--mobile-attrib-bottom, 68px) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-map-action {
    position: fixed;
    right: 12px;
    bottom: calc(var(--mobile-location-bottom, 68px) + env(safe-area-inset-bottom, 0px));
    z-index: 24;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #ffffff;
    color: var(--howard-blue-deep);
    box-shadow: 0 1px 5px rgba(11, 39, 78, 0.28);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-map-action svg {
    width: 18px;
    height: 18px;
  }

  .mobile-map-action.active,
  .mobile-map-action[aria-expanded="true"] {
    background: var(--howard-blue-deep);
    color: #ffffff;
  }

  .mapboxgl-ctrl-bottom-right .hu-ctrl-group--home {
    border-radius: 8px;
    overflow: hidden;
  }

  .mapboxgl-ctrl-bottom-right .hu-ctrl-home {
    width: 38px !important;
    height: 38px !important;
  }

  /* Info panel drag handle: gold on navy image hero */
  .info-panel .sheet-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 10px 0 12px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    opacity: 0.85;
  }

  .info-panel .sheet-handle::after {
    content: "";
    width: 44px;
    height: 5px;
    background: var(--heritage-gold, #CFB53B);
    border-radius: 3px;
  }

  .info-panel__footer-actions {
    padding: 0.85rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), #ffffff 22px);
  }

}

/* ── User location marker (HTML Marker, pulsing blue dot) ──────────── */
.user-location-marker {
  width: 20px;
  height: 20px;
  background: #2563EB;
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.5), 0 0 0 2px rgba(37,99,235,0.18);
  cursor: default;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* Pulsing accuracy ring */
.user-location-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.18);
  animation: loc-pulse 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes loc-pulse {
  0%   { width: 20px;  height: 20px;  opacity: 0.7; }
  70%  { width: 64px;  height: 64px;  opacity: 0.1; }
  100% { width: 20px;  height: 20px;  opacity: 0; }
}

.route-planner-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  font-family: var(--hu-sans);
  font-size: 0.76rem;
  font-weight: 900;
  box-shadow: 0 1px 4px rgba(11, 39, 78, 0.24);
}

.route-planner-marker--start {
  background: #18864B;
}

.route-planner-marker--end {
  background: var(--howard-red);
}

.route-planner-marker span {
  line-height: 1;
}

/* ── Home control button ─────────────────────────────────────────────── */
.mapboxgl-ctrl-bottom-right {
  transition: right 0.28s ease;
}

@media (min-width: 641px) {
  .campus-app.panel-open .mapboxgl-ctrl-bottom-right {
    right: 340px;
  }
}

.hu-ctrl-home svg {
  display: block;
  width: 19px;
  height: 19px;
  margin: auto;
  stroke: #333;
}

/* ── Layers switcher ─────────────────────────────────────────────────── */
.layers-control {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 20;
  transition: right 0.28s ease;
}

/* Slide left when the info panel is open (mirrors logo tracking the sidebar) */
.campus-app.panel-open .layers-control {
  right: calc(340px + 1rem);
}

.layers-control__btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.48rem 0.85rem 0.48rem 0.65rem;
  background: rgba(255, 255, 255, 0.96);
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
  font-family: var(--hu-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.1s ease;
}

.layers-control__btn:hover { background: #ffffff; transform: translateY(-1px); }
.layers-control__btn:active { transform: translateY(0); }

.layers-control__btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: var(--howard-blue);
}

.layers-control__panel {
  display: none; /* shown only when JS adds .open */
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 148px;
  padding: 0.45rem;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.layers-control__panel.open {
  display: flex;
}

.layers-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.48rem 0.6rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s ease;
}

.layers-option:hover  { background: rgba(18, 58, 114, 0.07); }
.layers-option.active { background: rgba(18, 58, 114, 0.12); }

.layers-option__thumb {
  width: 38px;
  height: 26px;
  border-radius: 5px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

/* Thumbnail placeholders — JS replaces background-image with a real
   Mapbox Static Images snapshot once the token is available. The neutral
   gray fallback shows while the image loads or if the API is unreachable. */
.layers-option__thumb--campus,
.layers-option__thumb--satellite,
.layers-option__thumb--hybrid {
  background: #d0d4db;
}

.layers-option__name {
  font-family: var(--hu-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: #1a1a1a;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}