/* ==========================================================================
   Borneo's Day — app layer on the tanghoong design system (vendor/tanghoong-*).
   The first block is this app's own tokens: the map ground and the data scales.
   Everything below it uses tokens only.
   ========================================================================== */

:root {
  /* --- Map ground: neutral, built from the system surfaces ----------------- */
  --map-sea:          light-dark(#e4e8ee, #000000);
  --map-land:         light-dark(#f1f2f4, #0e0e10);
  --map-land-focus:   var(--bg-elevated);
  --map-border:       light-dark(#0000002e, #ffffff24);
  --map-border-focus: light-dark(#00000047, #ffffff3a);
  --map-province:     light-dark(#00000014, #ffffff12);
  --map-province-focus: light-dark(#00000024, #ffffff1f);

  /* --- Data scales -----------------------------------------------------------
     Same in both themes: these are measurements, and a colour that changed with
     the theme would stop matching the legend people remember. Text on them is
     always --on-data. */
  --aqi-1: #3ac47d;  /* 0-50 good */
  --aqi-2: #e8c547;  /* 51-100 moderate */
  --aqi-3: #ff8a3d;  /* 101-150 unhealthy for sensitive groups */
  --aqi-4: #ef4b4b;  /* 151-200 unhealthy */
  --aqi-5: #a45de0;  /* 201-300 very unhealthy */
  --aqi-6: #9b2f4b;  /* 301+ hazardous */
  --aqi-none: #86868b;
  --fire-1: #ffd166; /* FRP < 8 MW */
  --fire-2: #ff8a3d; /* 8-20 MW */
  --fire-3: #ff4d3d; /* >= 20 MW */
  --rain-1: #7cc4ff; /* 1-10 mm */
  --rain-2: #3f96ff; /* 10-30 mm */
  --rain-3: #2f62ea; /* 30-60 mm */
  --rain-4: #7b4dff; /* 60-100 mm */
  --rain-5: #d44dff; /* 100+ mm */
  --on-data: #111114;

  /* Theme-aware data inks */
  --fire-edge: light-dark(#ffffff, #000000);
  --quake: var(--info);
  --wind-ink: light-dark(#1b3a66, #dce9ff);

  /* One colour per map layer, for its toggle */
  --layer-fires: var(--fire-2);
  --layer-air: var(--aqi-1);
  --layer-rain: var(--rain-2);
  --layer-wind: var(--wind-ink);
  --layer-quakes: var(--quake);
  --layer-alerts: var(--danger);

  /* The system's smallest step is 13px; dense map labels need one below it. */
  --fs-2xs: 0.6875rem;  /* 11px */

  /* Layout of the map chrome */
  --bar-h: 44px;                                   /* layer toggle row */
  --chrome-top: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + var(--bar-h) + var(--s-4));
  --panel-w: 384px;
}

/* ---------- page -------------------------------------------------------- */
html, body { height: 100%; overflow: hidden; }
body { font-size: var(--fs-sm); background: var(--map-sea); }

#map { position: fixed; inset: 0; background: var(--map-sea); }
.leaflet-container { background: var(--map-sea); font: inherit; }
/* base.css caps svg, img and canvas at 100% width. Leaflet only undoes that for its own panes;
   the custom panes here (basemap, quakes, fires, wind) draw larger than the view on purpose. */
.leaflet-container svg, .leaflet-container canvas, .leaflet-container img { max-width: none; max-height: none; }
.leaflet-control-attribution {
  background: color-mix(in srgb, var(--bg) 72%, transparent) !important;
  color: var(--text-3) !important;
  font-size: var(--fs-2xs);
}
.leaflet-control-attribution a { color: var(--text-2) !important; }

/* Inline icons sit on the text line (base.css makes every svg a block). */
svg.i { display: inline-block; inline-size: 1.15em; block-size: 1.15em; flex: none; vertical-align: -0.2em; }
.iconbtn svg.i { inline-size: 18px; block-size: 18px; vertical-align: 0; stroke-width: 1.8; }
.iconbtn:disabled { opacity: 0.4; cursor: default; }

/* ---------- header ------------------------------------------------------ */
.app-head {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: var(--z-head);
  padding-block-start: env(safe-area-inset-top, 0px);
  background: var(--bg-glass);
  border-block-end: 1px solid var(--hairline-soft);
}
@supports (backdrop-filter: blur(1px)) {
  .app-head {
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
  }
}
.app-head__in {
  display: flex; align-items: center; gap: var(--s-3);
  block-size: var(--nav-h);
  padding-inline: var(--s-4);
}
.brand { min-inline-size: 0; flex: 1; }
.brand__text { min-inline-size: 0; }
.brand__name { font-size: clamp(var(--fs-sm), 0.8rem + 1vw, var(--fs-body)); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand__meta {
  font-size: var(--fs-2xs); font-weight: 400; line-height: 1.3; letter-spacing: 0;
  color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.head-end { gap: var(--s-2); flex: none; }
.head-end .select { inline-size: auto; max-inline-size: clamp(5.5rem, 26vw, 7.5rem); min-height: 44px; }

/* ---------- layer toggles ----------------------------------------------- */
.layerbar {
  position: fixed; z-index: var(--z-head);
  inset-block-start: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + var(--s-2));
  inset-inline: 0;
  display: flex; gap: var(--s-2);
  padding-inline: var(--s-4);
  overflow-x: auto; scrollbar-width: none;
}
.layerbar::-webkit-scrollbar { display: none; }
/* A toggle, not a .chip: chips in the system are passive labels. */
.toggle {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--bar-h);
  padding-inline: var(--s-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-chip);
  background: var(--bg-elevated);
  color: var(--text-3);
  font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap; cursor: pointer;
  box-shadow: var(--sh-sm);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.toggle:hover { color: var(--text); }
.toggle:active { scale: 0.97; }
.toggle svg.i { inline-size: 16px; block-size: 16px; vertical-align: 0; stroke-width: 2; }
.toggle[aria-pressed="true"] {
  color: var(--text);
  border-color: color-mix(in oklab, var(--c) 55%, transparent);
  background: color-mix(in oklab, var(--c) 14%, var(--bg-elevated));
}
.toggle[aria-pressed="true"] svg.i { color: var(--c); }
/* Just switched on by opening a card: a brief tint confirms the map changed. */
.toggle.flash { background: color-mix(in oklab, var(--c) 32%, var(--bg-elevated)); }
.toggle__n { color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

.banner {
  position: fixed; z-index: var(--z-head);
  inset-block-start: var(--chrome-top);
  inset-inline: var(--s-4);
  font-size: var(--fs-xs);
  /* Over a busy map the translucent note wash is unreadable; lay it on a solid surface. */
  background: color-mix(in oklab, var(--warn) 14%, var(--bg-elevated));
  box-shadow: var(--sh-md);
}

/* ---------- map controls ------------------------------------------------ */
.map-ctl {
  position: fixed; z-index: var(--z-head);
  inset-inline-start: var(--s-4);
  inset-block-end: calc(var(--peek-h, 180px) + env(safe-area-inset-bottom, 0px) + var(--s-3));
  display: flex; flex-direction: column; gap: var(--s-2);
}
.map-ctl .iconbtn { box-shadow: var(--sh-sm); }
body[data-sheet="half"] .map-ctl, body[data-sheet="full"] .map-ctl { display: none; }

/* ---------- legend ------------------------------------------------------ */
.legend {
  position: fixed; z-index: var(--z-head);
  inset-inline-end: var(--s-4);
  inset-block-end: calc(var(--peek-h, 180px) + env(safe-area-inset-bottom, 0px) + var(--s-3));
  max-inline-size: 12rem;
  max-block-size: calc(100dvh - var(--chrome-top) - var(--peek-h, 180px) - var(--s-8));
  overflow-y: auto;
  padding: 0 var(--s-3) var(--s-2);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  box-shadow: var(--sh-md);
  font-size: var(--fs-xs); color: var(--text-2);
}
.legend__toggle {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 44px; inline-size: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-2);
}
.legend[data-open="false"] { padding-block-end: 0; }
.legend__group + .legend__group { margin-block-start: var(--s-3); }
.legend__h {
  display: flex; align-items: center; gap: var(--s-1);
  margin-block-end: var(--s-1);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-3);
}
.legend__row { display: flex; align-items: center; gap: var(--s-2); line-height: 1.7; }
.legend__note { color: var(--text-3); line-height: 1.4; }
.sw { inline-size: 10px; block-size: 10px; flex: none; border-radius: calc(var(--s-1) / 2); }
.sw--round { border-radius: 50%; }
.seg {
  display: inline-flex; margin-block: var(--s-1);
  border: 1px solid var(--hairline); border-radius: var(--r-chip); overflow: hidden;
}
.seg button {
  min-height: 36px; padding-inline: var(--s-3);
  border: 0; background: none; cursor: pointer;
  font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--text-3);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.seg button[aria-pressed="true"] { background: color-mix(in oklab, var(--layer-rain) 22%, transparent); color: var(--text); font-weight: 600; }

/* ---------- info panel (bottom sheet on phones, side panel from 900px) --- */
.sheet {
  position: fixed; z-index: var(--z-sheet);
  inset-inline: 0; inset-block-end: 0;
  display: flex; flex-direction: column;
  max-block-size: calc(100dvh - env(safe-area-inset-top, 0px) - var(--nav-h) - var(--s-2));
  padding-block-end: env(safe-area-inset-bottom, 0px);
  border: 1px solid var(--hairline-soft); border-block-end: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--bg-elevated);
  box-shadow: var(--sh-lg);
  transform: translateY(calc(100% - var(--peek-h, 180px) - env(safe-area-inset-bottom, 0px)));
  transition: transform var(--dur-slow) var(--ease);
}
.sheet[data-state="half"] { transform: translateY(calc(100% - min(56dvh, 100%))); }
.sheet[data-state="full"] { transform: translateY(0); }
.sheet:focus { outline: none; }

.grabber {
  display: grid; place-items: center; flex: none;
  min-height: 28px; padding: var(--s-2) 0 var(--s-1);
  border: 0; background: none; cursor: grab; touch-action: none;
}
.grabber span { inline-size: 40px; block-size: 5px; border-radius: var(--r-chip); background: var(--hairline); }

/* Stat cards: the system's .stat__fig / __label / __note inside a tappable card. */
.statbar {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(var(--s-1), 1.6vw, var(--s-2));
  padding: var(--s-1) clamp(var(--s-2), 3vw, var(--s-3)) var(--s-3);
  flex: none;
}
.statcard {
  display: flex; flex-direction: column; align-items: flex-start;
  min-inline-size: 0; min-height: 44px;
  padding: var(--s-2) clamp(var(--s-1), 1.8vw, var(--s-2));
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  color: var(--text);
  text-align: start; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.statcard:hover { border-color: var(--hairline); }
.statcard:active { scale: 0.97; }
.statcard[aria-current="true"] { border-color: color-mix(in oklab, var(--accent) 50%, transparent); background: var(--accent-wash); }
.statcard .stat__label {
  display: flex; align-items: center; gap: 3px; max-inline-size: 100%;
  margin: 0; font-size: var(--fs-2xs); letter-spacing: clamp(0em, 0.5vw - 0.04em, 0.04em);
  overflow: hidden; white-space: nowrap;
}
.statcard .stat__label svg.i { inline-size: 12px; block-size: 12px; stroke-width: 2.4; }
.statcard .stat__fig { margin-block-start: var(--s-1); font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.375rem); }
.statcard .stat__fig small { margin-inline-start: 1px; font-size: var(--fs-2xs); font-weight: 500; color: var(--text-3); }
.statcard .stat__note {
  max-inline-size: 100%; margin: 0;
  font-size: var(--fs-2xs); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dot { display: inline-block; inline-size: 7px; block-size: 7px; margin-inline-end: 3px; border-radius: 50%; vertical-align: 1px; }

/* Tabs: the system's .tabs, stacked icon over a short label so six fit on a phone. */
.sheet .tabs { flex: none; gap: 0; padding-inline: var(--s-2); overflow-x: auto; scrollbar-width: none; }
.sheet .tabs button {
  flex: 1 1 0; min-inline-size: 3.25rem; min-height: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: var(--s-2) var(--s-1);
  font-size: var(--fs-2xs); letter-spacing: 0.01em;
}
.sheet .tabs button svg.i { inline-size: 18px; block-size: 18px; stroke-width: 1.8; }

.sheet-body {
  flex: 1; min-block-size: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-4) var(--s-4) var(--s-8);
}
.sheet-body > * + * { margin-block-start: var(--s-4); }
.sec-title {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3);
}
.sheet-body > .sec-title:not(:first-child) { margin-block-start: var(--s-6); }
.sheet-body p { font-size: var(--fs-sm); color: var(--text-2); }
.sheet-body .fine { font-size: var(--fs-xs); color: var(--text-3); }
.sheet-body .empty { padding: var(--s-10) var(--s-4); }

/* ---------- lists ------------------------------------------------------- */
.list { list-style: none; padding: 0; margin-block-start: var(--s-2); }
.list > li { margin: 0; }
.list > li + li { border-block-start: 1px solid var(--hairline-soft); }
.list__head {
  padding: var(--s-4) 0 var(--s-1);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3);
}
.list > li + li.list__head { border: 0; }
.list__item {
  display: flex; align-items: center; gap: var(--s-3);
  inline-size: 100%; min-height: 56px;
  padding: var(--s-2) var(--s-1);
  border: 0; border-radius: var(--r-sm); background: none;
  color: var(--text); text-align: start; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
button.list__item:hover { background: color-mix(in oklab, var(--text) 4%, transparent); }
.list__main { display: block; flex: 1; min-inline-size: 0; }
.list__t { display: block; font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list__t small { font-weight: 400; color: var(--text-3); font-size: var(--fs-xs); }
.list__d { display: block; font-size: var(--fs-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list__r { flex: none; text-align: end; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; line-height: 1.5; }
.list__r svg.i { inline-size: 13px; block-size: 13px; }

.pill {
  display: inline-grid; place-items: center; flex: none;
  min-inline-size: 48px; min-height: 30px; padding-inline: var(--s-2);
  border-radius: var(--r-sm);
  color: var(--on-data); font-weight: 650; font-variant-numeric: tabular-nums;
}
.pill--line { background: none; color: var(--c); box-shadow: inset 0 0 0 1.5px var(--c); }
.pill--lg { min-inline-size: 64px; min-height: 48px; font-size: var(--fs-lead); }

/* Horizontal bars */
.bars { display: grid; gap: var(--s-1); margin-block-start: var(--s-2); }
.bar-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 3.25rem; gap: var(--s-2); align-items: center; font-size: var(--fs-xs); }
.bar-row__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row__n { text-align: end; color: var(--text-2); font-variant-numeric: tabular-nums; }
.track { block-size: 8px; border-radius: var(--r-chip); background: var(--bg-sunken); overflow: hidden; }
.track__fill { block-size: 100%; border-radius: inherit; background: var(--fire-2); }

/* ---------- detail card ------------------------------------------------- */
.detail {
  padding: var(--s-4);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
}
.detail__head { display: flex; align-items: flex-start; gap: var(--s-3); }
.detail__title { flex: 1; min-inline-size: 0; font-size: var(--fs-body); font-weight: 600; line-height: 1.35; letter-spacing: -0.012em; }
.detail__title small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--text-3); letter-spacing: 0; }
.detail__close { margin-block-start: calc(var(--s-2) * -1); margin-inline-end: calc(var(--s-2) * -1); }
.detail > * + * { margin-block-start: var(--s-3); }
.aqi-now { display: flex; align-items: center; gap: var(--s-3); }
.aqi-now__label { font-weight: 600; }
.aqi-now__meta { font-size: var(--fs-xs); color: var(--text-3); }
.facts--compact {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s-1) var(--s-4);
  padding: 0; background: none; border-radius: 0;
}
.facts--compact dt { font-size: var(--fs-2xs); display: flex; align-items: center; gap: var(--s-1); }
.facts--compact dd { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.forecast { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.forecast__day {
  padding: var(--s-2) var(--s-1);
  border-radius: var(--r-sm); background: var(--bg-elevated);
  font-size: var(--fs-2xs); line-height: 1.5; text-align: center; color: var(--text-2);
}
.forecast__day b { display: block; font-size: var(--fs-xs); color: var(--text); }

/* ---------- charts ------------------------------------------------------ */
.chart { inline-size: 100%; block-size: 110px; }
.chart .grid line { stroke: var(--chart-grid); }
.chart text { fill: var(--text-3); font-size: 10px; }
.chart .hit { fill: transparent; cursor: pointer; }
.chart .bar { fill: var(--fire-2); }
.chart .bar--other { fill: color-mix(in oklab, var(--text-3) 45%, transparent); }
.chart .line { fill: none; stroke: var(--info); stroke-width: 2; stroke-linejoin: round; }
.chart .pt { fill: var(--info); stroke: var(--bg-elevated); stroke-width: 2; }
.chart .now { stroke: var(--text-3); stroke-dasharray: 3 3; }
.chart .xhair { stroke: var(--text-2); }
.chart-key { display: flex; gap: var(--s-4); font-size: var(--fs-xs); color: var(--text-2); }
.chart-key i { display: inline-block; inline-size: 10px; block-size: 10px; margin-inline-end: var(--s-1); border-radius: calc(var(--s-1) / 2); vertical-align: -1px; }
.tooltip {
  position: fixed; z-index: var(--z-toast); pointer-events: none;
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--bg-elevated); box-shadow: var(--sh-md);
  font-size: var(--fs-xs); white-space: nowrap;
}

/* ---------- about / credits --------------------------------------------- */
.sources .list__item { cursor: default; align-items: flex-start; }
.sources .list__d { white-space: normal; }
.credit {
  display: flex; align-items: center; gap: var(--s-3);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--hairline-soft);
  font-size: var(--fs-xs); color: var(--text-2);
}
.credit svg { inline-size: 32px; block-size: 32px; flex: none; }
.credit p { font-size: var(--fs-xs); }

/* ---------- map features ------------------------------------------------ */
/* Basemap paths are styled here, not in script, so they follow the theme. */
.leaflet-pane path.land { fill: var(--map-land); stroke: var(--map-border); fill-opacity: 1; }
.leaflet-pane path.land--focus { fill: var(--map-land-focus); stroke: var(--map-border-focus); }
.leaflet-pane path.prov { stroke: var(--map-province); }
.leaflet-pane path.prov--focus { stroke: var(--map-province-focus); }
.leaflet-pane path.prov.is-selected { stroke: var(--accent); stroke-width: 2px; }
.leaflet-pane path.quake-ring { stroke: var(--quake); fill: var(--quake); }

.fire-canvas, .wind-canvas { position: absolute; inset-block-start: 0; inset-inline-start: 0; pointer-events: none; }
/* Empty parts of an SVG layer let clicks through; only drawn shapes catch them. */
.leaflet-pane > svg { pointer-events: none; }
.leaflet-container.fire-hover, .fire-hover .leaflet-interactive { cursor: pointer; }
.grid-overlay {
  filter: blur(2px);
  mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 70%, transparent 100%);
}
.rain-overlay { filter: blur(1.5px); }

.city-marker { display: flex; flex-direction: column; align-items: center; }
.city-marker__aqi {
  display: grid; place-items: center;
  min-inline-size: 30px; block-size: 22px; padding-inline: 5px;
  border: 2px solid var(--map-sea); border-radius: var(--r-chip);
  color: var(--on-data); font-size: var(--fs-2xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.city-marker__name {
  display: none; margin-block-start: 2px;
  font-size: var(--fs-2xs); font-weight: 500; color: var(--text); white-space: nowrap;
  text-shadow: 0 0 3px var(--map-sea), 0 0 6px var(--map-sea);
}
.show-labels .city-marker__name { display: block; }
.event-marker {
  display: grid; place-items: center;
  inline-size: 30px; block-size: 30px;
  border: 2px solid var(--map-sea); border-radius: var(--r-sm);
  color: var(--accent-ink);
  transform: rotate(45deg);
}
.event-marker > span { display: grid; transform: rotate(-45deg); }
.event-marker svg.i { inline-size: 16px; block-size: 16px; stroke-width: 2.4; }
.event-marker--green { background: var(--ok); }
.event-marker--orange { background: var(--warn); }
.event-marker--red { background: var(--danger); }
.wind-arrow svg { overflow: visible; }
.wind-arrow path { fill: none; stroke: var(--wind-ink); stroke-opacity: 0.6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.me-marker {
  inline-size: 16px; block-size: 16px; border-radius: 50%;
  background: var(--info); border: 3px solid var(--bg-elevated);
  box-shadow: 0 0 0 6px var(--info-wash);
}

/* ---------- wide screens: side panel ------------------------------------ */
@media (width >= 900px) {
  :root { --chrome-top: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + var(--bar-h) + var(--s-4)); }
  .app-head__in { padding-inline: var(--s-5); }
  .brand__meta { font-size: var(--fs-xs); }
  .head-end .select { max-inline-size: 10rem; }
  .layerbar { inset-inline-start: calc(var(--panel-w) + var(--s-8)); padding-inline: 0 var(--s-4); }
  .banner { inset-inline-start: calc(var(--panel-w) + var(--s-8)); inset-inline-end: calc(var(--s-4) + 44px + var(--s-4)); }
  .sheet {
    inset-inline-start: var(--s-4); inset-inline-end: auto;
    inset-block-start: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + var(--s-3));
    inset-block-end: var(--s-4);
    inline-size: var(--panel-w); max-block-size: none;
    border: 1px solid var(--hairline-soft); border-radius: var(--r-lg);
    transform: none !important;
  }
  .grabber { display: none; }
  .statbar { padding-block-start: var(--s-3); }
  .map-ctl, body[data-sheet] .map-ctl {
    display: flex;
    inset-inline-start: auto; inset-inline-end: var(--s-4);
    inset-block-end: auto; inset-block-start: var(--chrome-top);
  }
  .legend { inset-block-end: var(--s-8); max-block-size: calc(100dvh - var(--chrome-top) - 200px); }
}