/* ==========================================================================
   Mozambique Disaster Response Portal — design system
   Palette is fixed by the brief. One extension token (--amber) was added
   because five service categories need five separable hues on the map.
   ========================================================================== */

:root {
  /* --- brief palette --- */
  --ink:          #1A2530;   /* header & dark containers */
  --ink-2:        #222222;
  --crimson:      #BE6464;   /* emergency alert / primary CTA */
  --green:        #8DC572;   /* success / active service */
  --blue:         #337AB7;   /* routing & informational */
  --white:        #FFFFFF;
  --panel:        #F8F9FA;   /* card panels */

  /* --- derived neutrals --- */
  --ink-70:       #4A5560;
  --ink-45:       #78828C;
  --line:         #E3E7EB;
  --line-soft:    #EDF0F3;
  --ink-dark-2:   #22303D;   /* raised surface on dark header */
  --ink-dark-3:   #2E3E4C;

  /* --- derived tints --- */
  --crimson-dark: #A24F4F;
  --crimson-soft: #F7EAEA;
  --green-dark:   #6FA857;
  --green-soft:   #EDF6E8;
  --blue-dark:    #2A6394;
  --blue-soft:    #E8F1F9;
  --amber:        #D9A441;   /* extension token: transport category */
  --amber-soft:   #FBF3E2;

  /* High-visibility signal. The brief crimson is deliberately muted for large
     surfaces, which leaves it with almost no pull as a highlight — and now that
     roads carry a red ramp it barely separates from the map either. This is
     reserved for "look here": attention cues and the selected area. Never data. */
  --highlight:      #337AB7;
  --highlight-dark: #1b4f7c;
  --highlight-soft: #FFE8E5;

  /* --- type --- */
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- geometry --- */
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 13px;
  --header-h: 68px;
  --sidebar-w: 384px;

  --shadow-sm: 0 1px 2px rgba(26,37,48,.07), 0 1px 6px rgba(26,37,48,.05);
  --shadow-md: 0 4px 14px rgba(26,37,48,.10), 0 1px 3px rgba(26,37,48,.06);
  --shadow-lg: 0 12px 34px rgba(26,37,48,.17);
}

*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute is enforced only by the user-agent stylesheet, and any
   author-level `display` beats it. Several components below set display on the
   same class that carries `hidden` (.modal, .map-note, .tab-badge), so without
   this rule they would render regardless of the attribute. Keep it above every
   component rule. */
[hidden] { display: none !important; }

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

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--panel);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.012em; }
p { margin: 0; }
button { font-family: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.app-header {
  height: var(--header-h);
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 18px;
  border-bottom: 3px solid var(--crimson);
  position: relative;
  z-index: 900;
}

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }

.brand-mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--crimson);
  color: #fff;
  border-radius: var(--r-md);
  flex-shrink: 0;
}

.brand-text h1 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.15;
  white-space: nowrap;
}

.brand-sub {
  font-size: 10.5px;
  font-weight: 500;
  color: #93A1AD;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* --- quick stats banner --- */
.stats-banner {
  display: flex;
  gap: 2px;
  margin-left: auto;
  background: var(--ink-dark-2);
  border-radius: var(--r-md);
  padding: 2px;
  overflow: hidden;
}

.stat {
  padding: 6px 15px;
  background: var(--ink);
  min-width: 96px;
  border-radius: var(--r-sm);
}
.stat:first-child { border-radius: 7px 2px 2px 7px; }
.stat:last-child  { border-radius: 2px 7px 7px 2px; }

.stat-value {
  display: block;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.stat-label {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  color: #8A97A3;
  text-transform: uppercase;
  letter-spacing: .045em;
  white-space: nowrap;
  margin-top: 1px;
}
.stat-accent .stat-value { color: var(--green); }
.stat-accent.is-far .stat-value { color: var(--crimson); }

/* --- header actions --- */
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.lang-toggle {
  display: flex;
  background: var(--ink-dark-2);
  border-radius: var(--r-sm);
  padding: 3px;
}
.lang-btn {
  border: 0;
  background: transparent;
  color: #9AA7B3;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 5px 11px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.lang-btn:hover { color: #fff; }
.lang-btn.is-active { background: var(--blue); color: #fff; }

.panel-toggle {
  display: none;
  align-items: center;
  gap: 7px;
  background: var(--ink-dark-2);
  color: #fff;
  border: 0;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.app-body {
  display: flex;
  height: calc(100% - var(--header-h));
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--white);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 800;
}

.map-wrap { flex: 1; position: relative; min-width: 0; }
#map { position: absolute; inset: 0; background: #E8EDF1; }

/* ==========================================================================
   TABS
   ========================================================================== */
.tabbar {
  display: flex;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  padding: 0 4px;
}

.tab {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 13px 4px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-45);
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--crimson); }

.tab-badge {
  background: var(--crimson);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}

.tab-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 13px;
}
.tab-scroll::-webkit-scrollbar { width: 9px; }
.tab-scroll::-webkit-scrollbar-thumb { background: #D5DBE1; border-radius: 5px; border: 3px solid #fff; }

.tabpanel { display: none; }
.tabpanel.is-active { display: block; animation: fadeUp .2s ease; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 15px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.card-muted { background: var(--panel); box-shadow: none; }

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 3px;
}

.card-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.008em;
}

.card-help {
  font-size: 11.5px;
  color: var(--ink-45);
  line-height: 1.45;
  margin: 4px 0 13px;
}

/* ==========================================================================
   BUTTONS / INPUTS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 11px 15px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .08s;
}
.btn:active { transform: translateY(1px); }
.btn-block { width: 100%; margin-bottom: 9px; }

.btn-primary { background: var(--crimson); color: #fff; }
.btn-primary:hover { background: var(--crimson-dark); }

.btn-outline {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
}
.btn-outline:hover { border-color: var(--ink-45); background: var(--panel); }
.btn-outline.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.btn[disabled] { opacity: .5; cursor: not-allowed; }

.link-btn {
  border: 0;
  background: none;
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.link-btn:hover { text-decoration: underline; }

.field { margin-top: 14px; }
.field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-70);
  text-transform: uppercase;
  letter-spacing: .045em;
  margin-bottom: 6px;
}

.input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--white);
  transition: border-color .15s, box-shadow .15s;
}
.input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(51,122,183,.13);
}

.search-wrap { position: relative; }
.search-wrap .input { padding-right: 40px; }
.search-go {
  position: absolute;
  right: 4px; top: 4px;
  width: 32px; height: 32px;
  border: 0;
  background: var(--panel);
  color: var(--ink-70);
  border-radius: var(--r-sm);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.search-go:hover { background: var(--blue); color: #fff; }

.search-results {
  list-style: none;
  margin: 6px 0 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-md);
  max-height: 210px;
  overflow-y: auto;
}
.search-results li { margin: 0; }
.search-results button {
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.35;
}
.search-results button:hover { background: var(--blue-soft); }
.search-results .res-type {
  display: block;
  font-size: 10.5px;
  color: var(--ink-45);
  text-transform: capitalize;
  margin-top: 1px;
}
.search-results .res-msg { padding: 10px; font-size: 12px; color: var(--ink-45); }

.select-wrap { position: relative; }
.select-wrap::after {
  content: "";
  position: absolute;
  right: 14px; top: 50%;
  width: 7px; height: 7px;
  border-right: 2px solid var(--ink-45);
  border-bottom: 2px solid var(--ink-45);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
select.input { appearance: none; padding-right: 34px; cursor: pointer; }

/* --- coordinate readout --- */
.coord-readout {
  margin-top: 14px;
  padding: 11px 12px;
  background: var(--blue-soft);
  border: 1px solid #CFE1F0;
  border-radius: var(--r-md);
}
.coord-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.coord-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--blue-dark);
  text-transform: uppercase;
  letter-spacing: .05em;
}
#coordValue {
  display: block;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.coord-place {
  font-size: 11.5px;
  color: var(--ink-70);
  margin-top: 4px;
  line-height: 1.35;
}

.zone-note {
  font-size: 10.5px;
  color: var(--ink-45);
  margin-top: 8px;
  line-height: 1.4;
  font-style: italic;
}

/* --- radius --- */
.radius-row { display: flex; align-items: center; gap: 13px; }

.range {
  flex: 1;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  cursor: pointer;
}
.range::-webkit-slider-thumb {
  appearance: none;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(26,37,48,.3);
  cursor: pointer;
}
.range::-moz-range-thumb {
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(26,37,48,.3);
  cursor: pointer;
}

.radius-out {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 58px;
  text-align: right;
}

.chip-row { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-70);
  cursor: pointer;
  transition: all .15s;
}
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ==========================================================================
   CATEGORY FILTERS
   ========================================================================== */
.cat-list { display: flex; flex-direction: column; gap: 8px; }

.cat {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .15s;
}
.cat.is-on { border-color: var(--cat-color); }

.cat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  cursor: pointer;
  user-select: none;
  background: var(--white);
}
.cat.is-on .cat-header { background: var(--cat-soft); }

.cat-check {
  width: 17px; height: 17px;
  border: 2px solid var(--line);
  border-radius: 4px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition: all .15s;
}
.cat.is-on .cat-check { background: var(--cat-color); border-color: var(--cat-color); }
.cat-check svg { opacity: 0; color: #fff; }
.cat.is-on .cat-check svg { opacity: 1; }

.cat-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--cat-color);
  flex-shrink: 0;
}

.cat-name { font-size: 12.5px; font-weight: 600; flex: 1; }

.cat-count {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-45);
  background: var(--panel);
  padding: 2px 7px;
  border-radius: 10px;
}
.cat.is-on .cat-count { background: rgba(255,255,255,.75); color: var(--ink-70); }

.cat-expand {
  border: 0;
  background: none;
  padding: 2px;
  color: var(--ink-45);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .18s;
}
.cat.is-open .cat-expand { transform: rotate(180deg); }

.cat-subs {
  display: none;
  padding: 4px 11px 10px 38px;
  background: var(--white);
  border-top: 1px solid var(--line-soft);
}
.cat.is-open .cat-subs { display: block; }

.sub-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-70);
}
.sub-row input { accent-color: var(--blue); margin: 0; cursor: pointer; }
.sub-row .sub-count {
  margin-left: auto;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-45);
}

/* --- context layers --- */
.ctx-list { display: flex; flex-direction: column; gap: 2px; }

.ctx-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 12.5px;
  transition: background .15s;
}
.ctx-row:hover { background: var(--panel); }
.ctx-row input { accent-color: var(--blue); margin: 0; cursor: pointer; }
.ctx-swatch { width: 16px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.ctx-swatch.is-area { height: 12px; border-radius: 3px; opacity: .8; }

.ctx-status {
  font-size: 11px;
  color: var(--blue);
  margin-top: 9px;
  font-weight: 600;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  font-size: 12.5px;
  cursor: pointer;
}
.check-row input { accent-color: var(--blue); cursor: pointer; }

/* ==========================================================================
   RESULT LIST
   ========================================================================== */
.result-list { list-style: none; margin: 0; padding: 0; }

.result-item {
  display: flex;
  gap: 11px;
  padding: 11px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 7px;
  cursor: pointer;
  background: var(--white);
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.result-item:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}
.result-item.is-selected {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.rank {
  width: 25px; height: 25px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.result-item.is-selected .rank { background: var(--blue); }

.res-body { flex: 1; min-width: 0; }
.res-name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.res-name.is-unnamed { color: var(--ink-70); font-style: italic; font-weight: 500; }

.res-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.res-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 9px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.res-addr {
  font-size: 10.5px;
  color: var(--ink-45);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.res-dist { text-align: right; flex-shrink: 0; }
.res-km {
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.res-time { font-size: 10.5px; color: var(--ink-45); font-variant-numeric: tabular-nums; }

.res-route {
  border: 0;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 5px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.res-route:hover { background: var(--blue); color: #fff; }

.empty-state {
  text-align: center;
  padding: 22px 12px;
  font-size: 12px;
  color: var(--ink-45);
  background: var(--panel);
  border-radius: var(--r-md);
  border: 1px dashed var(--line);
  line-height: 1.5;
}

/* ==========================================================================
   CHART
   ========================================================================== */
.seg {
  display: flex;
  background: var(--panel);
  border-radius: var(--r-sm);
  padding: 2px;
  border: 1px solid var(--line);
}
.seg-btn {
  border: 0;
  background: transparent;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-45);
  padding: 4px 9px;
  border-radius: 4px;
  cursor: pointer;
}
.seg-btn.is-active { background: var(--ink); color: #fff; }

.chart-host { margin-top: 12px; }
.chart-host svg { display: block; width: 100%; height: auto; overflow: visible; }

.bar { transition: opacity .15s; cursor: pointer; }
.bar:hover { opacity: .8; }
.bar-label { font-size: 10px; font-weight: 600; fill: var(--ink-70); }
.bar-value { font-size: 10px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums; }
.bar-axis { stroke: var(--line); stroke-width: 1; }
.bar-grid { stroke: var(--line-soft); stroke-width: 1; }

.chart-caption {
  font-size: 10.5px;
  color: var(--ink-45);
  margin-top: 9px;
  line-height: 1.4;
}

.export-status {
  font-size: 11.5px;
  margin-top: 9px;
  min-height: 16px;
  font-weight: 600;
}
.export-status.is-ok  { color: var(--green-dark); }
.export-status.is-err { color: var(--crimson); }
.export-status.is-busy { color: var(--blue); }

.about-text {
  font-size: 11px;
  color: var(--ink-70);
  line-height: 1.5;
  margin-bottom: 7px;
}

/* ==========================================================================
   MAP OVERLAYS
   ========================================================================== */
.map-hint {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 620;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 12.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-lg);
  animation: dropIn .25s ease;
}
@keyframes dropIn {
  from { opacity: 0; transform: translate(-50%,-10px); }
  to   { opacity: 1; transform: translate(-50%,0); }
}
.hint-cancel {
  border: 1px solid rgba(255,255,255,.3);
  background: transparent;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.hint-cancel:hover { background: rgba(255,255,255,.14); }

/* --- legend --- */
.legend {
  position: absolute;
  bottom: 26px; right: 12px;
  z-index: 620;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  width: 178px;
  overflow: hidden;
}

.legend-head {
  width: 100%;
  border: 0;
  background: var(--ink);
  color: #fff;
  padding: 8px 11px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.legend-head svg { transition: transform .2s; }
.legend.is-collapsed .legend-head svg { transform: rotate(-90deg); }
.legend.is-collapsed .legend-body { display: none; }

.legend-body { padding: 9px 11px; max-height: 40vh; overflow-y: auto; }

.legend-group + .legend-group { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.legend-group-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-45);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 5px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-70);
  padding: 2.5px 0;
  line-height: 1.25;
}
.legend-sym { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(26,37,48,.18); }
.legend-sym.is-line { height: 3px; width: 15px; border-radius: 2px; border: 0; box-shadow: none; }
.legend-sym.is-area { border-radius: 3px; opacity: .75; }

/* --- loading veil --- */
.veil {
  position: absolute;
  inset: 0;
  z-index: 700;
  background: rgba(248,249,250,.95);
  display: grid;
  place-items: center;
  transition: opacity .3s;
}
.veil.is-hidden { opacity: 0; pointer-events: none; }
.veil-inner { text-align: center; width: 240px; }
.veil-inner p { font-size: 12.5px; color: var(--ink-70); font-weight: 500; }
.veil-bar {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 13px;
}
.veil-bar i {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--crimson);
  border-radius: 2px;
  animation: slide 1.1s ease-in-out infinite;
}
@keyframes slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* ==========================================================================
   MAP MARKERS & POPUPS
   ========================================================================== */
.user-pin {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue);
  border: 3.5px solid #fff;
  box-shadow: 0 2px 9px rgba(26,37,48,.42);
}
.user-pin::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  opacity: 0;
  animation: ping 2.4s ease-out infinite;
}
@keyframes ping {
  0%   { transform: scale(.55); opacity: .85; }
  80%  { transform: scale(1.9); opacity: 0; }
  100% { opacity: 0; }
}

.rank-pin {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 7px rgba(26,37,48,.35);
}

.leaflet-popup-content-wrapper {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 0;
  overflow: hidden;
}
.leaflet-popup-content { margin: 0; width: 232px !important; font-family: var(--font); }
.leaflet-popup-tip { box-shadow: var(--shadow-md); }

.pop-head { padding: 10px 12px 8px; color: #fff; }
.pop-type {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .88;
}
.pop-name { font-size: 13px; font-weight: 700; line-height: 1.25; margin-top: 2px; }
.pop-body { padding: 10px 12px; }
.pop-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  padding: 3px 0;
  border-bottom: 1px solid var(--line-soft);
}
.pop-row:last-of-type { border-bottom: 0; }
.pop-key { color: var(--ink-45); font-weight: 500; flex-shrink: 0; }
.pop-val { color: var(--ink); font-weight: 600; text-align: right; word-break: break-word; }
.pop-actions { display: flex; gap: 6px; margin-top: 9px; }
.pop-btn {
  flex: 1;
  border: 0;
  border-radius: var(--r-sm);
  padding: 7px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  background: var(--blue);
  color: #fff;
}
.pop-btn:hover { background: var(--blue-dark); }
.pop-btn.alt { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
.pop-btn.alt:hover { background: var(--line-soft); }

/* --- proximity rings (signature element) --- */
.ring-label {
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 700;
  fill: var(--blue-dark);
  letter-spacing: .04em;
}

/* --- leaflet chrome restyle --- */
.leaflet-control-zoom a {
  border-radius: var(--r-sm) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  font-weight: 600;
}
.leaflet-bar { box-shadow: var(--shadow-md) !important; border: 0 !important; }
.leaflet-control-attribution {
  font-family: var(--font);
  font-size: 10px !important;
  background: rgba(255,255,255,.86) !important;
}
.leaflet-control-scale-line {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  border-color: var(--ink-45) !important;
  color: var(--ink-70);
}

/* ==========================================================================
   TOASTS
   ========================================================================== */
.toast-host {
  position: fixed;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.toast {
  background: var(--ink);
  color: #fff;
  padding: 11px 16px;
  border-radius: var(--r-md);
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastIn .22s ease;
  border-left: 3px solid var(--blue);
}
.toast.is-error { border-left-color: var(--crimson); }
.toast.is-ok    { border-left-color: var(--green); }
.toast.is-out   { animation: toastOut .22s ease forwards; }

@keyframes toastIn  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .stats-banner .stat:nth-child(4) { display: none; }
}

@media (max-width: 1000px) {
  .stats-banner { display: none; }
  .brand-text h1 { font-size: 15px; }
}

@media (max-width: 820px) {
  :root { --header-h: 60px; }

  body { overflow: auto; }

  .panel-toggle { display: inline-flex; }
  .brand-sub { display: none; }
  .brand-text h1 {
    font-size: 13.5px;
    white-space: normal;
    max-width: 190px;
    line-height: 1.2;
  }

  .app-body { position: relative; }

  .sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    bottom: 0;
    width: min(92vw, 384px);
    transform: translateX(-101%);
    transition: transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--shadow-lg);
    z-index: 1200;
  }
  .sidebar.is-open { transform: none; }

  .map-wrap { position: absolute; inset: 0; }

  .legend { width: 152px; bottom: 20px; right: 8px; }
  .legend-body { max-height: 30vh; }
}

@media (max-width: 420px) {
  .app-header { gap: 8px; padding: 0 11px; }
  .brand-mark { width: 32px; height: 32px; }
  .panel-toggle span { display: none; }
  .panel-toggle { padding: 9px; }
  .legend { display: none; }
  .tab { font-size: 11px; }
}

/* ==========================================================================
   MOTION PREFERENCES / PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .sidebar, .app-header, .legend, .toast-host { display: none !important; }
}

/* ==========================================================================
   LANGUAGE SWITCHER — Google Translate glyph
   ========================================================================== */
.lang-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #93A1AD;
  flex-shrink: 0;
}

/* ==========================================================================
   ADMIN AREA SELECTORS
   ========================================================================== */
.admin-stack { display: flex; flex-direction: column; gap: 10px; }

.field-inline .field-label { margin-bottom: 4px; }

select.input:disabled {
  background: var(--panel);
  color: var(--ink-45);
  cursor: not-allowed;
}
.select-wrap:has(select:disabled)::after { opacity: .4; }

.ctx-divider {
  height: 1px;
  background: var(--line);
  margin: 13px 0 11px;
}

/* ==========================================================================
   MAP TOOL CLUSTER (pin + basemap)
   ========================================================================== */
.map-tools {
  position: absolute;
  top: 88px;
  right: 12px;
  z-index: 620;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-tool {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.map-tool:hover { background: var(--panel); border-color: var(--ink-45); }

.map-tool.is-active {
  background: var(--crimson);
  border-color: var(--crimson);
  color: #fff;
}
.map-tool.is-active::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 9px;
  border: 2px solid var(--crimson);
  opacity: .45;
  animation: toolPing 1.8s ease-out infinite;
  pointer-events: none;
}
.map-tool { position: relative; }

@keyframes toolPing {
  0%   { transform: scale(.9); opacity: .5; }
  75%  { transform: scale(1.25); opacity: 0; }
  100% { opacity: 0; }
}

/* Crosshair cursor while picking a location */
.leaflet-container.is-picking,
.leaflet-container.is-picking .leaflet-interactive { cursor: crosshair !important; }

/* ==========================================================================
   BASEMAP SWITCHER
   ========================================================================== */
.basemap-wrap { position: relative; }

.basemap-menu {
  position: absolute;
  top: 0;
  right: 44px;
  width: 178px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  animation: fadeUp .16s ease;
}

.basemap-menu-title {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-45);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 6px 7px;
}

.basemap-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: none;
  padding: 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
}
.basemap-opt:hover { background: var(--panel); }
.basemap-opt.is-active { background: var(--blue-soft); font-weight: 700; color: var(--blue-dark); }

.basemap-swatch {
  width: 26px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(26,37,48,.16);
  flex-shrink: 0;
  background-size: cover;
}

/* Miniature previews so the label is not the only cue */
.bs-hot       { background: linear-gradient(150deg,#F4EFE6 0%,#EADFC8 55%,#D9C7A5 100%); }
.bs-osm       { background: linear-gradient(150deg,#EAF0E2 0%,#DCE6D0 50%,#C8D9BC 100%); }
.bs-positron  { background: linear-gradient(150deg,#FBFBFB 0%,#EDEDED 60%,#DEDEDE 100%); }
.bs-dark      { background: linear-gradient(150deg,#3A3F45 0%,#25292E 60%,#16191C 100%); }
.bs-satellite { background: linear-gradient(150deg,#4B6A3E 0%,#7B7A4A 40%,#2E4A6B 100%); }
.bs-topo      { background: linear-gradient(150deg,#E8E0CC 0%,#C9BE9A 45%,#9DAF86 100%); }

/* ==========================================================================
   ROUTE ANIMATION
   ========================================================================== */
.route-end {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid var(--blue);
  background: #fff;
  box-shadow: 0 1px 5px rgba(26,37,48,.35);
}

/* Dash flow along road routes reinforces direction of travel */
.route-line { stroke-dasharray: none; }
.route-line.is-straight {
  animation: dashFlow 1.4s linear infinite;
}
@keyframes dashFlow {
  to { stroke-dashoffset: -32; }
}

/* Distance ring tag */
.ring-tag {
  font: 700 10px var(--font);
  color: var(--blue-dark);
  background: rgba(255,255,255,.88);
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  transform: translate(-50%,-50%);
}

/* ==========================================================================
   DARK / SATELLITE BASEMAP ADJUSTMENTS
   ========================================================================== */
body.is-dark-base .ring-tag {
  background: rgba(26,37,48,.82);
  color: #C9DCEC;
}
body.is-dark-base .leaflet-control-attribution {
  background: rgba(26,37,48,.8) !important;
  color: #C3CBD3;
}
body.is-dark-base .leaflet-control-attribution a { color: #8FB8DC; }
body.is-dark-base .leaflet-control-scale-line {
  border-color: rgba(255,255,255,.7) !important;
  color: #E4E9EE;
  background: rgba(26,37,48,.5);
}

/* ==========================================================================
   RESPONSIVE ADDITIONS
   ========================================================================== */
@media (max-width: 820px) {
  .map-tools { top: 80px; right: 8px; }
}

@media (max-width: 420px) {
  .lang-icon { display: none; }
  .basemap-menu { right: 44px; width: 158px; }
}

/* ==========================================================================
   NEAREST-SERVICE STAT — colour follows the nearest facility's category
   ========================================================================== */
.stat-value-dotted {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.12);
}

/* ==========================================================================
   TRANSIENT MAP NOTE (replaces the persistent instruction bar)
   ========================================================================== */
.map-note {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 615;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(440px, calc(100% - 110px));
  padding: 9px 8px 9px 13px;
  background: rgba(26,37,48,.94);
  backdrop-filter: blur(6px);
  color: #E7ECF1;
  border-radius: var(--r-md);
  border-left: 3px solid var(--blue);
  box-shadow: var(--shadow-lg);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  animation: noteIn .26s cubic-bezier(.2,.8,.3,1);
}
.map-note.is-out { animation: noteOut .24s ease forwards; }
.map-note svg { flex-shrink: 0; opacity: .8; }

@keyframes noteIn {
  from { opacity: 0; transform: translate(-50%,-12px); }
  to   { opacity: 1; transform: translate(-50%,0); }
}
@keyframes noteOut {
  to { opacity: 0; transform: translate(-50%,-10px); }
}

.note-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #9AA7B3;
  border-radius: 5px;
  cursor: pointer;
}
.note-close:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ==========================================================================
   FILTER -> RESULTS CALL TO ACTION
   ========================================================================== */
.card-cta {
  background: linear-gradient(180deg, #FDF7F7 0%, #FFFFFF 100%);
  border-color: #EBD5D5;
}
.cta-help {
  font-size: 11.5px;
  color: var(--ink-70);
  line-height: 1.45;
  margin-bottom: 11px;
}
.card-cta .btn-block { margin-bottom: 0; }

/* ==========================================================================
   MODALS (tutorial + small-screen notice)
   ========================================================================== */
body.modal-open { overflow: hidden; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(20,29,38,.62);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: modalIn .2s ease;
}
@keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  width: min(600px, 100%);
  max-height: min(680px, 92vh);
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(15,23,31,.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cardIn .26s cubic-bezier(.2,.8,.3,1);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 18px 14px;
  background: var(--ink);
  color: #fff;
  border-bottom: 3px solid var(--crimson);
}
.modal-head h2 { font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; }
.modal-sub {
  font-size: 11.5px;
  color: #93A1AD;
  margin-top: 3px;
  line-height: 1.4;
}

.modal-x {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0;
  background: rgba(255,255,255,.1);
  color: #C3CBD3;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.modal-x:hover { background: rgba(255,255,255,.2); color: #fff; }

/* --- body --- */
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}

.tut-figure {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px;
  margin-bottom: 15px;
}
.tut-figure svg { display: block; width: 100%; height: auto; }

.tut-step {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--crimson);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 5px;
}
.tut-text h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: 6px;
}
.tut-text p {
  font-size: 13px;
  color: var(--ink-70);
  line-height: 1.55;
}

/* --- progress dots --- */
.tut-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0 18px 14px;
}
.tut-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 0;
  background: var(--line);
  cursor: pointer;
  padding: 0;
  transition: background .15s, width .2s;
}
.tut-dot:hover { background: #C6CDD4; }
.tut-dot.is-active { background: var(--crimson); width: 20px; border-radius: 4px; }

/* --- footer --- */
.modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.tut-suppress { font-size: 11.5px; color: var(--ink-70); padding: 0; }
.modal-actions { display: flex; gap: 8px; flex-shrink: 0; }
.modal-actions .btn { padding: 9px 16px; }

/* --- small screen notice --- */
.modal-sm .modal-card {
  width: min(380px, 100%);
  padding: 26px 22px 22px;
  text-align: center;
  align-items: center;
}
.small-icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  background: var(--blue-soft);
  color: var(--blue-dark);
  border-radius: 50%;
  margin-bottom: 15px;
}
.modal-sm h2 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.modal-sm p {
  font-size: 12.5px;
  color: var(--ink-70);
  line-height: 1.55;
  margin-bottom: 18px;
}
.modal-sm .btn-block { margin-bottom: 0; }

/* The small-screen notice is gated in CSS as well as in script, so a stale
   flag or a scripting slip can never surface it on a desktop viewport. */
@media (min-width: 821px) {
  #smallScreen { display: none !important; }
}

/* ==========================================================================
   MOBILE HEADER — keep the hamburger inside the layout, never overflowing
   ========================================================================== */
@media (max-width: 820px) {
  .app-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    padding: 0 10px;
  }

  /* Brand shrinks and truncates instead of pushing the actions off-screen */
  .brand { min-width: 0; overflow: hidden; }
  .brand-text { min-width: 0; }
  .brand-text h1 {
    font-size: 13px;
    line-height: 1.2;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .header-actions {
    justify-self: end;
    gap: 7px;
    flex-shrink: 0;
  }

  .panel-toggle {
    display: inline-flex;
    padding: 8px 11px;
    font-size: 12px;
  }

  .map-note {
    top: 10px;
    max-width: calc(100% - 76px);
    font-size: 12px;
    padding: 8px 6px 8px 11px;
  }

  .modal { padding: 14px; }
  .modal-card { max-height: 94vh; }
  .modal-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .modal-actions { justify-content: stretch; }
  .modal-actions .btn { flex: 1; }
}

@media (max-width: 480px) {
  .app-header { padding: 0 8px; column-gap: 7px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand { gap: 8px; }
  .brand-text h1 { font-size: 12px; }
  .lang-toggle { padding: 2px; }
  .lang-btn { padding: 5px 8px; font-size: 11px; }
  .panel-toggle span { display: none; }
  .panel-toggle { padding: 8px; }
  .map-tools { top: 74px; }
  .tut-text h3 { font-size: 14px; }
  .tut-text p { font-size: 12.5px; }
}


/* ==========================================================================
   TUTORIAL — scenario framing, call-outs and dual navigation notes
   ========================================================================== */
.tut-scenario {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-70);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 11px 18px;
  font-style: italic;
}

/* Numbered rings drawn over the illustration draw the eye before the text. */
.tut-callout { animation: calloutIn .4s cubic-bezier(.2,.8,.3,1) backwards; }
.tut-callout:nth-of-type(2) { animation-delay: .12s; }

@keyframes calloutIn {
  from { opacity: 0; transform: scale(.75); transform-origin: center; }
  to   { opacity: 1; transform: scale(1); }
}

.tut-how {
  margin-top: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.how-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px 10px;
}
.how-row p {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-70);
  margin: 0;
  flex: 1;
}

.how-tag {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 7px;
  border-radius: 4px;
  margin-top: 1px;
  white-space: nowrap;
}
.how-map   { background: var(--blue-soft);  color: var(--blue-dark); }
.how-panel { background: var(--crimson-soft); color: var(--crimson-dark); }

/* ==========================================================================
   ROUTE VEHICLE — humanitarian evacuation livery
   ========================================================================== */
.route-runner {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.runner-veh {
  display: block;
  line-height: 0;
  filter: drop-shadow(0 2px 4px rgba(26,37,48,.42));
  /* Rotation is eased frame by frame in script. A CSS transition on top would
     fight that easing and leave the vehicle lagging behind its own position. */
  will-change: transform;
}

.runner-halo {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #418FDE;
  opacity: .28;
  animation: runnerPulse 1.5s ease-out infinite;
}

@keyframes runnerPulse {
  0%   { transform: scale(.45); opacity: .42; }
  80%  { transform: scale(1.5); opacity: 0; }
  100% { opacity: 0; }
}

/* Legend swatch for the numbered rank markers. They inherit their category's
   colour on the map, so the legend shows the shape rather than one colour. */
.legend-sym.is-rank {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--ink-70);
  color: #fff;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(26,37,48,.18);
  font-size: 8px;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}


/* ==========================================================================
   TUTORIAL FOOTER CONTROLS
   Quiet text buttons, one primary action, and a compact language picker that
   stays reachable on every slide.
   ========================================================================== */
.btn-quiet {
  border: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-45);
  padding: 9px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.btn-quiet:hover:not(:disabled) { color: var(--ink); background: var(--line-soft); }
.btn-quiet:disabled { opacity: .38; cursor: not-allowed; }

.tut-lang-pick { position: relative; flex-shrink: 0; }

.tut-lang-pick select {
  appearance: none;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 28px 9px 12px;
  cursor: pointer;
  transition: border-color .15s;
}
.tut-lang-pick select:hover { border-color: var(--ink-45); }
.tut-lang-pick select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Chevron, matching the sidebar selects */
.tut-lang-pick::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--ink-45);
  border-bottom: 2px solid var(--ink-45);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.modal-actions { align-items: center; }

@media (max-width: 480px) {
  .modal-actions { flex-wrap: wrap; }
  .btn-quiet { padding: 9px 8px; font-size: 12.5px; }
  .tut-lang-pick select { padding: 9px 26px 9px 10px; }
}

/* ==========================================================================
   ATTENTION CUE
   Nothing works until a location is set, so the two controls that set one are
   pulsed after the walkthrough closes. Both share the same rhythm so they read
   as one instruction in two places rather than two competing prompts.
   ========================================================================== */

/* --- sidebar "Drop a pin on the map" button --- */
.btn.is-calling {
  position: relative;
  background: var(--highlight);
  border-color: var(--highlight);
  color: #fff;
  animation: callGlow 1.5s ease-in-out infinite;
}
.btn.is-calling:hover { background: var(--highlight-dark); }

.btn.is-calling::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--r-md) + 4px);
  border: 2.5px solid var(--highlight);
  opacity: 0;
  animation: callRing 1.5s cubic-bezier(.2,.7,.4,1) infinite;
  pointer-events: none;
}

@keyframes callGlow {
  0%, 100% { box-shadow: 0 0 0 0 #337AB7; }
  50%      { box-shadow: 0 3px 20px 3px #337AB7; }
}

@keyframes callRing {
  0%   { transform: scale(.97); opacity: .9; }
  75%  { transform: scale(1.13); opacity: 0; }
  100% { opacity: 0; }
}

/* --- map pin tool --- */
.map-tool.is-calling {
  background: var(--highlight);
  border-color: var(--highlight);
  color: #fff;
  animation: callToolGlow 1.5s ease-in-out infinite;
}

/* Two expanding rings, offset, so the small icon still reads as urgent
   against a busy basemap without inflating the button itself. */
.map-tool.is-calling::before,
.map-tool.is-calling::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 10px;
  border: 2.5px solid var(--highlight);
  opacity: 0;
  animation: callRing 1.5s cubic-bezier(.2,.7,.4,1) infinite;
  pointer-events: none;
}
.map-tool.is-calling::after { animation-delay: .45s; }

@keyframes callToolGlow {
  0%, 100% { box-shadow: 0 1px 4px rgba(26,37,48,.3); }
  50%      { box-shadow: 0 3px 22px 4px #337AB7; }
}

/* An active pin mode must win over the cue: the cue is asking for the very
   thing the active state confirms has happened. */
.map-tool.is-active.is-calling,
.btn.is-active.is-calling {
  animation: none;
}
.map-tool.is-active.is-calling::before,
.map-tool.is-active.is-calling::after,
.btn.is-active.is-calling::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-calling,
  .map-tool.is-calling { animation: none; }
  .btn.is-calling::after,
  .map-tool.is-calling::before,
  .map-tool.is-calling::after { display: none; }
}