/* Pick Me Up: calm, warm, big type. One glance should answer "when do I leave?" */
@font-face { font-family: "Nunito"; font-weight: 300 900; src: url(/fonts/nunito-latin-wght-normal.woff2) format("woff2"); font-display: swap; }

:root {
  --bg: #f7f3ec; --card: #fffdf9; --ink: #1d2733; --mute: #6a7280; --line: #e7e0d4;
  --yellow: #f4b400; --yellow-soft: #fff3cc;
  --green: #23805a; --green-soft: #e3f3ea;
  --amber: #b86a00; --amber-soft: #fdf0d8;
  --red: #b4432a; --red-soft: #fbe6df;
  --blue: #2f5fb3;
  --shadow: 0 1px 2px #1d273310, 0 6px 20px #1d27330d;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.45 "Nunito", system-ui, sans-serif; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
a { color: var(--blue); }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.top, main, .foot { max-width: 560px; margin: 0 auto; padding: 0 16px; }
.top { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 6px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.ghost { background: none; border: 0; color: var(--blue); font-weight: 700; padding: 8px 4px; }
.primary { background: var(--ink); color: #fff; border: 0; border-radius: 12px; padding: 12px 22px; font-weight: 800; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 18px; margin: 12px 0; box-shadow: var(--shadow); }
h1 { font-size: 28px; line-height: 1.15; margin: 4px 0 8px; letter-spacing: -.02em; }
h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); margin: 0 0 10px; font-weight: 800; }
.lede { color: var(--mute); margin: 0 0 8px; }

/* hero: the answer */
.hero { text-align: center; padding: 22px 18px 18px; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--yellow); }
.when { font-weight: 800; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.leave-label { margin-top: 10px; font-weight: 700; color: var(--mute); }
.leave { font-weight: 900; font-size: clamp(56px, 17vw, 84px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 2px 0 6px; }
.count { font-weight: 800; font-size: 20px; }
.dest { color: var(--mute); margin-top: 2px; }
.verdict { display: inline-flex; align-items: center; gap: 8px; margin: 14px auto 0; padding: 8px 14px; border-radius: 999px; font-weight: 800; font-size: 16px; text-align: left; }
.verdict::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.verdict.clear { background: var(--green-soft); color: var(--green); }
.verdict.heads-up { background: var(--amber-soft); color: var(--amber); }
.verdict.watch { background: var(--red-soft); color: var(--red); }
.verdict.loading { background: #f0ece4; color: var(--mute); }
.math { color: var(--mute); font-size: 15px; margin-top: 12px; }
.math b { color: var(--ink); }
.hero.late .leave { color: var(--red); }
.hero.now .leave { color: var(--amber); }

/* map */
.map-card { padding: 0; overflow: hidden; }
#map { height: 240px; background: #eae5dc; }
.via { padding: 10px 16px; font-size: 15px; color: var(--mute); border-top: 1px solid var(--line); }
.leaflet-container { font: inherit; }

/* events */
.events { list-style: none; margin: 0; padding: 0; }
.events li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.events li:first-child { border-top: 0; padding-top: 2px; }
.ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; background: #f1ece3; }
.on .ico { background: var(--red-soft); } .near .ico { background: var(--amber-soft); }
.ev-t { font-weight: 800; line-height: 1.25; }
.ev-m { color: var(--mute); font-size: 15px; }
.tag { display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 1px 7px; border-radius: 6px; margin-right: 6px; vertical-align: 1px; }
.on .tag { background: var(--red-soft); color: var(--red); } .near .tag { background: var(--amber-soft); color: var(--amber); } .city .tag { background: #eee9df; color: var(--mute); }
.empty { color: var(--mute); margin: 0; }
.empty b { color: var(--green); }

/* week */
.week { list-style: none; margin: 0; padding: 0; }
.week li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.week li:first-child { border-top: 0; padding-top: 0; }
.week .d { width: 72px; flex: none; font-weight: 800; line-height: 1.2; }
.week .d small { display: block; font-weight: 600; color: var(--mute); font-size: 14px; }
.week .w { flex: 1; min-width: 0; font-size: 15px; }
.week .w b { font-weight: 800; }
.week .w .ev-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week .w > div:last-child { color: var(--ink); }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--green); }
.dot.heads-up { background: var(--yellow); } .dot.watch { background: var(--red); } .dot.skip { background: #d8d2c6; }
.week .skipbtn { background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--mute); font-size: 13px; font-weight: 700; padding: 4px 8px; flex: none; }
.week li.skipped .w { color: var(--mute); text-decoration: line-through; }
.updated { text-align: center; color: var(--mute); font-size: 14px; margin: 4px 0 0; }

/* setup */
.setup fieldset { border: 0; padding: 0; margin: 18px 0 0; }
.setup legend { font-weight: 800; margin-bottom: 8px; padding: 0; }
.setup .row { display: flex; gap: 8px; }
.setup input[type=text], .setup input:not([type]), .setup input[name=q] { flex: 1; min-width: 0; }
.setup input { font: inherit; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.setup input:focus { outline: 0; border-color: var(--ink); }
.setup input.short { width: 96px; flex: none; }
.setup .find { margin-top: 8px; background: var(--yellow-soft); border: 1.5px solid var(--yellow); border-radius: 10px; padding: 7px 14px; font-weight: 800; color: var(--ink); }
.matches { display: grid; gap: 6px; margin-top: 8px; }
.matches label { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 15px; background: #fff; }
.matches label:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.matches input { margin-top: 4px; }
.trip { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-weight: 700; }
.trip input[type=time] { margin-left: auto; width: 140px; }
.days { display: flex; flex-wrap: wrap; gap: 6px; }
.days input { position: absolute; opacity: 0; pointer-events: none; }
.days span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; }
.days input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.days input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.msg { min-height: 1.4em; color: var(--red); font-weight: 700; margin: 14px 0 0; }
.actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; }

.foot { color: var(--mute); font-size: 13px; padding-top: 18px; padding-bottom: 28px; }
.foot p { margin: 0 0 8px; }
.foot a { color: var(--mute); }
.sources { border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 12px; }
.sources h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 6px; color: var(--mute); }
.sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.sources b { color: var(--ink); font-weight: 700; margin-right: 4px; }
@media (min-width: 980px) { .sources ul { grid-template-columns: 1fr 1fr; column-gap: 28px; } }

@media (prefers-reduced-motion: no-preference) { .card { animation: up .25s ease-out; } @keyframes up { from { opacity: 0; transform: translateY(6px); } } }

/* laptop: the answer and the map side by side, details underneath */
@media (min-width: 980px) {
  .top, main, .foot { max-width: 1180px; }
  .board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "hero map" "onway sched" "city sched" "art sched" "upd upd"; grid-template-rows: auto auto auto 1fr auto; column-gap: 20px; align-items: start; }
  #hero { grid-area: hero; }
  .map-card { grid-area: map; align-self: stretch; display: flex; flex-direction: column; margin-top: 12px; margin-bottom: 12px; }
  .map-card #map { flex: 1; min-height: 340px; height: auto; }
  #on-way { grid-area: onway; }
  #elsewhere { grid-area: city; }
  .art-card { grid-area: art; display: block !important; }
  .sched { grid-area: sched; }
  .updated { grid-area: upd; }
  .setup { max-width: 680px; margin: 12px auto; }
  .leave { font-size: 96px; }
}

/* ---- Theme: wood-panel station wagon, early-80s carpool ---- */
@font-face { font-family: "Fraunces"; font-weight: 100 900; font-style: normal; src: url(/fonts/fraunces-latin-full-normal.woff2) format("woff2"); }

:root { --bg:#f4ead4; --card:#fffaf0; --ink:#3a2616; --mute:#7d6650; --line:#e4d3b2; --green:#5f6f1f; --green-soft:#eef0d6; --amber:#9a6400; --amber-soft:#fbefcf; --red:#b8441b; --red-soft:#f9e0d2; --blue:#a44a14; --wood:#7a4a24; }
body { background:#f4ead4; }
h1, h2, .brand .logo, .leave, .when, .count { font-family:"Fraunces",Georgia,serif; font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144; }
.brand { font-size:24px; color:#5a3417; font-weight:900; }
.decal { display:inline-flex; flex-direction:column; gap:2px; margin-left:8px; } .decal i { display:block; width:46px; height:4px; border-radius:2px; } .decal i:nth-child(1){background:#d9631e} .decal i:nth-child(2){background:#e5a630} .decal i:nth-child(3){background:#7a4a24}
.card { border-color:#e4d3b2; box-shadow:0 2px 0 #e0cda8, 0 8px 22px #5a34170f; }
h2 { text-transform:none; letter-spacing:0; font-size:22px; color:#5a3417; font-weight:800; }
.hero { padding:14px; background:
  linear-gradient(180deg,#0000 0 46%,#ffffff22 50%,#0000 54%),
  repeating-linear-gradient(180deg,#7a4a24 0 5px,#8c5a2c 5px 9px,#6b3f1e 9px 11px,#93612f 11px 18px,#7f4e27 18px 23px);
  border:3px solid #c9ccd1; box-shadow: inset 0 0 0 2px #8e9399, 0 8px 22px #5a34171f; }
.hero::before { display:none; }
.door { background:#fffaf0; border-radius:12px; padding:20px 14px 16px; box-shadow: 0 0 0 3px #d9dce0, 0 0 0 5px #9aa0a6; }
.when { color:#a44a14; font-weight:800; font-size:16px; letter-spacing:.06em; }
.leave { font-weight:900; color:#3a2616; letter-spacing:-.01em; }
.count { font-weight:800; }
.verdict { border-radius:6px; transform:rotate(-1.2deg); font-family:"Fraunces",Georgia,serif; font-variation-settings:"SOFT" 100,"WONK" 1; font-weight:900; text-transform:uppercase; letter-spacing:.03em; border:2px dashed #fffaf099; box-shadow:0 2px 0 #00000022; }
.verdict::before { display:none; }
.verdict.clear { background:#6f7d2c; color:#fffaf0; } .verdict.heads-up { background:#e5a630; color:#3a2616; } .verdict.watch { background:#d9631e; color:#fffaf0; }
.leaflet-tile-pane { filter:sepia(.45) saturate(.8) brightness(1.03); }
/* Upcoming trips is a ruled notepad page: every line of text sits on a rule. */
.sched { background:#fffdf6; position:relative; padding-left:40px; }
.sched::before { content:""; position:absolute; left:26px; top:0; bottom:0; width:2px; background:#e8a0a0; }
.sched h2 { line-height:32px; margin:0 0 8px; }
.week { background: repeating-linear-gradient(180deg, #0000 0 23px, #bcd3e6 23px 24px); }
.week li, .week li:first-child { border-top:0; padding:0 0 24px; align-items:flex-start; gap:10px; }
.week li:last-child { padding-bottom:0; }
.week .d, .week .d small, .week .w, .week .w div, .week .w b { line-height:24px; font-size:15px; }
.week .d small { font-size:14px; }
.week .dot { margin-top:6px; }
.week .skipbtn { line-height:20px; padding:1px 8px; margin-top:1px; background:#fffdf6; }
.ico { background:#f6e6c4; }
.primary { background:#d9631e; color:#fffaf0; box-shadow:0 3px 0 #8a3d12; border-radius:10px; }
.setup .find { background:#fbefcf; border-color:#e5a630; }
.days input:checked + span { background:#5a3417; border-color:#5a3417; }

/* the pick-up illustration: on the setup card, and filling the laptop's left column */
.art { display: block; width: calc(100% + 36px); max-width: none; height: auto; margin: -18px -18px 12px; border-radius: 20px 20px 0 0; }
.art-card { display: none; padding: 0; overflow: hidden; }
.art-card img { display: block; width: 100%; height: auto; }

/* one-off trips in settings */
.hint { color: var(--mute); font-size: 15px; margin: 0 0 8px; }
.extras { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.extras li { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 10px; background: #fff; font-weight: 700; font-size: 15px; }
.extra-add { margin-top: 8px; }
.extra-add .find { margin-top: 0; flex: none; }
.setup input[type=date], .setup input[type=time] { flex: 1; min-width: 0; }

/* schedule rows open to show the whole story for that trip */
.week li, .week li:first-child { flex-wrap: wrap; row-gap: 0; }
.week .w { cursor: pointer; }
.week .w:focus-visible { outline: 3px solid #e5a630; outline-offset: 2px; border-radius: 4px; }
.week .w > div:first-child b::after { content: " ›"; color: var(--mute); font-weight: 700; }
.week li.open .w > div:first-child b::after { content: " ⌄"; }
.week li.open .w .ev-m { white-space: normal; }
.week .more { flex-basis: 100%; margin-left: 94px; font-size: 15px; line-height: 24px; }
.week .more p { margin: 0; line-height: 24px; }
.week .more .ev { font-weight: 800; }
.week .more .tag { line-height: 18px; padding: 0 6px; font-size: 11px; vertical-align: 1px; }
@media (max-width: 420px) { .week .more { margin-left: 0; } }

/* places and per-trip legs */
.place-block { border: 1.5px solid var(--line); border-radius: 14px; padding: 10px; margin-bottom: 10px; background: #fffdf8; }
.place-block .row { display: flex; gap: 8px; }
.place-block .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.place-block .head .ghost { padding: 2px 4px; font-size: 14px; }
.legs { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px 30px; color: var(--mute); font-weight: 700; }
.legs select { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 7px 8px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.legs.extra-add { margin-left: 0; }
.legs.then { margin-top: -6px; font-weight: 600; font-size: 14px; }
.legs.then select { flex: 0 1 60%; }

.then-line { margin-top: 6px; color: var(--ink); font-weight: 700; }

/* iPhone Safari gives time/date inputs and selects a wide built-in minimum
   width, which pushed them past the card's edge. Let them shrink. */
.setup input[type=date], .setup input[type=time], .legs select { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; box-sizing: border-box; }
.setup input[type=date], .setup input[type=time] { min-height: 46px; text-align: center; }
.trip input[type=time] { flex: 0 0 136px; width: 136px; }
.extra-add input[type=date], .extra-add input[type=time] { flex: 1 1 0; width: 0; }
.legs { min-width: 0; }
.legs select {
  flex: 1 1 0; width: 0; text-overflow: ellipsis; padding-right: 28px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237d6650' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center;
}
.legs.then select { flex: 1 1 0; width: 0; max-width: 260px; }
@media (max-width: 420px) {
  .legs { margin-left: 0; }
  .trip { flex-wrap: wrap; }
}