/* Crewbook — one visual language for the cab and the office.
   Built dark-first: the driver opens this at 4am in a dark yard, and a white
   screen at that hour is genuinely unpleasant to look at. */
:root {
  --ink: #0d1117;
  --surface: #161b22;
  --surface-2: #1c232c;
  --line: #2a323d;
  --text: #e6edf3;
  --muted: #8b98a5;
  --hi: #ff6b35;          /* safety orange: the one thing that shouts */
  --hi-ink: #1a0d06;
  --pass: #2ea043;
  --fail: #e5484d;
  --warn: #d9a441;
  --radius: 14px;
  --tap: 56px;            /* nothing tappable is smaller than this */
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ink: #f3f1ec; --surface: #fff; --surface-2: #f5f2ed; --line: #e3ddd3;
    --text: #16191d; --muted: #686d74; color-scheme: light;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ink); color: var(--text); min-height: 100vh;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  -webkit-text-size-adjust: 100%;
}
/* Pages that draw their own top bar pad it for the notch themselves, so the
   body must not add the same inset again. Invisible in Safari, where the
   inset is zero; doubled in the app and on a home-screen install. */
body.crew, body.office, body:has(> .topbar) { padding-top: 0; }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.02em; }
h1 { font-size: 26px; } h2 { font-size: 19px; } h3 { font-size: 15px; }
a { color: var(--hi); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 16px; }
.narrow { max-width: 560px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.row { display: flex; gap: 12px; align-items: center; }
.row.wrap-row { flex-wrap: wrap; }
.spread { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.stack { display: grid; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.hide { display: none !important; }

/* --- brand bar --- */
.topbar {
  position: sticky; top: 0; z-index: 20; background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 10px 16px calc(10px); display: flex; gap: 12px; align-items: center;
  padding-top: calc(10px + env(safe-area-inset-top));
}
.brand { font-weight: 700; letter-spacing: -0.03em; font-size: 18px; }
.brand span { color: var(--hi); }
/* Ordera Fleet: the parent name, then the product in a quieter voice. */
.brand em { font-style: normal; font-weight: 600; color: var(--muted); margin-left: .12em; letter-spacing: -0.01em; }

/* --- surfaces --- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
}
.card.tight { padding: 12px; }
.card.flag { border-color: var(--hi); }

/* --- buttons --- */
button, .btn {
  font: inherit; font-weight: 600; color: var(--text); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 16px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
a.btn { text-decoration: none; }
.btn-hi { background: var(--hi); border-color: var(--hi); color: var(--hi-ink); }
.btn-big { min-height: var(--tap); font-size: 18px; width: 100%; border-radius: var(--radius); }
.btn-ghost { background: transparent; }
.btn-danger { background: var(--fail); border-color: var(--fail); color: #fff; }

/* --- form --- */
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  width: 100%; min-height: 48px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--hi); outline-offset: -1px; }
/* Tick boxes are not text fields: the generic rule above would blow them up
   into 48px grey slabs. */
input[type="checkbox"], input[type="radio"] {
  width: 20px; height: 20px; min-height: 0; padding: 0; flex: none;
  accent-color: var(--hi);
}
textarea { min-height: 84px; resize: vertical; }

/* --- chips --- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
}
.chip-pass { background: rgba(46,160,67,.16); border-color: rgba(46,160,67,.5); color: #7ee294; }
.chip-fail { background: rgba(229,72,77,.16); border-color: rgba(229,72,77,.5); color: #ff9ea0; }
.chip-warn { background: rgba(217,164,65,.16); border-color: rgba(217,164,65,.5); color: #f0cd8a; }
.chip-hi   { background: rgba(255,107,53,.16); border-color: rgba(255,107,53,.5); color: #ffab85; }

/* --- prestart checklist: three big targets, thumb-reachable --- */
.check-item { border-bottom: 1px solid var(--line); padding: 14px 0; }
.check-item:last-child { border-bottom: 0; }
.check-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; }
.check-label { font-weight: 600; flex: 1; }
.choices { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.choices button { min-height: var(--tap); border-radius: 12px; font-size: 16px; }
.choices button[aria-pressed="true"][data-v="pass"] { background: var(--pass); border-color: var(--pass); color: #04210b; }
.choices button[aria-pressed="true"][data-v="fail"] { background: var(--fail); border-color: var(--fail); color: #fff; }
.choices button[aria-pressed="true"][data-v="na"]   { background: var(--muted); border-color: var(--muted); color: var(--ink); }
.section-head {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 22px 0 4px;
}

/* --- sticky action bar on the driver screens --- */
.sticky-foot {
  position: sticky; bottom: 0; background: linear-gradient(transparent, var(--ink) 28%);
  padding: 20px 0 calc(12px + env(safe-area-inset-bottom));
}

/* --- tables (office) --- */
.scroll-x { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- tabs --- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; color: var(--muted); padding: 12px 14px; white-space: nowrap;
}
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--hi); }

/* --- toast --- */
#toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 99;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  padding: 14px 18px; border-radius: 12px; max-width: min(520px, 92vw);
  box-shadow: 0 10px 40px rgba(0,0,0,.5); font-weight: 600;
}
#toast.bad { border-color: var(--fail); }
#toast.good { border-color: var(--pass); }

.empty { text-align: center; padding: 40px 16px; color: var(--muted); }
.big-num { font-size: 34px; font-weight: 700; letter-spacing: -.03em; }

/* --- signature pad --- */
.sig-wrap { position: relative; }
.sig-pad {
  width: 100%; height: 190px; touch-action: none; display: block;
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: 12px;
}
.sig-pad.signed { border-style: solid; border-color: var(--pass); }
.sig-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted); pointer-events: none; font-size: 14px;
}

/* --- contract text --- */
.doc { font-size: 14px; line-height: 1.65; }
.doc h2 { font-size: 19px; margin: 0 0 12px; }
.doc h3 { font-size: 15px; margin: 18px 0 6px; }
.doc h4 { font-size: 14px; margin: 14px 0 4px; }
.doc p { margin: 0 0 10px; white-space: pre-wrap; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.doc strong { font-weight: 700; }

/* ======================================================================
   Phone
   The driver screens were built for a phone from the start. The office
   console was not — it is tables and tabs, and a boss checking something
   from a truck stop is still on a 375px screen.
   ====================================================================== */

/* A row of tabs wider than the screen scrolls, and snaps, rather than
   squeezing six labels into 375px until none of them are readable. */
.tabs {
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button { scroll-snap-align: start; }

@media (max-width: 760px) {
  .topbar {
    flex-wrap: wrap;
    padding-left: 12px; padding-right: 12px;
    row-gap: 2px;
  }
  /* Brand and sign-out share the first line; the tabs take the second and
     scroll, so no control is ever half off the edge. */
  .topbar .brand { flex: 1 1 auto; }
  .topbar .tabs {
    order: 3; flex: 1 0 100%;
    margin: 0 -12px; padding: 0 12px;
    border-bottom: 0;
  }
  .wrap { padding: 12px; }

  /* Tables become one block per row: the column heading moves inline next
     to its value, so nothing depends on a header that has scrolled away. */
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr {
    border: 1px solid var(--line); border-radius: 12px;
    padding: 10px 12px; margin-bottom: 10px; background: var(--surface-2);
  }
  table.stack tr:hover { background: var(--surface-2); }
  table.stack td {
    border: 0; padding: 5px 0;
    display: flex; gap: 12px; align-items: baseline; justify-content: space-between;
    text-align: right;
  }
  table.stack td::before {
    content: attr(data-l);
    color: var(--muted); font-size: 11.5px; text-transform: uppercase;
    letter-spacing: .05em; text-align: left; flex: 0 0 auto;
  }
  /* A cell with nothing to label, and the first cell, read as a heading. */
  table.stack td:first-child {
    font-weight: 700; font-size: 16px; padding-bottom: 8px;
    border-bottom: 1px solid var(--line); margin-bottom: 4px;
  }
  table.stack td:first-child::before { content: ''; }
  /* The first cell is a heading, so it reads from the left like one. */
  table.stack td:first-child { justify-content: flex-start; text-align: left; }
  table.stack td.num { text-align: right; }
  table.stack td:empty { display: none; }

  /* Header rows stop being a left/right pair and become a stack. */
  .spread { flex-wrap: wrap; }
  .spread > .row { flex-wrap: wrap; }

  /* Anything tappable gets a thumb-sized target, including the small
     inline buttons that are comfortable with a mouse and not with a hand. */
  button, .btn { min-height: 44px; }
  .tabs button { min-height: 44px; }
  .chip { padding: 5px 11px; }

  /* Stat tiles two-up rather than one enormous column. */
  .card.grow { min-width: 0 !important; flex: 1 1 calc(50% - 6px); }
  .big-num { font-size: 27px; }

  h1 { font-size: 23px; } h2 { font-size: 17px; }

  /* A modal on a phone is a sheet: full width, anchored to the bottom, and
     clear of the home indicator. */
  .sheet {
    align-items: flex-end !important; padding: 0 !important;
  }
  .sheet > .card {
    max-width: 100% !important; width: 100%;
    max-height: 92vh !important;
    border-radius: 18px 18px 0 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  /* Side-by-side form fields stack. Cards are excluded: this rule is for
     inputs sitting two-up in a row, not for the stat tiles, which want to
     stay two-up on a phone. */
  .row > .grow:not(.card) { flex: 1 1 100%; }
}

/* The roster's day columns: swipe through the week one day at a time. */
.week { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.week > * { scroll-snap-align: start; }
@media (max-width: 760px) {
  .week > * { flex: 0 0 78% !important; min-width: 0 !important; }
}

/* Room to scroll something into view under a sticky bar. */
.sig-wrap, .check-item { scroll-margin: 90px; }

/* --- getting started --- */
.guide { border-color: var(--hi); }
.guide .bar { height: 6px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.guide .bar > i { display: block; height: 100%; background: var(--hi); border-radius: 99px; }
.step {
  display: flex; gap: 12px; align-items: center; padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.step:last-child { border-bottom: 0; }
.step .tick {
  flex: 0 0 28px; height: 28px; border-radius: 99px; display: grid; place-items: center;
  border: 2px solid var(--line); font-size: 14px; font-weight: 700; color: var(--muted);
}
.step.done .tick { background: var(--pass); border-color: var(--pass); color: #04210b; }
.step.done .step-title { color: var(--muted); text-decoration: line-through; }
.step-title { font-weight: 600; }
.step .why { font-size: 13px; color: var(--muted); margin-top: 2px; }
.step button { flex: 0 0 auto; }

/* --- a friendlier empty state --- */
.hint {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: 12px;
  padding: 14px; color: var(--muted); font-size: 14px;
}
.hint strong { color: var(--text); }

/* --- section index in long screens --- */
.jump { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.jump a {
  font-size: 13px; padding: 6px 12px; border-radius: 99px; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
}
.section-lead { color: var(--muted); font-size: 14px; margin: -6px 0 12px; }
[id^="s-"] { scroll-margin-top: 120px; }

/* ======================================================================
   Day log timeline
   Driver colours: validated set (light + dark, adjacent + all-pairs) with
   orange and red removed — orange is this app's action colour and red means
   a critical fault. Assigned by when a person joined, never cycled; beyond
   six people a neutral takes over and the written name carries identity.
   ====================================================================== */
:root {
  --drv-1: #2a78d6; --drv-2: #1baf7a; --drv-3: #eda100;
  --drv-4: #e87ba4; --drv-5: #008300; --drv-6: #4a3aa7; --drv-x: #8a94a0;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --drv-1: #3987e5; --drv-2: #199e70; --drv-3: #c98500;
    --drv-4: #d55181; --drv-5: #008300; --drv-6: #9085e9; --drv-x: #6b7684;
  }
}
.tl-axis { position: relative; height: 18px; margin: 0 0 4px; }
.tl-axis span {
  position: absolute; transform: translateX(-50%); font-size: 11px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.tl-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.tl-row:last-child { border-bottom: 0; }
.tl-track {
  position: relative; height: 26px; border-radius: 6px;
  background: var(--surface-2);
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: var(--tl-hour, 8.33%) 100%;
}
/* 1px inset each side leaves the 2px surface gap between handovers. */
.tl-seg {
  position: absolute; top: 3px; bottom: 3px; border-radius: 4px;
  margin: 0 1px; cursor: pointer; min-width: 3px;
  outline: 2px solid transparent; transition: outline-color .1s;
}
.tl-seg:hover, .tl-seg:focus-visible { outline-color: var(--text); }
.tl-seg.open { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.28) 6px 9px); }
.tl-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); border-radius: 2px; }
.tl-mark.now { background: var(--muted); }
.tl-mark b {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-size: 11px; background: var(--text); color: var(--ink); padding: 1px 6px;
  border-radius: 99px; white-space: nowrap; font-weight: 700;
}
.tl-labels { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; }
.tl-labels span { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.tl-labels i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.tl-tip {
  position: fixed; z-index: 80; pointer-events: none; max-width: 260px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; font-size: 13px; box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
/* The event log — also the table view of the chart above it. */
.ev { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ev:last-child { border-bottom: 0; }
.ev time { flex: 0 0 64px; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; padding-top: 1px; }
.ev .dot { flex: 0 0 8px; height: 8px; border-radius: 99px; margin-top: 7px; background: var(--line); }
.ev .dot.ok { background: var(--pass); } .ev .dot.warn { background: var(--warn); } .ev .dot.bad { background: var(--fail); }
.ev .ev-t { font-weight: 600; }
.ev .ev-d { font-size: 13px; color: var(--muted); margin-top: 1px; }
.ev.hl { background: color-mix(in srgb, var(--hi) 10%, transparent); border-radius: 8px; padding-left: 8px; }

/* ======================================================================
   The crew app shell
   Borrowed patterns (a live shift timer, the week as bars, a bottom tab
   bar, quick actions), Crewbook's own look: a dark instrument panel for the
   shift, safety orange only for what you can press, warm paper around it.
   ====================================================================== */
body.crew { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
body.crew #view { padding-top: calc(8px + env(safe-area-inset-top)); }

.hello { display: flex; align-items: center; gap: 12px; margin: 14px 0 16px; }
.avatar {
  width: 46px; height: 46px; border-radius: 99px; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 16px;
  background: var(--hi); color: var(--hi-ink); letter-spacing: .02em;
}
.hello h1 { font-size: 21px; margin: 0; }
.hello .muted { font-size: 13px; }

/* The shift, as an instrument: always dark, whatever the theme. */
.instrument {
  background: #151a21; color: #f2f4f7; border-radius: 20px; padding: 18px;
  position: relative; overflow: hidden; border: 1px solid #242b35;
}
.instrument::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--hi);
}
.instrument .state {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #aab4c0;
}
.instrument .state i { width: 8px; height: 8px; border-radius: 99px; background: #5b6572; }
.instrument.on .state i { background: #3ddc84; box-shadow: 0 0 0 4px rgba(61,220,132,.18); }
.instrument .timer {
  font-size: 50px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
  font-variant-numeric: tabular-nums; margin: 8px 0 2px;
}
.instrument .sub { color: #aab4c0; font-size: 14px; }
.instrument .where {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 12px;
  font-size: 14px; color: #d7dde4; line-height: 1.35;
}
.instrument .where .ic { flex: none; color: var(--hi); margin-top: -1px; }
.instrument .gauge { height: 6px; background: #262e39; border-radius: 99px; margin: 14px 0 4px; overflow: hidden; }
.instrument .gauge > i { display: block; height: 100%; background: var(--hi); border-radius: 99px; }
.instrument .gauge-l { display: flex; justify-content: space-between; font-size: 12px; color: #8a95a3; }
.instrument .actions { display: grid; gap: 10px; margin-top: 16px; }
.instrument button { border-color: #2c3440; }
.instrument .btn-ghost { background: #1d232c; color: #f2f4f7; }
.instrument .locating { font-variant-numeric: tabular-nums; }

/* Quick actions */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  font-size: 12.5px; font-weight: 600; color: var(--text); min-height: 0; text-align: center;
}
.tile .ic-wrap {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--hi) 13%, transparent); color: var(--hi);
}

/* The week as bars. One series, so no legend: the title names it. Past days
   in ink, today in orange, values written under every bar. */
.week-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; }
.week-chart .col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.week-chart .day { font-size: 12px; color: var(--muted); }
.week-chart .col.today .day { color: var(--text); font-weight: 800; }
.week-chart .slot {
  position: relative; width: 100%; height: 96px; display: flex; align-items: flex-end;
  border-radius: 8px;
}
.week-chart .slot::after {  /* where a standard day would reach */
  content: ''; position: absolute; left: 0; right: 0; bottom: var(--target, 63%);
  border-top: 1px dashed var(--line);
}
.week-chart .bar {
  width: 100%; border-radius: 6px 6px 4px 4px; background: #3a4350; min-height: 0;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .week-chart .bar { background: #2c333d; }
}
.week-chart .col.today .bar { background: var(--hi); }
.week-chart .val { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text); }
.week-chart .val.none { color: var(--muted); }
.week-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; }
.week-total b { font-size: 22px; font-variant-numeric: tabular-nums; }
.week-gauge { height: 6px; background: var(--surface-2); border-radius: 99px; margin-top: 8px; overflow: hidden; }
.week-gauge > i { display: block; height: 100%; background: var(--hi); border-radius: 99px; }

/* List rows */
.row-link {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 14px 2px; min-height: 56px; font-weight: 500;
}
.row-link:last-child { border-bottom: 0; }
.row-link .ic { color: var(--muted); flex: none; }
.row-link .chev { margin-left: auto; color: var(--muted); }

/* Bottom tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
.tabbar button {
  background: none; border: 0; min-height: 54px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
}
.tabbar button[aria-current="page"] { color: var(--hi); }
.tabbar button[aria-current="page"] .ic { stroke-width: 2.2; }

.screen-head { display: flex; align-items: center; gap: 10px; margin: 14px 0 14px; }
.screen-head h1 { font-size: 22px; margin: 0; }
.icon-btn { min-height: 44px; min-width: 44px; padding: 0; border-radius: 12px; }

.profile-card {
  background: #151a21; color: #f2f4f7; border-radius: 20px; padding: 20px;
  display: flex; align-items: center; gap: 16px; border: 1px solid #242b35;
}
.profile-card .avatar { width: 58px; height: 58px; font-size: 20px; }
.profile-card .who { font-size: 19px; font-weight: 800; }
.profile-card .muted { color: #aab4c0; }
/* A focused task (a prestart, a fuel entry) owns the screen: the tab bar
   steps aside so it can never sit on top of the Submit button. */
body.crew.task { padding-bottom: 0; }
body.crew.task .tabbar { display: none; }
.row-link { justify-content: flex-start; }

/* ======================================================================
   The run sheet — the driver's day, in the order it happens.
   A truck-yard idea rather than a time-clock one: a rail down the left,
   what's done ticked off, and the next thing as the one big button.
   ====================================================================== */
.today-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 14px 0 18px; }
.today-top .when { font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.today-top h1 { font-size: 26px; margin: 2px 0 0; letter-spacing: -.02em; }

/* A number plate: how a yard actually tells trucks apart. */
.plate {
  display: inline-flex; flex-direction: column; align-items: center; flex: none;
  background: #fbfbf7; color: #111; border: 2px solid #111; border-radius: 7px;
  padding: 1px 10px 3px; box-shadow: inset 0 0 0 2px #fbfbf7, inset 0 0 0 3px #111;
  line-height: 1.05;
}
.plate small { font-size: 8px; font-weight: 800; letter-spacing: .28em; }
.plate b {
  font-size: 19px; font-weight: 800; letter-spacing: .1em;
  font-family: "DIN Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
}
.plate.sm b { font-size: 14px; } .plate.sm { padding: 0 7px 2px; border-width: 1.5px; }

.run { position: relative; margin: 0 0 18px; }
.run::before {       /* the rail */
  content: ''; position: absolute; left: 15px; top: 14px; bottom: 14px;
  width: 2px; background: var(--line);
}
.step { position: relative; display: flex; gap: 14px; padding: 8px 0; }
.run .step { align-items: flex-start; }
.step .mk {
  position: relative; z-index: 1; flex: 0 0 32px; height: 32px; border-radius: 99px;
  display: grid; place-items: center; background: var(--ink); border: 2px solid var(--line);
  color: var(--muted); font-size: 13px; font-weight: 800;
}
.step.done .mk { background: var(--text); border-color: var(--text); color: var(--ink); }
.step.now .mk { background: var(--hi); border-color: var(--hi); color: var(--hi-ink);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--hi) 22%, transparent); }
.step.skip { opacity: .5; }
.step .body { flex: 1; min-width: 0; padding-top: 4px; }
.step .t { font-weight: 700; font-size: 16px; }
.step.later .t { color: var(--muted); font-weight: 600; }
.step .d { font-size: 13.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.step .at { flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 7px; }

/* The current step opens up into the thing you do next. */
.step.now .body { padding-top: 0; }
.nowcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 14px; margin-top: 2px; box-shadow: 0 1px 0 var(--line);
}
.nowcard .t { font-size: 18px; }
.nowcard .live {
  font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  margin: 6px 0 2px; line-height: 1.1;
}
.nowcard .where { display: flex; gap: 6px; align-items: flex-start; font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.nowcard .where .ic { flex: none; color: var(--hi); }
.nowcard .go { display: grid; gap: 8px; margin-top: 12px; }

.alsos { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.alsos button {
  min-height: 42px; border-radius: 99px; padding: 8px 14px; font-size: 14px;
  background: var(--surface); display: inline-flex; gap: 6px;
}
.alsos .ic { color: var(--hi); }

.weekline { display: flex; align-items: center; gap: 12px; }
.weekline .bar { flex: 1; height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.weekline .bar > i { display: block; height: 100%; background: var(--text); border-radius: 99px; }
.weekline b { font-variant-numeric: tabular-nums; }

/* ======================================================================
   Hours as the shape of each day: when you worked, not just how long.
   ====================================================================== */
.dayrows .dr { display: grid; grid-template-columns: 44px 1fr 48px; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line); }
.dayrows .dr:last-child { border-bottom: 0; }
.dr .dl { font-size: 13px; font-weight: 700; line-height: 1.1; }
.dr .dl span { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }
.dr.today .dl { color: var(--hi); }
.dr .trk { position: relative; height: 16px; background: var(--surface-2); border-radius: 99px; }
.dr .trk i { position: absolute; top: 3px; bottom: 3px; border-radius: 99px; background: var(--text); min-width: 4px; }
.dr.today .trk i { background: var(--hi); }
.dr .trk i.open { background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(255,255,255,.35) 5px 8px); }
.dr .tot { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.dr .tot.none { color: var(--muted); font-weight: 500; }
.hr-axis { display: grid; grid-template-columns: 44px 1fr 48px; gap: 10px; }
.hr-axis div { position: relative; height: 14px; }
.hr-axis span { position: absolute; transform: translateX(-50%); font-size: 10.5px; color: var(--muted); }

/* ======================================================================
   Me, as the card a driver already carries.
   ====================================================================== */
.idcard {
  position: relative; overflow: hidden; border-radius: 16px; padding: 16px;
  background: linear-gradient(135deg, #f7f4ea 0%, #efe9d8 100%); color: #1b1d21;
  border: 1px solid #ddd4bd; box-shadow: 0 6px 24px rgba(20,20,10,.08);
}
.idcard::after {    /* a guilloché-ish band, drawn rather than borrowed */
  content: ''; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px;
  background: repeating-radial-gradient(circle at center, transparent 0 7px, rgba(255,107,53,.12) 7px 8px);
  border-radius: 99px; pointer-events: none;
}
.idcard .band { display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px; font-weight: 800; letter-spacing: .22em; color: #6b5a3a; margin-bottom: 12px; }
.idcard .grid { display: grid; grid-template-columns: 76px 1fr; gap: 14px; position: relative; z-index: 1; }
.idcard .photo {
  width: 76px; height: 94px; border-radius: 8px; background: #d9cfb6; color: #5b4c2f;
  display: grid; place-items: center; font-size: 26px; font-weight: 800;
}
.idcard .nm { font-size: 18px; font-weight: 800; line-height: 1.15; }
.idcard .fld { font-size: 10px; letter-spacing: .12em; color: #7a6a4a; font-weight: 700; margin-top: 8px; }
.idcard .val { font-size: 14px; font-weight: 700; }
.idcard .cls {
  display: inline-block; background: #1b1d21; color: #f7f4ea; border-radius: 6px;
  padding: 1px 8px; font-weight: 800; letter-spacing: .06em;
}

/* ======================================================================
   The office, in the same language as the cab.
   Desktop: a sidebar. Phone: the same bottom bar as the crew app, with the
   less-used sections behind More.
   ====================================================================== */
.av {
  display: inline-grid; place-items: center; flex: none; border-radius: 99px;
  background: var(--surface-2); color: var(--text); font-weight: 800;
  border: 1px solid var(--line); letter-spacing: .02em;
}
.av.me { background: var(--hi); border-color: var(--hi); color: var(--hi-ink); }
.who-cell { display: inline-flex; align-items: center; gap: 10px; }

body.office #view { padding-top: 8px; }
.side { background: var(--surface); z-index: 30; }
.side nav button {
  background: none; border: 0; color: var(--muted); font-weight: 600;
  display: flex; align-items: center; gap: 12px;
}
.side nav button .ic { flex: none; }
.side nav button[aria-selected="true"] { color: var(--text); }
.side nav button[aria-selected="true"] .ic { color: var(--hi); stroke-width: 2.2; }
.mtop { display: none; }

@media (min-width: 900px) {
  body.office { padding-left: 236px; }
  .side {
    position: fixed; inset: 0 auto 0 0; width: 236px; display: flex; flex-direction: column;
    border-right: 1px solid var(--line); padding: calc(18px + env(safe-area-inset-top)) 14px 16px;
  }
  .side .brand { font-size: 22px; padding: 2px 10px 18px; }
  .side nav { display: flex; flex-direction: column; gap: 2px; }
  .side nav button { justify-content: flex-start; padding: 10px 12px; border-radius: 12px; min-height: 44px; font-size: 15px; }
  .side nav button:hover { background: var(--surface-2); color: var(--text); }
  .side nav button[aria-selected="true"] { background: color-mix(in srgb, var(--hi) 11%, transparent); }
  .side nav .more { display: none; }
  .side .acct {
    margin-top: auto; display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0;
    padding: 14px 8px 0; justify-content: flex-start; text-align: left; min-height: 0;
  }
  .side .acct .nm { font-weight: 700; font-size: 14px; line-height: 1.2; }
  .side .acct .rl { font-size: 12px; color: var(--muted); text-transform: capitalize; }
}

@media (max-width: 899px) {
  body.office { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .mtop {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: sticky; top: 0; z-index: 25; background: var(--ink);
    padding: calc(10px + env(safe-area-inset-top)) 16px 8px;
  }
  .mtop .brand { font-size: 20px; }
  .mtop button { background: none; border: 0; padding: 0; min-height: 0; }
  .side {
    position: fixed; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--line);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  }
  .side .brand, .side .acct { display: none; }
  .side nav { display: grid; grid-template-columns: repeat(5, 1fr); }
  .side nav button { flex-direction: column; gap: 3px; min-height: 54px; font-size: 11.5px; justify-content: center; border-radius: 12px; }
  .side nav button:not([data-main]):not(.more) { display: none; }
}

/* On the road now: the office's own instrument panel. */
.fleet-live { display: grid; gap: 0; }
.fleet-live .fl {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid #262e39;
}
.fleet-live .fl:last-child { border-bottom: 0; }
.fleet-live .fl .nm { font-weight: 700; color: #f2f4f7; }
.fleet-live .fl .sb { font-size: 13px; color: #aab4c0; }
.fleet-live .fl .el { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 18px; color: #f2f4f7; text-align: right; }
.fleet-live .fl .el small { display: block; font-size: 11px; font-weight: 600; color: #8a95a3; }
.instrument .av { background: #262e39; border-color: #313a46; color: #f2f4f7; }

/* Fleet cards, matching the cab's truck screen. */
.truck-card { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; }
.truck-card .nm { font-weight: 800; font-size: 17px; }
.truck-card .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); grid-column: 1 / -1; }
.truck-card .meta span { display: inline-flex; align-items: center; gap: 6px; }
.truck-card .act { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
@media (max-width: 899px) { .side nav button span { white-space: nowrap; } }

/* ======================================================================
   Maps and deliveries
   ====================================================================== */
.leaflet-container { font: inherit; background: var(--surface-2); }
/* The map credit is a condition of using the tiles, so it stays readable
   in the dark theme too: dark text on Leaflet's light strip. */
.leaflet-container .leaflet-control-attribution { font-size: 10.5px; color: #333; background: rgba(255,255,255,.85); }
.leaflet-container .leaflet-control-attribution a { color: #0a58ca; }
.leaflet-container .leaflet-popup-content-wrapper, .leaflet-container .leaflet-popup-tip { color: #16191d; }
.mp { background: none; border: 0; }
.gmaps-logo { margin: 0 0 6px 8px !important; line-height: 0; pointer-events: none; }
.gmaps-logo img { height: 18px; width: auto; }
.mp b {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 99px;
  background: var(--c); color: #fff; font: 800 12.5px/1 -apple-system, system-ui, sans-serif;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.mp b.done { background: #fff; color: var(--c); border-color: var(--c); }
.mp b.failed { background: var(--fail); }
.mp b.loose { background: #fff; color: #555; border: 2px dashed #777; }
.mp b.dim { opacity: .35; }
.mp .depot {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: #16191d; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.4);
}
.mp .truck {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px;
  border-radius: 99px; background: var(--c); color: #fff; font: 700 12px/1.2 -apple-system, system-ui, sans-serif;
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.mp .truck.stale { filter: grayscale(.8); opacity: .7; }
.mp .dest {
  display: block; width: 22px; height: 22px; border-radius: 99px; background: var(--hi);
  border: 3px solid #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--hi) 25%, transparent), 0 1px 4px rgba(0,0,0,.3);
}

.wrap.wide { max-width: 1600px; }
.dsp { display: grid; gap: 14px; }
.dsp-map { height: 44vh; min-height: 280px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); position: relative; z-index: 0; }
@media (min-width: 1100px) {
  .dsp { grid-template-columns: minmax(360px, 420px) 1fr; align-items: start; }
  .dsp-map { position: sticky; top: 16px; height: calc(100vh - 32px); order: 2; }
  .dsp-list { order: 1; }
}
.dsp-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.daystep { display: inline-flex; align-items: center; gap: 4px; }
.daystep button { min-height: 38px; padding: 6px 10px; }
.daystep .d { font-weight: 700; min-width: 128px; text-align: center; }
.dsp-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.dsp-acts button { min-height: 42px; }
.counts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.counts span { font-size: 13px; padding: 5px 11px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); }
.counts b { font-variant-numeric: tabular-nums; }

.rcard { padding: 0; overflow: hidden; }
.rcard > .rh { display: flex; gap: 12px; align-items: flex-start; padding: 14px; cursor: pointer; width: 100%;
  background: none; border: 0; border-radius: 0; text-align: left; justify-content: flex-start; font-weight: 400; min-height: 0; }
.rcard .sw { flex: none; width: 10px; align-self: stretch; border-radius: 99px; background: var(--c); }
.rcard .rt { font-weight: 700; font-size: 16px; }
.rcard .rs { font-size: 13px; color: var(--muted); margin-top: 2px; }
.rcard .pbar { height: 6px; background: var(--surface-2); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.rcard .pbar > i { display: block; height: 100%; background: var(--c); border-radius: 99px; }
.rcard .rfoot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 0 14px 14px 36px; }
.rcard .rfoot select { flex: 1; min-width: 150px; min-height: 42px; }
.rcard .stops { border-top: 1px solid var(--line); }
.srow { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: none; border-left: 0; border-right: 0; border-top: 0;
  border-radius: 0; width: 100%; text-align: left; font-weight: 400; min-height: 0; justify-content: stretch; }
.srow:last-child { border-bottom: 0; }
.srow .n { width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; font-size: 11.5px;
  font-weight: 800; background: var(--c); color: #fff; }
.srow .n.done { background: none; color: var(--c); border: 2px solid var(--c); }
.srow .n.failed { background: var(--fail); }
.srow .nm { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .ad { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .tm { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); }
.srow .tm b { color: var(--text); display: block; }
.late { color: var(--fail) !important; }

.loose .srow .n { background: none; border: 2px dashed var(--muted); color: var(--muted); }
.paste { min-height: 180px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.preview { max-height: 38vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.preview .srow { cursor: default; }
.truckpick { display: grid; gap: 8px; }
.truckpick label { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 12px; margin: 0; cursor: pointer; }
.truckpick label.off { opacity: .5; cursor: not-allowed; }
.truckpick input { width: 20px; height: 20px; min-height: 0; margin: 0; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { min-height: 36px; border: 0; background: none; padding: 6px 12px; border-radius: 9px; font-size: 14px; }
.seg button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.pod img { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.pod .shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }

/* The driver's stop card */
.stopcard .who { font-size: 21px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.stopcard .addr { font-size: 15px; margin-top: 4px; }
.stopcard .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.stopcard .note { margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14px;
  background: color-mix(in srgb, var(--warn) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.stopcard .go2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.stopcard .go2 .wide { grid-column: 1 / -1; }
.upnext { margin: 4px 0 18px; }
.upnext .srow { background: var(--surface); }
.upnext .srow:first-child { border-radius: 14px 14px 0 0; }
.upnext .srow:last-child { border-radius: 0 0 14px 14px; }
.shotrow { display: flex; gap: 8px; flex-wrap: wrap; }
.shotrow img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.reasons button[aria-pressed="true"] { border-color: var(--hi); background: color-mix(in srgb, var(--hi) 14%, transparent); }