/* Banksia Springs Farm: live van map. The farm's round-logo palette: navy, ochre ring, cream;
   Playfair Display for headings, Inter for text. */
@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/playfair-display-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --cream: #f6f1e7;          /* page */
  --paper: #fffdf8;          /* cards */
  --sand: #efe8da;           /* quiet fills */
  --line: #e4dccb;
  --line-2: #d3c8b3;
  --navy: #212c3e;           /* headings, dark panels, primary buttons, the van */
  --ink: #3b4352;            /* body text */
  --muted: #656c7a;
  --muted-2: #8e95a3;        /* done stops, quiet icons */
  --accent: #d69632;         /* the logo's ochre ring: route, pins, highlights */
  --accent-ink: #8a5a14;     /* ochre dark enough for small text on cream */
  --accent-soft: #f7ebd5;
  --on-accent: #212c3e;      /* text on ochre */
  --ok: #4a6340;             /* "here now", "on time" */
  --ok-soft: #e3ead9;
  --late: #a8441c;           /* "running late" */
  --late-soft: #fbe7dc;
  --live: #d69632;
  --shadow: 0 1px 2px rgba(33, 44, 62, .06), 0 6px 18px rgba(33, 44, 62, .10);
  --shadow-up: 0 -10px 30px rgba(33, 44, 62, .14);
  --glass: rgba(255, 253, 248, .95);
  --hero-bg: #212c3e;
  --hero-fg: #f6f1e7;
  --hero-sub: #d7dce5;
  --hero-k: #e8b766;
  --van-bg: #212c3e;
  --van-fg: #fffaf1;
  --pin-bg: #fffdf8;
  --pin-fg: #212c3e;
  --serif: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --map-h: 56vh;             /* older browsers */
  --radius: 18px;
}
@supports (height: 1svh) {
  :root { --map-h: 56svh; } /* phones: the map height ignores the browser's sliding address bar */
}
@media (prefers-color-scheme: dark) {
  :root {
    --cream: #1b2433; --paper: #212c3e; --sand: #2a3649; --line: #33405a; --line-2: #42506b;
    --navy: #eef1f6; --ink: #e3e7ee; --muted: #aab2c0; --muted-2: #7f8899;
    --accent: #e0a443; --accent-ink: #e8b766; --accent-soft: #3a3426; --on-accent: #1b2433;
    --ok: #a8c494; --ok-soft: #23332b; --late: #f39a72; --late-soft: #3e2a26; --live: #e0a443;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .35);
    --shadow-up: 0 -10px 30px rgba(0, 0, 0, .45);
    --glass: rgba(33, 44, 62, .93);
    --hero-bg: #26324a; --hero-fg: #f6f1e7; --hero-sub: #c9d0dc; --hero-k: #e8b766;
    --van-bg: #e0a443; --van-fg: #1b2433; --pin-bg: #212c3e; --pin-fg: #eef1f6;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--ink); font: 16px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none;
}
a { color: var(--accent-ink); }
button, select { font: inherit; color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 6px; }

/* ---------------------------------------------------------------- map ---- */
.map-wrap { position: fixed; inset: 0 0 auto 0; height: var(--map-h); z-index: 0; background: var(--sand); }
/* (more specific than MapLibre's own .maplibregl-map { position: relative }, which loads after this file) */
.map-wrap .map { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; padding: 24px; text-align: center; }
.map-note {
  position: absolute; left: 50%; bottom: 42px; transform: translateX(-50%); z-index: 3;
  display: none; align-items: center; gap: 8px; white-space: nowrap; color: var(--navy);
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px 8px 10px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.map-note.show { display: inline-flex; }
.map-note svg { width: 22px; height: 22px; flex: none; color: var(--muted); }
.map-btns { position: absolute; right: 12px; bottom: 40px; z-index: 3; display: flex; flex-direction: column; gap: 8px; }
.map-btn {
  width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); color: var(--navy);
  box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; padding: 0;
}
.map-btn svg { width: 22px; height: 22px; }
.map-btn[aria-pressed='true'] { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.map-wrap .maplibregl-ctrl-attrib { font-size: 10.5px; background: rgba(255, 253, 248, .85) !important; color: var(--muted); }
.map-wrap .maplibregl-ctrl-attrib a { color: var(--muted) !important; }
.map-wrap .maplibregl-ctrl-bottom-right, .map-wrap .maplibregl-ctrl-bottom-left { bottom: 26px; }

/* ---------------------------------------------------------------- top bar ---- */
.topbar {
  position: fixed; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none;
}
.brand, .chip { pointer-events: auto; }
.brand {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--navy); flex: 0 1 auto;
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px 4px 4px;
  box-shadow: var(--shadow); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); min-width: 0;
}
.brand img { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.brand span { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand b { font: 700 15px/1.1 var(--serif); letter-spacing: .1px; white-space: nowrap; }
.brand small { font-size: 11.5px; color: var(--muted); letter-spacing: .3px; white-space: nowrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 12px; border-radius: 999px; flex: 0 0 auto;
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: 13px; font-weight: 650; color: var(--muted); white-space: nowrap; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-2); flex: none; position: relative; }
.chip.live { color: var(--navy); }
.chip.live .dot { background: var(--live); }
.chip.live .dot::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--live); opacity: .55;
  animation: ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
.chip.stale { color: var(--accent-ink); background: var(--accent-soft); border-color: #e9d3a8; }
.chip.stale .dot { background: var(--accent); }
.chip.demo { border-style: dashed; border-color: var(--accent); color: var(--accent-ink); }
.chip.demo .dot { background: var(--accent); }
.chip .age { font-weight: 500; color: var(--muted); }
@keyframes ping { 0% { transform: scale(.6); opacity: 1; } 80%, 100% { transform: scale(1.9); opacity: 0; } }

/* ---------------------------------------------------------------- sheet ---- */
.sheet {
  position: relative; z-index: 2; margin-top: calc(var(--map-h) - 26px); min-height: calc(100vh - var(--map-h) + 26px);
  background: var(--cream); border-radius: 24px 24px 0 0; box-shadow: var(--shadow-up);
  padding: 8px 16px calc(28px + env(safe-area-inset-bottom));
}
@supports (height: 1svh) { .sheet { min-height: calc(100svh - var(--map-h) + 26px); } }
.grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 2px auto 12px; }
.sheet-inner { max-width: 560px; margin: 0 auto; }

/* your stop */
.mystop { display: flex; flex-direction: column; gap: 5px; margin: 0 0 12px; }
.mystop label { font-size: 12px; font-weight: 750; color: var(--muted); letter-spacing: 1.1px; text-transform: uppercase; padding-left: 2px; }
.select-wrap { position: relative; flex: 1; }
.select-wrap select {
  width: 100%; appearance: none; -webkit-appearance: none; min-height: 44px; padding: 9px 40px 9px 14px; color: var(--navy);
  border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper); font-weight: 600; font-size: 16px; cursor: pointer;
}
.select-wrap::after {
  content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; pointer-events: none;
  border-right: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink); transform: rotate(45deg);
}

/* banner */
.banner {
  display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.banner[hidden] { display: none; }
.banner .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.banner .ico svg { width: 28px; height: 28px; }
.banner h1 { font: 700 21px/1.22 var(--serif); margin: 1px 0 3px; letter-spacing: .1px; color: var(--navy); }
.banner p { margin: 0; color: var(--muted); font-size: 15px; }
.banner.here .ico { background: var(--ok-soft); color: var(--ok); }
.banner.here { border-color: #c9d7bb; }
.banner.stale .ico { background: var(--accent-soft); color: var(--accent-ink); }
.banner.done .ico, .banner.off .ico { background: var(--sand); color: var(--muted); }

/* run head */
.runhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 2px 6px; flex-wrap: wrap; }
.runhead h2 { font: 700 19px/1.25 var(--serif); margin: 0; color: var(--navy); }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); }
.badge.late { background: var(--late-soft); color: var(--late); }
.badge.muted { background: var(--sand); color: var(--muted); }

/* countdown card (no van on the road) */
.nextcard {
  background: var(--hero-bg); color: var(--hero-fg); border-radius: var(--radius); padding: 18px 18px 16px; margin: 6px 0 16px;
  position: relative; overflow: hidden; box-shadow: var(--shadow);
}
.nextcard::after { /* an echo of the logo's ochre ring, tucked into the corner behind the text */
  content: ''; position: absolute; right: -96px; top: -96px; width: 180px; height: 180px; border-radius: 50%; z-index: 0;
  border: 6px solid rgba(214, 150, 50, .5); box-shadow: 0 0 60px rgba(214, 150, 50, .2);
}
.nextcard > * { position: relative; z-index: 1; }
.nextcard .k { font-size: 12.5px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--hero-k); font-weight: 700; }
.nextcard .big { font: 700 26px/1.15 var(--serif); margin: 4px 0 2px; }
.nextcard .route { color: var(--hero-sub); font-size: 15px; }
.nextcard .count { display: flex; gap: 8px; margin: 14px 0 10px; position: relative; z-index: 1; }
.nextcard .count div { background: rgba(255, 253, 248, .08); border: 1px solid rgba(255, 253, 248, .16); border-radius: 12px; padding: 7px 10px; min-width: 62px; text-align: center; }
.nextcard .count b { display: block; font: 700 22px/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.nextcard .count span { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--hero-sub); }
.nextcard .cut { font-size: 14px; color: var(--hero-sub); position: relative; z-index: 1; }
.nextcard .cut b { color: #fff; }
.nextcard .idle { margin-top: 10px; display: inline-flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--hero-k); }

/* timeline */
.timeline { list-style: none; margin: 6px 0 0; padding: 0; position: relative; }
.stop { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 0 0 16px; cursor: pointer; border-radius: 12px; }
.stop:last-child { padding-bottom: 4px; }
.stop::before { content: ''; position: absolute; left: 19px; top: 34px; bottom: -2px; width: 2px; background: var(--line-2); border-radius: 1px; }
.stop:last-child::before { display: none; }
.stop.is-done::before { background: var(--muted-2); }
.node {
  width: 34px; height: 34px; margin: 2px 3px 0; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px;
  background: var(--paper); border: 2.5px solid var(--accent); color: var(--navy); position: relative; z-index: 1;
  font-variant-numeric: tabular-nums;
}
.stop.is-done .node { background: var(--muted-2); border-color: var(--muted-2); color: #fff; }
.stop.is-skipped .node { border-style: dashed; border-color: var(--muted-2); color: var(--muted); background: var(--cream); }
.stop.is-next .node { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.stop.is-here .node { background: var(--ok); border-color: var(--ok); color: #fff; }
.stop.is-here .node::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--ok); opacity: .55;
  animation: ping 2s cubic-bezier(0, 0, .2, 1) infinite;
}
.node svg { width: 16px; height: 16px; }
.body { padding: 4px 10px 6px; border-radius: 12px; min-width: 0; }
.stop.is-mine .body { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--accent); }
.stop:hover .body { background: var(--paper); }
.r1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.name { font-weight: 700; font-size: 16.5px; color: var(--navy); }
.stop.is-done .name, .stop.is-skipped .name { color: var(--muted); }
.time { font-size: 14px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.place { color: var(--muted); font-size: 14px; margin-top: 1px; }
.mine-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-soft); padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; }
.note { color: var(--accent-ink); font-size: 13px; font-style: italic; }
.live-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--sand); color: var(--navy); font-variant-numeric: tabular-nums; }
.pill.next { background: var(--navy); color: var(--cream); }
.pill.here { background: var(--ok); color: #fff; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.late { background: var(--late-soft); color: var(--late); }
.pill.done { background: transparent; color: var(--muted); padding-left: 0; font-weight: 600; }

/* footer, demo bar, errors */
.foot { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.55; }
.foot p { margin: 0 0 6px; }
.demo-bar { display: none; gap: 8px; align-items: center; margin: 0 0 12px; padding: 9px 12px; border-radius: 12px; border: 1px dashed var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-size: 14px; }
.demo-bar.show { display: flex; }
.demo-bar button { margin-left: auto; border: 0; background: var(--navy); color: var(--cream); font-weight: 700; padding: 7px 12px; border-radius: 9px; cursor: pointer; min-height: 36px; }
.err { display: none; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--late-soft); color: var(--late); font-size: 14px; }
.err.show { display: block; }

/* ---------------------------------------------------------------- markers ---- */
.stop-pin { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--pin-bg);
  border: 2.5px solid var(--accent); color: var(--pin-fg); font: 800 13px/1 var(--sans); box-shadow: 0 2px 6px rgba(33, 44, 62, .28);
  cursor: pointer; padding: 0; }
.stop-pin .lbl { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); white-space: nowrap;
  background: var(--glass); border: 1px solid var(--line); border-radius: 8px; padding: 2px 7px; font: 700 12px/1.3 var(--sans);
  color: var(--navy); box-shadow: 0 1px 4px rgba(33, 44, 62, .15); display: none; pointer-events: none; }
.show-labels .stop-pin .lbl, .stop-pin.is-mine .lbl, .stop-pin.is-next .lbl, .stop-pin.is-here .lbl { display: block; }
.stop-pin.is-done { background: var(--muted-2); border-color: #fff; color: #fff; }
.stop-pin.is-done svg { width: 14px; height: 14px; }
.stop-pin.is-skipped { border-style: dashed; border-color: var(--muted-2); color: var(--muted-2); opacity: .8; }
.stop-pin.is-next { background: var(--accent); border-color: #fff; color: var(--on-accent); width: 32px; height: 32px; font-size: 14px; z-index: 2; }
.stop-pin.is-here { background: var(--ok); border-color: #fff; color: #fff; width: 32px; height: 32px; font-size: 14px; z-index: 2; }
.stop-pin.is-here::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--ok); opacity: .6; animation: ping 2s cubic-bezier(0, 0, .2, 1) infinite; }
.stop-pin.is-mine { box-shadow: 0 0 0 4px rgba(214, 150, 50, .35), 0 2px 6px rgba(33, 44, 62, .28); }

.van { width: 54px; height: 54px; position: relative; pointer-events: none; }
.van .halo { position: absolute; inset: 0; border-radius: 50%; background: rgba(214, 150, 50, .28); }
.van.live .halo { animation: vanpulse 2.2s ease-out infinite; }
.van .heading { position: absolute; inset: -9px; transition: transform .6s ease; }
.van .heading svg { width: 100%; height: 100%; }
.van .body { position: absolute; inset: 9px; border-radius: 50%; background: var(--van-bg); color: var(--van-fg); border: 3px solid var(--accent);
  display: grid; place-items: center; box-shadow: 0 4px 12px rgba(33, 44, 62, .38); padding: 0; }
.van .body svg { width: 24px; height: 24px; }
.van.stale .body { background: #7d8494; border-color: #c9ced8; color: #fff; }
.van.stale .heading { opacity: .35; }
.van .age { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); white-space: nowrap;
  font: 700 11.5px/1.3 var(--sans); color: var(--accent-ink); background: var(--accent-soft); border: 1px solid #e9d3a8;
  border-radius: 8px; padding: 1px 7px; display: none; }
.van.stale .age { display: block; }
@keyframes vanpulse { 0% { transform: scale(.75); opacity: .9; } 70% { transform: scale(1.55); opacity: 0; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------- desktop ---- */
@media (min-width: 980px) {
  :root { --map-h: 100vh; }
  .map-wrap { inset: 0 0 0 440px; height: auto; }
  .sheet { position: fixed; inset: 0 auto 0 0; width: 440px; margin: 0; min-height: 0; border-radius: 0; overflow-y: auto;
    padding: 84px 22px 26px; box-shadow: 8px 0 30px rgba(33, 44, 62, .10); }
  .grab { display: none; }
  .topbar { left: 18px; right: auto; width: 404px; top: 16px; }
  .map-note { bottom: 34px; }
  .map-btns { bottom: 34px; right: 16px; }
  .map-wrap .maplibregl-ctrl-bottom-right, .map-wrap .maplibregl-ctrl-bottom-left { bottom: 0; }
}
@media (max-width: 420px) {
  .chip .w { display: none; }
}
@media (max-width: 380px) {
  .brand small { display: none; }
  .brand b { font-size: 14px; }
  .banner h1 { font-size: 19.5px; }
  .chip { font-size: 12.5px; padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* dark mode: element overrides (after the rules they override) */
@media (prefers-color-scheme: dark) {
  .map-wrap { background: #1b2433; }
  .nextcard { border: 1px solid var(--line); }
  .stop.is-done .node, .stop-pin.is-done { color: #1b2433; }
  .pill.here, .stop.is-here .node, .stop-pin.is-here { color: #142016; }
  .pill.next { background: var(--accent); color: var(--on-accent); }
  .demo-bar button { background: var(--accent); color: var(--on-accent); }
  .map-btn[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .map-wrap .maplibregl-ctrl-attrib { background: rgba(33, 44, 62, .88) !important; color: var(--muted); }
  .map-wrap .maplibregl-ctrl-attrib a { color: #c3cad6 !important; }
  .banner.here { border-color: #3c5240; }
  .chip.stale, .van .age { border-color: #5a4c2c; }
  .van.stale .body { background: #5d6577; border-color: #8e95a3; }
}

/* ---------------------------------------------------------------- ?mini=1 (the driver screen's little map) ---- */
html.mini { --map-h: 100vh; }
html.mini .sheet, html.mini .brand { display: none; }
html.mini .topbar { justify-content: flex-end; }