/* Full-screen picker sheet and star rows, shared by the admin (admin.css) and the driver-facing pages (front.css). Load this before either so its per-app overrides still win on ties. */
.pickwrap{position:relative}
.sheet{position:fixed;inset:0;z-index:150;background:var(--bg);display:flex;flex-direction:column}
.sheet[hidden]{display:none}
/* picker sheet: title on top, a grid of small boxes stacked from the bottom, and the hint, Save, close + search at the bottom where the thumb is
   (and where the keyboard lifts them: picker.js sizes the sheet to the visual viewport) */
.ps-top{padding:calc(12px + env(safe-area-inset-top)) 16px 12px;background:var(--heading);color:#fff}
/* a desktop: the picker is a panel under its field (picker.js places it), search on top, boxes from the top */
.sheet.desk{inset:auto;width:480px;max-height:560px;border:1px solid var(--border-strong,var(--border));border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.22);overflow:hidden}
.sheet.desk .ps-top{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.sheet.desk .ps-title{font-size:.9rem}
.sheet.desk .ps-top .ps-bar input{padding:8px 12px;border-radius:8px}
.sheet.desk .ps-top .sheet-x{width:38px;height:38px;font-size:1.3rem}
.sheet.desk .sheet-body{flex:1 1 auto;min-height:0;padding:10px 12px}
.sheet.desk .ps-grid{margin-top:0;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.sheet.desk .pbox{min-height:44px;font-size:.88rem}
.sheet.desk .ps-foot{padding:6px 12px 10px}
.sheet.desk .ps-foot:not(:has(:not([hidden]))){display:none}
.sheet.desk .ps-done{margin:0}
.ps-title{margin:0;font-size:1.05rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-hint{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:0 2px 6px;font-size:.76rem;color:var(--muted);min-height:24px}
.ps-all{background:0;border:0;padding:4px 2px;margin:0;width:auto;font:inherit;font-size:.82rem;font-weight:700;color:var(--accent);cursor:pointer}
.sheet-body{flex:1;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px 12px 10px}
.ps-grid{margin-top:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.ps-sec{grid-column:1/-1;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:4px 2px -2px}
.ps-sec .ps-tip{margin-left:8px;font-size:.74rem;font-weight:500;text-transform:none;letter-spacing:0}
.ps-sec .ps-tip.on{color:var(--accent);font-weight:700}
.ps-hint[hidden]{display:none}
.ps-sec.sep{margin-top:6px;padding-top:10px;border-top:1px solid var(--border-strong,var(--border))}
.pbox{display:flex;align-items:center;justify-content:center;min-height:52px;width:100%;margin:0;padding:8px 10px;text-align:center;background:#fff;border:1px solid var(--border-strong,var(--border));border-radius:10px;font:inherit;font-size:.95rem;font-weight:600;line-height:1.2;color:var(--heading);cursor:pointer;overflow-wrap:break-word;hyphens:auto;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.pbox:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media(hover:hover){.pbox:hover{border-color:var(--accent)}}
.pbox.pin{border-color:var(--accent);border-width:1.5px}
.pbox.on{background:#a6d4b6;border-color:#5ea57a;color:#0e3a22}
.pbox.new{grid-column:1/-1;border-style:dashed;border-color:var(--accent);color:var(--accent);font-weight:700;min-height:46px}
.pbox.new small{font-weight:500;margin-left:6px;opacity:.8}
.pbox.held{transform:scale(.96);transition:transform .15s}
/* the apps' button:hover fill outranks a bare class: pin each picker button's own colors (a phone keeps "hover" after a tap) */
.pbox:hover,.pbox:focus{background:#fff;color:var(--heading)}
.pbox.on:hover,.pbox.on:focus{background:#a6d4b6;color:#0e3a22}
.pbox.new:hover,.pbox.new:focus{background:#fff;color:var(--accent)}
.pbox.long{font-size:.8rem}
.ps-all:hover{background:0;color:var(--accent);text-decoration:underline}
.ps-done:hover{background:var(--accent);color:#fff}
.sheet-x:hover{background:#fff;color:var(--heading)}
.ps-foot{padding:6px 12px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--border)}
.ps-done{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;margin:0 0 8px;padding:9px 14px;border:0;border-radius:12px;background:var(--accent);color:#fff;font:inherit;cursor:pointer}
.ps-done b{font-size:1.05rem;letter-spacing:.08em}
.ps-done small{font-size:.76rem;opacity:.9;margin-top:2px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-bar{display:flex;align-items:center;gap:8px}
.ps-bar input{flex:1 1 auto;min-width:0;margin:0;font-size:16px;border-radius:10px;padding:11px 14px}
.sheet-x{width:44px;height:44px;flex:0 0 auto;padding:0;margin:0;border:1px solid var(--border-strong,var(--border));border-radius:10px;background:#fff;color:var(--heading);font-size:1.5rem;line-height:1;cursor:pointer}
.sheet-empty{text-align:center;color:var(--muted);font-size:.88rem;padding:28px 12px}

/* show/hide toggle that pwa.js adds to every password field */
.pwwrap{position:relative;display:block}
.pwwrap input{padding-right:50px!important;width:100%;box-sizing:border-box}
.pweye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:8px;background:transparent;color:var(--muted,#6b6b7b);padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pweye:hover,.pweye:focus-visible{color:var(--accent,#1a1a2e);background:var(--accent-soft,rgba(0,0,0,.06));outline:none}
.pweye svg{width:22px;height:22px;display:block}
.pweye .off,.pweye.on .eye{display:none}
.pweye.on .off{display:block}

/* ---- the photo viewer (#lb, admin/viewer.js): the office's uploads and the drivers' tickets alike ---- */
#lb .modes{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:6px;
  background:rgba(0,0,0,.42);padding:5px;border-radius:22px;backdrop-filter:blur(3px);width:max-content;max-width:calc(100vw - 76px);flex-wrap:wrap;justify-content:center}
/* left:50% alone lets the row be only half the screen wide: on a phone the four chips stacked three rows deep over
   the ticket (2026-09-30). max-content keeps them on one row; a phone starts them at the left, clear of the x */
#lb .modes .sm{display:none}
@media(max-width:560px){#lb .modes{left:10px;transform:none;justify-content:flex-start}#lb .modes button{padding:7px 11px}#lb .modes .lg{display:none}#lb .modes .sm{display:inline}}
#lb .modes button{background:0;border:0;color:#d8d8e2;font:inherit;font-size:.76rem;font-weight:700;
  padding:7px 13px;border-radius:18px;cursor:pointer;white-space:nowrap}
#lb .modes button:hover{color:#fff;background:rgba(255,255,255,.16)}
#lb .modes button.on{background:#fff;color:#14142a}
#lb{position:fixed;inset:0;background:rgba(10,10,20,.94);display:none;z-index:100;align-items:center;justify-content:center}
#lb.on{display:flex}
#lb img{max-width:96vw;max-height:82vh;object-fit:contain;border-radius:6px;touch-action:none;user-select:none;-webkit-user-drag:none;transform-origin:center center;cursor:zoom-in}
#lb.zoomed img{cursor:grab;will-change:transform}
#lb .load{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#d6d6e0;font-size:.9rem;text-align:center;width:min(80vw,320px)}
#lb .load[hidden]{display:none}
#lb .load button{display:block;margin:12px auto 0;background:#fff;color:#14142a;border:0;border-radius:999px;padding:9px 18px;font:inherit;font-weight:700;cursor:pointer}
#lb.zoomed .modes,#lb.zoomed .cap{opacity:.25;pointer-events:none}
#lb .x{position:absolute;top:12px;right:16px;color:#fff;font-size:2rem;line-height:1;cursor:pointer;background:0;border:0;padding:8px}
#lb .nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:2.4rem;background:0;border:0;cursor:pointer;padding:18px 14px;opacity:.75}
#lb .nav:hover{opacity:1}
#lb .prev{left:2px}#lb .next{right:2px}
#lb .cap{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#d6d6e0;font-size:.8rem;padding:0 16px}
#lb .det{position:absolute;bottom:44px;left:50%;transform:translateX(-50%);z-index:2;color:#fff;font-size:.8rem;font-weight:600;background:rgba(0,0,0,.45);padding:5px 12px;border-radius:20px;white-space:nowrap;max-width:94vw;overflow:hidden;text-overflow:ellipsis}
#lb .det:empty{display:none}
#lb.zoomed .det{opacity:.25}

/* ---- the account menu in every header: name + chevron, then Change password / Install / Sign out ---- */
.usermenu{position:relative;flex:0 0 auto}
.usermenu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 10px;border-radius:10px;color:#fff;font-size:.82rem;font-weight:600;max-width:150px}
.usermenu>summary::-webkit-details-marker{display:none}
.usermenu>summary:hover{background:rgba(255,255,255,.14)}
.usermenu>summary .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usermenu>summary .ini{display:none;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-weight:700;font-size:.9rem;line-height:30px;text-align:center;flex:0 0 auto}
@media (max-width:520px){.usermenu>summary .nm{display:none}.usermenu>summary .ini{display:block}.usermenu>summary{padding:0 6px}}
.usermenu>summary .chev{width:8px;height:8px;border-right:2px solid #c9c9d6;border-bottom:2px solid #c9c9d6;transform:rotate(45deg) translate(-2px,-2px);flex:0 0 auto}
.usermenu .umenu{position:absolute;right:0;top:calc(100% + 6px);min-width:200px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.18);overflow:hidden;z-index:30}
.usermenu .umenu a,.usermenu .umenu button{display:block;width:100%;text-align:left;padding:13px 16px;font-size:.9rem;font-weight:600;color:var(--heading);background:#fff;border:0;border-top:1px solid var(--border);border-radius:0}
.usermenu .umenu a:first-child{border-top:0}
.usermenu .umenu a:hover,.usermenu .umenu button:hover{background:var(--accent-soft);color:var(--heading);text-decoration:none}
.usermenu .umenu small{display:block;color:var(--muted);font-weight:400;font-size:.74rem;margin-top:2px}
.usermenu>summary .chev{transition:transform .15s}
.usermenu[open]>summary .chev{transform:rotate(-135deg) translate(-2px,-2px)}
.usermenu .umenu a{text-decoration:none}   /* the driver pages underline links; not in a menu */
.usermenu>summary{-webkit-tap-highlight-color:transparent}

/* ---- shared components: one look for the same thing in the office, the driver app, the sub-leaser pages and the customer portal ---- */
/* segmented switch: .seg wraps radio labels (a form choice), .views wraps links (page views); .wide fills the row with big touch targets */
.seg,.views{display:inline-flex;border:1px solid var(--border-strong,var(--border));border-radius:8px;overflow:hidden;background:#fff;font-size:.8rem}
.seg label,.views a{margin:0;text-transform:none;letter-spacing:0;padding:9px 14px;cursor:pointer;color:var(--muted);font-weight:700;white-space:nowrap;display:block;text-decoration:none;font-size:inherit;line-height:1.3}
.seg label+label,.views a+a{border-left:1px solid var(--border)}
.seg input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.seg label:hover,.views a:hover{background:var(--accent-soft);color:var(--heading);text-decoration:none}
.seg label:has(input:checked),.views a.on{background:var(--accent);color:#fff}
.seg.wide,.views.wide{display:flex;margin-bottom:16px}
.seg.wide label,.views.wide a{flex:1;text-align:center;padding:14px 8px;font-size:.95rem}
/* .quad: four big choices two by two (the driver's "What are you doing today?"), never squeezed into one phone row */
.seg.quad{display:grid;grid-template-columns:1fr 1fr}
.seg.quad label:nth-child(odd){border-left:0}
.seg.quad label:nth-child(n+3){border-top:1px solid var(--border)}
/* one search bar: the text box filters the list; a picker, button or count can sit beside it */
.searchbar{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.searchbar input,.searchbar select{margin:0;min-width:0}
.searchbar input{flex:1 1 auto;padding:12px 14px;font-size:1rem;border-radius:10px}
.searchbar select{flex:1 1 auto;width:auto;padding:11px 14px;border-radius:10px}
.searchbar button,.searchbar .btn{width:auto;flex:0 0 auto;padding:12px 18px;border-radius:10px}
.searchbar .n{font-size:.78rem;color:var(--muted);white-space:nowrap}
/* back link at the top of a detail page: one glyph, one weight, everywhere */
.back{display:inline-block;margin:0 0 10px;font-size:.86rem;font-weight:700;color:var(--accent);text-decoration:none}
.back::before{content:"\2039\00a0"}
.back:hover{text-decoration:underline}
p .back,.hdrrow .back{margin:0}
/* Back (an X for a screen opened over a list) at the left of every area's top bar, bs_back_link + shared.js:
   finger-sized, in the bar's own color */
.hback{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;border-radius:10px;color:inherit;text-decoration:none;font:400 2.1rem/1 system-ui,-apple-system,sans-serif}
.hback:hover,.hback:focus-visible{background:rgba(255,255,255,.14);color:inherit;text-decoration:none}
.hback:active{background:rgba(255,255,255,.26)}
.hback.x{background:rgba(255,255,255,.16);font-size:1.9rem}
/* the arrow drawn as big as the menu's three lines beside it (owner, 2026-10-13: "the arrow is kind of small") */
.hback svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* right beside the menu button; on a phone it and the bar's icons give up a little width so the page's name still reads */
.topbar .hback{width:40px;height:50px;margin:0 -2px 0 -12px;position:relative}   /* close to the menu's lines (owner, 2026-10-13: "make the gap smaller"); it sits over the menu button's empty right edge and on top of it, so a tap at Back's edge is Back, never the menu (2026-10-12) */
@media (max-width:420px){.topbar:has(.hback) .ico:not(#drawerBtn){width:42px}}
.phead .hback{margin:-8px 0 -8px -8px;color:inherit;font-size:2.1rem}   /* over portal.css's small grey header links */
.phead:has(.hback){justify-content:flex-start}
.phead:has(.hback) .usermenu{margin-left:auto}
.fhead .hback{margin:-6px 0 -6px -8px}
.fhead .hback.x{margin-right:4px}
.fhead:has(.hback){justify-content:flex-start}
.fhead:has(.hback) .fh-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* one message box: ok = done, bad = problem, warn = heads-up */
.flash{padding:11px 14px;border-radius:10px;margin-bottom:14px;font-size:.88rem}
.flash.ok{background:var(--accent-soft);color:var(--accent-hover);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.flash.bad{background:rgba(161,27,27,.08);color:var(--danger);border:1px solid rgba(161,27,27,.25)}
.flash.warn{background:rgba(138,90,0,.1);color:var(--warn,#8a5a00);border:1px solid rgba(138,90,0,.3)}
.flash ul{margin:6px 0 0;padding-left:18px}
/* an empty list */
.empty{text-align:center;padding:40px 16px;color:var(--muted);font-size:.88rem}
/* small repeats that were inline styles: a note under a field, a lede with room under it, the muted half of a title,
   a number column's heading */
.lede.under{margin:6px 0 0}
.lede.tight{margin:0 0 10px}
.mute{font-weight:500;color:var(--muted)}
table th.num{text-align:right}
.empty.sm{text-align:left;padding:6px 0;margin:0}   /* a part of a card with nothing in it, under its own heading */
/* status chips */
/* text that warns (a stock under zero, a fill over the miles, a link refusing): one red, never typed on the tag */
.txt-bad,.lede.txt-bad{color:var(--danger)}
.txt-warn{color:var(--warn,#8a5a00);font-weight:700}
/* the line under a popup's buttons that says what is happening (bsSay): muted, red when it went wrong */
.pop-msg{display:block;font-size:.78rem;color:var(--muted);margin-top:8px;min-height:1em}
.pop-msg.txt-bad{color:var(--danger)}
.txt-bad.strong{font-weight:700}
.chip{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.02em;padding:3px 8px;border-radius:20px;white-space:nowrap}
.chip+.chip{margin-left:4px}
/* a chip's class says what it means: ok (done, all good), warn (waiting on someone), bad (refused, overdue, failed),
   info (new, for information), muted (closed, canceled). A ticket's and a service's own states keep their names. */
.chip.info,.chip.new,.chip.invoiced{background:rgba(42,120,214,.12);color:#1c5cab}
.chip.warn,.chip.reviewed,.chip.soon{background:rgba(237,161,0,.16);color:#7a5200}
.chip.ok,.chip.sent,.chip.emailed,.chip.fine,.chip.fixed{background:var(--accent-soft);color:var(--accent-hover)}
.chip.muted,.chip.archived,.chip.finalized{background:rgba(0,0,0,.07);color:var(--muted)}
.chip.bad,.chip.overdue,.chip.edited,.chip.due{background:rgba(161,27,27,.12);color:var(--danger)}
/* list rows: .r = one row (bubble), .t = text column, .m = right-hand figure/chip, .act = buttons/menu; the card around a list steps out of the way */
.rows{display:flex;flex-direction:column;gap:8px}
.rows .r{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;background:var(--card);border:1px solid var(--border-strong,var(--border));border-radius:10px;box-shadow:var(--shadow,0 2px 12px rgba(0,0,0,.05));color:inherit;text-decoration:none}
.rows .r[hidden]{display:none}
.rows .r .t{min-width:0;flex:1}
.rows .r .t b{display:block;font-size:.98rem;color:var(--heading)}
.rows .r .t small{display:block;color:var(--muted);font-size:.78rem;margin-top:2px;line-height:1.4}
.rows .r .m{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--heading)}
.rows .r .m small{display:block;color:var(--muted);font-size:.74rem;font-weight:400}
.rows .r .act{flex:0 0 auto}
.rows .r .t{min-width:0}.rows .r .t>small{overflow-wrap:anywhere}   /* a long address never runs under the row's button (Linked apps, 2026-10-10) */
a.rows .r:hover,.rows a.r:hover{border-color:var(--accent)}
.card:has(> .rows):not(.solid),.card:has(> .empty):not(.solid){background:transparent;border:0;padding:0;box-shadow:none}
.card:has(> .rows):not(.solid) > h3,.card:has(> .rows):not(.solid) > h2{margin:0 2px 8px}
.card:has(> .rows):not(.solid) > .empty,.card:has(> .empty):not(.solid) > .empty{background:var(--card);border:1px solid var(--border-strong,var(--border));border-radius:10px;padding:14px}
/* plain tables (stack into label/value cards on a phone) and the Newer/Older pager under a list */
.tbl{width:100%;border-collapse:collapse;font-size:.85rem}
.tbl th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:0 10px 8px;border-bottom:1px solid var(--border)}
.tbl td{padding:11px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:599px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{border:1px solid var(--border);border-radius:10px;margin-bottom:9px;padding:4px 2px;background:#fff}
  .tbl td{border:0;padding:6px 12px;display:flex;justify-content:space-between;gap:14px;text-align:right}
  .tbl td::before{content:attr(data-l);font-size:.7rem;font-weight:700;text-transform:uppercase;color:var(--muted);text-align:left}
  .tbl td.dash{display:none}   /* a cell with nothing in it (a dash) is left out of the card */
  /* .line: a two- or three-column table stays one line a row on a phone (a name and its number), no labels */
  .tbl.line tr{display:flex;align-items:center;gap:10px;padding:8px 12px}
  .tbl.line td{display:block;width:auto;padding:0;flex:1 1 auto;min-width:0;text-align:left}
  .tbl.line td.num{flex:0 0 auto;text-align:right}
  .tbl.line td::before{content:none}
  /* a row that holds a field: the name keeps its width, the field takes the rest and shrinks to fit */
  .tbl.line tr:has(select,input) td:first-child{flex:0 0 auto}
  .tbl.line td select,.tbl.line td input{width:100%;min-width:0}
}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:.85rem}
.pager a{color:var(--accent);text-decoration:none;font-weight:700}
/* the confirm box (bsConfirm in shared.js): one look instead of the browser's */
.bsdlg{border:0;border-radius:14px;padding:0;width:calc(100% - 32px);max-width:420px;box-shadow:0 12px 40px rgba(0,0,0,.28);color:var(--text);background:#fff}
.bsdlg::backdrop{background:rgba(10,10,20,.5)}
.bsdlg form{margin:0;padding:20px}
.bsdlg .msg p{margin:0 0 8px;font-size:.95rem;line-height:1.5}
.bsdlg .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.bsdlg .acts button{width:auto;flex:0 0 auto;margin:0;padding:11px 18px;font:inherit;font-size:.9rem;font-weight:700;border-radius:8px;border:0;cursor:pointer}
.bsdlg .acts .no{background:#fff;color:var(--heading);border:1px solid var(--border-strong,var(--border))}
.bsdlg .acts .no:hover{background:var(--accent-soft);color:var(--heading)}
.bsdlg .acts .yes{background:var(--accent);color:#fff}
.bsdlg .acts .yes.danger{background:var(--danger)}
/* secondary buttons: ghost = outlined, sm = compact, danger = outlined red (list rows use ghost sm) */
.btn.ghost,button.ghost{background:#fff;color:var(--heading);border:1px solid var(--border-strong,var(--border))}
.btn.ghost:hover,button.ghost:hover{background:var(--accent-soft);color:var(--heading)}
.btn.sm,button.sm{padding:7px 12px;font-size:.78rem;width:auto;border-radius:8px}
.btn.danger{background:transparent;color:var(--danger);border:1px solid rgba(161,27,27,.35)}
.btn.danger:hover{background:rgba(161,27,27,.08);color:var(--danger)}
/* .fill: a solid red Delete beside a green button (owner, 2026-10-19: "where ever there's a green button that says review,
   approve or invoice have a red button that says delete") */
.btn.danger.fill{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn.danger.fill:hover{background:#8a1616;border-color:#8a1616;color:#fff}
.btn.danger.fill:disabled{opacity:.5}
/* inside a row's text column: chips sit on the title line, a bold figure inside a detail line stays inline,
   and .subrow spreads its spans out with dots between them */
.rows .r .t .chip{vertical-align:middle}
.rows .r .t small b{display:inline;font-size:inherit;color:var(--heading);font-weight:600}
.rows .r .t small a{color:var(--accent);font-weight:600;text-decoration:none}
.rows .r .t small.subrow{display:flex;flex-wrap:wrap;gap:2px 0}
.subrow>span{white-space:nowrap}
.subrow>span+span::before{content:"\2013";margin:0 7px;color:var(--muted)}
.rows .r .act{display:flex;gap:6px;align-items:center}
.rows .r .m .chip{margin:0}
/* a figure on a row's title line ("Total: $1,349.46"): the label in the muted ink, the amount bold */
.rows .r .t b:has(.tot){display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.rows .r .t b .tot{margin-left:auto;white-space:nowrap}
.rows .r .t b .tot .lbl{font-weight:500;color:var(--muted)}
/* a row whose details stack under its title line (a fill, an inspection, a time card, a day off): .top is the title
   with its figure (.fig) or chip on the right; small lines are muted (.txt: body text), then notes, photos, a .foot
   row of thumbnails and a button. .dim fades a row that is over. A .top also works inside a plain row's .t. */
.rows .r.stack{flex-direction:column;align-items:stretch;gap:2px}
.rows .r .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.rows .r .top>b{flex:1 1 auto;font-size:.98rem;color:var(--heading);min-width:0;overflow-wrap:anywhere}
.rows .r .top>.fig{flex:0 0 auto;margin-left:auto;font-weight:700;white-space:nowrap;color:var(--heading)}
.rows .r .top>.chip{flex:0 0 auto;margin:0 0 0 auto}
.rows .r .top>small{display:block;color:var(--muted);font-size:.8rem;line-height:1.4;min-width:0}
.rows .r .top>small:last-child:not(:first-child){flex:0 0 auto;margin-left:auto;color:var(--text);white-space:nowrap}
.rows .r.stack>small,.rows .r.stack>.t>small{display:block;color:var(--muted);font-size:.8rem;line-height:1.4;overflow-wrap:anywhere}
.rows .r.stack small.txt,.rows .r .t small.txt{color:var(--text)}
.rows .r.stack>.foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:6px}
.rows .r.stack>.foot .iss-ph{margin:0}
.rows .r.stack>.foot .btn{flex:0 0 auto;margin-left:auto}
.rows .r.stack>form,.rows .r.stack>.btn{align-self:flex-start;margin-top:6px}
.rows .r.dim{opacity:.7}
/* two chips on a row's right (Confirmed + Updated) stack */
.rows .r .m:has(.chip+.chip){display:flex;flex-direction:column;align-items:flex-end;gap:4px}
/* a row's leading square: a document's type (PDF, SIGN), a tick */
.rows .r>.ic{flex:0 0 44px;height:44px;border-radius:10px;background:var(--accent-soft);color:var(--accent-hover);display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:800;letter-spacing:.02em}
/* a heading with something on its right (a link, a total): every area */
.hdrrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.hdrrow>:is(h2,h3){margin:0}
.hdrrow .lede{min-width:0;flex:1}
@media(max-width:560px){.hdrrow:has(>.lede){flex-wrap:wrap}.hdrrow>.lede{flex:1 1 100%}}
.card:has(> .rows):not(.solid) > .hdrrow{margin:0 2px 8px}
/* a photo tile whose cleaned picture is still being made (shared.js bsScanWait): a badge over its corner */
.scan-wait{position:relative}
.scan-wait::after{content:"Cleaning\2026";position:absolute;left:6px;bottom:6px;z-index:1;padding:3px 8px;border-radius:20px;background:rgba(0,0,0,.66);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.02em;pointer-events:none;animation:bsPulse 1.6s ease-in-out infinite}
@keyframes bsPulse{50%{opacity:.55}}
/* a section whose heading folds it (Dashboard's Needs attention): the heading, a muted hint, a chevron; with
   data-remember="<key>" the browser keeps it open or folded (shared.js) */
details.fold{margin:0 0 14px}
details.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:.95rem;font-weight:700;color:var(--heading);user-select:none;-webkit-tap-highlight-color:transparent}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary .hint{font-size:.78rem;font-weight:500;color:var(--muted)}
details.fold>summary .chev{width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s;flex:0 0 auto}
details.fold:not([open])>summary .chev{transform:rotate(-45deg)}
.hdrrow>a.more{font-size:.85rem;font-weight:700;text-decoration:none}   /* "All my hours ›" */
.rows a.r:active{background:var(--accent-soft)}                       /* a tapped row answers on a phone */
/* a row of views or choices that may be wider than a phone: scrolls sideways, spreads out when there is room */
.views.scroll,.seg.scroll{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.views.scroll::-webkit-scrollbar,.seg.scroll::-webkit-scrollbar{display:none}
.views.scroll a,.seg.scroll label{flex:1 0 auto;text-align:center}
/* a phone: a segmented bar wider than its card scrolls sideways instead of being cut off at the card's edge (2026-10-10
   sweep: "Custom", "Not invoiced", "Partly paid" lost their ends on eight pages) */
@media(max-width:560px){.seg,.views{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.seg::-webkit-scrollbar,.views::-webkit-scrollbar{display:none}.seg>*,.views>*{flex:0 0 auto;white-space:nowrap}}
/* form rows, the same in every area: .row stacks its fields, .row.pair puts two side by side (each may shrink) */
.row{display:grid;gap:12px}
.row.pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.row>*{min-width:0}
/* ---- the filter card: a segment row with a more-filters button, and the panel it opens ---- */
.card.filtercard{padding:12px;margin-bottom:12px}
.fsearch{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:0 12px;border:1px solid var(--border-strong,var(--border));border-radius:10px;background:var(--bg,#fff);cursor:text}
.fsearch svg{width:20px;height:20px;flex:none;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round}
.fsearch input{flex:1;min-width:0;min-height:44px;margin:0;border:0;padding:0;background:transparent;box-shadow:none;outline:none}
.fsearch:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(42,120,214,.15)}
.ftop{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.ftop .seg{flex:1 1 auto;min-width:0;display:flex}
.ftop .seg label{flex:1;text-align:center;padding:8px 6px}
/* on a phone the choices scroll sideways inside the card (never the whole page) so the more-filters button
   keeps its place on the same line whatever the screen width */
@media(max-width:560px){
  .ftop .seg{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ftop .seg::-webkit-scrollbar{display:none}
  .ftop .seg label{flex:1 0 auto;padding:7px 7px;font-size:.72rem}
  /* a row that also holds a dropdown (Users' roles) gives the switch the whole width and the dropdown the next line:
     side by side the switch was cut off mid-word (2026-10-09) */
  .ftop:has(> .field select){flex-wrap:wrap}
  .ftop:has(> .field select) > .seg{flex:1 1 100%}
  .ftop:has(> .field select) > .field{flex:1 1 100%;max-width:none !important}
}
.fbtn{width:auto;margin:0 0 0 auto;background:#fff;color:var(--heading);border:1px solid var(--border-strong,var(--border));padding:9px 11px;font-size:.82rem;border-radius:8px;display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;cursor:pointer}
.fbtn:hover{background:var(--accent-soft);color:var(--heading)}
.fbtn .chev{transition:transform .18s;font-size:.7rem;line-height:1}
.fbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.fbtn .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.fbody{margin-top:14px;border-top:1px solid var(--border);padding-top:14px}
.fbody[hidden]{display:none}
.fbody .field{margin-bottom:12px}
.fbody .acts{display:flex;gap:8px}
.fbody .acts button,.fbody .acts .btn{width:auto}
/* the one date range picker (admin/_range.php): its panel's ranges as chips that fill Start and End */
.rmore{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.rmore label{position:relative;margin:0;text-transform:none;letter-spacing:0;font-weight:600;font-size:.8rem;padding:7px 12px;border:1px solid var(--border-strong,var(--border));border-radius:999px;background:#fff;color:var(--heading);cursor:pointer;white-space:nowrap}
.rmore input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.rmore [hidden]{display:none}   /* the ranges behind "…" (admin/_range.php bs_range_order) */
.rmore .rchip.rdots{letter-spacing:.08em;padding-left:14px;padding-right:14px}
.rmore label:hover{background:var(--accent-soft)}
.rmore label:has(input:checked){background:var(--accent);border-color:var(--accent);color:#fff}
.rmore label:has(input:focus-visible),.rquick label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.rmore .rchip{margin:0;font:inherit;font-weight:600;font-size:.8rem;padding:7px 12px;border:1px solid var(--border-strong,var(--border));border-radius:999px;background:#fff;color:var(--heading);min-height:0;width:auto;line-height:1.3;cursor:pointer;box-shadow:none}
.rmore .rchip:hover{background:var(--accent-soft)}
.rmore .rchip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.rinner{margin-top:10px}
.rbody .rinner-in{margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.rbody .rinner-in .apv-filt select{min-width:0;width:100%}
.rbody .rinner-in .apv-filt .field{flex:1 1 180px}
.rangebar .rquick{flex:1 1 auto}
.rquick .rtoggle{flex:1;margin:0;border:0;border-left:1px solid var(--border);border-radius:0;background:#fff;color:var(--muted);font:inherit;font-weight:700;
  padding:8px 6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;width:auto;min-height:0;box-shadow:none;line-height:1.3}
.rquick .rtoggle:hover{background:var(--accent-soft);color:var(--heading)}
.rquick .rtoggle.on{background:var(--accent);color:#fff}
.rquick .rtoggle .chev{font-size:.62rem;transition:transform .18s}
.rquick .rtoggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
/* a phone: the four share the line whole (none scrolled away); a long name takes two lines */
@media(max-width:560px){
  .rangebar.card.filtercard{padding:10px}
  .rangebar .ftop .rquick{overflow:visible}
  .rangebar .ftop .rquick label,.rangebar .rquick .rtoggle{flex:1 1 auto;min-width:0;padding:8px 2px;font-size:.68rem;letter-spacing:-.01em;white-space:normal;text-align:center;line-height:1.2}
  .rangebar .ftop .rquick label{display:flex;align-items:center;justify-content:center}
}
/* a dispatch order changed after it went out (admin/_dispatch.php bs_dispatch_changes): what changed, above the order */
/* an order's facts, one compact card (bs_dispatch_facts): wrapping pairs, then a labeled line each */
.dsp-facts{background:var(--card,#fff);border:1px solid var(--border-strong,var(--border));border-radius:12px;padding:10px 14px;margin:0 0 12px}
.dsp-facts small{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.dsp-kv{display:flex;flex-wrap:wrap;gap:4px 18px;padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.dsp-kv:last-child{border:0;margin:0;padding:0}
.dsp-kv b{color:var(--heading);overflow-wrap:anywhere}
.dsp-facts h3{font-size:.8rem;color:var(--heading);margin:8px 0 2px}
.dsp-row{display:grid;grid-template-columns:4.4rem minmax(0,1fr);gap:8px;align-items:baseline;padding:3px 0}
.dsp-row>span{color:var(--heading);font-weight:600;overflow-wrap:anywhere}
.dsp-facts a{color:var(--accent);text-decoration:none}
.dsp-facts .dot{color:var(--muted);font-weight:400}
.dsp-row .n{font-weight:500;color:var(--text)}
.dsp-map{font-size:.78rem;font-weight:600;margin-left:4px}
.dsp-edited{background:#fff6dd;border:1px solid #e9c46a;border-left:4px solid #d99a00;border-radius:10px;padding:10px 12px;margin:0 0 12px;font-size:.9rem;color:#4a3b00}
.dsp-edited p{margin:0}.dsp-edited p+p{margin-top:6px}
.dsp-edited .dim{color:#7a6a3a;font-size:.82rem}
/* ---- one ticket, one page: the drivers', sub-leasers' and customers' ticket view ---- */
.tkt-hero{background:var(--heading);color:#fff;border-radius:14px;padding:18px 18px 16px;margin-bottom:12px;box-shadow:var(--shadow,0 2px 12px rgba(0,0,0,.08))}
.tkt-hero .top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tkt-hero .no{font-size:1.7rem;font-weight:800;letter-spacing:-.01em;min-width:0;overflow-wrap:anywhere}   /* a long ticket number breaks, not the page width */
.tkt-hero .chips{display:flex;gap:6px;flex-wrap:wrap}
.tkt-hero .chip{background:rgba(255,255,255,.18);color:#fff}
.tkt-hero .chip.edited{background:rgba(255,140,140,.3);color:#ffd6d6}
.tkt-hero .cust{margin-top:10px;font-size:1.05rem;font-weight:700}
.tkt-hero .when{margin-top:2px;font-size:.86rem;color:rgba(255,255,255,.75)}
.tkt-hero .total{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.18);display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tkt-hero .total small{font-size:.78rem;color:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.tkt-hero .total b{font-size:1.5rem}
.tkt-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
@media(min-width:620px){.tkt-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tkt-facts .fact{background:var(--card,#fff);border:1px solid var(--border-strong,var(--border));border-radius:12px;padding:12px 14px;min-width:0}
.tkt-facts .fact small{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:3px}
.tkt-facts .fact b{display:block;font-size:1.05rem;color:var(--heading);overflow-wrap:anywhere}
.tkt-facts .fact b .u{font-size:.82rem;font-weight:600;color:var(--muted)}
.tkt-facts .fact.wide{grid-column:1 / -1}
.tkt-facts .fact a{color:var(--accent);text-decoration:none}
.tkt-notes{background:var(--card,#fff);border:1px solid var(--border-strong,var(--border));border-radius:12px;padding:12px 14px;margin-bottom:12px;font-size:.92rem;line-height:1.5;white-space:pre-line}
.tkt-notes small{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:4px}
.tkt-acts{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.tkt-acts .btn{width:auto;padding:11px 18px}
.tkt-photos h2{margin:0 0 8px;font-size:.95rem;color:var(--heading)}
/* photo thumbnails, the same in every area: .pgal is a grid of them (.big: portrait ticket pages), .iss-ph a row of
   small ones (an inspection's issue photos); a button.pthumb in either opens the photo viewer (data-full, viewer.js),
   and its label is the "remove" tick over the corner. .lock is the "this can't be changed anymore" note over a form. */
.lock{padding:12px 14px;border-radius:10px;margin:0 0 16px;font-size:.88rem;background:rgba(0,0,0,.05);color:var(--muted);border:1px solid var(--border)}
.pgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin-bottom:16px}
.pgal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--border);display:block}
.pthumb{position:relative}
.pthumb label{position:absolute;left:4px;bottom:4px;background:rgba(255,255,255,.92);border-radius:6px;padding:3px 6px;display:flex;align-items:center;gap:4px;font-size:.68rem;font-weight:700;color:var(--danger);margin:0;text-transform:none}
.pthumb input{width:16px;height:16px;margin:0}
.pgal button.pthumb{padding:0;border:0;background:0;width:100%;margin:0;cursor:zoom-in;display:block}
.iss-ph{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 2px}
.iss-ph img{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--border);display:block}
.iss-ph button.pthumb{width:64px;height:64px;padding:0;border:0;background:0;margin:0;cursor:zoom-in;display:block}
.pgal.big{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pgal.big img{border-radius:12px;aspect-ratio:3/4;box-shadow:var(--shadow,0 2px 12px rgba(0,0,0,.08))}
/* nothing on a page may let a phone pan sideways: whatever pokes past the edge is clipped (clip, not hidden,
   so the sticky header keeps working) */
body{overflow-x:clip}
/* the home screen's truck chip: "Hi Jesus – [Truck 26 ▾]" (field app and the sub-leaser shell alike) */
h1:has(.hometruck){display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.hometruck{display:inline-flex;width:auto;align-items:center;gap:6px;margin:0;padding:5px 12px;border:1px solid var(--accent);border-radius:20px;background:var(--accent-soft);color:var(--accent);font:700 .9rem/1.2 inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.hometruck small{font-size:.7em;opacity:.8}
.hometruck.none{border-style:dashed;background:transparent}
/* filter card with the applied filters summed up on the top line (driver histories, service due) */
.ftop .fsum{flex:1 1 auto;min-width:0;font-size:.86rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftop .fsum b{color:var(--heading)}
.fbtn .lbl{font-size:.82rem}
/* popup forms (bs_pop_start), office and driver app */
.dlg{position:fixed;inset:0;background:rgba(10,10,20,.55);z-index:90;display:flex;align-items:flex-end;justify-content:center;padding:0}
.dlg[hidden]{display:none}
.dlg-card{width:100%;max-width:560px;margin:0;border-radius:14px 14px 0 0;max-height:92vh;max-height:92dvh;overflow:auto;overscroll-behavior:contain;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.dlg{overscroll-behavior:contain;touch-action:none}
.dlg-card{touch-action:pan-y}
@media(min-width:620px){.dlg{align-items:center;padding:16px}.dlg-card{border-radius:14px}}
.dlg-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.dlg-head h3{margin:0;flex:1;min-width:0}
.dlg-x{width:auto;flex:0 0 auto;background:none;border:0;color:var(--muted);font-size:1.7rem;line-height:1;padding:2px 8px;margin:-6px -10px -6px 0;cursor:pointer}
.dlg-x:hover{color:var(--heading);background:none}
/* bsCopy's off-screen helper (shared.js) */
.bs-copy-ta{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
/* a long address or key in running text breaks onto the next line instead of running off a phone screen */
code{overflow-wrap:anywhere}
/* a checkbox with its label (and an optional <small> line under it): every page, every area */
.ckline{display:flex;gap:10px;align-items:flex-start;text-transform:none;letter-spacing:0;font-weight:500;margin:0 0 12px;cursor:pointer}
.ckline input{width:auto;margin:3px 0 0;flex:0 0 auto}
.ckline small{display:block;color:var(--muted);font-weight:400;font-size:.8rem;margin-top:2px}
/* ---- helper text behind an i button (bs_info in admin/_layout.php; owner 2026-10-10: Settings "has lots of unneeded helper
   text ... have helper text be in eye boxes that you click and it pops up") ---- */
.ibtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin:0;padding:0;border-radius:50%;border:1px solid var(--border-strong,var(--border));background:#fff;color:var(--accent);font:700 .85rem/1 system-ui,sans-serif;vertical-align:middle;cursor:pointer;flex:none}
.ibtn:hover,.ibtn:focus-visible{background:var(--accent-soft);color:var(--accent)}
.ibtn.sm{width:18px;height:18px;margin-left:6px;border:1.5px solid var(--muted);background:none;color:var(--muted);font-size:11px}
.ibtn.sm:hover,.ibtn.sm:focus-visible{color:var(--accent);border-color:var(--accent);background:none}
label>.ibtn.sm{position:relative;top:-1px}
.info-text{display:none}
.dlg.dlg-info{z-index:95}
/* the photo tools' dialogs (bs_photo_tools: Fix crop, White-out & text) open over the ticket popup, under the info popup */
.dlg.dlg-tool{z-index:94}
.dlg.dlg-info .dlg-card{max-width:440px}
.dlg.dlg-info .info-body{color:var(--text);font-size:.9rem;line-height:1.5}
.dlg.dlg-info .info-body p{margin:0 0 10px}.dlg.dlg-info .info-body p:last-child{margin-bottom:0}
.dlg.dlg-info .info-body ol,.dlg.dlg-info .info-body ul{margin:0 0 10px;padding-left:20px}
.dlg.dlg-info .info-body code{font-size:.82rem;overflow-wrap:anywhere}
.pop-more{margin-top:14px}
.pop-more>summary{font-size:.8rem;color:var(--muted);cursor:pointer}
.pop-more>summary:hover{color:var(--text)}
.pop-more[open]>summary{margin-bottom:8px}
.due-ok{margin:2px 0 14px}.due-ok>summary{font-weight:700;padding:6px 0}
.pop-save{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;position:sticky;bottom:calc(-16px - env(safe-area-inset-bottom));background:var(--card, #fff);padding:10px 0 4px}
body:has(.dlg:not([hidden])){overflow:hidden}
/* ---- the phone keyboard (shared.js sets html.kb and --vv-top, --vv-h, --kb-h while a field has it up) ----
   Every layer fixed to the screen is on one of the three lists below, and deploy/lint.sh refuses a position:fixed
   rule whose layer is on none (owner, 2026-10-07: new pages must not bring the old keyboard bugs back). A new layer
   goes on one list and gets its class added here:
     kb-fit:  .dlg .sheet .drawer .vv-fit
              holds fields: sized to the part of the screen the keyboard leaves, its content scrolls in that
     kb-bar:  .ftabs .signfoot .selbar .signbar .kb-bar .pwa-upd .pwa-banner
              a bar along the bottom: out of the way while typing; the one holding the field rides above the keys
     kb-over: #lb .photoview .docview #bsLoad .drawer-back .done .kb-over .push-gate .sb-shield
              a viewer or overlay with nothing to type in: left as it is */
html.kb :is(.dlg, .sheet, .drawer, .vv-fit):not([hidden]){top:var(--vv-top);height:var(--vv-h);bottom:auto}
html.kb .dlg:not(.full){align-items:flex-end;padding:0}
html.kb .dlg-card{max-height:100%}
html.kb :is(.ftabs, .signfoot, .selbar, .signbar, .kb-bar):not(:focus-within){display:none !important}
html.kb :is(.ftabs, .signfoot, .selbar, .signbar, .kb-bar):focus-within{top:calc(var(--vv-top) + var(--vv-h));bottom:auto;transform:translateY(-100%);padding-bottom:10px}
/* a text box grows with its text (bsGrow, shared.js) to this cap, then scrolls; rows="1" starts it one line tall */
textarea{max-height:45vh;max-height:45dvh}
textarea[rows="1"]{min-height:0;resize:none}
/* picked photos on a driver's form (bsPhotoPick / bsThumb in shared.js): an x on each, a tap shows it full size */
.thumbs{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px}
.thumbs:empty{display:none}
.thumb{position:relative;display:block;width:76px;height:76px;flex:0 0 auto}
.thumb img{width:100%;height:100%;object-fit:cover;border-radius:8px;border:1px solid var(--border);display:block;cursor:zoom-in}
.thumb-x,.thumb-x:hover,.thumb-x:focus{position:absolute;top:-8px;right:-8px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0 0 2px;margin:0;
  border:2px solid #fff;border-radius:50%;background:#3d3d4e;color:#fff;font:400 20px/1 system-ui,-apple-system,sans-serif;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.photoview{position:fixed;inset:0;z-index:300;background:#111;display:flex;flex-direction:column}
.photoview img{flex:1 1 auto;min-height:0;width:100%;object-fit:contain;padding:calc(8px + env(safe-area-inset-top)) 8px 0;box-sizing:border-box}
.pv-bar{display:flex;gap:8px;padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
.pv-bar button,.pv-bar button:hover{flex:1;width:auto;margin:0;padding:14px 8px;border:0;border-radius:10px;background:var(--accent);color:#fff;font:inherit;font-size:1rem;font-weight:700;cursor:pointer}
.pv-bar .pv-del,.pv-bar .pv-del:hover{background:var(--danger)}
.pv-bar .ghost,.pv-bar .ghost:hover{background:#fff;color:var(--heading)}

/* pdfview.js: a document open over the page, with its close (X) button always in reach */
html.dv-open,html.dv-open body{overflow:hidden}
.docview{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:#3a3d42}
.dv-bar{display:flex;align-items:center;gap:8px;padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top));background:#1c1e22;color:#fff}
.dv-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem}
.dv-z{display:flex;gap:4px}
.dv-z button,.dv-x{width:40px;height:40px;padding:0;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font-size:1.3rem;line-height:40px;cursor:pointer}
.dv-x{width:44px;height:44px;font-size:1.9rem;background:rgba(255,255,255,.2)}
.dv-dl{color:#fff;font-size:.85rem;font-weight:700;padding:10px 8px;text-decoration:underline}
.dv-body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:10px 8px calc(20px + env(safe-area-inset-bottom))}
.dv-pages{width:100%;max-width:1000px;margin:0 auto}
.dv-pages .dv-img{display:block;width:100%;height:auto;background:#fff}
.dv-msg{color:#fff;text-align:center;padding:30px 16px;margin:0}
.pv-page{position:relative;width:100%;background:#fff;margin:0 auto 10px;box-shadow:0 1px 6px rgba(0,0,0,.35)}
.pv-page canvas{position:absolute;inset:0;width:100%;height:100%}

/* docsign.js: boxes over a PDF's pages - placing them (the office) and filling them in (the person) */
.signdoc{max-width:900px;margin:0 auto}
.signdoc.armed .pv-page{cursor:crosshair}
.sbox{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:0;padding:0 2px;border:1.5px solid #c98a00;border-radius:3px;background:rgba(255,213,79,.38);color:#5c3d00;font:700 clamp(8px,1.6vw,12px)/1.1 system-ui,sans-serif;text-align:center;white-space:nowrap;touch-action:none;user-select:none;-webkit-user-select:none}
.sbox span{overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.sbox.splace{cursor:move}
.sbox.splace.sel{outline:2px solid #1c5cab;outline-offset:1px;z-index:2}
.sbox.splace.t-sig,.sbox.splace.t-init{background:rgba(42,120,214,.18);border-color:#1c5cab;color:#12407a}
.sbox .rs{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;background:#1c5cab;border-radius:2px 0 2px 0;cursor:nwse-resize}
.sbox.sfill{cursor:pointer;background:rgba(255,213,79,.38);width:auto;min-width:0;min-height:0;font-weight:700}
.sbox.sfill.req:not(.sdone){background:rgba(255,193,7,.55);border-color:#b47b00}
.sbox.sfill.sdone{background:rgba(46,125,50,.08);border-color:rgba(46,125,50,.45);color:#111;font-weight:500;justify-content:flex-start}
.sbox.sfill.t-check{justify-content:center;font-size:clamp(10px,2.4vw,16px)}
.sbox.sfill.t-date{background:transparent;border-style:dashed;border-color:rgba(0,0,0,.25);color:#111;font-weight:500;cursor:default}
.sbox.sfill img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}
/* a form line is often under 10px tall on a phone: the text may spill a pixel rather than lose its top, and the
   finger target reaches a little past the box */
.sbox.sfill{overflow:visible}
.sbox.sfill span{max-width:100%;line-height:1}
.sbox.sfill::after{content:"";position:absolute;inset:-3px -1px}
.sbox.pulse{animation:sboxpulse .9s ease-out}
@keyframes sboxpulse{0%{box-shadow:0 0 0 0 rgba(255,152,0,.9)}100%{box-shadow:0 0 0 14px rgba(255,152,0,0)}}
.signpad canvas{display:block;width:100%;height:190px;border:1.5px dashed var(--border-strong,#bbb);border-radius:10px;background:#fff;touch-action:none}

/* ---- waiting on the server (shared.js, bsBusy): the bar along the top and the spinner in a button ----
   The bar sits under the iPhone status bar (the admin app draws under it, black-translucent) and over everything the
   app layers (popups 90, sheets 150, the viewers 200-300); it never takes a tap. Every header it lies on is the dark
   theme color, so the moving part is the accent lightened, with a glow. */
#bsLoad{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:1000;height:3px;overflow:hidden;pointer-events:none;
  background:color-mix(in srgb,var(--accent,#2d6a4f) 35%,transparent);opacity:0;transition:opacity .25s}
#bsLoad.on{opacity:1;transition-duration:.15s}
#bsLoad i{position:absolute;top:0;bottom:0;left:0;width:45%;border-radius:0 2px 2px 0;background:color-mix(in srgb,var(--accent,#2d6a4f) 45%,#fff);
  box-shadow:0 0 8px color-mix(in srgb,var(--accent,#2d6a4f) 55%,#fff);animation:bsload 1.1s cubic-bezier(.45,.05,.55,.95) infinite}
#bsLoad:not(.on) i{animation-play-state:paused}
/* never on paper, whatever page is printed (audit 2026-10-21: work orders and payroll printed pwa.js's fixed bars, the update
   bar or the offline banner, at the foot of every sheet): the loading bar, pwa.js's update bar, banner, notifications ask and gate */
@media print{#bsLoad,.pwa-upd,.pwa-banner,#pushAsk,#pushGate{display:none!important}}
@keyframes bsload{from{transform:translateX(-100%)}to{transform:translateX(225%)}}
/* the spinner: the button's own text color, so it reads on a filled, a ghost and a danger button alike. Also usable
   inline (<span class="bs-spin" aria-hidden="true"></span> before "Loading…") */
.bs-spin{display:inline-block;box-sizing:border-box;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-.15em;animation:bsspin .7s linear infinite}
.bs-busy{cursor:progress}
.bs-busy>.bs-spin{position:absolute;margin:0;pointer-events:none}
@keyframes bsspin{to{transform:rotate(360deg)}}
/* reduced motion: nothing travels or turns; the bar is whole and the spinner still, both breathe (opacity only) */
@media (prefers-reduced-motion:reduce){
  #bsLoad i{width:100%;border-radius:0;animation:bspulse 1.6s ease-in-out infinite}
  .bs-spin{animation:bspulse 1.6s ease-in-out infinite}
}
@keyframes bspulse{50%{opacity:.35}}
/* an inspection's comments (v66, admin/field.php and the driver's Past inspections): the office's tinted, the driver's plain */
.inote{margin:6px 0 0;padding:8px 10px;border-radius:8px;background:var(--bg,#f5f3ef);border:1px solid var(--border)}
.inote.off{background:var(--accent-soft)}
.inote small{display:block;color:var(--muted);margin-bottom:2px}
.inote span{display:block;font-size:.9rem;white-space:normal;overflow-wrap:anywhere}
.iack{color:var(--accent);font-weight:600}
.inote-reply{margin-top:8px;width:auto}

/* ---- The Add / Edit service popup (_service_form.php), in the office and the driver app ---- */
/* both frames: the popup's own pieces (admin.css and front.css know nothing of them) */
#svcDlg [hidden]{display:none!important}   /* .row and .svc-batch set display, which beats the browser's [hidden] */
#svcForm.many .row.pair,#svcDlg .row.pair.solo{grid-template-columns:minmax(0,1fr)}
#svcDlg .svc-batch{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
#svcDlg .svc-bhead,#svcDlg .svc-brow{display:grid;grid-template-columns:minmax(0,1fr) 100px 88px;gap:8px;align-items:center}
#svcDlg .svc-bhead{padding:0 10px;font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
#svcDlg .svc-brow{padding:8px 10px;border:1px solid var(--border);border-radius:10px}
#svcDlg .svc-brow b{display:block;font-size:.92rem;color:var(--heading);overflow-wrap:anywhere}
#svcDlg .svc-brow small{display:block;color:var(--muted);font-size:.76rem;line-height:1.3}
#svcDlg .svc-brow input{margin:0;padding:8px;min-width:0}
#svcDlg .svc-brow .na{font-size:.72rem;color:var(--muted);text-align:center;line-height:1.2}
#svcDlg .svc-btot{text-align:right;font-size:.86rem;color:var(--muted)}
#svcDlg .svc-btot b{color:var(--heading);font-variant-numeric:tabular-nums}
#svcDlg .svc-fix{display:flex;gap:8px;align-items:center;text-transform:none;letter-spacing:0;margin:4px 0;font-weight:600}
#svcDlg .svc-fix input{width:auto;margin:0}
#svcErr{margin:0 0 12px}
/* the Parts used rows and the totals line, wherever they sit (the popup, and the drivers' Fuel / Service form since
   2026-10-13: it had no parts at all): the office's admin.css has the same few, the drivers' app none of them */
/* a service's Parts used (bs_service_parts_ui): always open, one line per part - the part wide, a small Qty box, x */
.vd-svcparts{border:1px solid var(--border);border-radius:8px;margin:-2px 0 14px}
.vd-svcparts .svc-parts-h{padding:10px 12px;border-bottom:1px solid var(--border);font-weight:700;font-size:.9rem;color:var(--heading)}
.vd-svcparts .body{padding:10px 12px 12px}
.svc-partrows{display:flex;flex-direction:column;gap:8px}
.svc-partrow{display:grid;grid-template-columns:minmax(0,1fr) 64px 40px;gap:6px;align-items:center}
.svc-partrow select{min-width:0;margin:0;text-overflow:ellipsis}
.svc-partrow input{margin:0;padding-left:6px;padding-right:6px;text-align:center}
.svc-partrow button{width:40px;height:100%;min-height:40px;margin:0;padding:0;font-size:1.2rem}
.svc-partrow:last-child button{visibility:hidden}
.svc-partrow .svc-pick{grid-column:1/-1}
.vd-svcparts .pop-more{margin-top:10px}
.svc-totals{display:flex;justify-content:flex-end;gap:16px;flex-wrap:wrap;margin:-4px 0 14px;font-size:.82rem;color:var(--muted)}
.svc-totals b{color:var(--heading);font-variant-numeric:tabular-nums}
.svc-totals .tot{font-size:.95rem;font-weight:700;color:var(--heading)}
.svc-totals [hidden]{display:none}
.svc-pick{display:block;font-size:.74rem;color:var(--danger);margin-top:4px}
.svc-note{display:block;font-size:.76rem;color:var(--muted);margin-top:8px}
.svc-side .row.pair select{margin-bottom:16px}
/* an edited record's place in the approval queue (v86): waiting, approved, sent back and why */
.svc-state{margin:0 0 12px;padding:8px 12px;border-radius:8px;font-size:.86rem;line-height:1.4;background:rgba(214,140,20,.12);color:#7a4a00}
.svc-state[data-state=approved]{background:rgba(45,106,79,.12);color:#1f5a3d}
.svc-state[data-state=back]{background:rgba(180,40,40,.10);color:#8a1c1c}

/* ---- The printable work order (_service_form.php bs_svc_workorder; admin/workorder.php, fuel.php?wo=) ---- */
.wo-acts{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.wo-acts .btn,.wo-acts button{width:auto}
.wo-doc{background:var(--card,#fff);border:1px solid var(--border);border-radius:12px;padding:18px;max-width:800px;color:var(--text)}
.wo-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;border-bottom:2px solid var(--heading);padding-bottom:10px;margin-bottom:12px}
.wo-head small{display:block;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.wo-co{font-size:1.15rem;color:var(--heading)}
.wo-no{text-align:right}
.wo-no b{display:block;font-size:1.3rem;color:var(--heading);font-variant-numeric:tabular-nums;margin-bottom:4px}
.wo-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 16px;margin:0 0 14px}
.wo-facts div{min-width:0}
.wo-facts dt{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.wo-facts dd{margin:2px 0 0;font-size:.95rem;color:var(--heading);overflow-wrap:anywhere}
.wo-doc h3{font-size:.95rem;margin:14px 0 6px;color:var(--heading)}
.wo-list{margin:0 0 8px;padding-left:20px}
.wo-list li{margin:2px 0}
.wo-notes{margin:0 0 10px;font-size:.92rem;line-height:1.45;white-space:normal}
.wo-tbl{width:100%;border-collapse:collapse;font-size:.9rem;margin:0 0 10px}
.wo-tbl th,.wo-tbl td{padding:6px 4px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.wo-tbl th{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.wo-tbl .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.wo-tbl small{color:var(--muted)}
.wo-sum{max-width:420px;margin-left:auto}
.wo-sum tr.tot td{font-weight:700;color:var(--heading);border-bottom:0;border-top:2px solid var(--heading);font-size:1rem}
.wo-pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.wo-pics .pthumb{width:100%;height:auto;aspect-ratio:auto}
.wo-pics img{width:100%;height:auto;display:block;border-radius:6px}
.wo-foot{margin-top:14px;font-size:.75rem;color:var(--muted)}
@media print{
  /* only the work order on paper: every frame's chrome, popups and buttons stay on screen */
  @page{margin:.5in}
  body:has(.wo-doc){background:#fff}
  body:has(.wo-doc) .topbar,body:has(.wo-doc) .drawer,body:has(.wo-doc) .drawer-back,body:has(.wo-doc) .grpnav,body:has(.wo-doc) .devbar,body:has(.wo-doc) .actas,
  body:has(.wo-doc) .fhead,body:has(.wo-doc) .ftabs,body:has(.wo-doc) .pagehead,body:has(.wo-doc) h1,body:has(.wo-doc) .wo-acts,body:has(.wo-doc) .flash,
  body:has(.wo-doc) .dlg,body:has(.wo-doc) .sheet,body:has(.wo-doc) #lb{display:none!important}
  body:has(.wo-doc) main{max-width:none!important;padding:0!important;margin:0!important}
  .wo-doc{border:0;border-radius:0;padding:0;max-width:none;color:#000}
  .wo-head{border-color:#000}
  .wo-tbl th,.wo-tbl td{border-color:#bbb}
  .wo-pics{grid-template-columns:repeat(3,1fr)}
  .wo-pics .pthumb,.wo-tbl tr{break-inside:avoid}
}
/* Users > Access (a staff login's modules, bs_perm): a module a line, its name and what it covers, then Off / View only / View & edit */
.perm-grid{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.perm-row{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:0;text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--text);border-top:1px solid var(--border);font-weight:600}
.perm-row:first-child{border-top:0}
.perm-row>span{flex:1 1 auto;min-width:0}
.perm-row small{display:block;font-weight:400;color:var(--muted);font-size:.8rem}
.perm-row select{flex:0 0 auto;width:auto;max-width:150px;margin:0}

/* ---- tablets (an iPad Mini, a Z Fold or iPhone fold open, a split-screen window): from 600px (700 until 2026-10-26: a fold open is narrower) the page takes the desktop shape, and on a
   touch screen every control is finger-sized. No setting for it (owner, 2026-10-10): a fold is a phone shut and a tablet
   open, so the width decides. */
@media(min-width:600px){
  /* a list row reads as a table line: the title and its details on one line, so twice the rows fit a screen (.rows.stack keeps
     the phone shape where the details are a paragraph) */
  .rows:not(.stack) .r .t{display:flex;align-items:baseline;gap:4px 14px;flex-wrap:wrap}
  .rows:not(.stack) .r .t>b{flex:0 0 auto;max-width:60%}
  .rows:not(.stack) .r .t>small{margin-top:0;flex:1 1 200px}
}
@media(min-width:600px) and (pointer:coarse){
  button,.btn{min-height:44px}
  .btn.sm,button.sm,.rows .r .act button,.rows .r .act .btn{min-height:40px}
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select{min-height:44px}
  .seg>*,.views>*{min-height:40px}
  .ibtn,.ibtn.sm{min-height:0}
}

/* the office acting as a driver (admin/actas.php): a bar over every screen naming both, and the way back */
.actas{background:#fff3cd;color:#5c4400;padding:8px 14px;font-size:.9rem;text-align:center;line-height:1.4}
.actas a{font-weight:700;color:var(--accent);margin-left:8px}
.vw-src{display:none}

/* ---- What notifies me (bs_notif_prefs_fields, office and driver app): a row a category, a tap shows the choices ---- */
.np-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}
.np-row{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:12px 12px 12px 14px;border:0;border-radius:0;background:#fff;color:inherit;
  text-align:left;font:inherit;cursor:pointer;min-height:64px}
.np-list > :not(input) + .np-row, .np-list > input + .np-row{border-top:1px solid var(--border)}
.np-row:hover{background:#f7f7f9}
.np-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.np-row.locked{cursor:default;background:#fafafb}
.np-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.np-txt b{font-size:1rem;font-weight:700;color:var(--heading, #1a1a2e)}
.np-txt small{font-size:.82rem;font-weight:500;color:var(--muted);line-height:1.3}
.np-txt .np-why{color:#5a4a00;margin-top:2px}
.np-lv{flex:0 0 auto;display:inline-block;padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:700;white-space:nowrap}
.np-lv.lv-alert{background:#e3f1ea;color:#1f5a3f}
.np-lv.lv-silent{background:#e8ecf6;color:#2f3f6b}
.np-lv.lv-off{background:#efefef;color:#6b6b7b}
.np-lv.lv-disabled{background:#fbeaea;color:#8a2c2c}
/* a group of categories (Dispatch): its name, then its rows set in under it */
.np-group{padding:14px 16px 4px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--border)}
.np-row.np-sub{padding-left:28px}
.np-list > .np-group + .np-row{border-top:0}
.np-go{flex:0 0 auto;font-size:1.5rem;line-height:1;color:var(--muted)}
.np-back{display:inline-block;width:auto;margin:0 0 8px;padding:6px 2px;border:0;background:0;color:var(--accent);font:inherit;font-weight:700;cursor:pointer}
.np-pick-h{margin:0 0 2px;font-size:1.1rem}
.np-pick-d{margin:0 0 12px;color:var(--muted);font-size:.88rem}
.np-opt{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 8px;padding:14px;border:2px solid var(--border);border-radius:12px;background:#fff;
  color:inherit;text-align:left;font:inherit;cursor:pointer;min-height:64px}
.np-opt > span:last-child{display:flex;flex-direction:column;gap:2px}
.np-opt small{font-size:.82rem;font-weight:500;color:var(--muted);line-height:1.3}
.np-opt .np-lv{min-width:58px;text-align:center}
.np-opt.on{border-color:var(--accent);background:#f2f8f5}
.np-note{text-align:left;margin:10px 0 12px}

/* The installed iPhone app draws the page under the clock and battery (black-translucent): a page with no top bar (the
   sign-in) slid under them when iOS scrolled up to show a field (owner, 2026-10-12). This strip, the page's own color, keeps
   that space clear; invisible until something scrolls under it. */
.sb-shield{position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top,0px);background:var(--bg,#f4f2ee);z-index:300;pointer-events:none}

/* pwa.js's bars along the bottom (audit 2026-10-19: at 200-210 they covered a popup's Save row, the picker's search and
   SAVE, and the ticket's Send): over the tab bar (.ftabs 30), under the drawer (40), the popups (.dlg 90), the picker
   (.sheet 150) and the Sent screen (.done 160). Both carry .kb-bar too, so they go while typing. "A new version is ready"
   (.pwa-upd) only shows while nothing is open and no form is typed in, and has Later */
.pwa-banner{display:none;position:fixed;left:0;right:0;bottom:0;z-index:34;padding:11px 14px calc(11px + env(safe-area-inset-bottom));font-size:.85rem;font-weight:600;text-align:center;color:#fff;background:#3d3d4e;box-shadow:0 -3px 14px rgba(0,0,0,.18)}
.pwa-upd{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--card,#fff);color:var(--text);border-top:3px solid var(--accent);box-shadow:0 -6px 24px rgba(0,0,0,.18)}
.pwa-upd[hidden]{display:none}
/* On a page with the drivers' tab bar (bs_app_tabs) both sit just above it, never over it: offline the banner stays up the
   whole time, and its two lines covered Home, Ticket, Fuel and the rest, the one way between screens with no signal
   (audit 2026-10-20). The tab bar keeps the safe area under it. The banner also goes above a signing bar (docs.php
   .signfoot, the same place; pwa.js sets --pwa-lift to its height), whose Next box and Finish it covered. */
body:has(.ftabs) .pwa-banner{bottom:calc(var(--tabh,54px) + env(safe-area-inset-bottom) + var(--pwa-lift,0px));padding-bottom:11px}
body:has(.ftabs) .pwa-upd{bottom:calc(var(--tabh,54px) + env(safe-area-inset-bottom));padding-bottom:12px}
body:has(.ftabs){padding-bottom:calc(var(--tabh,54px) + var(--pwa-bh,0px) + env(safe-area-inset-bottom))}
.pwa-upd-t{flex:1 1 240px;max-width:440px;min-width:0}
.pwa-upd-t b{display:block;color:var(--heading);font-size:1rem}
.pwa-upd-t small{display:block;margin-top:2px;color:var(--muted);font-size:.82rem;line-height:1.35}
.pwa-upd-b{display:flex;gap:8px;flex:1 1 240px;max-width:340px}
.pwa-upd button,.pwa-upd button:hover{flex:1 1 0;width:auto;min-height:46px;margin:0;padding:10px 12px;border:0;border-radius:10px;background:var(--accent);color:#fff;font:inherit;font-size:.95rem;font-weight:700;cursor:pointer}
.pwa-upd button.later,.pwa-upd button.later:hover{flex:0 1 auto;background:transparent;color:var(--muted);border:1px solid var(--border-strong,var(--border))}

/* PTO day boxes (shared.js [data-pto-pick], the time off forms) */
.pto-label{display:block;font-weight:700;font-size:.88rem;margin:0 0 6px}
.pto-days{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px}
.pto-day{display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 12px;min-height:42px;border:1px solid var(--border-strong,var(--border));border-radius:10px;background:#fff;
  font-weight:600;font-size:.9rem;text-transform:none;letter-spacing:0;color:inherit;cursor:pointer}
.pto-day input{width:auto;min-height:0;margin:0;accent-color:var(--accent)}
.pto-day.on{border-color:var(--accent);background:#eef6f1}
.pto-day.wk span{color:var(--muted)}
.pto-day.off{opacity:.45;cursor:not-allowed}
fieldset.bare{border:0;padding:0;margin:0;min-width:0}
.pto-field .hint{display:block;margin-top:2px}

/* notifications (bsNotifList, shared.js): a swipe right marks read, a swipe left clears; a computer gets the two on hover */
.swipe{position:relative;border-radius:10px;overflow:hidden}
.swipe .r{position:relative;z-index:1;transition:transform .18s ease;touch-action:pan-y;margin:0}
.swipe .under{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:.8rem;font-weight:700;color:#fff;border-radius:10px;background:var(--muted)}
.swipe .under span{opacity:0}.swipe.l .under{background:var(--accent)}.swipe.rr .under{background:var(--danger)}.swipe.l .under .l{opacity:1}.swipe.rr .under .rr{opacity:1}
.swipe .nacts{position:absolute;z-index:2;right:8px;top:50%;transform:translateY(-50%);display:none;gap:6px;padding:4px;border-radius:10px;background:var(--card,#fff);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.swipe .nacts button{width:34px;height:34px;min-height:0;padding:0;border-radius:8px;border:1px solid var(--border);background:var(--card,#fff);color:var(--text);font-size:1.05rem;line-height:1;cursor:pointer}
.swipe .nacts button[data-nact=read]:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.swipe .nacts button[data-nact=clear]:hover{background:var(--danger);border-color:var(--danger);color:#fff}
@media (hover:hover) and (pointer:fine){.swipe:hover .nacts,.swipe:focus-within .nacts{display:flex}}
.chip[hidden]{display:none}

/* ---- the one search (shared.js bsFind, #bsFind in admin/_layout.php): the whole screen on a phone, a panel under the
   top bar from 620px; whole above the keys while the keyboard is up (kb-fit as a .dlg) ---- */
.dlg.dlg-find{align-items:stretch}
#bsFind .dlg-card{display:flex;flex-direction:column;max-width:none;height:100%;max-height:none;margin:0;border:0;border-radius:0;padding:0 0 env(safe-area-inset-bottom)}
#bsFind a,#bsFind a:hover{text-decoration:none}
@media(min-width:620px){.dlg.dlg-find{align-items:flex-start;padding:64px 16px 16px}#bsFind .dlg-card{max-width:680px;height:auto;max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);border-radius:14px}}
html.kb .dlg.dlg-find{align-items:stretch;padding:0}
html.kb #bsFind .dlg-card{height:100%;max-height:100%;border-radius:0}
.find-bar{display:flex;align-items:center;gap:10px;margin:0;padding:calc(8px + env(safe-area-inset-top)) 12px 8px 16px;border-bottom:1px solid var(--border);flex:none}
@media(min-width:620px){.find-bar{padding-top:8px}}
.find-bar svg{width:22px;height:22px;flex:none;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round}
#bsFind .find-bar input,#bsFind .find-bar input:focus{flex:1;min-width:0;width:auto;margin:0;padding:10px 0;border:0;border-radius:0;outline:0;box-shadow:none;background:transparent;font-size:1.1rem}
#bsFind .find-bar input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}   /* one X: Close */
.find-bar .dlg-x{margin:0}
.find-list{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 0 12px}
#bsFind .find-g h4{margin:12px 16px 4px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.find-i{display:flex;align-items:center;gap:10px;padding:9px 16px;color:var(--text);text-decoration:none}
.find-i .t{flex:1;min-width:0}
.find-i b{display:block;color:var(--heading);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.find-i small{display:block;color:var(--muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.find-i .chip{flex:none}
.find-list a:hover,.find-list a.on{background:var(--accent-soft);text-decoration:none}
.find-more{display:block;padding:7px 16px;font-size:.85rem;font-weight:600}
.find-all{display:block;margin:10px 0 0;padding:12px 16px;border-top:1px solid var(--border);font-weight:600}
.find-note{margin:0;padding:12px 16px;color:var(--muted);font-size:.9rem}
.find-note b{color:var(--text)}
.find-sec{margin-bottom:18px}

/* a ticket's times picked from lists (bs_ticket_time_pick): hour, minutes and AM/PM side by side, the phone's own picker
   on each; a total worked out, not typed (.tk-hrs), reads as a filled-in gray box. The office's Edit ticket puts start
   and end side by side, one under the other on a phone */
.tk-tm{display:flex;gap:6px;align-items:stretch}.tk-tm select{flex:1 1 0;width:auto;min-width:0}
.tk-hrs{width:100%;background:var(--border)!important;color:var(--heading,var(--text));font-weight:700;cursor:default}
input.tk-hrs:focus{outline:none;box-shadow:none}
.ed-math{margin:-4px 0 12px;font-size:.88rem;color:var(--muted)}
.ed-math.txt-bad{color:var(--danger)}
.ed-math[hidden],[data-ed-tons][hidden]{display:none}
/* an invoiced ticket's billed boxes (fieldset.ed-billed disabled, audit 2026-10-19): shown as billed, not changed here */
fieldset.ed-billed:disabled :is(input,select){background:var(--border);color:var(--muted);cursor:not-allowed}
@media (max-width:560px){.row.pair.ed-times{grid-template-columns:minmax(0,1fr)}}
.row.ed-hrs3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* a customer's colored bar before its name (v105, shared.js bsCustColors) */
/* a box that starts with a colored customer's name: its whole left edge in the color (shared.js) */
.cbox { border-left: 6px solid var(--cb) !important; }
.bd-card.tinted { border-left: 6px solid var(--cc); }   /* the Orders board's cards, headed in the customer's color already */
.cbar { display: inline-block; width: 5px; height: 1em; border-radius: 2px; margin-right: 5px; vertical-align: -0.12em; background: var(--cb); flex: none; }