/* Two looks. Dark is the default; light follows the phone's setting or the choice in the "Where" sheet
   (index.html sets data-theme before anything is drawn). Lime stays the fill colour in both; on light
   backgrounds lime text can't be read, so accent text and icons use --accent-text (dark green). */
:root {
  --page: #070b14;
  --bg: #0d1322;
  --surface: #141b2d;
  --card: #1a2238;
  --chip: #1c2439;
  --line: #2a3552;
  --line-soft: #232d47;
  --text: #f2f5fc;
  --body-text: #dfe4f0;
  --muted: #a3adc2;
  --faint: #7c88a6;
  --dim: #5f6b88;
  --zero-line: #222b42;
  --dash: #33405f;
  --handle: #3a4766;
  --switch-off: #33405f;
  --accent: #c8f560;
  --accent-line: #c8f560;
  --accent-ink: #0d1322;
  --accent-text: #c8f560;
  --accent-soft: rgba(200, 245, 96, 0.14);
  --age-text: #c8f560;
  --add-bg: #c8f560;
  --add-ink: #0d1322;
  --cluster-bg: #c8f560;
  --cluster-ink: #0d1322;
  --notice-bg: rgba(200, 245, 96, 0.08);
  --notice-line: rgba(200, 245, 96, 0.25);
  --notice-text: #e6f9b8;
  --ask-line: rgba(200, 245, 96, 0.35);
  --tag-bg: rgba(255, 255, 255, 0.07);
  --warn: #ff9cc0;
  --warn-soft: rgba(236, 106, 150, 0.16);
  --good: #6ee7a8;
  --focus: #c8f560;
  --glass: rgba(20, 27, 45, 0.86);
  --glass-line: rgba(255, 255, 255, 0.08);
  --scrim: rgba(5, 8, 16, 0.6);
  --overlay: rgba(20, 27, 45, 0.8);
  --shadow-bar: rgba(0, 0, 0, 0.35);
  --shadow-panel: rgba(0, 0, 0, 0.45);
  --shadow-sheet: rgba(0, 0, 0, 0.4);
  --shadow-app: rgba(0, 0, 0, 0.5);
  /* Small shadows on cards and buttons ("a bit more" in dark, picked 2 Nov): shadows barely show on navy,
     so each also gets a faint light top edge. The selected day, filled buttons and + glow in lime. */
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 22px rgba(0, 0, 0, 0.4);
  --shadow-chip: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-sel: 0 4px 14px rgba(200, 245, 96, 0.28);
  --shadow-sel-sm: 0 2px 6px rgba(200, 245, 96, 0.3);
  --shadow-add: 0 4px 14px rgba(200, 245, 96, 0.32);
  /* Fine diagonal lines behind the cards (picked 3 Nov): the surface colour, a shade or two darker, 1px every 5px.
     Things that sit on the lines get solid colours, so the lines don't show through them. */
  --pattern-line: #090c14;
  --pattern-muted: #a3adc2;
  --tag-solid: #252b3c;
  --age-solid: #2d3a34;
  --cluster-border: 3px solid #0d1322;
  --cluster-ring: 0 0 0 4px rgba(200, 245, 96, 0.25);
  --tiles: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9) saturate(0.5);
  --white-btn-bg: #f2f5fc;
  --white-btn-text: #0d1322;
  --white-btn-line: #f2f5fc;
  --display: Unbounded, Manrope, system-ui, sans-serif;
  color-scheme: dark;
}

:root[data-theme="light"] {
  /* "Trendy 2026" (chosen 1 Nov): Cloud Dancer off-white, Transformative Teal, Rebel Pink + button, sage pins */
  --page: #e6e3dc;
  --bg: #efede8;
  --surface: #f7f5f1;
  --card: #fffefb;
  --chip: #fffefb;
  --line: #dcd7cd;
  --line-soft: #e4e0d8;
  --text: #1d2b2b;
  --body-text: #2f3b3a;
  --muted: #5f6a68;
  --faint: #6c7573;
  --dim: #a9a39a;
  --zero-line: #e4e0d8;
  --dash: #cfc9be;
  --handle: #d3cdc2;
  --switch-off: #d3cdc2;
  --accent: #1f6f6f;
  --accent-line: #1f6f6f;
  --accent-ink: #ffffff;
  --accent-text: #1f6f6f;
  --accent-soft: #e1ebdd;
  --age-text: #3d6640;
  --add-bg: #ec6a96;
  --add-ink: #ffffff;
  --cluster-bg: #a9c4a0;
  --cluster-ink: #1d2b20;
  --notice-bg: #e6efee;
  --notice-line: rgba(31, 111, 111, 0.25);
  --notice-text: #174f4f;
  --ask-line: rgba(31, 111, 111, 0.3);
  --tag-bg: rgba(29, 43, 43, 0.06);
  --warn: #9c2f58;
  --warn-soft: #fbe3ec;
  --good: #3d6640;
  --focus: #1f6f6f;
  --glass: rgba(247, 245, 241, 0.92);
  --glass-line: rgba(29, 43, 43, 0.08);
  --scrim: rgba(29, 43, 43, 0.35);
  --overlay: rgba(247, 245, 241, 0.88);
  --shadow-bar: rgba(29, 43, 43, 0.14);
  --shadow-panel: rgba(29, 43, 43, 0.12);
  --shadow-sheet: rgba(29, 43, 43, 0.16);
  --shadow-app: rgba(29, 43, 43, 0.18);
  /* "Subtle" shadows in light (picked 2 Nov); the selected day and filled buttons glow teal, the + pink */
  --shadow-card: 0 1px 2px rgba(29, 43, 43, 0.06), 0 2px 8px rgba(29, 43, 43, 0.06);
  --shadow-chip: 0 1px 2px rgba(29, 43, 43, 0.1);
  --shadow-sel: 0 2px 6px rgba(31, 111, 111, 0.3);
  --shadow-sel-sm: 0 2px 6px rgba(31, 111, 111, 0.3);
  --shadow-add: 0 2px 6px rgba(236, 106, 150, 0.4);
  --pattern-line: #e8e2d7;
  --pattern-muted: #56605e;
  --tag-solid: #eae9e5;
  --age-solid: #e1ebdd;
  --cluster-border: 2px solid #4e7a50;
  --cluster-ring: 0 0 0 3px #ffffff, 0 3px 10px rgba(29, 43, 43, 0.3);
  --tiles: saturate(0.45) contrast(0.94) brightness(1.04);
  --white-btn-bg: #fffefb;
  --white-btn-text: #1d2b2b;
  --white-btn-line: #dcd7cd;
  /* "only": stops phone browsers (e.g. Chrome's "dark theme for sites") from darkening the light look */
  color-scheme: only light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--page);
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.app {
  position: relative;
  max-width: 480px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--bg);
}

@media (min-width: 560px) {
  .app { box-shadow: 0 0 0 1px var(--line-soft), 0 12px 40px var(--shadow-app); }
}

svg.i {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The lined background: on the results panel and every sheet, not on the cards. Grey text on it is a touch darker
   in the light look so it stays easy to read over the lines. */
.panel, .sheet {
  --muted: var(--pattern-muted);
  background-color: var(--surface);
  background-image: repeating-linear-gradient(135deg, var(--pattern-line) 0, var(--pattern-line) 1px,
    var(--surface) 1.6px, var(--surface) 4.4px, var(--pattern-line) 5px);
}
.sheet .tag { background: var(--tag-solid); }
.sheet .tag.warn { background: var(--warn-soft); }
.sheet .agetag { background: var(--age-solid); }

/* --- Map (OpenStreetMap tiles: darkened, or softened in the light look) --- */

.map { position: absolute; inset: 0; z-index: 0; }
.leaflet-container { background: var(--bg); font-family: inherit; }
.map .leaflet-tile-pane { filter: var(--tiles); }
/* The vector map (OpenFreeMap) has its own light and dark styles: no filter */
.map.vector .leaflet-tile-pane { filter: none; }
.leaflet-top.leaflet-right { top: calc(76px + env(safe-area-inset-top)); }
.leaflet-container .leaflet-control-attribution {
  margin: 0;
  padding: 2px 8px;
  border-radius: 8px 0 0 8px;
  background: var(--overlay);
  color: var(--faint);
  font-size: 11px;
}
.leaflet-container .leaflet-control-attribution a { color: var(--muted); }

/* Several classes close together on the map */
.cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--cluster-border);
  border-radius: 50%;
  background: var(--cluster-bg);
  color: var(--cluster-ink);
  font-size: 13px;
  font-weight: 800;
  box-shadow: var(--cluster-ring);
}
.group-list { display: flex; flex-direction: column; gap: 10px; }

/* Start times next to the pins when a day is picked */
.leaflet-tooltip.time-tip {
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-text);
  font: 800 11px/16px Manrope, system-ui, sans-serif;
  box-shadow: 0 2px 8px var(--shadow-panel);
}
.leaflet-tooltip.time-tip::before { display: none; }
.leaflet-tooltip-right.time-tip { margin-left: 3px; }

/* --- Top bar --- */

.topbar {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 56px;
  padding: 0 6px 0 14px;
  border: 1px solid var(--glass-line);
  border-radius: 28px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px var(--shadow-bar);
}

.logo { flex: none; font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: -0.4px; }
.logo span { color: var(--accent-text); }
.topbar-rule { flex: none; width: 1px; height: 24px; margin: 0 2px 0 8px; background: var(--line); }

.place-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 6px;
  border: 0;
  background: none;
  text-align: left;
}
.place-btn .i:first-child { color: var(--accent-text); }
.place-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.place-text .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 800; }
.place-text .km { color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }

/* Narrow phones: a little more room for the place name */
@media (max-width: 380px) {
  .topbar { gap: 2px; padding-left: 12px; }
  .logo { font-size: 13px; }
  .topbar-rule { display: none; }
}

/* --- The one button family: chips --- */

.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  min-width: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--chip);
  box-shadow: var(--shadow-chip);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.chip.sq { width: 44px; padding: 0; font-size: 13px; font-weight: 800; }
.chip.zero { border-color: var(--zero-line); color: var(--dim); }
.chip[aria-pressed="true"], .chip.active { border-color: var(--accent-line); background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sel); }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 800;
}
.chip.active .badge { background: var(--accent-ink); color: var(--accent); }
.wrap.units { margin-top: 10px; }

.primary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-sel);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.primary.small { flex: none; height: 44px; padding: 0 18px; font-size: 15px; }

.secondary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--chip);
  color: var(--text);
  box-shadow: var(--shadow-chip);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
}

.text-btn { flex: none; height: 52px; padding: 0 6px; border: 0; background: none; color: var(--muted); font-size: 16px; font-weight: 800; }
.link-btn { flex: none; height: 44px; padding: 0 4px; border: 0; background: none; color: var(--accent-text); font-size: 14px; font-weight: 800; }

/* --- Results panel (slides between map view and full list) --- */

.panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 50%;
  top: max(45%, calc(100% - 420px));
  z-index: 20;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-soft);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -14px 40px var(--shadow-panel);
  transition: top 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.panel.expanded { top: calc(80px + env(safe-area-inset-top)); }
.panel.dragging { transition: none; }

.drag-zone { touch-action: none; }
.handle { flex: none; display: flex; justify-content: center; padding: 10px 0 8px; cursor: grab; }
.handle span { width: 44px; height: 5px; border-radius: 3px; background: var(--handle); }

.filters { flex: none; }

/* The next seven days: tap one for its timetable, tap it again for every day */
.days { display: flex; gap: 6px; padding: 4px 16px 8px; }
.day {
  flex: 1;
  min-width: 0;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--chip);
  box-shadow: var(--shadow-chip);
  line-height: 1.1;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.day span { color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.day b { font-size: 16px; font-weight: 800; }
.day[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sel); }
.day[aria-pressed="true"] span { color: var(--accent-ink); font-weight: 800; }
.day.zero { border-color: var(--zero-line); color: var(--dim); }
.day.zero span { color: var(--dim); }

.scroller {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 16px 8px;
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar { display: none; }
/* Age chips: all the same circle, "<1" and "12+" included */
.filters .scroller .chip { width: 44px; padding: 0; }
/* The scroller has 8px below the chips, so a chosen age gets the small glow (a big one would be cut off) */
.scroller .chip[aria-pressed="true"], .scroller .chip.active { box-shadow: var(--shadow-sel-sm); }
.scroller-label { flex: none; margin-right: 2px; color: var(--muted); font-size: 14px; font-weight: 800; }

.results-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 16px 8px;
}
.count { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -0.5px; }
.head-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.results-head .chip { padding: 0 14px; font-size: 14px; }

.list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom));
}

.card {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  text-align: left;
}
.card-top { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 700; }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.card-cat { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-km { flex: none; font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--accent-text); }
.card-title { font-size: 17px; font-weight: 800; line-height: 1.25; text-wrap: pretty; }
.card-meta { color: var(--muted); font-size: 14px; line-height: 1.35; }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.agetag, .tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.agetag { background: var(--accent-soft); color: var(--age-text); }
.tag { background: var(--tag-bg); color: var(--text); }

/* A picked day's classes in time order: "Morning", "Afternoon"… each a card of rows */
.slot-head { flex: none; margin: 4px 0 -2px; padding: 0 4px; color: var(--muted); font-size: 14px; font-weight: 800; }
.slots {
  flex: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.slot {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-top: 1px solid var(--line-soft);
  background: none;
  text-align: left;
}
.slot:first-child { border-top: 0; }
.slot-time { flex: none; width: 52px; display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.slot-time b { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--accent-text); }
.slot-time small { color: var(--muted); font-size: 12px; font-weight: 700; }
.slot-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.slot-title { font-size: 15px; font-weight: 800; line-height: 1.3; text-wrap: pretty; }
.slot-meta { color: var(--muted); font-size: 13px; font-weight: 700; }
.slots .agetag, .slots .tag { height: 24px; padding: 0 9px; font-size: 12px; }

.notice {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--notice-line);
  border-radius: 16px;
  background: var(--notice-bg);
  color: var(--notice-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.online-row {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
}
.online-row span:last-child { color: var(--accent-text); }
.muted-row { flex: none; margin: 0; padding: 0 4px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.feedback-link { align-self: flex-start; padding: 0 4px; color: var(--muted); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.empty {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border: 1px dashed var(--dash);
  border-radius: 18px;
  font-size: 16px;
  font-weight: 700;
}
.loading { padding: 20px 4px; color: var(--muted); font-size: 15px; font-weight: 600; }

/* --- Sheets --- */

.overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--scrim);
}
.overlay[hidden] { display: none; }

.backdrop { flex: 1; min-height: 64px; border: none; background: transparent; }

.sheet {
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 88%;
  border-top: 1px solid var(--line-soft);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -10px 30px var(--shadow-sheet);
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet.enter { animation: sheet-up 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sheet.tall { flex: 1; max-height: none; }

@keyframes sheet-up {
  from { transform: translateY(48px); opacity: 0.5; }
  to { transform: none; opacity: 1; }
}

.sheet-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 6px 20px;
}
.sheet-head h2 { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }

.sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px 20px 20px;
}

.sec { display: flex; flex-direction: column; gap: 10px; }
.sec h3 { margin: 0; font-size: 15px; font-weight: 800; }
.wrap { display: flex; flex-wrap: wrap; gap: 8px; }

.sheet-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px 20px;
  border-top: 1px solid var(--line-soft);
}

.row-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
}
.row-btn .i { color: var(--accent-text); }
.row-btn.switch-row { justify-content: space-between; border-top: 1px solid var(--line-soft); border-bottom: 0; }

.search-form { display: flex; gap: 8px; }
.search-form input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--chip);
  font-size: 16px;
}
.search-form input::placeholder { color: var(--faint); }
.search-form button {
  flex: none;
  height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
}

.status { margin: -8px 0 0; color: var(--muted); font-size: 14px; }
.status.warn { color: var(--warn); }

.switch { position: relative; flex: none; width: 48px; height: 28px; border-radius: 999px; background: var(--switch-off); }
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: left 0.15s;
}
.switch.on { background: var(--accent); }
.switch.on::after { left: 22px; background: var(--accent-ink); }

/* --- Detail --- */

.detail-body { display: flex; flex-direction: column; gap: 14px; padding: 0 20px 24px; }
.detail-body h2 { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -0.3px; }
.where { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.facts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--card);
}
.facts dt { color: var(--muted); font-size: 13px; font-weight: 800; }
.facts dd { margin: 2px 0 0; font-size: 15px; line-height: 1.45; }
.detail-body p { margin: 0; color: var(--body-text); font-size: 15px; line-height: 1.55; }
.note { display: flex; gap: 10px; align-items: flex-start; }
.note div { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.45; }
.note b { font-size: 13px; }
.note.good, .note.good b { color: var(--good); }
.note.bad, .note.bad b { color: var(--warn); }
.note div span { color: var(--text); }
.muted { color: var(--muted); font-size: 14px; }

.actions { flex: none; display: flex; gap: 10px; padding: 12px 20px 20px; border-top: 1px solid var(--line-soft); }
/* Small phones: "Official website" and "Directions" share the row without running off the edge */
.actions .primary, .actions .secondary { min-width: 0; padding: 0 14px; }

/* --- Adding a class, signing in, confirming --- */

.add-btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--add-bg);
  color: var(--add-ink);
  box-shadow: var(--shadow-add);
}
.add-btn[hidden] { display: none; }
.add-btn .i { stroke-width: 2.6; }

.lead { margin: 0; color: var(--body-text); font-size: 16px; line-height: 1.5; }

.steps { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 0 20px 6px; }
.steps span { color: var(--muted); font-size: 13px; font-weight: 700; }
.steps .bar { display: flex; gap: 6px; }
.steps .bar i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.steps .bar i.on { background: var(--accent); }

.field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.field-label { font-size: 14px; font-weight: 800; }
.opt { color: var(--muted); font-weight: 600; }
.help { color: var(--muted); font-size: 13px; line-height: 1.4; }
.input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--chip);
  font-size: 16px;
  outline: none;
}
.input:focus { border-color: var(--focus); }
.input::placeholder { color: var(--faint); }
textarea.input { height: auto; min-height: 80px; padding: 12px 16px; resize: none; line-height: 1.4; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 40px; }
.select { position: relative; }
.select .i { position: absolute; right: 14px; top: 16px; pointer-events: none; color: var(--muted); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.tick {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
}
.tick input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }

.form-msg { margin: 0; color: var(--warn); font-size: 14px; font-weight: 700; line-height: 1.4; }
/* A message shown above a sheet's form ("Write a few words first") lines up with the form */
.sheet > .form-msg { padding: 0 20px 8px; }
.sheet-foot.stack { flex-direction: column; align-items: stretch; gap: 10px; }
/* Stacked in a column, buttons keep their height instead of being squeezed to fit */
.sheet-body .primary, .sheet-body .secondary { flex: none; }
.foot-row { display: flex; align-items: center; gap: 14px; }
.foot-row .primary { flex: 1; }
.primary.wait { background: var(--line); color: var(--muted); box-shadow: none; }
.primary:disabled, .secondary:disabled { opacity: 0.7; cursor: default; }
.secondary.light { border-color: var(--white-btn-line); background: var(--white-btn-bg); color: var(--white-btn-text); }
.who { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.who button { padding: 0; border: 0; background: none; color: var(--accent-text); font-weight: 800; }

.done { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding-top: 8px; }
.done h3 { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }
.done-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
}
.done-mark .i { stroke-width: 2.6; }

.facts a.addr-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }

.community {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
}
.community b { font-size: 17px; }
.detail-body .community p { color: var(--muted); font-size: 14px; line-height: 1.45; }
/* "Is it one of these?" cards in the add form */
.sheet-body .community p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.share-row .secondary { flex: 1; padding: 0 12px; }
/* "Fill in from a photo" at the top of the add form */
.photo-fill .secondary { cursor: pointer; }
.photo-fill .secondary.busy { opacity: 0.7; cursor: default; }
.help.ok { margin: 0; color: var(--accent-text); font-weight: 700; }
.report-link { align-self: flex-start; color: var(--muted); }

.ask {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--ask-line);
  border-radius: 18px;
  background: var(--notice-bg);
}
.ask small { color: var(--accent-text); font-size: 13px; font-weight: 700; }
.ask b { font-size: 18px; line-height: 1.3; }
.ask .text-btn { height: 44px; font-size: 15px; }

.nudge {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 8px 4px 16px;
  border: 1px dashed var(--dash);
  border-radius: 18px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .panel, .chip, .day, .switch::after { transition: none; }
  .sheet.enter { animation: none; }
}

/* --- Tablets and laptops: the list in a side column, the map filling the rest --- */

@media (min-width: 760px) {
  .app { --side: 380px; max-width: none; box-shadow: none; }
  .map { left: var(--side); }
  .leaflet-top.leaflet-right { top: 0; }
  .topbar { left: 12px; right: auto; width: calc(var(--side) - 24px); }
  .panel, .panel.expanded {
    top: calc(80px + env(safe-area-inset-top));
    right: auto;
    width: var(--side);
    border-top: 0;
    border-right: 1px solid var(--line-soft);
    border-radius: 0;
    box-shadow: none;
    transition: none;
  }
  .panel .handle, #panelBtn { display: none; }
  /* The whole column scrolls, so on short screens the filters move up out of the way */
  .panel { overflow-y: auto; overscroll-behavior: contain; }
  .list { flex: none; overflow: visible; }
  .filters { padding-top: 6px; }
  /* Rows wrap instead of scrolling sideways: there's room, and a mouse can't swipe */
  .scroller { flex-wrap: wrap; overflow-x: visible; }

  /* Sheets and class details open as centred windows */
  .overlay { align-items: center; justify-content: center; }
  .overlay .backdrop { position: absolute; inset: 0; height: auto !important; min-height: 0; }
  .sheet, .sheet.tall {
    position: relative;
    flex: none;
    width: min(560px, 92vw);
    max-height: 86vh;
    border: 1px solid var(--line-soft);
    border-radius: 28px;
    padding-bottom: 0;
  }
  .sheet.tall { height: 86vh; }
}

@media (min-width: 1100px) {
  .app { --side: 420px; }
}

/* "Don't show" chips: a picked one is crossed out, not lit up */
.hide-chips .chip[aria-pressed="true"] { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); text-decoration: line-through; box-shadow: none; }
.sub-head { margin: 12px 0 8px; color: var(--muted); font-size: 13px; font-weight: 800; }