:root{
  --font-app:'Satoshi',Inter,system-ui,sans-serif;
  --teal:#61b0bc;--teal-deep:#2f7e8c;--teal-ink:#1d4750;--lime:#b5dc79;--lime-deep:#7fb23e;
  --ink:#141d1f;--ink-2:#1c2829;--surface:#fff;--surface-soft:#f2f6f5;--line:#dde6e3;
  --text:#262b2c;--text-soft:#5f6d6e;--on-dark:#eaf1f0;--on-dark-soft:#9fb3b2;
  --maxw:1180px;--r:12px;--r-md:16px;--r-lg:24px;
  --sh-lg:0 4px 8px #141d1f0a,0 24px 48px -16px #141d1f47;
  /* motion: one curve, one pop, one exit; three durations (hovers, fades, stage moves) */
  --ease:cubic-bezier(.2,.7,.2,1);--ease-pop:cubic-bezier(.2,.9,.2,1.2);--ease-out:cubic-bezier(.4,0,.2,1);
  --dur-1:160ms;--dur-2:320ms;--dur-3:480ms;--dur-slow:1600ms;
  /* the demo's own chrome (opening, player, strip, offer, tray, popovers, closing): one radius family, one border colour, one
     type scale (each step multiplied by --cs inside the opening and closing cards) */
  --r-xs:6px;--r-sm:10px;--edge:rgba(20,29,31,.08);
  --t-1:10px;--t-2:11.5px;--t-3:13px;--t-4:18px;--t-5:24px;
  /* the page follows the story clock: cool before 10 AM, neutral to 3 PM, warm after */
  --tone-cool:#eef3f6;--tone-neutral:#f2f6f5;--tone-warm:#f6f3ee;
  --app-bg:#1b2331;--app-side:#121927;--app-panel:#222c3d;--app-modal:#232f42;
  --app-line:rgba(255,255,255,.08);--app-border:#3a4658;--app-field-border:#6b7a90;--app-text:#e6ebf2;--app-mut:#94a0b3;--app-dim:#8d99ad;
  --app-blue:#3a66ec;--app-red:#f0586a;--app-amber:#e8a33d;--app-green:#57c489;
  --app-strong:#fff;--app-label:#dfe6ef;--app-input:rgba(255,255,255,.02);--app-dd:#2a3649;--app-hl:rgba(255,255,255,.07);--app-scrim:rgba(8,12,20,.62);--app-track:rgba(255,255,255,.08);
  --app-note-bg:rgba(232,163,61,.09);--app-note-text:#f1d3a2;--app-note-title:#e8a33d;--app-tag-saved-bg:rgba(97,176,188,.18);--app-tag-saved:#8fd1da;
  --m-bg:#eef0f3;--m-card:#fff;--m-border:#d9dee5;--m-text:#111827;--m-sub:#4b5563;--m-top:#253041;--m-bottom:#e5e8ec;--m-btn:#c9ced6;--m-banner-bg:#fdf6d8;--m-banner-text:#7c5a12;--m-banner-title:#5b4408;--m-seg-bg:#fff;--m-seg-text:#374151;--m-seg-border:#cbd5e1;--m-status:#111;
}
/* ---------- tokens: every chapter's dark defaults live here; .stage[data-theme] overrides outrank them ---------- */
/* chapter 3: the dispatch map */
:root{--map-bg:#1e2738;--map-road:#2b3749;--map-major:#3a4a63;--map-water:#1a2f45;--map-lbl:#7f8ea6}
/* chapter 3: map places (quarry, plant) */
:root{--map-quarry:#4a4030;--map-plant:#2c3547;--map-plant-b:#3a4560}
/* chapter 3: map fields, pit and route line */
:root{--map-field:#233324;--map-pit:#36301f;--map-line:rgba(255,255,255,.35)}
/* chapter 4: Order Details and Load Details */
:root{--od-indigo:#3445dc;--od-link:#5b8ff9;--od-drawer:#222938;--od-rev:#3b4159;--od-chip:#1a1f2b;--od-photo:#1a1f2c;--od-track:#2b3345;--od-tl:#3a4252;--od-modal:#252b3a;--od-well:#1b202b;--od-sw-rem:#141925;--od-green:#4ade80;--od-row-on:rgba(255,255,255,.05)}
/* chapter 5: Load Validation */
:root{--lv-pane:#1f2736;--lv-card:#1a2130;--lv-card-b:#2b3446;--lv-in:#1a2130;--lv-in-b:#6b7a90;--lv-tip:#2c323e;--lv-dd:#e4e6ea}
/* chapter 6: Load Ticket Report, download tray */
:root{--ltr-page:#1b2331;--ltr-card:#1f2736;--ltr-tile:#222b3b;--ltr-line:rgba(255,255,255,.07);--ltr-hline:#3a4456;--ltr-text:#dfe5ee;--ltr-strong:#fff;--ltr-mut:#94a0b3;
  --ltr-blue:#2f6ff5;--ltr-chip:rgba(63,109,246,.2);--ltr-chip-t:#9dbbff;--ltr-field:#1a2130;--ltr-field-b:#343e51;--ltr-panel:#252d3d;--ltr-skel:#2e3748;--ltr-bar:#4a5468;--ltr-track:#2a3242;
  --ltr-hover:rgba(255,255,255,.04);--ltr-ghost-b:#3a4658;--ltr-modal:#252b3a;--ltr-in:#1a2130;--ltr-in-b:#6b7a90;--ltr-pale:rgba(63,109,246,.16);--ltr-pale-b:rgba(99,140,246,.45);--ltr-pale-t:#9dbbff;--ltr-tog:#475569;--ltr-div:#3a4252;
  --dl-bg:#2a3140;--dl-text:#e6ebf2;--dl-sub:#9aa4b2;--dl-div:#3a4252}
/* app frames follow the visitor's device theme; the stage carries data-theme */
.stage[data-theme="light"]{--app-bg:#eef0f3;--app-side:#f7f8fa;--app-panel:#fff;--app-modal:#fff;--app-line:rgba(17,24,39,.09);--app-border:#cbd5e1;--app-field-border:#76869b;--app-text:#1f2937;--app-mut:#4b5563;--app-dim:#6b7280;--app-blue:#2563eb;--app-strong:#111827;--app-label:#374151;--app-input:#fff;--app-dd:#fff;--app-hl:rgba(17,24,39,.06);--app-scrim:rgba(17,24,39,.45);--app-track:rgba(17,24,39,.08);--app-note-bg:#fdf6d8;--app-note-text:#7c5a12;--app-note-title:#b45309;--app-tag-saved-bg:rgba(47,126,140,.14);--app-tag-saved:#2f7e8c}
.stage[data-theme="dark"]{--m-bg:#0f141c;--m-card:#1c2431;--m-border:#2a3444;--m-text:#e6ebf2;--m-sub:#9aa4b2;--m-bottom:#151b26;--m-btn:#2a3444;--m-banner-bg:rgba(232,163,61,.12);--m-banner-text:#f1d3a2;--m-banner-title:#e8a33d;--m-seg-bg:#1c2431;--m-seg-text:#cbd5e1;--m-seg-border:#3a4658;--m-status:#e6ebf2}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;font-family:Poppins,system-ui,sans-serif;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- site nav ---------- */
.site-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-nav .wrap{height:64px;display:flex;align-items:center;gap:36px}
.site-nav .logo img{height:26px;display:block}
.site-nav nav{display:flex;gap:26px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.site-nav nav a.on{color:var(--teal-deep);box-shadow:inset 0 -2px 0 var(--teal)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:22px}
.login{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:11px 18px;font-weight:600;font-size:14px}
.btn.lime{background:var(--lime);color:var(--ink)}

/* ---------- intro (compact strip) ---------- */
.intro{background:var(--ink);color:#fff;padding:16px 0 14px;position:relative;overflow:hidden}
.intro .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.intro::after{content:"";position:absolute;right:-10%;top:-60%;width:55%;height:220%;background:radial-gradient(closest-side,rgba(97,176,188,.16),transparent 70%)}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);border-radius:999px;padding:5px 11px;font-size:11px;font-weight:500;color:var(--on-dark)}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--lime)}
.intro h1{display:none}
.intro .lime{color:var(--lime)}
.intro p{font-size:13.5px;line-height:1.4;color:var(--on-dark-soft);margin:0}

/* ---------- chapter: the product does the talking ---------- */
.chapter .wrap{max-width:1340px}
.chapter{background-color:var(--tone,var(--tone-neutral));transition:background-color var(--dur-slow) ease;padding:12px 0 14px;position:relative;scroll-margin-top:64px;min-height:calc(100vh - 64px);display:flex;align-items:center}
/* the day's light, following the story clock (data-tone from dayTone()): three stops, slow enough to miss */
.chapter[data-tone="cool"]{--tone:var(--tone-cool)}.chapter[data-tone="neutral"]{--tone:var(--tone-neutral)}.chapter[data-tone="warm"]{--tone:var(--tone-warm)}
.chapter::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(20,29,31,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(20,29,31,.035) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(#000,transparent 85%);pointer-events:none}
.chapter-col{position:relative;display:flex;flex-direction:column;gap:9px;width:100%}

/* ---------- stage + player ---------- */
.stage-col{position:relative}
.stage{position:relative;height:var(--stage-h,600px);transition:--s var(--dur-3) var(--ease);
  /* composition layout, in design px from the stage centre (x) and the design px scale --s; fit() sizes --s so the
     mode's bounding box fits (base 966.4 wide: [phone .85][24][desktop 760] or [desktop][24][phone .95]; trio 1090.8) */
  --dx:93.6;--px:-471.05;--ix:-545.4;--oy:calc((var(--stage-h,600px) - 506.67px * var(--s,1)) / 2)}
@property --s{syntax:'<number>';inherits:true;initial-value:1}
.stage.snap,.stage.sizing{transition:none}
.stage.sizing .desktop,.stage.sizing .phone,.stage.sizing .ipad,.stage.sizing .offer{transition:none !important}
/* stage modes glide: every device is placed with the translate property (left stays 50%, top stays 0) and sized with
   transform, so a mode switch animates transform and opacity only, over --dur-3. Positions are anchored to the top of
   the design stage (--stage-h), so the opening and closing cards' own height never moves a device */
.stage.hflip{transition:height var(--dur-3) var(--ease),--s var(--dur-3) var(--ease)}
.player{display:flex;align-items:center;gap:6px;padding:4px;background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-lg),0 0 0 1px var(--edge)}
/* the chrome's two buttons: primary (lime on ink) and secondary ghost (hairline --edge); a pressed toggle fills ink */
.pbtn,.tk-btn{height:32px;min-width:32px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--edge);background:transparent;color:var(--ink);font:600 var(--t-3) Poppins,sans-serif;cursor:pointer;white-space:nowrap;transition:background-color var(--dur-1) ease,border-color var(--dur-1) ease,color var(--dur-1) ease,filter var(--dur-1) ease}
.pbtn:hover,.tk-btn:hover{background-color:rgba(20,29,31,.045)}
.pbtn.primary,.tk-btn.primary{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.pbtn.primary:hover,.tk-btn.primary:hover{background:var(--lime);filter:brightness(.96)}
.pbtn.primary{min-width:86px}
.tk-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.tk-btn:disabled{opacity:.4;cursor:not-allowed}
.pstatus{font-size:var(--t-2);font-weight:600;color:var(--text-soft);white-space:nowrap;min-width:104px;text-align:right}
.pstatus.turn{color:var(--lime-deep)}
.pstatus.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal);margin-right:6px;animation:blink 1.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.desktop{position:absolute;top:0;left:50%;translate:calc(var(--dx) * var(--s,1) * 1px) calc(var(--oy) + var(--lift,0px));transform:translateX(-50%);width:calc(760px * var(--s,1));height:calc(506.67px * var(--s,1));background:var(--app-bg);border-radius:14px;box-shadow:var(--sh-lg),0 0 0 1px rgba(20,29,31,.08);overflow:hidden;display:flex;flex-direction:column;font-family:var(--font-app),system-ui,sans-serif;font-size:12px;color:var(--app-text);transition:transform .75s var(--ease),filter .75s ease;transform-origin:center}
.desktop.back{transform:translateX(-50%) scale(.97)}
/* the dim is an overlay that fades (no filter repaint each frame) */
.desktop::after{content:"";position:absolute;inset:0;z-index:60;background:#0b1020;opacity:0;pointer-events:none;transition:opacity var(--dur-3) ease}
.desktop.back::after{opacity:.38}
.stage.snap .desktop::after,.stage.sizing .desktop::after{transition:none}
.screen{position:absolute;top:0;left:0;width:760px;height:506.67px;transform-origin:top left;transform:scale(var(--s,1));display:flex;flex-direction:column}
.browser-bar{height:30px;background:#0d1524;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--app-line);flex:none}
.dots{display:flex;gap:5px}.dots i{width:8px;height:8px;border-radius:50%;background:#2c3a52}
.url{font-size:10.5px;color:#9fadc6;background:#15213a;border-radius:6px;padding:4px 10px}
.sample{margin-left:auto;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:#9fadc6;border:1px solid var(--app-line);border-radius:999px;padding:3px 8px}
.app{flex:1;display:flex;position:relative;min-height:0}
.app-side{width:150px;background:var(--app-side);padding:10px 8px;display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--app-line);flex:none}
.side-brand{display:flex;align-items:center;padding:2px 4px 4px}
.app-logo{height:14px;width:auto;opacity:.95}
.quick{background:var(--app-blue);color:#fff;border:0;border-radius:8px;height:26px;display:flex;align-items:center;gap:6px;padding:0 8px;font:600 11px var(--font-app),sans-serif;cursor:pointer;transition:filter .2s}
.quick:hover{filter:brightness(1.08)}
.quick i{font-style:normal;width:12px;height:12px;border-radius:50%;border:1.4px solid currentColor;font-size:9px;line-height:10px;text-align:center;flex:none}
.quick kbd{margin-left:auto;font:500 8px var(--font-app),sans-serif;opacity:.75}
.quick.invite{animation:invitePulse 1.5s ease-in-out infinite}
.side-search{height:24px;border:1px solid var(--app-border);border-radius:7px;display:flex;align-items:center;padding:0 8px;font-size:10.5px;color:var(--app-dim);gap:6px}
.side-search kbd{margin-left:auto;font:500 8px var(--font-app),sans-serif}
.app-side nav{display:flex;flex-direction:column;gap:1px;margin-top:2px}
.app-side nav a{display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:7px;color:var(--app-mut);font-size:10.5px;font-weight:500;cursor:pointer}
.app-side nav a svg{width:13px;height:13px;flex:none;opacity:.9}
.app-side nav a.sub{padding-left:24px;font-size:10px}
.app-side nav a.on{background:var(--app-hl);color:var(--app-strong)}
.nchev{margin-left:auto;width:5px;height:5px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.7}
.nchev.up{transform:rotate(-135deg) translateY(-1px)}
.ic{width:11px;height:11px;border-radius:3px;border:1.4px solid currentColor;opacity:.85;flex:none}
.ic-dash{border-radius:2px;border-bottom-width:3px}.ic-dispatch{border-radius:50% 50% 50% 2px}.ic-bm{border-radius:2px 2px 0 0;border-bottom:0}.ic-plan{border-radius:2px;border-top-width:3px}.ic-val{border-radius:50%}.ic-proj{border-radius:2px 5px 2px 2px}.ic-req{border-radius:2px 2px 6px 6px}
.side-user{margin-top:auto;display:flex;gap:7px;align-items:center;padding:6px;border-radius:8px;background:var(--app-hl)}
.avatar{width:18px;height:18px;border-radius:50%;background:var(--app-blue);color:#fff;font:600 9px/18px var(--font-app),sans-serif;text-align:center;flex:none}
.side-user-txt{display:flex;flex-direction:column;min-width:0}
.side-user-txt b{font-size:9.5px;color:var(--app-strong);font-weight:600}
.org-edit{background:transparent;border:1px solid transparent;border-radius:4px;color:var(--app-mut);font:500 9.5px var(--font-app),sans-serif;padding:1px 3px;width:100%;outline:0}
.org-edit:hover{border-color:var(--app-border)}
.org-edit:focus,.org-edit.invite{border-color:var(--app-blue);color:var(--app-text)}
.app-main{flex:1;padding:12px 14px;min-width:0;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.app-top{display:flex;align-items:center;gap:12px}
.app-top h2{margin:0;font-size:15px;font-weight:600;color:var(--app-strong)}
.seg{display:flex;background:var(--app-hl);border-radius:7px;padding:2px}
.seg button{border:0;background:transparent;color:var(--app-mut);font:500 10.5px var(--font-app),sans-serif;padding:4px 10px;border-radius:5px}
.seg button.on{background:var(--app-panel);color:var(--app-strong);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.top-right{margin-left:auto;display:flex;gap:7px}
.ghostbtn{border:1px solid var(--app-border);border-radius:7px;padding:4px 9px;font:500 10px var(--font-app),sans-serif;color:var(--app-mut)}
.seg.small button{font-size:9.5px;padding:3px 8px}
.btn-primary{background:var(--app-blue);color:#fff;border:0;border-radius:7px;padding:7px 11px;font:600 11.5px var(--font-app),sans-serif;cursor:pointer;transition:filter .2s,transform .15s}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary.pulse{animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(181,220,121,0)}50%{box-shadow:0 0 0 9px rgba(181,220,121,.38)}}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.dtile{background:var(--app-panel);border:1px solid var(--app-line);border-radius:9px;padding:8px;display:flex;gap:7px;align-items:flex-start;flex-wrap:wrap;transition:transform .3s}
.dtile .ti{width:20px;height:20px;border-radius:6px;flex:none}
.dtile > div{display:flex;flex-direction:column;min-width:0}
.dtile b{font-size:14px;font-weight:700;line-height:1.05}
.dtile span{font-size:8.5px;color:var(--app-mut);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtile a{flex-basis:100%;border-top:1px solid var(--app-line);margin-top:6px;padding-top:4px;font-size:8px;color:var(--app-blue);font-weight:600;text-align:center}
.dtile.pop{animation:tilePop .7s ease}
.blue{color:#3f8cf6}.ti.blue{background:#2563eb}.purple{color:#a78bfa}.ti.purple{background:#7c3aed}.green{color:#4ade80}.ti.green{background:#22c55e}.teal{color:#2dd4bf}.ti.teal{background:#14b8a6}.orange{color:#fbbf24}.ti.orange{background:#f59e0b}.money{color:#4ade80}.ti.money{background:#16a34a}
.stage[data-theme="light"] .blue{color:#2563eb}.stage[data-theme="light"] .purple{color:#7c3aed}.stage[data-theme="light"] .green{color:#16a34a}.stage[data-theme="light"] .teal{color:#0d9488}.stage[data-theme="light"] .orange{color:#d97706}.stage[data-theme="light"] .money{color:#15803d}
.panel{background:var(--app-panel);border:1px solid var(--app-line);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:7px;min-height:0;overflow:hidden}
.panel:nth-of-type(1){flex:0 0 27%}
.panel:nth-of-type(2){flex:1}
.panel > header{display:flex;align-items:center;gap:8px}
.panel > header b{font-size:9.5px;letter-spacing:.08em;color:var(--app-mut)}
.panel > header .seg{margin-left:auto}
.panel-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--app-dim);font-size:10px}
.panel-empty.hide{display:none}
.bars{width:18px;height:14px;position:relative;opacity:.6}
.bars::before,.bars::after{content:"";position:absolute;bottom:0;width:4px;background:currentColor;border-radius:1px}
.bars::before{left:0;height:8px;box-shadow:6px 4px 0 currentColor}
.bars::after{right:0;height:14px}
.orders-row{flex:1;display:flex;gap:8px;min-height:0}
.order-card.static{display:block}
.order-card.danger{border-left-color:#ef4444}
.order-card.done{border-left-color:#22c55e}
.oc-status.red{color:#f87171;background:rgba(239,68,68,.14)}
.oc-status.green{color:var(--app-green);background:rgba(87,196,137,.14)}
.orders-row.alt{gap:8px}
.truck-rows{display:flex;flex-direction:column;gap:5px}
.truck-row{display:grid;grid-template-columns:52px 90px 1fr auto;gap:10px;align-items:center;background:var(--app-bg);border:1px solid var(--app-line);border-radius:8px;padding:7px 10px;font-size:10.5px;color:var(--app-text)}
.truck-row b{color:var(--app-strong)}
.truck-row span:nth-of-type(2){color:var(--app-mut)}
.truck-row em{font-style:normal;font-weight:600;font-size:9.5px}
.truck-row em.red{color:#f87171}.truck-row em.amber{color:var(--app-amber)}
.order-card{display:none;width:250px;background:var(--app-bg);border:1px solid var(--app-line);border-left:3px solid var(--teal);border-radius:9px;padding:9px 11px;align-self:flex-start}
.order-card.show{display:block;animation:cardIn .6s var(--ease)}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.order-card header{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.oc-id{color:var(--app-mut);font-weight:600;font-size:9.5px}
.oc-status{margin-left:auto;font-size:8.5px;font-weight:600;letter-spacing:.04em;color:var(--app-amber);background:rgba(232,163,61,.14);border-radius:999px;padding:2px 7px}
.oc-title{font-weight:700;color:var(--app-strong);font-size:12px;margin-bottom:3px}
.oc-line{font-size:10.5px;color:var(--app-text);margin-bottom:3px}
.oc-line b{color:var(--teal);font-weight:600}
.oc-meta{font-size:9px;color:var(--app-dim);margin-bottom:5px}
.oc-pct{font-size:9px;color:var(--app-mut);margin-bottom:2px}
.oc-bar{height:3px;background:var(--app-track);border-radius:2px;overflow:hidden}.oc-bar i{display:block;height:100%;width:0;background:var(--teal)}
.order-card footer{display:flex;gap:8px;align-items:center;font-size:8.5px;color:var(--app-dim);border-top:1px solid var(--app-line);margin-top:7px;padding-top:6px}
.order-card footer em{margin-left:auto;font-style:normal;color:var(--app-blue);font-weight:600}

/* quick order page (four tabs, from the recording) */
.modal.qo{width:min(97%,660px)}
.qo-tabs{display:flex;gap:22px;padding:12px 18px 0;border-bottom:1px solid var(--app-line)}
.qt{font-size:12.5px;font-weight:600;color:var(--app-dim);padding-bottom:7px;border-bottom:2px solid transparent;cursor:pointer;transition:.2s;white-space:nowrap}
.qt.done{color:var(--app-green);border-bottom-color:var(--app-green)}
.qt.on{color:var(--app-strong);border-bottom-color:var(--app-strong)}
.qo-sub{padding:10px 18px 8px;font-size:11px;color:var(--app-mut)}
.qo-panel{margin:0 18px;background:var(--app-bg);border:1px solid var(--app-line);border-radius:10px;padding:10px 12px;min-height:150px}
.qo-bar{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.qo-search{flex:1;height:26px;border-radius:7px;border:1px solid transparent;display:flex;align-items:center;gap:7px;padding:0 9px;font-size:10.5px;color:var(--app-dim)}
.qo-search i{width:9px;height:9px;border:1.4px solid currentColor;border-radius:50%;position:relative;flex:none}
.qo-search i::after{content:"";position:absolute;right:-3px;bottom:-3px;width:4px;border-top:1.4px solid currentColor;transform:rotate(45deg)}
.qo-table{width:100%;border-collapse:collapse;font-size:10px}
.qo-table th{text-align:left;font-weight:600;color:var(--app-mut);font-size:9.5px;padding:5px 7px;border-bottom:1px solid var(--app-line);white-space:nowrap}
.qo-table td{padding:7px;border-bottom:1px solid var(--app-line);color:var(--app-text);vertical-align:middle}
.qo-table tbody tr{cursor:pointer;transition:.15s}
.qo-table tbody tr:hover{background:var(--app-hl)}
.qo-table tbody tr.on{background:rgba(63,109,246,.16);box-shadow:inset 2px 0 0 var(--app-blue)}
.qo-table .dim{color:var(--app-dim)}
.qo-table .name{font-weight:600;color:var(--app-strong)}
.pill{font-size:8.5px;font-weight:600;border-radius:999px;padding:2px 8px;display:inline-flex;align-items:center;gap:4px}
.pill.active{background:rgba(87,196,137,.16);color:var(--app-green)}
.pill.pending{background:rgba(232,163,61,.16);color:var(--app-amber)}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.qo-foot{display:flex;align-items:center;padding:10px 18px 14px}
.qo-alt{font-size:10px;color:var(--app-dim)}
.qo-alt a{color:var(--app-blue);font-weight:600;cursor:pointer;border-bottom:1px dashed currentColor}

/* modals *//* modals */
.modal-layer{position:absolute;inset:0;background:var(--app-scrim);display:none;align-items:center;justify-content:center;padding:12px 14px 12px 142px;z-index:3}
.modal-layer.show{display:flex}
.modal{display:none;background:var(--app-modal);border-radius:12px;width:min(88%,420px);max-height:97%;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);border:1px solid var(--app-line);animation:modalIn .22s ease}
.modal.wide{width:min(94%,600px)}
.modal.show{display:flex;flex-direction:column}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
.modal header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 6px}
.modal h3{margin:0;font-size:14px;font-weight:600;color:var(--app-strong);display:flex;gap:10px;align-items:baseline}
.crumb{font-size:10px;color:var(--app-dim);font-weight:500}
.modal .x{color:var(--app-mut);font-size:16px}
.mbody{padding:6px 16px 8px;display:grid;gap:10px}
.mbody.two{grid-template-columns:1fr 1fr;gap:9px 14px}
.f.span2{grid-column:1/-1}
.f label{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--app-label);margin-bottom:4px;font-weight:500}
.f label b{color:var(--app-red);font-weight:600}
.lbl-note{color:var(--app-dim);font-weight:400;margin-left:auto;font-size:9.5px}
.fld{height:28px;border:1px solid var(--app-field-border);border-radius:7px;background:var(--app-input);color:var(--app-text);font:500 11.5px var(--font-app),sans-serif;padding:0 9px;display:flex;align-items:center;gap:6px;width:100%;position:relative;outline:0;transition:border-color .2s,box-shadow .2s}
input.fld::placeholder{color:var(--app-dim)}
.fld.focus,.fld:focus{border-color:var(--app-blue);box-shadow:0 0 0 2px rgba(63,109,246,.28)}
.fld .val{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fld .val.ph{color:var(--app-dim)}
.fld .chev{margin-left:auto;width:6px;height:6px;border-right:1.5px solid var(--app-mut);border-bottom:1.5px solid var(--app-mut);transform:rotate(45deg) translateY(-2px);flex:none}
.fld .cal{margin-left:auto;width:11px;height:10px;border:1.5px solid var(--app-mut);border-radius:2px;border-top-width:3px;flex:none}
.fld.unit{width:64px;flex:none}
.fld.locked{opacity:.45}
.fld.dd{cursor:pointer;user-select:none}
.fld.dd .dd-list{display:none;position:absolute;left:-1px;right:-1px;top:calc(100% + 4px);background:var(--app-dd);border:1px solid var(--app-border);border-radius:8px;list-style:none;margin:0;padding:4px;z-index:5;box-shadow:0 14px 30px -10px rgba(0,0,0,.7);animation:modalIn .2s ease}
.fld.dd.open .dd-list{display:block}
.fld.dd.open{border-color:var(--app-blue)}
.dd-list li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;color:var(--app-text);cursor:pointer;font-weight:500}
.dd-list li:hover,.dd-list li.flash{background:rgba(63,109,246,.28)}
.tag{font:600 8.5px/1 var(--font-app),sans-serif;letter-spacing:.05em;padding:3px 6px;border-radius:999px;text-transform:uppercase;white-space:nowrap}
.tag.saved{background:var(--app-tag-saved-bg);color:var(--app-tag-saved)}
.tag.turn{background:var(--lime);color:var(--ink)}
.tag.you{background:var(--app-hl);color:var(--app-mut)}
.f label .tag{margin-left:2px}
.row{display:flex;gap:8px;align-items:center}
.row .money{flex:1}
.chip{height:28px;border:1px solid var(--app-border);border-radius:7px;background:transparent;color:var(--app-text);font:500 11px var(--font-app),sans-serif;padding:0 10px;cursor:pointer;flex:none;transition:.2s}
.chip.on{border-color:var(--app-blue);background:rgba(63,109,246,.2)}
.segwrap{display:flex;border:1px solid var(--app-blue);border-radius:7px;overflow:hidden;height:28px}
.segbtn{flex:1;background:transparent;border:0;border-right:1px solid rgba(63,109,246,.5);color:var(--app-text);font:600 11px var(--font-app),sans-serif;cursor:pointer;transition:.2s}
.segbtn:last-child{border-right:0}
.segbtn.on{background:var(--app-blue);color:#fff}
.row .money{position:relative}
.row .money::before{content:"$";position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--app-mut);font-size:11px;z-index:1}
.row .money input{padding-left:18px}
.sub{font-size:9.5px;color:var(--app-dim);margin-top:4px;line-height:1.4}
.remaining{display:none;margin-top:2px}.remaining.show{display:block}
.bar{height:4px;background:var(--app-track);border-radius:2px;overflow:hidden;margin-top:4px}
.bar i{display:block;height:100%;background:var(--app-blue);width:0;transition:width .9s ease}
.remaining.show .bar i,.elig.show .bar i{width:100%}
.elig{display:none;border:1px solid var(--app-border);border-radius:8px;padding:7px 10px}
.elig.show{display:block;animation:modalIn .3s ease}
.elig b{font-size:15px;font-weight:700;color:var(--app-strong);display:block;margin:2px 0}
.elig .sub{margin-top:2px}
.notes{display:none;border:1px solid rgba(232,163,61,.5);background:var(--app-note-bg);border-radius:8px;padding:8px 10px;color:var(--app-note-text);font-size:10.5px;line-height:1.45}
.notes.show{display:block;animation:fadeUp .5s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.notes h5{margin:0 0 3px;color:var(--app-note-title);font-size:10px;display:flex;gap:8px;align-items:center;font-weight:600}
.modal footer{display:flex;justify-content:flex-end;gap:16px;align-items:center;padding:8px 16px 14px}
.cancel{color:var(--app-mut);font-size:11.5px}
.flash{filter:brightness(1.3)}
.toast{position:absolute;right:14px;bottom:14px;background:#0f1622;border:1px solid var(--app-line);color:#fff;padding:8px 12px;border-radius:8px;font:500 11px var(--font-app),sans-serif;opacity:0;transform:translateY(8px);transition:.3s;display:flex;gap:8px;align-items:center;z-index:4;pointer-events:none}
.toast.show{opacity:1;transform:none}
.toast.sticky{pointer-events:auto}
.toast-act{display:none;border:0;background:transparent;color:var(--lime);font:600 11px var(--font-app),sans-serif;cursor:pointer;padding:0 0 0 6px;border-left:1px solid var(--app-line);margin-left:2px}
.toast.has-act .toast-act{display:inline-block}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--app-green)}

/* phone */
.phone{position:absolute;top:0;left:50%;--tx:calc(var(--px) * var(--s,1) * 1px);--ty:calc(var(--stage-h,600px) - var(--oy) - 390px);translate:calc(var(--tx) + var(--sx,0px)) calc(var(--ty) + var(--lift,0px));width:186px;height:390px;background:#101318;border-radius:34px;box-shadow:inset 0 0 0 1.5px #5a606c,inset 0 0 0 4px #15181f,inset 0 0 0 5.5px #2a2f39,0 30px 60px -18px rgba(0,0,0,.65);z-index:6;transition:left .45s var(--ease),bottom .45s var(--ease),transform .45s var(--ease);transform-origin:bottom left;transform:scale(calc(var(--s,1) * .85))}
.phone.front{--tx:calc(var(--s,1) * -104.16px);--ty:calc(var(--stage-h,600px) * .5 - 390px + var(--s,1) * 218.4px);transform:scale(calc(var(--s,1) * 1.12));z-index:7}
.phone{perspective:700px}
.screens{position:absolute;inset:7px;transform-style:preserve-3d;transition:transform .55s var(--ease)}
.scr{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:28px;overflow:hidden;background:#0f141c}
.scr.mob{transform:rotateY(180deg)}
.phone.flipped .screens{transform:rotateY(180deg)}
.island{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:58px;height:16px;background:#000;border-radius:10px;z-index:3;box-shadow:inset 0 0 0 1px #0a0c10}
.island::after{content:"";position:absolute;right:9px;top:5px;width:6px;height:6px;border-radius:50%;background:#1d2330;box-shadow:inset 0 0 2px #3b4a62}
.home{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:54px;height:4px;border-radius:2px;background:rgba(255,255,255,.45);z-index:3;pointer-events:none}
.pbz{position:absolute;width:3px;background:#3a3f4a;border-radius:2px;box-shadow:inset 0 0 0 .5px #6a7080}
.pbz.vol1{left:-3px;top:96px;height:30px}.pbz.vol2{left:-3px;top:134px;height:30px}.pbz.pwr{right:-3px;top:112px;height:52px}
.sms{padding:36px 10px 14px;display:flex;flex-direction:column;background:#0f141c;color:#fff;font-family:var(--font-app),sans-serif}
.sms-head{text-align:center;border-bottom:1px solid #1e2634;padding-bottom:8px;margin-bottom:8px}
.sms-head .av{width:30px;height:30px;border-radius:50%;background:var(--teal);margin:0 auto 4px;font:600 11px/30px var(--font-app),sans-serif;text-align:center;color:#0f141c}
.sms-head .nm{font-size:10.5px;font-weight:600}
.sms-head .co{font-size:9px;color:#8a94a6}
.sms-time{text-align:center;font-size:8.5px;color:#6b7686;margin:2px 0 8px}
.msg{max-width:86%;padding:7px 9px;border-radius:14px;font-size:10px;line-height:1.35;margin-bottom:6px;opacity:0;transform:translateY(8px) scale(.96);transition:.35s ease}
.msg.show{opacity:1;transform:none}
.msg.in{background:#26303f;border-bottom-left-radius:4px;align-self:flex-start}
.msg.out{background:#2f7cf6;border-bottom-right-radius:4px;align-self:flex-end}

/* mobile web app dashboard (light theme, from the recording) */
.mob{background:var(--m-bg);color:var(--m-text);font-family:var(--font-app),sans-serif;display:flex;flex-direction:column;padding:26px 6px 0}
.mob-status{display:flex;justify-content:space-between;font:600 7px var(--font-app),sans-serif;padding:0 12px 5px;color:var(--m-status)}
.mob-top{background:var(--m-top);border-radius:8px;height:18px;display:flex;align-items:center;gap:5px;padding:0 6px;margin-right:16px;position:relative}
.mi-menu{width:8px;height:6px;border-top:1.2px solid #fff;border-bottom:1.2px solid #fff;position:relative;flex:none}
.mi-menu::after{content:"";position:absolute;left:0;right:0;top:2.2px;border-top:1.2px solid #fff}
.mob-search{flex:1;background:#31405a;border-radius:5px;height:11px;font-size:6px;color:#aab3c2;display:flex;align-items:center;padding:0 5px}
.mob-av{width:12px;height:12px;border-radius:50%;background:#111827;border:1px solid #6b7280;color:#fff;font:600 6px/12px var(--font-app),sans-serif;text-align:center;flex:none}
.mob-chat{position:absolute;right:-14px;top:4px;width:10px;height:8px;border:1.2px solid #fff;border-radius:3px}
.mob-chat::after{content:"1";position:absolute;right:-5px;top:-6px;background:#ef4444;color:#fff;font:700 5px/7px var(--font-app),sans-serif;width:7px;height:7px;border-radius:50%;text-align:center}
.mob-head{display:flex;align-items:center;gap:4px;padding:7px 2px 6px;flex-wrap:nowrap}
.mob-head .mob-seg{flex:none}
.mob-head b{font-size:9.5px;font-weight:700;margin-right:auto}
.mob-seg{display:flex;border:1px solid var(--m-seg-border);border-radius:4px;overflow:hidden;background:var(--m-seg-bg)}
.mob-seg i{font-style:normal;font-size:5.5px;padding:3px 4px;color:var(--m-seg-text);white-space:nowrap}
.mob-seg i.on{background:#2563eb;color:#fff}
.mob-save{font-size:5px;border:1px solid var(--m-seg-border);border-radius:4px;padding:2px 4px;background:var(--m-seg-bg);color:var(--m-seg-text);white-space:normal;line-height:1.1;max-width:38px;text-align:center}
.mob-banner{background:var(--m-banner-bg);border-radius:5px;padding:5px 7px;font-size:5.5px;line-height:1.4;color:var(--m-banner-text);margin:0 0 6px}
.mob-banner b{display:block;color:var(--m-banner-title);font-size:6px}
.mob-banner em{font-style:normal;color:#2563eb;font-weight:600;margin-left:3px}
.mob-tiles{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.tile{background:var(--m-card);border:1px solid var(--m-border);border-radius:6px;padding:6px;display:flex;gap:5px;align-items:center;flex-wrap:wrap;transition:transform .3s}
.tile .ti{width:14px;height:14px;border-radius:3px;flex:none}
.tile > div{display:flex;flex-direction:column}
.tile b{font-size:9px;font-weight:700;line-height:1}
.tile span{font-size:5.5px;color:var(--m-sub);margin-top:2px}
.tile a{flex-basis:100%;border-top:1px solid var(--m-border);margin-top:4px;padding-top:3px;font-size:5px;color:#2563eb;font-weight:600;text-align:center}
.blue{color:#2563eb}.ti.blue{background:#2563eb}.purple{color:#7c3aed}.ti.purple{background:#7c3aed}.green{color:#16a34a}.ti.green{background:#22c55e}.teal{color:#0d9488}.ti.teal{background:#14b8a6}.orange{color:#d97706}.ti.orange{background:#f59e0b}.money{color:#15803d}.ti.money{background:#16a34a}
.tile.pop{animation:tilePop .7s ease}
@keyframes tilePop{0%{transform:scale(1)}40%{transform:scale(1.07);box-shadow:0 0 0 3px rgba(37,99,235,.28)}100%{transform:scale(1)}}
.mob-trucks{background:var(--m-card);border:1px solid var(--m-border);border-radius:6px;padding:5px 6px;display:flex;align-items:center;gap:6px;margin-top:5px}
.mob-trucks b{font-size:6px;letter-spacing:.04em}
.mob-seg.small i{font-size:5px;padding:2px 4px}
.mob-bottom{margin-top:auto;background:var(--m-bottom);height:26px;display:flex;align-items:center;justify-content:center;position:relative}
.mb-plus{background:var(--m-btn);color:var(--m-text);border-radius:10px;width:36px;height:14px;font:600 10px/14px var(--font-app),sans-serif;text-align:center}
.mb-up{position:absolute;right:10px;width:14px;height:14px;border-radius:50%;background:var(--m-btn);font:600 9px/14px var(--font-app),sans-serif;text-align:center}
.mb-tix{position:absolute;left:10px;width:14px;height:10px;background:var(--m-card);border:1px solid var(--m-border);transform:rotate(-8deg)}

/* invite highlight on the field the visitor can fill next */
.invite{position:relative;z-index:6;animation:invitePulse 1.5s ease-in-out infinite;border-color:var(--lime-deep) !important}
@keyframes invitePulse{0%,100%{box-shadow:0 0 0 2px rgba(181,220,121,.9),0 0 0 6px rgba(181,220,121,0)}50%{box-shadow:0 0 0 2px rgba(181,220,121,.9),0 0 0 8px rgba(181,220,121,.35)}}
.btn-primary.invite{border-radius:7px}
.shake{animation:shake .4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.fld.dd.locked{cursor:not-allowed}

/* opening: phone alone, no app behind */
.desktop{transition:transform var(--dur-3) var(--ease),translate var(--dur-3) var(--ease),opacity var(--dur-2) ease .4s,visibility 0s}
.stage.solo .desktop{transition-delay:0s}
.stage.solo .desktop{opacity:0;pointer-events:none}
.phone.front.solo{--tx:calc(var(--s,1) * -100.44px);--ty:calc(var(--stage-h,600px) * .5 - 390px + var(--s,1) * 210.6px);transform:scale(calc(var(--s,1) * 1.08))}
.reply-chip{margin-top:auto;align-self:flex-end;background:#2f7cf6;color:#fff;border:0;border-radius:14px;border-bottom-right-radius:4px;padding:7px 10px;font:500 10px var(--font-app),sans-serif;cursor:pointer;opacity:0;transform:translateY(6px);transition:.3s;pointer-events:none}
.reply-chip.show{opacity:1;transform:none;pointer-events:auto}
.reply-chip.invite{animation:invitePulse 1.5s ease-in-out infinite}
.msg.out{display:none}
.msg.out.show{display:block}
.mob-quick{width:100%;background:#2563eb;color:#fff;border:0;border-radius:6px;height:17px;display:flex;align-items:center;justify-content:center;gap:4px;font:600 7px var(--font-app),sans-serif;margin:5px 0 2px;cursor:pointer}
.mob-quick i{font-style:normal;width:8px;height:8px;border-radius:50%;border:1px solid currentColor;font-size:6px;line-height:7px;text-align:center}
.mob-quick.pulse{animation:pulse 1.3s ease-in-out infinite}

/* mobile views inside the phone (dashboard, quick order, order form) */
.mob-body{display:none;flex-direction:column;flex:1;min-height:0}
.mob-body.on{display:flex}
.mob-body[data-view="dash"]{display:none}
.mob-body[data-view="dash"].on{display:flex}
.mq-tabs{display:flex;gap:9px;border-bottom:1px solid var(--m-border);margin:6px 0 5px;padding:0 2px}
.mq-tabs i{font-style:normal;font-size:6.5px;font-weight:600;color:var(--m-sub);padding-bottom:4px;border-bottom:1.5px solid transparent;white-space:nowrap}
.mq-tabs i.done{color:#16a34a;border-bottom-color:#16a34a}
.mq-tabs i.on{color:var(--m-text);border-bottom-color:var(--m-text)}
.mq-sub{font-size:6px;color:var(--m-sub);margin:0 0 5px}
.mq-list{display:flex;flex-direction:column;gap:3px}
.mq-row{background:var(--m-card);border:1px solid var(--m-border);border-radius:5px;padding:4px 6px;display:flex;flex-direction:column;gap:1px}
.mq-row b{font-size:6.5px;color:var(--m-text);font-weight:600}
.mq-row span{font-size:5.5px;color:var(--m-sub)}
.mq-row.on{border-color:#2563eb;background:rgba(37,99,235,.10)}
.mq-row.hl{box-shadow:0 0 0 1.5px var(--lime)}
.mq-btn{margin-top:8px;align-self:flex-end;padding:0 10px;background:#2563eb;color:#fff;border:0;border-radius:6px;height:18px;font:600 7px var(--font-app),sans-serif}
.mq-btn.hl{box-shadow:0 0 0 2px var(--lime)}
.mq-h{font-size:8px;font-weight:700;color:var(--m-text);margin:6px 0 2px}
.mq-h span{display:block;font-size:5.5px;font-weight:500;color:var(--m-sub)}
.mq-l{font-size:5.5px;color:var(--m-sub);margin:5px 0 2px}
.mq-f{background:var(--m-card);border:1px solid var(--m-border);border-radius:5px;height:16px;padding:0 6px;font-size:6.5px;color:var(--m-text);display:flex;align-items:center}
.mq-f.ph{color:var(--m-sub)}
.mq-f.hl,.mq-seg.hl{box-shadow:0 0 0 1.5px var(--lime)}
.mq-seg{display:flex;border:1px solid #2563eb;border-radius:5px;overflow:hidden;height:16px}
.mq-seg i{flex:1;font-style:normal;font-size:6.5px;text-align:center;line-height:16px;color:var(--m-text);border-right:1px solid rgba(37,99,235,.5)}
.mq-seg i:last-child{border-right:0}
.mq-seg i.on{background:#2563eb;color:#fff}
.mq-notes{background:var(--m-banner-bg);border-radius:5px;padding:4px 6px;font-size:5.5px;color:var(--m-banner-text);margin-top:5px;line-height:1.35}
.mq-notes b{display:block;color:var(--m-banner-title);font-size:5.5px}

/* app launch + order created moments (desktop) */
.app-splash,.app-success{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;pointer-events:none;transition:opacity .35s ease}
.app-splash{background:#0d1524}
.app-splash img{height:26px;width:auto}
.app-splash span{font:500 12px var(--font-app),sans-serif;color:#9fadc6;letter-spacing:.02em}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.15);border-top-color:var(--teal);animation:spin .8s linear infinite;margin-top:6px}
@keyframes spin{to{transform:rotate(360deg)}}
.app-success{background:var(--app-bg)}
.app-success b{font:700 18px var(--font-app),sans-serif;color:var(--app-strong)}
.app-success span{font:500 12px var(--font-app),sans-serif;color:var(--app-mut)}
.app-success em{font:500 10.5px var(--font-app),sans-serif;color:var(--app-dim);font-style:normal;margin-top:6px}
.check{width:46px;height:46px;border-radius:50%;background:var(--app-green);position:relative;transform:scale(.6);opacity:0}
.check::after{content:"";position:absolute;left:16px;top:9px;width:11px;height:20px;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg)}
.show .check,.mob-body.on .check{animation:checkPop .5s var(--ease-pop) forwards}
@keyframes checkPop{to{transform:scale(1);opacity:1}}
.app-splash.show,.app-success.show{opacity:1}
/* phone splash + success */
.mob-body.splash{position:absolute;inset:0;z-index:3;background:#0d1524;margin:0;padding:0;align-items:center;justify-content:center;gap:5px}
.mob-body.splash img{width:26px;height:26px}
.mob-body.splash b{font:700 10px var(--font-app),sans-serif;color:#fff}
.mob-body.splash span{font:500 6px var(--font-app),sans-serif;color:#9fadc6}
.mob-body.success{align-items:center;justify-content:center;gap:4px;text-align:center}
.mob-body.success .check{width:24px;height:24px}
.mob-body.success .check::after{left:8px;top:4px;width:6px;height:11px;border-width:2px}
.mob-body.success b{font:700 9px var(--font-app),sans-serif;color:var(--m-text)}
.mob-body.success span{font:500 5.5px var(--font-app),sans-serif;color:var(--m-sub)}

/* auto-run offer */
.offer{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:var(--r-md);padding:13px 16px;display:flex;flex-direction:column;gap:3px;z-index:9;box-shadow:var(--sh-lg),0 0 0 1px var(--edge);max-width:340px;opacity:0;translate:0 10px;visibility:hidden;transition:opacity var(--dur-2) ease,translate var(--dur-2) var(--ease),left var(--dur-3) var(--ease),visibility 0s linear var(--dur-2)}
.offer.show{opacity:1;translate:0 0;visibility:visible;transition:opacity var(--dur-2) ease,translate var(--dur-2) var(--ease),left var(--dur-3) var(--ease),visibility 0s}
.offer b{font:600 var(--t-3) Poppins,sans-serif}
.offer span{font-size:var(--t-2);color:var(--on-dark-soft);line-height:1.45}
.offer-btns{display:flex;gap:8px;margin-top:8px}
.offer-yes,.offer-no{height:32px;display:inline-flex;align-items:center;border-radius:var(--r-sm);padding:0 13px;font:600 var(--t-3) Poppins,sans-serif;cursor:pointer;border:1px solid transparent;transition:filter var(--dur-1) ease,background-color var(--dur-1) ease}
.offer-yes{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.offer-yes:hover{filter:brightness(.96)}
.offer-no{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.offer-no:hover{background:rgba(255,255,255,.06)}

/* ghost cursor + hint */
.ghost{position:absolute;left:0;top:0;width:22px;height:22px;z-index:20;pointer-events:none;opacity:0;transition:opacity .3s}
.ghost.show{opacity:1}
.ghost-in{width:22px;height:22px;transition:transform .12s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.ghost.press .ghost-in{transform:scale(.78)}
.ghost svg{width:22px;height:22px;transform:translate(-3px,-2px)}
.hint{position:absolute;right:10px;bottom:10px;background:var(--ink);color:#fff;border-radius:12px;padding:8px 12px 8px 14px;font:500 12.5px Poppins,sans-serif;display:flex;gap:10px;align-items:center;white-space:nowrap;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);z-index:21;transition:left .3s ease,top .3s ease,opacity .25s ease;pointer-events:none}
.hint.placed{right:auto;bottom:auto;background:var(--ink)}
.hint.placed::after{content:"";position:absolute;left:var(--ax,50%);width:10px;height:10px;background:var(--ink);transform:translateX(-50%) rotate(45deg)}
.hint.placed.above::after{bottom:-5px}
.hint.placed.below::after{top:-5px}
.hint.placed.turn{background:var(--lime-deep);color:#fff}
.hint.placed.turn::after{background:var(--lime-deep)}
.hint.placed.turn .hint-step{color:#fff;opacity:.85}
.hint-step{color:var(--lime);font-weight:600}


@media (max-width:960px){
  .chapter{padding:14px 0 28px}
  .site-nav nav,.login{display:none}
  .intro{padding:24px 0 22px}
}


#ch1{scroll-margin-top:64px}

[hidden]{display:none !important}

/* spotlight: dim the rest of the screen around the highlighted control */
.dim{position:absolute;inset:0;background:rgba(8,13,22,.42);opacity:0;transition:opacity .3s ease;pointer-events:none}
.dim.show{opacity:1}
#dim-app{z-index:2}
#dim-modal{z-index:5;border-radius:12px}
#dim-sms{z-index:5}
.modal{position:relative}
.modal .invite{position:relative;z-index:6}

/* inline tip under a highlighted form field */
.turn-line{font:600 10px var(--font-app),sans-serif;color:var(--lime-deep);margin-top:5px;display:flex;align-items:center;gap:6px;animation:fadeUp .3s ease;white-space:nowrap}
.turn-line::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime-deep);flex:none}
.hint.quiet{opacity:.55}

/* no spotlight, no floating callout (Luis): the control's pulse and the inline line carry the guidance */
.dim,.hint{display:none !important}
.pstatus{min-width:0;max-width:46%;white-space:normal;text-align:right;line-height:1.3}

/* planned truck count: number field with a stepper */
.numwrap{display:flex;align-items:stretch;height:28px}
.numwrap .fld{border-radius:7px 0 0 7px;border-right:0;-moz-appearance:textfield;appearance:textfield}
.numwrap .fld::-webkit-outer-spin-button,.numwrap .fld::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.numwrap.invite{border-radius:7px}
.spin-btns{display:flex;flex-direction:column;width:22px;border:1px solid var(--app-border);border-radius:0 7px 7px 0;overflow:hidden;background:var(--app-input)}
.spin-btns button{flex:1;border:0;background:transparent;color:var(--app-mut);cursor:pointer;position:relative;padding:0}
.spin-btns button + button{border-top:1px solid var(--app-border)}
.spin-btns button:hover{background:var(--app-hl);color:var(--app-strong)}
.spin-btns button::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translate(-50%,-30%) rotate(-135deg)}
.spin-btns button[data-d="-1"]::after{transform:translate(-50%,-70%) rotate(45deg)}

/* ---------- chapter 2: dispatch planning (Planning > Dispatch Planning, from the recording) ---------- */
.app-side nav a.sub{padding:5px 8px 5px 29px;font-size:10px}
.orders-row .order-card{flex:1;width:auto;min-width:0}
.app-main.plan{position:relative}
.datenav{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:500;color:var(--app-strong);margin-left:6px}
.datenav i{width:6px;height:6px;border-left:1.5px solid var(--app-mut);border-bottom:1.5px solid var(--app-mut);transform:rotate(45deg)}
.datenav i.dn-next{transform:rotate(-135deg)}
.pl-card{background:var(--app-panel);border:1px solid var(--app-line);border-radius:10px;padding:8px 11px;flex:1;display:flex;flex-direction:column;gap:7px;min-height:0;overflow:hidden}
.pl-tabs{display:flex;gap:16px;border-bottom:1px solid var(--app-line);align-items:flex-end}
.pt{font-size:12px;font-weight:600;color:var(--app-dim);padding:2px 0 6px;border-bottom:2px solid transparent;cursor:pointer;transition:.2s;margin-bottom:-1px}
.pt:hover{color:var(--app-text)}
.pt.on{color:var(--app-strong);border-bottom-color:var(--app-strong)}
.pl-actions{margin-left:auto;display:flex;gap:6px;padding-bottom:5px}
.pl-bar{display:flex;align-items:center;gap:8px}
.pl-bar .qo-search{flex:0 0 150px;border-color:var(--app-border)}
.pl-bar .ghostbtn{margin-left:auto}
.pl-scroll{flex:1;min-height:0;overflow:auto}
.pl-table td{padding:6px 7px;white-space:nowrap}
.mut{color:var(--app-dim)}
.pl-row.on{background:rgba(63,109,246,.16);box-shadow:inset 2px 0 0 var(--app-blue)}
.pl-row.invite{box-shadow:inset 0 0 0 2px var(--lime-deep);animation:none}
.pill.open{background:rgba(63,140,246,.16);color:#3f8cf6}
.pill.assigned{background:rgba(167,139,250,.18);color:#a78bfa}
.pill.finalized,.pill.accepted{background:rgba(87,196,137,.16);color:var(--app-green)}
.pill.unassigned{background:rgba(232,163,61,.16);color:var(--app-amber)}
.stage[data-theme="light"] .pill.open{color:#2563eb}.stage[data-theme="light"] .pill.assigned{color:#7c3aed}.stage[data-theme="light"] .pill.finalized,.stage[data-theme="light"] .pill.accepted{color:#15803d}.stage[data-theme="light"] .pill.unassigned{color:#b45309}
.cs{font-size:8px;font-weight:600;border-radius:999px;padding:2px 6px;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.cs::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor}
.cs.on{background:rgba(87,196,137,.16);color:var(--app-green)}
.cs.off{background:rgba(240,88,106,.16);color:var(--app-red)}
.cs.none{background:var(--app-hl);color:var(--app-dim)}

/* truck assignment drawer */
.ta{position:absolute;top:0;right:0;bottom:0;width:79%;background:var(--app-modal);border-left:1px solid var(--app-border);box-shadow:-24px 0 44px -24px rgba(0,0,0,.65);z-index:4;display:flex;flex-direction:column;gap:5px;padding:10px 12px 8px;font-size:9.5px;color:var(--app-text);animation:drawerIn .28s ease;overflow:hidden}
@keyframes drawerIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.ta-h{display:flex;align-items:center;gap:8px}
.ta-h b{font-size:12.5px;font-weight:600;color:var(--app-strong);margin-right:auto}
.ta-h .x{font-size:15px;color:var(--app-mut);cursor:pointer;padding:0 2px}
.ta-order{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;color:var(--app-strong)}
.tag.req{background:var(--app-hl);color:var(--app-mut)}
.ta-tot{margin-left:auto;font-size:8.5px;color:var(--app-mut);font-weight:500}
.ta-tot b{font-size:12px;color:var(--app-strong);margin-right:3px}
.ta-meta{display:flex;flex-wrap:wrap;gap:3px 12px;color:var(--app-mut);font-size:9px}
.ta-meta .proj{color:var(--app-text);font-weight:600;background:var(--app-hl);border-radius:4px;padding:1px 6px}
.ta-meta b{color:var(--app-strong)}
.ta-route{display:flex;align-items:center;gap:8px}
.ta-loc{flex:1;background:var(--app-bg);border:1px solid var(--app-line);border-radius:6px;padding:4px 8px;font-size:9px;color:var(--app-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ta-route i{color:var(--app-mut);font-style:normal}
.ta-bar{display:flex;align-items:center;gap:6px;margin-top:2px}
.ta-bar .qo-search{flex:0 0 172px;border-color:var(--app-border);height:24px;white-space:nowrap}
.ta-bar .ghostbtn{margin-left:auto}
.ta-bar .ghostbtn + .ghostbtn{margin-left:0}
.ghostbtn.act{cursor:pointer;background:transparent;font-family:var(--font-app),sans-serif}
.ghostbtn.act:hover{color:var(--app-strong);border-color:var(--app-mut)}
.ta-sec{border-top:1px solid var(--app-line);padding-top:5px;display:flex;flex-direction:column;gap:4px;min-height:0}
.ta-sec-h{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;color:var(--app-strong)}
.ta-sec-h .chev{width:5px;height:5px;border-right:1.4px solid var(--app-mut);border-bottom:1.4px solid var(--app-mut);transform:rotate(-45deg);margin:0 3px}
.ta-sec-h .chev.down{transform:rotate(45deg) translateY(-1px)}
.cnt{background:var(--app-hl);border-radius:4px;padding:1px 5px;font-size:8.5px;color:var(--app-mut);font-weight:600}
.ta-cols,.ta-row{display:grid;grid-template-columns:14px 42px 62px 1fr 96px 40px;gap:8px;align-items:center;padding:3px 6px}
.ta-cols{font-size:8.5px;color:var(--app-mut);font-weight:600}
.ta-cols.draft,.ta-row.draft{grid-template-columns:42px 1fr 72px 72px 60px 62px}
.ta-list{overflow:auto;display:flex;flex-direction:column;max-height:128px;min-height:0}
.ta-list.short{max-height:96px}
.ta-row{border-radius:5px;cursor:pointer;font-size:9.5px;color:var(--app-text);transition:background .15s;white-space:nowrap}
.ta-row span{overflow:hidden;text-overflow:ellipsis}
.ta-row b{color:var(--app-strong);font-weight:600}
.ta-row:hover{background:var(--app-hl)}
.ta-row.chk{background:rgba(63,109,246,.14)}
.ta-row.draft{cursor:default}
.ta-row .rate{background:var(--app-input);border:1px solid var(--app-border);border-radius:4px;padding:2px 5px;font-size:8.5px}
.cb{width:11px;height:11px;border:1.4px solid var(--app-mut);border-radius:3px;position:relative;flex:none}
.ta-row.chk .cb{background:var(--app-blue);border-color:var(--app-blue)}
.ta-row.chk .cb::after{content:"";position:absolute;left:3px;top:0.5px;width:3px;height:6px;border-right:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(45deg)}
.ta-row.invite{animation:none;box-shadow:inset 0 0 0 2px var(--lime-deep);background:rgba(181,220,121,.10)}
.ta-assign{width:100%;margin-top:2px;padding:6px 10px}
[data-off]{opacity:.45;cursor:default}
.ta-foot{display:flex;align-items:center;gap:8px;margin-top:2px}
.ta-foot em{font-style:normal;color:var(--app-dim);font-size:8.5px;margin-left:auto}

/* assignment limits dialog */
.limits{position:absolute;inset:0;z-index:5;background:var(--app-scrim);display:flex;align-items:center;justify-content:center;padding-left:150px}
.limits-box{background:var(--app-modal);border:1px solid var(--app-line);border-radius:12px;width:300px;padding:14px 16px 14px;display:flex;flex-direction:column;gap:9px;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);animation:modalIn .22s ease}
.limits-h{display:flex;justify-content:space-between;align-items:center}
.limits-h b{font-size:12.5px;font-weight:600;color:var(--app-strong)}
.limits-h .x{color:var(--app-mut);font-size:15px;cursor:pointer}
.limits-box p{margin:0;font-size:9.5px;color:var(--app-mut);line-height:1.4}
.limits-btns{display:flex;gap:8px;margin-top:4px}
.limits-btns .chip,.limits-btns .btn-primary{flex:1;height:28px;border-radius:7px}
.limits-btns .chip{border-color:var(--app-blue);color:var(--app-text)}

/* review tab */
.rv{display:flex;flex-direction:column;gap:6px;overflow:auto;flex:1;min-height:0}
.rv-o{background:var(--app-bg);border:1px solid var(--app-line);border-radius:8px;padding:7px 10px}
.rv-h{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--app-mut)}
.rv-h b{color:var(--app-strong);font-size:11px;font-weight:600}
.rv-trucks{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.tk{font-size:8.5px;font-weight:600;border-radius:5px;padding:2px 7px;background:var(--app-hl);color:var(--app-text);border:1px solid transparent;transition:.25s}
.tk.sent{border-color:rgba(232,163,61,.55);color:var(--app-amber);background:rgba(232,163,61,.08)}
.tk.acc{background:rgba(87,196,137,.16);color:var(--app-green);border-color:transparent}
.rv-foot{display:flex;align-items:center;gap:10px;border-top:1px solid var(--app-line);padding-top:8px;margin-top:auto}
.rv-sum{font-size:10px;color:var(--app-mut)}
.rv-sum b{color:var(--app-green);font-size:12px}
.rv-foot .btn-primary{margin-left:auto;padding:7px 14px}

/* phone: driver's app */
.drv-h{display:flex;align-items:baseline;gap:5px;padding:7px 2px 5px}
.drv-h b{font-size:9.5px;font-weight:700}
.drv-h span{font-size:5.5px;color:var(--m-sub);margin-left:auto}
.drv-card{background:var(--m-card);border:1px solid var(--m-border);border-left:3px solid var(--teal);border-radius:6px;padding:6px 7px;display:flex;flex-direction:column;gap:2px;animation:cardIn .5s var(--ease)}
.drv-tag{font-size:5.5px;font-weight:600;color:#2563eb;letter-spacing:.04em;text-transform:uppercase}
.drv-card > b{font-size:8.5px;font-weight:700;color:var(--m-text)}
.drv-card > span{font-size:6px;color:var(--m-sub)}
.drv-route{color:var(--m-text) !important}
.drv-btns{display:flex;gap:4px;margin-top:6px}
.drv-btns button{flex:1;height:17px;border-radius:5px;font:600 6.5px var(--font-app),sans-serif;cursor:pointer;border:1px solid var(--m-seg-border);background:var(--m-card);color:var(--m-text)}
.drv-btns .drv-yes{background:#16a34a;border-color:#16a34a;color:#fff}
.drv-yes.invite{animation:invitePulse 1.5s ease-in-out infinite;border-color:var(--lime-deep) !important}
.drv-ok{background:var(--m-card);border:1px solid var(--m-border);border-radius:6px;padding:10px 7px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;animation:cardIn .5s ease}
.drv-ok .check{width:22px;height:22px}
.drv-ok .check::after{left:7px;top:3px;width:6px;height:10px;border-width:2px}
.drv-ok b{font-size:8px;font-weight:700;color:var(--m-text);margin-top:3px}
.drv-ok span{font-size:5.5px;color:var(--m-sub);line-height:1.4}
.drv-more{margin-top:auto;margin-bottom:16px;background:var(--m-banner-bg);border-radius:5px;padding:5px 7px;font-size:5.5px;color:var(--m-banner-text);line-height:1.4}
.drv-more b{display:block;color:var(--m-banner-title);font-size:6px}
.drv-more em{font-style:normal;font-weight:700}
.mq-l b{color:var(--m-text)}

/* driver's lock screen: the offer lands as a push notification */
.mob-body.notif{position:absolute;inset:0;z-index:3;margin:0;background:linear-gradient(#22304f,#0b1020);align-items:center;padding:34px 8px 0;gap:2px}
.lk-who{font-size:5.5px;color:#9fadc6;letter-spacing:.04em}
.lk-time{font:600 26px/1 var(--font-app),sans-serif;color:#fff;letter-spacing:-.02em;margin-top:10px}
.lk-date{font-size:6.5px;color:#c7d0e0;margin:2px 0 16px}
.lk-card{width:100%;background:rgba(255,255,255,.94);border:0;border-radius:8px;padding:6px 7px;display:flex;gap:6px;align-items:flex-start;text-align:left;cursor:pointer;font-family:var(--font-app),sans-serif;animation:notifIn .5s var(--ease)}
.lk-card img{width:14px;height:14px;border-radius:4px;flex:none;margin-top:1px}
.lk-card > div{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.lk-app{display:flex;font-size:5px;font-weight:600;color:#4b5563;letter-spacing:.06em;text-transform:uppercase}
.lk-app span{margin-left:auto;font-weight:500;text-transform:none}
.lk-card b{font-size:7px;color:#111827;font-weight:600}
.lk-card > div > span{font-size:5.5px;color:#374151;line-height:1.35}
.lk-card em{font-style:normal;font-size:5.5px;color:#2563eb;font-weight:600;margin-top:2px}
.lk-card.invite{animation:invitePulse 1.5s ease-in-out infinite}
@keyframes notifIn{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
.phone.buzz .mob-body.notif{animation:buzz .6s ease}
@keyframes buzz{0%,100%{transform:none}15%{transform:translateX(-3px)}30%{transform:translateX(3px)}45%{transform:translateX(-2px)}60%{transform:translateX(2px)}75%{transform:translateX(-1px)}}
.tk.acc.new{animation:tkPop .5s ease}
@keyframes tkPop{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}

/* ---------- the handoff: office on the left, cab on the right ---------- */
.who{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:#fff;background:var(--teal-deep);border-radius:999px;padding:3px 8px;margin-left:auto}
.who + .sample{margin-left:8px}
.stage.cab{--dx:-103.2;--px:303.65}
/* phone at .85 until the cab takes focus: [desktop 760][24][phone 163.2] = 947.2, re-centred so the gutters match */
.stage.cab:not(.focus){--dx:-93.6;--px:312.95}
/* the composition always fits inside the gutters; clip the phone's off-stage slides so they never add a horizontal scrollbar */
.chapter{overflow-x:clip}
.stage.cab.focus .desktop{transform:translateX(-50%) scale(.965)}
.stage.cab.focus .phone{transform:scale(calc(var(--s,1) * .95))}
.phone{transition:translate var(--dur-3) var(--ease),transform var(--dur-3) var(--ease),opacity var(--dur-3) ease,visibility 0s}
.phone.offL{--sx:calc(-350px * var(--s,1));opacity:0}
.phone.offR{--sx:calc(350px * var(--s,1));opacity:0}
.phone.notrans{transition:none !important}
.phone.cab{box-shadow:inset 0 0 0 1.5px #2b2f38,inset 0 0 0 4px #0b0d12,inset 0 0 0 5.5px #1a1e27,0 30px 60px -18px rgba(0,0,0,.7)}
.phone.cab .pbz{background:#23272f}
.plate{display:none;position:absolute;top:-30px;left:50%;transform:translateX(-50%);white-space:nowrap;font:500 11px Poppins,sans-serif;color:var(--text-soft);background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 11px;box-shadow:0 6px 14px -8px rgba(20,29,31,.3)}
.plate b{color:var(--ink);font-weight:600}
.phone.cab .plate{display:block;animation:fadeUp .4s ease}
.lk-who{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:6px;color:#9fadc6;letter-spacing:.03em}
.lk-who b{font-size:8.5px;color:#fff;font-weight:600;letter-spacing:0}
.lk-time{margin-top:8px}
/* the offer card that flies from the Review chip to the driver's phone, and the green pulse that flies back */
.fly{position:absolute;left:0;top:0;z-index:22;pointer-events:none;opacity:0;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:9px;padding:6px 10px;font-family:var(--font-app),sans-serif;box-shadow:0 14px 30px -10px rgba(20,29,31,.45);transform:translate(-50%,-50%)}
.fly i{width:8px;height:8px;border-radius:50%;background:var(--app-blue);flex:none}
.fly b{font-size:10px;color:var(--ink);font-weight:600;white-space:nowrap}
.fly span{font-size:10px;color:var(--text-soft);white-space:nowrap}
.pulse-dot{position:absolute;left:0;top:0;z-index:22;pointer-events:none;opacity:0;width:12px;height:12px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.25);transform:translate(-50%,-50%)}
.tk[data-n]{position:relative}
.tk.lift{box-shadow:0 0 0 2px rgba(63,109,246,.45)}

/* ---------- the driver app (My Day feed, camera, ticket form), from the 2026-09-17 recording ---------- */
/* the notification tap: the card lifts, the lock screen gives way and the app icon grows into the driver app's dark splash */
.lk-card.lifting{animation:lkLift .28s var(--ease-out) forwards;pointer-events:none}
@keyframes lkLift{to{opacity:0;transform:translateY(-8px) scale(.94)}}
.mob-body.notif.launch .lk-who,.mob-body.notif.launch .lk-time,.mob-body.notif.launch .lk-date{opacity:0;transform:scale(.9);transition:opacity .3s ease,transform .35s ease}
.dv-launch{position:absolute;inset:0;z-index:6;background:#242c3b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-family:var(--font-app),sans-serif}
.dv-launch[hidden]{display:none}
.dl-status{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;font:600 7px var(--font-app),sans-serif;padding:26px 14px 0;color:#fff}
#dl-icon{width:34px;height:34px;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
#dl-word{display:flex;flex-direction:column;align-items:center;gap:1px}
#dl-word b{font-size:11px;font-weight:700;color:#fff;letter-spacing:-.01em}
#dl-word span{font-size:5.5px;font-weight:600;color:#61b0bc;letter-spacing:.16em;text-transform:uppercase}
.mob-body.driver,.mob-body.cam,.mob-body.tform{position:absolute;inset:0;z-index:3;margin:0;padding:0;background:#eef0f3;font-family:var(--font-app),sans-serif;color:#111827}
.dv-status{display:flex;justify-content:space-between;font:600 7px var(--font-app),sans-serif;padding:26px 14px 0;color:#fff;background:#242c3b}
.dv-top{background:#242c3b;color:#fff;display:flex;align-items:center;gap:6px;padding:7px 10px 8px}
.dv-tog{width:16px;height:9px;border-radius:5px;background:#61b0bc;position:relative;flex:none}
.dv-tog::after{content:"";position:absolute;right:1px;top:1px;width:7px;height:7px;border-radius:50%;background:#fff}
.dv-who{display:flex;flex-direction:column;line-height:1.15;margin-right:auto}
.dv-who b{font-size:7.5px;font-weight:600}
.dv-who span{font-size:5.5px;color:#aab3c2}
.dv-ic{width:9px;height:9px;border:1.2px solid #dfe6ef;border-radius:50%;margin-left:4px}
.dv-refresh{border-top-color:transparent}
.dv-feed{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:6px 7px 6px}
.dv-time{text-align:center;font-size:5px;color:#8a94a6;margin:2px 0}
.dv-msg{max-width:86%;background:#fff;border-radius:6px;padding:5px 7px;font-size:5.8px;line-height:1.4;color:#1f2937;box-shadow:0 1px 2px rgba(0,0,0,.05);animation:cardIn .35s ease}
.dv-msg b{font-weight:600}
.dv-msg .ln{display:block;margin-top:3px;color:#374151}
.dv-msg .ln u{text-decoration:underline}
.dv-msg.out{align-self:flex-end;background:#1f2937;color:#fff}
.dv-btns{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin:2px 0 3px;animation:cardIn .35s ease}
.dv-b{border:0;border-radius:14px;height:16px;padding:0 9px;font:600 5.8px var(--font-app),sans-serif;color:#fff;cursor:pointer;white-space:nowrap}
.dv-b.grey{background:#374151}.dv-b.green{background:#2e8b57}.dv-b.red{background:#b3261e}.dv-b.teal{background:#61a3ad}
.dv-b.invite{animation:invitePulse 1.5s ease-in-out infinite}
.dv-tabs{background:#fff;border-top:1px solid #d9dee5;display:flex;justify-content:space-around;padding:4px 4px 10px}
.dv-tabs i{font-style:normal;font-size:4.5px;color:#6b7280;display:flex;flex-direction:column;align-items:center;gap:2px}
.dv-tabs i.on{color:#111827;font-weight:600}
.dv-tabs u{display:block;width:8px;height:8px;border:1.1px solid currentColor;border-radius:2px;text-decoration:none}
.dv-tabs .tb-up{border-radius:50% 50% 2px 2px}.dv-tabs .tb-msg{border-radius:3px 3px 3px 0}.dv-tabs .tb-set{border-radius:50%}
.dv-img{align-self:flex-start;max-width:70%;animation:cardIn .35s ease}
/* the scale ticket: drawn, so it can carry your material, truck and tonnage */
.ticket{background:#efe9dc;border:1px solid #d6cdb8;border-radius:3px;padding:6px 7px;width:104px;color:#3a3226;font-family:var(--font-app),sans-serif;position:relative;box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.ticket .th{font-size:5.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ticket .ts{font-size:4.5px;color:#7a6f5e;margin-bottom:4px;display:block}
.ticket .tr{display:flex;justify-content:space-between;font-size:4.8px;border-top:1px dashed #cfc5ae;padding:2px 0}
.ticket .tr b{font-weight:600}
.ticket .tsig{margin-top:3px;font:italic 6px "Snell Roundhand","Brush Script MT",cursive;color:#2b4a7a;border-bottom:1px solid #b9ae95;padding-bottom:1px}
.ticket .stamp{position:absolute;right:5px;top:22px;transform:rotate(-12deg);border:1.2px solid #b3261e;color:#b3261e;font:700 4.5px var(--font-app),sans-serif;letter-spacing:.06em;padding:1px 3px;border-radius:2px;opacity:.85}
.ticket.mini{width:78px;transform:rotate(-2deg);margin:2px 0 2px 4px}
.ticket.big{width:120px;transform:rotate(-3deg)}
.mob-body.cam{background:#0b0d12}
.cam-top{display:flex;justify-content:space-between;padding:30px 12px 0;color:#fff}
.cam-x{font-style:normal;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.18);font-size:10px;line-height:14px;text-align:center}
.cam-flash{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.18)}
.cam-view{flex:1;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 60%,#4a4238 0%,#1c1a17 60%,#0b0d12 100%);overflow:hidden}
.cam-view .ticket{transform:rotate(-4deg) scale(1.15);transition:box-shadow .3s}
.cam-view.found .ticket{box-shadow:0 0 0 2px rgba(97,176,188,.9),0 0 0 6px rgba(97,176,188,.25),0 6px 14px -6px rgba(0,0,0,.5)}
.cam-cap{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.65);color:#fff;font-size:5px;padding:2px 6px;border-radius:3px;white-space:nowrap}
.cam-bar{background:#121620;height:38px;display:flex;align-items:center;justify-content:center;position:relative}
.cam-gal{position:absolute;left:16px;width:10px;height:8px;border:1.2px solid #dfe6ef;border-radius:2px}
#cam-shutter{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid #121620;box-shadow:0 0 0 1.5px #fff;cursor:pointer}
#cam-shutter.invite{box-shadow:0 0 0 1.5px #fff,0 0 0 4px rgba(181,220,121,.9)}
.cam-review{position:absolute;inset:0;background:#0b0d12;display:flex;flex-direction:column}
.cam-shot{flex:1;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 55%,#4a4238 0%,#1c1a17 70%)}
.cam-rev-bar{height:38px;background:#121620;display:flex;align-items:center;justify-content:space-between;padding:0 14px;color:#dfe6ef;font-size:6px}
#cam-done{background:#fff;color:#111827;border:0;border-radius:10px;height:15px;padding:0 9px;font:600 6px var(--font-app),sans-serif;cursor:pointer}
.mob-body.tform{background:rgba(20,24,30,.9);justify-content:flex-end}
.tf-sheet{background:#fff;border-radius:10px 10px 0 0;padding:10px 9px 12px;display:flex;flex-direction:column;gap:4px;animation:sheetUp .3s ease}
@keyframes sheetUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.tf-sheet b{font-size:6px;font-weight:600;text-align:center;color:#111827;margin-top:3px}
.tf-in{height:16px;border:1px solid #76869b;border-radius:8px;padding:0 7px;font:500 6.5px var(--font-app),sans-serif;color:#111827;outline:0;width:100%;background:#fff}
.tf-in::placeholder{color:#9aa4b2}
.tf-in:focus,.tf-in.focus{border-color:#2563eb;box-shadow:0 0 0 1.5px rgba(37,99,235,.25)}
.tf-in.invite{border-color:var(--lime-deep) !important}
#tf-done{margin-top:5px;background:#61a3ad;color:#fff;border:0;border-radius:8px;height:17px;font:600 6.5px var(--font-app),sans-serif;cursor:pointer}
#tf-done.invite{animation:invitePulse 1.5s ease-in-out infinite}

/* ---------- dispatch page: order cards + live map ---------- */
.stage[data-theme="light"]{--map-bg:#e9edf0;--map-road:#fff;--map-major:#f6f0d8;--map-water:#cfe3f2;--map-lbl:#6b7785}
.app-main.disp{padding:0;flex-direction:row;gap:0}
.dc-col{width:300px;flex:none;padding:10px 12px;display:flex;flex-direction:column;gap:7px;min-height:0;border-right:1px solid var(--app-line)}
.dc-bar{display:flex;justify-content:space-between;font-size:10.5px;font-weight:600;color:var(--app-strong)}
.dc-bar i{display:inline-block;width:8px;height:7px;background:var(--app-blue);clip-path:polygon(0 0,100% 0,60% 55%,60% 100%,40% 100%,40% 55%);margin-left:4px;vertical-align:middle}
.dc-stats{display:flex;gap:10px;font-size:8px;color:var(--app-mut);white-space:nowrap;overflow:hidden}
.dc-stats i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:3px;vertical-align:middle}
.dc-stats i.amber{background:var(--app-amber)}.dc-stats i.blue{background:var(--app-blue)}.dc-stats i.green{background:var(--app-green)}
.dc-stats b{color:var(--app-strong)}
.dc-list{display:flex;flex-direction:column;gap:7px;overflow:hidden;min-height:0}
.dcard{background:var(--app-panel);border:1px solid var(--app-line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2.5px;font-size:8.5px;color:var(--app-mut);flex:none}
.dcard.on{border-color:rgba(63,109,246,.55)}
.dc-t{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:var(--app-strong)}
.dc-t span{font-weight:500;color:var(--app-mut);font-size:9px}
.dc-t .more{margin-left:auto;color:var(--app-dim)}
.dc-l{display:flex;gap:6px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-l b{color:var(--app-text);font-weight:500}
.dc-l .up,.dc-l .dn{width:9px;height:9px;border-radius:50%;flex:none;position:relative}
.dc-l .up{background:#e8863d}.dc-l .dn{background:#3f8cf6}
.dc-l .up::after,.dc-l .dn::after{content:"";position:absolute;left:3px;top:2.2px;width:3px;height:3px;border-left:1.3px solid #fff;border-top:1.3px solid #fff;transform:rotate(45deg)}
.dc-l .dn::after{top:1.8px;transform:rotate(225deg)}
.dc-pct{font-size:10px;font-weight:600;color:var(--app-green);margin-top:2px}
.dc-bar2{height:12px;background:var(--app-track);border-radius:3px;position:relative;overflow:hidden;display:flex}
.dc-bar2 i{display:block;height:100%;transition:width .6s ease}
.dc-bar2 .rec{background:#3f8cf6}.dc-bar2 .tra{background:var(--teal)}
.dc-bar2 em{position:absolute;right:6px;top:0;line-height:12px;font-size:8px;color:var(--app-text);font-style:normal}
.dc-leg{display:flex;gap:9px;font-size:7.5px;white-space:nowrap}
.dc-leg i{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:3px;vertical-align:middle;background:#3f8cf6}
.dc-leg span:nth-child(2) i{background:var(--teal)}.dc-leg span:nth-child(3) i{background:var(--app-dim)}
.dc-ev{font-size:7.5px;color:var(--app-mut);display:flex;gap:6px;align-items:center;animation:fadeUp .35s ease}
.dc-ev i{width:5px;height:5px;border-radius:50%;background:var(--app-green);flex:none}
.dc-ev b{color:var(--app-text);font-weight:500}
.dc-f{display:flex;gap:12px;align-items:center;border-top:1px solid var(--app-line);margin-top:4px;padding-top:5px;font-size:8.5px}
.dc-f b{color:var(--app-strong);font-weight:600;margin-left:3px}
.dc-f .assign{margin-left:auto;color:var(--app-text);font-weight:500}
.dmap{flex:1;position:relative;min-width:0;overflow:hidden}
.map{position:absolute;inset:0;width:100%;height:100%;font-family:var(--font-app),sans-serif}
.m-bg{fill:var(--map-bg)}.m-water{fill:var(--map-water)}
.m-road path{fill:none;stroke:var(--map-road);stroke-width:2.5;stroke-linecap:round}
.m-road.major path{stroke:var(--map-major);stroke-width:5}
.m-lbl text{font-size:8px;fill:var(--map-lbl);font-weight:500}
.m-route{fill:none;stroke:#6a4cff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.geo circle:first-child{fill:rgba(232,134,61,.16);stroke:#e8863d;stroke-width:1.2;stroke-dasharray:3 3}
.geo.drop circle:first-child{fill:rgba(63,140,246,.16);stroke:#3f8cf6}
.geo text{font-size:7.5px;fill:var(--app-text);text-anchor:middle;font-weight:600}
.geo.hit circle:first-child{animation:geoHit 1.2s ease 2}
@keyframes geoHit{0%{stroke-width:1.2;fill-opacity:.16}40%{stroke-width:3;fill-opacity:.4}100%{stroke-width:1.2;fill-opacity:.16}}
.mk circle{fill:#5b6b82;stroke:#fff;stroke-width:1.5}
.mk.other circle{fill:var(--teal-deep)}
.mk-n{font-size:7px;fill:#fff;text-anchor:middle;font-weight:700}
.mk.me circle{fill:#3f8cf6}
.mk.me .tr{fill:#fff}.mk.me .wh{fill:#3f8cf6;stroke:#fff;stroke-width:.8}
.mk-t{font-size:7px;fill:var(--app-text);text-anchor:middle;font-weight:600}
.mk.me.moving circle:first-child{animation:mkPulse 1.2s ease-in-out infinite}
@keyframes mkPulse{0%,100%{stroke-width:1.5}50%{stroke-width:3}}
.dmap-ctl{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:4px}
.dmap-ctl i{width:16px;height:16px;border-radius:4px;background:var(--app-panel);border:1px solid var(--app-line)}
.dmap-badge{position:absolute;left:8px;bottom:8px;background:var(--app-panel);border:1px solid var(--app-line);border-radius:999px;padding:2px 8px;font-size:8px;color:var(--app-mut)}
.dmap-badge::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--app-green);margin-right:4px;animation:blink 1.2s infinite}

/* geofence pins + truck status colors (from the real map legend) */
.geo .pin circle:first-child{fill:#ef8a3a;stroke:#fff;stroke-width:1.5}
.geo.drop .pin circle:first-child{fill:#4fc3f7}
.geo .pin-in{fill:#fff}.geo .pin-stem{stroke:#fff;stroke-width:1.6;stroke-linecap:round}
.mk.me .tr{fill:#fff}.mk.me .wh{stroke:#fff;stroke-width:.8}
.mk.me.st-off circle:first-child{fill:#8a93a3}.mk.me.st-off .wh{fill:#8a93a3}
.mk.me.st-driving circle:first-child{fill:#a8d86a}.mk.me.st-driving .tr{fill:#1f2a37}.mk.me.st-driving .wh{fill:#a8d86a;stroke:#1f2a37}
.mk.me.st-pickup circle:first-child{fill:#ef8a3a}.mk.me.st-pickup .wh{fill:#ef8a3a}
.mk.me.st-transit circle:first-child{fill:#5b8def}.mk.me.st-transit .wh{fill:#5b8def}
.mk.me.st-dropoff circle:first-child{fill:#7fd6a8}.mk.me.st-dropoff .tr{fill:#1f2a37}.mk.me.st-dropoff .wh{fill:#7fd6a8;stroke:#1f2a37}
.mk.me circle:first-child{transition:fill .4s ease}

/* dispatch page: live truck rows, route panel, truck popup */
.mk.me .halo{fill:rgba(63,140,246,.22);stroke:none;opacity:0;transition:opacity .4s}
.mk.me.sel .halo{opacity:1}
.mk.trail{opacity:.85}
.dc-bar2 .rec{position:relative}
.dc-bar2 .lbl{position:absolute;left:6px;top:0;line-height:12px;font-size:7.5px;color:#fff;font-weight:600;white-space:nowrap}
.dc-trucks{display:flex;flex-direction:column;margin-top:3px;border-top:1px solid var(--app-line)}
.dc-tr{display:grid;grid-template-columns:1fr auto;gap:1px 8px;padding:4px 0;border-bottom:1px solid var(--app-line);font-size:8px;color:var(--app-mut)}
.dc-tr:last-child{border-bottom:0}
.dc-tr .trk{display:flex;align-items:center;gap:5px;color:var(--app-strong);font-weight:600;font-size:8.5px}
.dc-tr .trk u{text-decoration:none;font-weight:500;color:var(--app-mut)}
.dc-tr .trk::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--app-green);flex:none}
.dc-tr .eta{justify-self:end;font-size:7.5px;font-weight:600;color:var(--app-green);background:rgba(87,196,137,.14);border-radius:999px;padding:1px 6px}
.dc-tr .eta.dim{color:var(--app-dim);background:transparent}
.dc-tr .st{display:flex;align-items:center;gap:5px}
.dc-tr .st::before{content:"";width:6px;height:6px;border-radius:50%;background:#8a93a3;flex:none}
.dc-tr .st.driving::before{background:#a8d86a}.dc-tr .st.pickup::before{background:#ef8a3a}.dc-tr .st.transit::before{background:#5b8def}.dc-tr .st.dropoff::before{background:#7fd6a8}
.dc-tr .st b{color:var(--app-text);font-weight:600}
.dc-tr .seq{justify-self:end;font-size:7.5px}
.dc-tr .seq b{color:var(--app-strong)}
.dc-tr.me{background:rgba(63,109,246,.08);margin:0 -10px;padding:4px 10px}
.dmap-route{position:absolute;left:8px;right:44px;top:8px;background:rgba(15,22,34,.92);border:1px solid var(--app-line);border-radius:8px;padding:6px 9px;display:flex;gap:12px;color:#e6ebf2;font-size:7.5px;z-index:2}
.stage[data-theme="light"] .dmap-route{background:rgba(255,255,255,.95);color:#1f2937}
.dmap-route > div{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.dmap-route b{font-size:6px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.dmap-route b.pk{color:#ef8a3a}.dmap-route b.dp{color:#4fc3f7}
.dmap-route span{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:7.5px}
.dmap-route em{font-style:normal;font-size:6.5px;color:var(--app-mut)}
.dmap-route .eta{margin-left:auto;flex:none;align-items:flex-start}
.dmap-route .eta b{color:var(--app-mut)}
.dmap-route .eta span{color:#4ade80;font-size:10px}
.dmap-pop{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(15,22,34,.94);border:1px solid var(--app-line);border-radius:8px;padding:7px 9px;color:#e6ebf2;display:flex;flex-direction:column;gap:6px;z-index:2;animation:fadeUp .3s ease}
.stage[data-theme="light"] .dmap-pop{background:rgba(255,255,255,.96);color:#1f2937}
.pop-h{display:flex;align-items:center;gap:5px;font-size:8px}
.pop-h b{font-size:10px;font-weight:700}
.pop-h span{color:var(--app-mut)}
.pop-pill{font-style:normal;font-size:6.5px;font-weight:600;border-radius:5px;padding:2px 5px;background:var(--app-hl);white-space:nowrap}
.pop-pill::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;margin-right:3px;vertical-align:middle;background:currentColor}
.pop-pill.on{color:#4ade80;background:rgba(74,222,128,.12)}
.pop-pill.st{color:#a8d86a;background:rgba(168,216,106,.12)}
.pop-pill.st.pickup{color:#ef8a3a;background:rgba(239,138,58,.14)}.pop-pill.st.transit{color:#5b8def;background:rgba(91,141,239,.14)}.pop-pill.st.dropoff{color:#7fd6a8;background:rgba(127,214,168,.14)}
.pop-pill.eta{color:var(--app-mut);background:var(--app-hl)}
.pop-pill.eta::before{display:none}
.pop-h em{margin-left:auto;font-style:normal;color:var(--app-mut);font-size:11px}
.pop-b{display:flex;gap:14px}
.pop-b div{display:flex;flex-direction:column;gap:1px}
.pop-b span{font-size:6px;color:var(--app-mut)}
.pop-b b{font-size:7.5px;font-weight:600}
.pop-t{display:flex;gap:12px;border-top:1px solid var(--app-line);padding-top:5px;font-size:7px;color:#3f8cf6;font-weight:600}

/* driver buttons: a thin readable ring instead of the big glow */
.dv-b.invite,.drv-yes.invite,.lk-card.invite{animation:dvInvite 1.4s ease-in-out infinite;border-color:transparent !important;z-index:1;position:relative}
@keyframes dvInvite{0%,100%{box-shadow:0 0 0 1.5px #fff,0 0 0 3px var(--lime-deep)}50%{box-shadow:0 0 0 1.5px #fff,0 0 0 4.5px rgba(127,178,62,.5)}}
.dv-b.flash,#cam-shutter.flash,#tf-done.flash{filter:none;transform:scale(.95)}
.dv-b{height:17px;font-size:6.2px;padding:0 10px;transition:transform .12s}
/* dispatch column: sleeker card */
.dc-col{width:312px}
.dc-stats{flex-wrap:wrap;gap:5px 6px;overflow:visible}
.dc-stats span{background:var(--app-hl);border-radius:999px;padding:2px 7px;font-size:7.5px}
.dcard{gap:3px;padding:9px 11px 8px}
.dc-t{font-size:10px}
.dc-sub{font-size:8px;color:var(--app-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-l.route{gap:5px}
.dc-l.route span{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--app-text)}
.dc-l.route em{font-style:normal;margin-left:auto;color:#3f8cf6;font-weight:600;flex:none}
.dc-prog{margin-top:3px;display:flex;flex-direction:column;gap:3px}
.dc-prog > b{font-size:10px;font-weight:600;color:var(--app-green)}
.dc-bar2{height:13px;border-radius:4px}
.dc-bar2 .rec{position:relative;min-width:0}
.dc-bar2 .lbl{left:6px;line-height:13px;font-size:7.5px}
.dc-bar2 em{line-height:13px}
.dc-leg{gap:8px}
.dc-leg u{text-decoration:none}
.dc-ev{margin-top:1px}
.dc-f{margin-top:3px;padding-top:5px}
.dc-trucks{margin-top:4px;border-top:0;gap:2px}
.dc-tr{grid-template-columns:8px 1fr auto;align-items:center;gap:0 7px;padding:4px 6px;border:0;border-radius:7px;background:var(--app-bg);transition:background .3s}
.dc-tr.me{margin:0;background:rgba(63,109,246,.10);box-shadow:inset 2px 0 0 var(--app-blue)}
.dc-tr .dot{width:8px;height:8px;border-radius:50%;background:#8a93a3;transition:background .4s}
.dc-tr .dot.st-driving{background:#a8d86a}.dc-tr .dot.st-pickup{background:#ef8a3a}.dc-tr .dot.st-transit{background:#5b8def}.dc-tr .dot.st-dropoff{background:#7fd6a8}
.dc-tr-main{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.dc-tr .trk{font-size:8.5px;font-weight:600;color:var(--app-strong)}
.dc-tr .trk::before{display:none}
.dc-tr .st{font-size:7.5px;color:var(--app-mut);transition:color .3s}
.dc-tr .st::before{display:none}
.dc-tr .st b{font-weight:500;color:var(--app-mut)}
.dc-tr-side{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.dc-tr .eta{min-width:38px;text-align:center;transition:background .3s,color .3s}
.dc-tr .ld{font-size:7px;color:var(--app-dim);display:inline-block}
.dc-tr .ld.bump{animation:tilePop .6s ease}
/* phone: Google Maps style driving view */
.mob-body.nav{position:absolute;inset:0;z-index:3;margin:0;padding:0;background:#f1f3f4;font-family:var(--font-app),sans-serif;overflow:hidden}
.nv-status{background:#0b8043;color:#fff;display:flex;justify-content:space-between;font:600 6.5px var(--font-app),sans-serif;padding:26px 10px 0}
.nv-status span:first-child{color:#c8f0d6;font-weight:500}
.nv-turn{background:#0b8043;color:#fff;padding:7px 9px 9px;display:flex;gap:8px;align-items:center;min-height:40px;border-radius:0 0 10px 10px;position:relative;z-index:3}
.nv-arrow{width:20px;height:20px;flex:none;display:none}
.nv-turn.straight .nv-arrow.straight,.nv-turn.flag .nv-arrow.flag{display:block}
.nv-turn > div{display:flex;flex-direction:column;line-height:1.15;min-width:0;flex:1}
.nv-turn b{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv-turn span{font-size:6.5px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv-search{width:16px;height:16px;border-radius:50%;background:#fff;flex:none;position:relative}
.nv-search::before{content:"";position:absolute;left:4px;top:4px;width:5px;height:5px;border:1.4px solid #0b8043;border-radius:50%}
.nv-search::after{content:"";position:absolute;left:9.5px;top:9px;width:3px;height:1.4px;background:#0b8043;transform:rotate(45deg)}
.nv-then{position:absolute;left:0;top:74px;z-index:3;background:#06703a;color:#fff;font:600 6.5px var(--font-app),sans-serif;padding:4px 8px 4px 9px;border-radius:0 0 8px 0;white-space:nowrap}
.nv-scene{flex:1;position:relative;overflow:hidden;perspective:300px;background:#dfe3e6}
.nv-map{position:absolute;left:-55%;width:210%;top:-42%;height:150%;transform-origin:50% 100%;transform:rotateX(38deg);display:block}
.nv-bg{fill:#f1f3f4}
.nv-blocks rect{fill:#e6e8eb}
.nv-park{fill:#c9e7c5}.nv-water{fill:#a8d4f7}
.nv-road path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round}
.nv-major{fill:none;stroke:#fce8a4;stroke-width:11;stroke-linecap:round}
.nv-lbl text{font-size:6.5px;fill:#5f6368;font-weight:500}
.nv-lbl text.rd{fill:#8a5a00;font-weight:600;text-anchor:middle}
.nv-route-o{fill:none;stroke:#1a5fd0;stroke-width:10;stroke-linecap:round}
.nv-route{fill:none;stroke:#4285f4;stroke-width:8;stroke-linecap:round}
.nv-traffic{fill:none;stroke:#f9ab00;stroke-width:8}
.nv-done{fill:none;stroke:#9aa0a6;stroke-width:8;stroke-linecap:round}
.nv-chip rect{fill:#1a73e8;stroke:#fff;stroke-width:1.2}
.nv-chip text{font-size:7px;fill:#fff;font-weight:600}
.nv-pin{fill:#d93025;stroke:#fff;stroke-width:1.2}.nv-pin-in{fill:#fff}
.nv-dest-lbl{font-size:7px;fill:#202124;font-weight:600;text-anchor:middle;paint-order:stroke;stroke:#f1f3f4;stroke-width:3}
.nv-ctl{position:absolute;right:8px;top:14px;display:flex;flex-direction:column;gap:7px}
.nv-ctl i{width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.28);position:relative}
.nv-mute::after{content:"";position:absolute;left:5px;top:6px;width:0;height:0;border-top:3px solid transparent;border-bottom:3px solid transparent;border-right:5px solid #5f6368}
.nv-mute::before{content:"";position:absolute;left:4px;top:6.5px;width:3px;height:5px;background:#5f6368;border-radius:1px}
.nv-compass::after{content:"";position:absolute;left:8px;top:3.5px;width:2px;height:11px;background:linear-gradient(#d93025 50%,#5f6368 50%);border-radius:1px}
.nv-locate::after{content:"";position:absolute;left:5.5px;top:5.5px;width:7px;height:7px;border-radius:50%;border:1.6px solid #1a73e8}
.nv-speed{position:absolute;left:8px;bottom:8px;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid #5f6368;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.nv-speed b{font-size:8px;color:#202124}.nv-speed span{font-size:4px;color:#5f6368}
.nv-foot{background:#fff;padding:7px 9px 12px;display:flex;align-items:center;gap:8px;box-shadow:0 -2px 8px rgba(0,0,0,.08);position:relative;z-index:2}
.nv-foot > div{display:flex;flex-direction:column;align-items:center;flex:1}
.nv-foot b{font-size:10.5px;color:#188038;font-weight:700}
.nv-foot span{font-size:6px;color:#5f6368}
.nv-exit,.nv-up{font-style:normal;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;font-size:11px;flex:none}
.nv-exit{background:#d93025;color:#fff;font-weight:700}
.nv-up{background:#f1f3f4;color:#5f6368;line-height:22px}

/* driver buttons: darker fills, bolder text, and a highlight that keeps the label readable */
.dv-b{font-weight:700;font-size:6.4px;color:#fff;text-shadow:0 .5px 0 rgba(0,0,0,.25)}
.dv-b.green{background:#1e7a44}.dv-b.teal{background:#2f8d99}.dv-b.grey{background:#2f3a4a}.dv-b.red{background:#a4241d}
.stage[data-theme="light"] .dv-b{color:#fff}   /* the light theme's tile colours (.green, .teal) also match these classes; the label stays white, as in the dark theme and the recording */
.dv-b.invite,.drv-yes.invite,.lk-card.invite{color:#fff !important;transform:scale(1.06);animation:dvInvite 1.4s ease-in-out infinite}
@keyframes dvInvite{0%,100%{box-shadow:0 0 0 1.5px #fff,0 0 0 3px #6a9d2a}50%{box-shadow:0 0 0 1.5px #fff,0 0 0 4px #7fb23e}}
.m-lbl text{paint-order:stroke;stroke:var(--map-bg);stroke-width:2.5}

/* moment between chapter 1 and 2 */
.app-success.moment{gap:8px}
.mo-truck{width:54px;height:54px;color:var(--teal);animation:truckIn .7s var(--ease) both}
@keyframes truckIn{from{opacity:0;transform:translateX(-70px)}60%{transform:translateX(6px)}to{opacity:1;transform:none}}
.app-success.moment b,.app-success.moment span,.app-success.moment em{animation:fadeUp .5s ease .35s both}
.mob-body.moment{align-items:center;justify-content:center;gap:4px;text-align:center}
.mob-body.moment .mo-truck{width:26px;height:26px}
.mob-body.moment b{font:700 9px var(--font-app),sans-serif;color:var(--m-text)}
.mob-body.moment span{font:500 5.5px var(--font-app),sans-serif;color:var(--m-sub)}
/* scanner: bright corner lock, sweep, flash */
.cam-frame{position:relative;display:inline-block}
.cam-frame .ck{position:absolute;width:14px;height:14px;border:2.2px solid #3ee9ff;opacity:0;transition:all .45s var(--ease);filter:drop-shadow(0 0 4px rgba(62,233,255,.9))}
.cam-frame .c1{left:-16px;top:-16px;border-right:0;border-bottom:0;border-radius:3px 0 0 0}
.cam-frame .c2{right:-16px;top:-16px;border-left:0;border-bottom:0;border-radius:0 3px 0 0}
.cam-frame .c3{left:-16px;bottom:-16px;border-right:0;border-top:0;border-radius:0 0 0 3px}
.cam-frame .c4{right:-16px;bottom:-16px;border-left:0;border-top:0;border-radius:0 0 3px 0}
.cam-view.seek .ck{opacity:.7}
.cam-view.found .ck{opacity:1}
.cam-view.found .c1{left:-4px;top:-4px}.cam-view.found .c2{right:-4px;top:-4px}.cam-view.found .c3{left:-4px;bottom:-4px}.cam-view.found .c4{right:-4px;bottom:-4px}
.cam-frame .scan{position:absolute;left:-2px;right:-2px;top:0;height:3px;background:linear-gradient(90deg,transparent,#3ee9ff 30%,#fff 50%,#3ee9ff 70%,transparent);opacity:0;box-shadow:0 0 12px 2px rgba(62,233,255,.85);border-radius:2px}
.cam-view.seek .scan,.cam-view.found .scan{opacity:1;animation:sweep 1.1s ease-in-out infinite alternate}
@keyframes sweep{from{top:0}to{top:calc(100% - 3px)}}
.cam-view .ticket{transform:rotate(-4deg) scale(1.15);transition:box-shadow .35s,transform .35s}
.cam-view.found .ticket{transform:rotate(0) scale(1.18);box-shadow:0 0 0 1.5px rgba(62,233,255,.95),0 0 26px rgba(62,233,255,.55),0 6px 14px -6px rgba(0,0,0,.5)}
.cam-view.found{background:radial-gradient(ellipse at 50% 60%,#5a5044 0%,#221f1b 60%,#0b0d12 100%)}
.cam-fx{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.cam-fx.go{animation:camFlash .45s ease-out}
@keyframes camFlash{0%{opacity:.95}100%{opacity:0}}
.cam-cap{font-weight:600;letter-spacing:.02em}
.cam-view.found .cam-cap{background:rgba(62,233,255,.92);color:#062a33}
/* maps: the quarry and the plant on both screens */
.stage[data-theme="light"]{--map-quarry:#e6d7b5;--map-plant:#d3dae1;--map-plant-b:#b9c3ce}
.m-quarry{fill:var(--map-quarry)}.m-plant{fill:var(--map-plant)}.m-plant-b rect{fill:var(--map-plant-b)}
.nv-quarry{fill:#e6d7b5}.nv-plant rect{fill:#d3dae1}.nv-plant rect + rect{fill:#b9c3ce}
.nv-world.leg-pickup .nv-plant{display:none}.nv-world.leg-dropoff .nv-quarry{display:none}

.mk.me.parked .mk-t{display:none}

/* the dump truck on the phone map: toy style like Luis's reference, seen from behind */
#nv-truck .tk-load{display:none}
#nv-truck.loaded .tk-load{display:block}

/* the moment into dispatch: kinetic */
.app-success.moment{background:#0d1524;gap:10px;overflow:hidden}
.mo-streaks{position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 22px,rgba(97,176,188,.10) 22px 24px);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);opacity:0}
.moment.show .mo-streaks{animation:streaks .9s linear .1s infinite}
@keyframes streaks{0%{opacity:.9;background-position:0 0}100%{opacity:.9;background-position:0 24px}}
.mo-truck.race{position:absolute;left:0;top:18%;width:64px;height:64px;color:var(--lime);filter:drop-shadow(0 0 14px rgba(181,220,121,.5));opacity:0}
.moment.show .mo-truck.race{animation:race 1s var(--ease-out) .05s forwards}
@keyframes race{0%{opacity:0;transform:translateX(-140px) scaleX(1.2)}15%{opacity:1}100%{opacity:1;transform:translateX(calc(50vw - 32px)) scaleX(1)}}
.desktop .mo-truck.race{animation-name:raceD}
@keyframes raceD{0%{opacity:0;transform:translateX(-160px) scaleX(1.25)}15%{opacity:1}100%{opacity:1;transform:translateX(348px) scaleX(1)}}
.mo-lines{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:70px;position:relative}
.mo-lines b{font:800 30px var(--font-app),sans-serif;color:#fff;letter-spacing:-.02em;opacity:0}
.mo-lines b em{font-style:normal;color:var(--lime)}
.mo-lines .l3{font-size:15px;font-weight:600;color:#9fadc6;letter-spacing:.02em}
.moment.show .l1{animation:punch .45s var(--ease-pop) .55s forwards}
.moment.show .l2{animation:punch .45s var(--ease-pop) .95s forwards}
.moment.show .l3{animation:punch .45s var(--ease-pop) 1.35s forwards}
@keyframes punch{0%{opacity:0;transform:scale(1.5)}100%{opacity:1;transform:none}}
.mo-cta{display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0}
.moment.show .mo-cta{animation:punch .4s var(--ease-pop) 1.9s forwards}
.mo-cta span{font:600 13px var(--font-app),sans-serif;color:#dfe6ef}
.mo-cta i{font:700 12px var(--font-app),sans-serif;font-style:normal;color:var(--ink);background:var(--lime);border-radius:999px;padding:6px 14px}
.mob-body.moment{position:absolute;inset:0;z-index:3;margin:0;padding:0;background:#0d1524;align-items:center;justify-content:center;gap:4px;text-align:center;overflow:hidden}
.mob-body.moment .mo-streaks{background:repeating-linear-gradient(180deg,transparent 0 9px,rgba(97,176,188,.12) 9px 10px)}
.mob-body.moment.on .mo-streaks{animation:streaksM .9s linear infinite}
@keyframes streaksM{0%{opacity:.9;background-position:0 0}100%{opacity:.9;background-position:0 10px}}
.mob-body.moment .mo-truck.race{width:28px;height:28px;top:22%}
.mob-body.moment.on .mo-truck.race{animation:raceM 1s var(--ease-out) .05s forwards}
@keyframes raceM{0%{opacity:0;transform:translateX(-40px)}15%{opacity:1}100%{opacity:1;transform:translateX(72px)}}
.mob-body.moment .mo-lines{margin-top:30px;gap:3px}
.mob-body.moment .mo-lines b{font-size:11px}
.mob-body.moment .mo-lines .l3{font-size:6px}
.mob-body.moment.on .l1{animation:punch .45s var(--ease-pop) .55s forwards}
.mob-body.moment.on .l2{animation:punch .45s var(--ease-pop) .95s forwards}
.mob-body.moment.on .l3{animation:punch .45s var(--ease-pop) 1.35s forwards}
.mob-body.moment.on .mo-cta{animation:punch .4s var(--ease-pop) 1.9s forwards}
.mob-body.moment .mo-cta i{font-size:6px;padding:3px 8px}
.app-main.plan.slide{animation:planIn .5s var(--ease)}
@keyframes planIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.app-side nav a.flash{animation:navFlash 1.2s ease}
@keyframes navFlash{0%,100%{background:var(--app-hl)}30%{background:rgba(181,220,121,.55);color:#fff}}
/* phone nav: maneuver arrows and the world that rotates to heading */
.nv-turn.right .nv-arrow.right,.nv-turn.left .nv-arrow.left{display:block}
.nv-lbl text.rd{text-anchor:start}
.nv-fields rect{display:none}
#nv-truck{transition:transform .12s linear}

.mo-lines b em{font:inherit;color:var(--lime);margin:0}
.mob-body.moment .mo-lines b{color:#fff;font-weight:800}
.mob-body.moment .mo-lines .l3{color:#9fadc6}
.mob-body.moment .mo-cta i{color:var(--ink);background:var(--lime)}

/* one sweeping highway on both maps */
.stage[data-theme="light"]{--map-field:#dcebd2;--map-pit:#c9b58a;--map-line:rgba(255,255,255,.9)}
.m-field path{fill:var(--map-field)}
.m-pit ellipse{fill:var(--map-pit)}
.m-road.major path{stroke-width:9}
#hwy24{fill:none;stroke:none}
.m-road-line{fill:none;stroke:var(--map-line);stroke-width:1;stroke-dasharray:6 6;opacity:.7}
.m-bridge{fill:none;stroke:var(--app-panel);stroke-width:11;stroke-linecap:butt;opacity:.9}
.m-lbl .on-road{font-size:8px;fill:#8a5a00;font-weight:600;letter-spacing:.06em}
.stage[data-theme="dark"] .m-lbl .on-road,.stage:not([data-theme="light"]) .m-lbl .on-road{fill:#d9b35a}
.m-route{stroke-width:4}
.nv-field path{fill:#d5e8cf}
.nv-pit ellipse{fill:#cdb684}
.nv-major{stroke-width:14}
.nv-major-line{fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.4;stroke-dasharray:9 9}
.nv-bridge{fill:none;stroke:#b8bec5;stroke-width:16}
#nv-chip{display:none}
.nv-route-o{stroke-width:11}.nv-route{stroke-width:8.5}.nv-done{stroke-width:8.5}

.dc-loads{font-size:7.5px;color:var(--app-mut);margin-top:1px}
.dc-loads::before{content:"";display:inline-block;width:5px;height:5px;border-radius:1px;background:var(--app-green);margin-right:4px;vertical-align:middle}

/* the offer lives on the stage, so it shows in the phone-only opening too, and follows the desktop */
.offer{left:calc(50% + var(--dx) * var(--s,1) * 1px);z-index:30}
.stage.solo .offer{left:50%}

/* ---------- chapter 4: Order Details, Load Details drawer, ticket photo (carbon copy of the 2026-09-22 recording) ---------- */
.stage[data-theme="light"]{--od-link:#2563eb;--od-drawer:#fff;--od-rev:#eceef6;--od-chip:#eef1f6;--od-photo:#e6e9ef;--od-track:#e3e7ee;--od-tl:#d5dae3;--od-modal:#fff;--od-well:#eef0f4;--od-sw-rem:#d5dae3;--od-green:#16a34a;--od-row-on:rgba(17,24,39,.045)}
.ic2{width:8px;height:8px;flex:none;display:block}
.lnk{color:var(--od-link);cursor:pointer}
.lnk.b{font-weight:700}
/* the loading bar and the status-bar peek */
.app-load{position:absolute;top:0;left:0;height:2px;width:0;background:#3f6df6;z-index:9;opacity:0;pointer-events:none}
.app-load.go{animation:appLoad .6s ease-out forwards}
@keyframes appLoad{0%{width:0;opacity:1}70%{width:78%;opacity:1}100%{width:100%;opacity:0}}
.app-main.blank > *{visibility:hidden}
.url-peek{position:absolute;left:0;bottom:0;z-index:9;background:#20283a;color:#d3dae6;font:400 7.5px var(--font-app),sans-serif;padding:3px 7px;border:1px solid rgba(255,255,255,.1);border-left:0;border-bottom:0;border-top-right-radius:5px;pointer-events:none;white-space:nowrap}
/* dispatch card title: bold blue link with a magnifier */
.dc-link{display:inline-flex;align-items:center;gap:4px;color:var(--od-link);font-weight:700;cursor:pointer;white-space:nowrap;border-radius:3px}
.dc-link .ic2{width:9px;height:9px;color:var(--app-text)}
.dc-link:hover{text-decoration:underline}
/* page */
.app-main.od{padding:0;gap:0;position:relative}
.app-main.od *,.ldd *,.tph *{font-feature-settings:"calt" 0 !important}   /* keep "->" literal, as in the real app */
.od-top{height:32px;flex:none;display:flex;align-items:center;gap:5px;padding:0 9px 0 9px}
.od-back{width:14px;height:14px;border:0;background:none;color:var(--app-strong);padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:3px}
.od-back:hover{background:var(--app-hl)}
.od-back .ic2{width:10px;height:10px}
.od-title{margin:0;font:700 10px var(--font-app),sans-serif;color:var(--app-strong);display:flex;align-items:center;gap:3px;white-space:nowrap}
.od-title .warn{width:10px;height:10px;color:#f5a524}
.od-btns{margin-left:auto;display:flex;gap:4px}
.od-btn{display:inline-flex;align-items:center;gap:3px;height:17px;padding:0 6px;border-radius:4px;background:var(--od-indigo);color:#fff;font:500 7px var(--font-app),sans-serif;white-space:nowrap;cursor:pointer;transition:filter .15s}
.od-btn:hover{filter:brightness(1.12)}
.od-btn .ic2{width:8px;height:8px}
.od-btn.sq{width:17px;padding:0;justify-content:center}
.od-scroll{flex:1;min-height:0;overflow:auto;position:relative;padding:0 8px 8px;scrollbar-width:none}
.od-scroll::-webkit-scrollbar{display:none}
.od-card{background:var(--app-panel);border-radius:5px;padding:7px 7px 8px}
.od-banner{height:20px;border-radius:4px;background:#bafdb8;color:#132a17;display:flex;align-items:center;justify-content:center;gap:4px;font:600 8px var(--font-app),sans-serif}
.od-banner .ic2{width:8px;height:8px}
.od-info{padding-top:9px}
.od-r{display:grid;align-items:start;margin-bottom:7px}
.od-r.r1{grid-template-columns:142px 1fr auto}
.od-r.r2{grid-template-columns:62px 71px 209px 158px auto}
.od-r.r3{grid-template-columns:72px 45px auto;margin-bottom:0}
.kv{display:flex;flex-direction:column;gap:2px;min-width:0}
.kv span{font:400 7px var(--font-app),sans-serif;color:var(--app-mut);white-space:nowrap}
.kv b{font:600 8px var(--font-app),sans-serif;color:var(--app-strong);white-space:nowrap}
.od-ics{display:flex;gap:7px;color:var(--app-text);align-self:center}
.od-ics .ic2{width:9px;height:9px}
.od-gpill{font:500 7px var(--font-app),sans-serif;font-style:normal;background:#474e60;color:#eef1f6;border-radius:3px;padding:1px 4px;display:inline-block}
.stage[data-theme="light"] .od-gpill{background:#e5e8ee;color:#374151}
.od-add{font:400 7.5px var(--font-app),sans-serif;font-style:normal;color:var(--app-mut);display:inline-flex;align-items:center;gap:2px}
.od-add .ic2{width:7px;height:7px}
.od-prog{margin-top:13px}
.od-prog-top{display:flex;align-items:center;justify-content:space-between}
.od-prog-top b{font:600 8.5px var(--font-app),sans-serif;color:var(--app-strong)}
.od-tog{display:flex;width:154px;height:15px;border:1px solid var(--app-line);border-radius:4px;padding:1.5px;background:var(--app-bg)}
.od-tog i{flex:1;font:600 7px/11px var(--font-app),sans-serif;font-style:normal;text-align:center;color:var(--app-strong);border-radius:3px}
.od-tog i.on{background:#508af6;color:#fff}
.od-bar{height:14px;border-radius:3px;background:var(--od-track);margin-top:5px;display:flex;overflow:hidden}
.od-bar i{display:block;height:100%;transition:width .6s ease}
.od-bar .rec{background:#3546dc}.od-bar .tra{background:#508af6}
.od-leg{display:flex;align-items:center;margin-top:5px}
#od-leg{display:flex;gap:10px}
#od-leg span{font:400 7px var(--font-app),sans-serif;color:var(--app-mut);display:flex;align-items:center;gap:3px;white-space:nowrap}
#od-leg b{font:600 7.5px var(--font-app),sans-serif;color:var(--app-strong)}
.sw{width:7px;height:7px;border-radius:1.5px;display:inline-block}
.sw.rec{background:#3546dc}.sw.tra{background:#508af6}.sw.rem{background:var(--od-sw-rem)}
.od-pct{margin-left:auto;font:600 7.5px var(--font-app),sans-serif;color:var(--app-strong)}
.od-pct em{font-style:normal;color:var(--od-green)}
.od-lower{display:flex;gap:7px;margin-top:7px;align-items:flex-start}
.od-main{flex:0 0 394px;background:var(--app-panel);border-radius:5px;padding:0 7px 4px;min-width:0}
.od-side{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
.od-tabs{display:flex;align-items:stretch;height:25px;border-bottom:1px solid var(--app-line)}
.otab{display:flex;align-items:center;padding:0 7.5px;font:500 10px var(--font-app),sans-serif;color:var(--app-text);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap;border-radius:3px 3px 0 0;transition:color .15s}
#od-tab-assigned,#od-tab-loads{cursor:pointer}
#od-tab-seg,#od-tab-sf{cursor:default}
.otab:hover{color:var(--app-strong)}
.otab.on{color:var(--od-link);border-bottom-color:var(--od-link)}
.od-tools{margin-left:auto;display:flex;gap:4px;align-items:center}
.od-tbar{display:flex;align-items:center;gap:4px;height:29px}
.od-search{width:119px;height:17px;border:1px solid var(--app-border);border-radius:4px;display:flex;align-items:center;gap:4px;padding:0 5px;font:400 7px var(--font-app),sans-serif;color:var(--app-dim);white-space:nowrap;overflow:hidden}
.od-search.wide{width:149px}
.od-search .ic2{width:7px;height:7px;color:var(--app-mut)}
.od-seg{margin-left:auto;display:flex;border:1px solid var(--app-line);border-radius:4px;height:17px;padding:1.5px;background:var(--app-bg)}
.od-seg i{font:500 7px var(--font-app),sans-serif;font-style:normal;display:flex;align-items:center;gap:2px;padding:0 4px;color:var(--app-text);border-radius:3px}
.od-seg i.on{background:var(--app-hl);color:var(--app-strong)}
.od-seg .ic2{width:7px;height:7px}
.od-ib{height:17px;min-width:17px;border:1px solid var(--app-line);border-radius:4px;display:flex;align-items:center;justify-content:center;gap:3px;padding:0 4px;font:500 7px var(--font-app),sans-serif;color:var(--app-text);background:var(--app-bg)}
.od-ib .ic2{width:7.5px;height:7.5px}
.od-table{font-size:7px;table-layout:fixed}
.od-table th{font:400 7px var(--font-app),sans-serif;color:var(--app-mut);padding:0 5px;height:17px;border-bottom:1px solid var(--app-line);text-align:left;overflow:hidden}
.od-table th.srt{color:var(--app-strong);font-weight:500}
.od-table th.srt .ic2{display:inline-block;width:7px;height:7px;vertical-align:-1px;margin-left:2px}
.od-table td{padding:0 5px;height:23px;border-bottom:0;color:var(--app-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:7px}
.od-table td .lnk.b{font-size:8px}
.od-table th.act,.od-table td.act{border-left:1px solid var(--app-line)}
.od-table td.act{color:var(--app-mut)}
.od-table td.act .ic2{display:inline-block;width:8px;height:8px;margin-right:3px;vertical-align:middle}
.od-table tbody tr:hover,.od-table tbody tr.on{background:var(--od-row-on);box-shadow:none}
.od-table tbody tr.ar{cursor:default}
.od-table tbody tr.invite{box-shadow:inset 0 0 0 2px var(--lime-deep);animation:none;background:rgba(181,220,121,.08)}
.od-table tr.lh th:nth-child(1),.od-table tr.lr td:nth-child(1){padding-left:12px}
.od-table tr.lh th:nth-child(1){width:34px}.od-table tr.lh th:nth-child(2){width:30px}.od-table tr.lh th:nth-child(3){width:46px}.od-table tr.lh th:nth-child(4){width:74px}
.od-table tr.lh th:nth-child(5){width:32px}.od-table tr.lh th:nth-child(6){width:70px}.od-table tr.lh th:nth-child(7){width:54px}.od-table tr.lh th:nth-child(8){width:40px}
.od-table tr.ah th:nth-child(1){width:52px}.od-table tr.ah th:nth-child(2){width:38px}.od-table tr.ah th:nth-child(3){width:72px}.od-table tr.ah th:nth-child(4){width:57px}
.od-table tr.ah th:nth-child(5){width:57px}.od-table tr.ah th:nth-child(6){width:58px}.od-table tr.ah th:nth-child(7){width:46px}
.spill{display:inline-flex;align-items:center;gap:3px;height:11px;padding:0 5px;border-radius:999px;font:500 7px var(--font-app),sans-serif;white-space:nowrap;vertical-align:middle}
.spill::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;flex:none}
.spill.done{background:#addff6;color:#16202e}.spill.done::before{background:#1f6fef}
.spill.oncall{background:#c9f5d6;color:#15803d}
.od-rates{background:var(--app-panel);border-radius:5px;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 7px}
.od-rates div{display:flex;flex-direction:column;gap:1px}
.od-rates span,.od-rates b{font:400 7px var(--font-app),sans-serif;color:var(--app-text);white-space:nowrap}
.od-rates b{font-weight:500}
.od-rates b.neg{color:var(--app-red)}
.od-rates i{font-style:normal;font-size:10px;color:var(--app-mut)}
.od-req{background:var(--app-panel);border-radius:5px;padding:7px 7px 6px}
.od-req h4{margin:0 0 4px;font:600 10px var(--font-app),sans-serif;color:var(--app-strong)}
.rq-r{display:flex;align-items:center;gap:4px;height:15px}
.rq-r .ic2{width:7px;height:7px;color:var(--app-mut)}
.rq-r span{font:400 7px var(--font-app),sans-serif;color:var(--app-text);white-space:nowrap}
.rq-r b{margin-left:auto;font:600 7.5px var(--font-app),sans-serif;color:var(--app-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* the Load Details drawer */
.ldd{position:absolute;top:0;right:0;bottom:0;width:235px;background:var(--od-drawer);border-left:1px solid var(--app-line);box-shadow:-14px 0 28px -16px rgba(0,0,0,.6);z-index:4;display:flex;flex-direction:column;transition:transform .2s var(--ease);color:var(--app-text);font-family:var(--font-app),sans-serif}
.ldd.out{transform:translateX(100%)}
.ldd.notrans{transition:none}
.ldd-head{flex:none;padding:0 8px 0;border-bottom:1px solid var(--app-line)}
.ldd-h{display:flex;align-items:center;gap:5px;height:28px}
.ldd-h > b{font:700 9px var(--font-app),sans-serif;color:var(--app-strong)}
.ldd-more{margin-left:auto;color:var(--app-mut);display:flex}
.ldd-x{width:14px;height:14px;border:1px solid var(--app-border);border-radius:3px;background:none;color:var(--app-strong);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;margin-left:6px}
.ldd-x:hover{background:var(--app-hl)}
.ldd-truck{font:700 8.5px var(--font-app),sans-serif;color:var(--app-strong);margin-top:7px}
.ldd-id{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:5px;margin-top:7px}
.ldd-id span{display:flex;align-items:center;gap:4px;font:400 7px var(--font-app),sans-serif;white-space:nowrap;min-width:0;color:var(--app-text)}
.ldd-id .ic2{width:7px;height:7px;color:var(--app-text)}
.ldd-tags{display:flex;align-items:center;gap:3px;font:400 7px var(--font-app),sans-serif;color:var(--app-mut);margin-top:8px;height:13px;margin-bottom:5px}
.ldd-tags .ic2{width:7px;height:7px}
.ldd-tags .add{margin-left:6px;display:flex;align-items:center;gap:2px}
.ldd-body{flex:1;min-height:0;overflow-y:auto;position:relative;scrollbar-width:thin;scrollbar-color:var(--app-border) transparent}
.ldd-body::-webkit-scrollbar{width:3px}.ldd-body::-webkit-scrollbar-thumb{background:var(--app-border);border-radius:2px}
.ldd-rev{height:21px;background:var(--od-rev);display:flex;align-items:center;gap:5px;padding:0 8px}
.ldd-rev b{font:500 7.5px var(--font-app),sans-serif;color:var(--app-strong)}
.ldd-rev .pu{width:9px;height:9px;color:#b18cf5}
.ldd-rev .ext{margin-left:auto;width:7px;height:7px;color:var(--app-mut)}
.ldd-req{display:flex;flex-wrap:wrap;align-items:center;gap:3px 3px;padding:6px 8px 7px;border-bottom:1px solid var(--app-line)}
.ldd-req .lbl{display:flex;align-items:center;gap:3px;font:400 7px var(--font-app),sans-serif;color:var(--app-mut);margin-right:2px}
.ldd-req .rq{display:flex;align-items:center;gap:2px;height:12px;padding:0 4px;border-radius:999px;background:var(--od-chip);font:500 7px var(--font-app),sans-serif;color:var(--app-strong);white-space:nowrap}
.ldd-req .ic2{width:6.5px;height:6.5px}
.ldd-sec{padding:8px 8px 9px;border-bottom:1px solid var(--app-line)}
.ldd-sec h4,.ldd-act-h{margin:0 0 6px;font:700 8.5px var(--font-app),sans-serif;color:var(--app-strong)}
.ldd-tix{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tk-c{display:flex;gap:5px;align-items:flex-start;min-width:0}
.ldd-th{width:28px;height:37px;border-radius:2px;background:var(--od-photo);border:0;padding:0;overflow:hidden;position:relative;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center;transition:box-shadow .15s}
.ldd-th:hover{box-shadow:0 0 0 1.5px var(--od-link)}
.ldd-th .ticket{transform:scale(.25) rotate(-3deg);flex:none;box-shadow:none;pointer-events:none}
.tk-i{display:flex;flex-direction:column;gap:2px;min-width:0}
.tchip{align-self:flex-start;font:700 7px var(--font-app),sans-serif;letter-spacing:.05em;text-transform:uppercase;padding:1.5px 4px;border-radius:2px}
.tchip.pick{background:#4a3424;color:#f6a45c}.tchip.drop{background:#223857;color:#8db6f6}
.stage[data-theme="light"] .tchip.pick{background:#ffedd5;color:#c2410c}.stage[data-theme="light"] .tchip.drop{background:#dbeafe;color:#1d4ed8}
.tk-i > b{font:700 7.5px var(--font-app),sans-serif;color:var(--app-strong)}
.tk-i .q{font:400 7px var(--font-app),sans-serif;color:var(--app-mut)}
.tk-i .q b{font-weight:600;color:var(--app-strong)}
.tk-i em{font:italic 400 7px var(--font-app),sans-serif;color:var(--app-mut)}
.ldd-sf{display:flex;align-items:center;gap:4px;padding:0 8px;height:23px;border-bottom:1px solid var(--app-line);font:400 7px var(--font-app),sans-serif;color:var(--app-mut)}
.ldd-sf b{font:600 7.5px var(--font-app),sans-serif;color:var(--app-strong);margin-right:2px}
.ldd-sf > .ic2{width:8px;height:8px;color:var(--od-green)}
.ldd-sf a{margin-left:auto;color:var(--od-link);display:flex;gap:2px;align-items:center}
.ldd-sf a .ic2{width:7px;height:7px}
.ldd-dist{display:flex;align-items:center;gap:3px;padding:9px 8px 6px;font:400 7px var(--font-app),sans-serif;color:var(--app-mut)}
.ldd-dist b{color:var(--app-strong);font:700 7.5px var(--font-app),sans-serif}
.ldd-dist .ic2{width:7.5px;height:7.5px}
.ldd-dist .c2{margin-left:7px}
.ldd-map{margin:0 8px;height:90px;border-radius:3px;overflow:hidden;position:relative;background:#e9ebee}
.ldd-map svg:first-child{width:100%;height:100%;display:block}
.mm-b{position:absolute;width:17px;height:17px;background:#fff;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;color:#5f6368;font-style:normal}
.mm-b .ic2{width:9px;height:9px}
.mm-fs{right:4px;top:4px}
.mm-z{position:absolute;right:4px;bottom:4px;display:flex;flex-direction:column;gap:2px}
.mm-z .mm-b{position:static}
.ldd-act-h{margin:14px 8px 8px}
.ldd-tl{padding:0 8px 12px}
.tl-row{display:flex;gap:6px;position:relative;padding-bottom:11px}
.tl-row::before{content:"";position:absolute;left:6.5px;top:14px;bottom:0;width:1px;background:var(--od-tl)}
.tl-row:last-child::before{display:none}
.tl-ic{width:14px;height:14px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;position:relative;z-index:1}
.tl-ic .ic2{width:8px;height:8px}
.tl-ic.gn{background:#22c55e}.tl-ic.bl{background:#4c8df6}.tl-ic.or{background:#f47c3c}.tl-ic.gy{background:#626a79}.tl-ic.lm{background:#86cf6a}
.tl-b{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:1px}
.tl-b > b{font:600 7.5px var(--font-app),sans-serif;color:var(--app-strong)}
.tl-t{font:400 7px var(--font-app),sans-serif;color:var(--app-mut);white-space:nowrap}
.tl-t i{font-style:normal;margin:0 3px;font-size:7px}
.tl-s{font:400 7px var(--font-app),sans-serif;color:var(--app-text);margin-top:1px}
.tl-s em{font-style:normal;font-weight:700;color:var(--od-green)}
.tl-l{font:400 7px var(--font-app),sans-serif}
.tl-tk{display:flex;align-items:center;gap:4px;font:400 7px var(--font-app),sans-serif;margin-top:1px}
.tl-th{width:12px;height:12px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;border-radius:1px}
.tl-th .ticket{transform:scale(.13);flex:none;box-shadow:none}
/* Delivery Ticket Photo */
.tph{position:absolute;inset:0;z-index:7;background:rgba(5,8,14,.62);display:flex;justify-content:center;align-items:flex-start;padding-top:28px}
.stage[data-theme="light"] .tph{background:rgba(17,24,39,.45)}
.tph-box{width:573px;height:441px;background:var(--od-modal);border-radius:8px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);display:flex;flex-direction:column;padding:0 15px 10px;animation:modalIn .22s ease;font-family:var(--font-app),sans-serif}
.tph-h{display:flex;align-items:center;justify-content:space-between;height:40px;flex:none;padding:0 0 0 -3px}
.tph-h b{font:500 9.5px var(--font-app),sans-serif;color:var(--app-strong);margin-left:-4px}
.tph-x{width:14px;height:14px;border:0;background:none;color:var(--app-strong);padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:3px;margin-right:-4px}
.tph-x:hover{background:var(--app-hl)}
.tph-well{flex:1;min-height:0;margin-top:14px;background:var(--od-well);border-radius:4px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tph-img{display:flex;align-items:center;justify-content:center}
.tph-img .ticket{transform:scale(3.1);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.tph-change{position:absolute;right:8px;bottom:7px;display:flex;align-items:center;gap:3px;height:14px;padding:0 6px;border-radius:3px;background:var(--app-panel);border:1px solid var(--app-line);font:500 7px var(--font-app),sans-serif;color:var(--app-strong);cursor:pointer}
.tph-change .ic2{width:7px;height:7px}
.tph-foot{display:flex;flex-direction:column;gap:10px;margin-top:10px;flex:none}
.tph-meta{display:flex;gap:10px}
.tph-meta span{display:flex;align-items:center;gap:3px;font:400 7.5px var(--font-app),sans-serif;color:var(--app-text)}
.tph-meta b{font-weight:700;color:var(--app-strong)}
.tph-meta .ic2{width:7px;height:7px;color:var(--app-mut)}
.tph-del{align-self:flex-end;display:flex;align-items:center;gap:3px;height:17px;padding:0 7px;border:0;border-radius:4px;background:#e0404f;color:#fff;font:500 7.5px var(--font-app),sans-serif;cursor:pointer}
.tph-del .ic2{width:7.5px;height:7.5px}
.tph-x.invite,.ldd-th.invite{animation:invitePulse 1.5s ease-in-out infinite}
/* phone: the driver app's Activity tab */
.act-h{padding:8px 10px 2px}
.act-h b{font:700 9px var(--font-app),sans-serif;color:#111827}
.act-list{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:4px;padding:3px 8px 6px}
.act-day{font:600 7px var(--font-app),sans-serif;color:#6b7280;margin:3px 2px 0}
.act-row{background:#fff;border:1px solid #d9dee5;border-radius:6px;padding:5px 7px;display:flex;align-items:center;gap:6px;transition:background .25s,border-color .25s,box-shadow .25s}
.act-row > div{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.act-row b{font:600 7px var(--font-app),sans-serif;color:#111827}
.act-row span{font:400 7px var(--font-app),sans-serif;color:#4b5563;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act-row.on{border-color:#2563eb;background:#eff5ff;box-shadow:0 0 0 1px #2563eb}
.act-pill{font:600 7px var(--font-app),sans-serif;font-style:normal;border-radius:999px;padding:2px 6px;flex:none}
.act-pill.pending{background:#fef3c7;color:#b45309}
.act-pill.valid{background:#dcfce7;color:#15803d}

/* ---------- chapter 5: Load Validation (carbon copy of "Validating tickets.mov" and "clicking validating buttons.mov") ---------- */
.stage[data-theme="light"]{--lv-pane:#fff;--lv-card:#f8f9fb;--lv-card-b:#dfe3ea;--lv-in:#fff;--lv-in-b:#76869b;--lv-tip:#2c323e;--lv-dd:#eef0f3}
/* sidebar group: the parent row lights with its open child, as recorded */
#nav-validation.open.on{background:var(--app-hl);color:var(--app-strong)}
/* ticket photos: the cut-off delivery photo ends in the Net row, no signature */
.ticket .tk-half{height:5.5px;overflow:hidden;padding-bottom:0;border-bottom:0}
.ticket:has(.tk-clip){padding-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;-webkit-mask-image:linear-gradient(#000 calc(100% - 3px),rgba(0,0,0,.35));mask-image:linear-gradient(#000 calc(100% - 3px),rgba(0,0,0,.35))}
.ticket .tk-clip{display:none}
.cam-view #cam-frame.low .ticket{transform:translateY(38px) rotate(-6deg) scale(1.15)}
.cam-view.found #cam-frame.low .ticket{transform:translateY(36px) rotate(-2deg) scale(1.18)}
.phone.buzz .mob-body.driver.on{animation:buzz .6s ease}
/* drawer Activity: the pickup and delivery photo events carry the photo */
.tl-ph{width:40px;height:44px;border-radius:3px;background:var(--od-photo);border:0;padding:0;margin-top:3px;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:box-shadow .15s}
.tl-ph:hover{box-shadow:0 0 0 1.5px var(--od-link)}
.tl-ph .ticket{transform:scale(.4) rotate(-3deg);flex:none;box-shadow:none;pointer-events:none}
/* phone Activity pills */
.act-pill.needs{background:#ffedd5;color:#c2410c}
.act-pill.updated{background:#e2e8f0;color:#334155}
.act-pill.pop{animation:tkPop .5s ease}
/* page */
.app-main.lv{padding:7px 9px 8px;gap:6px}
.app-main.lv *{font-feature-settings:"calt" 0}
.lv-title{margin:0;font:700 11px/14px var(--font-app),sans-serif;color:var(--app-strong)}
.lv-panes{flex:1;min-height:0;display:flex;gap:6px}
.lv-q,.lv-r{flex:1 1 0;min-width:0;background:var(--lv-pane);border-radius:5px;position:relative}
.lv-q{display:flex;flex-direction:column;padding:8px 7px 5px}
.lv-qh{display:flex;align-items:center;gap:4px;height:19px;flex:none}
.lv-qh > b{font:500 9.5px var(--font-app),sans-serif;color:var(--app-strong);margin-right:auto;padding-left:1px}
.lv-search{width:120px;height:18px;border:1px solid var(--lv-in-b);border-radius:4px;background:var(--lv-in);display:flex;align-items:center;gap:4px;padding:0 5px;font:400 7px var(--font-app),sans-serif;color:var(--app-dim);white-space:nowrap}
.lv-search .ic2{width:7px;height:7px;color:var(--app-mut)}
.lv-fbtn{height:18px;border:1px solid var(--lv-in-b);border-radius:4px;background:var(--lv-in);display:flex;align-items:center;gap:4px;padding:0 5px;font:500 7px var(--font-app),sans-serif;color:var(--app-strong);cursor:pointer}
.lv-fbtn .ic2{width:7.5px;height:7.5px}
.lv-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:5px;margin-top:4px;padding-right:3px;scrollbar-width:thin;scrollbar-color:var(--lv-card-b) transparent}
.lv-list::-webkit-scrollbar{width:3px}.lv-list::-webkit-scrollbar-thumb{background:var(--lv-card-b);border-radius:2px}
.lv-card{position:relative;flex:none;background:var(--lv-card);border:1px solid var(--lv-card-b);border-radius:5px;padding:7px 8px 8px;cursor:pointer;transition:border-color .15s}
.lv-card:hover{border-color:#3b4a66}
.lv-card.on{border-color:#145ddd;box-shadow:inset 0 0 0 .6px #145ddd}
.lv-card.invite{animation:none;box-shadow:inset 0 0 0 1.5px var(--lime-deep)}
.lv-ch{display:flex;align-items:center;gap:4px;height:10px;font:400 7px var(--font-app),sans-serif;color:var(--app-text)}
.lv-del{color:#ef4444;cursor:pointer}
.lv-dup{font:600 6.5px var(--font-app),sans-serif;font-style:normal;background:#475569;color:#f1f5f9;border-radius:999px;padding:1.5px 5px;margin-left:2px}
.stage[data-theme="light"] .lv-dup{background:#e2e8f0;color:#334155}
.lv-ics{position:absolute;top:-1px;right:-1px;display:flex}
.lv-ics i{width:17px;height:14px;background:#1d63e6;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:2px}
.lv-ics i + i{border-left:1px solid rgba(255,255,255,.18);border-top-right-radius:5px}
.lv-ics .ic2{width:7.5px;height:7.5px}
.lv-app{display:flex;align-items:flex-start;gap:4px;margin-top:9px;font:400 6.5px var(--font-app),sans-serif;color:var(--app-mut)}
.lv-app > .ic2{width:8px;height:8px;margin-top:1px;color:var(--app-mut)}
.lv-app div{display:flex;flex-direction:column;gap:1px}
.lv-app b{font:600 6.5px var(--font-app),sans-serif;color:var(--app-strong)}
.lv-kv{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:5px}
.lv-kv dl{margin:0;display:grid;grid-template-columns:31px 1fr;column-gap:3px;row-gap:2px;align-content:start;font:400 7px/9px var(--font-app),sans-serif}
.lv-kv dl.r{grid-template-columns:61px 1fr}
.lv-kv dt{color:var(--app-text);white-space:nowrap}
.lv-kv dl.r dt{white-space:normal}
.lv-kv dd{margin:0;color:var(--app-strong);min-width:0;overflow-wrap:anywhere}
.lv-kv u{text-underline-offset:1.5px}
.lv-kv .sl{grid-column:1/-1;display:flex;align-items:center;gap:2px;margin-left:-4px}
.lv-kv .sl .ic2{width:7px;height:7px;color:var(--app-mut)}
.lv-none{flex:1;display:flex;align-items:center;justify-content:center;font:500 8px var(--font-app),sans-serif;color:var(--app-mut);min-height:120px}
.lv-foot{flex:none;display:flex;align-items:center;justify-content:space-between;height:22px;margin-top:4px;font:400 7.5px var(--font-app),sans-serif;color:var(--app-strong)}
.lv-pg{display:flex}
.lv-pg i,.lv-pg b{width:13px;height:13px;display:flex;align-items:center;justify-content:center;border:1px solid var(--lv-in-b);background:var(--lv-in);color:var(--app-mut)}
.lv-pg i:first-child{border-radius:3px 0 0 3px}.lv-pg i:last-child{border-radius:0 3px 3px 0}
.lv-pg b{background:#1a6cf0;border-color:#1a6cf0;color:#fff;font:500 7px var(--font-app),sans-serif}
.lv-pg .ic2{width:7px;height:7px}
/* filters panel (free) */
.lv-fpanel{position:absolute;left:32px;right:8px;top:32px;z-index:3;background:var(--lv-card);border:1px solid var(--lv-card-b);border-radius:5px;padding:8px 8px 9px;box-shadow:0 14px 30px -12px rgba(0,0,0,.6);animation:modalIn .18s ease}
.lv-fh{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.lv-fh b{font:600 8px var(--font-app),sans-serif;color:var(--app-strong)}
.lv-fh a{font:400 7px var(--font-app),sans-serif;color:var(--app-mut);cursor:pointer}
.lv-fg{display:grid;grid-template-columns:1fr 1fr;gap:5px 7px}
.lv-fc{height:17px;border:1px solid var(--lv-in-b);border-radius:4px;background:var(--lv-pane);display:flex;align-items:center;justify-content:space-between;padding:0 5px;font:400 7px var(--font-app),sans-serif;color:var(--app-strong)}
.lv-fc.ph{color:var(--app-dim)}
.lv-fc .ic2{width:7px;height:7px;color:var(--app-mut)}
/* review panel */
.lv-r{display:flex;flex-direction:column;padding:8px 10px 8px}
.lv-head{display:flex;flex-direction:column;align-items:center;gap:1px;flex:none}
.lv-head b{font:700 7.5px var(--font-app),sans-serif;color:var(--app-strong)}
.lv-head > span:not(.lv-ur){font:400 7px var(--font-app),sans-serif;color:var(--app-strong);cursor:default}
.lv-ur{display:flex;gap:4px;margin-top:3px;color:var(--app-mut)}
.lv-ur .ic2{width:7.5px;height:7.5px}
.lv-photo{position:relative;flex:none;width:134px;height:112px;margin:5px auto 0;background:#678f9b;border-radius:2px;overflow:hidden}
.lv-img{position:absolute;left:0;right:0;top:3px;display:flex;justify-content:center}
.lv-img .ticket{transform:scale(1.2);transform-origin:top center;box-shadow:none;border-radius:1px}

.lv-photo.cut .lv-img{top:auto;bottom:0}
.lv-photo.cut .lv-img .ticket{transform-origin:bottom center}
.lv-zoom{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;border:0;background:rgba(15,20,30,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:zoom-in;opacity:0;transition:opacity .2s;padding:0}
.lv-photo:hover .lv-zoom{opacity:1}
.lv-zoom .ic2{width:10px;height:10px}
.lv-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:9px;flex:none}
.lv-f{display:flex;flex-direction:column;min-width:0}
.lv-f label{font:400 7.5px var(--font-app),sans-serif;color:var(--app-strong);margin-bottom:4px;white-space:nowrap}
.lv-f label b{color:#ef4444;font-weight:400}
.lv-in{height:19px;width:100%;border:1px solid var(--lv-in-b);border-radius:4px;background:var(--lv-in);color:var(--app-strong);font:400 7.5px var(--font-app),sans-serif;padding:0 6px;outline:0}
.lv-in:focus{border-color:#2f6fed}
.lv-qty{position:relative}
.lv-qty span{position:absolute;right:6px;top:50%;transform:translateY(-50%);font:400 7.5px var(--font-app),sans-serif;color:var(--app-strong);pointer-events:none}
.fld.dd.lv-dd{height:19px;border-radius:4px;border-color:var(--lv-in-b);background:var(--lv-in);padding:0 6px;font:400 7.5px var(--font-app),sans-serif;color:var(--app-strong)}
.fld.dd.lv-dd .val.ph{color:var(--app-strong)}
.fld.dd.lv-dd .chev{width:4.5px;height:4.5px;border-width:1.1px}
.fld.dd.lv-dd.open{border-color:#2f6fed}
.fld.dd.lv-dd .dd-list{left:-9px;right:-2px;top:-3px;background:var(--lv-dd);border:1px solid rgba(0,0,0,.12);border-radius:5px;padding:2px;box-shadow:0 10px 24px -8px rgba(0,0,0,.55);animation:none;z-index:6}
.fld.dd.lv-dd .dd-list li{padding:2.5px 5px 2.5px 11px;border-radius:3px;font:400 7px var(--font-app),sans-serif;color:#1f2530;position:relative;white-space:nowrap}
.fld.dd.lv-dd .dd-list li.sel::before{content:"";position:absolute;left:4px;top:3px;width:2px;height:4px;border-right:1.1px solid currentColor;border-bottom:1.1px solid currentColor;transform:rotate(45deg)}
.fld.dd.lv-dd .dd-list li:hover,.fld.dd.lv-dd .dd-list li.flash{background:#1f6fef;color:#fff}
.lv-req{display:flex;gap:4px;margin-top:6px;padding-left:1px;font:400 7px/9.5px var(--font-app),sans-serif;color:var(--app-strong)}
.lv-req b{color:#ef4444;font-weight:400}
.lv-err{display:flex;align-items:center;gap:4px;margin-top:5px;font:400 7.5px var(--font-app),sans-serif;color:#ef4444}
.lv-err i{display:flex;color:#ef4444}.lv-err .ic2{width:8.5px;height:8.5px}
.lv-lbl{display:flex;align-items:center;gap:4px;flex:none;margin-top:9px;font:400 7.5px var(--font-app),sans-serif;color:var(--app-strong)}
.lv-lbl i{font:400 6.5px var(--font-app),sans-serif;font-style:normal;color:var(--app-mut);background:var(--app-hl);border-radius:3px;padding:1.5px 4px}
.lv-ta{flex:none;display:block;width:100%;height:40px;margin-top:4px;resize:none;border:1px solid var(--lv-in-b);border-radius:4px;background:var(--lv-in);color:var(--app-strong);font:400 7.5px/1.35 var(--font-app),sans-serif;padding:5px 6px;outline:0}
.lv-ta.int{height:34px}
.lv-ta:focus,.lv-ta.focus{border-color:#2f6fed;box-shadow:0 0 0 .6px #2f6fed}
.lv-lang{display:flex;align-items:center;gap:3px;flex:none;margin-top:4px;font:400 6.5px var(--font-app),sans-serif;color:var(--app-mut)}
.lv-lang b{font-weight:700;color:var(--app-strong)}
.lv-lang .ic2{width:7.5px;height:7.5px}
.lv-btns{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:auto;padding-top:7px;flex:none}
.lv-b{height:22px;border:0;border-radius:4px;display:flex;align-items:center;justify-content:center;gap:4px;font:500 8px var(--font-app),sans-serif;color:#161a22;cursor:pointer;transition:filter .15s,transform .12s}
.lv-b:hover{filter:brightness(.96)}
.lv-b .ic2{width:9px;height:9px}
.lv-b.valid{background:#bafdb8}.lv-b.valid .ic2{color:#16a34a}
.lv-b.needs{background:#f6c98e}.lv-b.needs .ic2{color:#f26b1d}
.lv-b.await{background:#e8d8ff;font-weight:400}.lv-b.await .ic2{color:#8b5cf6}
.lv-b.invalid{background:#ffc9bf;font-weight:400}.lv-b.invalid .ic2{color:#e5484d}
.lv-b.valid,.lv-b.needs{font-weight:700}
.lv-b.invite{animation:invitePulse 1.5s ease-in-out infinite}
.lv-b.flash{filter:brightness(.9);transform:scale(.98)}
.lv-tip{position:absolute;z-index:5;max-width:100%;background:var(--lv-tip);color:#f3f5f9;font:400 7px/1.3 var(--font-app),sans-serif;padding:3px 5px;border-radius:3px;box-shadow:0 4px 10px -4px rgba(0,0,0,.5);pointer-events:none;white-space:nowrap}
.lv-tip::after{content:"";position:absolute;left:var(--ax,50%);bottom:-3px;width:6px;height:6px;background:var(--lv-tip);transform:translateX(-50%) rotate(45deg)}
.lv-r.empty > :not(.lv-empty){visibility:hidden}
.lv-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 8px var(--font-app),sans-serif;color:var(--app-mut)}
/* View Ticket Photo: title, close, image only */
.tph.view .tph-change,.tph.view .tph-foot{display:none}
.tph.view .tph-well{margin-bottom:6px}
.tph.view .tph-img .ticket{transform:scale(4.2)}

/* ---------- chapter 5 beat 4: your iPad on the left (the hauler validates from the other side) ---------- */
/* stage: [iPad][24][desktop x .86, eased right so its right edge stays put][24][phone], all in design px; fit() shrinks
   --s for this wider box (1090.8 design px), so the three devices never overlap at any width */
.ipad{position:absolute;top:0;left:50%;translate:calc(var(--ix) * var(--s,1) * 1px) calc(var(--stage-h,600px) - var(--oy) - 314px + var(--lift,0px));width:226px;height:314px;border-radius:17px;background:#0c0e12;box-shadow:inset 0 0 0 1px #4a505c,inset 0 0 0 2.2px #15181f,inset 0 0 0 3px #262b35,0 26px 50px -18px rgba(0,0,0,.6);z-index:6;transform-origin:bottom left;transform:translateX(calc(-56px * var(--s,1))) scale(var(--s,1));opacity:0;visibility:hidden;pointer-events:none;transition:transform var(--dur-3) var(--ease),translate var(--dur-3) var(--ease),opacity var(--dur-2) ease,visibility 0s linear var(--dur-3)}
.stage.trio .ipad{transform:scale(var(--s,1));opacity:1;visibility:visible;pointer-events:auto;transition:transform var(--dur-3) var(--ease),translate var(--dur-3) var(--ease),opacity var(--dur-2) ease,visibility 0s}
.stage.cab.trio{--dx:-21.8;--px:384.75}
.stage.cab.trio .desktop{transform:translateX(-50%) translateX(calc(53.2px * var(--s,1))) scale(.86)}
.stage.cab.trio .offer{left:calc(50% + (var(--dx) + 53.2) * var(--s,1) * 1px)}
.stage.snap .desktop,.stage.snap .ipad,.stage.snap .phone{transition:none !important}
.ipad .plate{display:block;top:-26px;font-size:9.35px;padding:3.4px 9.35px}
.ip-cam{position:absolute;top:2.4px;left:50%;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:#1d2330;box-shadow:inset 0 0 1px #56657f}
.ip-glass{position:absolute;inset:7px;border-radius:10.5px;overflow:hidden;background:var(--app-bg);display:flex;flex-direction:column;font-family:var(--font-app),system-ui,sans-serif;font-size:12px;color:var(--app-text)}
.ip-status{flex:none;height:11px;display:flex;justify-content:space-between;align-items:center;padding:1px 9px 0;background:#0d1524;color:#fff;font:600 5.5px var(--font-app),sans-serif}
.ip-status em{font-style:normal;font-weight:500;margin-left:3px;opacity:.8}
.ip-sys{display:flex;align-items:center;gap:3px}
.ip-sys svg{width:7px;height:5.2px;color:#fff}
.ip-bat{position:relative;width:10px;height:5px;border:.7px solid rgba(255,255,255,.7);border-radius:1.5px;padding:.6px}
.ip-bat::after{content:"";position:absolute;right:-1.9px;top:1.2px;width:1px;height:1.6px;background:rgba(255,255,255,.6);border-radius:0 .5px .5px 0}
.ip-bat i{display:block;height:100%;width:78%;background:#fff;border-radius:.5px}
.ip-top{flex:none;height:15px;display:flex;align-items:center;gap:6px;padding:0 8px;background:#0d1524;border-bottom:1px solid var(--app-line)}
.ip-top img{height:6.5px;width:auto}
.ip-menu{position:relative;width:7px;height:5px;border-top:1px solid #9fadc6;border-bottom:1px solid #9fadc6}
.ip-menu::after{content:"";position:absolute;left:0;right:0;top:1px;border-top:1px solid #9fadc6}
.ip-av{margin-left:auto;width:9px;height:9px;border-radius:50%;background:#111827;border:.7px solid #6b7280;color:#fff;font:600 5px/7.6px var(--font-app),sans-serif;text-align:center}
/* the desktop page at its own 610 px width (the real tablet layout is the desktop one), taller for portrait, scaled to the glass */
.ip-page{flex:1;min-height:0;position:relative;overflow:hidden}
.ip-page > .app-main{position:absolute;top:0;left:0;width:610px;height:788px;transform-origin:top left;transform:scale(.34754)}
.ip-page .lv-in,.ip-page .lv-ta,.ip-page .lv-dd,.ip-page .lv-fbtn{pointer-events:none}

/* ---------- chapter 5: queue feedback, kept quiet (tint, fold, sweep, cross-fade, count, progress line) ---------- */
.lv-prog{position:relative;flex:none;height:2px;margin-top:3px}
.lv-prog i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:1px;background:#3445dc;transition:width .25s var(--ease),opacity .15s ease .25s}
.stage[data-theme="dark"] .lv-prog i{background:#5b6cf2}
.lv-prog i.full{opacity:0}
.lv-prog i.calm{transition:none}
.lv-card.lv-out{pointer-events:none;transition:border-color .15s,background-color .15s}
.lv-card.lv-out.ok{background:color-mix(in srgb,var(--lv-card) 84%,#22c55e);border-color:color-mix(in srgb,var(--lv-card-b) 45%,#22c55e)}
.lv-card.lv-out.fix{background:color-mix(in srgb,var(--lv-card) 84%,#f59e0b);border-color:color-mix(in srgb,var(--lv-card-b) 45%,#f59e0b)}
.lv-card.lv-out.ok::before{content:"";position:absolute;z-index:1;top:2px;right:40px;width:10px;height:10px;border-radius:50%;background:#16a34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/7px no-repeat;animation:lvCheck .2s ease-out both}
@keyframes lvCheck{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.lv-card.sweep::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(64,128,240,.22),rgba(64,128,240,.1) 60%,rgba(64,128,240,0));animation:lvSweep .38s var(--ease) both}
@keyframes lvSweep{0%{clip-path:inset(0 100% 0 0);opacity:1}45%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
.lv-c{display:inline-block}
.lv-c.tick{animation:lvTick .22s ease-out}
@keyframes lvTick{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
.lv-fadein{animation:lvFade .15s ease-out}
@keyframes lvFade{from{opacity:.2}to{opacity:1}}
.lv-photo .lv-img.lv-was{top:3px;bottom:auto;pointer-events:none;animation:lvGone .15s ease-out forwards}
.lv-photo .lv-img.lv-was.cutw{top:auto;bottom:0}
.lv-photo .lv-img.lv-was .ticket{transform-origin:top center}
.lv-photo .lv-img.lv-was.cutw .ticket{transform-origin:bottom center}
@keyframes lvGone{to{opacity:0}}

/* ---------- chapter 6: Load Ticket Report, export, export batch (carbon copy of "Exporting date for billing.mov"), then the
   hauler's own accounting system. The recording is light; dark reuses the chapter 4 and 5 panel tokens. Scale about 0.46 ---------- */
.stage[data-theme="light"]{--ltr-page:#dfe4e7;--ltr-card:#f0f4f7;--ltr-tile:#f0f4f7;--ltr-line:#e2e5ea;--ltr-hline:#c9ccd2;--ltr-text:#1f2328;--ltr-strong:#111418;--ltr-mut:#5b6270;
  --ltr-blue:#0f63f5;--ltr-chip:#dae2f9;--ltr-chip-t:#1d5fd6;--ltr-field:#eaebef;--ltr-field-b:#c6c7cc;--ltr-panel:#e3e7eb;--ltr-skel:#d5d9df;--ltr-bar:#b8bbc2;--ltr-track:#e5e7eb;
  --ltr-hover:#e5e9ed;--ltr-ghost-b:#c9ced6;--ltr-modal:#f0f4f7;--ltr-in:#eaebef;--ltr-in-b:#76869b;--ltr-pale:#e4eaf6;--ltr-pale-b:#b9cdf5;--ltr-pale-t:#1a5fe0;--ltr-tog:#374455;--ltr-div:#c9ccd2;
  --dl-bg:#fbfdf6;--dl-text:#1f2328;--dl-sub:#4b5563;--dl-div:#d9e6cf}
/* the long report URL ends in an ellipsis inside the browser bar */
.url{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.browser-bar .who,.sample{flex:none}
/* the sidebar scrolls (as recorded) once Reporting opens under Planning and Validation */
.app-side nav{overflow-y:auto;min-height:0;scrollbar-width:none}
.app-side nav::-webkit-scrollbar{display:none}
#nav-reporting.open.on{background:var(--app-hl);color:var(--app-strong)}
/* page */
.app-main.ltr{padding:0 11px 10px;gap:0;background:var(--ltr-page);position:relative}
.app-main.ltr *{font-feature-settings:"calt" 0}
.ltr-top{height:46px;flex:none;display:flex;align-items:center;gap:8px}
.ltr-top h2{margin:0;font:700 12.5px var(--font-app),sans-serif;color:var(--ltr-strong);white-space:nowrap}
.ltr-acts{margin-left:auto;display:flex;gap:5px}
.ltr-btn{height:25px;display:inline-flex;align-items:center;gap:4px;padding:0 8px;border:1px solid transparent;border-radius:4px;background:var(--ltr-blue);color:#fff;font:500 9px var(--font-app),sans-serif;white-space:nowrap;cursor:pointer;transition:filter .15s,background-color .2s,opacity .2s}
.ltr-btn:hover{filter:brightness(1.08)}
.ltr-btn .ic2{width:10px;height:10px}
.ltr-btn.ol{background:transparent;border-color:var(--ltr-blue);color:var(--ltr-blue);height:25px}
.ltr-btn.gh{background:transparent;border-color:var(--ltr-ghost-b);color:var(--ltr-strong)}
@keyframes ltrSpin{to{transform:rotate(360deg)}}
.ltr-btn.invite{border-color:var(--lime-deep) !important}
/* Summary tiles, 4 + 2 */
.ltr-tiles{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10.5px;align-items:start;margin-bottom:10.5px}
.ltr-tile{position:relative;background:var(--ltr-tile);border-radius:5px;padding:7px 6px 6px;text-align:center;min-height:42px}
.ltr-tile b{display:inline;font:700 9px/12px var(--font-app),sans-serif;color:var(--ltr-strong)}
.ltr-tile .q{display:inline-flex;vertical-align:-1px;margin-left:3px;color:var(--ltr-strong)}
.ltr-tile .q .ic2{width:8px;height:8px}
.ltr-tile em{display:block;font:500 13.5px/16px var(--font-app),sans-serif;font-style:normal;color:var(--ltr-blue);margin-top:1px}
.ltr-tiles.skel .ltr-tile > *{visibility:hidden}
.ltr-tiles.skel .ltr-tile::before,.ltr-tiles.skel .ltr-tile::after{content:"";position:absolute;left:50%;border-radius:3px;background:var(--ltr-skel)}
.ltr-tiles.skel .ltr-tile::before{top:6px;width:70%;height:9px;transform:translateX(-50%)}
.ltr-tiles.skel .ltr-tile::after{top:21px;width:30%;height:13px;transform:translateX(-50%)}
/* the report card: chips + Filters, table, scroll thumbs, pager */
.ltr-card{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;background:var(--ltr-card);border-radius:6px}
.ltr-fbar{height:45px;flex:none;display:flex;align-items:center;gap:6px;padding:0 11px;border-bottom:1px solid var(--ltr-hline)}
.ltr-chips{display:flex;gap:5px;margin-right:auto;min-width:0}
.ltr-chip{height:19px;display:inline-flex;align-items:center;gap:3px;padding:0 6px 0 7px;border-radius:999px;background:var(--ltr-chip);color:var(--ltr-chip-t);font:400 8.5px var(--font-app),sans-serif;white-space:nowrap}
.ltr-chip b{font-weight:600}
.ltr-chip .ic2{width:7px;height:7px;margin-left:3px}
.ltr-gear{width:25px;height:25px;border:1px solid var(--ltr-ghost-b);border-radius:4px;background:var(--ltr-card);color:var(--ltr-strong);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.ltr-gear .ic2{width:9px;height:9px}
.ltr-btn.fl{padding:0 7px 0 5px;gap:5px}
.ltr-btn.fl .bdg{width:13px;height:13px;border-radius:50%;background:#fff;color:var(--ltr-blue);display:flex;align-items:center;justify-content:center;font:700 7.5px var(--font-app),sans-serif;font-style:normal}
.ltr-scroll{flex:1;min-height:0;overflow:auto;margin:0 11px;scrollbar-width:none}
.ltr-scroll::-webkit-scrollbar{display:none}
.ltr-table{table-layout:fixed;border-collapse:collapse;font:400 9px var(--font-app),sans-serif;color:var(--ltr-strong)}
.ltr-table th{height:31px;padding:0 8px;text-align:left;font-weight:400;color:var(--ltr-text);white-space:nowrap;overflow:hidden;text-overflow:clip;border-bottom:1px solid var(--ltr-hline);position:sticky;top:0;background:var(--ltr-card);z-index:1}
.ltr-table th.srt{font-weight:700;color:var(--ltr-strong)}
.ltr-table th.srt .ic2{display:inline-block;width:9px;height:9px;vertical-align:-1.5px;margin-left:3px;transform:rotate(180deg)}
.ltr-table td{position:relative;height:28px;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid transparent}
.ltr-table tbody tr:hover td{background:var(--ltr-hover)}
.ltr-table u{text-underline-offset:1.5px;cursor:pointer}
.ltr-scroll.skel td,.ltr-scroll.skel th{color:transparent;border-bottom-color:var(--ltr-line)}
.ltr-scroll.skel td *,.ltr-scroll.skel th *{visibility:hidden}
.ltr-scroll.skel td::after,.ltr-scroll.skel th::after{content:"";position:absolute;left:8px;right:14px;top:50%;height:7px;margin-top:-3.5px;border-radius:4px;background:var(--ltr-skel)}
.ltr-scroll.skel th{position:sticky}
.ltr-vbar{position:absolute;right:3px;top:50px;bottom:48px;width:3px}
.ltr-vbar i{position:absolute;left:0;top:0;width:3px;border-radius:2px;background:var(--ltr-bar)}
.ltr-foot{flex:none;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 11px;font:400 9.5px var(--font-app),sans-serif;color:var(--ltr-strong)}
.ltr-foot b{font-weight:600}
.ltr-pg{display:flex}
.ltr-pg i,.ltr-pg b{width:16px;height:17px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ltr-ghost-b);margin-left:-1px;background:var(--ltr-card);color:var(--ltr-strong);font:400 8.5px var(--font-app),sans-serif}
.ltr-pg i:first-child{border-radius:3px 0 0 3px;margin-left:0}.ltr-pg i:last-child{border-radius:0 3px 3px 0}
.ltr-pg b.on{background:var(--ltr-blue);border-color:var(--ltr-blue);color:#fff;position:relative}
.ltr-pg .ic2{width:8px;height:8px}
/* Filters panel under the Filters button, 13 controls; the Order Date field opens Presets + month grid */
/* Success! toast, top right, pale blue in both themes (as recorded) */
.ltr-toast{position:absolute;top:6px;right:7px;z-index:9;width:205px;height:42px;display:flex;align-items:center;gap:10px;padding:0 10px 0 13px;border-radius:5px;background:#bcd6fb;color:#1e3a8a;box-shadow:0 8px 20px -10px rgba(0,0,0,.35);animation:ltrToast .25s ease}
@keyframes ltrToast{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ltr-toast.out{opacity:0;transition:opacity .3s}
.lt-ic{width:16px;height:16px;border-radius:50%;background:#1d4ed8;color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.lt-ic .ic2{width:9px;height:9px}
.ltr-toast div{display:flex;flex-direction:column;gap:1px;flex:1;font:400 8.5px var(--font-app),sans-serif}
.ltr-toast b{font-weight:500}
.lt-x{width:12px;height:12px;border:0;background:none;color:#1e3a8a;padding:0;display:flex;cursor:pointer}
.lt-x .ic2{width:10px;height:10px}
/* the browser's download arrow and bubble */
.bar-dl{margin-left:4px;width:18px;height:18px;border:0;border-radius:50%;background:transparent;color:#9fadc6;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;flex:none}
.bar-dl svg{width:11px;height:11px}
.bar-dl.on,.bar-dl:hover{background:rgba(255,255,255,.1);color:#dfe6f2}
.dl-tray{position:absolute;top:27px;right:6px;z-index:14;width:196px;background:var(--dl-bg);border-radius:7px;box-shadow:0 12px 28px -8px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06);font-family:var(--font-app),sans-serif;transition:opacity .3s ease;animation:ltrToast .2s ease}
.dl-tray.out{opacity:0}
.dl-list{padding:4px 0}
.dl-it{display:flex;align-items:center;gap:8px;padding:6px 12px}
.dl-it .dl-f{width:10px;height:12px;border-radius:1.5px;background:#e3e6ea;position:relative;flex:none;box-shadow:inset 0 0 0 .6px #c6cbd2}
.dl-it .dl-f::after{content:"";position:absolute;right:0;top:0;border-style:solid;border-width:0 3px 3px 0;border-color:transparent var(--dl-bg) #c6cbd2 transparent}
.dl-it div{display:flex;flex-direction:column;gap:1px;min-width:0}
.dl-it b{font:600 8px/10px var(--font-app),sans-serif;color:var(--dl-text);overflow-wrap:anywhere}
.dl-it span{font:400 7px var(--font-app),sans-serif;color:var(--dl-sub)}
.dl-foot{display:flex;align-items:center;gap:7px;border-top:1px solid var(--dl-div);padding:8px 12px 9px;font:400 8px var(--font-app),sans-serif;color:var(--dl-text)}
.dl-cb{width:8px;height:8px;border:1px solid var(--dl-sub);border-radius:1.5px;flex:none}
/* Create Export Batch: nearly the whole window, over a dark scrim (as recorded) */
.modal-layer:has(#m-batch.show){padding:33px 24px 12px;align-items:flex-start;background:rgba(22,28,38,.86)}
#m-batch{width:712px;max-width:100%;background:var(--ltr-modal);border-radius:8px;border:0;font-family:var(--font-app),sans-serif}
.bt-h{height:54px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 15px 0 16px;border-bottom:1px solid var(--ltr-div)}
.bt-h h3{margin:0;font:500 13px var(--font-app),sans-serif;color:var(--ltr-strong)}
.bt-x{width:14px;height:14px;border:0;background:none;color:var(--ltr-strong);padding:0;display:flex;cursor:pointer}
.bt-x .ic2{width:11px;height:11px}
.bt-body{display:flex;flex-direction:column;align-items:flex-start;padding:18px 20px 15px}
.bt-l{font:400 9.5px var(--font-app),sans-serif;color:var(--ltr-strong);margin-bottom:6px}
.bt-in{width:100%;height:24px;border:1px solid var(--ltr-in-b);border-radius:4px;background:var(--ltr-in);color:var(--ltr-strong);font:400 9px var(--font-app),sans-serif;padding:0 7px;outline:0}
.bt-tog{display:flex;align-items:center;gap:8px;margin-top:11px;border:0;background:none;padding:0;border-radius:8px;font:500 9.5px var(--font-app),sans-serif;color:var(--ltr-strong);cursor:pointer}
.bt-tog + .bt-tog{margin-top:9px}
.bt-tog i{width:28px;height:16px;border-radius:8px;background:var(--ltr-tog);position:relative;flex:none;transition:background-color .2s}
.bt-tog i::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
.bt-tog.on i{background:#1552fb}
.bt-tog.on i::after{transform:translateX(12px)}
.bt-tog.invite{box-shadow:none;animation:none}
.bt-tog.invite i{animation:invitePulse 1.5s ease-in-out infinite}
.bt-create{margin-top:14px;width:100%;height:29px;border:1px solid var(--ltr-pale-b);border-radius:4px;background:var(--ltr-pale);color:var(--ltr-pale-t);font:500 9.5px var(--font-app),sans-serif;display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.bt-create.busy{cursor:default;opacity:.85}
.bt-create.busy .ic2{width:9px;height:9px;animation:ltrSpin .8s linear infinite}
/* D. Reyes's phone at the end of the day */
.act-day{display:flex;align-items:baseline}
.act-day span{margin-left:auto;font-weight:500}
.act-pill.processed{background:#e0e7ff;color:#3730a3}
.act-list.eod{gap:2px}
.act-list.eod .act-row{padding:1px 7px}
.act-list.eod .act-row > div{gap:0}
/* the hauler's accounting system: always light, its own look (ink rail, one teal accent, no logo) */
.acct{position:absolute;left:0;right:0;top:30px;bottom:0;z-index:13;display:flex;background:#f6f7f9;color:#1f2933;font-family:Inter,system-ui,sans-serif;transition:opacity .3s ease}
.acct.fade{opacity:0}
.acct *{box-sizing:border-box}
.ac-rail{width:128px;flex:none;background:#1c2330;color:#aeb6c4;padding:12px 8px;display:flex;flex-direction:column;gap:12px}
.ac-name{font:700 9px/12px Inter,sans-serif;color:#fff;padding:0 6px;letter-spacing:.01em}
.ac-name i{display:none}
.ac-rail nav{display:flex;flex-direction:column;gap:1px}
.ac-rail a{padding:5px 6px;border-radius:4px;font:500 8.5px Inter,sans-serif}
.ac-rail a.grp{color:#e5e9f0}
.ac-rail a.sub{padding-left:14px}
.ac-rail a.on{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 2px 0 0 #0f8b7d}
.ac-main{flex:1;min-width:0;padding:14px 20px 12px;display:flex;flex-direction:column;position:relative}
.ac-crumb{font:500 8px Inter,sans-serif;color:#6b7684}
.ac-main h1{margin:3px 0 0;font:700 14px Inter,sans-serif;color:#111827}
.ac-b{height:24px;border:0;border-radius:4px;background:#0f8b7d;color:#fff;font:600 9px Inter,sans-serif;padding:0 12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.ac-b:hover{filter:brightness(1.07)}
.ac-b.gh{background:#fff;color:#1f2933;box-shadow:inset 0 0 0 1px #c9d0d8}
.ac-b.invite{border-radius:4px}
.ac-card{background:#fff;border:1px solid #e1e5ea;border-radius:7px;padding:10px 12px}
.ac-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.ac-inv-h{display:flex;align-items:center;gap:8px}
.ac-inv-h b{font:700 12px Inter,sans-serif;color:#111827}
.ac-pill{font:600 7.5px Inter,sans-serif;font-style:normal;border-radius:999px;padding:2px 7px;background:#e5e7eb;color:#374151}
.ac-pill.sent{background:#dcfce7;color:#15803d;animation:tkPop .45s ease}
.ac-inv-h .tot{margin-left:auto;text-align:right;font:400 8px Inter,sans-serif;color:#6b7684}
.ac-inv-h .tot b{display:block;font:700 13px Inter,sans-serif;color:#111827}
.ac-kv{display:grid;grid-template-columns:repeat(5,auto);justify-content:start;column-gap:22px;row-gap:2px;margin:10px 0 10px;font:400 8px Inter,sans-serif}
.ac-kv span{color:#6b7684}
.ac-kv b{font-weight:600;color:#111827;font-size:8.5px}
.ac-lines{width:100%;border-collapse:collapse;font:400 8.5px Inter,sans-serif}
.ac-lines th{text-align:left;font:500 7.5px Inter,sans-serif;color:#6b7684;text-transform:uppercase;letter-spacing:.04em;padding:5px 6px;background:#f6f7f9;border-top:1px solid #e1e5ea;border-bottom:1px solid #e1e5ea}
.ac-lines td{padding:7px 6px;vertical-align:top;border-bottom:1px solid #e1e5ea;color:#1f2933}
.ac-lines td span{display:block;color:#6b7684;font-size:7.5px;margin-top:2px}
.ac-lines .r{text-align:right;white-space:nowrap}
.ac-tots{display:grid;grid-template-columns:auto 80px;justify-content:end;column-gap:14px;row-gap:3px;margin-top:8px;font:400 8.5px Inter,sans-serif;color:#4b5563}
.ac-tots b{text-align:right;color:#111827;font-weight:500}
.ac-tots .t{font-weight:700;color:#111827;border-top:1px solid #e1e5ea;padding-top:4px}
.ac-toast{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;background:#1c2330;color:#fff;border-radius:6px;padding:7px 11px;font:500 9px Inter,sans-serif;white-space:nowrap;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);animation:ltrToast .25s ease}
.ac-toast .ic2{width:10px;height:10px;color:#5eead4}

/* ---------- chapter 6, reshaped: 11 populated columns with no horizontal scroll, one file, the sheet, the drop zone, pay ---------- */
.ltr-scroll{overflow-x:hidden;overflow-y:auto}
.ltr-table{font-size:8px}
.ltr-table th{padding:0 5px;white-space:normal;line-height:9.5px;font-size:8px;overflow-wrap:normal}
.ltr-table th.srt .ic2{width:8px;height:8px;vertical-align:-1px;margin-left:2px}
.ltr-table td{padding:0 5px;font-size:8px}
.ltr-ok{display:inline-block;font:600 7px/1 var(--font-app),sans-serif;font-style:normal;padding:2.5px 5px;border-radius:999px;background:#dcfce7;color:#15803d}
.ltr-ok.pend{background:#fef3c7;color:#b45309}
.stage[data-theme="dark"] .ltr-ok{background:rgba(34,197,94,.18);color:#4ade80}
.stage[data-theme="dark"] .ltr-ok.pend{background:rgba(245,158,11,.18);color:#fbbf24}
.ltr-vbar{top:77px;bottom:42px}
.csv-tag{flex:none;background:#16a34a;color:#fff;font:700 5.5px/1 Inter,sans-serif;letter-spacing:.03em;padding:2.5px 3px;border-radius:2px}
.fly-csv{position:absolute;left:0;top:0;z-index:21;display:flex;align-items:center;gap:4px;padding:3px 7px 3px 3px;border-radius:5px;background:#fff;box-shadow:0 8px 18px -6px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.08);font:500 7px Inter,sans-serif;color:#1f2328;white-space:nowrap;pointer-events:none;will-change:transform}
.fly-csv b{font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.bar-dl.got{animation:dlGot .6s var(--ease)}
.bar-dl.got,.bar-dl.got.on{background:rgba(96,165,250,.28);color:#bfdbfe}
@keyframes dlGot{0%{transform:scale(1)}30%{transform:translateY(2px) scale(1.18)}60%{transform:translateY(-1.5px)}100%{transform:none}}
.dl-it{cursor:pointer;border-radius:4px;margin:0 4px;padding:6px 8px}
.dl-it:hover{background:color-mix(in srgb,var(--dl-text) 6%,transparent)}
.dl-it.invite{z-index:1}
/* D. Reyes's pay line, under his eight loads */
.act-pay{flex:none;margin:0 8px 5px;padding:3.5px 7px;border-radius:6px;background:#eef2ff;border:1px solid #c7d2fe;display:grid;grid-template-columns:1fr auto;column-gap:6px;row-gap:1px;align-items:center;animation:actPay .4s ease-out}
.act-pay b{font:600 7px var(--font-app),sans-serif;color:#3730a3;grid-column:1}
.act-pay span{font:500 7px var(--font-app),sans-serif;color:#111827;grid-column:1;white-space:nowrap}
.act-pay .paid{grid-column:2;grid-row:1/3;font:600 7px var(--font-app),sans-serif;font-style:normal;border-radius:999px;padding:2px 6px;background:#dcfce7;color:#15803d;animation:tkPop .45s ease}
@keyframes actPay{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
/* the file, opened: a plain, unbranded spreadsheet grid, always light */
.sheet{position:absolute;left:0;right:0;top:30px;bottom:0;z-index:14;display:flex;flex-direction:column;background:#fff;color:#202124;font-family:Inter,system-ui,sans-serif;transform-origin:center}
.sh-title{position:relative;height:20px;flex:none;display:flex;align-items:center;justify-content:center;background:#ececec;border-bottom:1px solid #d4d4d4;font:500 7.5px Inter,sans-serif;color:#3c4043}
.sh-dots{position:absolute;left:8px;top:7px;display:flex;gap:3px}.sh-dots i{width:6px;height:6px;border-radius:50%;background:#cfcfcf}
.sh-fx{height:16px;flex:none;display:flex;align-items:center;gap:7px;padding:0 6px;border-bottom:1px solid #e0e0e0;font:400 7.5px Inter,sans-serif;color:#3c4043}
.sh-fx .sh-ref{width:34px;border-right:1px solid #e0e0e0;color:#5f6368}
.sh-fx i{font-style:italic;color:#9aa0a6}
.sh-grid{flex:1;min-height:0;overflow:hidden}
.sh-grid table{border-collapse:collapse;table-layout:fixed;height:100%;font:400 7.5px Inter,sans-serif}
.sh-grid th,.sh-grid td{border:1px solid #e2e3e5;padding:0 3px;white-space:nowrap;overflow:hidden;text-overflow:clip}
.sh-grid th{background:#f3f3f3;color:#5f6368;font-weight:500;text-align:center}
.sh-grid tr.sh-l th{height:14px}
.sh-grid tr.sh-h td{font-weight:700;color:#111;border-bottom:2px solid #b9bcc2;background:#fafafa}
.sh-foot{height:17px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 8px;border-top:1px solid #d4d4d4;background:#f7f7f7;font:500 7.5px Inter,sans-serif;color:#5f6368}
.sh-tab{background:#fff;border:1px solid #d4d4d4;border-top:0;padding:1px 8px;color:#1a73e8;font-weight:600}
/* the accounting system: upload, reading, result tabs */
.ac-sub{margin:2px 0 0;font:400 8.5px Inter,sans-serif;color:#6b7684}
.ac-drop{margin-top:52px;flex:1;max-height:300px;border:1.5px dashed #b8c2cc;border-radius:8px;background:#fbfcfd;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:400 9px Inter,sans-serif;color:#4b5563;transition:background-color .15s,border-color .15s}
.ac-drop > .ic2{width:20px;height:20px;color:#8a95a3}
.ac-drop b{font:600 10.5px Inter,sans-serif;color:#111827}
.ac-drop small{font:400 8px Inter,sans-serif;color:#8a95a3}
.ac-drop.over{border-color:#0f8b7d;background:#e6f4f2}
.ac-drop.over > .ic2{color:#0f8b7d}
.ac-drop.busy{border-style:solid;border-color:#cfe7e3;background:#fff;gap:9px}
.ac-file{display:flex;align-items:center;gap:7px}
.ac-file div{display:flex;flex-direction:column;gap:1px}
.ac-file b{font:600 8.5px Inter,sans-serif;color:#111827}
.ac-file span{font:400 7.5px Inter,sans-serif;color:#6b7684}
.ac-count{font:600 9.5px Inter,sans-serif;color:#0f8b7d;font-variant-numeric:tabular-nums}
.ac-prog{width:180px;height:3px;border-radius:2px;background:#e6f4f2;overflow:hidden}.ac-prog i{display:block;height:100%;width:0;background:#0f8b7d}
.ac-chip{position:absolute;left:148px;top:79px;z-index:4;display:flex;align-items:center;gap:6px;padding:5px 10px 5px 5px;border-radius:6px;background:#fff;box-shadow:0 4px 12px -4px rgba(0,0,0,.25),0 0 0 1px #dfe3e8;font:500 8px Inter,sans-serif;color:#1f2933;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.ac-chip b{font-weight:500;white-space:nowrap}
.ac-chip.drag{cursor:grabbing;box-shadow:0 12px 24px -8px rgba(0,0,0,.4),0 0 0 1px #0f8b7d;z-index:7}
.ac-chip.invite{position:absolute;z-index:6;border-color:transparent !important}
.ac-ok{display:flex;align-items:center;gap:5px;margin:8px 0 6px;font:600 9px Inter,sans-serif;color:#0f8b7d}
.ac-ok .ic2{width:11px;height:11px}
.ac-ok span{margin-left:auto;font:400 7.5px Inter,sans-serif;color:#8a95a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.ac-tabs{display:flex;gap:16px;border-bottom:1px solid #e1e5ea;margin-bottom:9px}
.ac-tabs button{border:0;border-bottom:2px solid transparent;background:none;padding:5px 1px 5px;margin-bottom:-1px;font:600 9px Inter,sans-serif;color:#6b7684;cursor:pointer}
.ac-tabs button.on{color:#111827;border-bottom-color:#0f8b7d}
.ac-tabs button.invite{border-radius:3px}
.ac-meta{font:400 8px Inter,sans-serif;color:#6b7684}
.ac-pay td{padding:5px 6px}
.ac-pay tfoot td{font-weight:700;color:#111827;border-bottom:0;border-top:1px solid #cfd5dc}
.ac-st{font:600 7px Inter,sans-serif;font-style:normal;border-radius:999px;padding:2px 7px;background:#e5e7eb;color:#374151}
.ac-st.paid{background:#dcfce7;color:#15803d;animation:tkPop .4s ease}
.ac-b[disabled]{cursor:default;opacity:.8}

/* ---------- chapter 0: personalization bits inside the app ---------- */
.plate small{display:block;font-size:9px;color:var(--text-soft);text-align:center;line-height:1.2}
.plate small:empty{display:none}
.ac-from{font:400 8px Inter,sans-serif;color:#6b7684}
.ac-from em{font-style:normal;font-weight:600;color:#374151}

/* ---------- chapter 0: the opening (Luis, 2026-09-24): the paper board centred as the background, one small floating card on top
   (the sentence, Ready?, one muted line; in the site view Ready? and the line only), then the landing (opLand): the card
   fades, the strip appears, the paper is sorted into the five workflows, each segment lighting up as its paper arrives,
   and the Hauler Dashboard comes down out of the strip ---------- */
.stage.opening{height:auto;min-height:var(--stage-h,600px);display:flex;align-items:center;justify-content:center;padding-bottom:118px}
.stage.opening > .fly,.stage.opening > .pulse-dot{opacity:0;visibility:hidden;pointer-events:none}
.stage.opening > .desktop,.stage.opening > .phone,.stage.opening > .ipad{opacity:0;visibility:hidden;pointer-events:none;--lift:24px;transition:opacity var(--dur-3) ease,translate var(--dur-3) var(--ease),visibility 0s linear var(--dur-3)}
.stage.opening .offer{left:50%}
.opening{--cs:clamp(.82,var(--s,1),1.15);position:relative;z-index:8;width:100%;display:flex;justify-content:center;padding:calc(12px * var(--cs)) 0;transition:opacity var(--dur-2) ease}
/* the board: the label (a 22 px row), the paper (#op-canvas, 400 x 380 canvas px scaled by --bk) and the note row, centred on the
   stage. opLayout() sets --bk and --op-bt (the board's top from the stage's top: a tall board rises into the strip's row, which
   stays hidden until the landing). Hidden under 700 px */
.op-board{display:none;position:absolute;z-index:1;left:calc(50% - 200px * var(--bk,1));top:var(--op-bt,0px);width:calc(400px * var(--bk,1));height:calc(30px + 380px * var(--bk,1) + min(13px * var(--bk,1),18px));font-family:var(--font-app);pointer-events:none}
.op-board > .op-canvas{top:22px}
.op-blabel{position:absolute;left:0;right:0;top:0;height:22px;display:flex;align-items:center;justify-content:center;font-size:max(var(--t-1),calc(var(--t-1) * var(--cs,1)));font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-soft);white-space:nowrap}
.op-bnote{position:absolute;left:0;right:0;bottom:0;height:calc(min(13px * var(--bk,1),18px) + 8px);display:flex;align-items:center;justify-content:center;color:var(--text-soft);opacity:.75}
.op-btxt{font:italic 400 min(calc(13px * var(--bk,1)),18px)/1 var(--font-hand);white-space:nowrap}
.opening.enter .op-board{animation:cardIn var(--dur-3) var(--ease) both}
/* from 700 px: the stage keeps its design height; the board is the background and the card floats at the stage's centre */
@media (min-width:700px){
  .stage.opening{height:var(--stage-h,600px);min-height:0;padding:0;display:block}
  #opening{position:absolute;inset:0;padding:0;align-items:center;justify-content:center}
  .op-board{display:block}
  /* the offer centres on the board, 18 px above the paper's foot (opLayout sets --op-bx and --op-bb) */
  .stage.opening .offer{left:calc(50% + var(--op-bx,0px));bottom:calc(var(--op-h,var(--stage-h,600px)) - var(--op-bb,0px) + 18px);max-width:300px}
}
/* the landing (opLand, docs/landing-storyboard.md). .op-land: the desktop waits centred at its full size, tucked up under
   the strip at opacity 0 (GSAP owns its transform and opacity inline), no dim. .op-stream: GSAP owns each piece's transform
   (the drift and the rest rotation hand over in one frame). Reduced motion (opFade) uses .op-land alone: a cross-fade */
.stage.op-stream .pc{animation:none;rotate:none;translate:none;will-change:transform}
.stage.op-land #opening{pointer-events:none}
.stage.opening.op-land > .desktop{visibility:visible;translate:0 calc(var(--oy) + var(--lift,0px));transform:translateX(-50%);transition:none !important;will-change:transform,opacity}
.stage.opening.op-land > .desktop::after{opacity:0;transition:none}
.op-lime{position:absolute;left:0;top:0;width:0;height:0;z-index:9;pointer-events:none;visibility:hidden;opacity:0;border-radius:14px;transform-origin:50% 0}
.stage.op-land .op-lime{visibility:visible;will-change:transform,opacity}
.op-lime i{position:absolute;inset:0;border-radius:inherit}
.ol-fill{background:var(--lime)}
.ol-edge{box-shadow:inset 0 0 0 2px var(--lime-deep);opacity:0}
/* the hand-off (closeOpening(true)): the desktop holds a beat, then fades in place a step back while the phone rises into its
   solo place; the hold ends with the desktop snapped to its solo pose at opacity 0 */
.stage.solo.op-hold > .desktop{translate:0 var(--oy);transform:translateX(-50%) scale(.985);transition:opacity var(--dur-2) ease 350ms,transform var(--dur-3) var(--ease) 350ms}
.stage.solo.op-hold > .desktop::after{opacity:0;transition:none}
.desktop.notrans,.desktop.notrans::after{transition:none !important}
.opening.out{opacity:0;pointer-events:none}
.opening.out.fast{transition-duration:.15s}
.opening.enter .op-card{animation:cardIn var(--dur-3) var(--ease) both}
@keyframes cardIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
/* the floating card: paper white at 92 percent, --r-xs, a gentle shadow; everything centred */
.op-card{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:calc(14px * var(--cs));max-width:calc(100% - 24px);padding:calc(20px * var(--cs)) calc(28px * var(--cs)) calc(16px * var(--cs));background:rgba(255,255,255,.92);border-radius:var(--r-xs);box-shadow:0 0 0 1px var(--edge),0 1px 2px rgba(20,29,31,.06),0 18px 40px -18px rgba(20,29,31,.35);font-family:var(--font-app);color:var(--ink);text-align:center}
html[data-site] #opening .op-line{display:none}
.op-kicker{display:block;font-size:max(var(--t-1),calc(var(--t-1) * var(--cs)));font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep)}
.op-kicker .kw{white-space:nowrap}
.op-title{margin:calc(8px * var(--cs)) 0 calc(20px * var(--cs));font-size:calc(var(--t-5) * var(--cs));line-height:1.18;font-weight:700;letter-spacing:-.012em;color:var(--ink)}
.op-line{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:calc(6px * var(--cs)) calc(8px * var(--cs));font-size:calc(var(--t-4) * var(--cs));font-weight:500;color:var(--ink)}
.op-f{position:relative;display:inline-flex;align-items:center;border-bottom:1px solid rgba(20,29,31,.35);transition:border-color .2s}
.op-f input{border:0;background:transparent;outline:0;font:700 calc(var(--t-4) * var(--cs)) var(--font-app);color:var(--ink);padding:calc(2px * var(--cs)) 0;min-width:0}
.op-f input::placeholder{color:#8f9b9c;font-weight:500}
.op-f-co input{width:calc(220px * var(--cs))}
.op-spin input{width:calc(44px * var(--cs));text-align:center}
.op-f:focus-within{border-bottom:2px solid var(--ink);margin-bottom:-1px}
.op-f.op-inv{border-bottom:2px solid var(--lime-deep);margin-bottom:-1px;animation:opInv 1.5s ease-in-out infinite}
@keyframes opInv{0%,100%{box-shadow:0 1px 0 0 rgba(127,178,62,0)}50%{box-shadow:0 3px 0 0 rgba(181,220,121,.55)}}
.op-spin-btns{display:flex;flex-direction:column;width:calc(18px * var(--cs));height:calc(22px * var(--cs));margin-left:2px}
.op-spin-btns button{flex:1;border:0;background:transparent;color:var(--text-soft);cursor:pointer;position:relative;padding:0}
.op-spin-btns button:hover{color:var(--ink)}
.op-spin-btns button::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translate(-50%,-20%) rotate(-135deg)}
.op-spin-btns button[data-d="-1"]::after{transform:translate(-50%,-80%) rotate(45deg)}
/* card buttons: the same primary and ghost, a size up */
.op-start,.cl-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:max(40px,calc(40px * var(--cs,1)));border:1px solid var(--lime);border-radius:var(--r-sm);padding:0 18px;font:600 max(var(--t-3),calc(var(--t-3) * var(--cs,1))) Poppins,sans-serif;background:var(--lime);color:var(--ink);cursor:pointer;transition:filter var(--dur-1) ease,background-color var(--dur-1) ease}
.op-start:hover{filter:brightness(.96)}
.cl-ghost{background:transparent;border-color:var(--edge)}
.cl-ghost:hover{background:rgba(20,29,31,.045)}
.op-start.invite{border-color:transparent !important}
/* Ready?: the one big lime button (the closing keeps the shared .op-start size) */
#opening .op-start{min-height:calc(54px * var(--cs));min-width:calc(208px * var(--cs));padding:0 calc(36px * var(--cs));font-size:calc(19px * var(--cs));letter-spacing:-.005em;box-shadow:0 10px 22px -12px rgba(127,178,62,.95)}
.op-explore{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(95,109,110,.45);text-underline-offset:3px;transition:color var(--dur-1) ease,text-decoration-color var(--dur-1) ease}
.op-explore:hover{color:var(--ink);text-decoration-color:currentColor}
.op-explore:focus-visible{outline:2px solid var(--teal-deep);outline-offset:2px;border-radius:2px}
.op-foot{margin:0;font-size:max(var(--t-2),calc(var(--t-2) * var(--cs)));color:var(--text-soft)}
.op-fly{position:fixed;z-index:60;margin:0;pointer-events:none;transform-origin:0 0;white-space:nowrap}
@media (max-width:560px){
  .op-card{padding:16px 14px 14px;gap:12px}
  .op-line{font-size:17px}
  .op-f-co input{width:min(200px,52vw)}
}

/* ---------- chapter 0: the workflow strip (Order, Dispatch, Haul, Validate, Bill): navigation, progress and scrubber ---------- */
.player .pstatus{flex:1;max-width:none}
/* under 960 px the status keeps one compact line of its own, above the buttons (fit() budgets the player's height) */
@media (max-width:959.98px){
  .player{flex-wrap:wrap;row-gap:4px}
  .player .pstatus{order:-1;flex:1 0 100%;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:15.6px}   /* the old 12 px x 1.3 line box: the framed bar keeps the same footprint, so the stage does not move */
}
.flow{--fs:1;--flow-bg:#fff;--flow-cell:rgba(20,29,31,.06);--flow-cell-hover:rgba(20,29,31,.1);--flow-fill:rgba(181,220,121,.34);--flow-edge:var(--lime-deep);--flow-name:var(--ink);--flow-soft:#7c898a;--flow-time:var(--text-soft);--flow-ring:var(--ink);
  position:relative;align-self:center;width:min(calc(760px * var(--fs)),100%);height:max(26px,calc(30px * var(--fs)));padding:3px;background:var(--flow-bg);border-radius:var(--r-md);outline:1px solid var(--edge);outline-offset:-1px;user-select:none;-webkit-user-select:none;touch-action:none;cursor:pointer;z-index:12}
.flow[data-theme="dark"]{--flow-bg:#111823;--flow-cell:#1c2431;--flow-cell-hover:#263044;--flow-fill:rgba(181,220,121,.22);--flow-edge:var(--lime);--flow-name:#e6ebf2;--flow-soft:#8792a3;--flow-time:#9aa4b2;--flow-ring:#e6ebf2}
.flow.off{visibility:hidden;pointer-events:none}
.flow:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.fl-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(5px * var(--fs));height:100%}
.fl-seg{position:relative;border-radius:var(--r-xs);background:var(--flow-cell);overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:0 max(6px,calc(9px * var(--fs)));container-type:size;transition:background-color var(--dur-1) ease}
.flow.hover .fl-seg.hov,.flow.drag .fl-seg.hov{background:var(--flow-cell-hover)}
/* the landing's arrival light: a lime wash under the fill, opacity 0 until a piece of paper lands in the segment (GSAP).
   .fl-land (opLand to opClean) promotes the segments and glows to layers up front, in the landing's first frame, not mid-flight */
.fl-glow{position:absolute;inset:0;border-radius:inherit;background:var(--lime);opacity:0;pointer-events:none}
.flow.fl-land .fl-seg{will-change:transform}.flow.fl-land .fl-glow{will-change:opacity}
.fl-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--flow-fill);box-shadow:inset 0 -2px 0 var(--flow-edge);transition:width .3s ease;pointer-events:none}
.fl-name{position:relative;display:flex;align-items:center;gap:3px;font:600 max(var(--t-1),calc(var(--t-1) * var(--fs)))/1.1 var(--font-app),sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--flow-soft);white-space:nowrap;overflow:hidden;transition:color .2s}
.fl-seg.done .fl-name,.fl-seg.cur .fl-name{color:var(--flow-name)}
.fl-ck{display:none;width:.72em;height:.42em;border-left:2px solid var(--flow-edge);border-bottom:2px solid var(--flow-edge);transform:translateY(-.14em) rotate(-45deg);flex:none;margin-right:2px}
.fl-seg.done .fl-ck{display:inline-block}
.fl-txt-short{display:none}
/* full names ("Dispatch", "Validate") clip once a segment drops under ~110px; fall back to 9px, then to a short form
   ("Disp", "Val") rather than truncate mid-word. Both read fully at any width, in either theme */
@container (max-width:85px){.fl-name{font-size:calc(var(--t-1) * .9)}}
@container (max-width:56px){.fl-txt-full{display:none}.fl-txt-short{display:inline}}
.fl-time{position:relative;font:500 max(var(--t-1),calc(var(--t-1) * var(--fs)))/1.1 var(--font-app),sans-serif;font-variant-numeric:tabular-nums;color:var(--flow-time);white-space:nowrap}
@container (max-width:92px){.fl-time{display:none}}
/* a short strip (the 26 px floor, inside the 3 px frame) keeps both lines: they tighten, the time steps down */
@container (max-height:23.5px){.fl-name,.fl-time{line-height:1}.fl-time{font-size:calc(var(--t-1) * .9)}}
.fl-seg.cur{box-shadow:inset 0 0 0 1px var(--flow-ring)}
.fl-head{position:absolute;top:3px;bottom:3px;left:0;width:2px;margin-left:-1px;background:var(--flow-ring);border-radius:1px;transition:left .3s ease;pointer-events:none;z-index:2}
.fl-ghost{position:absolute;top:3px;bottom:3px;left:0;width:1px;background:var(--flow-ring);opacity:0;pointer-events:none;z-index:2}
.flow.hover .fl-ghost,.flow.drag .fl-ghost{opacity:.45}
.fl-tip{position:absolute;top:calc(100% + 6px);left:0;transform:translateX(-50%);background:var(--ink);color:#fff;font:500 var(--t-2)/1.2 var(--font-app),sans-serif;white-space:nowrap;padding:4px 10px;border-radius:999px;box-shadow:0 8px 18px -8px rgba(0,0,0,.5);pointer-events:none;z-index:40}
.flow.arriving .fl-name{color:transparent}
.flow.arriving .fl-ck{display:none}
.flow.fl-in{animation:flIn var(--dur-2) ease both}
.flow.fl-in .fl-seg{animation:flSegIn var(--dur-2) var(--ease) both}
.flow.fl-in .fl-seg:nth-child(2){animation-delay:60ms}.flow.fl-in .fl-seg:nth-child(3){animation-delay:120ms}.flow.fl-in .fl-seg:nth-child(4){animation-delay:180ms}.flow.fl-in .fl-seg:nth-child(5){animation-delay:240ms}
@keyframes flIn{from{opacity:0}to{opacity:1}}
@keyframes flSegIn{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}

/* ---------- chapter 0: the closing card (the devices ease back to the opening's empty state) ---------- */
.stage.closing{height:auto;min-height:var(--stage-h,600px);display:flex;align-items:center;justify-content:center;padding:0}   /* padding 0: the .closing rule also matches the stage; the card now fits the stage, so the player bar stays put */
.stage.closing > .desktop,.stage.closing > .phone,.stage.closing > .ipad{opacity:.18;pointer-events:none;transition:opacity var(--dur-3) ease}
.stage.closing.cl-out > .desktop,.stage.closing.cl-out > .phone,.stage.closing.cl-out > .ipad{opacity:0;transition:opacity var(--dur-2) ease}
.closing:not(.calm) .cl-card{animation:cardIn var(--dur-3) var(--ease) both}
.closing.out{opacity:0;transition:opacity var(--dur-2) ease}
.stage.closing > .ghost,.stage.closing > .fly,.stage.closing > .pulse-dot{visibility:hidden}
.closing{--cs:clamp(.8,var(--s,1),1.12);position:relative;z-index:25;width:100%;display:flex;justify-content:center;padding:calc(10px * var(--cs)) 0}
.cl-card{position:relative;width:min(calc(720px * max(1,var(--cs))),100%);font-family:var(--font-app);color:var(--ink);background:rgba(255,255,255,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:var(--r-md);padding:calc(18px * var(--cs)) calc(20px * var(--cs));box-shadow:var(--sh-lg),0 0 0 1px var(--edge)}
.cl-title{margin-bottom:calc(14px * var(--cs))}
.cl-x{position:absolute;top:8px;right:10px;border:0;background:transparent;font:400 var(--t-4)/1 Poppins,sans-serif;color:var(--text-soft);cursor:pointer;padding:4px 6px}
.cl-x:hover{color:var(--ink)}
.cl-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:calc(14px * var(--cs))}
.cl-acts .op-start,.cl-acts .cl-ghost{min-height:max(32px,calc(36px * var(--cs,1)))}
.cl-link{border:0;background:transparent;padding:4px 0;font:600 var(--t-3) Poppins,sans-serif;color:var(--teal-deep);cursor:pointer;border-bottom:1px solid transparent}
.cl-link:hover{border-bottom-color:currentColor}
.cl-src{margin:calc(8px * var(--cs)) 0 0;font-size:max(var(--t-1),calc(var(--t-1) * var(--cs)));color:var(--text-soft);text-align:right}
.cl-form{position:absolute;inset:auto 16px 16px auto;width:min(300px,calc(100% - 32px));background:#fff;border-radius:var(--r-md);padding:14px;box-shadow:var(--sh-lg),0 0 0 1px var(--edge);display:flex;flex-direction:column;gap:8px;z-index:3}
.cl-form b{font:600 var(--t-3) Poppins,sans-serif}
.cl-form label{display:flex;flex-direction:column;gap:3px;font-size:var(--t-2);font-weight:600;color:var(--text-soft)}
.cl-form input{height:32px;border:1px solid var(--edge);border-radius:var(--r-sm);padding:0 10px;font:600 var(--t-3) var(--font-app);color:var(--ink);background:var(--surface-soft)}
.cl-form span{font-size:var(--t-2);color:var(--text-soft);line-height:1.35}
.cl-form .cl-link{align-self:flex-start}

/* ---------- the paper: how Tuesday runs today (docs/before-after-pass.md). One set of nodes, #op-canvas, two homes: the opening's
   board and the closing's before panel (boardTo). A fixed 400 x 380 design px surface scaled by --bk; every piece is placed in
   canvas px. Invented from the story (no recording); class names avoid .sms .msg .phone .desktop .screen .ticket .stamp ---------- */
:root{--font-hand:'Bradley Hand','Segoe Print','Ink Free','Noteworthy',cursive}
.op-canvas{position:absolute;left:0;top:0;width:400px;height:380px;transform:scale(var(--bk,1));transform-origin:0 0;font-family:Inter,system-ui,sans-serif;color:#1f2937;pointer-events:none;user-select:none;-webkit-user-select:none;text-align:left;letter-spacing:0;text-transform:none}
.pc{position:absolute;border-radius:2px;box-shadow:0 1px 2px rgba(20,29,31,.12),0 8px 16px -8px rgba(20,29,31,.28);rotate:var(--pc-r,0deg);animation:pcDrift var(--pc-jd,7s) ease-in-out var(--pc-jl,0s) infinite alternate;overflow:hidden;font-size:8px;line-height:1.2}
@keyframes pcDrift{from{translate:0 0}to{translate:var(--pc-jx,1px) var(--pc-jy,1px)}}
.pc-lt{left:8px;top:14px;width:128px;height:104px;z-index:3}
.pc-st1{left:146px;top:6px;width:78px;height:74px;z-index:5}
.pc-pad{left:232px;top:12px;width:104px;height:126px;z-index:2}
.pc-sms{left:318px;top:26px;width:78px;height:150px;z-index:6}
.pc-xls{left:6px;top:126px;width:156px;height:96px;z-index:2}
.pc-map{left:170px;top:140px;width:140px;height:100px;z-index:1}
.pc-st2{left:12px;top:248px;width:74px;height:70px;z-index:4}
.pc-call{left:94px;top:230px;width:70px;height:128px;z-index:5}
.pc-inv{left:172px;top:246px;width:124px;height:120px;z-index:3}
.pc-scale{left:302px;top:184px;width:88px;height:134px;z-index:4;box-shadow:none;border-radius:0;overflow:visible;filter:drop-shadow(0 1px 1px rgba(20,29,31,.14)) drop-shadow(0 6px 6px rgba(20,29,31,.16))}
.pc-st3{left:302px;top:302px;width:80px;height:72px;z-index:6}
/* handwriting (a system cursive stack, italic; no handwriting font ships offline) and printed labels */
.pc .hw{font-family:var(--font-hand);font-style:italic;font-weight:400;letter-spacing:0}
.pp-l{font:600 7.5px/12px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#6b7280}
.pp-h{display:block;height:14px;font:700 9px/14px Inter,sans-serif;letter-spacing:.04em;color:#1f2937;white-space:nowrap}
/* lined paper: rules every 12 px from 22 px down, a red margin at 14 px */
.pp-lined{background:linear-gradient(90deg,transparent 14px,#f1b8b8 14px 15px,transparent 15px),repeating-linear-gradient(transparent 0 11px,#dfe7f1 11px 12px) 0 22px/100% 100% no-repeat,#fffdf7;padding:8px 8px 0 19px}
.pp-lined .hw{color:#1e3a8a}
.pp-no{float:right;font:500 7px/14px Inter,sans-serif;letter-spacing:0;color:#6b7280}
.pp-rows{display:grid;grid-template-columns:37px 1fr;grid-auto-rows:12px;align-items:end}
.pc-lt{padding-right:4px}
.pc-lt .pp-l{font-size:7px;letter-spacing:.03em}
.pp-rows .hw{font-size:11px;line-height:12px;white-space:nowrap}
.pp-sig{font-size:12.5px !important;letter-spacing:-.02em}
/* sticky notes: a darker glue strip, a lifted corner */
.pp-sticky{padding:15px 7px 5px;border-radius:1px;box-shadow:0 10px 12px -10px rgba(20,29,31,.45),0 1px 2px rgba(20,29,31,.12)}
.pp-sticky::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:rgba(0,0,0,.06)}
.pp-sticky .hw{display:block;color:#1f2a1a;line-height:1.12}
.pp-green{background:#d9f0a3}.pp-blue{background:#bfe3ec}.pp-yellow{background:#fbe98a}
.pc-st1 .hw{font-size:13px}.pc-st2 .hw,.pc-st3 .hw{font-size:12.5px}
/* the notepad: a spiral band, lined as above */
.pp-pad{background:radial-gradient(circle,#c9ccd1 2px,transparent 2.5px) 1px 0/10px 9px repeat-x,linear-gradient(#eceef1,#eceef1) 0 0/100% 9px no-repeat,linear-gradient(90deg,transparent 14px,#f1b8b8 14px 15px,transparent 15px),repeating-linear-gradient(transparent 0 11px,#dfe7f1 11px 12px) 0 22px/100% 100% no-repeat,#fffef6}
.pp-list{margin:0;padding:22px 4px 0 18px;list-style:none;color:#1f2937;font-size:11.5px;line-height:12px}
.pp-list li{white-space:nowrap}
.pp-list li.o::before{content:"";display:inline-block;width:5px;height:5px;margin:0 3px 0 -9px;border:1px solid #6b7280;border-radius:50%;vertical-align:.5px}
/* devices: a dark bezel, a white (or dark) screen, the app font */
.pp-device{background:#111827;border-radius:12px;padding:4px;box-shadow:0 1px 2px rgba(20,29,31,.2),0 10px 18px -8px rgba(20,29,31,.4)}
.pp-scr{height:100%;border-radius:9px;background:#fff;overflow:hidden;font-family:var(--font-app);color:#111827;display:flex;flex-direction:column}
.pp-sh{padding:7px 6px 4px;border-bottom:1px solid #eef0f3;text-align:center}
.pp-sh b{display:block;font-size:7px;font-weight:700}
.pp-sh span{display:block;font-size:6px;color:#6b7280}
.pp-st{margin:5px 0 4px;font-size:5.5px;color:#6b7280;text-align:center}
.pp-bub{margin:0 8px 0 5px;padding:4px 5px;border-radius:7px;border-bottom-left-radius:2px;background:#e5e7eb;font-size:6.5px;font-weight:500;line-height:1.25;color:#111827}
.pp-dark{background:linear-gradient(#0f172a,#1e293b);color:#fff;align-items:center;padding-top:18px}
.pp-cn{font-size:8px;font-weight:700}
.pp-cs{margin-top:2px;font-size:6px;color:#94a3b8}
.pp-ci{margin-top:6px;font-size:6px;color:#cbd5e1}
.pp-cb{margin-top:auto;margin-bottom:12px;display:flex;gap:16px}
.pp-cb i{width:14px;height:14px;border-radius:50%;display:grid;place-items:center}
.pp-cb i svg{width:8px;height:8px}
.pp-cb .no{background:#ef4444}.pp-cb .no svg{rotate:135deg}
.pp-cb .yes{background:#22c55e}
/* printed: the spreadsheet */
.pp-print{background:#fff;box-shadow:inset 0 0 0 1px #e5e7eb,0 1px 2px rgba(20,29,31,.12),0 8px 16px -8px rgba(20,29,31,.28);padding:5px 6px}
.pp-xh{height:9px;line-height:9px}
.pp-xh b{font:600 7px/9px Inter,sans-serif;color:#1f2937}
.pp-tb{margin-top:4px;width:100%;border-collapse:collapse;font:400 6.5px/1.35 Inter,sans-serif;color:#374151}
.pp-tb th,.pp-tb td{border:1px solid #e5e7eb;padding:1px 2px;text-align:left;white-space:nowrap}
.pp-tb th{background:#f3f4f6;font-weight:600}
.pp-tb .bad{color:#b91c1c;font-weight:600}
.pp-tab{position:absolute;left:6px;bottom:0;padding:1px 6px 2px;border:1px solid #e5e7eb;border-bottom:0;border-radius:2px 2px 0 0;font:600 5.5px Inter,sans-serif;color:#15803d;background:#f9fafb}
.pp-who{position:absolute;right:7px;bottom:3px;font-size:9px;color:#b91c1c}
/* the map */
.pp-map{background:#f3efe4}
.pp-map svg{position:absolute;left:0;top:0;display:block}
.pp-map .hw{position:absolute;font-size:8.5px;color:#1f2937;white-space:nowrap}
.pp-m1{left:6px;top:74px}.pp-m2{left:40px;top:30px}
/* the invoice */
.pp-ir{display:flex;align-items:flex-end;gap:5px;height:12px;line-height:12px;white-space:nowrap}
.pp-ir .hw{font-size:10px;line-height:12px}
.pp-ih,.pp-il{justify-content:space-between}
.pp-in{padding-left:10px}
/* the scale ticket: thermal paper, a torn zigzag foot */
.pp-thermal{height:100%;padding:7px 6px 10px;background:#fbfbf8;font:400 6.5px/9px ui-monospace,'SF Mono',Menlo,Consolas,monospace;color:#3f3f46;white-space:pre;display:flex;flex-direction:column;clip-path:polygon(0 0,88px 0,88px 128px,85px 134px,82px 128px,79px 134px,76px 128px,73px 134px,70px 128px,67px 134px,64px 128px,61px 134px,58px 128px,55px 134px,52px 128px,49px 134px,46px 128px,43px 134px,40px 128px,37px 134px,34px 128px,31px 134px,28px 128px,25px 134px,22px 128px,19px 134px,16px 128px,13px 134px,10px 128px,7px 134px,4px 128px,1px 134px,0px 128px)}
.pp-thermal b{font-weight:700}
.pp-thermal .pp-net{text-align:right;font-size:8px;line-height:11px}
.pp-rule{display:block;height:0;margin:3px 0;border-top:1px dashed #a1a1aa}
/* the drift: off under reduced motion, in the closing, and during the exit */
:root[data-motion="reduce"] .pc,.cl-board .pc{animation:none}
@media (prefers-reduced-motion:reduce){.pc{animation:none}}

/* ---------- chapter 0: the closing, before vs now. Left, the same paper, still, with five red stamps; an ink arrow; right, six
   figures that count up. All of it keys off .cl-reveal on #closing; .closing.calm turns every animation off ---------- */
.cl-kicker{letter-spacing:.08em}
.cl-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cl-head .cl-link{flex:none;font-size:max(var(--t-2),calc(var(--t-2) * var(--cs)))}
.cl-panels{display:grid;grid-template-columns:calc(280px * var(--cs)) calc(36px * var(--cs)) minmax(0,1fr);align-items:start}
.cl-ph{margin:0;height:calc(20px * var(--cs));font-size:max(var(--t-1),calc(var(--t-1) * var(--cs)));line-height:1.2;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-after .cl-ph{color:var(--teal-deep)}
.cl-board{position:relative;--bk:calc(.7 * var(--cs));width:calc(400px * var(--bk));height:calc(380px * var(--bk))}
.cl-stamps{position:absolute;left:0;top:0;width:400px;height:380px;transform:scale(var(--bk,1));transform-origin:0 0;pointer-events:none;z-index:10}
.cl-stamp{position:absolute;white-space:nowrap;font:700 12px/1.2 var(--font-app);letter-spacing:.04em;text-transform:uppercase;color:#c2413a;border:1.5px solid currentColor;border-radius:4px;padding:3px 6px;background:rgba(255,255,255,.55);mix-blend-mode:multiply;rotate:var(--st-r,0deg)}
.cl-bfoot{margin:calc(8px * var(--cs)) 0 0;font-size:max(var(--t-1),calc(var(--t-2) * var(--cs)));line-height:1.35;color:var(--text-soft)}
.cl-before .cl-src{margin:calc(3px * var(--cs)) 0 0;text-align:left}
.cl-arrow{position:relative;justify-self:center;margin-top:calc(139px * var(--cs));width:calc(28px * var(--cs));height:calc(28px * var(--cs));border-radius:50%;background:#141d1f;box-shadow:0 6px 14px -6px rgba(20,29,31,.5)}
.cl-arrow::before{content:"";position:absolute;left:28%;top:50%;width:44%;height:2px;margin-top:-1px;background:#fff;border-radius:1px}
.cl-arrow::after{content:"";position:absolute;left:50%;top:50%;width:26%;height:26%;border-top:2px solid #fff;border-right:2px solid #fff;border-radius:1px;transform:translate(-34%,-50%) rotate(45deg)}
.cl-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(16px * var(--cs));row-gap:calc(10px * var(--cs))}
.cl-tile{min-width:0;border-top:1px solid var(--edge);padding-top:calc(6px * var(--cs))}
.cl-lbl{display:flex;align-items:center;gap:3px;height:calc(12px * var(--cs));font-size:max(var(--t-1),calc(var(--t-1) * var(--cs)));font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep);white-space:nowrap;overflow:hidden}
.cl-lbl .fl-ck{display:inline-block;--flow-edge:var(--lime-deep)}
.cl-val{display:flex;align-items:baseline;gap:calc(4px * var(--cs));height:calc(30px * var(--cs));margin-top:calc(4px * var(--cs));white-space:nowrap}
.cl-fig{font-size:calc(26px * var(--cs));line-height:calc(30px * var(--cs));font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)}
.cl-unit{font-size:max(12px,calc(13px * var(--cs)));font-weight:600;color:var(--text)}
.cl-sl{display:block;font-size:max(var(--t-2),calc(var(--t-2) * var(--cs)));line-height:1.25;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-afoot{margin:calc(10px * var(--cs)) 0 0;font-size:max(var(--t-2),calc(var(--t-2) * var(--cs)));line-height:1.4;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.closing.cl-reveal .cl-stamp{animation:clStamp 220ms var(--ease-pop) both;animation-delay:calc(240ms + var(--i,0) * 100ms)}
.closing.cl-reveal .cl-arrow{animation:clArrow var(--dur-2) var(--ease-pop) 620ms both}
.closing.cl-reveal .cl-after{animation:clAfter var(--dur-3) var(--ease) 700ms both}
.closing.calm .cl-stamp,.closing.calm .cl-arrow,.closing.calm .cl-after{animation:none}
@keyframes clStamp{from{opacity:0;scale:1.4;rotate:calc(var(--st-r,0deg) + 3deg)}to{opacity:1;scale:1;rotate:var(--st-r,0deg)}}
@keyframes clArrow{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes clAfter{from{opacity:0;translate:-16px 0}to{opacity:1;translate:0 0}}
/* from 700 px the stage keeps its design height (the player bar never moves); clFit() shrinks --cs to fit, and below .72 falls back */
@media (min-width:700px){.stage.closing{height:var(--stage-h,600px)}.stage.closing.cl-auto{height:auto}}
/* under 560 px: before, the arrow turned down, then now; the paper takes the panel width (clFit sets --bk) */
@media (max-width:560px){
  .cl-panels{grid-template-columns:minmax(0,1fr)}
  .cl-board{width:100%;height:calc(380px * var(--bk) + 8px);overflow:clip}
  .cl-board > .op-canvas,.cl-board > .cl-stamps{left:4px;top:4px}
  .cl-arrow{margin:calc(10px * var(--cs)) 0;rotate:90deg}
  .cl-fig{font-size:22px}
  .cl-afoot{white-space:normal}
  .cl-head{row-gap:0}
  .cl-head .cl-title{margin-bottom:calc(6px * var(--cs))}
  .cl-head .cl-link{margin-bottom:calc(8px * var(--cs))}
}

/* ---------- the shell: Projects and Truck List (invented, built from the Load Ticket Report: its header row, card, table,
   underlined link cells and "Showing 1-n of n" footer; no Export, Batch, Summary or chips), and the quiet "Not in this demo" tip ---------- */
.nm-list .ltr-card{padding-top:2px}
.nm-list .ltr-table{width:100%}
.nm-list .ltr-vbar{top:36px;bottom:42px}
.nm-mut{color:var(--ltr-mut)}
.nm-list .pill{margin-left:4px}
/* ---------- "Not in this demo": one modal over the stage for every control the demo does not model (the sidebar's stub rows,
   filters, menus, secondary tabs and links on every screen). The demo's own chrome: paper card, --r-xs, Satoshi, the lime
   primary and the quiet text link; a --dur-2 scale/opacity pop on --ease-pop over an ink scrim. Both themes: the page stays light */
.nid{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:12px;--cs:clamp(.82,var(--s,1),1.1);font-family:var(--font-app)}
.nid[hidden]{display:none}
.nid-scrim{position:absolute;inset:0;background:rgba(20,29,31,.42);opacity:0;transition:opacity var(--dur-2) ease}
.nid-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:calc(8px * var(--cs));width:min(360px,100%);padding:calc(22px * var(--cs)) calc(26px * var(--cs)) calc(16px * var(--cs));background:rgba(255,255,255,.96);border-radius:var(--r-xs);box-shadow:0 0 0 1px var(--edge),0 1px 2px rgba(20,29,31,.06),0 18px 40px -18px rgba(20,29,31,.35);color:var(--ink);text-align:center;opacity:0;transform:scale(.96);transition:opacity var(--dur-2) ease,transform var(--dur-2) var(--ease-pop)}
.nid.show .nid-scrim{opacity:1}
.nid.show .nid-card{opacity:1;transform:none}
.nid-eyebrow{font:700 max(var(--t-1),calc(var(--t-1) * var(--cs))) Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--lime-deep)}
.nid-line{margin:0;font-size:max(var(--t-3),calc(var(--t-4) * var(--cs)));font-weight:500;line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
.nid-acts{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:calc(10px * var(--cs))}
.nid-go{text-decoration:none;padding:0 22px}
.nid-go:focus-visible,.nid-back:focus-visible{outline:2px solid var(--lime-deep);outline-offset:2px}
.nid-back{color:var(--text-soft)}
.nid-back:hover{color:var(--ink)}
/* touch widths: both buttons at least 44 px tall */
@media (max-width:700px),(pointer:coarse){.nid-go,.nid-back{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px}}
/* the phone mirror's rows and buttons act on their desktop twins */
.stage :is(.mq-btn,#mq-quick .mq-row,#mq-plan .mq-row,.ac-rail nav a,.app-top .seg button){cursor:pointer}
/* the controls that open it look and feel like the live ones: pointer, a light lift on hover */
.stage :is([data-nid],[data-go],.ghostbtn:not(.act),.qo-search,.truck-row,.order-card.static,.dc-link:not(#dc-open),.dcard .more,.dcard .assign,.dc-tr,.pop-t span,#pop-x,
  .od-search,.od-seg i:not(.on),.od-ib,.od-table tr.ar,.od-table td.act svg,.od-btn,.lnk,.ldd-more,.ldd-tags .add,.ldd-rev .ext,.ldd-sf a,.mm-b,.tl-tk,
  .lv-del,.lv-ics i,.lv-kv u,.lv-pg i,.lv-fc,.ltr-table th.srt,.ltr-pg i,.ltr-pg b:not(.on),.ltr-chip svg,.ltr-tile .q,.nm-list u,.ta-sec-h,#pl-trucks tbody tr,
  .mob-seg i:not(.on),.mob-tiles .tile,.mob-bottom > *,.dv-b,.act-row,.dv-tabs i,#cam-retry,#mk-1601,.modal .x,.modal .cancel){cursor:pointer}
.stage :is([data-nid],[data-go],.ghostbtn:not(.act),.qo-search,.dc-link:not(#dc-open),.dcard .more,.dcard .assign,.pop-t span,#pop-x,.od-search,.od-seg i:not(.on),.od-ib,.od-table td.act svg,
  .lnk,.ldd-more,.ldd-tags .add,.ldd-rev .ext,.ldd-sf a,.mm-b,.lv-del,.lv-ics i,.lv-pg i,.lv-fc,.ltr-table th.srt,.ltr-pg i,.ltr-pg b:not(.on),.ltr-chip svg,.ltr-tile .q,.ta-sec-h,.mob-seg i:not(.on),.mob-bottom > *,.dv-tabs i,#cam-retry,.modal .x,.modal .cancel):hover{filter:brightness(1.12)}
.stage :is(.truck-row,.order-card.static,.dc-tr,.od-table tr.ar,#pl-trucks tbody tr):hover{background:var(--app-hl)}
.stage :is(.mob-tiles .tile,.act-row,.dtile[data-nid],.dtile[data-go]):hover{filter:brightness(.985)}
.stage .lnk:hover,.stage .lv-kv u:hover,.stage .nm-list u:hover{text-decoration:underline}
.nm-tip{position:absolute;z-index:40;left:0;top:0;transform:translateY(-50%);background:var(--lv-tip);color:#fff;font:500 8.5px/1.3 var(--font-app),sans-serif;padding:3px 6px;border-radius:4px;box-shadow:0 4px 10px -4px rgba(0,0,0,.5);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--dur-1) ease}
.nm-tip::before{content:"";position:absolute;left:-3px;top:50%;width:6px;height:6px;background:var(--lv-tip);transform:translateY(-50%) rotate(45deg)}
.nm-tip.show{opacity:1}

/* ---------- Bill, Wednesday 6:02 AM: the driver gets paid (invented, built from the phone's own parts: the lock screen and
   offer card, the Activity shell, chapter 6's pay line and Paid pill). The iPad leaves, the desktop dims back, his phone
   comes to the centre like chapter 1's solo phone, keeping the cab bezel and plate ---------- */
.stage.payday .phone.front{--tx:calc(var(--s,1) * -100.44px);--ty:calc(var(--stage-h,600px) * .5 - 390px + var(--s,1) * 210.6px);transform:scale(calc(var(--s,1) * 1.08))}
.stage.payday .desktop::after{opacity:.38}
/* his bank's app: a separate, fictional credit union (Mesa Valley Credit Union). Navy and white, Inter instead of the app's
   Satoshi, a plain "MV" monogram; light in both themes like the driver app */
.bk-mono{flex:none;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:4px;background:#1f3a68;color:#fff;font:700 5.5px/1 Inter,system-ui,sans-serif;font-style:normal;letter-spacing:.02em;margin-top:1px}
.mob-body.bank{position:absolute;inset:0;z-index:3;margin:0;padding:0;background:#f4f6fa;font-family:Inter,system-ui,sans-serif;color:#0f1b33}
.mob-body.bank.opening{animation:bkOpen var(--dur-2) var(--ease-out) both}
@keyframes bkOpen{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
/* type: the phone is 186 design px for a ~390 pt handset (x .48), so 11 to 15 pt reads 5.3 to 7.2 design px; the
   greeting and the balance are the two display sizes */
.bk-status{flex:none;display:flex;justify-content:space-between;font:600 6.5px Inter,system-ui,sans-serif;padding:26px 14px 0;color:#0f1b33}
.bk-top{flex:none;display:flex;align-items:center;gap:4px;padding:6px 10px 2px}
.bk-top .bk-mono{width:12px;height:12px;border-radius:3.5px;font-size:5px;margin:0}
.bk-name{font-size:6.8px;font-weight:700;color:#1f3a68;letter-spacing:-.01em;margin-right:auto}
.bk-ic{display:inline-flex;color:#1f3a68}
.bk-ic .ic2{width:8.5px;height:8.5px}
.bk-me{display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;margin-left:5px;border-radius:50%;background:#dfe6f2;color:#1f3a68;font:700 5.5px/1 Inter,system-ui,sans-serif;font-style:normal}
.bk-hi{flex:none;padding:3px 10px 4px;font-size:8.5px;font-weight:700;letter-spacing:-.015em}
.bk-acct{flex:none;margin:0 8px;padding:7px 9px 7px;border-radius:9px;background:linear-gradient(135deg,#23427a,#1a3160);color:#fff;display:flex;flex-direction:column;box-shadow:0 4px 10px -6px rgba(26,49,96,.6)}
.bk-acct-h{display:flex;align-items:baseline;gap:4px}
.bk-acct-h b{font-size:6.3px;font-weight:600}
.bk-acct-h span{font-size:6px;color:#b9c6de;font-variant-numeric:tabular-nums;margin-left:auto}
.bk-bal{font-size:15px;font-weight:700;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:6px}
.bk-lbl{font-size:5.3px;color:#b9c6de;margin-top:1px}
.bk-acts{flex:none;display:flex;justify-content:space-around;padding:6px 10px 0}
.bk-acts i{display:flex;flex-direction:column;align-items:center;gap:2.5px;font-style:normal;font-size:5.3px;font-weight:500;color:#33415c}
.bk-acts i .ic2{box-sizing:content-box;width:8px;height:8px;padding:5px;border-radius:50%;background:#fff;color:#1f3a68;box-shadow:0 0 0 1px #e1e6ef}
.bk-sec{flex:none;display:flex;align-items:baseline;justify-content:space-between;padding:6px 10px 3px}
.bk-sec b{font-size:7px;font-weight:700}
.bk-sec span{font-size:5.5px;font-weight:600;color:#1f3a68}
.bk-list{flex:1;min-height:0;overflow:hidden;margin:0 8px;padding:0 7px 2px;background:#fff;border-radius:9px;box-shadow:0 0 0 1px #e8ecf3}
.bk-day{padding:5px 0 1px;font-size:5.3px;font-weight:600;color:#6b778c}
.bk-row{display:flex;align-items:center;gap:5px;height:20px;border-top:1px solid #f0f2f6}
.bk-day + .bk-row{border-top:0}
.bk-av{flex:none;display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:50%;font:700 5.5px/1 Inter,system-ui,sans-serif;font-style:normal;color:#fff;background:var(--av,#64748b)}
.bk-rm{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.2}
.bk-rm b{font-size:6.2px;font-weight:600;color:#0f1b33;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-rm span{font-size:5.3px;color:#6b778c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-amt{flex:none;font-size:6.2px;font-weight:600;color:#0f1b33;font-variant-numeric:tabular-nums}
.bk-row.cr .bk-amt{color:#17704a}
.bk-row.dep{cursor:pointer}
.bk-row.dep.invite{z-index:2;border-radius:6px}
.bk-det{margin:0 -3px 2px;padding:4px 5px 5px;border-radius:6px;background:#f4f7fc;display:flex;flex-direction:column;gap:2px;animation:bkDet var(--dur-2) var(--ease-out) both}
@keyframes bkDet{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.bk-det .a{font-size:9px;font-weight:700;color:#17704a;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.bk-det .t{font-size:6px;font-weight:600;color:#0f1b33}
.bk-det .f,.bk-det .p{font-size:5.5px;color:#4b5870}
.bk-det .m{font-size:5.3px;color:#0f1b33;font-variant-numeric:tabular-nums;letter-spacing:-.01em;padding:2.5px 0;border-top:1px solid #e3e8f1;border-bottom:1px solid #e3e8f1;margin:1px 0}
.bk-det .m i{display:block;font-style:normal;font-size:4.8px;font-weight:600;color:#6b778c;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1px}
.bk-tabs{flex:none;display:flex;justify-content:space-around;margin-top:5px;padding:4px 4px 12px;background:#fff;border-top:1px solid #e3e7ef}
.bk-tabs i{display:flex;flex-direction:column;align-items:center;gap:1px;font-style:normal;font-size:4.8px;font-weight:500;color:#8a94a6}
.bk-tabs i .ic2{width:8px;height:8px}
.bk-tabs i.on{color:#1f3a68;font-weight:600}
/* chapter 6's pill now names the next morning's deposit: it takes its own line under the figure */
.act-pay .paid{grid-column:1 / -1;grid-row:auto;justify-self:start;margin-top:1px;padding:1px 5px;font-size:6px;line-height:1.2;white-space:nowrap}
/* the extra line fits: while the deposit pill shows, the eight load rows tighten a little and all stay whole */
#mq-activity:has(.act-pay .paid) .act-list.eod{gap:3px}
#mq-activity:has(.act-pay .paid) .act-list.eod .act-row b,#mq-activity:has(.act-pay .paid) .act-list.eod .act-row span{line-height:1.1}

/* ---------- sandbox mode: the tray replaces the player; the strip becomes the launcher's compact form (invented, built from
   the player's parts in the Phase D container style: white, 16 px radius, the large shadow and a hairline ring) ---------- */
body[data-mode="sandbox"] .player{display:none}
.tray{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:4px;background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-lg),0 0 0 1px var(--edge);font:600 var(--t-3) Poppins,sans-serif;color:var(--ink)}
.tray[hidden]{display:none}
.tk-sep{width:1px;height:20px;background:var(--edge);margin:0 2px}
#tray-theme{margin-left:auto}
.wf-pop{position:absolute;z-index:40;background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-lg),0 0 0 1px var(--edge);padding:6px;display:flex;flex-direction:column;gap:2px;min-width:360px}
.wf-pop[hidden]{display:none}
#wf-pop{left:6px;bottom:calc(100% + 8px)}
.wf-row{display:grid;grid-template-columns:92px 1fr auto auto;align-items:center;gap:8px;padding:5px 6px;border-radius:var(--r-sm)}
.wf-row:hover{background:rgba(20,29,31,.035)}
.wf-row b{font:700 var(--t-1) var(--font-app),sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep)}
.wf-row span{font:500 var(--t-2) var(--font-app),sans-serif;color:var(--text-soft);white-space:nowrap}
.wf-row .tk-btn{height:28px;padding:0 10px}
.tray-end{position:absolute;z-index:39;right:6px;bottom:calc(100% + 8px);display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-lg),0 0 0 1px var(--edge);font:600 var(--t-3) var(--font-app),sans-serif;color:var(--ink);animation:cardIn var(--dur-2) var(--ease) both}
.tray-end[hidden]{display:none}
/* the strip in sandbox: no scrub head, no tip; a segment opens its workflows under it */
.flow.sandbox .fl-head,.flow.sandbox .fl-ghost,.flow.sandbox .fl-tip{display:none}
.fl-pop{top:calc(100% + 6px);left:0;min-width:330px;cursor:default}
/* free sandbox: no coach marks, no ghost */
.stage.sandbox:not(.wf-run) .hint,.stage.sandbox:not(.wf-run) .ghost{display:none}
/* phone off in sandbox: the desktop centres at the base scale; the phone fades out and slides 40 px right */
.stage.desk,.stage.cab.desk:not(.focus){--dx:0}
.stage.desk .phone{--sx:calc(40px * var(--s,1));opacity:0;visibility:hidden;pointer-events:none;transition:translate var(--dur-3) var(--ease),transform var(--dur-3) var(--ease),opacity var(--dur-3) ease,visibility 0s linear var(--dur-3)}
.stage.desk .offer{left:50%}
@media (max-width:959.98px){.wf-pop{min-width:0;width:calc(100% - 12px)}#tray-theme{margin-left:0}}

/* ---------- under 700 px: one stack, the stage scaled to the width (fit()), a compact bar: 36 px icon buttons with their
   aria-labels, the status on one line above (the player) and the clocks as short times (the tray) ---------- */
@media (max-width:699.98px){
  .chapter{min-height:auto;align-items:flex-start;overflow-x:clip}
  .chapter .wrap{padding:0 8px}
  .player,.tray{gap:4px}
  [data-ic="back"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")}[data-ic="next"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18l6-6-6-6' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")}[data-ic="play"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.2v13.6L19 12z' fill='black'/%3E%3C/svg%3E")}[data-ic="pause"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h3.6v14H7zM13.4 5H17v14h-3.6z' fill='black'/%3E%3C/svg%3E")}[data-ic="replay"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12a7.5 7.5 0 1 0 2.2-5.3' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M4.5 4.5v4h4' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")}[data-ic="theme"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M12 4a8 8 0 0 1 0 16z' fill='black'/%3E%3C/svg%3E")}[data-ic="explore"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M12 2.5v4M12 17.5v4M2.5 12h4M17.5 12h4' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")}[data-ic="phone"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.5' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M11 18h2' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")}[data-ic="ipad"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='3' width='16' height='18' rx='2.5' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M11 17.5h2' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")}[data-ic="reset"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12a7.5 7.5 0 1 0 2.2-5.3' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M4.5 4.5v4h4' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")}
  .pbtn[data-ic],.tk-btn[data-ic]{width:36px;height:36px;min-width:36px;padding:0;gap:0;font-size:0}
  .pbtn[data-ic]::before,.tk-btn[data-ic]::before{content:"";width:17px;height:17px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
  #tray-wf{height:36px;padding:0 10px}
  .tk-sep{display:none}
  #tray-theme{margin-left:auto}
  .tray-end{left:6px;right:6px;flex-wrap:wrap}
}

/* ---------- the website view (?site=1): the new site's header and the MQL gate. Everything here is scoped to
   html[data-site], so the default page is untouched. Values from docs/research-website-chrome.md ---------- */
html[data-site] .site-nav{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--line)}
html[data-site] .site-nav .wrap{height:74px;padding:0 26px;gap:1rem;justify-content:space-between;font-family:Poppins,system-ui,sans-serif;line-height:1.62}
/* the horizontal lockup, drawn from the two local assets: the icon, then the stacked logo's wordmark cropped out (34 px tall, as on the site) */
html[data-site] .site-nav .logo{--lk:1;position:relative;display:block;flex:none;width:calc(172px * var(--lk));height:calc(34px * var(--lk))}
html[data-site] .site-nav .logo img{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
html[data-site] .site-nav .logo::before,html[data-site] .site-nav .logo::after{content:"";position:absolute;background-repeat:no-repeat}
html[data-site] .site-nav .logo::before{left:calc(4px * var(--lk));top:0;width:calc(33px * var(--lk));height:calc(33px * var(--lk));background-image:url(../assets/newmile-icon.png);background-size:100% 100%}
html[data-site] .site-nav .logo::after{left:calc(45.6px * var(--lk));top:calc(3px * var(--lk));width:calc(125px * var(--lk));height:calc(21.4px * var(--lk));background-image:url(../assets/newmile-logo.png);background-size:calc(131.65px * var(--lk)) auto;background-position:calc(-3.22px * var(--lk)) calc(-34.56px * var(--lk))}
html[data-site] .site-nav nav{gap:2.1rem;font-size:.79rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink)}
html[data-site] .site-nav nav a{position:relative;padding:.4rem 0;transition:color .2s}
html[data-site] .site-nav nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:0 50%;transition:transform .25s var(--ease)}
html[data-site] .site-nav nav a:hover,html[data-site] .site-nav nav a.on{color:var(--teal-deep)}
html[data-site] .site-nav nav a.on{box-shadow:none}
html[data-site] .site-nav nav a:hover::after,html[data-site] .site-nav nav a.on::after{transform:scaleX(1)}
html[data-site] .nav-right{margin-left:0;gap:1.2rem}
html[data-site] .login{font-size:.79rem;font-weight:600;letter-spacing:.11em;color:var(--ink)}
html[data-site] .site-nav .btn.lime{border:1.5px solid transparent;border-radius:10px;padding:.85em 1.5em;font:600 .92rem/1.62 Poppins,system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap;background:var(--lime);color:#243d0a;box-shadow:0 6px 16px -8px rgba(20,29,31,.4);transition:transform .3s var(--ease),background-color .2s,box-shadow .3s}
html[data-site] .site-nav .btn.lime:hover{background:#abd56b;transform:translateY(-2px)}
html[data-site] .chapter{scroll-margin-top:75px;min-height:calc(100vh - 75px)}
@media (min-width:880.02px) and (max-width:960px){html[data-site] .site-nav nav{display:flex}html[data-site] .login{display:inline}}
@media (max-width:560px){
  html[data-site] .site-nav .wrap{padding:0 16px}
  html[data-site] .site-nav .logo{--lk:.76}
  html[data-site] .site-nav .btn.lime{padding:.7em 1.1em;font-size:.86rem}
}
@media (max-width:699.98px){html[data-site] .chapter{min-height:auto}}

/* the gate: the demo stays visible under a 6 px blur and a light scrim; the card uses the site's tokens */
html[data-site] #ch1 .chapter-col{transition:filter var(--dur-3) var(--ease)}
html[data-gate] #ch1 .chapter-col{filter:blur(6px)}
html.sg-lock{overflow:hidden}
.site-gate{position:fixed;left:0;right:0;bottom:0;top:75px;z-index:40;display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow-y:auto;overscroll-behavior:contain;background:rgba(242,246,245,.42);opacity:1;transition:opacity var(--dur-3) var(--ease)}
.site-gate.out{opacity:0;pointer-events:none}
/* two steps in one card: labels only, the site's tokens (Poppins, ink, lime CTA, 1 px #dde6e3, 10 px fields and chips). The top
   edge is fixed where the tallest step (Hauler with its errors, about 660 px) would sit centred, so a step or role change only grows downward */
.sg-card{width:min(460px,100%);margin:max(0px,calc((100vh - 767px) / 2)) auto auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:24px 26px 18px;font-family:Poppins,system-ui,sans-serif;color:var(--text);text-align:left}
.sg-step:not([hidden]){animation:fadeUp var(--dur-2) var(--ease) both}
.sg-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:22px}
.sg-eyebrow{display:inline-flex;align-items:center;gap:.6em;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-deep)}
.sg-eyebrow::before{content:"";width:22px;height:1.5px;background:var(--teal)}
.sg-back{border:0;background:none;padding:2px 0;font:600 .79rem Poppins,system-ui,sans-serif;color:var(--teal-deep);cursor:pointer;display:inline-flex;align-items:center;gap:.35em}
.sg-back::before{content:"";width:6px;height:6px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:1px}
.sg-back:hover{color:var(--ink)}
.sg-title{margin:8px 0 0;font-size:1.6rem;line-height:1.1;font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.sg-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 12px;margin:18px 0 0}
.sg-f{display:flex;flex-direction:column;min-width:0}
.sg-f.wide{grid-column:1 / -1}
.sg-f label,.sg-q legend{font-size:.79rem;font-weight:600;color:var(--ink);margin:0 0 5px;padding:0}
.sg-f input,.sg-note input{height:44px;width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 12px;font:500 .94rem Poppins,system-ui,sans-serif;color:var(--ink);outline:0;transition:border-color .2s,box-shadow .2s}
.sg-f input:focus,.sg-note input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(97,176,188,.25)}
.sg-f input[aria-invalid="true"]{border-color:#c2412d}
.sg-f input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(194,65,45,.18)}
.sg-note{margin:8px 0 0}
.sg-note input{height:38px;font-size:.86rem}
.sg-note input::placeholder{color:#8a9798}
/* a question: its label, its chips (radio inputs, one row where they fit) and its error */
.sg-q{border:0;margin:14px 0 0;padding:0;min-width:0}
.sg-q legend{display:block;float:left;width:100%}
.sg-q legend + *{clear:both}
.sg-chips{display:flex;flex-wrap:wrap;gap:6px}
.sg-chip{position:relative;display:inline-flex;cursor:pointer}
.sg-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sg-chip span{display:inline-flex;align-items:center;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font:500 .84rem Poppins,system-ui,sans-serif;color:var(--ink);white-space:nowrap;transition:border-color .2s,background-color .2s,color .2s}
.sg-chip:hover span{border-color:#b7c8c4}
.sg-chip input:checked + span{border-color:var(--teal-deep);background:#e8f3f4;color:var(--teal-ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--teal-deep)}
.sg-chip input:focus-visible + span{outline:2px solid var(--teal-deep);outline-offset:2px}
/* "I am a": one segmented control, the choice filled ink */
.sg-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft)}
.sg-seg .sg-chip span{width:100%;justify-content:center;height:38px;border:0;border-radius:8px;background:transparent;font-weight:600}
.sg-seg .sg-chip:hover span{background:#fff}
.sg-seg .sg-chip input:checked + span{background:var(--ink);color:#fff;box-shadow:none}
.sg-seg .sg-chip{display:flex}
.sg-qs:not([hidden]){animation:fadeUp var(--dur-2) var(--ease) both}
/* inline errors in the demo's inline line style (the op-turn / turn-line: a 6 px dot, 600 weight, small type) */
/* every field and question keeps its error line's height (one line, 1.35 x .74rem) whether or not a message shows, so a row
   never moves when its error clears and a click lands where it aimed */
.sg-err{margin:6px 0 0;min-height:calc(.74rem * 1.35);display:flex;align-items:flex-start;gap:6px;font:600 .74rem/1.35 var(--font-app),sans-serif;color:#b3402f}
.sg-err::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;margin-top:.36em}
.sg-err:not(.on){visibility:hidden}
.sg-err.on{animation:fadeUp .3s ease}
.sg-btn{margin:18px 0 0;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:1.5px solid transparent;border-radius:10px;padding:.85em 1.5em;font:600 .92rem/1.62 Poppins,system-ui,sans-serif;letter-spacing:.01em;background:var(--lime);color:#243d0a;box-shadow:0 6px 16px -8px rgba(20,29,31,.4);cursor:pointer;transition:transform .3s var(--ease),background-color .2s,box-shadow .3s}
.sg-btn:hover{background:#abd56b;transform:translateY(-2px)}
.sg-btn:focus-visible,.sg-clear:focus-visible,.sg-back:focus-visible{outline:2px solid var(--teal-deep);outline-offset:2px}
.sg-small{margin:12px 0 0;font-size:.76rem;line-height:1.45;color:var(--text-soft);text-align:center}
.sg-clear{position:fixed;right:12px;top:83px;z-index:60;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--teal-deep);font:600 11px Poppins,system-ui,sans-serif;padding:5px 10px;cursor:pointer;box-shadow:var(--sh-sm,0 1px 2px #141d1f0d)}
.op-hi{color:var(--ink);font-weight:600}
/* touch: every control in the card is at least 44 px tall (padding, not type size); Back keeps its 22 px row by a negative margin */
@media (max-width:480px),(pointer:coarse){
  .sg-chip span,.sg-seg .sg-chip span,.sg-note input{height:44px}
  .sg-back{min-height:44px;padding:0 10px;margin:-11px -10px}
}
@media (max-width:480px){
  .site-gate{top:75px;padding:12px;align-items:flex-start}
  .sg-card{margin-top:0;padding:18px 18px 14px}
  .sg-title{font-size:1.4rem}
  .sg-grid{gap:10px}
  .sg-q{margin-top:8px}
  .sg-err{margin-top:4px}
  .sg-note{margin-top:6px}
  .sg-btn{margin-top:14px}
  .sg-chip span{padding:0 10px;font-size:.82rem}
  .sg-clear{top:auto;bottom:12px}
}
@media (max-width:340px){.sg-grid{grid-template-columns:1fr}}

/* ---------- reduced motion: one block. Durations collapse to 1 ms; invites hold a static ring ---------- */
@media (prefers-reduced-motion:reduce){
  :root{--dur-1:1ms;--dur-2:1ms;--dur-3:1ms;--dur-slow:1ms}
  *,*::before,*::after{animation-duration:1ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:1ms !important;transition-delay:0s !important}
  .invite,.op-f.op-inv,.lk-card.invite{animation:none;box-shadow:0 0 0 2px var(--lime-deep)}
}
/* the same block under the QA switch (?motion=reduce or localStorage nm-motion, set on <html> before the first paint) */
:root[data-motion="reduce"]{--dur-1:1ms;--dur-2:1ms;--dur-3:1ms;--dur-slow:1ms}
:root[data-motion="reduce"] *,:root[data-motion="reduce"] *::before,:root[data-motion="reduce"] *::after{animation-duration:1ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:1ms !important;transition-delay:0s !important}
:root[data-motion="reduce"] .invite,:root[data-motion="reduce"] .op-f.op-inv,:root[data-motion="reduce"] .lk-card.invite{animation:none;box-shadow:0 0 0 2px var(--lime-deep)}

/* ---------- simulation mode (the default interactive experience, docs/simulation-mode.md): no player, no strip, no coach
   marks; the tray keeps Phone, iPad, theme, Reset and "Try this". Everything here is scoped to the sim, so the video and
   its guided engine are untouched ---------- */
body[data-mode="sim"] :is(.player,#flow,.hint,.ghost,.offer,#tray-explore,#tray-wf,#wf-pop,#tray-end,.tray > .tk-sep){display:none !important}
.stage.sim .ta{overflow-y:auto;overscroll-behavior:contain}
.stage.sim .ta-row.draft.sim-dr{cursor:pointer}
.stage.sim .ta-row.draft.chk{background:rgba(240,88,106,.12);box-shadow:inset 2px 0 0 var(--app-red)}
.stage.sim .ta-foot .btn-primary{margin-left:6px}
.stage.sim .ta-foot em{font-size:8px}
.stage.sim .dcard[data-k]{cursor:pointer}
.stage.sim .dcard:not(.on):hover{border-color:rgba(63,109,246,.3)}
.stage.sim #sim-mks .mk{cursor:pointer}
.stage.sim #sim-mks .mk .mk-t{pointer-events:none}
.stage.sim .rv-trucks .tk[data-n]{cursor:pointer}
.stage.sim .order-card[data-k]{cursor:pointer}
.stage.sim .order-card.sim-new{animation:tilePop .7s ease 2}
.stage.sim .truck-row[data-n]{cursor:pointer}
.stage.sim .dv-feed .dv-msg.in:last-child{animation:fadeUp .3s ease}
.stage.sim .spill.prog{background:#e5e7eb;color:#374151}
.stage.sim .spill.prog.driving{background:#e8f5d4;color:#3f6212}.stage.sim .spill.prog.pickup{background:#ffe8d4;color:#c2410c}
.stage.sim .spill.prog.transit{background:#dbe7ff;color:#1d4ed8}.stage.sim .spill.prog.dropoff{background:#d7f5e6;color:#047857}
.stage.sim .ltr-ok.needs{background:#ffedd5;color:#c2410c}.stage.sim .ltr-ok.upd{background:#e2e8f0;color:#334155}.stage.sim .ltr-ok.inv{background:#fee2e2;color:#b91c1c}
.stage.sim[data-theme="dark"] .ltr-ok.needs{background:rgba(249,115,22,.18);color:#fb923c}
.stage.sim[data-theme="dark"] .ltr-ok.upd{background:rgba(148,163,184,.2);color:#cbd5e1}.stage.sim[data-theme="dark"] .ltr-ok.inv{background:rgba(239,68,68,.18);color:#f87171}
.stage.sim .act-pill.invalid{background:#fee2e2;color:#b91c1c}
.stage.sim .ltr-pg .sim-pg{cursor:pointer}
.stage.sim .ac-tabs .sim-inv{margin-left:auto;font-weight:500;color:#6b7684}.stage.sim .ac-tabs .sim-inv + .sim-inv{margin-left:0}
.stage.sim .ac-tabs .sim-inv.on{color:#0f8b7d;border-bottom-color:transparent}
.stage.sim #mq-notif{cursor:pointer}
/* "Show me": one subtle pulse on the control to press, then it lets go */
.stage.sim .sim-pulse{position:relative;z-index:6;animation:invitePulse 1.5s ease-in-out 2 !important}
.stage.sim .mk.sim-pulse{animation:none !important}
.stage.sim .mk.sim-pulse .halo{animation:simHalo 1.5s ease-in-out 2}
@keyframes simHalo{0%,100%{opacity:0}50%{opacity:1}}
/* "Try this": a pill at the tray's right end; its card opens above it, out of the app's way, and folds away once you work */
.try-pill{gap:7px;margin-left:2px}
.try-pill[hidden]{display:none}
.try-pill .try-dot{width:7px;height:7px;border-radius:50%;background:var(--lime-deep,#8fbf4d);box-shadow:0 0 0 3px rgba(181,220,121,.35)}
.try-pill b{font-weight:600;color:var(--text-soft);font-variant-numeric:tabular-nums}
.try-pill.all .try-dot{background:#16a34a}
.try-pill[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:#fff}.try-pill[aria-expanded="true"] b{color:rgba(255,255,255,.75)}
.try-pill.try-bump{animation:tkPop .5s ease}
.try-card{position:absolute;z-index:41;right:4px;bottom:calc(100% + 8px);width:268px;padding:10px 10px 8px 14px;background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-lg),0 0 0 1px var(--edge);font:500 var(--t-3) var(--font-app),sans-serif;color:var(--ink);animation:cardIn var(--dur-2) var(--ease) both}
.try-card[hidden]{display:none}
.try-h{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px}
.try-h b{font:700 var(--t-1) var(--font-app),sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep)}
.try-x{width:24px;height:24px;border:0;border-radius:var(--r-sm);background:transparent;cursor:pointer;position:relative}
.try-x::before{content:"";position:absolute;left:8px;top:6px;width:7px;height:7px;border-right:1.6px solid var(--text-soft);border-bottom:1.6px solid var(--text-soft);transform:rotate(45deg)}
.try-x:hover{background:rgba(20,29,31,.05)}
.try-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.try-it{display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:8px;min-height:28px;padding:2px 0;font-size:12.5px;line-height:1.3}
.try-ck{width:14px;height:14px;border-radius:4px;border:1.5px solid #c5cfcd;background:#fff;position:relative}
.try-it.done .try-ck{background:var(--lime-deep,#8fbf4d);border-color:var(--lime-deep,#8fbf4d)}
.try-it.done .try-ck::after{content:"";position:absolute;left:3.5px;top:.5px;width:4px;height:7.5px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.try-it.done span{color:var(--text-soft);text-decoration:line-through;text-decoration-color:rgba(20,29,31,.25)}
.try-it.try-new .try-ck{animation:tkPop .5s ease}
.try-show{border:0;background:none;padding:4px 2px;font:600 11.5px var(--font-app),sans-serif;color:var(--teal-deep);cursor:pointer;white-space:nowrap}
.try-show:hover{color:var(--ink);text-decoration:underline}
.try-show:focus-visible,.try-x:focus-visible{outline:2px solid var(--teal-deep);outline-offset:1px}
@media (max-width:699.98px){.try-card{left:4px;right:4px;width:auto}.try-pill .try-lbl{display:none}.try-pill{height:36px;padding:0 10px}}
.stage.sim .order-card[data-k]{display:block;flex:0 0 auto}
.stage.sim .orders-row{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.stage.sim .dash .panel{min-height:0}
.stage.sim .dash .panel > .truck-rows{overflow-y:auto;min-height:0;scrollbar-width:thin}
.stage.sim #sim-mks .mk .halo{fill:rgba(63,140,246,.22)}
.stage.sim #sim-mks .mk circle:nth-of-type(2){fill:#3f8cf6;transition:fill .4s ease}
.stage.sim #sim-mks .mk.st-off circle:nth-of-type(2),.stage.sim #sim-mks .mk.st-off .wh{fill:#8a93a3}
.stage.sim #sim-mks .mk.st-driving circle:nth-of-type(2),.stage.sim #sim-mks .mk.st-driving .wh{fill:#a8d86a}
.stage.sim #sim-mks .mk.st-pickup circle:nth-of-type(2),.stage.sim #sim-mks .mk.st-pickup .wh{fill:#ef8a3a}
.stage.sim #sim-mks .mk.st-transit circle:nth-of-type(2),.stage.sim #sim-mks .mk.st-transit .wh{fill:#5b8def}
.stage.sim #sim-mks .mk.st-dropoff circle:nth-of-type(2),.stage.sim #sim-mks .mk.st-dropoff .wh{fill:#7fd6a8}
.stage.sim #sim-mks .mk.moving .halo{opacity:1}
.stage.sim .dc-ev{animation:none}
.stage.sim.trio .phone .plate{left:auto;right:0;transform:none}
.stage.sim .pill.completed{background:rgba(148,163,184,.18);color:var(--app-mut)}
.stage.sim .dash .panel .orders-row{overflow:auto;scrollbar-width:thin}
.stage.sim .pill.unassigned{white-space:nowrap}
/* the dashboard scrolls like the app's own page: panels keep their natural height, the truck list scrolls inside itself */
.stage.sim #dash-page{overflow-y:auto;scrollbar-width:thin}
.stage.sim #dash-page > .panel{flex:none;overflow:visible}
.stage.sim #dash-page > .panel > .truck-rows{max-height:118px}
.stage.sim #dash-page .orders-row{flex:none;overflow-x:auto;overflow-y:visible;padding-bottom:2px}
.try-pill.try-hello{animation:invitePulse 1.5s ease-in-out 2}
.tray .mob-tab{display:none}
/* the sim's one-device layout (under 700 px, and the driver segment at any width): Office or Driver */
.stage.sim.mob-office :is(.phone,.ipad),.stage.sim.mob-driver :is(.desktop,.ipad){display:none}
.stage.sim.mob-office .desktop{translate:0 0 !important;transform:translateX(-50%) !important;opacity:1 !important}
.stage.sim.mob-office .desktop::after{opacity:0 !important}
.stage.sim.mob-driver .phone{translate:0 calc(var(--pk,1) * 32px) !important;transform:translateX(-50%) scale(var(--pk,1)) !important;transform-origin:50% 0;opacity:1 !important;visibility:visible !important;pointer-events:auto !important}
.stage.sim.mob-driver .phone .plate{display:block}
body[data-mode="sim"][data-seg="driver"] .tray .mob-tab{display:inline-flex}
body[data-mode="sim"][data-seg="driver"] :is(#tray-phone,#tray-ipad){display:none}
@media (max-width:699.98px){
  body[data-mode="sim"] .tray .mob-tab{display:inline-flex;height:36px;padding:0 12px}
  body[data-mode="sim"] :is(#tray-phone,#tray-ipad){display:none}
  body[data-mode="sim"] .try-card{position:fixed;left:0;right:0;bottom:0;width:auto;max-height:50vh;overflow-y:auto;border-radius:16px 16px 0 0;z-index:60;padding-bottom:max(10px,env(safe-area-inset-bottom))}
}
}
.stage.sim .geo text{paint-order:stroke;stroke:var(--map-bg,#eef1f4);stroke-width:2.5px;stroke-linejoin:round}
.stage.sim #geo-drop text{text-anchor:start}.stage.sim #geo-pick text{text-anchor:end}

/* segment builds (?flow= / window.NM_FLOW): embedded in a site page, so no site header and no outer scroll; the stage fits the frame */
html[data-embed] .site-nav{display:none}
html[data-embed],html[data-embed] body{overflow:hidden;height:100%}
html[data-embed] .chapter{min-height:100vh;padding:6px 0;box-sizing:border-box;scroll-margin-top:0}
html[data-embed] .chapter .wrap{padding:0 8px}
html[data-embed] .site-gate{top:0}
.try-all-li{list-style:none;margin-top:4px;padding-top:6px;border-top:1px solid var(--edge)}
.try-all{border:0;background:none;padding:4px 0;font:600 12.5px var(--font-app),sans-serif;color:var(--teal-deep);cursor:pointer}
.try-all:hover{color:var(--ink);text-decoration:underline}
.stage.sim:not(.mob-driver) .phone .plate{left:auto;right:0;transform:none}

/* keyboard focus (WCAG 2.4.7): visible ring on the demo's div/span controls and on inputs that clear the default outline */
.dtile:focus-visible,[data-go]:focus-visible,.x:focus-visible,.dl-it:focus-visible,.pt:focus-visible,.qt:focus-visible,.fld.dd:focus-visible,.dd-list li:focus-visible,.truck-rows:focus-visible{outline:2px solid var(--app-blue);outline-offset:2px}
.tf-in:focus-visible,.lv-in:focus-visible,.lv-ta:focus-visible,.bt-in:focus-visible,.fld:focus-visible{outline:2px solid var(--app-blue);outline-offset:1px}