:root {
  --bg: #f4f2ec;
  --surface: #ffffff;
  --text: #1d2b24;
  --muted: #66736b;
  --line: #e2ded3;
  --accent: #2f6f4f;
  --accent-text: #ffffff;
  --live: #c92a2a; /* red, as "live" usually is, and apart from the orange of warnings; white text 5.4:1 */
  --ok: #2f9e5b;
  --off: #a3a9a5;
  --warn: #c2571a;
  --me: #1a73e8; /* the owner's own position (me.js reads it for the dot) */
  --shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 16px rgb(0 0 0 / 8%);
  --sheet-shadow: 0 -2px 18px rgb(0 0 0 / 14%);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121814;
    --surface: #1b231e;
    --text: #e7ece8;
    --muted: #93a098;
    --line: #2c3730;
    --accent: #5fb38a;
    --accent-text: #0e1611;
    --live: #e03131; /* a lighter red would leave the white text too faint */
    --ok: #5fcf8c;
    --off: #5c6660;
    --warn: #f08a4b;
    --me: #8ab4f8;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 16px rgb(0 0 0 / 30%);
    --sheet-shadow: 0 -2px 18px rgb(0 0 0 / 45%);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
/* A hidden element stays hidden whatever display a class or id rule gives it. */
[hidden] { display: none !important; }
body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* UI icons only: a bare `svg` rule would also shrink the map's own SVG layer (routes, dots). */
:is(.tabs, .card) svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- top bar ---------- */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  z-index: 2;
}
.bar h1 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.bar-actions { display: flex; align-items: center; gap: 14px; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--off); }
.live[data-state="live"]::before { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.link-button { font: inherit; font-size: 13px; color: var(--muted); background: none; border: none; padding: 4px 0; cursor: pointer; }
.link-button:hover { color: var(--text); text-decoration: underline; }

/* ---------- layout: map + side panel (desktop) ---------- */
.layout { flex: 1; display: grid; grid-template-columns: 1fr 380px; min-height: 0; }
/* isolation: Leaflet's panes and controls (z-index up to 1000) and the dog chips stack inside the
   map only, so the bottom sheet (z-index 600, phones) is always drawn above all of them */
.map-wrap { position: relative; min-height: 0; isolation: isolate; }
.map { position: absolute; inset: 0; }
.panel { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--bg); }
.panel-body { flex: 1; overflow-y: auto; padding: 12px; overscroll-behavior: contain; }
.sheet-handle { display: none; }

.tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface); border-bottom: 1px solid var(--line); }
.tabs button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tabs button:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }

/* dog chips floating over the map */
.dog-chips {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 500;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  pointer-events: none;
}
.dog-chip {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
  background: var(--surface);
  border: 2px solid transparent;
  border-radius: 999px;
  box-shadow: var(--shadow);
  cursor: pointer;
  white-space: nowrap;
}
.dog-chip[aria-selected="true"] { border-color: var(--accent); }
.dog-chip[data-online="false"] .coat { filter: grayscale(0.7); opacity: 0.7; }
.dog-chip[data-live="true"]::after { content: "LIVE"; font-size: 10px; font-weight: 750; color: #fff; background: var(--live); border-radius: 4px; padding: 1px 5px; }

/* the dog's two coat colours, split diagonally; a dark ring keeps a white coat visible */
.coat {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c1, #ccc) 0 50%, var(--c2, #333) 50% 100%);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 45%);
  flex: none;
}
.coat-large { width: 44px; height: 44px; }

/* map marker */
.dog-marker { position: relative; width: 36px; height: 36px; }
.dog-marker .coat { width: 36px; height: 36px; border: 3px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 55%), 0 2px 6px rgb(0 0 0 / 35%); }
.dog-marker[data-online="false"] .coat { filter: grayscale(0.8); opacity: 0.75; }
/* the selected dog: a grey glow around the white border, always the same; no hue of its own, so
   it never competes with the speed colours of the tail and shows on the pale map */
.dog-marker[data-selected="true"] .coat {
  box-shadow: 0 0 0 1px rgb(0 0 0 / 55%), 0 0 0 8px rgb(60 60 60 / 35%), 0 2px 6px rgb(0 0 0 / 35%);
}
/* the same glow sends out one fading wave per position that arrives, in any mode (live.js adds the
   class), so the pulse keeps the tracker's pace and stops when it goes quiet */
.dog-marker.pulse[data-selected="true"] .coat { animation: live-pulse var(--pulse-ms, 1200ms) ease-out 1; }
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 1px rgb(0 0 0 / 55%), 0 0 0 8px rgb(60 60 60 / 35%), 0 0 0 8px rgb(60 60 60 / 35%), 0 2px 6px rgb(0 0 0 / 35%); }
  100% { box-shadow: 0 0 0 1px rgb(0 0 0 / 55%), 0 0 0 8px rgb(60 60 60 / 35%), 0 0 0 20px rgb(60 60 60 / 0%), 0 2px 6px rgb(0 0 0 / 35%); }
}
@media (prefers-reduced-motion: reduce) {
  .dog-marker.pulse[data-selected="true"] .coat { animation: none; }
}
/* heading arrow: a small triangle just outside the disc, rotated around its centre */
.dog-marker .heading {
  position: absolute;
  inset: 0;
  transform: rotate(var(--heading, 0deg));
  pointer-events: none;
}
.dog-marker .heading::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 12px solid #1d2b24;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
}

/* ---------- dog card ---------- */
.dogs { display: grid; gap: 12px; }
.empty { color: var(--muted); text-align: center; margin: 32px 8px; }
.empty code { background: var(--surface); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line); }

.card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px 14px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 10px;
}
.card[aria-current="true"] { border-color: var(--accent); }
.card-head { display: flex; align-items: center; gap: 12px; }
.card-head .coat { width: 40px; height: 40px; }
.card-title { flex: 1; min-width: 0; }
.name { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; }
.address { margin: 2px 0 0; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* distance and direction from the owner (me.js), in the blue of the owner's dot */
.from-me { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--me); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Leaflet's + / − and the locate button in the app's colours (Leaflet's own are white on black in
   dark mode too, where the light --me blue would be faint on white) */
.leaflet-bar a { background-color: var(--surface); color: var(--text); border-bottom-color: var(--line); }
.leaflet-bar a:hover, .leaflet-bar a:focus { background-color: var(--bg); color: var(--text); }
.leaflet-bar a.leaflet-disabled { background-color: var(--surface); color: var(--off); }
/* the locate button above + and − */
.me-control a { display: flex; align-items: center; justify-content: center; }
.me-control svg { width: 16px; height: 16px; fill: currentColor; }
.me-control a[aria-pressed="true"], .me-control a[aria-pressed="true"]:hover { color: var(--me); }
.me-control a:focus-visible { outline: 2px solid var(--me); outline-offset: 1px; }
/* the owner's dot while the app was in the background: last known place, greyed */
.me-stale { fill: #9aa0a6; }

.icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
}
.icon-button:disabled { opacity: 0.4; cursor: not-allowed; }
.card-head .icon-button { flex: none; }
.icon-button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* "Notatka" (note.js): an icon button like the centre one, a quieter colour, away from LIVE /
   Światło / Dźwięk */
.note-button { color: var(--muted); }
.note-button:hover { color: var(--text); }

.note-dialog {
  width: min(420px, calc(100% - 32px));
  padding: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.note-dialog::backdrop { background: rgb(0 0 0 / 45%); }
.note-form { display: grid; gap: 8px; }
.note-form h2 { margin: 0; font-size: 17px; font-weight: 650; }
.note-dog { color: var(--muted); font-weight: 500; }
.note-dog:not(:empty)::before { content: "· "; }
.note-form textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
  font-size: 16px; /* 16 px keeps iOS from zooming in on focus */
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}
.note-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.note-count { text-align: right; font-variant-numeric: tabular-nums; }

.status-line { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.status-line li {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.st-online[data-online="true"] { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.st-battery[data-low="true"] { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }

.live-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--live) 13%, transparent);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.live-row[hidden] { display: none; }
.live-text { flex: 1; min-width: 0; }
.live-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--live); animation: pulse 1.6s infinite; flex: none; }
@keyframes pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .live-pulse { animation: none; } }
/* waiting for the tracker or refused (live.js liveView): nothing is coming at the live pace */
.live-row:not([data-state="running"]) .live-pulse { animation: none; opacity: 0.4; }
.live-row .stop {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  background: var(--live);
  color: #fff;
  cursor: pointer;
}

.quick { display: flex; gap: 10px; align-items: stretch; }
.live-pill {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--live);
  border: none;
  border-radius: 14px;
  cursor: pointer;
}
.live-pill[hidden] { display: none; }
.live-pill svg { width: 22px; height: 22px; }
.round {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 68px;
  min-height: 52px;
  padding: 4px 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
}
.round:disabled { opacity: 0.4; cursor: not-allowed; }
.quick button:focus-visible, .mode-chip:focus-visible, .dog-chip:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.health { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
/* live tail speed legend; colours match SPEED_CLASSES in web/js/live.js */
.speed-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-size: 12px; color: var(--muted); }
.speed-legend span { display: inline-flex; align-items: center; gap: 5px; }
.speed-legend i { width: 10px; height: 10px; border-radius: 50%; }
.health[data-warn="true"] {
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 13%, transparent);
}
.mode-row { display: grid; gap: 6px; }
.mode-now { font-size: 12px; color: var(--muted); }
.modes { display: flex; gap: 6px; flex-wrap: wrap; }
.mode-chip {
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.mode-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
/* the mode the automatic choice picked: ringed, not filled, as it was not picked by hand */
.mode-chip[data-current="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; }
.facts div { min-width: 0; }
.facts dt { font-size: 12px; color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.facts .wide { grid-column: 1 / -1; }
/* the low-battery colour of .st-battery; --warn has its own dark-mode value */
.battery-left[data-low="true"] { color: var(--warn); }

/* ---------- panel views: history and settings ---------- */
.view-head { display: flex; align-items: center; gap: 12px; }
.view-head h2 { margin: 0; font-size: 16px; font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted { color: var(--muted); font-size: 13px; }
.hint { color: var(--muted); font-size: 12px; margin: 0; }

.history, #view-settings { display: grid; gap: 12px; align-content: start; }
.history > *, #view-settings > * { margin: 0; }
.history .facts { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }

.day-nav { display: flex; gap: 8px; align-items: center; }
/* the walks of the day; the chosen one is shown on the map */
.walks { display: flex; flex-wrap: wrap; gap: 6px; }
.walks[hidden] { display: none; }
.walk-chip { font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.walk-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-text); font-weight: 650; }
/* "Start" over the map: plain bold text with a light halo, readable on any tiles */
.leaflet-tooltip.start-label { background: transparent; border: none; box-shadow: none; padding: 0; font-size: 11px; font-weight: 700; color: #1d2b24; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.leaflet-tooltip.start-label::before { display: none; }
.day-input { flex: 1; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.playback { display: flex; align-items: center; gap: 10px; }
.playback[hidden] { display: none; }
.h-slider { flex: 1; accent-color: var(--accent); }
.h-time { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 120px; text-align: right; }

.chart { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 12px; }
.chart figcaption { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.speed-svg { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.speed-svg .grid { stroke: var(--line); stroke-width: 1; }
.speed-svg .axis { stroke: var(--muted); stroke-width: 1; }
.speed-svg .tick { fill: var(--muted); stroke: none; font-size: 9px; font-family: inherit; }
.speed-svg .speed-line { fill: none; stroke: var(--accent); stroke-width: 2; }
/* bevel joins and butt ends: with round ones the browser left the panel below the chart unpainted */
.speed-svg .speed-seg { fill: none; stroke-width: 2; stroke-linecap: butt; stroke-linejoin: bevel; }
.speed-svg .speed-cursor line { stroke: var(--text); stroke-width: 1; stroke-dasharray: 3 2; }

.bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 2px; align-items: end; height: 96px; }
.day-bar { display: grid; grid-template-rows: 1fr auto; height: 100%; padding: 0; border: none; background: none; cursor: pointer; align-items: end; }
.day-bar-fill { display: block; width: 100%; min-height: 2px; background: color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 4px 4px 0 0; }
.day-bar[aria-current="true"] .day-bar-fill, .day-bar:hover .day-bar-fill, .day-bar:focus-visible .day-bar-fill { background: var(--accent); }
.day-bar-label { font-size: 10px; color: var(--muted); text-align: center; padding-top: 3px; }

.button-link { justify-self: start; font-size: 14px; font-weight: 600; color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; padding: 8px 12px; text-decoration: none; }
.button-link[hidden] { display: none; }

.settings-section { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; }
.settings-section h3 { margin: 0; font-size: 15px; font-weight: 650; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.status { font-size: 12px; font-weight: 500; color: var(--muted); }
.status[data-state="ok"] { color: var(--ok); }
.status[data-state="bad"] { color: var(--warn); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.setting-label { display: grid; gap: 2px; }
.setting-row select, .setting-row input[type="date"], .appearance input[type="text"] {
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
}
.setting-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.range { display: flex; align-items: center; gap: 8px; }
.range input { width: 140px; accent-color: var(--accent); }
.range output { min-width: 2ch; font-weight: 600; font-variant-numeric: tabular-nums; }

.appearance { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.appearance label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.appearance .grow { flex: 1; min-width: 140px; }
.appearance input[type="text"] { width: 100%; }
.colors { display: flex; gap: 6px; }
.colors input { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); cursor: pointer; }

.presets { display: flex; flex-wrap: wrap; gap: 8px; }
.custom-mode { display: grid; gap: 10px; }
.custom-mode summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.custom-mode[open] summary { margin-bottom: 4px; }
.chip { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.segmented label { position: relative; text-align: center; font-size: 13px; font-weight: 600; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented span { display: block; padding: 8px 4px; }
.segmented input:checked + span { background: var(--accent); color: var(--accent-text); }
.segmented input:focus-visible + span { outline: 2px solid var(--text); outline-offset: -2px; }
.advanced { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.advanced summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.advanced[open] summary { margin-bottom: 10px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.form-actions button { font: inherit; font-size: 14px; font-weight: 600; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; }
.form-actions button.primary { background: var(--accent); color: var(--accent-text); }
.form-actions button[hidden] { display: none; }
.form-actions button:disabled { opacity: 0.6; cursor: progress; }
.test-step { font-size: 14px; margin: 0; }
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.events time { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- toasts ---------- */
.toasts { position: fixed; left: 50%; top: max(64px, calc(env(safe-area-inset-top) + 56px)); transform: translateX(-50%); display: grid; gap: 8px; z-index: 1000; width: min(420px, calc(100% - 32px)); }
.toast { background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow); font-size: 14px; overflow-wrap: anywhere; }

/* ---------- login page ---------- */
.login-page { justify-content: center; align-items: center; padding: 16px; }
.login { width: min(360px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: var(--shadow); }
.login h1 { margin: 0 0 20px; font-size: 20px; font-weight: 650; }
.login-form { display: grid; gap: 14px; }
.login-form label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.login-form input { font: inherit; font-size: 16px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.login-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.login-form button { font: inherit; font-weight: 650; padding: 11px; border-radius: 8px; border: none; background: var(--accent); color: var(--accent-text); cursor: pointer; }
.login-form button:disabled { opacity: 0.6; }
.login-error { margin: 0; color: var(--warn); font-size: 14px; }

/* ---------- phones: full-screen map, bottom sheet, tab bar at the bottom ---------- */
@media (max-width: 760px) {
  body.app { height: 100dvh; overflow: hidden; }
  .bar { padding-block: 8px; }
  .bar h1 { font-size: 16px; }
  .layout { display: block; position: relative; }
  .map-wrap { position: absolute; inset: 0; }

  .panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    height: 46%;
    border-left: none;
    border-radius: 18px 18px 0 0;
    box-shadow: var(--sheet-shadow);
    transition: height 0.25s ease;
  }
  .panel[data-sheet="min"] { height: calc(118px + env(safe-area-inset-bottom)); }
  .panel[data-sheet="full"] { height: 88%; }
  @media (prefers-reduced-motion: reduce) { .panel { transition: none; } }

  .sheet-handle {
    display: grid;
    place-items: center;
    height: 22px;
    flex: none;
    background: none;
    border: none;
    cursor: grab;
    touch-action: none;
  }
  .sheet-handle span { width: 40px; height: 5px; border-radius: 3px; background: var(--line); }
  .panel-body { padding: 0 12px 12px; }
  .tabs {
    order: 3;
    border-bottom: none;
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabs button { border-bottom: none; border-top: 2px solid transparent; }
  .tabs button[aria-selected="true"] { border-top-color: var(--accent); }
  /* the bottom-right controls (+ / −, locate, attribution) sit just above the sheet: above 'peek'
     and 'min'; under 'full' they are covered by it (the map is mostly hidden then anyway) */
  .leaflet-bottom.leaflet-right { bottom: 46%; transition: bottom 0.25s ease; }
  .layout:has(.panel[data-sheet="min"]) .leaflet-bottom.leaflet-right { bottom: calc(118px + env(safe-area-inset-bottom)); }
  @media (prefers-reduced-motion: reduce) { .leaflet-bottom.leaflet-right { transition: none; } }
  /* 40 x 40 tap targets for + / − and the locate button */
  .leaflet-bar a,
  .leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
  .leaflet-touch .leaflet-control-zoom-in,
  .leaflet-touch .leaflet-control-zoom-out { font-size: 24px; }
  .me-control svg { width: 20px; height: 20px; }
  .toasts { top: max(56px, calc(env(safe-area-inset-top) + 48px)); }
}