/* Phone first: one column, the map near the top, the list below it. */

:root {
  --ground: #f4f3f0;
  --panel: #ffffff;
  --ink: #1b1d21;
  --dim: #666b73;
  --line: #dcdad5;
  --accent: #1f5fa8;
  --ok: #1a7f4b;
  --warn-bg: #fff3d6;
  --warn-ink: #6b4a00;
  --info-bg: #e8f0fa;
  --info-ink: #1d3f66;
  --bad: #b3261e;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #14161a;
    --panel: #1d2026;
    --ink: #eceef1;
    --dim: #9aa0aa;
    --line: #30343c;
    --accent: #7fb2ee;
    --ok: #5fcf95;
    --warn-bg: #3d3110;
    --warn-ink: #ffdf8f;
    --info-bg: #1b2a3d;
    --info-ink: #bcd6f5;
    --bad: #ff8a80;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0 auto;
  max-width: 46rem;
  padding: 0 0 calc(2rem + env(safe-area-inset-bottom));
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.dim { color: var(--dim); }

header { padding: 12px 14px 0; padding-top: calc(12px + env(safe-area-inset-top)); }
.title-row { display: flex; align-items: center; gap: 10px; }
h1 { flex: 1; margin: 0; font-size: 17px; font-weight: 650; }
#subtitle { margin: 2px 0 10px; font-size: 12.5px; }
#trip-select {
  max-width: 55%;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
#trip-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- tabs and chips ---------- */

.tabs, .chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; }

.tabs button, .chips button {
  flex: none;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--dim);
  font: inherit;
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
}
.tabs button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ground);
  font-weight: 600;
}
.tabs.small button { min-height: 34px; padding: 0 12px; font-size: 13px; }

.chips { padding: 10px 14px 4px; }
.chips button { min-height: 34px; padding: 0 11px; border-left: 4px solid var(--pin); border-radius: 8px; color: var(--ink); }
.chips button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; border-left-color: var(--line); }

/* ---------- alerts ---------- */

#alerts { padding: 10px 14px 0; display: grid; gap: 6px; }
.alert {
  margin: 0;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--info-bg);
  color: var(--info-ink);
  font-size: 13px;
}
.alert.warning { background: var(--warn-bg); color: var(--warn-ink); font-weight: 550; }
.alert.book summary { cursor: pointer; font-weight: 600; }
.alert.book ul { margin: 8px 0 2px; padding: 0; list-style: none; display: grid; gap: 8px; }
.alert.book li { display: flex; gap: 9px; align-items: flex-start; }
.alert a { color: inherit; }

/* ---------- map ---------- */

#map-wrap { position: relative; margin-top: 10px; scroll-margin-top: 6px; }
#map { height: 46vh; min-height: 260px; max-height: 520px; background: var(--line); z-index: 0; }

#locate {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 500;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(0, 0, 0, .25);
  border-radius: 8px;
  background: #fff;
  color: #1a73e8;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
#locate.busy { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .4; } }

.pin {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--pin);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  font-size: 15px;
  line-height: 1;
}
.pin-closed { filter: grayscale(1); opacity: .5; }
.pin-done { background: #1a7f4b; color: #fff; font-weight: 700; opacity: .75; }

.leaflet-popup-content { margin: 12px 14px; font: 13.5px/1.4 system-ui, sans-serif; }
.popup strong { display: block; font-size: 15px; }
.popup-cat { margin: 1px 0 4px; font-size: 12.5px; opacity: .75; }
.popup .dim { color: #666b73; font-size: 12.5px; }
.popup table { margin: 8px 0; border-collapse: collapse; font-size: 12.5px; }
.popup th { padding: 1px 10px 1px 0; font-weight: 500; text-align: left; opacity: .7; }
.popup tr.now th, .popup tr.now td { font-weight: 700; opacity: 1; }
.popup td.closed { color: #b3261e; }
.popup p { margin: 8px 0; }
.popup-links { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 8px; }
.popup-links a { font-weight: 600; }
.popup-done {
  margin-left: auto;
  padding: 7px 11px;
  border: 1px solid #1a7f4b;
  border-radius: 7px;
  background: #fff;
  color: #1a7f4b;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 5px;
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: 11px;
  font-weight: 650;
  vertical-align: 1px;
  white-space: nowrap;
}
.popup .badge { margin: 2px 0 4px; background: #fff3d6; color: #6b4a00; }

/* ---------- list ---------- */

.list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px 0; }
#progress { font-size: 12.5px; white-space: nowrap; }

#list { padding: 0 14px; }
#list h2 { margin: 18px 0 6px; font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
#list h2 .dim { font-weight: 400; text-transform: none; letter-spacing: 0; }
#list ul { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }

.row { display: flex; align-items: center; gap: 4px; padding: 0 8px 0 4px; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row.active { box-shadow: inset 3px 0 0 var(--accent); }

.tick { flex: none; width: 22px; height: 22px; margin: 11px 9px; accent-color: var(--ok); }
.alert.book .tick, .alert.book input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ok); }

.row-main {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}
button.row-main { cursor: pointer; }
.time { flex: none; width: 3.1em; font-variant-numeric: tabular-nums; font-weight: 650; }
.row-text { display: grid; min-width: 0; gap: 1px; }
.row-title { font-weight: 550; }
.row-detail { color: var(--dim); font-size: 13px; }
.dot { margin-right: 6px; padding-left: 5px; border-left: 4px solid var(--pin); }
.hours { color: var(--dim); font-size: 12.5px; }
.hours.closed { color: var(--bad); font-weight: 600; }
.hours.unsure { font-style: italic; }

.row.closed .row-title, .row.closed .row-detail, .row.closed .time { opacity: .5; }
.row.done .row-title { text-decoration: line-through; opacity: .55; }
.row.done .row-detail, .row.done .time { opacity: .55; }
.row.off .row-main { opacity: .6; }

/* The on/off switch: a checkbox drawn as a slider. */
.switch { flex: none; position: relative; width: 46px; height: 44px; cursor: pointer; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch span {
  position: absolute;
  top: 10px;
  left: 3px;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: var(--line);
  transition: background .15s;
}
.switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  transition: transform .15s;
}
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

#update-bar {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 1000;
  transform: translateX(-50%);
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  font-size: 13px;
}
#update-bar .link { font-weight: 650; }

.empty { padding: 24px 0; text-align: center; }

footer { padding: 22px 14px 0; font-size: 12px; }
footer p { margin: 0 0 8px; }
.link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- tablet: just round the map off ---------- */

@media (min-width: 46rem) and (max-width: 59.99rem) {
  #map { border-radius: 10px; }
  #map-wrap { margin-left: 14px; margin-right: 14px; }
}

/*
  ---------- desktop: list on the left, map filling the rest ----------

  The markup stays in phone order. On a wide screen the body becomes a
  two-column grid: everything goes in the left column and scrolls with the
  page, while the map is lifted into the right column and pinned to the
  viewport. The last row takes the spare height so a short list does not get
  spread out to match the map.
*/
@media (min-width: 60rem) {
  body {
    display: grid;
    grid-template-columns: minmax(24rem, 30rem) 1fr;
    grid-template-rows: repeat(5, auto) 1fr;
    max-width: none;
    min-height: 100vh;
    padding-bottom: 0;
    font-size: 14.5px;
  }
  body > * { grid-column: 1; min-width: 0; }

  #map-wrap {
    grid-column: 2;
    grid-row: 1 / -1;
    position: sticky;
    top: 0;
    height: 100vh;
    margin: 0;
    border-left: 1px solid var(--line);
  }
  #map { height: 100%; min-height: 0; max-height: none; }

  header { padding: 18px 20px 0; }
  h1 { font-size: 19px; }
  #alerts, .chips, .list-head, #list, footer { padding-left: 20px; padding-right: 20px; }

  /* Room to show every category at once instead of a sideways scroll. */
  .chips { flex-wrap: wrap; overflow: visible; }
  .tabs { flex-wrap: wrap; }
  .tabs button { min-height: 34px; }
  .chips button { min-height: 30px; }

  .row-main { padding: 8px 0; }
  .tick { width: 18px; height: 18px; margin: 9px; }
  button.row-main:hover .row-title { color: var(--accent); }
  .tabs button:hover, .chips button:hover { border-color: var(--accent); }

  #locate { top: 14px; right: 14px; }
  footer { padding-bottom: 24px; align-self: end; }
}

/* A marker whose row is under the mouse (desktop). */
.pin-hover { transform: scale(1.35); outline: 3px solid var(--accent); outline-offset: 1px; }
.pin { transition: transform .12s; }