/* Driver PWA — Field density (Part 6.5): base 16-20px, 56px rows, 64px targets.
   One thumb, moving, sometimes gloved. */
:root {
  /* Tijara logo palette (QA Oct 2026) - same values as wwwroot/css/lx/_tokens.css */
  --navy-900:#063A40; --navy-700:#0E5E63; --canvas:#F5F7FA; --surface:#FFFFFF;
  --line:#E4E9F0; --text-1:#0B2A2E; --text-2:#475569;
  --success:#0E9F6E; --warning:#B45309; --danger:#DC2626; --accent:#0E6E68;
}
body { margin:0; background:var(--canvas); color:var(--text-1);
       font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16px; line-height:24px; }
.app-bar { background:var(--navy-700); color:#fff; min-height:56px; display:flex; align-items:center;
           gap:12px; padding:0 16px; padding-top:env(safe-area-inset-top); }

/* The sync chip. Rule 2: a queue nobody can see is indistinguishable from data loss. */
[data-outbox-chip] { margin-inline-start:auto; font-size:13px; padding:6px 12px; border-radius:999px;
                     background:rgba(255,255,255,.15); }
[data-outbox-chip][data-state="synced"]::before  { content:"● "; color:#7ee2b8; }
[data-outbox-chip][data-state="waiting"]::before { content:"◐ "; color:#fcd34d; }
[data-outbox-chip][data-state="offline"]::before { content:"○ "; color:#fca5a5; }

.stop { background:var(--surface); border:1px solid var(--line); border-radius:16px;
        margin:12px 16px; padding:16px; }
.stop h2 { font-size:18px; margin:0 0 4px; }
.stop .addr { color:var(--text-2); font-size:16px; }

/* Cash is the largest element on the card. CORE_PLAN p.E: the most common
   expensive mistake in delivery is forgetting to take the money. */
.stop .cash { font-size:28px; line-height:32px; font-weight:700; color:var(--danger);
              font-variant-numeric:tabular-nums; margin-top:12px; }

.btn { min-height:56px; font-size:16px; border:0; border-radius:12px; width:100%;
       background:var(--accent); color:#fff; margin-top:12px; }
.btn-lg { min-height:64px; font-size:18px; }
.tabbar { position:fixed; inset-inline:0; bottom:0; display:flex; background:var(--surface);
          border-top:1px solid var(--line); height:64px;
          padding-bottom:env(safe-area-inset-bottom); }
.tabbar a { flex:1; display:grid; place-items:center; font-size:12px; color:var(--text-2);
            text-decoration:none; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE DRIVER APP SHELL — app.html, built for real
   ═══════════════════════════════════════════════════════════════════════════

   Field density (Part 6.5): base 16px, 56px targets, 64px for primary actions.
   One thumb, moving, sometimes gloved.

   Tokens are the Tijara logo palette: deep teal is structure, teal is action,
   red is a STATE and here it means exactly one thing — money you must collect.
   ═════════════════════════════════════════════════════════════════════════ */

.d-app {
    --navy-700:#0E5E63; --navy-900:#063A40;
    --accent-600:#0E6E68; --accent-050:#ECF7F5;
    --brand-orange:#F47B20;
    --canvas:#F5F7FA; --surface:#FFF;
    --line:#E4E9F0; --line-soft:#EFF2F6;
    --text-1:#0B2A2E; --text-2:#475569; --text-3:#8A97A8;
    --danger:#DC2626; --danger-wash:#FEE2E2; --danger-ink:#A81C1C;
    --success:#0E9F6E; --success-wash:#E6F6F0; --success-ink:#05684A;
    --warning-wash:#FEF3C7; --warning-ink:#8A4308;

    margin:0; background:var(--canvas); color:var(--text-1);
    font:400 16px/24px Inter, system-ui, -apple-system, sans-serif;
    display:flex; flex-direction:column; min-height:100vh;
    min-height:100dvh;                       /* dvh: the URL bar moves on mobile */
    -webkit-text-size-adjust:100%;
}

/* Header — 56px + the notch. */
.d-head {
    background:var(--navy-700); color:#fff;
    padding:calc(10px + env(safe-area-inset-top)) 14px 14px;
    padding-inline-start:calc(14px + env(safe-area-inset-left));
    padding-inline-end:calc(14px + env(safe-area-inset-right));
    display:flex; align-items:center; gap:11px;
    position:sticky; top:0; z-index:20;
    box-shadow:inset 0 -3px 0 var(--brand-orange);   /* logo swoosh, brand only */
}
.d-logo { width:36px; height:36px; border-radius:9px; background:#fff; color:var(--navy-700);
          display:grid; place-items:center; font-weight:700; font-size:13px; flex:0 0 36px;
          text-decoration:none; }
.d-back { background:rgba(255,255,255,.16); color:#fff; font-size:26px; line-height:1; }
.d-title .nm { font-size:16px; font-weight:600; }

/* The sync chip. Green = landed. Amber = queued, still ours to lose. */
.d-sync { margin-inline-start:auto; display:flex; align-items:center; gap:6px;
          font-size:11.5px; font-weight:600; background:rgba(255,255,255,.14);
          border-radius:999px; padding:5px 11px; white-space:nowrap; }
.d-sync::before { content:""; width:7px; height:7px; border-radius:50%; background:#4ADE80; }
.d-sync[data-state="waiting"]::before { background:#FBBF24; }
.d-sync[data-state="offline"]::before { background:#F87171; }

.d-body { flex:1; overflow-y:auto; padding:16px 14px 22px;
          padding-inline-start:calc(14px + env(safe-area-inset-left));
          padding-inline-end:calc(14px + env(safe-area-inset-right)); }

/* Bottom tabs — 64px + the home indicator. */
.d-tabs { background:#fff; border-top:1px solid var(--line); display:flex; gap:4px;
          padding:6px 8px calc(12px + env(safe-area-inset-bottom));
          position:sticky; bottom:0; z-index:20; }
.d-tabs a { flex:1; min-height:56px; display:flex; flex-direction:column;
            align-items:center; justify-content:center; gap:3px;
            border-radius:12px; font-size:11.5px; font-weight:600;
            color:var(--text-3); text-decoration:none; }
.d-tabs a.on { background:var(--navy-700); color:#fff; }
.d-tabs svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9;
              stroke-linecap:round; stroke-linejoin:round; }

/* ── pieces ─────────────────────────────────────────────────────────────── */
.d-eyebrow { font-size:11px; font-weight:700; letter-spacing:.07em;
             text-transform:uppercase; color:var(--text-3); }
.d-big { font-size:24px; line-height:29px; font-weight:700; letter-spacing:-.01em; }
.d-card { background:#fff; border:1px solid var(--line); border-radius:16px;
          box-shadow:0 1px 3px rgba(6,58,64,.06); margin-bottom:12px; overflow:hidden; }
.d-num { font-variant-numeric:tabular-nums; }

.d-hub { display:flex; align-items:center; gap:13px; padding:15px 14px;
         border-bottom:1px solid var(--line-soft); text-decoration:none; color:inherit;
         min-height:56px; }
.d-hub:last-child { border-bottom:0; }
.d-hub .tile { width:44px; height:44px; border-radius:12px; flex:0 0 44px; display:grid;
               place-items:center; background:var(--accent-050); color:var(--accent-600); }
.d-hub .tile svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; }
.d-hub .t { font-size:15.5px; font-weight:600; }
.d-hub .s { font-size:12.5px; color:var(--text-3); margin-top:1px; }
.d-hub .ch { margin-inline-start:auto; color:#C3CCD8; font-size:20px; }

/* THE COD BOX. The single loudest thing in the app, on purpose:
   CORE_PLAN p.E — the most common expensive mistake in delivery is forgetting
   to take the money. Red here means "collect", and nothing else in this app
   uses it. */
.d-cod { background:var(--danger-wash); border-radius:12px; padding:12px 14px; margin:12px 0; }
.d-cod .k { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
            color:var(--danger-ink); }
.d-cod .v { font-size:30px; line-height:34px; font-weight:700; color:var(--danger-ink);
            font-variant-numeric:tabular-nums; margin-top:3px; }
.d-cod .n { font-size:12.5px; color:var(--danger-ink); margin-top:4px; }

/* THE LEDGER FIGURE. 3px accent inline-start bar, and NOTHING else in this app
   gets that bar — so it means exactly one thing: this number is the sum of a
   ledger and you can see the rows behind it. */
.d-ledger { background:#fff; border:1px solid var(--line);
            border-inline-start:3px solid var(--accent-600);
            border-radius:14px; padding:16px; }
.d-ledger .fig { font-size:36px; line-height:40px; font-weight:700;
                 font-variant-numeric:tabular-nums; margin-top:4px; }
.d-ledger .as-at { font-size:12.5px; color:var(--text-3); margin-top:3px; }
.d-ledger .more { font-size:12.5px; font-weight:600; color:var(--accent-600);
                  margin-top:12px; display:inline-block; text-decoration:none; }

/* Buttons — 64px primary, 56px secondary. Never shrink a target. */
.d-btn { min-height:56px; border-radius:13px; display:flex; align-items:center;
         justify-content:center; gap:8px; font-size:16px; font-weight:700; border:0;
         width:100%; cursor:pointer; text-decoration:none; font-family:inherit; }
.d-btn.pri { background:var(--accent-600); color:#fff; min-height:64px; }
.d-btn.sec { background:#fff; color:var(--navy-900); border:1px solid #CBD5E1; font-weight:600; }
.d-btn.ghost { background:transparent; color:var(--danger); border:1px solid rgba(220,38,38,.3);
               font-weight:600; }
.d-btn:focus-visible { outline:2px solid var(--accent-600); outline-offset:2px; }
.d-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; }
.d-row2 { display:flex; gap:10px; margin:14px 0 12px; }

/* Route rows */
.d-stop { display:flex; gap:12px; padding:14px; border-bottom:1px solid var(--line-soft);
          align-items:flex-start; text-decoration:none; color:inherit; }
.d-stop:last-child { border-bottom:0; }
.d-stop.now { background:var(--accent-050); }
.d-sn { width:26px; height:26px; border-radius:50%; flex:0 0 26px; display:grid;
        place-items:center; font-size:12px; font-weight:700;
        background:#EEF2F7; color:var(--text-3); }
.d-sn.ok  { background:var(--success-wash); color:var(--success-ink); }
.d-sn.now { background:var(--accent-600); color:#fff; }
.d-sn.bad { background:var(--danger-wash); color:var(--danger-ink); }
.d-stop .addr { font-size:14.5px; font-weight:600; }
.d-stop .meta { font-size:12.5px; color:var(--text-3); margin-top:2px; }
.d-stop .amt  { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;
                color:var(--danger-ink); white-space:nowrap; }
.d-stop .amt.paid { color:var(--success-ink); font-weight:600; font-size:12.5px; }
.d-stop .amt.none { color:var(--text-3); font-weight:600; font-size:12.5px; }

.d-bar { height:5px; background:#EEF2F7; }
.d-bar > i { display:block; height:100%; background:var(--accent-600); }

.d-note { border-radius:12px; padding:13px 14px; font-size:13px; line-height:19px; }
.d-note.info { background:#fff; border:1px solid var(--line);
               border-inline-start:3px solid var(--accent-600); color:var(--text-2); }
.d-note.warn { background:var(--warning-wash); color:var(--warning-ink); }

.d-empty { text-align:center; padding:48px 20px; color:var(--text-3); }
.d-empty h2 { font-size:18px; color:var(--text-1); margin:0 0 6px; }

.d-field { margin-bottom:14px; }
.d-field label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.d-field input, .d-field select, .d-field textarea {
    width:100%; min-height:56px; font-size:17px; font-family:inherit;
    border:1px solid #CBD5E1; border-radius:12px; padding:0 14px; background:#fff;
    box-sizing:border-box;
}
.d-field textarea { padding:14px; min-height:96px; line-height:22px; }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* ── PICK NOTES · the one class Round 2 appends ──────────────────────────
   Amber, because this is information the driver must act on at the door, not
   a failure. Rendered only when the branch could not fill the order exactly
   as placed — a stop with nothing substituted is pixel-identical to before. */
.d-subs{background:var(--warning-wash);color:var(--warning-ink);border-radius:12px;
  padding:12px 14px;font-size:13.5px;line-height:19px;margin:12px 0}
.d-subs b{display:block;margin-bottom:2px}

/* ── CASH HANDOVER (356) ──────────────────────────────────────────────────
   Field density: this is one thumb, in a vehicle, sometimes gloved. Targets are
   56px and the numeric inputs are 18px, because a driver mistyping his own cash
   count is the one error nobody downstream can detect. */
.d-input{
  width:100%; min-height:56px; padding:0 14px;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  font-family:inherit; font-size:18px; font-weight:600; color:var(--text-1);
  /* Money lines up or it is not money. */
  font-variant-numeric:tabular-nums;
}
.d-input::placeholder{ color:var(--text-3); font-weight:400; }
.d-input:focus{
  outline:none; border-color:var(--accent-600,#0E6E68);
  box-shadow:0 0 0 3px rgba(14,110,104,.14);
}

/* A row of the little cash statement: label left, figure right, aligned. */
.d-kv{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:9px 14px; font-size:14px; color:var(--text-2);
}
.d-kv b{ font-size:15px; color:var(--text-1); font-variant-numeric:tabular-nums; }
.d-kv.total{
  border-top:1px solid var(--line-soft); margin-top:2px; padding-top:12px;
  font-weight:600; color:var(--text-1);
}
.d-kv.total b{ font-size:20px; font-weight:800; }

/* ── PATCH-005 · app feel on wide screens ───────────────────────────────────
   Matches the online store (store.css: 560px column). On a phone nothing
   changes - a phone is already narrower than the cap. On a tablet or desktop
   the whole shell (header, body, tabs - all children of body.d-app, so one
   cap does all three and they stay aligned) becomes a centred 560px column
   with page canvas either side, instead of stretching across a monitor.
   Only widths and centring: no content, button, route or feature changes.  */
@media (min-width: 561px) {
    html { background:#E9EDF2; }
    body.d-app {
        max-width:560px; margin:0 auto;
        border-inline:1px solid #D5DBE3;
        min-height:100vh; min-height:100dvh;
    }
}