@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Space+Mono:wght@400;700&display=swap');

:root {
  color-scheme: light;

  --theme-paper: #FFFFFF;
  --theme-paper-dim: #F1F4F6;
  --theme-surface: #FFFFFF;
  --theme-line: #E2E8EC;
  --theme-line-strong: #CFD9DF;
  --theme-ink: #14202B;
  --theme-ink-2: #3B4D5A;
  --theme-ink-3: #76858F;
  --theme-ink-4: #9AA7AF;
  --theme-accent: #EC6240;
  --theme-accent-hover: #D8512F;
  --theme-accent-press: #BF3F22;
  --theme-accent-soft: #FCE2D6;
  --theme-role-hub: #1C6E92;
  --theme-role-car: #EC6240;
  --theme-role-meetup: #2E9C97;
  --theme-role-host: #DCA23E;
  --theme-role-cafe: #BF3F22;
  --theme-success: #2E8B72;
  --theme-success-bg: #D8ECE6;
  --theme-warning: #DCA23E;
  --theme-warning-bg: #F3E5C5;
  --theme-danger: #BF3F22;
  --theme-danger-bg: #F5D8CF;
  --theme-shadow-sm: 0 1px 2px rgba(21,24,43,0.06), 0 1px 1px rgba(21,24,43,0.04);
  --theme-shadow-md: 0 4px 14px rgba(21,24,43,0.08), 0 1px 3px rgba(21,24,43,0.06);
  --theme-shadow-lg: 0 14px 34px rgba(21,24,43,0.12), 0 4px 10px rgba(21,24,43,0.07);

  --bg: var(--theme-paper);
  --bg-soft: var(--theme-paper-dim);
  --surface: var(--theme-surface);
  --ink: var(--theme-ink);
  --ink-2: var(--theme-ink-2);
  --ink-3: var(--theme-ink-3);
  --ink-4: var(--theme-ink-4);
  --rule: var(--theme-line);
  --rule-soft: color-mix(in srgb, var(--theme-line) 56%, white);
  --accent: var(--theme-accent);
  --accent-deep: var(--theme-accent-press);
  --accent-tint: var(--theme-accent-soft);
  --green: var(--theme-success);
  --green-bg: var(--theme-success-bg);
  --amber: var(--theme-warning);
  --amber-bg: var(--theme-warning-bg);
  --red: var(--theme-danger);
  --red-bg: var(--theme-danger-bg);

  --font-display: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;
  --sans: var(--font-body);
  --serif: var(--font-display);
  --mono: var(--font-mono);

  --wa-font-sans: var(--font-body);
  --wa-color-primary-100: var(--theme-accent-soft);
  --wa-color-primary-600: var(--theme-accent);
  --wa-color-primary-700: var(--theme-accent-press);
  --wa-color-neutral-200: var(--rule-soft);
  --wa-color-neutral-500: var(--ink-3);
  --wa-color-neutral-600: var(--ink-2);
  --wa-color-neutral-800: var(--ink);

  --violet: var(--theme-accent);
  --violet-2: var(--theme-accent-press);
  --violet-bg: var(--theme-accent-soft);
  --bone: var(--theme-paper);
  --bone-2: var(--theme-paper-dim);
}

body {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--theme-paper) 94%, white) 0%, var(--theme-paper) 44%, var(--theme-paper-dim) 100%) !important;
  color: var(--theme-ink-2);
  font-family: var(--font-body) !important;
}

h1,
h2,
h3,
h4,
.page-head h1,
.docs-head h1,
.panel-head h2,
.table-head h2,
.section-head h2,
.hero-name,
.presence-head h2,
.empty,
.empty-state h3 {
  font-family: var(--font-display) !important;
  letter-spacing: 0;
}

.kicker,
th,
.badge,
.count,
.cell-sub,
.metric label,
.readiness-card label,
.status-card span,
.role-line,
.session-label,
.presence-table th,
.presence-status,
.presence-path,
.presence-count,
.field label,
.form-stack label,
.form-grid label,
.primary-btn,
.secondary-btn,
.btn.tiny,
.tab,
.sort-btn,
.toast,
.mono,
.num,
code,
.model-pill {
  font-family: var(--font-mono) !important;
}

.page-head,
.docs-head,
.panel,
.metric,
.readiness-card,
.table-wrap,
.table-shell,
.usage-table,
.summary-card,
.session-card,
.presence-panel,
.roster-table-container,
.theme-card,
.record,
.item,
.lane,
.modal,
.settings-grid .panel {
  box-shadow: var(--theme-shadow-sm);
}

.page-head,
.docs-head {
  border-bottom-color: var(--theme-ink) !important;
}

.btn.primary,
.primary-btn,
.purple-btn,
button[type="submit"],
.site-ai-launcher,
.site-ai-search-form button {
  background: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
  color: #fff !important;
}

.btn.primary:hover,
.primary-btn:hover,
.purple-btn:hover,
button[type="submit"]:hover,
.site-ai-launcher:hover,
.site-ai-search-form button:hover {
  background: var(--theme-accent-hover) !important;
  border-color: var(--theme-accent-hover) !important;
}

.badge.language,
.guest-count,
.model-pill,
.session-role,
.role-cell span,
.detail-section-count,
.picker-source,
.suggestion-label,
.current-theme-pill {
  background: var(--theme-accent-soft) !important;
  color: var(--theme-accent-press) !important;
}

tbody tr:hover td,
.record:hover,
.territory-item:hover,
.territory-item.active,
.tab:hover,
.tab.active,
.action-icon:hover,
.icon-btn:hover,
.head-link:hover,
.docs-nav a.active,
.scenario-card button:hover {
  background: var(--theme-accent-soft) !important;
  color: var(--theme-accent-press) !important;
}

.bar-fill,
.split-bar-or,
.home-marker {
  background: var(--theme-accent) !important;
}

input:focus,
select:focus,
textarea:focus,
.search input:focus,
.filters input:focus,
.filters select:focus {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 18%, transparent);
}

.site-nav {
  background:
    linear-gradient(180deg, #14202B 0%, #173E52 58%, #1C6E92 100%) !important;
  border-right-color: color-mix(in srgb, var(--theme-line) 32%, transparent) !important;
  font-family: var(--font-body) !important;
}

.site-nav *,
.nav-hamb {
  font-family: var(--font-body) !important;
}

.site-nav .nav-brand {
  border-bottom-color: color-mix(in srgb, var(--theme-accent) 70%, white) !important;
}

.site-nav .nav-links a,
.site-nav .nav-utility-link {
  color: color-mix(in srgb, var(--theme-surface) 76%, var(--theme-ink-3)) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.site-nav .nav-links a:hover,
.site-nav .nav-utility-link:hover {
  color: var(--theme-accent-soft) !important;
}

.site-nav .nav-logo {
  border-radius: 12px;
  background: color-mix(in srgb, var(--theme-surface) 92%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-line) 74%, transparent);
  padding: 2px;
}

.site-nav .nav-brand-name {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
}

.site-nav .nav-brand-sub,
.site-nav .nav-live-chip,
.site-nav #nav-user-email,
.site-nav #nav-user-role {
  font-family: var(--font-mono) !important;
}

.site-nav .nav-links a.active,
.site-nav .nav-sublinks a.active,
.site-nav .nav-utility-link.active,
.site-nav .nav-utility-link:hover {
  background: color-mix(in srgb, var(--theme-accent) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--theme-accent) 34%, transparent) !important;
  color: var(--theme-accent-soft) !important;
  font-weight: 800 !important;
}

.site-nav .nav-mark {
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--theme-surface) 18%, transparent);
  color: color-mix(in srgb, var(--theme-surface) 82%, var(--theme-ink-3));
}

.site-nav .nav-mark-hub {
  background: color-mix(in srgb, var(--theme-role-hub) 24%, transparent);
}

.site-nav .nav-mark-car {
  background: color-mix(in srgb, var(--theme-role-car) 24%, transparent);
}

.site-nav .nav-mark-meetup {
  background: color-mix(in srgb, var(--theme-role-meetup) 24%, transparent);
}

.site-nav .nav-mark-host {
  background: color-mix(in srgb, var(--theme-role-host) 24%, transparent);
}

.site-nav .nav-mark-cafe {
  background: color-mix(in srgb, var(--theme-role-cafe) 22%, transparent);
}

.site-nav .nav-links a.active .nav-mark,
.site-nav .nav-sublinks a.active .nav-mark,
.site-nav .nav-utility-link.active .nav-mark,
.site-nav .nav-utility-link:hover .nav-mark {
  background: var(--theme-surface);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--theme-accent) 24%, transparent);
}

.site-nav .nav-divider {
  border-top-color: var(--theme-accent) !important;
}

.site-ai-panel,
.site-ai-message.assistant .site-ai-bubble,
.site-ai-search-form {
  background: var(--theme-surface) !important;
  border-color: var(--theme-line) !important;
}

.site-ai-message.user .site-ai-bubble {
  background: var(--theme-accent) !important;
}

.site-ai-search-form i,
.site-ai-prompt-grid button,
.site-ai-result-close:hover {
  color: var(--theme-accent-press) !important;
}

.site-ai-prompt-grid button {
  background: var(--theme-accent-soft) !important;
  border-color: color-mix(in srgb, var(--theme-accent) 24%, white) !important;
}

/* Transit Finder uses a dark map-app shell with different token names. */
:root {
  --field: #182A45;
  --line: #6F7C8E;
  --cream: #F6EEDD;
  --txt: #F6FBFC;
  --muted: #D5CDBE;
  --air: var(--theme-role-hub);
  --train: var(--theme-role-meetup);
  --bus: var(--theme-role-car);
}

.panel {
  border-color: var(--rule);
}

body:has(#app) {
  background: var(--theme-ink) !important;
}

#app .panel {
  background: linear-gradient(165deg, #11203A, #1E3654 58%, #1E6E8C) !important;
}

#app h1,
#app .loc,
#app .rec b,
.tour-card h3 {
  font-family: var(--font-display) !important;
}

#app,
#app label,
#app .kicker,
#app .hint,
#app .locsub,
#app .cmeta,
#app .cdist,
#app .khh,
#app .btn2,
#app .tlbl,
#app .themechip,
#app .tour-step,
#app .pp-sec,
#app .step-dist,
#app .legend,
#app .arr-time {
  font-family: var(--font-mono) !important;
}

#app button,
#app .tour-card,
.leaflet-popup-content,
.rail-pill,
.pp-btn {
  font-family: var(--font-body) !important;
}

#go,
#app button,
.help-fab,
.pp-copy:hover {
  background: var(--theme-accent) !important;
  color: #fff !important;
}

.themechip.active,
.hub-icon,
.rbadge,
.lbadge,
.step-icon {
  border-color: var(--theme-accent) !important;
}

.step-icon,
.pp-copy {
  color: var(--theme-accent-press) !important;
}

.zpin {
  background: var(--theme-accent) !important;
}

#app .transit-card {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(230, 242, 247, .18);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

#app .transit-card:hover {
  background: rgba(255, 255, 255, .14);
  border-color: var(--theme-accent);
}

#app .transit-card.air .transit-icon,
#app .transit-icon.air {
  border-color: var(--theme-role-hub);
  color: var(--theme-role-hub);
}

#app .transit-card.train .transit-icon,
#app .transit-card.rail .transit-icon,
#app .transit-icon.train,
#app .transit-icon.rail {
  border-color: var(--theme-role-meetup);
  color: var(--theme-role-meetup);
}

#app .transit-card.bus .transit-icon,
#app .transit-icon.bus {
  border-color: var(--theme-role-car);
  color: var(--theme-role-car);
}

#app .transit-card.ferry .transit-icon,
#app .transit-icon.ferry {
  border-color: var(--theme-accent);
  color: var(--theme-accent);
}

#app .transit-icon.hall {
  border-color: var(--theme-role-host);
  color: var(--theme-role-host);
}

#app .transit-chip.air {
  background: rgba(7, 93, 125, .24);
}

#app .transit-chip.train,
#app .transit-chip.rail {
  background: rgba(0, 161, 150, .24);
}

#app .transit-chip.bus {
  background: rgba(237, 107, 65, .24);
}

#app .transit-chip.ferry {
  background: rgba(237, 107, 65, .2);
}

#app .transit-chip.hall {
  background: rgba(224, 179, 64, .22);
}

#app .transit-rec {
  border-color: var(--theme-accent);
  background: rgba(237, 107, 65, .12);
}

/* Frost application refinements */
body,
button,
input,
select,
textarea {
  font-family: var(--font-body) !important;
}

h1,
h2,
h3,
.page-header h1,
.page-head h1,
.hero h1,
.hero-name,
.panel-head h2,
.table-head h2,
.section-head h2,
.docs-head h1,
#app h1 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.kicker,
label,
th,
.badge,
.chip,
.count,
.cell-sub,
.metric label,
.readiness-card label,
.status-card span,
.role-line,
.session-label,
.presence-table th,
.presence-status,
.presence-path,
.presence-count,
.field label,
.form-stack label,
.form-grid label,
.primary-btn,
.secondary-btn,
.btn.tiny,
.tab,
.nav-chip,
.site-live-chip {
  font-family: var(--font-mono) !important;
}

body.has-side-nav #app {
  color: var(--theme-ink-2);
}

body.has-side-nav #app h1,
body.has-side-nav #app h2,
body.has-side-nav #app h3 {
  color: var(--theme-ink);
}

/* PNW Transit Finder: Frost map workspace */
body.has-side-nav #app {
  position: relative;
}

body.has-side-nav #app .hamb,
body.has-side-nav #app .backdrop {
  display: none !important;
}

body.has-side-nav #app:has(#map) {
  display: block !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  background: var(--theme-paper-dim) !important;
}

body.has-side-nav #map {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--theme-paper-dim) !important;
}

body.has-side-nav #app .panel {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  z-index: 760 !important;
  width: min(424px, calc(100vw - var(--site-nav-width, 264px) - 54px)) !important;
  max-height: calc(100% - 36px) !important;
  overflow: auto !important;
  padding: 18px !important;
  border: 1px solid rgba(207, 217, 223, .88) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .96) !important;
  color: var(--theme-ink-2) !important;
  box-shadow: var(--theme-shadow-lg) !important;
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
}

body.has-side-nav #app .brand {
  gap: 12px !important;
  margin-bottom: 12px !important;
}

body.has-side-nav #app .brand .logo {
  width: 54px !important;
  height: 54px !important;
  border-radius: 14px !important;
  background: var(--theme-paper-dim) !important;
  box-shadow: inset 0 0 0 1px var(--theme-line) !important;
}

body.has-side-nav #app .kicker {
  color: var(--theme-accent-press) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
}

body.has-side-nav #app h1 {
  margin-top: 2px !important;
  font-size: clamp(25px, 3vw, 34px) !important;
  line-height: .98 !important;
}

body.has-side-nav #app .sub {
  margin: 0 0 14px !important;
  color: var(--theme-ink-2) !important;
  line-height: 1.45 !important;
}

body.has-side-nav #app label {
  color: var(--theme-ink-3) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
}

body.has-side-nav #app .searchrow {
  gap: 9px !important;
}

body.has-side-nav #app input#zip {
  background: var(--theme-paper-dim) !important;
  border: 1px solid var(--theme-line-strong) !important;
  color: var(--theme-ink) !important;
  border-radius: 12px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

body.has-side-nav #app input#zip:focus {
  border-color: var(--theme-role-hub) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-role-hub) 16%, transparent) !important;
}

body.has-side-nav #app button,
body.has-side-nav #app #go,
body.has-side-nav #app .btn2,
body.has-side-nav #app .pp-btn {
  border-radius: 12px !important;
  font-weight: 800 !important;
}

body.has-side-nav #app #go,
body.has-side-nav #app .pp-btn,
body.has-side-nav #app .hub-card-btn {
  background: var(--theme-accent) !important;
  color: #fff !important;
  border-color: var(--theme-accent) !important;
}

body.has-side-nav #app #go:hover,
body.has-side-nav #app .pp-btn:hover,
body.has-side-nav #app .hub-card-btn:hover {
  background: var(--theme-accent-hover) !important;
}

body.has-side-nav #app .btn2 {
  background: var(--theme-paper) !important;
  border: 1px solid var(--theme-line-strong) !important;
  color: var(--theme-ink) !important;
}

body.has-side-nav #app .btn2:hover {
  border-color: var(--theme-accent) !important;
  color: var(--theme-accent-press) !important;
}

body.has-side-nav #app .hint,
body.has-side-nav #app .note,
body.has-side-nav #app .locsub,
body.has-side-nav #app .cmeta,
body.has-side-nav #app .cdist,
body.has-side-nav #app .step-dist {
  color: var(--theme-ink-3) !important;
  font-family: var(--font-mono) !important;
}

body.has-side-nav #app .filter-acc {
  position: static !important;
  z-index: auto !important;
  width: 100% !important;
  margin: 12px 0 0 !important;
  border: 1px solid rgba(207, 217, 223, .92) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: var(--theme-shadow-sm) !important;
  color: var(--theme-ink-2) !important;
  overflow: hidden !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.has-side-nav #app .filter-acc summary {
  padding: 12px 14px !important;
  color: var(--theme-ink) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body.has-side-nav #app .filter-acc summary::after {
  color: var(--theme-accent) !important;
}

body.has-side-nav #app .filter-content {
  max-height: min(42vh, 420px) !important;
  overflow: auto !important;
  border-top: 1px solid var(--theme-line) !important;
  background: rgba(241, 244, 246, .72) !important;
}

body.has-side-nav #app .filter-actions {
  border-bottom-color: var(--theme-line) !important;
}

body.has-side-nav #app .filter-actions button,
body.has-side-nav #app .fcheck {
  color: var(--theme-ink-2) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

body.has-side-nav #app .filter-actions button {
  background: var(--theme-paper) !important;
  border-color: var(--theme-line-strong) !important;
}

body.has-side-nav #app .fcheck:hover,
body.has-side-nav #app .filter-actions button:hover {
  color: var(--theme-accent-press) !important;
  border-color: var(--theme-accent) !important;
}

body.has-side-nav #app .fcheck input {
  background: var(--theme-paper) !important;
  border-color: var(--theme-line-strong) !important;
}

body.has-side-nav #app .fcheck input:checked {
  background: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
}

body.has-side-nav #app .rail-subgroup {
  border-left-color: var(--theme-line-strong) !important;
}

body.has-side-nav #app .rail-subgroup-label {
  color: var(--theme-ink-3) !important;
  font-family: var(--font-mono) !important;
}

body.has-side-nav #app .theme-fab {
  top: 18px !important;
  right: 20px !important;
  z-index: 800 !important;
}

body.has-side-nav #app .theme-btn {
  width: auto !important;
  height: 42px !important;
  min-width: 88px !important;
  gap: 8px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(207, 217, 223, .92) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .97) !important;
  color: var(--theme-ink) !important;
  box-shadow: var(--theme-shadow-md) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.has-side-nav #app .theme-btn:hover {
  color: var(--theme-accent-press) !important;
  border-color: var(--theme-accent) !important;
}

body.has-side-nav #app .theme-btn-icon {
  width: 17px;
  height: 17px;
  display: block;
  background: currentColor;
  -webkit-mask: url('../assets/icons/waves.svg') center / contain no-repeat;
  mask: url('../assets/icons/waves.svg') center / contain no-repeat;
}

body.has-side-nav #app .theme-popover {
  top: 50px !important;
  right: 0 !important;
  min-width: 264px !important;
  padding: 10px !important;
  gap: 7px !important;
  border: 1px solid var(--theme-line-strong) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: var(--theme-shadow-lg) !important;
}

body.has-side-nav #app .themechip {
  min-width: auto !important;
  flex: 1 1 78px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--theme-line-strong) !important;
  border-radius: 999px !important;
  background: var(--theme-paper-dim) !important;
  color: var(--theme-ink-2) !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.has-side-nav #app .themechip:hover,
body.has-side-nav #app .themechip.active {
  border-color: var(--theme-accent) !important;
  background: var(--theme-accent-soft) !important;
  color: var(--theme-accent-press) !important;
}

body.has-side-nav #app .themechip .tchip-img {
  display: none !important;
}

body.has-side-nav #app .result {
  margin-top: 16px !important;
}

body.has-side-nav #app .loc,
body.has-side-nav #app .rec b,
body.has-side-nav #app .transit-rec b,
body.has-side-nav #app .hub-card-name,
body.has-side-nav #app .hub-card-stat b {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
}

body.has-side-nav #app .rec,
body.has-side-nav #app .transit-card {
  background: var(--theme-paper-dim) !important;
  border-color: var(--theme-line) !important;
  color: var(--theme-ink-2) !important;
}

body.has-side-nav #app .transit-card:hover {
  background: #fff !important;
  border-color: var(--theme-accent) !important;
}

body.has-side-nav #app .transit-chip,
body.has-side-nav #app .animal-chip,
body.has-side-nav #app .hub-card-schedules a {
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
}

body.has-side-nav #app .legend {
  background: rgba(255, 255, 255, .94) !important;
  color: var(--theme-ink-2) !important;
  border-color: var(--theme-line-strong) !important;
  box-shadow: var(--theme-shadow-md) !important;
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
}

body.has-side-nav #app .lbadge,
body.has-side-nav #app .rbadge,
body.has-side-nav #app .step-icon {
  border-color: var(--theme-accent) !important;
  color: var(--theme-accent-press) !important;
}

body.has-side-nav #app .tour-card,
body.has-side-nav #app .tour-card h3 {
  font-family: var(--font-display) !important;
}

body.has-side-nav #app .tour-step {
  font-family: var(--font-mono) !important;
}

body.has-side-nav .help-fab {
  left: calc(var(--site-nav-width, 264px) + 18px) !important;
  right: auto !important;
  bottom: 18px !important;
  width: 46px !important;
  height: 46px !important;
  border: 1px solid rgba(207, 217, 223, .94) !important;
  background: rgba(255, 255, 255, .96) !important;
  color: var(--theme-role-hub) !important;
  box-shadow: var(--theme-shadow-md) !important;
}

body.has-side-nav .help-fab:hover {
  color: var(--theme-accent-press) !important;
  border-color: var(--theme-accent) !important;
  background: var(--theme-accent-soft) !important;
  transform: translateY(-1px) !important;
}

body.has-side-nav .help-fab-icon {
  width: 22px;
  height: 22px;
  display: block;
  background: currentColor;
  -webkit-mask: url('../assets/icons/flag.svg') center / contain no-repeat;
  mask: url('../assets/icons/flag.svg') center / contain no-repeat;
}

@media (max-width: 1180px) {
  body.has-side-nav #app:has(#map) {
    height: calc(100vh - 62px) !important;
    height: calc(100dvh - 62px) !important;
  }

  body.has-side-nav #app .panel {
    width: min(424px, calc(100vw - 36px)) !important;
  }

  body.has-side-nav #app .filter-acc {
    width: 100% !important;
  }

  body.has-side-nav .help-fab {
    left: 18px !important;
  }
}

@media (max-width: 840px) {
  body.has-side-nav #app .panel {
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: 44vh !important;
    padding: 14px !important;
  }

  body.has-side-nav #app .brand .logo {
    width: 46px !important;
    height: 46px !important;
  }

  body.has-side-nav #app h1 {
    font-size: 25px !important;
  }

  body.has-side-nav #app .sub {
    font-size: 13px !important;
  }

  body.has-side-nav #app .theme-fab {
    top: auto !important;
    right: 12px !important;
    bottom: 88px !important;
  }

  body.has-side-nav #app .theme-popover {
    right: 0 !important;
    bottom: 50px !important;
    top: auto !important;
    width: min(286px, calc(100vw - 24px)) !important;
  }

  body.has-side-nav #app .filter-acc {
    width: auto !important;
  }

  body.has-side-nav #app .filter-content {
    max-height: 30vh !important;
  }

  body.has-side-nav #app .legend {
    bottom: 16px !important;
    max-width: calc(100% - 24px) !important;
  }

  body.has-side-nav .help-fab {
    bottom: 18px !important;
  }
}

body.has-side-nav #app .leaflet-bottom.leaflet-right {
  right: 16px !important;
  bottom: 84px !important;
}

body.has-side-nav #app .leaflet-control-zoom {
  border: 1px solid var(--theme-line-strong) !important;
  border-radius: 14px !important;
  box-shadow: var(--theme-shadow-md) !important;
  overflow: hidden !important;
}

body.has-side-nav #app .leaflet-control-zoom a {
  background: rgba(255, 255, 255, .97) !important;
  color: var(--theme-ink) !important;
  border-color: var(--theme-line) !important;
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
}

body.has-side-nav #app .leaflet-control-zoom a:hover {
  background: var(--theme-accent-soft) !important;
  color: var(--theme-accent-press) !important;
}

@media (max-width: 840px) {
  body.has-side-nav #app .leaflet-bottom.leaflet-right {
    right: 12px !important;
    bottom: 156px !important;
  }
}