:root{
  color-scheme:light; /* the app has one theme; without this, native form controls (date/select) still
    render dark-on-dark when the OS is in dark mode even though the media query below no longer fires */
  --bg:#f4f0e9; --panel:#fffdf9; --ink:#26221d; --muted:#6b6357; --faint:#b3a99c; --line:#e9e3d8; --line2:#f2ede4;
  --brand:#b8542e; --brand-ink:#9a4423; --brand-bg:#f6e7dd;
  --accent:#3f6fb0; --accent-bg:#e7eefb; --green:#3a8560; --green-ink:#2c6b4c; --green-bg:#e6f1ea;
  --red:#c65a4e; --red-bg:#f9e6e2; --amber:#b8791f; --amber-bg:#f7ecd6;
  --purple:#6f5fc9; --purple-bg:#ece9fa; --radius:12px; --radius-sm:10px;
  --serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  --page:linear-gradient(168deg,#f5f1ea 0%,#f2ede5 60%);
  --hd:linear-gradient(165deg,#3a342c 0%,#2a251f 100%);
  --shadow:0 1px 2px rgba(60,45,30,.04),0 6px 18px rgba(60,45,30,.06);
  --shadow-sm:0 1px 3px rgba(60,45,30,.06);
}
/* Dark-mode variables intentionally removed (bug fix, not a design choice): on iPhone dark mode,
   several surfaces stayed on light-mode assumptions (e.g. .toast's hardcoded #2a251f background,
   ui2.css tokens that don't mirror these variables) while this block switched --panel/--ink to their
   dark pairing, so text rendered dark-on-dark / near-black-on-near-black in places. Until every
   surface in the app is audited and reworked as a real dark theme, the safe fix is one theme only —
   this media query must stay empty, not silently reintroduce a per-variable dark palette. */
@media (prefers-color-scheme: dark){}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
.app{max-width:448px;margin:0 auto;min-height:100vh;background:var(--page);position:relative;padding-bottom:82px;overflow-x:hidden}
/* The bottom nav already grows by env(safe-area-inset-bottom) for the iPhone home
   indicator, but nothing else did — so on those devices the nav grew and the last
   row of every list stayed underneath it. Anything measured from the bottom edge
   has to grow by the same inset or it ends up behind the taller nav. */
.app{padding-bottom:calc(82px + constant(safe-area-inset-bottom))}
.app{padding-bottom:calc(82px + env(safe-area-inset-bottom, 0px))}

.head{background:var(--hd);color:#fff;padding:18px 17px 20px;position:sticky;top:0;z-index:10;
  border-radius:0 0 18px 18px;box-shadow:0 6px 18px rgba(40,30,20,.16);overflow:hidden}
/* iOS safe area (TASK-070). index.html carries viewport-fit=cover and
   apple-mobile-web-app-status-bar-style=black-translucent, which is what puts the
   status bar OVER the page — so a fixed/sticky header at top:0 renders underneath
   the clock. 26px rather than the plain 18px reserves the strip #sync-dot occupies
   just below the inset, so the "synced" chip can never land on the shell buttons.
   constant() first, env() second: iOS 11.0-11.2 only understood the former, and the
   later valid declaration wins everywhere else. */
.head{padding-top:calc(26px + constant(safe-area-inset-top))}
.head{padding-top:calc(26px + env(safe-area-inset-top, 0px))}
.head::after{content:"";position:absolute;right:-40px;top:-56px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.08)}
/* wrap is the safety net; min-width:0 + ellipsis on .who is what actually stops the
   overlap. A flex item defaults to min-width:auto, so a long name refused to shrink
   and pushed the buttons out of the row instead of truncating. */
.head .top{display:flex;align-items:center;gap:11px;position:relative;z-index:1;flex-wrap:wrap;row-gap:8px}
.head .who{min-width:0;flex:1 1 0}
.head .who b,.head .who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.head .pic{width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;flex-shrink:0;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.head .who b{font-family:var(--serif);font-size:18px;font-weight:700;display:block;letter-spacing:-.2px}
.head .who span{font-size:12px;color:rgba(255,255,255,.82)}
.head .switch{margin-left:auto;background:rgba(255,255,255,.18);color:#fff;border:none;border-radius:11px;padding:9px 12px;
  min-width:44px;min-height:44px;justify-content:center;
  font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;backdrop-filter:blur(4px)}
.head .switch:active{background:rgba(255,255,255,.3)}
.head .status{margin-top:13px;font-size:11px;font-weight:600;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:20px;position:relative;z-index:1}
.head .status .dot{width:7px;height:7px;border-radius:50%;background:#8ff0c8;box-shadow:0 0 0 3px rgba(143,240,200,.25)}

.body{padding:15px}
.sect{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:800;margin:20px 3px 10px}
.sect:first-child{margin-top:6px}

.mkpis{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 15px;box-shadow:var(--shadow-sm)}
.kpi .l{font-size:11.5px;color:var(--muted);margin-bottom:5px;font-weight:600}
.kpi .v{font-family:var(--serif);font-size:25px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.kpi .v small{font-size:11px;color:var(--muted);font-weight:500}
.kpi.accent{background:var(--accent-bg);border-color:transparent}.kpi.accent .l,.kpi.accent .v{color:var(--accent)}
.kpi.green{background:var(--green-bg);border-color:transparent}.kpi.green .l,.kpi.green .v{color:var(--green-ink)}
.kpi.amber{background:var(--amber-bg);border-color:transparent}.kpi.amber .l,.kpi.amber .v{color:var(--amber)}
.kpi.red{background:var(--red-bg);border-color:transparent}.kpi.red .l,.kpi.red .v{color:var(--red)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:5px 15px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.card.pad{padding:16px}
.card h3{font-size:14px;font-weight:750;margin:14px 0 3px}
.li{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line2)}
.li:last-child{border-bottom:none}
.li .ic{width:40px;height:40px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;background:var(--brand-bg);color:var(--brand-ink)}
.li .ic.g{background:var(--green-bg);color:var(--green-ink)}.li .ic.a{background:var(--amber-bg);color:var(--amber)}
.li .ic.r{background:var(--red-bg);color:var(--red)}.li .ic.p{background:var(--purple-bg);color:var(--purple)}
.li .ic.b{background:var(--accent-bg);color:var(--accent)}
.li .m{flex:1;min-width:0}
.li .m b{font-size:13.5px;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .m span{font-size:12px;color:var(--muted)}
.li .end{text-align:right;font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}

.tag{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:20px;white-space:nowrap;display:inline-block;letter-spacing:.2px}
.tag.green{background:var(--green-bg);color:var(--green-ink)}.tag.red{background:var(--red-bg);color:var(--red)}
.tag.amber{background:var(--amber-bg);color:var(--amber)}.tag.blue{background:var(--accent-bg);color:var(--accent)}
.tag.purple{background:var(--purple-bg);color:var(--purple)}.tag.gray{background:var(--line);color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);border-radius:12px;padding:12px 15px;min-height:44px;font-size:13.5px;font-weight:700;transition:.1s;box-shadow:var(--shadow-sm)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--brand);color:#fff;border-color:transparent;box-shadow:0 5px 14px rgba(184,84,46,.26)}
.btn.green{background:var(--green);color:#fff;border-color:transparent;box-shadow:0 5px 14px rgba(58,133,96,.26)}
.btn.danger{background:var(--red-bg);color:var(--red);border-color:transparent;box-shadow:none}
.btn.full{width:100%}.btn.sm{padding:8px 12px;min-height:44px;font-size:12.5px;border-radius:10px}
.ns_role.on{background:var(--brand);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(184,84,46,.26)}
.btn-row{display:flex;gap:9px;margin:6px 0 4px}
.btn-row .btn{flex:1}
.fab{position:fixed;bottom:calc(94px + constant(safe-area-inset-bottom));right:max(14px,calc(50% - 224px + 14px));z-index:20;width:56px;height:56px;border-radius:50%;
  background:var(--brand);color:#fff;border:none;font-size:27px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(184,84,46,.4)}
.fab{bottom:calc(94px + env(safe-area-inset-bottom, 0px))}
.fab:active{transform:scale(.94)}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;max-width:448px;margin:0 auto;background:var(--panel);border-top:1px solid var(--line);
  display:flex;justify-content:space-around;padding:8px 2px;padding-bottom:calc(9px + env(safe-area-inset-bottom));z-index:15;box-shadow:0 -2px 12px rgba(16,50,38,.05)}
.bn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:600;color:var(--muted);border:none;background:none;flex:1;padding:2px;min-height:44px}
.bn .i{font-size:20px;line-height:1}
.bn.on{color:var(--brand)}

#map{width:100%;height:260px;border-radius:14px;border:1px solid var(--line);margin-bottom:6px;z-index:1}
.mk{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:var(--brand);color:#fff;font-weight:700;font-size:12px;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.mk.depot{background:var(--accent)}
.mk.done{background:var(--muted)}
.leaflet-container{font:inherit}
.progress{height:8px;border-radius:6px;background:var(--line);overflow:hidden}
.progress>i{display:block;height:100%;background:var(--brand);border-radius:6px;transition:width .3s}
.empty{text-align:center;padding:44px 16px;color:var(--muted)}
.empty .ei{font-size:38px;opacity:.55;margin-bottom:10px}
.muted{color:var(--muted)}.tabnum{font-variant-numeric:tabular-nums}

/* bottom sheet / forms */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:none}
.scrim.show{display:block}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:448px;margin:0 auto;background:var(--panel);
  border-radius:22px 22px 0 0;z-index:51;transform:translateY(100%);transition:transform .25s;max-height:88vh;overflow-y:auto;display:none;box-shadow:0 -8px 30px rgba(0,0,0,.18)}
.sheet.show{display:block;transform:translateY(0)}
.sheet .grab{width:40px;height:4px;border-radius:4px;background:var(--line);margin:10px auto 4px}
.sheet .sh-head{display:flex;align-items:center;padding:6px 18px 12px}
.sheet .sh-head h3{font-size:17px;font-weight:800}
.sheet .sh-head .x{margin-left:auto;background:none;border:none;font-size:23px;color:var(--muted);line-height:1;
  min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.sheet .sh-body{padding:0 18px 24px}
label.fld{display:block;margin-bottom:14px}
label.fld .lab{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px;display:block}
input,select,textarea{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:11px;background:var(--bg);color:var(--ink);font-size:14px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(184,84,46,.14)}
.qty{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line2)}
.qty .m{flex:1;min-width:0}.qty .m b{font-size:13px;display:block}.qty .m span{font-size:11.5px;color:var(--muted)}
.qty .ctl{display:flex;align-items:center;gap:9px}
.qty .ctl button{width:44px;height:44px;border-radius:9px;border:1px solid var(--line);background:var(--bg);font-size:18px;color:var(--brand);font-weight:700}
.qty .ctl b{min-width:22px;text-align:center;font-variant-numeric:tabular-nums}
.order-search-summary{font-size:12px;margin:8px 0 10px}
.order-brand{border:1px solid var(--line);border-radius:12px;margin-bottom:9px;overflow:hidden;background:var(--panel)}
.order-brand-head{width:100%;border:0;background:var(--panel);color:var(--ink);padding:12px;display:flex;align-items:center;justify-content:space-between;text-align:left}
.order-brand-head b{display:block;font-size:14px}.order-brand-head small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.order-brand-head strong{font-size:16px;color:var(--brand)}
.order-brand-variants{padding:0 12px;border-top:1px solid var(--line2)}
.order-product-photo{width:44px;height:44px;object-fit:contain;border-radius:9px;background:var(--bg);flex:none}
.order-variant .m b{font-size:13.5px}.order-variant .m span{display:block;line-height:1.3}

/* TASK-068 size quick-filters for the salesman's order picker. Horizontally
   scrollable rather than wrapped: four chips at 44px never fit one 390px line
   without shrinking below the touch floor. */
.ord-chips{display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 0 10px;scrollbar-width:none}
.ord-chips::-webkit-scrollbar{display:none}
.ord-chips button{flex:none;min-height:44px;padding:8px 13px;border-radius:22px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);font-size:12.5px;font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:6px}
.ord-chips button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.ord-chips button small{font-size:11px;font-weight:600;opacity:.72;font-variant-numeric:tabular-nums}

/* TASK-068 shared customer picker (custscope.js). Lives in app.css, not ui2.css,
   because ONE component mounts in a ui2 screen AND in a sheet that is still v1
   chrome whenever the salesman's v2 flag is off. Every colour reads a --u2-* token
   with a v1 fallback, so it themes under ui2 and stays native in the old sheet. */
.cpk{display:block;margin-bottom:13px}
.cpk-lab{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px}
.cpk-sel{font-size:12.5px;padding:9px 11px;border-radius:10px;margin-bottom:8px;
  background:var(--u2-brand-bg,rgba(184,84,46,.09));color:var(--u2-ink,var(--ink))}
.cpk-sel.none{background:var(--u2-now-bg,var(--line2));color:var(--u2-now-text,var(--muted))}
.cpk-bar{display:flex;gap:7px;align-items:stretch;margin-bottom:8px}
/* 16px is not decorative: anything smaller makes iOS Safari zoom the page on focus,
   which on a 390px screen throws the rest of the form off-screen. */
.cpk-q{flex:1;min-width:0;min-height:44px;font-size:16px;padding:11px 13px;border-radius:11px;
  border:1px solid var(--u2-line,var(--line));background:var(--u2-card,var(--panel));color:var(--u2-ink,var(--ink))}
.cpk-toggle{flex:none;min-width:88px;min-height:44px;padding:8px 12px;border-radius:11px;font-size:12px;font-weight:700;
  border:1px solid var(--u2-line,var(--line));background:var(--u2-card,var(--panel));color:var(--u2-muted,var(--muted))}
.cpk-toggle.on{background:var(--u2-brand,var(--brand));border-color:var(--u2-brand,var(--brand));color:#fff}
.cpk-results{display:block}
.cpk-sect{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--u2-muted,var(--muted));margin:12px 0 5px}
.cpk-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;min-height:52px;padding:9px 11px;
  border:1px solid var(--u2-line,var(--line));border-radius:11px;margin-bottom:6px;
  background:var(--u2-card,var(--panel));color:var(--u2-ink,var(--ink))}
.cpk-row.on{border-color:var(--u2-brand,var(--brand));box-shadow:inset 0 0 0 1px var(--u2-brand,var(--brand))}
.cpk-m{flex:1;min-width:0}
.cpk-m b{display:block;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpk-m span{display:block;font-size:11.5px;color:var(--u2-muted,var(--muted));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpk-end{flex:none;font-size:15px;color:var(--u2-brand,var(--brand));font-weight:700;min-width:16px;text-align:right}
.cpk-tag{margin-left:6px;font-size:10px;font-weight:700;padding:1px 6px;border-radius:9px;vertical-align:middle}
.cpk-tag.hold{background:var(--u2-stop-bg,rgba(226,75,74,.14));color:var(--u2-stop-text,var(--red))}
.cpk-tag.pend{background:var(--u2-now-bg,rgba(245,163,0,.16));color:var(--u2-now-text,var(--amber))}
.cpk-more{width:100%;min-height:44px;margin-top:6px;border-radius:11px;font-size:12.5px;font-weight:700;
  border:1px solid var(--u2-line,var(--line));background:transparent;color:var(--u2-brand,var(--brand))}
.cpk-empty{font-size:12.5px;line-height:1.5;color:var(--u2-muted,var(--muted));padding:14px 12px;
  border:1px dashed var(--u2-line,var(--line));border-radius:11px}
.seg{display:flex;background:var(--line2);border-radius:11px;padding:3px;gap:3px;margin-bottom:13px}
.seg button{flex:1;border:none;background:none;color:var(--muted);font-size:12.5px;font-weight:700;padding:9px;min-height:44px;border-radius:9px}
.seg button.on{background:var(--panel);color:var(--brand);box-shadow:var(--shadow-sm)}

.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:#2a251f;color:#fff;
  padding:12px 20px;border-radius:13px;font-size:13.5px;font-weight:600;z-index:80;opacity:0;transition:.25s;pointer-events:none;max-width:90%;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.toast{bottom:calc(100px + constant(safe-area-inset-bottom))}
.toast{bottom:calc(100px + env(safe-area-inset-bottom, 0px))}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* role picker */
.picker{padding:34px 22px 30px;min-height:100vh}
.pbrand{text-align:center;margin-bottom:26px}
.pbrand img{width:82px;height:82px;border-radius:20px;box-shadow:0 14px 34px rgba(60,45,30,.22)}
.pbrand h1{font-family:var(--serif);font-size:26px;font-weight:700;margin-top:16px;letter-spacing:-.3px}
.pbrand p{color:var(--muted);font-size:11px;margin-top:6px;letter-spacing:.16em;text-transform:uppercase}
.picker .psub{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:800;margin:0 3px 12px}
.picker h1{font-size:23px;font-weight:800;margin-bottom:4px;letter-spacing:-.3px}
.picker>p{color:var(--muted);margin-bottom:24px;font-size:13.5px}
.role{display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:15px;margin-bottom:11px;box-shadow:var(--shadow-sm);transition:transform .08s}
.role:active{transform:scale(.98)}
.role .ri{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0}
.role b{font-size:15px;display:block;font-weight:750}.role span{font-size:12px;color:var(--muted)}
.role .arr{margin-left:auto;color:var(--faint);font-size:18px}

/* ============ MOTION LAYER ============ */
@media (prefers-reduced-motion: no-preference){
  .body>*{animation:sCard .42s cubic-bezier(.22,.85,.28,1) both}
  .body>*:nth-child(1){animation-delay:.02s}.body>*:nth-child(2){animation-delay:.06s}
  .body>*:nth-child(3){animation-delay:.1s}.body>*:nth-child(4){animation-delay:.14s}
  .body>*:nth-child(5){animation-delay:.18s}.body>*:nth-child(6){animation-delay:.22s}
  .body>*:nth-child(n+7){animation-delay:.26s}
  @keyframes sCard{from{opacity:0;transform:translateY(14px) scale(.992)}to{opacity:1;transform:none}}
  .head{animation:sHead .42s ease both}
  @keyframes sHead{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .picker>.pbrand,.picker>.card,.picker>.role,.picker>.psub{animation:sCard .5s cubic-bezier(.22,.85,.28,1) both}
  .picker>*:nth-child(2){animation-delay:.05s}.picker>*:nth-child(3){animation-delay:.1s}
  .picker>*:nth-child(4){animation-delay:.15s}.picker>*:nth-child(5){animation-delay:.2s}
  .bn .i{transition:transform .24s cubic-bezier(.3,1.4,.5,1)}
  .bn.on .i{transform:translateY(-3px) scale(1.15)}
  .kpi.pulse{animation:kpop .5s cubic-bezier(.2,1.3,.4,1)}
  @keyframes kpop{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
}
.card,.kpi,.li,.role,.tag{transition:transform .12s ease, box-shadow .2s ease}
.li:active,.kpi:active{transform:scale(.985)}
.btn:active{transform:scale(.96)}

/* Muhammed — AI colleague chat tab */
.m-head{display:flex;align-items:center;gap:10px;margin:2px 2px 14px}
.m-head .av{width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;flex:none}
.m-head b{font-size:15px;font-weight:750}
.m-head span{font-size:11.5px;color:var(--muted);display:block}
.m-msgs{display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
.m-msg{max-width:86%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.46;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.m-msg.user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.m-msg.bot{align-self:flex-start;background:var(--panel);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px}
.m-dots{align-self:flex-start;color:var(--muted);font-size:13px;padding:2px 4px}
.m-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.m-chips button{font-size:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:20px;padding:7px 12px;min-height:44px;font-weight:600}
.m-chips button:active{transform:scale(.96)}
.m-in{display:flex;gap:8px;align-items:center}
.m-in input{flex:1}
.m-in button{width:46px;min-width:46px;height:46px;border-radius:50%;border:none;background:var(--accent);color:#fff;font-size:18px;padding:0}
.m-spacer{height:84px}

/* ---- Attention badges (additive): small count chip on a bottom-nav tab. ---- */
.bn{position:relative}
.bn-badge{position:absolute;top:-3px;left:50%;margin-left:7px;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:var(--accent);color:#fff;font-size:9.5px;font-weight:800;line-height:16px;
  text-align:center;box-shadow:0 0 0 2px var(--panel);pointer-events:none}

/* ---- Offline outbox (additive): floating "waiting to upload" chip, visible on every tab. ---- */
#outbox-chip{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom));z-index:14;
  background:var(--amber-bg);color:var(--amber);border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  font-size:12px;font-weight:700;box-shadow:0 4px 14px rgba(16,50,38,.14);cursor:pointer;white-space:nowrap}
#outbox-chip .fail{color:var(--red)}

/* ---- Sync status chip (TASK-070) -------------------------------------------
   sync.js used to write this element's whole appearance as an inline cssText with
   a hardcoded `top:6px;right:8px`. On an iPhone that is INSIDE the status bar, and
   the chip landed on top of the header's gear/switch buttons (owner evidence,
   22 Aug: "synced" printed across the two controls). Presentation belongs here, so
   the offset can respect the inset; sync.js now only toggles .up / .down.
   The header reserves 26px above its content for exactly this strip. */
#sync-dot{position:fixed;top:calc(4px + constant(safe-area-inset-top));right:8px;z-index:90;
  font-size:10px;font-weight:700;line-height:1.4;padding:2px 8px;border-radius:20px;pointer-events:none}
#sync-dot{top:calc(4px + env(safe-area-inset-top, 0px))}
/* Colours are the design system's own tag pair, taken as literals because #sync-dot
   lives on <body>, outside the .ui2 scope the --u2-* tokens are declared in:
     --u2-go-bg   #E3F3EC + --u2-go-text   #0C6B4C  -> 5.68:1  (AA)
     --u2-stop-bg #FBE9E6 + --u2-stop-text #B93A2E  -> 4.83:1  (AA)
   ui2.tokens.css:38-39 minted exactly this pair for 10px tag text. The values sync.js
   used inline measured 2.63:1 and 2.98:1 against their own tints — a status chip a
   salesman is meant to read at a glance on a phone in sunlight. The colours had to
   move out of JS anyway for the position to see env(safe-area-inset-top), so they
   move to the documented pair rather than to new invented values. */
#sync-dot.up{background:#E3F3EC;color:#0C6B4C}
#sync-dot.down{background:#FBE9E6;color:#B93A2E}

/* TASK-072: after a deliberate customer pick, keep the chosen account visible
   and move the long directory out of the way. "Change" reopens it. */
.cpk.cpk-picked .cpk-bar,.cpk.cpk-picked .cpk-results{display:none}
.cpk-sel{display:flex;align-items:center;justify-content:space-between;gap:10px}
.field-source{border-left:4px solid var(--accent)}