/* trip-map: quiet, minimal UI. Decisions in CLAUDE.md "UI decisions". */
:root {
  /* --muted is the secondary text colour (5.4:1 on white, 4.7:1 on the selected row, so it passes
     WCAG AA at 11-12px). --faint is for decoration and the deliberately greyed "hidden" state only. */
  --ink: #1f2328; --muted: #646b77; --faint: #a3a9b3; --line: #eef0f3; --hover: #f5f6f8; --field: #e3e6ea;
  --accent: #1a73e8; --danger: #d93025; --radius: 10px; --side: 360px;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 16px rgba(16,24,40,.10);
  color-scheme: light;
}
[hidden] { display: none !important; }   /* the attribute must win over any display rule below */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 14px/1.45 "Inter Variable", system-ui, sans-serif; color: var(--ink); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
#app { position: fixed; inset: 0; display: flex; }
#map { flex: 1; height: 100%; background: #f2f3f5; }
.leaflet-container { font-family: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- controls ---------- */
button, .btn { font: inherit; font-size: 13px; padding: 6px 12px; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; text-decoration: none; color: inherit; display: inline-block; transition: background .12s; }
button:hover, .btn:hover { background: var(--hover); }
button.link { border: 0; background: none; padding: 4px 6px; color: var(--muted); font-size: 12.5px; }
button.link:hover { color: var(--ink); background: none; }
.icon-btn { border: 0; background: none; cursor: pointer; padding: 4px; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; line-height: 1; border-radius: 6px; min-width: 24px; min-height: 24px; }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.danger, .danger:hover { color: var(--danger); }   /* .danger:hover outranks .icon-btn:hover */
input, select, textarea { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--field); border-radius: 8px; max-width: 100%; background: #fff; color: inherit; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26,115,232,.12); }
::placeholder { color: var(--faint); }
/* Keyboard focus ring for everything that is not a text field (fields use the border ring above).
   Covers the role="button" spans app.js makes keyable (chevron, rows, day dividers). */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn:focus-within:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }   /* label-buttons wrapping a hidden file input */
.row { display: flex; gap: 6px; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; }
.small { font-size: 12px; color: var(--muted); }
.hint { font-size: 12px; color: var(--muted); margin: 0; }
.hint a { color: var(--accent); }
.hint.empty { padding: 10px 8px 0; }
.row > select { min-width: 0; }
h2, h3 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 22px 0 8px; }

/* ---------- sidebar ---------- */
#side { width: var(--side); max-width: 90vw; height: 100%; background: #fff; box-shadow: 1px 0 0 var(--line), 4px 0 24px rgba(16,24,40,.06); display: flex; flex-direction: column; z-index: 1001; }
#side header { display: flex; align-items: center; gap: 4px; padding: 14px 12px 8px 8px; }
#side h1 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#live { width: 7px; height: 7px; border-radius: 50%; background: #d0d4da; margin-right: 6px; flex: none; }
#live.on { background: #34a853; }
.tabs { display: flex; gap: 2px; margin: 4px 14px 6px; padding: 3px; background: #f1f3f5; border-radius: 9px; }
.tabs button { flex: 1; border: 0; background: none; padding: 5px 0; font-size: 13px; color: var(--muted); border-radius: 7px; }
.tabs button.on { background: #fff; color: var(--ink); font-weight: 550; box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.tab { display: none; overflow-y: auto; flex: 1; padding: 6px 10px 40px; scrollbar-width: thin; }
.tab.on { display: block; }
.floating { position: absolute; top: 12px; left: 12px; z-index: 1000; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); display: none; padding: 8px; }
body.side-hidden #side { display: none; }
body.side-hidden .floating { display: inline-flex; }
body.side-hidden .leaflet-top.leaflet-left { margin-left: 52px; }
.side-foot { display: flex; align-items: center; gap: 2px; margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--line); }

/* ---------- layer tree ---------- */
.layer { margin: 1px 0; }
.layer-head { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; cursor: pointer; }
.layer-head:hover { background: var(--hover); }
.layer-head .name { flex: 1; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-head .count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.chev { width: 14px; flex: none; color: var(--faint); display: inline-flex; transition: transform .15s; border-radius: 4px; }
.layer.open > .layer-head .chev { transform: rotate(90deg); }
/* A day's colour dot in the export list. City/area layers have no colour, so no dot. */
.swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.eye { border: 0; background: none; padding: 2px; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 4px; min-width: 24px; min-height: 24px; }
.eye:hover { color: var(--ink); background: none; }
.more { font-size: 15px; padding: 0 4px; letter-spacing: 1px; }
.layer.hidden-layer > .layer-head .name { color: var(--faint); font-weight: 500; }
.layer-body { display: none; padding: 0 0 8px 22px; }
.layer.open > .layer-body { display: block; }
.layer-notes { font-size: 12.5px; color: var(--muted); margin: 2px 6px 6px; white-space: pre-wrap; }
input.rename { flex: 1; font-weight: 550; padding: 2px 6px; }
.layer-head[draggable]:active, .divider[draggable]:active { cursor: grabbing; }
.layer-head.drop-above, .divider.drop-above, .item.drop-above { box-shadow: inset 0 2px 0 var(--accent); }
.dragging { opacity: .4; }

/* day divider: ──── 18 Nov, Wednesday ──── 3.2 km */
.divider { position: relative; display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; padding: 1px 6px 1px 0; min-height: 26px; cursor: pointer; user-select: none; border-radius: 6px; }
.divider .dl { flex: 1; height: 1px; background: var(--line); }
.divider .dl:first-child { flex: 0 0 10px; }
/* The date is ink (as text, four of the nine day colours fell under 4.5:1); the day colour is the dot. */
.divider .dt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; color: var(--ink); }
.divider .ddot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.divider.off .dt { color: var(--faint); font-weight: 500; }
.divider.off .ddot { opacity: .35; }
.layer.hidden-layer .item, .day:has(> .divider.off) .item { opacity: .55; }
.divider .dmeta { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.divider:hover .dt, .divider:focus-visible .dt { color: var(--accent); }

/* rows */
.item { position: relative; display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 8px; cursor: pointer; min-height: 32px; }
.item:hover { background: var(--hover); }
.item.sel { background: #e8f0fe; }
.item .glyph { width: 18px; text-align: center; flex: none; font-size: 13px; filter: grayscale(1); opacity: .6; }
/* A plain mark has only its day colour (grey off a day) to show (the grey filter left the default dot near invisible). */
.item .glyph.plain { filter: none; opacity: 1; }
.item .glyph.dot { font-size: 18px; line-height: 1; }
.item .badge { width: 20px; height: 20px; flex: none; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.item input.t { width: 44px; flex: none; padding: 1px 2px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; border-color: transparent; background: transparent; border-radius: 4px; }
.item:hover input.t, .item input.t:focus { border-color: var(--field); background: #fff; }
.item .lbl { flex: 1; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; margin-left: auto; }
/* A selected stop also shows its leg mode and remove button: they wrap under the name, which keeps its width. */
.item.sel { flex-wrap: wrap; row-gap: 2px; }
.item.sel .lbl { min-width: 55%; }
.item select { font-size: 11px; padding: 1px 2px; border-radius: 4px; }
.item .icon-btn { font-size: 12px; }
/* Row controls (.hov: eye, more, remove, leg mode): out of the layout until wanted, but still
   focusable (display:none would drop them from the Tab order). They sit before the row's
   right-hand number, so when they appear only the name or the divider line gives way and the
   numbers stay in one column. They show on hover, on keyboard focus inside the row, and always
   on touch; the leg-mode select (.how) only on selection, so hovering down a list shifts nothing. */
.hov { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.item:hover .hov:not(.how), .item.sel .hov, .item:focus-within .hov,
.layer-head:hover .hov, .layer-head:focus-within .hov, .divider:hover .hov, .divider:focus-within .hov { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }

/* Touch has no hover: show the row controls outright (the leg-mode select still waits for selection),
   and make the small icon buttons comfortable to tap. */
@media (hover: none) {
  .hov:not(.how) { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
/* Fingers: fields at 16px (iOS Safari zooms the page into anything smaller on focus) and tap
   targets of 32px or more, 36px for rows. The dot, chevron and ticks keep their drawn size. */
@media (pointer: coarse) {
  .icon-btn, .eye { min-width: 32px; min-height: 32px; }
  .item, .layer-head { min-height: 40px; }
  .divider { min-height: 36px; }
  input, select, textarea, .item select, .item input.t { font-size: 16px; }
  .item input.t { width: 60px; min-height: 32px; }
  .item select { min-height: 32px; }
  .tabs button { min-height: 36px; }
  button.link, #toast button { min-height: 32px; }
  .layer-head { gap: 10px; }
  .chev { width: 32px; height: 32px; margin-left: -6px; align-items: center; justify-content: center; }
  input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; }
  label:has(> input[type=checkbox]) { display: flex; align-items: center; gap: 8px; min-height: 36px; }
  #search-form label:has(> input[type=checkbox]) { display: inline-flex; padding-right: 6px; }
  #export-list { gap: 0; }
  #boundaries .row { min-height: 36px; }
  #kml-sub { padding: 10px 2px; }
  #bound-form .row input { min-width: 0; flex: 1; }
}

/* popover menu */
.menu { position: fixed; z-index: 4000; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow), 0 0 0 1px var(--line); padding: 4px; min-width: 170px; display: flex; flex-direction: column; }
.menu button { border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 6px; font-size: 13px; }
.menu button:hover, .menu button:focus-visible { background: var(--hover); }
.menu button:focus-visible { outline-offset: -2px; }

/* ---------- search ---------- */
#search-form { position: sticky; top: 0; background: #fff; padding: 4px 0 8px; display: flex; flex-direction: column; gap: 6px; z-index: 1; }
#q { width: 100%; padding: 9px 12px; border-radius: 10px; background: #f5f6f8; border-color: transparent; }
#q:focus { background: #fff; border-color: var(--accent); }
#results .res { padding: 8px 6px; border-radius: 8px; display: flex; gap: 8px; align-items: start; cursor: pointer; }
#results .res:hover { background: var(--hover); }
#results .res > .grow { min-width: 0; overflow-wrap: anywhere; }   /* a long unbroken name wraps, Add stays in the panel */
#results .res > button { flex: none; }
/* Source ticks and the target layer stay on one line; the layer select is what gives way. */
#search-form label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
#search-form label:has(select) { flex: 0 1 auto; min-width: 0; }
#search-layer { flex: 1; min-width: 0; text-overflow: ellipsis; }
#export-list .sub { padding-left: 20px; }
#kml-sub { color: var(--accent); }
.src { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-radius: 4px; padding: 1px 5px; flex: none; margin-top: 3px; }
.src.google { background: #e8f0fe; color: #1a57c4; }
.src.osm { background: #e6f4ea; color: #1e7e34; }

/* ---------- place card and editor ---------- */
/* The card starts below the base-map switcher (top right) instead of covering it. */
#panel { position: absolute; right: 12px; top: 62px; max-height: calc(100% - 74px); width: 340px; max-width: calc(100vw - 24px); background: #fff; z-index: 1002; border-radius: 14px; box-shadow: var(--shadow), 0 0 0 1px rgba(16,24,40,.04); overflow-y: auto; padding: 14px; scrollbar-width: thin; }
#panel:not(.editing) { padding: 0 0 12px; }
#panel .close { float: right; }
#panel .field { margin: 10px 0; }
#panel .field > label, #panel .flabel { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); margin-bottom: 3px; }
#panel input[type=text], #panel textarea, #panel select { width: 100%; }
/* Icon and layer on one line: the icon select keeps its own width, the layer select takes the
   rest (at half the row each, a long layer name ran under its arrow). */
#panel .row > select[name=icon] { width: auto; flex: none; }
#panel .row > select[name=layer] { flex: 1; min-width: 0; text-overflow: ellipsis; }
#panel .row > .grow:empty { display: none; }
#panel.editing .row { clear: both; }   /* not squeezed beside the floated Done button */
#panel textarea { min-height: 90px; resize: vertical; }
#panel:not(.editing) textarea { margin: 10px 14px 0; width: calc(100% - 28px); min-height: 100px; }
#panel .name-input { font-size: 18px; font-weight: 650; border-color: transparent; padding: 2px 4px; width: calc(100% - 70px); }
#panel .name-input:focus { border-color: var(--field); }
#panel:not(.editing) .chips { padding: 8px 14px 0; }
.card-photos { display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 14px 14px 0 0; scrollbar-width: none; }
.card-photos img { height: 180px; flex: 0 0 auto; max-width: 100%; object-fit: cover; scroll-snap-align: start; cursor: zoom-in; }
.card-photos img:only-child { width: 100%; }
.card-head { display: flex; align-items: start; gap: 6px; padding: 12px 14px 2px; }
.card-name { font-size: 18px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; flex: 1; overflow-wrap: anywhere; }
.card-sub { font-size: 12.5px; color: var(--muted); padding: 0 14px; }
.card-head .card-sub { padding: 0; }
.card-notes { margin: 10px 10px 0; white-space: pre-wrap; font-size: 13.5px; cursor: text; border-radius: 6px; padding: 4px; color: #374151; overflow-wrap: anywhere; }
.card-notes:hover { background: var(--hover); }
.card-notes.empty { color: var(--muted); }
.card-actions { display: flex; gap: 6px; padding: 12px 14px 0; flex-wrap: wrap; }
.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: #f1f3f5; border-radius: 999px; padding: 2px 9px; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #9ca3af); }
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.photos .ph { position: relative; aspect-ratio: 1; background: #eee; border-radius: 6px; overflow: hidden; }
.photos img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.photos .ph button { position: absolute; top: 3px; right: 3px; padding: 0 6px; font-size: 12px; opacity: .9; }
.cands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 6px; }
.cands img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; cursor: pointer; border: 2px solid transparent; }
.cands img:hover { border-color: var(--accent); }
.hero { width: calc(100% + 28px); margin: -14px -14px 8px; max-height: 200px; object-fit: cover; display: block; border-radius: 14px 14px 0 0; }
.links a { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); }

/* ---------- map ---------- */
.tiles-light { filter: saturate(.3) brightness(1.04) contrast(.92); }
.pin { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; color: #fff; }
.pin.sel { box-shadow: 0 0 0 3px rgba(26,115,232,.55), 0 1px 4px rgba(0,0,0,.35); transform: scale(1.15); }
.pin .num { position: absolute; top: -9px; right: -11px; background: #fff; color: var(--ink); border-radius: 999px; font-size: 10px; font-weight: 700; padding: 0 5px; box-shadow: 0 1px 3px rgba(0,0,0,.3); white-space: nowrap; }
.leaflet-tooltip.lbl { background: rgba(255,255,255,.92); border: 0; box-shadow: none; padding: 0 4px; font-size: 11px; font-weight: 600; border-radius: 4px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.far .pin .num { display: none; }   /* app.js sets .far below zoom 11, where the stop numbers pile into blobs */
.leaflet-tooltip.lbl::before { display: none; }
/* Flat rounded map controls. Prefixed with .leaflet-container so they outrank leaflet.css's
   .leaflet-touch rules (same specificity, loaded later) without !important. */
.leaflet-container .leaflet-bar, .leaflet-container .leaflet-control-layers { border: 0; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.leaflet-container .leaflet-bar a { border-bottom-color: var(--line); color: var(--ink); width: 34px; height: 34px; line-height: 34px; }
.leaflet-container .leaflet-control-layers-toggle { width: 38px; height: 38px; background-size: 20px; }
.leaflet-control-layers-expanded { padding: 8px 12px; font-size: 13px; }
.leaflet-pm-toolbar .leaflet-buttons-control-button { padding: 4px; }
.leaflet-control-scale-line { border-color: var(--faint); color: var(--muted); background: rgba(255,255,255,.7); font-size: 10px; }
.leaflet-container .leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,.7); }
.leaflet-top .leaflet-control { margin-top: 12px; }
.leaflet-left .leaflet-control { margin-left: 12px; }
.leaflet-right .leaflet-control { margin-right: 12px; }

#route-bar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1003; background: #fff; padding: 8px 10px; border-radius: var(--radius); box-shadow: var(--shadow); display: flex; gap: 6px; align-items: center; font-size: 13px; max-width: calc(100vw - 24px); }
#route-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Centred on the map (the part right of the side panel), not on the window. */
#toast { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); left: var(--side); right: 0; margin: 0 auto; width: fit-content; max-width: min(560px, calc(100% - var(--side) - 24px)); background: #1f2328; color: #fff; padding: 9px 16px; border-radius: 10px; z-index: 2000; display: none; align-items: center; gap: 12px; font-size: 13px; box-shadow: var(--shadow); }
body.side-hidden #toast { left: 0; max-width: min(560px, calc(100% - 24px)); }
#toast.err { background: var(--danger); }
.lightbox { position: fixed; inset: 0; background: rgba(10,12,16,.9); z-index: 3000; display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: 95vw; max-height: 90vh; border-radius: 6px; }
.lightbox .cap { position: absolute; bottom: 12px; color: #ccc; font-size: 12px; }

/* Map buttons of our own (drawing tools on a phone, my location), drawn like Leaflet's. */
.mapbtn { position: absolute; z-index: 1000; width: 38px; height: 38px; background: #fff; color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); }
.mapbtn:hover { background: #fff; }
#tools-toggle { display: none; top: 12px; left: 12px; }
#tools-toggle[aria-pressed=true] { background: var(--ink); color: #fff; }
#locate { top: 62px; right: 12px; }
#locate.on { color: var(--accent); }
@media (pointer: coarse) {
  .leaflet-container .leaflet-control-zoom { display: none; }   /* pinch instead */
  /* A stop's remove button waits for selection like its leg mode, so the name gets the width
     and a scrolling thumb cannot land on it. */
  .item:not(.sel) .hov { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  button, .btn, .item, .layer-head, .divider { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
}

/* Phone: the map fills the screen and the side panel is a bottom sheet over it, at three
   heights: collapsed to its title bar (body.side-hidden), half, and full (body.sheet-full).
   app.js drags it by the title bar and keeps what it shows clear of the sheet (cover()). */
@media (max-width: 700px) {
  html, body { overscroll-behavior: none; }   /* no pull-to-refresh under a sheet drag */
  #side, body.side-hidden #side { display: flex; position: absolute; left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-width: none; height: 52dvh; border-radius: 16px 16px 0 0; box-shadow: 0 -1px 0 var(--line), 0 -6px 24px rgba(16,24,40,.12); z-index: 1001; overflow: hidden; transition: height .18s ease-out; padding-bottom: env(safe-area-inset-bottom); }
  #side.dragging { transition: none; }
  body.sheet-full #side { height: calc(100dvh - 56px); }
  body.side-hidden #side { height: calc(58px + env(safe-area-inset-bottom)); }
  /* Collapsed: the lists keep their scroll position but leave the tab order. */
  body.side-hidden #side .tabs, body.side-hidden #side .tab { visibility: hidden; }
  #side header { position: relative; padding: 20px 14px 10px 18px; touch-action: none; cursor: grab; flex: none; min-height: 58px; user-select: none; }
  #side header::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #d0d4da; }
  #hide-side, #show-side, body.side-hidden #show-side { display: none; }
  .tab { overscroll-behavior: contain; }
  .item .lbl { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
  body.side-hidden .leaflet-top.leaflet-left { margin-left: 0; }
  #tools-toggle { display: inline-flex; }
  .leaflet-top.leaflet-left { top: 50px; }
  body:not(.tools-on) .leaflet-pm-toolbar { display: none; }
  .leaflet-bottom { bottom: calc(58px + env(safe-area-inset-bottom)); }
  #toast, body.side-hidden #toast { top: calc(62px + env(safe-area-inset-top)); bottom: auto; left: 0; max-width: calc(100% - 24px); }
  #map #conflict-banner { left: 12px; right: 12px; top: var(--under, 240px); width: auto; max-width: none; }
  /* The place card stands on the collapsed sheet's title bar; an opened sheet covers the card,
     and collapsing it shows the card again. */
  #panel { top: auto; max-height: 60dvh; right: 0; left: 0; bottom: calc(58px + env(safe-area-inset-bottom)); width: 100%; max-width: none; border-radius: 16px 16px 0 0; overscroll-behavior: contain; box-shadow: 0 -6px 24px rgba(16,24,40,.16); }
  body:not(.side-hidden) #side { z-index: 1003; }
  #route-bar { flex-wrap: wrap; justify-content: flex-end; width: calc(100vw - 24px); }
  #route-msg { flex: 1 0 100%; }
}
@media (min-width: 701px) {
  .leaflet-top.leaflet-right { z-index: 1003; }   /* the opened base-map list draws over the card, not under it */
  /* With the card open the notice centres on the map left of it. */
  #app:has(#panel:not([hidden])) #conflict-banner { right: 364px; --card: 352px; }
}

/* Undo button inside a toast, and the sync-conflict notice: both quiet, in the toast's own palette. */
#toast button { flex: none; white-space: nowrap; padding: 3px 10px; border: 1px solid rgba(255,255,255,.35); background: none; color: #fff; font-weight: 600; font-size: 12.5px; border-radius: 7px; }
#toast button:hover { background: rgba(255,255,255,.12); }
/* Lives inside #map: centred on the map, 64px clear of each side so it misses the zoom buttons
   and the base-map switcher. */
#conflict-banner { position: absolute; top: 12px; left: 0; right: 0; margin: 0 auto; width: fit-content; z-index: 1002; max-width: min(640px, calc(100% - 128px - var(--card, 0px))); display: flex; align-items: flex-start; gap: 6px; background: #fff; color: var(--ink); padding: 8px 8px 8px 14px; border-radius: var(--radius); box-shadow: var(--shadow); border-left: 3px solid #f29900; font-size: 12.5px; line-height: 1.45; cursor: default; }
#conflict-banner > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#conflict-banner code { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); user-select: all; }
#conflict-banner .icon-btn { flex: none; margin-top: -3px; }

/* Edit form: one line per visit (day, time), and the rarely used fields folded away. */
#panel .visit { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#panel .visit .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
#panel .visit .lbl { flex: 1; min-width: 0; font-size: 13px; }
#panel .visit input.t, #panel .field input.t { width: auto; flex: none; font-variant-numeric: tabular-nums; }
#panel details.more { margin: 12px 0; border-top: 1px solid var(--line, #e6e8eb); padding-top: 8px; }
#panel details.more > summary { cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--muted); padding: 6px 0; }
button.chip { border: 0; border-radius: 999px; cursor: pointer; color: inherit; }
button.chip:hover { background: #e7eaee; }
@media (pointer: coarse) { button.chip { padding: 6px 11px; font-size: 13px; } }
button.chip.on { background: #fff; box-shadow: inset 0 0 0 2px var(--c, #9ca3af); font-weight: 600; }
button.chip.off { color: var(--faint); }
button.chip.off::before { background: #c9cdd3; }
/* A hidden layer's eye (crossed out) stays in the row, dark, so what is off is seen without hovering. */
.eye.hov:not(.on) { position: static; width: auto; height: auto; overflow: visible; clip-path: none; color: var(--ink); }
/* Sign-in screen on the public address: covers the app until there is a session. */
.signin { position: fixed; inset: 0; z-index: 4000; background: var(--bg, #fff); display: flex; align-items: center; justify-content: center; padding: 24px; }
.signin-box { max-width: 320px; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.signin-box h1 { font-size: 20px; margin: 0; }
.signin-box p { margin: 0; }