/* ── SAFE-AREA INSETS ───────────────────────────────────────────────────────
   Every inset below reads `var(--sa-*, env(safe-area-inset-*, 0px))`.

   RoadRecord's Android build publishes --sa-top/right/bottom/left from the real
   window insets (MainActivity.publishWindowInsets), because an Android WebView
   laid out edge-to-edge does NOT reliably populate env(safe-area-inset-*) — and
   with targetSdk 36 the window IS edge-to-edge whether the app asked or not. The
   bottom nav was budgeting against a number the platform never supplied and sat
   underneath the system buttons.

   A host that publishes nothing — a browser, or the Invoice & PDF app — falls
   through to env(), which is what it always was. Nothing here requires the bridge.
   ────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED — the Trip Log review screen's design system.

   ONE FILE, TWO APPS. This is carried byte-identically by Invoice & PDF
   (mcnichol-invoices) and RoadRecord. Neither owns it. Edit it in either
   checkout, run `npm run sync:trips-ui`, and both apps change together;
   `npm run check:trips-ui` fails the build if they ever drift apart.

   It is pure CSS with NO dependencies on either app's stylesheet: the whole
   palette is redeclared on #screen-trips / #screen-loads, so the host app's
   own theme (navy/amber over there, dark green here) is untouched outside
   this screen. That self-containment is the reason it can be shared at all.

   Everything below is the invoice app's block verbatim, indentation included,
   because a diff between the two copies has to be empty to mean anything.
   ═══════════════════════════════════════════════════════════════════════════ */

  /* ═══════════════ v101.7 TRIP LOG REVIEW SCREEN ═══════════════ */
  /* Full-bleed map + floating header + horizontal day strip. The palette is
     scoped to #screen-trips so the rest of the app keeps navy/amber untouched. */
  /* v104.0: #screen-loads is the SAME review screen in a different subject —
     full-bleed map, floating header, day strip, day sheet. It inherits the whole
     palette and every .tl-* rule rather than growing a parallel design system,
     which is also why a fix to one is a fix to both. */
  #screen-trips,#screen-loads{
    --ink:#16211c; --ink-soft:#5c6660; --paper:#ffffff; --paper-dim:#eef0ec;
    --line:#dfe4dc; --line-soft:#edf0ec; --line-air:#b7c3bc;
    --accent:#e04a00; --accent-soft:#ffb599; --accent-tint:#fff7f3; --accent-ink:#ffffff;
    --danger:#c2311b; --hero-panel:#1c2a23;
    --tl-radius:20px; --tl-radius-sm:12px;
    --shadow-card:0 4px 16px rgb(22 33 28 / .08);
    --shadow-float:0 4px 20px rgb(0 0 0 / .18);
    --tl-chip-bg:rgba(255,255,255,.94);
    padding:0;min-height:0
  }
  .dark #screen-trips,.dark #screen-loads{
    --ink:#eef0ec; --ink-soft:#b7c3bc; --paper:#22302a; --paper-dim:#1c2a23;
    --line:#35443c; --line-soft:#2b3a33; --tl-chip-bg:rgba(28,42,35,.94)
  }
  /* Fixed wrap so the map fills everything above the nav bar. --tl-nav-h is
     measured from the real nav element at render (safe-area varies by device). */
  /* --tl-top-h clears the sticky "not backing up to cloud" banner: every other
     screen flows underneath it, but a fixed full-bleed screen would sit behind
     it and lose the header. Measured at render, 0 when the banner is hidden. */
  .tl-wrap{position:fixed;left:0;right:0;top:var(--tl-top-h,0px);bottom:var(--tl-nav-h,68px);overflow:hidden;background:var(--paper-dim)}
  #tl-map,#ld-map{position:absolute;inset:0;background:var(--paper-dim);z-index:1}
  /* Lift Leaflet's attribution clear of the day strip (kept visible — Esri's
     terms require it), and tone it down so it reads as a footnote. */
  #tl-map .leaflet-bottom,#ld-map .leaflet-bottom{bottom:var(--tl-strip-h,132px)}
  #tl-map .leaflet-control-attribution,#ld-map .leaflet-control-attribution{background:rgba(255,255,255,.72);font-size:9px;padding:1px 5px;border-radius:4px 0 0 0}
  .dark #tl-map .leaflet-control-attribution,.dark #ld-map .leaflet-control-attribution{background:rgba(28,42,35,.72);color:var(--ink-soft)}
  .dark #tl-map .leaflet-control-attribution a,.dark #ld-map .leaflet-control-attribution a{color:var(--ink-soft)}
  .tl-fallback{position:absolute;inset:0;z-index:1;display:none;align-items:center;justify-content:center;padding:40px 20px}
  .tl-fallback.on{display:flex}
  .tl-fallback svg{width:100%;height:100%;max-height:60vh}
  .tl-fallback-note{position:absolute;bottom:calc(var(--tl-strip-h,132px) + 12px);left:0;right:0;text-align:center;font-size:11px;color:var(--ink-soft)}

  /* Floating header */
  .tl-head{position:absolute;top:calc(12px + var(--sa-top, env(safe-area-inset-top, 0px)));left:12px;right:64px;z-index:20;
    background:var(--tl-chip-bg);border-radius:var(--tl-radius);padding:12px 14px;box-shadow:var(--shadow-float);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .tl-head-row{display:flex;align-items:center;gap:6px}
  .tl-title-wrap{flex:1;min-width:0;text-align:center}
  .tl-title{font-family:'Archivo','Montserrat',system-ui,sans-serif;font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.3px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Wraps rather than truncating — "2 to review" is the whole point of the line. */
  .tl-metrics{font-size:11.5px;color:var(--ink-soft);margin-top:2px;line-height:1.4}
  .tl-metrics b{color:var(--ink);font-weight:700}
  .tl-metrics .tl-pending{color:var(--accent);font-weight:700}
  .tl-mbtn{width:32px;height:32px;flex-shrink:0;border:none;background:var(--line-soft);color:var(--ink);
    border-radius:50%;font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit}
  .tl-mbtn:disabled{opacity:.3;cursor:default}
  .tl-route{margin-top:9px;padding-top:9px;border-top:1px solid var(--line);font-size:12.5px;font-weight:600;
    color:var(--ink);display:none;line-height:1.35}
  .tl-route.on{display:block}
  .tl-route .tl-route-sub{font-weight:500;color:var(--ink-soft);font-size:11.5px;margin-top:2px}

  /* Right-edge action rail */
  .tl-actions{position:absolute;top:calc(12px + var(--sa-top, env(safe-area-inset-top, 0px)));right:12px;z-index:21;display:flex;flex-direction:column;gap:8px}
  .tl-act{width:40px;height:40px;border:none;border-radius:50%;background:var(--tl-chip-bg);color:var(--ink);
    font-size:16px;cursor:pointer;box-shadow:var(--shadow-float);display:flex;align-items:center;justify-content:center;
    padding:0;font-family:inherit;line-height:1}
  .tl-act.on{background:var(--accent);color:var(--accent-ink)}
  .tl-act.tl-act-rec{background:var(--danger);color:#fff}

  /* Live-trip pill (recording) */
  #trip-live-slot{position:absolute;left:12px;z-index:19;bottom:calc(var(--tl-strip-h,132px) + 10px)}
  .tl-rec{display:flex;align-items:center;gap:8px;background:var(--hero-panel);color:#fff;border-radius:999px;
    padding:8px 14px 8px 11px;box-shadow:var(--shadow-float);font-size:12.5px;font-weight:600}
  .tl-rec-dot{width:9px;height:9px;border-radius:50%;background:#22C55E;animation:tripPulse 1.4s ease-in-out infinite;flex-shrink:0}

  /* Announcements for the day strip's first tap. CLIPPED, not hidden: display:none
     and visibility:hidden are both skipped by screen readers, which would leave the
     live region silent and the whole thing pointless. */
  .tl-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

  /* Day strip */
  .tl-strip{position:absolute;left:0;right:0;bottom:0;z-index:20;display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;
    padding:10px 12px calc(12px + var(--sa-bottom, env(safe-area-inset-bottom, 0px)));scrollbar-width:none;-webkit-overflow-scrolling:touch;
    background:linear-gradient(to top,rgb(0 0 0 / .16),transparent)}
  .tl-strip::-webkit-scrollbar{display:none}
  .day-chip{position:relative;flex:0 0 auto;min-width:96px;padding:10px 14px;border-radius:var(--tl-radius-sm);background:var(--tl-chip-bg);
    box-shadow:var(--shadow-card);cursor:pointer;border:2px solid transparent;transition:border-color .12s,transform .12s;
    text-align:left;font-family:inherit;-webkit-tap-highlight-color:transparent}
  .day-chip.sel{border-color:var(--accent);transform:translateY(-2px)}
  /* Today is a FACT about the calendar, not a selection — so it is marked whether
     or not it is the chip being looked at, and it is quieter than .sel so the two
     read as different things when today happens to be selected. */
  .day-chip.is-today{border-color:var(--accent);border-style:dashed}
  .day-chip.is-today.sel{border-style:solid}
  /* ►► AND A MARK THAT SELECTION CANNOT OVERWRITE. ◄◄
     The border alone could not carry both states: dashed meant today, solid meant
     selected, so a selected today simply stopped reading as today. Survivable while
     selecting was a once-per-visit act. Under select-first the outline moves on every
     tap, so the calendar fact gets its own dot — which the solid border then sits
     around rather than replacing. */
  .day-chip__today{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;
    background:var(--accent);pointer-events:none}
  .day-chip__big{font-family:'Archivo','Montserrat',system-ui,sans-serif;font-size:24px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.5px}
  .day-chip__date{font-size:11px;color:var(--ink-soft);margin-top:3px;white-space:nowrap}
  .day-chip__km{font-size:13px;font-weight:700;color:var(--ink);margin-top:5px;white-space:nowrap}
  .day-chip__bar{height:4px;border-radius:2px;background:var(--line);margin-top:7px;overflow:hidden}
  .day-chip__bar i{display:block;height:100%;border-radius:2px;background:var(--accent)}
  .day-chip__pill{display:inline-block;margin-top:7px;padding:2px 8px;border-radius:999px;font-size:9.5px;font-weight:800;
    letter-spacing:.4px;text-transform:uppercase;white-space:nowrap}
  .pill-pending{background:var(--accent-tint);color:var(--accent)}
  .pill-onsite{background:var(--line-soft);color:var(--ink-soft)}
  /* On-site movement: present but visibly secondary to travel, everywhere. */
  .day-chip__onsite{display:block;font-size:10px;font-weight:600;color:var(--ink-soft);margin-top:2px}
  .day-chip--all .day-chip__onsite{color:rgba(255,255,255,.7)}
  .tl-metrics .tl-onsite{color:var(--ink-soft);font-weight:600}
  .tl-seg.is-onsite{background:var(--paper-dim);border-style:dashed;opacity:.82}
  .tl-seg.is-onsite .tl-seg-route,.tl-seg.is-onsite .tl-seg-km{color:var(--ink-soft)}
  .tl-seg-onsite{font-size:11.5px;font-weight:600;color:var(--ink-soft);margin-top:9px}
  /* v105.2 — a day's worksite travel, folded into one row */
  .tl-onsite-group{display:flex;align-items:center;gap:10px;border:1px dashed var(--line-air);
    border-radius:var(--tl-radius-sm);padding:11px 13px;margin-bottom:10px;background:var(--paper-dim);
    cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tl-onsite-group.open{margin-bottom:6px;border-style:solid}
  .tl-onsite-group-main{flex:1;min-width:0}
  .tl-onsite-group-title{font-size:13.5px;font-weight:700;color:var(--ink)}
  .tl-onsite-group-sub{font-size:11.5px;color:var(--ink-soft);margin-top:3px}
  .tl-onsite-chev{font-size:13px;color:var(--ink-soft);flex-shrink:0}
  .pill-approved{background:#e8f5ec;color:#1a7f42}
  .pill-tagged{background:var(--line-soft);color:var(--ink-soft)}
  .dark .pill-approved{background:rgba(34,197,94,.16);color:#5fd48a}
  .day-chip--all{background:var(--hero-panel);color:#fff;min-width:112px}
  .day-chip--all .day-chip__big{font-size:20px;color:#fff}
  .day-chip--all .day-chip__date,.day-chip--all .day-chip__km{color:rgba(255,255,255,.82)}
  .day-chip--all .day-chip__bar{background:rgba(255,255,255,.2)}
  .day-chip--all.sel{border-color:var(--accent-soft)}

  /* Day detail sheet */
  .tl-sheet{position:absolute;left:0;right:0;bottom:0;z-index:30;background:var(--paper);
    border-radius:var(--tl-radius) var(--tl-radius) 0 0;box-shadow:0 -6px 28px rgb(0 0 0 / .22);
    max-height:54%;display:flex;flex-direction:column;transform:translateY(101%);transition:transform .22s cubic-bezier(.32,.72,0,1);
    padding-bottom:var(--sa-bottom, env(safe-area-inset-bottom, 0px))}
  .tl-sheet.open{transform:translateY(0)}
  .tl-sheet-grab{width:38px;height:4px;border-radius:2px;background:var(--line-air);margin:9px auto 4px;flex-shrink:0}
  .tl-sheet-head{padding:6px 16px 12px;border-bottom:1px solid var(--line);flex-shrink:0;display:flex;align-items:center;gap:10px}
  .tl-sheet-title{flex:1;min-width:0}
  .tl-sheet-title h4{font-family:'Archivo','Montserrat',system-ui,sans-serif;font-size:16px;font-weight:700;color:var(--ink);margin:0;letter-spacing:-.2px}
  .tl-sheet-title p{font-size:12px;color:var(--ink-soft);margin:3px 0 0}
  /* v114.0 — the day summary is tappable ONLY while one trip is focused, so it
     is only ever styled as a control when it actually is one. */
  .tl-sheet-title.tl-day-back{cursor:pointer}
  .tl-day-hint{font-size:11px;font-weight:600;color:var(--accent);margin-top:4px}
  .tl-sheet-body{overflow-y:auto;padding:12px 16px 18px;-webkit-overflow-scrolling:touch}
  .tl-approve-all{border:none;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:9px 15px;
    font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0}
  .tl-approve-all:disabled{background:var(--line-soft);color:var(--ink-soft);cursor:default}
  .tl-sheet-close{width:32px;height:32px;border:none;border-radius:50%;background:var(--line-soft);color:var(--ink-soft);
    font-size:15px;cursor:pointer;flex-shrink:0;font-family:inherit;line-height:1}

  /* Trip segment row inside the sheet */
  .tl-seg{border:1px solid var(--line);border-radius:var(--tl-radius-sm);padding:12px 13px;margin-bottom:10px;background:var(--paper)}
  .tl-seg.is-approved{border-color:var(--line-soft);background:var(--paper-dim)}
  .tl-seg-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .tl-seg-route{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.35}
  .tl-seg-when{font-size:11.5px;color:var(--ink-soft);margin-top:3px}
  .tl-seg-km{font-family:'Archivo','Montserrat',system-ui,sans-serif;font-size:17px;font-weight:700;color:var(--ink);white-space:nowrap;letter-spacing:-.3px}
  .tl-seg-kmh{font-size:11px;color:var(--ink-soft);text-align:right;margin-top:2px;white-space:nowrap}
  .tl-seg-btns{display:flex;gap:7px;margin-top:11px}
  .tl-cat-btn{flex:1;border:1.5px solid var(--line);background:transparent;color:var(--ink-soft);border-radius:9px;
    padding:9px 4px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .12s;min-height:38px}
  .tl-cat-btn.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
  .tl-cat-btn.on-private{background:var(--hero-panel);border-color:var(--hero-panel);color:#fff}
  .tl-cat-btn.on-skip{background:var(--line-soft);border-color:var(--line-air);color:var(--ink)}
  .tl-seg-flag{font-size:11px;color:var(--accent);margin-top:8px;font-weight:600}
  /* v115.0 — the vehicle chip. Its own line, never a fourth button in the
     category row (four controls squeeze to unreadable at 375px). */
  .tl-seg-veh{margin-top:8px}
  .tl-veh-btn{width:100%;padding:8px 10px;border-radius:var(--tl-radius-sm);border:1px solid var(--line);
    background:var(--paper);color:var(--ink);font-size:12.5px;font-weight:600;text-align:left;cursor:pointer}
  /* Unset is tinted so it reads as an open question without shouting — it is a
     nudge, not a blocker. */
  .tl-veh-btn.is-unset{border-color:var(--accent);color:var(--accent);background:var(--accent-tint)}
  .tl-seg-note{font-size:11px;color:var(--ink-soft);margin-top:8px}
  .tl-empty{text-align:center;padding:30px 18px;color:var(--ink-soft);font-size:13px}
  .tl-empty h3{font-family:'Archivo','Montserrat',system-ui,sans-serif;color:var(--ink);font-size:16px;margin:0 0 6px}

  /* First-run / no-vehicle card, centred over the map */
  .tl-setup{position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);z-index:22;background:var(--paper);
    border-radius:var(--tl-radius);padding:26px 20px;text-align:center;box-shadow:var(--shadow-float)}
  .tl-setup h3{font-family:'Archivo','Montserrat',system-ui,sans-serif;font-size:17px;color:var(--ink);margin:0 0 8px}
  .tl-setup p{font-size:13px;color:var(--ink-soft);margin:0 0 16px;line-height:1.5}
  .tl-setup button{border:none;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:12px 22px;
    font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}

  /* ═══════════════ v104.0 LOADS ═══════════════ */
  /* Everything above is inherited. These are the pieces a load day has that a
     trip day does not: the rollup card (the numbers that reach an invoice) and
     the per-lap phase bar. */
  .ld-roll{position:absolute;left:12px;right:12px;z-index:19;bottom:calc(var(--tl-strip-h,132px) + 10px);
    background:var(--hero-panel);color:#fff;border-radius:var(--tl-radius);padding:13px 15px;box-shadow:var(--shadow-float)}
  .ld-roll-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
  /* A running lap sits ABOVE the day's totals, never in place of them. */
  .ld-roll-live{display:flex;align-items:baseline;gap:7px;padding-bottom:9px;margin-bottom:9px;
    border-bottom:1px solid rgba(255,255,255,.16);font-size:11.5px}
  .ld-roll-live .tl-rec-dot{align-self:center}
  .ld-roll-live b{font-family:'Archivo','Montserrat',system-ui,sans-serif;font-size:17px;font-weight:700;
    color:var(--accent-soft);letter-spacing:-.3px}
  .ld-roll-live span:last-child{opacity:.72;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ld-roll-when{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;opacity:.7}
  .ld-roll-flag{font-size:11px;font-weight:700;color:var(--accent-soft)}
  .ld-roll-grid{display:flex;gap:16px;flex-wrap:wrap}
  .ld-stat{min-width:62px}
  .ld-stat b{display:block;font-family:'Archivo','Montserrat',system-ui,sans-serif;font-size:21px;font-weight:700;
    line-height:1.1;letter-spacing:-.5px}
  .ld-stat span{display:block;font-size:10.5px;opacity:.72;margin-top:3px;white-space:nowrap}
  .ld-stat.is-key b{color:var(--accent-soft)}
  .ld-roll-note{font-size:11px;opacity:.68;margin-top:9px;line-height:1.4}

  /* Per-lap row in the day sheet — extends .tl-seg */
  .tl-seg.is-void{background:var(--paper-dim);border-style:dashed;opacity:.8}
  .tl-seg.is-void .tl-seg-route,.tl-seg.is-void .tl-seg-km{color:var(--ink-soft);text-decoration:line-through}
  .tl-seg.is-confirmed{border-color:#bfe3cc;background:#f6fbf7}
  .dark .tl-seg.is-confirmed{border-color:#2f5d42;background:rgba(34,197,94,.07)}
  .tl-seg.is-focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-tint)}
  .ld-phases{display:flex;height:7px;border-radius:4px;overflow:hidden;margin-top:10px;background:var(--line-soft)}
  .ld-phases i{display:block;height:100%}
  .ld-ph-load{background:#e0a800}.ld-ph-haul{background:var(--accent)}
  .ld-ph-dump{background:#8a5a2b}.ld-ph-ret{background:#5c7f9c}
  .ld-phase-key{display:flex;gap:9px;flex-wrap:wrap;font-size:10.5px;color:var(--ink-soft);margin-top:5px}
  .ld-phase-key i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:3px;vertical-align:-1px}
  .ld-seg-tag{display:inline-block;padding:2px 7px;border-radius:999px;font-size:9.5px;font-weight:800;
    letter-spacing:.4px;text-transform:uppercase;margin-top:7px}
  .ld-tag-void{background:var(--line-soft);color:var(--ink-soft)}
  .ld-tag-outlier{background:var(--accent-tint);color:var(--accent)}
  .ld-tag-edited{background:var(--line-soft);color:var(--ink-soft)}
  .ld-hint{font-size:11px;color:var(--ink-soft);margin-top:8px;font-style:italic}
  /* v104.9 — what the tapped lap contributed */
  .ld-focus-detail{margin-top:9px;padding-top:8px;border-top:1px dashed var(--line);
    font-size:11.5px;color:var(--ink-soft);line-height:1.5}
  .ld-focus-detail b{color:var(--ink)}
  .pill-confirmed{background:#e8f5ec;color:#1a7f42}
  .pill-void{background:var(--line-soft);color:var(--ink-soft)}
  .dark .pill-confirmed{background:rgba(34,197,94,.16);color:#5fd48a}
  /* Reason chips in the lap modal */
  .ld-reasons{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 2px}
  .ld-reason{border:1.5px solid var(--border);background:transparent;color:var(--text2);border-radius:999px;
    padding:7px 13px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
  .ld-reason.on{background:var(--amber);border-color:var(--amber);color:#fff}

  /* ═══════════════ SHARED — the two sheets this screen owns ═══════════════ */
  /* The vehicle picker and the press-and-hold row actions used to borrow the
     host app's modal system (.modal-bg/.modal over in Invoice & PDF). Borrowing
     is what made the same screen look like two screens: each app styled the
     borrowed parts its own way. They are defined here instead, inside the same
     scope as everything else, so a host needs no modal CSS at all to mount the
     Trip Log. */
  .tl-modal-bg{position:absolute;inset:0;z-index:40;display:none;align-items:flex-end;justify-content:center;
    background:rgb(0 0 0 / .45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .tl-modal-bg.open{display:flex}
  .tl-modal{width:100%;max-width:400px;max-height:80%;overflow-y:auto;background:var(--paper);
    border-radius:var(--tl-radius) var(--tl-radius) 0 0;padding:16px 16px calc(18px + var(--sa-bottom, env(safe-area-inset-bottom, 0px)));
    box-shadow:0 -6px 28px rgb(0 0 0 / .28)}
  @media(min-width:520px){ .tl-modal-bg{align-items:center} .tl-modal{border-radius:var(--tl-radius);margin:0 16px} }
  .tl-modal-title{display:flex;align-items:center;gap:10px;font-family:'Archivo','Montserrat',system-ui,sans-serif;
    font-size:15px;font-weight:700;color:var(--ink);margin-bottom:14px;letter-spacing:-.2px}
  .tl-modal-close{margin-left:auto;width:30px;height:30px;flex-shrink:0;border:none;border-radius:50%;
    background:var(--line-soft);color:var(--ink-soft);font-size:14px;line-height:1;cursor:pointer;font-family:inherit}
  /* One button vocabulary for the sheets, so "Delete this trip" reads the same
     in both apps rather than inheriting two different .btn definitions. */
  .tl-btn{border:1.5px solid var(--line);background:transparent;color:var(--ink);border-radius:var(--tl-radius-sm);
    padding:11px 14px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;line-height:1.3}
  .tl-btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

  /* 48 px hit areas on the small controls, with the visuals unchanged. The month arrows
     (32), the sheet close (32), Approve-all (33) and the rail actions (40) all sat under
     the 48 px floor in DESIGN-PROTOCOL.md; an invisible ::before extends each one.
     Shared file — identical in both apps (check-trips-ui-drift.sh). 2026-09-03. */
  .tl-mbtn,.tl-sheet-close,.tl-approve-all,.tl-act,.tl-modal-close{position:relative}
  .tl-mbtn::before,.tl-sheet-close::before,.tl-modal-close::before{content:'';position:absolute;inset:-8px}
  .tl-approve-all::before{content:'';position:absolute;inset:-8px 0}
  .tl-act::before{content:'';position:absolute;inset:-4px}