/* Apple-inspired material system. Glass is reserved for floating chrome;
   controls inside it use opaque fills to preserve text contrast. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  font-optical-sizing: auto;
  --paper: #f9fafc;
  --ink: #1d1d1f;
  --muted: #565b65;
  --line: #202a381c;
  --blue: #0066cc;
  --glass: linear-gradient(135deg, #ffffffd9, #f5f8ffad 55%, #ffffffc9);
  --glass-shadow: inset 0 1px 0 #fffffff2, inset 0 -1px 0 #ffffff80, 0 0 0 1px #ffffff65, 0 8px 28px #182b4320;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
button, a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { transition: background-color 160ms ease-out, color 160ms ease-out, box-shadow 160ms ease-out, scale 160ms ease-out; }
button:active:not(:disabled) { scale: .96; transition-duration: 70ms; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
input, select, textarea { accent-color: var(--blue); }
:is(.brand, .info-panel, .mobile-map-bar, .scene-actions, .map-utility-controls, .recenter-location, .map-heading, .search-this-area, .mobile-location-status, .privacy-banner, .privacy-dialog, .location-explainer, .walk-dialog, .load-error) {
  background: var(--glass);
  border: 1px solid #ffffffb3;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(28px) saturate(165%);
  backdrop-filter: blur(28px) saturate(165%);
  color: var(--ink);
}
.brand { inset: 20px 24px auto; height: 72px; padding: 12px 16px; border-radius: 25px; }
.brand-mark { width: 44px; height: 44px; border-radius: 15px; background: linear-gradient(145deg,#39a0ff,#0064d5); box-shadow: inset 0 1px 0 #ffffff70, 0 3px 8px #007aff26; font-family: inherit; font-weight: 650; font-size: 22px; letter-spacing: -.08em; }
.brand-mark span { color: #fff; }
.brand .eyebrow { font-size: .6rem; letter-spacing: .1em; }
.brand h1 { font-size: 1.2rem; letter-spacing: -.035em; }
.campus-badge { background: #e8edf3; color: #535c67; border-radius: 20px; font-size: .58rem; padding: 5px 9px; }
#toggle-guide { min-height: 44px; border: 0; border-radius: 24px; background: #e8edf3; color: var(--blue); padding: 10px 18px; font-weight: 600; }
.info-panel { top: 112px; bottom: 70px; width: 368px; padding: 25px; border-radius: 28px; gap: 22px; scrollbar-color: #727c8b55 transparent; }
.panel-header h2 { font-size: 1.85rem; line-height: 1.1; letter-spacing: -.045em; margin: 6px 0 10px; }
.panel-header #panel-copy { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.55; }
.eyebrow, .section-label { font-size: .65rem; font-weight: 650; letter-spacing: .09em; }
.panel-header .prototype-notice { margin-top: 14px; padding: 10px 12px; border: 0; border-radius: 14px; background: #e9edf2; color: #525866!important; font-size: .7rem!important; line-height: 1.45!important; }
.guide-tabs { background: #dfe4eb; border-radius: 25px; padding: 4px; gap: 2px; flex-shrink: 0; }
.guide-tabs button { border-radius: 22px; min-height: 42px; font-size: .82rem; font-weight: 600; }
.guide-tabs button[aria-pressed=true] { background: #fff; color: var(--ink); box-shadow: 0 2px 5px #172a3d1a; }
.landmark-search, select, #walking-speed, .walk-dialog input, .walk-dialog textarea { min-height: 48px; border: 1px solid #202a3814; border-radius: 15px; background: #e9edf2; color: var(--ink); padding: 12px 14px; font-size: 1rem; }
.landmark-search::placeholder { color: #656b76; font-size: .86rem; }
.landmark-results { gap: 3px; max-height: 330px; }
.landmark-result { min-height: 56px; padding: 12px; border: 0; border-radius: 14px; }
.landmark-result strong { font-weight: 600; letter-spacing: -.015em; }
.landmark-result span { font-size: .7rem; color: var(--muted); }
@media (hover: hover) {
  .landmark-result:hover, .mobile-place-result:hover { background: #e5edf6; }
  #toggle-guide:hover, .viewpoint:hover, .accessibility button:hover { background: #dae8f8; }
  .scene-actions button:hover, .map-utility-controls button:hover { background: #ffffffa6; }
}
.map-heading { top: 116px; left: 412px; right: 160px; max-width: calc(100% - 590px); border-radius: 22px; padding: 10px 14px; font-size: .7rem; font-weight: 550; }
.live-dot { background: #248a3d; box-shadow: 0 0 0 3px #34c7591a; }
.map-utility-controls { top: 112px; padding: 4px; gap: 2px; border-radius: 28px; }
.map-utility-controls button, .scene-actions button { border: 0; background: transparent; box-shadow: none; color: var(--ink); border-radius: 50%; width: 44px; height: 44px; }
.map-utility-controls button[aria-pressed=false] { background: #dce8f6; color: var(--blue); }
.scene-actions { padding: 5px; gap: 3px; border-radius: 30px; }
.scene-actions button + button { border-top: 1px solid var(--line); }
.recenter-location { width: 54px; height: 54px; bottom: 320px; color: var(--blue); }
.map-bottom { background: linear-gradient(0deg,#f5f7f4ee,#f5f7f4a6); border: 0; min-height: 44px; color: #454b52; }
.map-bottom p { font-size: .64rem; }
.map-bottom a { color: #364858; }
.map-scale { left: 414px; bottom: 64px; background: #ffffffc9; border-radius: 6px 6px 0 0; }
.guide-hidden .map-scale { left: 24px; }
.selected-place, .route-options, .route-recording { background: #edf1f6; border: 0; border-radius: 20px; padding: 18px; }
.selected-place h3 { font-size: 1.25rem; letter-spacing: -.025em; }
.selected-pin { border-radius: 13px; background: #dceafd; }
.close-card, .privacy-close, #close-mobile-guide { border: 0; border-radius: 50%; background: #dfe4eb; color: #515864; }
.card-actions button, .primary-button, .privacy-primary, .privacy-secondary, .location-explainer button, .walk-dialog button, .route-recording button, .location-button, .viewpoint, .accessibility button, .stop-input button { min-height: 44px; border-radius: 22px; font-weight: 600; }
.card-actions button { background: #dceafd; border: 0; color: var(--blue); }
.primary-button, #directions-here, .privacy-primary, .location-explainer .primary-button { background: var(--blue); color: #fff; box-shadow: inset 0 1px 0 #ffffff30, 0 3px 8px #0066cc20; }
.privacy-secondary { background: #e9edf2; color: var(--blue); border: 0; }
.route-field-row { grid-template-columns: 1fr; gap: 8px; }
.swap-route { justify-self: center; margin: -3px 0; background: #e0eaf6; border: 0; color: var(--blue); }
.route-option { border-radius: 16px; }
.route-option[aria-pressed=true] { background: #e0edff; box-shadow: inset 3px 0 var(--blue); }
.map-settings summary { min-height: 32px; color: var(--ink); }
.viewpoint, .accessibility button { background: #e9edf2; border: 0; }
.viewpoint.is-active, .accessibility button[aria-pressed=true] { background: #d9eaff; color: var(--blue); box-shadow: inset 0 0 0 1px #0066cc55; }
.legend { font-size: .65rem; gap: 9px 12px; }
.site-footer { font-size: .68rem; }
.site-footer a, .privacy-settings-link { text-decoration: none; }
.privacy-banner, .privacy-dialog, .location-explainer, .walk-dialog, .load-error { border-radius: 28px; }
.privacy-banner { background: #f8faffed; padding: 20px 24px; }
.privacy-dialog, .location-explainer, .walk-dialog { background: #f8faffed; }
.privacy-dialog-backdrop, .location-explainer::backdrop, .walk-dialog::backdrop { background: #101b304d; }
.landmark-label { border-radius: 8px; box-shadow: 0 2px 6px #182b4324; }
#mobile-search { background: #f2f4f8; }
.mobile-search-header { margin: 12px; padding: 4px; border: 0; background: #e3e8ef; border-radius: 30px; }
.mobile-search-body { padding-inline: 20px; }
.mobile-use-location { border: 0; border-radius: 22px; background: #e2edfc; padding: 14px; }
.category-filters button { min-height: 44px; border: 0; border-radius: 24px; background: #e5e9ef; padding: 10px 16px; }
.category-filters button[aria-pressed=true] { background: var(--blue); color: #fff; }
.mobile-place-result { border-bottom-color: #202a3810; padding: 14px 10px; border-radius: 16px; }
.mobile-place-result strong { font-weight: 600; letter-spacing: -.02em; }
.search-result-icon { border-radius: 14px; }
@media (max-width: 800px) {
  .mobile-map-bar { top: calc(12px + env(safe-area-inset-top)); height: 60px; border-radius: 32px; }
  #mobile-guide { background: #e2eaf4; color: var(--blue); }
  .map-heading, .guide-hidden .map-heading { top: calc(84px + env(safe-area-inset-top)); left: 16px; right: 120px; max-width: calc(100% - 140px); font-size: .65rem; padding: 8px 11px; }
  .map-utility-controls { top: calc(82px + env(safe-area-inset-top)); right: 12px; padding: 3px; }
  .scene-actions { bottom: calc(153px + env(safe-area-inset-bottom)); right: 14px; padding: 4px; gap: 0; }
  .scene-actions button { border-radius: 50%; }
  .recenter-location { right: 14px; bottom: calc(96px + env(safe-area-inset-bottom)); width: 50px; height: 50px; }
  .info-panel, .sheet-collapsed .info-panel { top: auto; left: 8px; right: 8px; bottom: 6px; width: auto; border-radius: 30px; padding-inline: 20px; }
  .info-panel { padding-top: 15px; gap: 20px; }
  .sheet-collapsed .info-panel { padding-top: 10px; }
  .sheet-handle > span { background: #858d9a80; width: 36px; }
  .sheet-handle strong { letter-spacing: -.025em; font-size: 1rem; }
  .sheet-handle small { font-size: .73rem; }
  #close-mobile-guide { top: 12px; right: 12px; }
  .panel-header h2 { font-size: 1.6rem; }
  .panel-header .prototype-notice { display: block; }
  .map-scale, .guide-hidden .map-scale { left: 16px; bottom: calc(108px + env(safe-area-inset-bottom)); }
  .map-bottom { padding-bottom: 96px; background: transparent; pointer-events: none; }
  .map-bottom .attribution { display: none; }
  .place-detail-mode .info-panel { inset: 0; width: 100%; border-radius: 0; padding-top: calc(52px + env(safe-area-inset-top)); }
  .place-detail-mode #selected-card { background: transparent; }
  .mobile-search-header { margin-top: calc(12px + env(safe-area-inset-top)); }
}
/* Opaque materials for unsupported browsers and accessibility preferences. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: #f3f5f9; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root { --glass: #f9fafc; --glass-shadow: 0 0 0 1px #697381; }
  :is(.brand,.info-panel,.mobile-map-bar,.scene-actions,.map-utility-controls,.recenter-location,.map-heading,.search-this-area,.mobile-location-status,.privacy-banner,.privacy-dialog,.location-explainer,.walk-dialog,.load-error) { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--glass); }
}
.high-contrast { --glass: #080e17; --glass-shadow: 0 0 0 1px #a6bcd0; }
.high-contrast :is(.brand,.info-panel,.mobile-map-bar,.scene-actions,.map-utility-controls,.recenter-location,.map-heading,.privacy-banner,.privacy-dialog,.location-explainer,.walk-dialog) { background: var(--paper); color: var(--ink); backdrop-filter: none; }
.high-contrast :is(.landmark-search,select,#walking-speed,.guide-tabs,.guide-tabs button[aria-pressed=true],.viewpoint,.accessibility button,.selected-place,.route-options,.route-recording,.category-filters button,.mobile-use-location,.mobile-search-header,#mobile-search,.card-actions button,.route-option,.prototype-notice) { background: #152334; color: var(--ink)!important; }
.high-contrast :is(.primary-button,#directions-here,.privacy-primary,.category-filters button[aria-pressed=true]) { background: var(--blue); color: #080e17; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none!important; animation: none!important; }
  button:active:not(:disabled) { scale: 1; }
}
@media (max-width: 800px) {
  .map-bottom { bottom: 92px; padding: 4px 80px 4px 16px; pointer-events: auto; }
  .map-bottom .attribution { display: block; font-size: 8px; line-height: 1.35; text-shadow: 0 1px 2px #fff; }
  .map-scale, .guide-hidden .map-scale { bottom: calc(155px + env(safe-area-inset-bottom)); }
}

/* One continuous selection surface moves beneath stationary button labels. */
.fluid-selection { position: relative; isolation: isolate; }
.selection-surface { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; border-radius: 24px; background: linear-gradient(145deg,#fff,#f7faffeb); box-shadow: inset 0 1px 0 #fff, 0 2px 7px #172a3d20; }
.fluid-selection button { position: relative; z-index: 0; }
.guide-tabs.fluid-selection button[aria-pressed=true], .category-filters.fluid-selection button[aria-pressed=true], .viewpoints.fluid-selection .viewpoint.is-active { background: transparent; box-shadow: none; border-color: transparent; }
.category-filters.fluid-selection { gap: 3px; padding: 4px; border-radius: 28px; background: #e5e9ef; }
.category-filters.fluid-selection button { background: transparent; }
.category-filters .selection-surface { background: linear-gradient(145deg,#2589ed,#0066cc); box-shadow: inset 0 1px 0 #ffffff55, 0 2px 6px #0066cc26; }
.viewpoints.fluid-selection { padding: 4px; border-radius: 25px; background: #e2e7ee; }
.viewpoints.fluid-selection .viewpoint { background: transparent; }
.high-contrast .selection-surface { background: #364d68; box-shadow: inset 0 0 0 1px #a6bcd0; }
.high-contrast .category-filters button[aria-pressed=true] { color: #fff; }
@media (prefers-contrast: more) { .selection-surface { outline: 2px solid var(--blue); outline-offset: -2px; } }

/* Native-feeling sheet gestures are confined to the grab handle. */
.sheet-handle { touch-action: none; user-select: none; -webkit-user-select: none; min-height: 54px; }
.info-panel.sheet-tracking { transition: none; overflow: hidden; }
#mobile-search { transform-origin: top left; }
@media (max-width: 800px) { .info-panel { transform-origin: top center; } }

.walking-card { background: var(--glass); border: 1px solid #ffffffb3; border-radius: 26px; box-shadow: var(--glass-shadow); backdrop-filter: blur(28px) saturate(165%); -webkit-backdrop-filter: blur(28px) saturate(165%); }
.walking-actions button { border-radius: 22px; background: #e2edfc; border: 0; font-weight: 600; }
.walking-actions button[aria-pressed=true] { background: var(--blue); color: #fff; }
.high-contrast .walking-card { background: var(--paper); backdrop-filter: none; }
.high-contrast .walking-icon,.high-contrast .walking-actions button { background: #152334; color: var(--ink); }
@media (prefers-reduced-transparency:reduce) { .walking-card { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; } }

.saved-places{padding:12px 0;border-bottom:1px solid #bac9c2}.saved-places summary{cursor:pointer;font-weight:600}.saved-place-row{display:flex;gap:8px;margin:8px 0}.saved-place-row button:first-child{flex:1;text-align:left}.saved-place-row button{padding:10px;border:1px solid #b3c5bd;border-radius:8px;background:var(--panel,#fff);color:inherit}#saved-status{font-size:12px}#save-place[aria-pressed=true]{background:#d7efe4;color:#184c39}