/* Je Fe Deliveries — mobile first. Phone widths are the default; larger screens add layout. */
:root {
  --ink:#131a2e; --ink-soft:#4b5470; --line:#e3e7f0; --bg:#f7f8fb; --card:#fff;
  --accent:#0f7a4d; --accent-dark:#0a5c3a; --warn:#a1560b; --err:#a81f2d; --live:#e8603c;
  --tap:44px;                 /* smallest comfortable touch target */
  --pad:16px;
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.55; font-size:16px;
  overscroll-behavior-y:none; -webkit-tap-highlight-color:transparent; }
a { color:var(--accent-dark); }
h1 { font-size:clamp(23px,7vw,38px); line-height:1.15; letter-spacing:-.02em; margin:0 0 10px;
  overflow-wrap:break-word; }
h2 { font-size:20px; margin:26px 0 12px; }
h3 { font-size:16px; margin:0 0 6px; }
p { margin:0 0 14px; overflow-wrap:break-word; }
.wrap { max-width:1040px; margin:0 auto; padding:0 var(--pad); }
.wrap-wide { max-width:1320px; }

.top { background:var(--card); border-bottom:1px solid var(--line); padding:calc(10px + var(--safe-t)) 0 10px; }
.nav { display:flex; flex-wrap:wrap; align-items:center; gap:0 12px; }
.brand { font-weight:700; font-size:18px; letter-spacing:-.02em; text-decoration:none; color:var(--ink);
  white-space:nowrap; display:inline-flex; align-items:center; min-height:var(--tap); padding:0 2px; flex:1 1 auto; }
.brand span { color:var(--accent); }
/* Brand on its own line, links as a wrapped pill row under it: nothing hidden, nothing clipped. */
.top nav { display:flex; flex-wrap:wrap; gap:2px 0; flex:1 1 100%; min-width:0; }
.top nav a { text-decoration:none; color:var(--ink-soft); padding:0 10px; border-radius:8px; font-size:15px;
  min-height:var(--tap); display:inline-flex; align-items:center; white-space:nowrap; flex:0 0 auto; }
.top nav a.on { background:#eef6f1; color:var(--accent-dark); font-weight:600; }
main { padding:22px var(--pad) calc(48px + var(--safe-b)); }
.foot { border-top:1px solid var(--line); background:var(--card); padding:20px var(--pad) calc(20px + var(--safe-b));
  color:var(--ink-soft); font-size:14px; }
.foot p { margin:0; }

.hero { padding:14px 0 4px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; background:#eef6f1; color:var(--accent-dark);
  padding:7px 12px; border-radius:999px; font-size:13px; font-weight:600; margin:0 0 14px; }
.lede { font-size:17px; color:var(--ink-soft); max-width:62ch; }
.hero-cta { display:flex; flex-direction:column; gap:10px; margin:20px 0 6px; }
.live-dot { width:9px; height:9px; border-radius:50%; background:var(--live); display:inline-block;
  animation:pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity:.25; } }
@media (prefers-reduced-motion:reduce) { .live-dot { animation:none; } }

.btn { display:inline-flex; align-items:center; justify-content:center; min-height:var(--tap);
  background:var(--accent); color:#fff; border:0; text-decoration:none;
  padding:12px 20px; border-radius:10px; font-weight:600; font-size:16px; cursor:pointer;
  text-align:center; }
.btn-big { padding:16px 22px; font-size:18px; width:100%; }
.btn-ghost { background:#fff; color:var(--accent-dark); border:1px solid #cfe0d6; }
.btn-sm { padding:8px 12px; font-size:13px; }
.btn-accepted { background:#1b6fb8; }
.btn-delivered { background:var(--accent); }
.btn-cancelled, .btn-declined { background:#7b8194; }
.btn-picked_up, .btn-in_transit { background:#b4741a; }
.btn-pinged { background:#a1440b; }

.grid3 { display:grid; grid-template-columns:1fr; gap:14px; margin:26px 0 8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin:0 0 16px; }
.strip { margin-top:30px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.citychip { display:inline-flex; flex-direction:column; justify-content:center; background:var(--card);
  border:1px solid var(--line); border-radius:10px; padding:10px 14px; text-decoration:none; color:var(--ink);
  font-weight:600; min-height:var(--tap); }
.citychip small { font-weight:400; color:var(--ink-soft); font-size:12px; }

/* One tap row per city: a four-column table is unreadable at phone width. */
.citylist { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.cityrow { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line);
  border-radius:11px; padding:6px 8px; min-height:var(--tap); }
.cityname { flex:1; min-width:0; display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  font-weight:600; padding:6px 4px; }
.cityname small { font-weight:400; color:var(--ink-soft); font-size:12px; }
.cityrow .btn { flex:0 0 auto; }

.form { display:flex; flex-direction:column; gap:14px; max-width:820px; }
.form-inline { flex-direction:column; align-items:stretch; }
label { display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600; color:var(--ink-soft); flex:1; }
label.check { flex-direction:row; align-items:center; gap:10px; min-height:var(--tap); font-size:15px; }
label.small { font-size:13px; }
.row { display:flex; flex-direction:column; gap:14px; }
/* 16px keeps iOS Safari from zooming the viewport when a field takes focus. */
input, select, textarea { font:inherit; font-size:16px; padding:12px; border:1px solid #ccd2e0; border-radius:10px;
  background:#fff; color:var(--ink); width:100%; min-height:var(--tap); }
input[type=checkbox] { width:22px; height:22px; min-height:0; flex:0 0 auto; accent-color:var(--accent); }
input:focus, select:focus, textarea:focus { outline:2px solid #b9dcc9; border-color:var(--accent); }
textarea { resize:vertical; }
button { font:inherit; }
.quote { background:#f2f9f5; border:1px solid #cfe0d6; border-radius:10px; padding:12px 14px; font-size:15px; }
.quote:empty { display:none; }
.quote b { font-size:20px; }
.quote.err { background:#fdf1f2; border-color:#f0c9ce; color:var(--err); }

.flash { padding:12px 14px; border-radius:10px; margin:0 0 16px; font-size:15px; }
.flash-ok { background:#e9f7ef; color:#12603c; border:1px solid #bfe3cd; }
.flash-err { background:#fdf1f2; color:var(--err); border:1px solid #f0c9ce; }
.flash-warn { background:#fdf6e8; color:var(--warn); border:1px solid #f0dfb8; }

.muted { color:var(--ink-soft); }
.small { font-size:13px; }
.ref { font-family:ui-monospace,Menlo,monospace; font-size:16px; background:#eef1f7; padding:3px 8px; border-radius:6px;
  word-break:break-all; }

/* Tables scroll sideways and keep the first column in view, which is what a wide job list needs on a phone. */
.tbl { width:100%; border-collapse:collapse; font-size:14px; background:var(--card);
  display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl th, .tbl td { text-align:left; padding:10px; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl thead th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);
  position:sticky; top:0; background:var(--card); }
.tbl td:first-child, .tbl th:first-child { position:sticky; left:0; background:var(--card); }
.tbl a { display:inline-flex; align-items:center; min-height:var(--tap); padding:0 6px; margin:-8px -4px; }
.tbl td a { white-space:nowrap; }   /* booking codes must never break mid-token */
/* Member-side tables have to fit a phone with no sideways scroll: fixed layout, wrapping cells. */
.tbl-fit { table-layout:fixed; font-size:13px; }
.tbl-fit th, .tbl-fit td { padding:9px 6px; overflow-wrap:break-word; }
.tbl-fit th:nth-child(1), .tbl-fit td:nth-child(1) { width:22%; }
.tbl-fit th:nth-child(3), .tbl-fit td:nth-child(3) { width:19%; }
.tbl-fit th:nth-child(4), .tbl-fit td:nth-child(4) { width:30%; }
.tbl-fit .pill { font-size:11px; padding:3px 6px; white-space:nowrap; }
/* Wide admin tables become stacked cards until there is real room for ten columns (~1200px). */
@media (max-width:1199px) {
  .tbl-cards { display:block; }
  .tbl-cards thead { display:none; }
  /* Without this the leftover table-row-group shrink-wraps the cards to their content width. */
  .tbl-cards tbody { display:block; width:100%; }
  .tbl-cards tr { display:block; width:100%; background:var(--card); border:1px solid var(--line);
    border-radius:12px; padding:6px 12px; margin-bottom:10px; }
  .tbl-cards td { display:flex; justify-content:space-between; gap:12px; border-bottom:0; padding:7px 0;
    text-align:right; }
  .tbl-cards td::before { content:attr(data-label); flex:0 0 auto; font-size:11px; text-transform:uppercase;
    letter-spacing:.04em; color:var(--ink-soft); text-align:left; }
  .tbl-cards td:not([data-label]) { justify-content:flex-end; }
  .tbl-cards td:first-child { border-bottom:1px solid var(--line); position:static; }
  /* Tablet and small laptop: two cards per row keeps a long list scannable. */
  @media (min-width:700px) {
    .tbl-cards tbody { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:10px; }
    .tbl-cards tr { margin-bottom:0; }
  }
}
/* A code breaks only where a <wbr> sits after the dash, never mid-token. */
.tbl-fit td a { white-space:normal; overflow-wrap:normal; }
/* Three columns fit a phone; the timestamp can wait for a wider screen. */
@media (max-width:599px) { .tbl-fit .c-when { display:none; } }
@media (min-width:600px) { .tbl-fit .pill { font-size:12px; padding:3px 8px; } }
.tbl input { padding:8px; }
.kv { width:100%; border-collapse:collapse; font-size:15px; }
.kv th { text-align:left; color:var(--ink-soft); font-weight:600; padding:8px 12px 0 0; font-size:13px;
  text-transform:uppercase; letter-spacing:.04em; }
.kv td { padding:2px 0 8px; border-bottom:1px solid var(--line); }

.statusbar { height:8px; background:#e6eaf3; border-radius:99px; margin:6px 0 14px; overflow:hidden; }
.statusfill { height:100%; background:var(--accent); }
.hint { background:#eef4ff; border:1px solid #cfe0f5; color:#1b4f80; padding:12px 14px; border-radius:10px; }
.timeline { list-style:none; margin:18px 0; padding:0; border-left:2px solid var(--line); }
.timeline li { position:relative; padding:0 0 16px 18px; }
.timeline li::before { content:""; position:absolute; left:-6px; top:6px; width:10px; height:10px;
  border-radius:50%; background:#c9d0e0; }
.timeline li.now::before { background:var(--accent); }
.timeline span { display:block; font-size:12px; color:var(--ink-soft); }
.timeline p { font-size:14px; color:var(--ink-soft); margin:2px 0 0; }
.steps li { margin-bottom:9px; }

.pill { display:inline-block; font-size:12px; padding:4px 9px; border-radius:99px; font-weight:600;
  white-space:nowrap; }
.pill-pending { background:#fdf6e8; color:var(--warn); }
.pill-pinged { background:#fdeee6; color:#a1440b; }
.pill-accepted { background:#e8f1fb; color:#1b6fb8; }
.pill-picked_up, .pill-in_transit { background:#eef4ff; color:#3a5ea8; }
.pill-delivered { background:#e9f7ef; color:#12603c; }
.pill-cancelled, .pill-declined, .pill-expired { background:#eef0f5; color:#6a7186; }
.ok { color:#12603c; font-weight:600; }
.bad { color:var(--err); font-weight:600; }

/* Admin: sidebar becomes a scrollable strip, panels go full width. */
body.admin { background:#f2f4f9; }
.admin-grid { display:grid; grid-template-columns:1fr; gap:16px; align-items:start; padding-top:14px; }
.side { display:flex; flex-direction:row; flex-wrap:wrap; gap:4px; padding-bottom:4px; }
.side a { padding:10px 13px; border-radius:9px; text-decoration:none; color:var(--ink-soft); font-size:14px;
  white-space:nowrap; flex:0 0 auto; min-height:var(--tap); display:inline-flex; align-items:center; }
.side a.on { background:var(--card); color:var(--accent-dark); font-weight:600; border:1px solid var(--line); }
.panel { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; min-width:0;
  overflow-x:auto; }
.top-admin { background:#131a2e; }
.top-admin .brand, .top-admin .brand span { color:#fff; }
.top-admin .brand span { color:#6fd3a0; }
.top-admin nav a { color:#b9c2d8; }
.top-admin nav a.on { background:#22304c; color:#fff; }
.statgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:11px; padding:12px 14px; min-width:0; }
.stat b { display:block; font-size:19px; overflow-wrap:anywhere; }
.stat span { font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.board { display:grid; grid-template-columns:1fr; gap:12px; }
.colcol { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; min-width:0; }
.colcol h2 { font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin:0 0 10px; }
.colcol h2 small { color:#9aa1b5; }
/* On a phone an empty stage column is noise; the counts in the statgrid already say zero. */
@media (max-width:599px) { .colcol.empty { display:none; } }
.job { display:block; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:9px;
  padding:11px 10px; margin-bottom:8px; font-size:14px; min-height:var(--tap); }
.job span { display:block; font-size:13px; color:var(--ink-soft); overflow-wrap:anywhere; }
.inlineform { display:flex; gap:8px; align-items:stretch; flex-wrap:wrap; margin:0 0 8px; }
.drive-state { background:#131a2e; color:#dfe6f5; border-radius:11px; padding:14px 16px; font-size:14px;
  font-family:ui-monospace,Menlo,monospace; margin-bottom:16px; overflow-wrap:anywhere; }
.drive-state.good { background:#0d3b28; }
.drive-state.bad { background:#4a1720; }
/* Driver feed link is a long token URL: give it a full tap row instead of a text-width target. */
.feed-url { font-size:13px; margin:0 0 12px; word-break:break-all; }
.feed-url a { display:inline-flex; align-items:center; min-height:var(--tap); }

/* The driver page is used one-handed in a cab: keep the controls where a thumb reaches. */
.cta-bar { position:sticky; bottom:0; display:flex; gap:10px; padding:10px var(--pad) calc(10px + var(--safe-b));
  background:rgba(247,248,251,.94); backdrop-filter:blur(6px); border-top:1px solid var(--line); margin:0 calc(0px - var(--pad)); }
.cta-bar .btn { flex:1; }

@media (min-width:600px) {
  .hero-cta { flex-direction:row; }
  .btn-big { width:auto; }
  .form-inline { flex-direction:row; align-items:end; }
  .row { flex-direction:row; flex-wrap:wrap; }
  .statgrid { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
  .board { grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }
  .grid3 { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
  .citylist { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
}

@media (min-width:900px) {
  .nav { flex-wrap:nowrap; justify-content:space-between; }
  .brand { flex:0 0 auto; }
  .top nav { flex:0 1 auto; justify-content:flex-end; }
  .admin-grid { grid-template-columns:190px minmax(0,1fr); }
  .side { position:sticky; top:14px; flex-direction:column; flex-wrap:nowrap; overflow:visible; }
  .panel { padding:20px; }
  main { padding:26px var(--pad) 56px; }
}

@media (hover:none) {
  .citychip:hover, .job:hover, .btn:hover { border-color:var(--line); }
  .btn:hover { background:var(--accent); }
  .btn-ghost:hover { background:#fff; }
}

/* ---------- Landing page. Public, so it earns its keep visually. ---------- */
.hero-rich { background:linear-gradient(160deg,#0a5c3a 0%,#0f7a4d 46%,#123f6b 100%);
  color:#fff; border-radius:16px; padding:26px 18px 30px; margin:0 0 8px; overflow:hidden;
  position:relative; }
.hero-rich::after { content:""; position:absolute; inset:auto -60px -90px auto; width:260px; height:260px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,0) 70%); }
.hero-grid { display:grid; gap:26px; position:relative; z-index:1; }
.hero-rich .eyebrow { background:rgba(255,255,255,.16); color:#fff; }
.hero-rich h1 { color:#fff; margin-bottom:12px; }
.hero-rich h1 em { font-style:normal; color:#8ff0bd; }
.hero-rich .lede { color:rgba(255,255,255,.86); font-size:17px; max-width:46ch; }
.fineprint { color:rgba(255,255,255,.66); font-size:13px; margin:14px 0 0; }
.fineprint code { background:rgba(255,255,255,.16); color:#fff; padding:2px 6px; border-radius:6px; }
.hero-rich .hero-cta { margin:22px 0 0; }
.btn-ghost-alt { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5); }
.btn-ghost-alt:hover { background:rgba(255,255,255,.12); }

/* Mock of the actual alert, so the pitch is the product. */
.ping-card { background:#fff; color:var(--ink); border-radius:14px; padding:14px 15px 10px;
  box-shadow:0 16px 34px rgba(6,32,22,.34); max-width:360px; }
.ping-head { display:flex; align-items:center; gap:10px; padding-bottom:9px;
  border-bottom:1px solid var(--line); margin-bottom:10px; }
.ping-avatar { width:34px; height:34px; border-radius:50%; flex:0 0 auto; background:var(--accent);
  color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.ping-who { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.ping-who small { color:var(--ink-soft); font-size:12px; }
.ping-msg { font-size:15px; margin:0 0 11px; color:var(--ink); }
.ping-btns { display:flex; gap:8px; flex-wrap:wrap; }
.ping-btns span { flex:1 1 0; min-width:0; text-align:center; font-size:14px; font-weight:600;
  padding:9px 10px; border-radius:9px; border:1px solid #cfe0d6; color:var(--ink-soft); }
.ping-yes { background:var(--accent); border-color:var(--accent); color:#fff !important; }
.ping-time { text-align:right; font-size:11px; color:var(--ink-soft); margin:7px 0 0; }
.hero-facts { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
  margin:6px 0 0; padding:0; }
.hero-facts li { background:rgba(255,255,255,.12); border-radius:11px; padding:10px 8px; }
.hero-facts b { display:block; font-size:22px; line-height:1.1; color:#fff; }
.hero-facts span { display:block; font-size:12px; color:rgba(255,255,255,.76); }

.band { margin:30px 0 0; }
.band h2 { font-size:clamp(20px,5.4vw,26px); letter-spacing:-.02em; margin:0 0 14px; }
.band-alt { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 16px 6px; }
.card.rule { border-left:3px solid var(--accent); }
.card.rule p { margin:0; color:var(--ink-soft); font-size:15px; }

.flow { list-style:none; counter-reset:step; margin:0; padding:0; display:grid; gap:12px; }
.flow li { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px;
  position:relative; }
.flow li p { margin:0; color:var(--ink-soft); }
.num { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px;
  background:#eef6f1; color:var(--accent-dark); font-weight:700; font-size:15px; margin-bottom:9px; }

/* Region ticker: scale without publishing the route roster. */
.routeband { padding:2px 0; }
.ticker { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:12px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.ticker-track { display:flex; width:max-content; animation:slide 44s linear infinite; }
.ticker-track span { margin-right:10px; flex:0 0 auto; font-size:14px; font-weight:600; color:var(--ink-soft);
  background:var(--card); border:1px solid var(--line); border-radius:999px; padding:7px 14px; }
@keyframes slide { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) {
  .ticker-track { animation:none; width:auto; flex-wrap:wrap; }
  .ticker-track span { margin-bottom:8px; }
  .ticker { -webkit-mask-image:none; mask-image:none; }
}

.closer { text-align:center; background:linear-gradient(150deg,#123f6b,#0f7a4d); color:#fff;
  border-radius:16px; padding:26px 18px 30px; margin-top:34px; }
.closer h2 { color:#fff; margin-bottom:8px; }
.closer .lede { color:rgba(255,255,255,.86); margin:0 auto 18px; max-width:44ch; font-size:16px; }
.closer .hero-cta { justify-content:center; }

@media (min-width:600px) {
  .hero-rich { padding:34px 26px 38px; }
  .hero-facts li { padding:12px 12px; }
  .flow { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:900px) {
  .hero-rich { padding:48px 44px 54px; }
  .hero-grid { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap:40px; }
  .ping-card { transform:rotate(-1.5deg); margin:0 auto; }
  .band h2 { font-size:28px; }
  .closer { padding:40px 34px 46px; }
}

.route-line { position:absolute; left:0; right:0; bottom:16px; height:2px; z-index:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.32) 0 10px,rgba(255,255,255,0) 10px 22px); }
.route-line .van { position:absolute; top:-4px; left:2%; width:10px; height:10px; border-radius:50%;
  background:#8ff0bd; box-shadow:0 0 0 6px rgba(143,240,189,.2); animation:drive 9s linear infinite; }
@keyframes drive { from { left:2%; } to { left:97%; } }
.hero-facts span { font-size:11.5px; line-height:1.3; }
@media (prefers-reduced-motion:reduce) { .route-line .van { animation:none; left:50%; } }

@media (max-width:389px) {
  .ping-btns span { font-size:13px; padding:9px 7px; }
  .ping-msg { font-size:14px; }
}

@media (max-width:389px) {
  .ping-btns { flex-direction:column; }
  .ping-btns span { flex:0 0 auto; }
}