/* =====================================================================
   moovr.css - shared stylesheet for the Moovr Operations screens (v3)
   Extracted from exploration/tour/probes5/today.html (approved, round 12).
   Rule for every screen: use these tokens and classes. Do not add new
   colors, radii, shadows or easing curves per screen. See DESIGN.md.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400..700&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ---------- 1. tokens ---------- */
:root{
  /* canvas */
  --parch:#f3efe7;            /* page canvas, warm parchment */
  --paper:#fffdf9;            /* solid surfaces: tables, sheet, dialog, inputs */
  --line:#e3dccf;             /* control borders, panel borders */
  --line2:#eee8de;            /* row dividers inside a surface */
  /* ink */
  --navy:#111a4a;             /* brand, primary action, "on the road", headings */
  --navy-hover:#1c2766;
  --ink:#1c1b19;              /* main text */
  --ink-glass:#1c1b19;        /* text on glass: the same ink (clean pass 2026-10-31: one ink, heavier weight on glass) */
  --slate:#3d3b37;            /* secondary text */
  --text-glass:#3d3b37;       /* secondary text on glass: slate (clean pass: one second-text colour) */
  --steel:#68645c;            /* muted text, labels (never on glass) */
  --fog:#a39d91;              /* disabled, arrows, closed things */
  --rail:#cfc8bb;             /* timeline rail */
  /* status (one meaning per color, see DESIGN.md) */
  --sea:#44b48b;  --sea-ink:#12705d;      /* done, OK, live */
  --amber:#cf952f; --amber-ink:#87580d;   /* waiting, soon, check */
  --orange:#ec652b; --orange-ink:#b3431a; /* problem, act now, late */
  --red:#b8361f;                          /* count badges and destructive only */
  --sky:#88deeb;                          /* data on navy (toast, tooltip) */
  --call:#5fe0a8;                         /* live call dot on navy */
  /* tints */
  --tint-hover:rgba(17,26,74,.045);
  --tint-on:rgba(17,26,74,.075);
  --tint-press:rgba(17,26,74,.07);
  --tint-sel:rgba(136,222,235,.18);
  --tint-note:rgba(207,149,47,.11);
  --tint-done:rgba(68,180,139,.14);
  --tint-stuck:rgba(236,101,43,.12);
  /* materials: ONE glass (clean pass 2026-10-31): one opacity, one blur, one edge, one shadow.
     The thick / chip names stay as aliases so older rules keep working, but they are the same glass. */
  --glass:rgba(255,253,249,.66);
  --glass-thick:var(--glass);
  --glass-chip:var(--glass);
  --blur:blur(30px) saturate(180%);
  --blur-chip:var(--blur);
  --edge:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.4);
  --glass-sh:var(--edge),var(--e2);
  /* elevation: two steps. e1 small floating things (snapshot, chip), e2 floating panels (glass, popover, card).
     e3 is kept as an alias of e2 for older rules. Solid surfaces on the canvas: a hairline, no shadow. */
  --e1:0 1px 2px rgba(40,30,10,.06),0 8px 24px -8px rgba(40,30,10,.18);
  --e2:0 2px 6px rgba(40,30,10,.05),0 28px 60px -24px rgba(40,30,10,.32);
  --e3:var(--e2);
  /* faces: one initials avatar everywhere (soft navy tint, navy initials, no ring, no shadow) */
  --av-bg:rgba(17,26,74,.075);
  --e-toast:0 16px 40px -10px rgba(17,26,74,.5);
  --e-sheet:0 -24px 64px -24px rgba(40,30,10,.32);
  --e-btn:0 1px 2px rgba(17,26,74,.18),inset 0 1px 0 rgba(255,255,255,.14);
  /* type */
  --sans:"Instrument Sans",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  /* spacing (4 px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px;
  /* radius */
  --r-xs:4px; --r-sm:6px; --r:8px; --r-md:12px; --r-lg:16px; --r-sheet:18px;
  /* motion (CSS side; springs live in moovr.js) */
  --eo:cubic-bezier(.25,1,.5,1);          /* ease-out-quart: UI default */
  --ex:cubic-bezier(.16,1,.3,1);          /* ease-out-expo: entrances */
  --t-press:100ms; --t-fast:150ms; --t-ui:240ms; --t-enter:320ms;   /* the ONE set of durations; moovr.js mirrors them as EASE / DUR */
}

/* ---------- 2. base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--parch);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:450;line-height:1.4;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{font-weight:inherit}   /* clean pass: a button's words keep the page weight (no stray 400) */
button{border:0;background:none;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:var(--r)}
.mono{font-family:var(--mono);font-weight:450;letter-spacing:.02em}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.i.s16{width:16px;height:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 3. type scale (tracking by size, leading inverse to size) ---------- */
.t-display{font-size:84px;line-height:1;font-weight:440;letter-spacing:-.04em;color:var(--navy)}
.t-object{font-size:27px;line-height:1.05;font-weight:460;letter-spacing:-.022em;color:var(--navy)}
.t-stat{font-size:30px;line-height:1;font-weight:440;letter-spacing:-.025em;color:var(--navy);font-variant-numeric:tabular-nums}
.t-title{font-size:24px;line-height:1.1;font-weight:480;letter-spacing:-.02em;color:var(--navy)}
.t-head{font-size:15px;line-height:1.35;font-weight:600;color:var(--ink)}
.t-body{font-size:14px;line-height:1.45;font-weight:450;color:var(--slate)}
.t-small{font-size:13.5px;line-height:1.45;color:var(--steel)}
.t-label{font-family:var(--mono);font-size:12px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}
.t-data{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--navy);font-variant-numeric:tabular-nums}
.late{color:var(--orange-ink);font-weight:500}
.muted{color:var(--steel)}

/* ---------- 4. status grammar: color + word (+ shape) ---------- */
.dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.st{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.st-road .dot,.d-road{background:var(--navy)}
.st-wait .dot,.d-wait{background:var(--amber)}
.st-done .dot,.d-done{background:var(--sea)}
.st-stuck .dot,.d-stuck{background:var(--orange)}
.st-nogps .dot,.d-nogps{background:#fff;border:1.5px dashed var(--orange-ink)}
.st-planned .dot,.d-planned{background:var(--paper);border:1.5px solid var(--navy)}
.st-closed .dot,.d-closed{background:var(--fog)}
.st-road{color:var(--navy)} .st-wait{color:var(--amber-ink)} .st-done{color:var(--sea-ink)}
.st-stuck,.st-nogps{color:var(--orange-ink);font-weight:560}
.st-planned{color:var(--navy)} .st-closed{color:var(--steel)}
/* urgency dot with halo (Needs-you rows) */
.sd{width:8px;height:8px;border-radius:50%;flex:none}
.sd.red{background:var(--orange);box-shadow:0 0 0 4px rgba(236,101,43,.15)}
.sd.amber{background:var(--amber);box-shadow:0 0 0 4px rgba(207,149,47,.15)}
/* live dot */
.live{width:8px;height:8px;border-radius:50%;background:var(--sea);position:relative;flex:none;display:inline-block}
.live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--sea);animation:m-live 2s var(--eo) infinite}
@keyframes m-live{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.8);opacity:0}}
/* counts */
.count{font-family:var(--mono);font-size:12px;font-weight:500;color:#fff;background:var(--red);border-radius:999px;min-width:20px;height:20px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
.roll{display:inline-flex;height:22px;min-width:22px;padding:0 7px;border-radius:999px;border:1px solid var(--line);background:var(--paper);overflow:hidden;
  align-items:center;justify-content:center;position:relative;font-family:var(--mono);font-size:12.5px;color:var(--navy);letter-spacing:.02em}

/* ---------- 5. top bar (built by Moovr.topNav) ---------- */
.top{position:sticky;top:0;z-index:30;height:60px;display:flex;align-items:center;padding:0 24px;
  background:rgba(243,239,231,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;margin-right:30px;color:var(--navy);font-weight:600;font-size:20px;letter-spacing:-.03em;text-decoration:none}
.brand .mark{width:22px;height:22px;display:grid;grid-template-columns:repeat(3,6px);gap:2px}
.brand .mark i{width:6px;height:6px;border-radius:50%;background:var(--navy)}
.brand .mark i.s{background:var(--sea)}
/* the company's logo after the Moovr mark, a thin line between them */
.brand + .ten{margin-left:-12px}
.ten{flex:none;display:flex;align-items:center;height:30px;padding-left:14px;margin-right:24px;border-left:1px solid var(--line)}
.ten img{height:26px;width:auto;display:block}
.ten-ini{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--ten);color:#fff;font:700 12px/1 var(--sans);letter-spacing:.03em}
.menu{display:flex;gap:2px;height:100%;align-items:center}
.menu a{display:flex;align-items:center;gap:8px;height:36px;padding:0 11px;border-radius:8px;color:var(--slate);text-decoration:none;font-size:14.5px;position:relative}
.menu a:hover{background:var(--tint-hover)}
.menu a svg.i{color:#8f8a80}
.menu a.on{color:var(--navy);font-weight:560;background:rgba(17,26,74,.06)}
.menu a.on svg.i{color:var(--navy)}
.menu a.on::after{content:"";position:absolute;left:11px;right:11px;bottom:-12px;height:2px;background:var(--navy);border-radius:2px}
.navr{margin-left:auto;display:flex;align-items:center;gap:14px}
.search{width:270px;height:36px;border:1px solid var(--line);border-radius:8px;background:rgba(255,253,249,.7);display:flex;align-items:center;gap:8px;padding:0 10px;color:var(--steel)}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:14px;color:var(--ink)}
.search input::placeholder{color:var(--steel)}
.search:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(17,26,74,.1)}
.k{font-family:var(--mono);font-size:12px;color:var(--steel);border:1px solid var(--line);border-radius:var(--r-xs);padding:0 6px;background:#fff}
.bell{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--slate);position:relative}
.bell:hover{background:var(--tint-hover)}
.bell b{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--red);border:1.5px solid var(--parch)}
.me{display:flex;align-items:center;gap:10px;padding-left:14px;border-left:1px solid var(--line);height:30px;font-weight:560;font-size:14.5px}
/* under 1440 wide the search box gives way first, so the name never leaves the window */
@media (max-width:1439px){.navr{min-width:0;padding-left:16px}.search{flex:0 1 270px;width:auto;min-width:120px}.me{flex:none}}
.av{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;background:#e6ddcc}
span.av{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--navy);letter-spacing:.02em}

/* ---------- 5b. top bar menus: bell alerts + user menu (built by Moovr.topNav / topMenus) ----------
   Solid paper panel, grows from its button (spring in moovr.js). Everything between the two markers is
   also fetched by moovr.js for a page that has its own top bar and does not load this file, so it only
   uses tokens with a fallback. */
:root{--mv-pop:1}
/* mv-pop:start */
[data-mv-top] .bell,[data-mv-top] .me{cursor:pointer;font:inherit;color:inherit}
[data-mv-top] .bell{color:var(--slate,#3d3b37)}
[data-mv-top] .bell.open{background:var(--tint-on,rgba(17,26,74,.075))}
[data-mv-top] .bell b[hidden]{display:none}
[data-mv-top] .me{font-weight:560;font-size:14.5px;border-radius:0 8px 8px 0;padding-right:8px;margin-right:-8px;transition:background-color .15s}
[data-mv-top] .me:hover,[data-mv-top] .me.open{background:var(--tint-hover,rgba(17,26,74,.045))}
.mv-pop{position:absolute;z-index:40;background:var(--paper,#fffdf9);border-radius:14px;box-shadow:0 2px 6px rgba(40,30,10,.06),0 30px 64px -20px rgba(30,24,40,.38),0 0 0 1px rgba(40,30,10,.07);
  color:var(--ink,#1c1b19);font-family:var(--sans,"Instrument Sans",system-ui,sans-serif);font-size:14px;line-height:1.4;text-align:left;will-change:transform,opacity}
.mv-pop[hidden]{display:none}
.mv-pop-h{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 10px 0 18px;border-bottom:1px solid var(--line2,#eee8de)}
.mv-pop-h h2{font-size:17px;line-height:1.2;font-weight:560;letter-spacing:-.01em;color:var(--navy,#111a4a)}
.mv-mark{height:30px;padding:0 10px;border-radius:7px;font-size:13.5px;font-weight:560;color:var(--navy,#111a4a)}
.mv-mark:hover{background:var(--tint-hover,rgba(17,26,74,.045))}
.mv-mark:disabled{color:var(--fog,#a39d91);pointer-events:none}
/* bell list */
.mv-bell{width:384px}
.mv-al-list{max-height:520px;overflow:auto;padding:6px 6px 8px;scrollbar-width:thin}
.mv-al{display:grid;grid-template-columns:8px 1fr auto;column-gap:12px;padding:10px 12px;border-radius:10px;text-decoration:none;color:inherit;transition:background-color .15s,transform .24s var(--eo,cubic-bezier(.25,1,.5,1))}
.mv-al + .mv-al{margin-top:1px}
.mv-al:hover{background:var(--tint-hover,rgba(17,26,74,.045))}
.mv-al .sd,.mv-al .mv-nodot{margin-top:7px;width:8px;height:8px;border-radius:50%}
.mv-al .mv-nodot{background:transparent;transition:background-color .2s}
.mv-al-t{font-size:14.5px;line-height:1.35;font-weight:600;color:var(--ink-glass,#14130f)}
.mv-al-t .m{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:14px;font-weight:500;color:var(--navy,#111a4a);letter-spacing:.02em}
.mv-al-s{margin-top:2px;font-size:13.5px;color:var(--steel,#68645c)}
.mv-al-tm{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:12.5px;color:var(--steel,#68645c);letter-spacing:.02em;padding-top:2px;white-space:nowrap}
.mv-al.read .mv-al-t{font-weight:500;color:var(--slate,#3d3b37)}
.mv-al.read .mv-al-t .m{color:var(--slate,#3d3b37)}
.mv-al-sub{padding:12px 12px 4px;font-family:var(--mono,"IBM Plex Mono",monospace);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel,#68645c)}
.mv-al-none{padding:14px 12px 8px;font-size:14px;color:var(--steel,#68645c)}
/* user menu */
.mv-me{width:264px;padding:6px}
.mv-me-h{padding:10px 12px 10px;border-bottom:1px solid var(--line2,#eee8de);margin:0 -6px 6px;padding-left:18px}
.mv-me-h b{display:block;font-size:15px;font-weight:600;color:var(--ink,#1c1b19)}
.mv-me-h span{display:block;margin-top:1px;font-size:13.5px;color:var(--steel,#68645c)}
.mv-mi{width:100%;display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-radius:8px;font-size:14.5px;font-weight:500;color:var(--ink,#1c1b19);text-align:left;
  transition:background-color .15s,transform .24s var(--eo,cubic-bezier(.25,1,.5,1))}
.mv-mi:hover{background:var(--tint-hover,rgba(17,26,74,.045))}
.mv-mi svg.i{width:18px;height:18px;color:var(--slate,#3d3b37)}
.mv-sep{height:1px;background:var(--line2,#eee8de);margin:6px 6px}
.mv-al.pressed,.mv-mi.pressed{transform:scale(.98)!important}
/* top search drop-down: grouped results, one row = key (mono for codes and plates) + one quiet line */
.mv-find{max-height:452px;overflow:auto;padding:6px;scrollbar-width:thin}
.mv-fr-gp + .mv-fr-gp{margin-top:4px;padding-top:4px;border-top:1px solid var(--line2,#eee8de)}
.mv-fr-g{padding:8px 12px 4px;font-family:var(--mono,"IBM Plex Mono",monospace);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel,#68645c)}
.mv-fr{display:flex;align-items:baseline;gap:12px;min-height:38px;padding:9px 12px;border-radius:8px;text-decoration:none;color:inherit;scroll-margin:8px}
.mv-fr.on{background:var(--tint-on,rgba(17,26,74,.075))}
.mv-fr-k{flex:none;font-size:14.5px;font-weight:560;color:var(--ink,#1c1b19)}
.mv-fr-k.m{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:14px;font-weight:500;color:var(--navy,#111a4a);letter-spacing:.02em}
.mv-fr-s{min-width:0;font-size:13.5px;color:var(--steel,#68645c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-fr-more{font-size:13.5px;font-weight:560;color:var(--navy,#111a4a)}
.mv-fr-none{padding:14px 12px;font-size:14px;color:var(--steel,#68645c)}
.mv-fr-none b{font-weight:560;color:var(--ink,#1c1b19)}
/* mv-pop:end */

/* ---------- 6. buttons ---------- */
.btn{height:40px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;font-size:14.5px;font-weight:560;white-space:nowrap;
  transition:transform .24s var(--eo),background-color .15s,box-shadow .15s,opacity .2s}
.btn svg.i{width:16px;height:16px}
.btn.primary{background:var(--navy);color:#fff;box-shadow:var(--e-btn)}
.btn.primary:hover{background:var(--navy-hover)}
.btn.primary.ic{padding-left:15px}
.btn.secondary{background:rgba(255,253,249,.6);color:var(--navy);border:1px solid var(--navy)}
.btn.secondary:hover{background:#fff}
.btn.quiet{color:var(--navy);padding:0 10px}
.btn.quiet:hover{background:var(--tint-hover)}
.btn.quiet.red{color:var(--red)}
.btn.danger{background:var(--red);color:#fff;box-shadow:0 1px 2px rgba(120,30,10,.2),inset 0 1px 0 rgba(255,255,255,.14)}
.btn.danger:hover{background:#a02e1a}
.btn.sm{height:32px;font-size:13.5px;padding:0 12px;gap:6px}
.btn.lg{height:44px}
.btn.wide{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.42;pointer-events:none}
.link{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:560;color:var(--navy);text-decoration:none;border-radius:8px;transition:transform .15s var(--eo)}
.link:hover{transform:translateY(-1px)}
.link svg.i{width:16px;height:16px}
.x2{width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--slate)}
.x2:hover{background:var(--tint-hover)}

/* press feedback: added on pointer-down by Moovr.press(), commit stays on click */
.btn,.item,.fb,.x2,.link,.menu a,.sugg,.tab,.seg button,.blk,.p-item,.tabbar a,.toast .undo,.cap,.bell{transition:transform .24s var(--eo),background-color .15s,box-shadow .15s,opacity .2s}
.pressed{transform:scale(.97)!important;transition:transform var(--t-press) ease-out,background-color .15s!important}
.item.pressed,.p-item.pressed{transform:scale(.985)!important}
.fb.pressed{transform:scale(.96)!important}
.cap.pressed{transform:scaleY(.86)!important}
tr.pressed{transform:none!important;background:var(--tint-press)!important}
.trk.pressed .pop{transform:scale(.85)!important;transition-duration:.1s}
.blk.pressed{transform:scale(.98)!important;box-shadow:var(--e1)}

/* ---------- 7. materials ---------- */
/* glass panel: ONE translucent layer over the map, never light glass on light glass */
.glass{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-radius:var(--r-lg);box-shadow:var(--edge),var(--e2)}
.glass.thick{background:var(--glass-thick);box-shadow:var(--edge),var(--e3);border-radius:14px}
.glass-chip{background:var(--glass-chip);backdrop-filter:var(--blur-chip);-webkit-backdrop-filter:var(--blur-chip);border:1px solid rgba(255,255,255,.65);border-radius:8px}
.glass .t-small,.glass .det{color:var(--text-glass);font-weight:500}
/* solid surface: tables, forms, lists away from the map */
.surface{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md)}

/* panel header */
.ph{display:flex;align-items:center;gap:10px;padding:24px 26px 12px}
.ph h2{font-size:24px;line-height:1.1;font-weight:480;letter-spacing:-.02em;color:var(--navy)}
.ph .sub{font-size:14px;color:var(--steel)}
.ph .fx{margin-left:auto;display:flex;align-items:center;gap:12px}
.surface .ph{padding:0 20px 0 24px;height:56px;border-bottom:1px solid var(--line)}
.surface .ph h2{font-size:21px}

/* ---------- 8. Needs-you item ---------- */
.items{padding:0 12px;position:relative}
.item{display:grid;grid-template-columns:8px 1fr auto;column-gap:14px;align-items:center;padding:14px;border-radius:12px;position:relative;cursor:pointer}
.item + .item{margin-top:2px}
.item .sd{align-self:start;margin-top:8px}
.item:hover,.item.hl{background:var(--tint-hover)}
.item.on{background:var(--tint-on)}
.item.calling{background:rgba(17,26,74,.06)}
.item h4{font-size:15px;line-height:1.35;font-weight:600;color:var(--ink-glass);display:flex;align-items:flex-start}
.item h4 .tx{position:relative}
.item h4 .m{font-family:var(--mono);font-size:14.5px;color:var(--navy);font-weight:500;letter-spacing:.02em}
.item .det{margin-top:3px;display:flex;align-items:center;gap:8px;font-size:13.5px;line-height:1.45;color:var(--text-glass);font-weight:500;white-space:nowrap}
.item .slot{position:relative;display:flex;align-items:center}
/* done: check draws, text strikes, then the row lifts out (Moovr handles the FLIP) */
.chk{width:0;height:20px;flex:none;overflow:visible;position:relative;transition:width .22s var(--eo),margin .22s var(--eo)}
.chk svg{position:absolute;left:0;top:0;width:20px;height:20px;opacity:0;transform:scale(.6);transition:opacity .15s,transform .25s var(--eo)}
.chk circle{fill:var(--sea)}
.chk path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .26s var(--eo) .08s}
.item h4 .strike{position:absolute;left:0;right:0;top:52%;height:1.5px;background:var(--steel);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--eo) .1s}
.item.done .chk{width:20px;margin-right:8px}
.item.done .chk svg{opacity:1;transform:none}
.item.done .chk path{stroke-dashoffset:0}
.item.done h4 .strike{transform:scaleX(1)}
.item.done h4{color:var(--steel)}
.item.ghost{position:absolute;z-index:2;pointer-events:none;margin:0}
/* calling state */
.pill{display:none;align-items:center;gap:8px;height:32px;padding:0 6px 0 12px;border-radius:8px;background:var(--navy);color:#fff;font-size:13.5px}
.pill .tm{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px}
.rec{width:7px;height:7px;border-radius:50%;background:var(--call);animation:m-blink 1.2s ease-in-out infinite;display:inline-block}
@keyframes m-blink{50%{opacity:.55}}
.pill .end{height:24px;padding:0 8px;border-radius:6px;background:rgba(255,255,255,.14);font-size:12.5px;font-weight:560;color:#fff}
.pill .end:hover{background:rgba(255,255,255,.24)}
.callrow{display:none;grid-column:2 / 4;margin-top:12px;align-items:center;justify-content:space-between;gap:10px}
.callrow .cs{font-size:13.5px;color:var(--sea-ink);font-weight:560;display:flex;align-items:center;gap:7px}
.item.calling .slot .btn{display:none}
.item.calling .pill{display:inline-flex}
.item.calling .callrow{display:flex}
.allclear{padding:8px 26px 18px;font-size:15px;color:var(--steel)}

/* ---------- 9. fleet strip ---------- */
.strip{display:flex;gap:3px;height:30px;align-items:flex-end}
.cap{width:7px;height:26px;border-radius:3px;flex:none;transform-origin:50% 100%;cursor:pointer}
.cap.g{margin-left:7px}
.cap.road{background:var(--navy)} .cap.wait{background:var(--amber)} .cap.done{background:var(--sea)} .cap.stuck{background:var(--orange)}
.cap.nogps{background:#fff;border:1.5px dashed var(--orange-ink)}
.cap:hover,.cap.hot{transform:translateY(-3px) scaleY(1.08)}
.cap.in{animation:m-cap .3s var(--eo) both}
@keyframes m-cap{from{transform:scaleY(0)}}
.strip.filtering .cap:not(.fm){opacity:.2}
.fbtns{margin-top:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-left:-8px}
.fb{text-align:left;padding:5px 8px 6px;border-radius:8px}
.fb:hover{background:rgba(17,26,74,.05)}
.fb.on{background:rgba(255,253,249,.9);box-shadow:inset 0 0 0 1px var(--navy)}
.fb .n{display:block;font-size:30px;line-height:1;font-weight:440;letter-spacing:-.025em;color:var(--navy);font-variant-numeric:tabular-nums}
.fb .n.alert{color:var(--orange-ink)}
.fb .w{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:13.5px;color:var(--slate);white-space:nowrap}

/* ---------- 10. map (dot grid canvas + svg overlay) ---------- */
.map{position:relative;overflow:hidden;touch-action:none}
.map canvas,.map svg.ov{position:absolute;left:0;top:0}
.map .glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 55% 35%,rgba(255,190,130,.28),rgba(255,190,130,0) 70%),radial-gradient(45% 40% at 50% 85%,rgba(255,214,170,.2),rgba(255,214,170,0) 70%)}
.map.grabbing,.map.grabbing *{cursor:grabbing!important}
.ov .rhalo{fill:none;stroke:#fffdf9;stroke-width:6;stroke-linejoin:round;stroke-linecap:round;stroke-opacity:.9}
.ov .trunk{fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.ov .city{fill:#fffdf9;stroke:var(--navy);stroke-width:1.3}
.ov text{font-family:var(--sans);font-size:13px;font-weight:500;fill:#6b675f;paint-order:stroke;stroke:#f3efe7;stroke-width:4;stroke-linejoin:round}
.ov text.plt{font-family:var(--mono);font-weight:450;fill:var(--orange-ink);letter-spacing:.03em}
.ov .lead{stroke:#023247;stroke-width:1;stroke-opacity:.45;fill:none;transition:opacity .2s}
/* truck markers: road = navy dot, wait = amber, done = sea, stuck = orange + soft pulse, no GPS = dashed ring + ghost */
.trk{cursor:pointer;transition:opacity .22s var(--eo)}
.trk .pop{transform-origin:0 0;transition:transform .3s var(--eo)}
.trk:hover .pop,.trk.hot .pop{transform:scale(1.25)}
.trk .hit{fill:transparent}
.trk .trail{fill:none;stroke:var(--navy);stroke-width:2.6;stroke-linecap:round;stroke-opacity:.2}
.trk .halo2{fill:none;stroke:var(--navy);stroke-width:1.5;stroke-opacity:0;transition:stroke-opacity .2s}
.trk.sel .halo2,.trk.hot .halo2{stroke-opacity:.45}
.trk .pulse{fill:var(--orange);transform-box:fill-box;transform-origin:center;animation:m-pulse 2.6s var(--eo) infinite}
.trk .ghost{fill:none;stroke:var(--orange-ink);stroke-width:1.3;stroke-dasharray:2.5 2.5;transform-box:fill-box;transform-origin:center;animation:m-ghost 3s var(--eo) infinite}
.trk.handled .pulse{animation:none;opacity:0}
.trk .ping{fill:none;stroke:var(--sea-ink);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:m-ping .9s var(--eo) forwards}
@keyframes m-pulse{0%{transform:scale(1);opacity:.38}55%,100%{transform:scale(2.4);opacity:0}}
@keyframes m-ghost{0%{transform:scale(1);opacity:.6}55%,100%{transform:scale(2.2);opacity:0}}
@keyframes m-ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(4);opacity:0}}
.ov.hovering .trk:not(.hot){opacity:.2}
.ov.selecting .trk:not(.sel):not(.hot){opacity:.28}
.ov.selecting .trk:not(.sel) text.plt,.ov.hovering .trk:not(.hot) text.plt{opacity:0}
/* map tooltip: navy, data in sky mono */
.tooltip{position:absolute;z-index:7;pointer-events:none;background:var(--navy);color:#fff;border-radius:8px;padding:6px 10px 7px;font-size:13px;white-space:nowrap;
  opacity:0;transform:translate(-50%,calc(-100% - 14px)) scale(.96);transition:opacity .15s,transform .18s var(--eo)}
.tooltip.show{opacity:1;transform:translate(-50%,calc(-100% - 14px))}
.tooltip .m{font-family:var(--mono);font-size:12.5px;color:var(--sky);margin-right:6px}

/* ---------- 11. trip card (floats over the map, grows out of its marker) ---------- */
.tripcard{width:350px;border-radius:14px;overflow:hidden;background:var(--glass-thick);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--edge),var(--e3);will-change:transform,opacity}
.band{position:relative;height:116px;background:#4a2c1c;overflow:hidden}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,16,10,.45),rgba(30,16,10,.05) 55%,rgba(30,16,10,.25))}
.band .bid{position:absolute;left:16px;top:12px;z-index:1;font-family:var(--mono);font-size:12.5px;color:#fff;letter-spacing:.03em}
.band .bst{position:absolute;right:12px;bottom:12px;z-index:1;display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:6px;background:rgba(255,253,249,.93);font-size:13px;font-weight:600}
.band .x{position:absolute;right:10px;top:10px;z-index:1;width:30px;height:30px;border-radius:8px;background:rgba(255,253,249,.2);color:#fff;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.band .x:hover{background:rgba(255,253,249,.36)}
.cb{padding:0 22px 22px}
.tripcard .who{display:flex;gap:14px;align-items:flex-end}
.tripcard .face{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-top:-30px;border:3px solid #fffdf9;box-shadow:0 4px 12px rgba(30,20,10,.18);flex:none;position:relative;z-index:2;background:#e6ddcc}
.tripcard h3{font-size:27px;line-height:1.05;font-weight:460;letter-spacing:-.022em;color:var(--navy);padding-top:10px}
.tripcard .dn{margin-top:4px;font-size:14px;color:var(--text-glass);font-weight:500}
.tripcard .btn.wide{margin-top:14px;height:44px}

/* ---------- 12. timeline ---------- */
.tl{margin-top:18px;padding-top:12px;border-top:1px solid var(--line2)}
.tl-row{display:grid;grid-template-columns:16px 1fr auto;align-items:center;column-gap:8px;height:27px;font-size:13.5px;line-height:1.45;color:var(--slate)}
.tl-row .tm{font-family:var(--mono);font-size:12.5px;color:var(--sea-ink);letter-spacing:.02em}
.tl-row .tm s{color:var(--steel);margin-right:6px}
.tl-row .tm.late{color:var(--orange-ink);font-weight:500}
.tl-row .tm.muted{color:var(--steel)}
.pip{width:9px;height:9px;border-radius:50%;background:var(--navy);margin-left:3px;position:relative;z-index:1}
.pip.hold{background:var(--orange);box-shadow:0 0 0 3px rgba(236,101,43,.2)}
.pip.next{background:var(--paper);border:1.5px solid var(--navy)}
.tl-row:not(:last-child) .pip::after{content:"";position:absolute;left:3.5px;top:9px;width:1px;height:18px;background:var(--rail)}
.pip.next::after{left:2px!important;top:7.5px!important}

/* ---------- 13. tip line (one short colleague sentence) + suggested step ---------- */
.tipline{margin-top:14px;padding:10px 12px;border-radius:8px;background:var(--tint-note);display:grid;grid-template-columns:18px 1fr;gap:8px;font-size:13.5px;line-height:1.45;color:#3f3420}
.tipline svg.i{width:16px;height:16px;color:var(--amber-ink);margin-top:1px}
.sugg{margin-top:8px;display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:560;color:var(--navy);padding:4px 0}
.sugg:hover{transform:translateX(2px)}
.sugg svg.i{width:15px;height:15px}
.sugg.sent{color:var(--sea-ink);pointer-events:none}

/* ---------- 14. table ---------- */
.tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.tbl th{height:32px;text-align:left;font-family:var(--mono);font-size:12px;font-weight:400;color:var(--steel);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--line2);padding:0 12px;background:var(--paper)}
.tbl td{height:40px;padding:0 12px;border-bottom:1px solid var(--line2);font-size:14px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl th:first-child,.tbl td:first-child{padding-left:24px}
.tbl th:last-child,.tbl td:last-child{padding-right:20px}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .r{text-align:right}
.tbl tbody tr{cursor:pointer;transition:background-color .15s}
.tbl tbody tr:hover,.tbl tbody tr.hl{background:rgba(17,26,74,.035)}
.tbl tbody tr.sel{background:var(--tint-sel)}
.tbl td.id{font-family:var(--mono);font-size:13px;color:var(--sea-ink);letter-spacing:.02em}
.tbl td.pl{font-family:var(--mono);font-size:13px;color:var(--ink);letter-spacing:.02em}
.tbl td.num{font-family:var(--mono);font-size:13px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.tbl td.drv{color:var(--ink);--steel:#68645c;--fog:#a39d91;--line:#e3dccf;--line2:#eee8de}  /* .drv is also the driver phone class: keep the table tokens */
.tbl td.drv .w{display:flex;align-items:center;gap:9px}
.tbl td.drv .av{width:24px;height:24px}
.tbl .arr{color:var(--fog);margin:0 6px}
.tbl td.go{color:var(--fog);text-align:right}
.tbl td.go svg.i{width:16px;height:16px;vertical-align:middle;transition:transform .15s var(--eo)}
.tbl tbody tr:hover td.go svg.i{transform:translateX(3px);color:var(--navy)}
.tscroll{overflow:auto}
.tscroll th{position:sticky;top:0;z-index:1;transition:box-shadow .2s}
.tscroll.scrolled th{box-shadow:0 12px 14px -14px rgba(40,30,10,.35)}

/* ---------- 14b. table headings that sort and filter (Moovr.tableHead): one pattern for every table ----------
   Readable headings in the system type, sentence case; the whole heading is the button; a popover grows from it.
   Padding: th 2px + button 10px = the 12px of the cells (first column 14 + 10 = 24). */
.tbl.mvh th{height:44px;padding:0 2px;font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--slate);white-space:nowrap}
.tbl.mvh th:first-child{padding-left:14px}
.tbl.mvh th:last-child{padding-right:10px}
.tbl.mvh th.r{text-align:right}
.mv-hb{display:inline-flex;align-items:center;gap:5px;max-width:100%;height:30px;padding:0 10px;border-radius:7px;font-size:13.5px;font-weight:500;color:var(--slate);white-space:nowrap;
  transition:transform .24s var(--eo),background-color .15s,color .15s}
.mv-hb .l{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mv-hb:hover{background:var(--tint-hover);color:var(--navy)}
.mv-hb.on{color:var(--navy);font-weight:560}
.mv-hb.pressed{transform:scale(.96)!important}
.mv-hb:focus-visible{outline:2px solid var(--navy);outline-offset:0}
.mv-hb svg.i{width:14px;height:14px;flex:none}
/* label sorts, the arrow beside it filters (two buttons, one heading) */
.mv-hw{display:inline-flex;align-items:center;gap:0;max-width:100%;vertical-align:middle}
.mv-hb .mv-so{color:var(--navy)}
.mv-hb .mv-sh{color:var(--fog);opacity:0;transition:opacity .15s}
.mv-hb:hover .mv-sh,.mv-hb:focus-visible .mv-sh{opacity:1}
.mv-hf{display:inline-grid;place-items:center;min-width:24px;height:26px;padding:0 4px;border-radius:6px;color:var(--steel);
  transition:transform .24s var(--eo),background-color .15s,color .15s}
.mv-hf svg.i{width:14px;height:14px}
.mv-hf:hover{background:var(--tint-hover);color:var(--navy)}
.mv-hf[aria-expanded="true"]{background:var(--tint-on);color:var(--navy)}
.mv-hf.on{color:var(--navy)}
.mv-hf.pressed{transform:scale(.92)!important}
.mv-hf:focus-visible{outline:2px solid var(--navy);outline-offset:0}
.mv-hf .mv-fd{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--navy);letter-spacing:.02em}
.mv-hf .mv-fd i{width:6px;height:6px;border-radius:50%;background:var(--navy)}
.mv-hb{padding:0 6px 0 10px}
/* the same headings as a quiet row above Cards */
.mv-hbar{display:flex;align-items:center;gap:2px;height:46px;padding:0 12px 0 14px;border-bottom:1px solid var(--line2)}
.mv-hbar .lb{font-size:13.5px;color:var(--steel);margin:0 8px 0 10px}

/* the heading popover: paper, grows from the heading (scale + opacity on the open spring) */
.mv-tp{position:fixed;z-index:90;width:276px;max-height:560px;overflow-y:auto;padding:6px;background:var(--paper);border-radius:14px;
  box-shadow:0 2px 6px rgba(40,30,10,.06),0 30px 64px -20px rgba(30,24,40,.38),0 0 0 1px rgba(40,30,10,.07);
  font-size:14px;line-height:1.4;color:var(--ink);text-align:left;will-change:transform,opacity}
.mv-tp[hidden]{display:none}
.mv-tp-h{padding:8px 10px 4px;font-size:13px;font-weight:560;color:var(--steel)}
.mv-tp-sep{height:1px;background:var(--line2);margin:6px 4px}
.mv-tp-o{display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0 10px;border-radius:8px;font-size:14px;color:var(--slate);text-align:left;
  transition:background-color .15s,transform .24s var(--eo)}
.mv-tp-o:hover{background:var(--tint-hover)}
.mv-tp-o:focus-visible{outline:none;background:var(--tint-on);box-shadow:inset 0 0 0 1.5px var(--navy)}
.mv-tp-o .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-tp-o .c{font-family:var(--mono);font-size:12.5px;color:var(--steel);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.mv-tp-o .bx,.mv-tp-o .rd{width:16px;height:16px;flex:none;display:inline-flex;align-items:center;justify-content:center;transition:background-color .15s,border-color .15s}
.mv-tp-o .bx{border-radius:4px;border:1.5px solid var(--fog)}
.mv-tp-o .rd{border-radius:50%}
.mv-tp-o svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .15s}
.mv-tp-o .rd svg{width:16px;height:16px;stroke:var(--navy);stroke-width:2.2}
.mv-tp-o[aria-checked="true"]{color:var(--ink);font-weight:560}
.mv-tp-o[aria-checked="true"] .bx{background:var(--navy);border-color:var(--navy)}
.mv-tp-o[aria-checked="true"] svg{opacity:1}
.mv-tp-o[aria-checked="true"] .c{color:var(--navy)}
.mv-tp-list{max-height:238px;overflow-y:auto}
.mv-tp-none{padding:8px 10px;font-size:13.5px;color:var(--steel)}
.mv-tp .input{height:34px;font-size:14px}
.mv-tp-q{display:block;width:calc(100% - 8px);margin:2px 4px 6px}
.mv-tp-dr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;padding:2px 4px 0;font-size:13.5px;color:var(--steel)}
.mv-tp-dr .input{padding:0 8px;font-size:13px}
.mv-tp-dr.err .input{border-color:var(--orange-ink)}
.mv-tp-msg{display:flex;align-items:center;gap:6px;padding:6px 6px 0;font-size:13px;font-weight:560;color:var(--orange-ink)}
.mv-tp-msg[hidden]{display:none}
.mv-tp-msg svg.i{width:15px;height:15px}
.mv-tp-pre{display:flex;gap:2px;padding:6px 0 2px}
.mv-tp-p{height:30px;padding:0 10px;border-radius:7px;font-size:13.5px;font-weight:500;color:var(--navy);transition:background-color .15s,transform .24s var(--eo)}
.mv-tp-p:hover{background:var(--tint-hover)}
.mv-tp-p[aria-pressed="true"]{background:var(--tint-on);font-weight:560}
.mv-tp-f{display:flex;align-items:center;gap:8px;margin-top:6px;padding:6px 4px 2px 0;border-top:1px solid var(--line2)}
.mv-tp-f .btn:disabled{color:var(--fog);background:none;cursor:default}
.mv-tp-f .n{margin-left:auto;padding-right:8px;font-size:13px;color:var(--steel)}

/* active filters as removable chips above the table (Moovr.chipBar) */
.mv-chips{display:flex;align-items:center;gap:8px;height:48px;padding:0 16px 0 24px;border-bottom:1px solid var(--line2);overflow:hidden}
.mv-chips[hidden]{display:none}
.mv-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 3px 0 10px;border-radius:6px;background:var(--tint-on);font-size:13.5px;color:var(--ink);white-space:nowrap;flex:none}
.mv-chip .ck{color:var(--steel)}
.mv-chip .cx{width:24px;height:24px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;color:var(--slate)}
.mv-chip .cx:hover{background:var(--tint-hover);color:var(--navy)}
.mv-chip .cx svg.i{width:13px;height:13px}
.mv-chips .cr{margin-left:auto;display:flex;gap:6px;align-items:center;flex:none}
.mv-chips .input{height:32px;width:230px;font-size:14px}

/* ---------- 15. tabs + segmented control ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);height:44px;align-items:stretch}
.tab{display:flex;align-items:center;gap:8px;padding:0 12px;font-size:14.5px;color:var(--slate);position:relative;border-radius:8px 8px 0 0}
.tab:hover{color:var(--navy)}
.tab[aria-selected="true"]{color:var(--navy);font-weight:560}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--navy);border-radius:2px}
.tab .n{font-family:var(--mono);font-size:12px;color:var(--steel)}
.tab[aria-selected="true"] .n{color:var(--navy)}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:rgba(17,26,74,.05);position:relative}
.seg button{height:32px;padding:0 14px;border-radius:7px;font-size:13.5px;font-weight:500;color:var(--slate);position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px}
.seg button:hover{color:var(--navy)}
.seg button[aria-pressed="true"]{color:var(--navy);font-weight:560;background:var(--paper);box-shadow:0 1px 2px rgba(40,30,10,.08),0 0 0 1px rgba(17,26,74,.06)}

/* ---------- 16. form field, select, validation ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-size:13.5px;font-weight:560;color:var(--slate)}
.input,.select{height:40px;width:100%;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font-size:14.5px;color:var(--ink);outline:none;
  transition:border-color .15s,box-shadow .15s}
.input.mono{font-family:var(--mono);font-size:14px;letter-spacing:.02em}
.input::placeholder{color:var(--fog)}
.input:hover,.select:hover{border-color:#cfc6b6}
.input:focus,.select:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(17,26,74,.1)}
/* a select already shows its own navy ring on focus: no second outline ring around it (audit 2026-10-31) */
.select:focus-visible{outline:none}
.select{appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111a4a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center}
.field .help{font-size:13px;color:var(--steel)}
.field .msg{display:none;align-items:center;gap:6px;font-size:13px;font-weight:560;color:var(--orange-ink)}
.field .msg svg.i{width:15px;height:15px}
.field.err .input,.field.err .select{border-color:var(--orange-ink);box-shadow:0 0 0 3px rgba(236,101,43,.12)}
.field.err .msg{display:flex}
.field.err .help{display:none}
.field.ok .input{border-color:var(--sea)}

/* ---------- 17. dialog (confirm) + side panel ---------- */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(243,239,231,.55);opacity:0;pointer-events:none;transition:opacity .2s var(--eo)}
.scrim.show{opacity:1;pointer-events:auto}
.dialog{width:440px;background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--e3),0 0 0 1px rgba(40,30,10,.06);padding:24px}
.dialog h2,.dialog h3{font-size:22px;line-height:1.15;font-weight:480;letter-spacing:-.02em;color:var(--navy)}
.dialog p{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--slate)}
.dialog .actions{margin-top:22px;display:flex;justify-content:flex-end;gap:10px}
.sidepanel{width:420px;background:var(--glass-thick);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--edge),var(--e3);border-radius:var(--r-lg)}

/* ---------- 18. bottom sheet (drag by grab bar or header) ---------- */
.sheet{background:var(--paper);border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--e-sheet);will-change:transform}
.sheet .grab{width:40px;height:4px;border-radius:2px;background:#ddd5c6;box-sizing:content-box;padding:8px 60px;background-clip:content-box;margin:2px auto 0;cursor:grab;touch-action:none}
.sheet .ph{padding:0 24px;height:56px;cursor:grab;touch-action:none}
.sheet .ph h2{font-size:22px}
.sheet.dragging .grab,.sheet.dragging .ph{cursor:grabbing}

/* ---------- 19. toast with undo (one at a time, bottom center) ---------- */
.toast{position:fixed;left:50%;bottom:28px;z-index:60;display:flex;align-items:center;gap:12px;height:46px;padding:0 8px 0 14px;border-radius:10px;background:var(--navy);color:#fff;font-size:14px;
  box-shadow:var(--e-toast);opacity:0;transform:translate(-50%,14px);pointer-events:none;transition:opacity .16s,transform .16s}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto;transition:opacity .22s var(--eo),transform .3s var(--ex)}
.toast svg.i{color:var(--call)}
.toast .m{font-family:var(--mono);font-size:13px;color:var(--sky)}
.toast .undo{height:32px;padding:0 12px;border-radius:7px;color:var(--sky);font-weight:600;background:rgba(255,255,255,.08)}
.toast .undo:hover{background:rgba(255,255,255,.16)}
.toast .undo[hidden]{display:none}
.toast.solo{padding-right:16px}

/* ---------- 20. empty, loading, error ---------- */
.state{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px}
.state .say{font-size:15px;color:var(--slate);line-height:1.45}
.state .say b{color:var(--ink);font-weight:560}
.state svg.i{width:22px;height:22px;color:var(--fog)}
.state.error svg.i{color:var(--orange-ink)}
.state.error .say b{color:var(--orange-ink)}
.skel{display:block;height:12px;border-radius:6px;background:rgba(17,26,74,.07);animation:m-skel 1.6s ease-in-out infinite}
.skel + .skel{margin-top:10px}
@keyframes m-skel{50%{opacity:.45}}

/* ---------- 21. planning board ---------- */
.board{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.board .axis{display:grid;grid-template-columns:150px 1fr;height:36px;border-bottom:1px solid var(--line2)}
.board .ticks{position:relative}
.board .ticks span{position:absolute;top:10px;font-family:var(--mono);font-size:12px;color:var(--steel);transform:translateX(-50%)}
.board .lane{display:grid;grid-template-columns:150px 1fr;height:56px;border-bottom:1px solid var(--line2)}
.board .lane:last-child{border-bottom:0}
.board .lane > .lh{display:flex;flex-direction:column;justify-content:center;padding-left:20px;gap:1px}
.board .lane .pl{font-family:var(--mono);font-size:13px;color:var(--ink);letter-spacing:.02em}
.board .lane .dn{font-size:12.5px;color:var(--steel)}
.board .track{position:relative;background-image:linear-gradient(90deg,var(--line2) 1px,transparent 1px);background-size:calc(100% / 12) 100%}
.board .now{position:absolute;top:0;bottom:0;width:0;border-left:1.5px solid var(--navy);z-index:3;pointer-events:none}
.board .now b{position:absolute;top:8px;left:0;transform:translateX(-50%);font-family:var(--mono);font-size:11.5px;font-weight:500;color:#fff;background:var(--navy);border-radius:4px;padding:1px 5px}
.blk{position:absolute;top:9px;height:38px;border-radius:8px;padding:0 10px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;cursor:grab;white-space:nowrap;
  font-size:12.5px;line-height:1.25}
.blk .c{font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.blk .r{font-weight:560;overflow:hidden;text-overflow:ellipsis}
.blk.road{background:var(--navy);color:#fff}
.blk.road .c{color:var(--sky)}
.blk.planned{background:var(--paper);color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.blk.planned .c{color:var(--steel)}
.blk.wait{background:rgba(207,149,47,.16);color:#5a4a28;box-shadow:inset 0 0 0 1px rgba(207,149,47,.5)}
.blk.wait .c{color:var(--amber-ink)}
.blk.done{background:var(--tint-done);color:var(--sea-ink)}
.blk.stuck{background:var(--tint-stuck);color:var(--orange-ink);box-shadow:inset 0 0 0 1.5px var(--orange)}
.blk.shop{background:repeating-linear-gradient(135deg,rgba(163,157,145,.16) 0 6px,rgba(163,157,145,.05) 6px 12px);color:var(--steel);box-shadow:inset 0 0 0 1px var(--line)}
.blk.lift{box-shadow:var(--e1);z-index:4;cursor:grabbing}

/* ---------- 22. phone app: item + bottom tab bar (driver app, text >= 16 px) ---------- */
.phone{width:340px;height:700px;border-radius:44px;background:var(--parch);box-shadow:0 0 0 10px #1d1c1a,0 0 0 11px #3a3833,var(--e3);position:relative;overflow:hidden;font-size:16px}
.phone .bar{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-family:var(--mono);font-size:13px;color:var(--ink)}
.phone .scr{position:absolute;left:0;right:0;top:44px;bottom:76px;overflow:auto;padding:8px 16px 16px}
.p-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;min-height:72px;padding:14px 16px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.p-item + .p-item{margin-top:10px}
.p-item .t{font-size:17px;font-weight:600;color:var(--ink);line-height:1.3}
.p-item .s{margin-top:3px;font-size:15px;color:var(--slate)}
.p-item .c{font-family:var(--mono);font-size:14px;color:var(--navy);letter-spacing:.02em}
.p-item svg.i{color:var(--fog);width:20px;height:20px}
.p-next{width:100%;min-height:64px;border-radius:14px;background:var(--navy);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:18px;font-weight:600;box-shadow:var(--e-btn)}
.p-next small{font-size:14px;font-weight:450;color:rgba(255,255,255,.75)}
.tabbar{position:absolute;left:0;right:0;bottom:0;height:76px;padding:6px 8px 18px;display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(243,239,231,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;border-radius:10px;font-size:13px;font-weight:500;color:var(--steel);text-decoration:none;position:relative}
.tabbar a svg.i{width:24px;height:24px}
.tabbar a.on{color:var(--navy);font-weight:600}
.tabbar a .count{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;font-size:11px;padding:0 5px}

/* ---------- 23. entrances ---------- */
.rise{animation:m-rise .5s var(--ex) both}
@keyframes m-rise{from{opacity:0;transform:translateY(10px)}}

/* ---------- 25. driver phone shell (built by Moovr.phone) ----------
   Drivers work outdoors in sun, some do not read well, often with gloves. Rules (DESIGN.md "Driver phone"):
   - ONE spacing scale: 4 / 8 / 12 / 16 / 24 (32 for big breaks). Side padding 20.
     Label to its control 8, related controls 12, groups 24.
   - icons carry the meaning: report tiles 44 px icon on top, rows 28 to 32 px icon in one leading slot
   - green = confirm; navy = go somewhere; red = stop / emergency; orange is a STATUS color only
   - every target at least 56 x 56; tiles 96, rows 64, docked button 68; 12 px between targets
   - one header row: back + title + calm sync chip; the chip is the only place that says signal state
   - the dock is an action group: stop (red, 56) right above the main action (68), 12 apart
   - tracking and leading are size-specific (title tighter, body 0, small slightly open) */
.drv{--steel:#55524a;--fog:#8a8478;--line:#d6ccbb;--line2:#e4dccd;
  --d-s1:4px;--d-s2:8px;--d-s3:12px;--d-s4:16px;--d-s5:24px;--d-s6:32px;--d-side:20px;
  --d-body:17px;--d-small:15px;--d-title:26px;--d-title-s:19px;
  --d-tr-title:-.022em;--d-tr-title-s:-.012em;--d-tr-btn:-.01em;--d-tr-body:0;--d-tr-small:.006em;--d-tr-label:.08em;
  --d-lh-title:1.12;--d-lh-title-s:1.2;--d-lh-body:1.4;--d-lh-small:1.38;
  --d-target:56px;--d-row:64px;--d-tile:96px;--d-next:68px;--d-gap:12px;
  --d-icon-xl:44px;--d-icon-l:32px;--d-icon-m:28px;
  --d-go:#1f7a45;--d-go-hover:#186637;--d-go-ink:#1a6b3c;--d-go-tint:rgba(31,122,69,.1);
  --d-stop:#c0362c;--d-stop-hover:#a52c23;
  font-size:var(--d-body);line-height:var(--d-lh-body);letter-spacing:var(--d-tr-body);color:var(--ink)}
.drv svg.i{stroke-width:1.8}
.drv small,.drv .d-small{letter-spacing:var(--d-tr-small);line-height:var(--d-lh-small)}
.dphone{position:relative;width:390px;height:844px;border-radius:50px;background:var(--parch);overflow:hidden;flex:none;
  box-shadow:0 0 0 10px #1d1c1a,0 0 0 11px #3a3833,var(--e3)}
.d-status{position:absolute;left:0;right:0;top:0;height:50px;z-index:6;display:flex;align-items:center;justify-content:space-between;padding:0 32px;
  font-family:var(--mono);font-size:15px;font-weight:500;color:var(--ink)}
.d-status .sig{display:flex;gap:7px;align-items:center}
.d-status .bars{display:flex;gap:2px;align-items:flex-end;height:12px}
.d-status .bars i{width:3px;border-radius:1px;background:var(--ink);transition:opacity .2s}
.d-status .bars i.off{opacity:.2}

/* header: ONE row. With back: back + inline title + chip (56). Without back: large title + chip (64). */
.d-top{position:absolute;left:0;right:0;top:50px;height:56px;z-index:6;display:flex;align-items:center;gap:var(--d-s2);padding:0 var(--d-s4) 0 var(--d-s1);
  background:rgba(243,239,231,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:box-shadow .2s}
.dphone.t-large .d-top{height:64px;padding-left:var(--d-side)}
.dphone.scrolled .d-top{box-shadow:0 10px 14px -12px rgba(40,30,10,.3)}
.d-top-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--navy);
  font-size:var(--d-title-s);font-weight:600;letter-spacing:var(--d-tr-title-s);line-height:var(--d-lh-title-s)}
.dphone.t-large .d-top-title{font-size:var(--d-title);font-weight:480;letter-spacing:var(--d-tr-title);line-height:var(--d-lh-title)}
.d-top-title:empty{visibility:hidden}
.dphone.t-large .d-top-title.fit1{font-size:22px;letter-spacing:-.018em}
.d-top-title.fit2,.dphone.t-large .d-top-title.fit2{font-size:var(--d-title-s);font-weight:600;letter-spacing:var(--d-tr-title-s);line-height:var(--d-lh-title-s)}
.d-back{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--navy);flex:none}
.d-back:hover{background:var(--tint-hover)}
.d-back svg.i{width:var(--d-icon-m);height:var(--d-icon-m);stroke-width:2.2}
.d-back[hidden]{display:none}
/* sync chip: calm when fine (no box), amber with the count when waiting; the ONLY place that says signal state */
.d-sync{position:relative;margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 var(--d-s2);border-radius:12px;flex:none;white-space:nowrap;
  font-size:15px;font-weight:600;letter-spacing:var(--d-tr-small);background:none;border:1.5px solid transparent;color:var(--d-go-ink)}
.d-sync::before{content:"";position:absolute;inset:-8px -4px}
.d-sync.online,.d-sync.sending{padding:0 6px}
/* the icon's words: a light bubble under it, pointing at it; plain text, nothing to press */
.d-sync-tip{position:absolute;z-index:40;max-width:250px;padding:10px 14px;border-radius:14px;background:var(--paper);color:var(--ink);
  font-size:15px;font-weight:500;line-height:1.35;box-shadow:0 0 0 1px rgba(40,30,10,.08),0 12px 28px -12px rgba(40,30,10,.4);
  animation:d-tip-in .18s cubic-bezier(.25,1,.5,1);pointer-events:none}
.d-sync-tip[hidden]{display:none}
.d-sync-tip.online{--tip-bg:#e3f4ec;color:var(--sea-ink);font-weight:600}
.d-sync-tip.offline{--tip-bg:#fbefd6;color:var(--amber-ink);font-weight:600}
.d-sync-tip.online,.d-sync-tip.offline,.d-sync-tip.online::before,.d-sync-tip.offline::before{background:var(--tip-bg)}
.d-sync-tip::before{content:"";position:absolute;top:-6px;right:calc(var(--tip-x, 18px) - 6px);width:12px;height:12px;background:var(--paper);
  transform:rotate(45deg);box-shadow:-1px -1px 0 rgba(40,30,10,.08)}
@keyframes d-tip-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.d-sync-tip{animation:none}}
.d-sync svg.i{width:22px;height:22px}
.d-sync.offline{background:rgba(207,149,47,.16);border-color:rgba(207,149,47,.75);color:var(--amber-ink);padding:0 10px}
.d-sync-n{font-family:var(--mono);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.d-sync.sending{color:var(--navy)}
.d-spin{width:18px;height:18px;border-radius:50%;border:2.4px solid rgba(17,26,74,.2);border-top-color:var(--navy);animation:d-spin .8s linear infinite;flex:none}
@keyframes d-spin{to{transform:rotate(360deg)}}

/* scroll area: between the header and the dock (or tab bar); Moovr.phone sets top and bottom */
.d-scr{position:absolute;left:0;right:0;top:106px;bottom:88px;overflow:auto;padding:var(--d-s2) var(--d-side) var(--d-s4);scrollbar-width:none}
.dphone.t-large .d-scr{top:114px}
.d-scr::-webkit-scrollbar{display:none}
.dphone.has-dock .d-scr{bottom:180px;padding-bottom:var(--d-s4)}
/* legacy in-content title (screens that write their own); the shell puts the title in the header */
.d-title{font-size:var(--d-title);line-height:var(--d-lh-title);font-weight:480;letter-spacing:var(--d-tr-title);color:var(--navy)}
.d-sub{font-size:var(--d-small);color:var(--steel);letter-spacing:var(--d-tr-small);line-height:var(--d-lh-small)}
.d-title + .d-sub{margin-top:var(--d-s1)}
.d-title + :not(.d-sub),.d-sub + *{margin-top:var(--d-s5)}
.d-sub .mono{font-size:15px;color:var(--navy)}
.d-label{font-family:var(--mono);font-size:13px;letter-spacing:var(--d-tr-label);text-transform:uppercase;color:var(--steel);margin:var(--d-s5) 0 var(--d-s2);line-height:1.3}
.d-scr > .d-label:first-child,.d-view > .d-label:first-child{margin-top:0}
.d-text{font-size:var(--d-body);color:var(--slate);line-height:1.45}
/* spacing helpers: related things 12 apart, groups 24 apart */
.d-stack > * + *{margin-top:var(--d-s3)}
.d-stack.l > * + *{margin-top:var(--d-s5)}
.d-group{margin-top:var(--d-s5)}
.d-scr > .d-group:first-child,.d-view > .d-group:first-child{margin-top:0}
/* leading icon slot used by rows, steps, choices, dropdown rows, toasts: same size everywhere */
.d-ic{width:var(--d-icon-l);height:var(--d-icon-l);flex:none;display:flex;align-items:center;justify-content:center;color:var(--navy)}
.d-ic svg.i{width:var(--d-icon-l);height:var(--d-icon-l)}

/* views inside one phone (Moovr.phone: api.view / api.back) */
.d-view[hidden]{display:none}
.d-view.moving{position:absolute;left:var(--d-side);right:var(--d-side);will-change:transform,opacity}

/* the dock: a solid band from its top to the tab bar; the scroll area ends above it (Moovr.phone measures it).
   It holds an ACTION GROUP: optional stop (red, 56) right above the main action (68), 12 px apart. */
.d-dock{position:absolute;left:0;right:0;bottom:88px;z-index:5;padding:var(--d-s3) var(--d-side);background:var(--parch);display:flex;flex-direction:column;gap:var(--d-s3)}
.d-dock::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:12px;pointer-events:none;background:linear-gradient(180deg,rgba(243,239,231,0),var(--parch))}
.d-dock:empty,.d-dock.empty{display:none}
.d-dock-group{display:flex;flex-direction:column;gap:var(--d-s3)}
.d-dock-group > [hidden]{display:none!important}
.d-dock-group.row{flex-direction:row}
.d-dock-group.row > .d-btn{flex:1}
.d-dock-group.row > .d-next{flex:2}
.d-dock .d-btn{min-height:var(--d-target)}
/* the one big docked button. Default green (it confirms); .nav navy (only goes somewhere); .stop / .sos red */
.d-next{width:100%;min-height:var(--d-next);border-radius:16px;background:var(--d-go);color:#fff;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--d-s3);
  padding:var(--d-s2) var(--d-s4);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(10,60,30,.2),0 10px 24px -12px rgba(10,70,35,.6)}
.d-next > span{display:flex;flex-direction:column;align-items:center;gap:2px}
.d-next:not(:has(> span)){flex-direction:column;gap:2px}
.d-next svg.i{width:var(--d-icon-m);height:var(--d-icon-m);stroke-width:2.2;flex:none}
.d-next b{font-size:19px;font-weight:650;letter-spacing:var(--d-tr-btn);line-height:1.2}
.d-next small{font-size:15px;font-weight:500;color:rgba(255,255,255,.9)}
.d-next:hover{background:var(--d-go-hover)}
.d-next.go{background:var(--d-go)}
.d-next.nav{background:var(--navy);box-shadow:var(--e-btn),0 10px 24px -12px rgba(17,26,74,.6)}
.d-next.nav:hover{background:var(--navy-hover)}
.d-next.stop,.d-next.sos{background:var(--d-stop);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(120,20,10,.2),0 10px 24px -12px rgba(150,30,20,.6)}
.d-next.stop:hover,.d-next.sos:hover{background:var(--d-stop-hover)}
.d-next:disabled{opacity:.45}
/* buttons: still real 56 px buttons (no text links) */
.d-btn{min-height:var(--d-target);min-width:var(--d-target);border-radius:14px;padding:0 var(--d-s4);display:inline-flex;align-items:center;justify-content:center;gap:var(--d-s2);
  font-size:var(--d-body);font-weight:600;letter-spacing:var(--d-tr-btn);color:var(--navy);background:var(--paper);border:2px solid var(--navy)}
.d-btn svg.i{width:var(--d-icon-m);height:var(--d-icon-m)}
.d-btn.wide{width:100%}
.d-btn.quiet{border-color:transparent;background:none}
.d-btn.go{background:var(--d-go);border-color:var(--d-go);color:#fff}
.d-btn.go:hover{background:var(--d-go-hover)}
.d-btn.nav{background:var(--navy);border-color:var(--navy);color:#fff}
.d-btn.stop,.d-btn.sos{background:var(--d-stop);border-color:var(--d-stop);color:#fff}
.d-btn.stop:hover,.d-btn.sos:hover{background:var(--d-stop-hover);border-color:var(--d-stop-hover)}
.d-btns{display:flex;flex-wrap:wrap;gap:var(--d-gap)}
.d-btns > .d-btn{flex:1}
/* report tiles: 2 columns, big icon on top, word below */
.d-tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--d-gap)}
.d-tile{min-height:var(--d-tile);border-radius:16px;background:var(--paper);border:1.5px solid var(--line);padding:var(--d-s3) var(--d-s2);display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:var(--d-s2);text-align:center;color:var(--ink)}
.d-tile svg.i{width:var(--d-icon-xl);height:var(--d-icon-xl);color:var(--navy);stroke-width:1.6}
.d-tile b{font-size:var(--d-body);font-weight:650;display:block;line-height:1.2}
.d-tile small{display:block;font-size:var(--d-small);color:var(--steel);margin-top:2px}
/* choice tiles (pick one) */
.d-choices{display:grid;grid-template-columns:1fr 1fr;gap:var(--d-gap)}
.d-choices.three{grid-template-columns:1fr 1fr 1fr}
.d-choices.one{grid-template-columns:1fr}
.d-choice{min-height:80px;border-radius:16px;background:var(--paper);border:1.5px solid var(--line);padding:var(--d-s3) var(--d-s2);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--d-s1);text-align:center;font-size:var(--d-body);font-weight:600;line-height:1.2;color:var(--ink);position:relative}
.d-choice svg.i{width:var(--d-icon-l);height:var(--d-icon-l);color:var(--navy)}
.d-choice small{font-size:var(--d-small);font-weight:450;color:var(--steel)}
.d-choice[aria-pressed="true"],.d-choice.on{border:2px solid var(--navy);box-shadow:0 0 0 3px rgba(17,26,74,.1);background:#fff}
.d-choice[aria-pressed="true"]::after,.d-choice.on::after{content:"";position:absolute;top:var(--d-s2);right:var(--d-s2);width:20px;height:20px;border-radius:50%;
  background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 10.3 2.8 2.8 5.6-5.8'/%3E%3C/svg%3E") center/20px no-repeat}
/* list rows: leading icon slot, words, right side; 64 px */
.d-rows{display:flex;flex-direction:column;gap:var(--d-gap)}
.d-row{min-height:var(--d-row);border-radius:16px;background:var(--paper);border:1.5px solid var(--line);display:grid;grid-template-columns:var(--d-icon-l) 1fr auto;align-items:center;column-gap:var(--d-s3);
  padding:var(--d-s2) var(--d-s4);text-align:left;color:var(--ink);font-size:var(--d-body);width:100%}
.d-row > svg.i{width:var(--d-icon-l);height:var(--d-icon-l);color:var(--navy)}
.d-row b{display:block;font-weight:600;line-height:1.25}
.d-row small{display:block;font-size:var(--d-small);color:var(--steel)}
.d-row .tm{font-family:var(--mono);font-size:15px;color:var(--navy)}
.d-row .chev{width:var(--d-icon-m);height:var(--d-icon-m);color:var(--fog)}
.d-row.done > svg.i:first-child{color:var(--d-go-ink)}
.d-row.alert > svg.i:first-child{color:var(--orange-ink)}
.d-row[aria-pressed="true"]{border:2px solid var(--navy);box-shadow:0 0 0 3px rgba(17,26,74,.1);background:#fff}
/* step rows: done / now / next on one rail, 32 px markers */
.d-steps{position:relative}
.d-steps::before{content:"";position:absolute;left:31px;top:32px;bottom:32px;width:2px;background:var(--line);border-radius:1px}
.d-step{position:relative;display:grid;grid-template-columns:var(--d-icon-l) 1fr auto;align-items:center;column-gap:var(--d-s3);min-height:var(--d-row);padding:var(--d-s2) var(--d-s4);border-radius:16px;
  font-size:var(--d-body);color:var(--slate)}
.d-step .tm{font-family:var(--mono);font-size:15px;color:var(--d-go-ink);letter-spacing:.02em}
.d-step small{display:block;font-size:var(--d-small);color:var(--steel);margin-top:2px}
.d-mk{width:var(--d-icon-l);height:var(--d-icon-l);border-radius:50%;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;background:var(--parch);color:var(--navy)}
.d-mk svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.d-mk svg.i{width:20px;height:20px;stroke-width:2}
.d-step.done .d-mk{background:var(--d-go);color:#fff}
.d-step.now{background:var(--paper);box-shadow:inset 0 0 0 2px var(--navy);color:var(--ink);font-weight:600;min-height:72px}
.d-step.now .d-mk{background:var(--navy);color:#fff;box-shadow:0 0 0 5px rgba(17,26,74,.14)}
.d-step.now .d-mk:empty::after{content:"";width:10px;height:10px;border-radius:50%;background:#fff}
.d-step.now small{font-weight:450}
.d-step.now .tm{color:var(--orange-ink);font-weight:500}
.d-step.next .d-mk{border:2.5px solid var(--navy);background:var(--paper)}
.d-step.next{color:var(--steel)}
/* text field with a mic: speech fills the box, the box stays editable */
.d-field{display:flex;flex-direction:column;gap:var(--d-s2)}
.d-field > label{font-size:var(--d-small);font-weight:600;color:var(--slate);letter-spacing:var(--d-tr-small)}
.d-in{display:flex;align-items:flex-start;gap:var(--d-s2);min-height:60px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);padding:2px 2px 2px var(--d-s4);
  transition:border-color .15s,box-shadow .15s}
.d-in:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(17,26,74,.12)}
.d-in input,.d-in textarea{flex:1;min-width:0;border:0;outline:none;background:none;font-size:var(--d-body);color:var(--ink);padding:16px 0;resize:none;line-height:1.4;font-family:inherit}
.d-in input::placeholder,.d-in textarea::placeholder{color:var(--fog)}
.d-mic{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--navy);background:rgba(17,26,74,.07);flex:none;position:relative}
.d-mic svg.i{width:var(--d-icon-m);height:var(--d-icon-m)}
.d-mic.rec{background:var(--navy);color:#fff}
.d-mic.rec::after{content:"";position:absolute;inset:-4px;border-radius:14px;border:2px solid var(--navy);opacity:.4;animation:m-blink 1.2s ease-in-out infinite}
.d-field .d-hint{font-size:var(--d-small);color:var(--steel)}
.d-field.err .d-in{border-color:var(--orange-ink);box-shadow:0 0 0 3px rgba(236,101,43,.14)}
.d-field .d-msg{display:none;font-size:var(--d-small);font-weight:600;color:var(--orange-ink)}
.d-field.err .d-msg{display:block}
/* photo slot */
.d-photo{width:100%;min-height:112px;border-radius:16px;border:2px dashed #bdb19b;background:rgba(255,253,249,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--d-s1);
  color:var(--navy);position:relative;overflow:hidden;padding:var(--d-s3)}
.d-photo svg.i{width:var(--d-icon-l);height:var(--d-icon-l);margin-bottom:var(--d-s1)}
.d-photo b{font-size:var(--d-body);font-weight:600}
.d-photo small{font-size:var(--d-small);color:var(--steel)}
.d-photo.has{border:0;background:#2b2a27 center/cover no-repeat;min-height:160px;justify-content:flex-end;align-items:stretch;padding:var(--d-s2)}
.d-photo.has > *{display:none}
.d-photo.has .d-ph-bar{display:flex}
.d-ph-bar{display:none;align-items:center;justify-content:space-between;gap:var(--d-gap)}
.d-ph-bar span{display:inline-flex;align-items:center;gap:var(--d-s2);min-height:56px;padding:0 var(--d-s4);border-radius:12px;background:rgba(255,253,249,.95);font-size:16px;font-weight:600;color:var(--d-go-ink)}
.d-ph-bar span svg.i{width:var(--d-icon-m);height:var(--d-icon-m)}
.d-ph-bar span.re{color:var(--navy);min-width:56px}
/* searchable dropdown (long lists: fuel stations, currencies) */
.d-dd{position:relative}
.d-dd-label{font-size:var(--d-small);font-weight:600;color:var(--slate);margin-bottom:var(--d-s2);letter-spacing:var(--d-tr-small)}
.d-dd-btn{width:100%;min-height:60px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:var(--d-s3);
  padding:6px var(--d-s4);text-align:left}
.d-dd-btn.has-ic{grid-template-columns:var(--d-icon-l) 1fr auto}
.d-dd-btn .v{font-size:var(--d-body);font-weight:600;color:var(--ink);line-height:1.25}
.d-dd-btn .s{display:block;font-size:var(--d-small);color:var(--steel);font-weight:450;letter-spacing:var(--d-tr-small)}
.d-dd-btn .s em,.d-dd-list li small em{font-style:normal;color:var(--d-go-ink);font-weight:600}
.d-dd-btn > svg.i{width:var(--d-icon-m);height:var(--d-icon-m);color:var(--navy);transition:transform .24s var(--eo)}
.d-dd.open .d-dd-btn{border-color:var(--navy);box-shadow:0 0 0 3px rgba(17,26,74,.12)}
.d-dd.open .d-dd-btn > svg.i:last-child{transform:rotate(180deg)}
.d-dd-panel{margin-top:var(--d-s2);border:1.5px solid var(--line);border-radius:14px;background:var(--paper);overflow:hidden;box-shadow:var(--e1)}
.d-dd-panel[hidden]{display:none}
.d-dd-search{display:flex;align-items:center;gap:var(--d-s3);min-height:56px;padding:0 var(--d-s4);border-bottom:1.5px solid var(--line2);color:var(--steel)}
.d-dd-search svg.i{width:var(--d-icon-m);height:var(--d-icon-m)}
.d-dd-search input{flex:1;min-width:0;border:0;outline:none;background:none;font-size:var(--d-body);color:var(--ink)}
.d-dd-list{list-style:none;max-height:256px;overflow:auto}
.d-dd-list li{min-height:var(--d-row);display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:var(--d-s3);padding:var(--d-s2) var(--d-s4);border-bottom:1px solid var(--line2);cursor:pointer;font-size:var(--d-body)}
.d-dd-list li.has-ic{grid-template-columns:var(--d-icon-l) 1fr auto}
.d-dd-list li:last-child{border-bottom:0}
.d-dd-list li:hover{background:var(--tint-hover)}
.d-dd-list li small{display:block;font-size:var(--d-small);color:var(--steel);font-weight:450}
.d-dd-list li > svg.i{width:var(--d-icon-m);height:var(--d-icon-m);color:var(--navy)}
.d-dd-list li > svg.i.ck{visibility:hidden;color:var(--d-go-ink)}
.d-dd-list li[aria-selected="true"]{font-weight:600}
.d-dd-list li[aria-selected="true"] > svg.i.ck{visibility:visible}
.d-dd-none{padding:var(--d-s4);font-size:var(--d-small);color:var(--steel)}
/* sheet inside the phone (api.sheet): rises from the bottom, drags 1:1, flick spring 0.8 / 0.3 */
.d-scrim{position:absolute;inset:0;z-index:9;background:rgba(243,239,231,.6);opacity:0;pointer-events:none}
.d-sheet{position:absolute;left:0;right:0;bottom:0;z-index:10;background:var(--paper);border-radius:22px 22px 0 0;box-shadow:var(--e-sheet);
  padding:0 var(--d-side) var(--d-s6);visibility:hidden;will-change:transform}
.d-sheet .grab{width:40px;height:5px;border-radius:3px;background:#d4cab8;box-sizing:content-box;padding:var(--d-s2) 60px var(--d-s3);background-clip:content-box;margin:0 auto;display:block;cursor:grab;touch-action:none}
.d-sheet .sh-h{display:flex;align-items:center;gap:var(--d-s2);min-height:44px;cursor:grab;touch-action:none}
.d-sheet .sh-h h2{flex:1;font-size:22px;font-weight:500;letter-spacing:-.018em;line-height:1.15;color:var(--navy)}
.d-sheet .sh-x{width:56px;height:56px;margin-right:-12px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--slate)}
.d-sheet .sh-x svg.i{width:var(--d-icon-m);height:var(--d-icon-m)}
.d-sheet .sh-b{margin-top:var(--d-s3)}
.d-sheet .sh-f{margin-top:var(--d-s5);display:flex;flex-direction:column;gap:var(--d-s3)}
.dphone.sheet-open .d-sheet{visibility:visible}

/* real map (Moovr.realMap, Leaflet + Esri street tiles). Real roads and towns; tiles warmed toward
   the parchment palette; route, markers and labels in Moovr colors and fonts. */
.d-map{position:relative;z-index:0;isolation:isolate;height:380px;border-radius:16px;overflow:hidden;background:#ebe5d8;border:1.5px solid var(--line)}
.d-map.mini{height:240px}
.d-map.tall{height:480px}
.d-map.mv-map{font-family:var(--sans);background:#ebe5d8}
/* MapLibre: quiet attribution (i button), our zoom buttons, markers above labels */
/* the Moovr font on every map, also over MapLibre's own Helvetica rule (.maplibregl-map), so chips and labels never fall back (audit 2026-10-31) */
.mv-map,.mv-map.maplibregl-map{font-family:var(--sans)}
.mv-map .maplibregl-ctrl-attrib{font:11px/1.4 var(--sans);background:rgba(255,253,249,.86);color:var(--steel)}
.mv-map .maplibregl-ctrl-attrib a{color:var(--steel)}
.mv-map .maplibregl-ctrl-group{border-radius:10px;box-shadow:0 1px 3px rgba(40,30,10,.18)}
.mv-map .maplibregl-ctrl-group button{width:40px;height:40px}
.mv-map .maplibregl-marker{pointer-events:none}
.mv-mk{position:relative;width:0;height:0}
.mv-dot{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2.5px solid var(--navy);box-sizing:border-box;z-index:1}
.mv-mk.done .mv-dot{background:var(--sea);border:2.5px solid #fff;box-shadow:0 1px 3px rgba(20,40,30,.35)}
.mv-mk.stuck .mv-dot,.mv-mk.you .mv-dot{left:-11px;top:-11px;width:22px;height:22px;border:3px solid #fff;box-shadow:0 2px 6px rgba(17,26,74,.4)}
.mv-mk.you .mv-dot{background:var(--navy)}
.mv-mk.stuck .mv-dot{background:var(--orange)}
.mv-mk.you::before,.mv-mk.stuck::before{content:"";position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;background:var(--navy);animation:mv-pulse 2.6s var(--eo) infinite}
.mv-mk.stuck::before{background:var(--orange)}
@keyframes mv-pulse{0%{transform:scale(1);opacity:.32}60%,100%{transform:scale(3);opacity:0}}
.mv-lbl{position:absolute;left:14px;top:-13px;white-space:nowrap;font:600 14px/1.25 var(--sans);color:var(--ink);background:rgba(255,253,249,.94);padding:3px 8px;border-radius:7px;
  box-shadow:0 1px 3px rgba(40,30,10,.18);z-index:2}
.mv-lbl.l{left:auto;right:14px}
.mv-mk.you .mv-lbl,.mv-mk.stuck .mv-lbl{left:18px;top:-14px;background:var(--navy);color:#fff}
.mv-mk.stuck .mv-lbl{background:var(--orange-ink)}
.mv-mk.you .mv-lbl.l,.mv-mk.stuck .mv-lbl.l{left:auto;right:18px}
.d-map .state{position:absolute;inset:0;justify-content:center}
.d-map-tag{position:absolute;left:var(--d-s2);top:var(--d-s2);z-index:1000;display:inline-flex;align-items:center;gap:var(--d-s2);min-height:40px;padding:0 var(--d-s3);border-radius:10px;background:rgba(255,253,249,.94);
  box-shadow:0 1px 3px rgba(40,30,10,.18);font-size:15px;font-weight:600;color:var(--navy);pointer-events:none}
.d-map-tag svg.i{width:22px;height:22px}
.d-map-tag .mono{font-size:14px;color:var(--ink)}

/* driver tab bar: 4 items, icon + word, 56 px targets, 12 px apart (icons stay normal size here) */
.d-tabs{position:absolute;left:0;right:0;bottom:0;height:88px;z-index:6;padding:6px var(--d-s3) var(--d-s5);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--d-gap);
  background:rgba(243,239,231,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1.5px solid var(--line)}
.d-tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--d-target);border-radius:14px;text-decoration:none;
  font-size:15px;font-weight:500;letter-spacing:var(--d-tr-small);color:var(--steel);position:relative}
.d-tabs a svg.i{width:26px;height:26px}
.d-tabs a.on{color:var(--navy);font-weight:650;background:rgba(17,26,74,.08)}
.d-tabs a.on svg.i{stroke-width:2.1}
.d-tabs a .count{position:absolute;top:3px;left:calc(50% + 7px);min-width:20px;height:20px;font-size:12px;box-shadow:0 0 0 2px var(--parch)}
/* toast inside the phone (done, saved, undo); sits above the dock */
.d-toast{position:absolute;left:var(--d-s3);right:var(--d-s3);bottom:100px;z-index:8;min-height:60px;border-radius:16px;background:var(--navy);color:#fff;display:flex;align-items:center;gap:var(--d-s3);
  padding:var(--d-s1) var(--d-s1) var(--d-s1) var(--d-s4);font-size:17px;font-weight:500;line-height:1.3;box-shadow:var(--e-toast);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .16s,transform .16s}
.dphone.has-dock .d-toast{bottom:190px}
.d-toast.show{opacity:1;transform:none;pointer-events:auto;transition:opacity .22s var(--eo),transform .3s var(--ex)}
.d-toast svg.i{width:var(--d-icon-m);height:var(--d-icon-m);color:#7fe0a6;flex:none}
.d-toast .m{font-family:var(--mono);font-size:15px;color:var(--sky)}
.d-toast .undo{margin-left:auto;min-height:56px;min-width:72px;padding:0 var(--d-s4);border-radius:12px;color:var(--sky);font-weight:650;background:rgba(255,255,255,.1);flex:none}
.d-toast .undo[hidden]{display:none}
/* press feedback for driver controls (classes added by Moovr.press) */
.d-next,.d-btn,.d-tile,.d-choice,.d-row,.d-back,.d-sync,.d-tabs a,.d-photo,.d-dd-btn,.d-mic,.d-view-link{transition:transform .24s var(--eo),background-color .15s,box-shadow .15s,opacity .2s}
.d-tile.pressed,.d-choice.pressed,.d-row.pressed,.d-photo.pressed,.d-dd-btn.pressed,.d-view-link.pressed{transform:scale(.97)!important}

/* ---------- 24. accessibility fallbacks ---------- */
@media (prefers-reduced-transparency: reduce){
  .glass,.glass.thick,.glass-chip,.tripcard,.sidepanel,.top,.tabbar,.d-top,.d-tabs,.secs{background:var(--paper)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
@media (prefers-contrast: more){
  .glass,.glass.thick,.tripcard,.sidepanel,.sheet,.dialog{background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:0 0 0 1.5px var(--slate)!important}
  .item .det,.t-small,.ph .sub,.tripcard .dn,.ov text,.tbl th{color:var(--slate)!important;fill:var(--slate)!important}
  .btn.secondary{border-width:2px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition-duration:1ms!important;transition-delay:0s!important}
  .tripcard,.sheet,.scrim,.toast,.d-toast{transition:opacity .2s ease!important}
  .d-spin{animation:none!important;border-color:var(--navy)}
  .mv-mk.you::before,.mv-mk.stuck::before{display:none}
}

/* handset: a driver page opened on a real phone shows its first phone full screen, no frame; the drawn status bar
   sits above the top edge because the phone shows its own (Moovr.phone adds .mv-hs and html.mv-handset) */
html.mv-handset,html.mv-handset body{width:100%!important;height:100%!important;min-width:0!important;overflow:hidden!important;background:var(--parch)}
html.mv-handset .dphone:not(.mv-hs){display:none!important}
html.mv-handset .a-no,html.mv-handset .sn,html.mv-handset .secno{display:none!important}
html.mv-handset .fit:not(:has(.mv-hs)),html.mv-handset .slot:not(:has(.mv-hs)){display:none!important}
html.mv-handset .stage,html.mv-handset .a-stage{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important;gap:0!important}
.dphone.mv-hs{position:fixed!important;left:0!important;top:-50px!important;width:100vw!important;height:calc(100dvh + 50px)!important;margin:0!important;
  border-radius:0!important;box-shadow:none!important;transform:none!important;zoom:1!important;z-index:2147483000}

/* driver app in the office language (Goni 2026-10-30): the Today glass instead of a white box with a hard frame.
   No warm corner, no decoration: the surface, a soft shadow, a hairline you feel more than see. */
.drv{--d-glass:linear-gradient(180deg,rgba(255,253,249,.94),rgba(255,253,249,.80));
  --d-glass-sh:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(40,30,10,.06),0 1px 2px rgba(40,30,10,.05),0 14px 30px -20px rgba(40,30,10,.34)}
.drv .d-row,.drv .d-tile,.drv .d-choice,.drv .d-dd-btn{background:var(--d-glass);border-color:transparent;box-shadow:var(--d-glass-sh)}
.drv .d-step.now{background:var(--d-glass);box-shadow:inset 0 0 0 2px var(--navy),0 14px 30px -20px rgba(40,30,10,.34)}
.drv .d-choice[aria-pressed=true],.drv .d-choice.on{box-shadow:inset 0 0 0 2.5px var(--navy),0 14px 30px -20px rgba(40,30,10,.34)}
.drv .d-map{border:0;box-shadow:0 14px 30px -20px rgba(40,30,10,.34)}
.drv .d-sheet{background:rgba(255,253,249,.96);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%)}
.drv .d-tabs{background:rgba(247,244,238,.86);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border-top:0;box-shadow:0 -1px 0 rgba(40,30,10,.07)}
.drv .d-dock{background:linear-gradient(180deg,rgba(243,239,231,0),var(--parch) 22px)}
.drv .d-next,.drv .d-btn.go,.drv .d-btn.stop,.drv .d-btn.nav{box-shadow:0 10px 22px -14px rgba(17,26,74,.55)}
/* back to my place: round glass button on the map, bottom left (zoom is right) */
.d-me{position:absolute;left:12px;bottom:12px;z-index:3;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:var(--navy);
  background:rgba(255,253,249,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(40,30,10,.08),0 8px 18px -10px rgba(40,30,10,.45)}
.d-me svg.i{width:22px;height:22px;fill:var(--navy);stroke:var(--navy);stroke-width:1.6}
.d-me:active{transform:scale(.94)}
.d-dd-list li.own{color:var(--navy);font-weight:600}
.d-dd-list li.own small{font-weight:400}
@media (prefers-reduced-transparency:reduce){.drv .d-row,.drv .d-tile,.drv .d-choice,.drv .d-dd-btn{background:var(--paper)}.drv .d-tabs,.drv .d-sheet{background:var(--paper);backdrop-filter:none}}
/* map credits: folded to the (i) until someone presses it (moovr.js adds .mv-cred), even before the map settles */
.mv-map:not(.mv-cred) .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner{display:none}
.mv-map:not(.mv-cred) .maplibregl-ctrl-attrib.maplibregl-compact-show{padding:0;background:rgba(255,255,255,.5)}

/* driver app top bar (Goni 2026-10-31, option A): navy like the office menu, Moovr mark + the company's logo */
.drv .d-top,.dphone.drv .d-top{background:var(--navy);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.dphone.scrolled .d-top{box-shadow:0 8px 16px -10px rgba(17,26,74,.55)}
.drv .d-top .d-top-title,.drv .d-top .d-back{color:#fff}
.drv .d-top .d-back:hover{background:rgba(255,255,255,.1)}
.drv .d-top .d-sync{color:#8fe0c0}
.drv .d-top .d-sync.sending{color:#fff}
.drv .d-top .d-sync.offline{background:rgba(207,149,47,.22);border-color:rgba(242,190,96,.85);color:#ffd38a}
.drv .d-top .d-spin{border-color:rgba(255,255,255,.25);border-top-color:#fff}
.d-mark{display:grid;grid-template-columns:repeat(3,5px);gap:2.5px;flex:none;margin:0 4px 0 2px}
.d-mark i{width:5px;height:5px;border-radius:50%;background:#fff}
.d-mark i.s{background:var(--sea)}
.dphone.t-large .d-mark{margin-left:0}
.d-back:not([hidden]) + .d-mark{display:none}
.d-ten{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;margin-left:auto;overflow:hidden;
  background:var(--ten);color:#fff;font:700 12.5px/1 var(--sans);letter-spacing:.03em;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.d-ten.logo{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.d-ten img{width:100%;height:100%;object-fit:contain;padding:4px 3px;box-sizing:border-box}
.d-ten + .d-sync{margin-left:6px}

/* ---------- 26. clean pass (Goni 2026-10-31: "not clean and pleasant enough") ----------
   Same palette and materials, less noise. Canvas + paper + ONE glass + the status tints; two elevations
   (e1 small floating things, e2 floating panels); faces are initials; red counts only for act now;
   trip codes navy mono; struck old values in steel (readable), still struck. */
.glass,.glass.thick,.glass-chip,.sidepanel,.tripcard{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--glass-sh)}
.glass-chip{border:0}
.btn.primary{box-shadow:none}
.btn.secondary{background:transparent}
.btn.secondary:hover{background:var(--tint-hover)}
.sd.red,.sd.amber,.pip.hold{box-shadow:none}
.menu a.on{background:var(--tint-on)}
.search,.k{background:var(--paper)}
.fb.on{background:var(--tint-on);box-shadow:none}
.av,span.av,.mv-face,.mv-face.ini{background:var(--av-bg);color:var(--navy);box-shadow:none;border:0}
span.av{font-weight:600}
/* struck old values: steel, so the old time still reads (2.5:1 in fog was too faint) */
s,.tl-row .tm s{color:var(--steel)}
/* trip codes: navy mono (sea green only means done / OK) */
.tbl td.id{color:var(--navy)}
/* trip card: no stock photo; a clean top row with the code, the state as dot + word, and the close button */
.band{height:auto;min-height:52px;background:none;overflow:visible;display:flex;align-items:center;gap:10px;padding:14px 12px 0 22px}
.band::after{display:none}
.band img{display:none}
.band .bid{position:static;font-family:var(--mono);font-size:13px;color:var(--navy);letter-spacing:.02em}
.band .bst{position:static;height:auto;padding:0;background:none;font-size:13.5px;font-weight:560}
.band .bid{white-space:nowrap;flex:none}
.band .bst{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.band .x{position:static;margin-left:auto;background:none;color:var(--slate);backdrop-filter:none;-webkit-backdrop-filter:none}
.band .x:hover{background:var(--tint-hover)}
.tripcard .who{align-items:center;margin-top:12px}
.tripcard .face{width:48px;height:48px;margin-top:0;border:0;box-shadow:none;background:var(--av-bg);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600}
.tripcard h3{padding-top:0}
/* a figure inside a sentence ("9 of 12 done", "USD 265.00 of USD 420.00"): words with even numbers, never mono */
.tnum{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:0}
.btn.danger{box-shadow:none}
.mv-map.maplibregl-map{font-weight:450}