/* Generated from the inline stylesheet; the themed :root block stays inline in PHP. */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Manrope",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:16px;line-height:1.45;
  padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom))}
/* a link is the app's green, not the browser's blue; the underline stays (see shared.css) */
a{color:var(--accent)}

.fhead{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--heading);color:#fff;padding:calc(11px + env(safe-area-inset-top)) 16px 11px}
.fh-title{font-weight:700;font-size:1rem}
.fwrap{max-width:560px;margin:0 auto;padding:16px 14px 24px}

/* bottom tabs - thumb reach, big targets, safe-area aware */
.ftabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:#fff;border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 12px rgba(0,0,0,.06)}
.ftabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:var(--tabh);
  text-decoration:none;color:var(--muted);font-size:.68rem;font-weight:700;letter-spacing:.01em}
.ftabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ftabs a.on{color:var(--accent)}
.ftabs a:active{background:var(--accent-soft)}

h1{margin:0 0 4px;font-size:1.35rem;color:var(--heading)}
h2{margin:0 0 12px;font-size:1.05rem;color:var(--heading)}
.sub{margin:0 0 20px;color:var(--muted);font-size:.86rem}
.sub a{color:var(--accent);font-weight:700;text-decoration:none;white-space:nowrap}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;box-shadow:0 2px 14px rgba(0,0,0,.05);margin-bottom:14px}

label{display:block;margin:0 0 6px;font-weight:700;font-size:.8rem;color:var(--heading)}
input,select,textarea{width:100%;padding:13px 13px;margin-bottom:16px;border:1px solid var(--border);border-radius:10px;
  font:inherit;font-size:16px;background:#fff;color:var(--text)}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
input[type=file]{padding:11px;background:#fafafa}
.clr{position:relative;display:flex;margin-bottom:16px}.clr input{flex:1 1 auto;padding-right:48px;margin-bottom:0}
.clr button{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0 0 2px;margin:0;border:0;border-radius:50%;background:#eef0f4;color:var(--muted);font:400 22px/1 system-ui,-apple-system,sans-serif;-webkit-appearance:none;appearance:none;cursor:pointer}
.clr button:active{background:var(--border);color:var(--text)}
/* iOS gives date fields an intrinsic width wider than half the screen; take it away */
input[type=date]{min-width:0;max-width:100%;-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;min-height:50px;text-align:left}
input[type=date]::-webkit-date-and-time-value{text-align:left}
button,.btn{display:inline-block;width:100%;padding:15px;border:0;border-radius:10px;background:var(--accent);color:#fff;
  font:inherit;font-weight:700;font-size:1.02rem;text-align:center;text-decoration:none;cursor:pointer}
button:hover,.btn:hover{background:var(--accent-hover)}
button:disabled{opacity:.5}

/* home: big buttons */
.clockbar{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px 18px;margin-bottom:14px;text-decoration:none;color:var(--text);box-shadow:0 2px 14px rgba(0,0,0,.05)}
.clockbar .dot{width:14px;height:14px;border-radius:50%;background:#b5b8c5;flex:0 0 auto;box-shadow:0 0 0 4px rgba(0,0,0,.05)}
.clockbar.on .dot{background:#2ecc71;box-shadow:0 0 0 4px rgba(46,204,113,.25)}
.clockbar .txt{flex:1;min-width:0}
.clockbar b{display:block;font-size:1.05rem}
.clockbar small{display:block;color:var(--muted);font-size:.82rem;margin-top:2px;overflow-wrap:anywhere}
.clockbar .go{font-size:1.6rem;color:var(--muted);line-height:1}
.clock-state{text-align:center;padding:26px 16px 22px}
.clock-state .big{font-size:1.6rem;font-weight:800;margin:6px 0 2px}
.clock-state .sub{margin:0}
.clock-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.clock-stats div{background:var(--accent-soft);border-radius:12px;padding:12px;text-align:center}
.clock-stats b{display:block;font-size:1.25rem}
.clock-stats small{color:var(--muted);font-size:.78rem}
.clock-btn.out{background:#c0392b}
/* inspection issues: one card per reported item */
.hidepick{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.hidepick input{pointer-events:auto}
.issue{border:1px solid #e0a1a1;background:#fff7f7;border-radius:12px;padding:12px;margin-bottom:12px}
.issue-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.issue-head b{font-size:1.05rem;color:var(--heading)}
.issue-x{width:auto;padding:4px 12px;font-size:1.3rem;line-height:1;background:0;color:var(--muted);border:0;margin:0}
.sev{display:flex;gap:6px;margin-bottom:8px}
.sev label{flex:1;margin:0;position:relative}
.sev input{position:absolute;opacity:0;width:0;height:0}
.sev span{display:block;text-align:center;padding:10px 4px;border:1px solid var(--border);border-radius:8px;background:#fff;font-weight:700;font-size:.9rem}
.sev input:checked+span{background:var(--accent);color:#fff;border-color:var(--accent)}
.sev label:nth-child(3) input:checked+span{background:#a11b1b;border-color:#a11b1b}
.issue textarea{margin-bottom:8px;min-height:56px}
/* an issue's unit (v84): the truck or one of the inspection's trailers */
.issue-unit select{margin-bottom:8px}
.issue-photo{display:inline-block;margin:0 0 6px}
.issue-photo input{position:absolute;opacity:0;width:0;height:0}
.issue-photo span{display:inline-block;padding:9px 14px;border:1px dashed var(--accent);border-radius:8px;color:var(--accent);font-weight:700;font-size:.9rem;cursor:pointer}
.issue-prev{display:flex;flex-wrap:wrap;gap:10px;padding-top:6px}
/* the DVIR (trip.php on a DVIR copy, owner 2026-10-14, after the reference he showed): "N / M items" with the answered count
   in green, then a row per item with two round toggles under Defect and Checked, gray off and green on, big enough for a
   gloved thumb; a defect's comment shows under its name (a tap edits it). Step 2 lists the defects as the app's rows. */
.dvir-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:10px 0 8px}
.dvir-head h2{margin:0}
.dvir-count{font-weight:700;color:var(--muted);font-size:.95rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.dvir-count b{color:var(--ok);font-size:1.2rem}
.dvir-cols,.dvir-row{display:grid;grid-template-columns:minmax(0,1fr) 68px 68px;gap:4px;align-items:center}
.dvir-cols{padding:0 0 6px;border-bottom:1px solid var(--border);font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:center}
.dvir-row{padding:8px 0;border-bottom:1px solid var(--border);min-height:66px}
.dvir-name{min-width:0;font-weight:600;color:var(--heading);overflow-wrap:anywhere;line-height:1.3}
.dvir-sum,.dvir-sum:hover{display:block;width:auto;margin:4px 0 0;padding:2px 0;background:0;border:0;border-radius:0;color:var(--danger);font-weight:600;font-size:.82rem;line-height:1.35;text-align:left;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.dvir-tg,.dvir-tg:hover{justify-self:center;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;margin:0;border:0;border-radius:50%;background:#dfe2e7;color:#fff}
.dvir-tg svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.dvir-tg[aria-pressed=true]{background:var(--ok)}
.dvir-tg.def[aria-pressed=true]{background:var(--danger)}   /* a defect is red, never the green of Checked (2026-10-14) */
.dvir-tg:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dvir-row.is-def .dvir-name>span{color:var(--danger)}
.dvir-next{margin-top:18px}
.dvir-other{display:block;width:100%;margin-top:12px}
.dvir-back{margin-top:10px}
.dvir-what{margin:0 0 16px;padding:10px 12px;border-radius:10px;background:var(--accent-soft);font-size:.9rem;font-weight:600;color:var(--heading);overflow-wrap:anywhere}
#tripForm.dvir{scroll-margin-top:72px}   /* Continue and Back bring the form up under the sticky top bar, not behind it */
#dvirDefs{margin:0 0 6px}
.dvir-def{cursor:pointer}
.dvir-def .iss-ph img{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--border)}
#dvirDlg textarea{min-height:56px}
#dvirDlg .photobtns{margin-bottom:10px}
.repairs{margin-top:16px}
/* the driver's orders from Dispatch (index.php): one row each, opening its page */
.fh-refresh{width:40px;height:40px;border:0;border-radius:10px;background:transparent;color:#fff;font-size:1.35rem;line-height:1;padding:0;flex:0 0 auto;cursor:pointer;margin-left:auto}
.fh-refresh:active{background:rgba(255,255,255,.18)}
/* a screen one step down (signing, a document on its own, My hours): back, or an X, at the left of the bar: .hback, shared.css */
.tiles{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.tile{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:22px 20px;text-decoration:none;color:var(--heading);box-shadow:0 2px 14px rgba(0,0,0,.05);min-height:104px}
.tile:active{background:var(--accent-soft)}
.tile .ic{flex:0 0 auto;width:56px;height:56px;border-radius:14px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center}
.tile .ic svg{width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tile b{display:block;font-size:1.15rem;line-height:1.2}
.tile small{display:block;color:var(--muted);font-size:.82rem;margin-top:3px;font-weight:400}

/* the customer field is a chooser: chevron and tint say so before it is tapped.
   .ispicker is added by JS, so with JS off it stays an ordinary typeable input.
   (.pickwrap itself is in shared.css) */
.pickwrap .pickchev{display:none;position:absolute;right:14px;top:23px;transform:translateY(-50%);color:var(--accent);font-size:0;pointer-events:none}
.pickwrap .pickchev::after{content:"";display:block;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.pickwrap input.ispicker{padding-right:38px;background:var(--accent-soft);border-color:var(--accent);cursor:pointer;caret-color:transparent}
.pickwrap input.ispicker + .pickchev{display:block}

/* picker boxes: a touch bigger than the office's, for gloves in a truck */
.pbox{min-height:60px;font-size:1.05rem}
.ps-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}

/* checkbox rows */
.chk{display:flex;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid var(--border);cursor:pointer;margin:0;font-weight:600;font-size:.95rem;color:var(--text)}
.chk:last-of-type{border-bottom:0}
.chk input{width:26px;height:26px;margin:0;flex:0 0 auto;accent-color:var(--accent)}

html.offline .fh-title::after{content:" · offline";color:#ffd7a1;font-weight:700;font-size:.78rem}



/* submitted tickets: lock note, photo grid (search bar, table, chips and pager come from shared.css) */

/* ---- the drivers' history and outlook screens (trip.php?v=past, due.php) ---- */
.iss{margin:8px 0 0;padding:8px 10px;border-radius:8px;background:rgba(161,27,27,.07)}
.iss.fixed{background:rgba(45,106,79,.08)}
.iss b{font-size:.85rem;color:var(--danger)}
.iss.fixed b{color:var(--accent)}
.iss .fixed-by{color:var(--accent)}
/* the drivers' lists are the app's rows (shared.css .rows .r); what is theirs alone: */
.repairs h2,#myDispatch h2{font-size:1.05rem}
.rows .r.sum{background:var(--accent-soft)}                  /* fuel / service history: the totals row */
.rows .r.partial .top .fig{color:var(--muted)}               /* a partial fill's gallons */
.iss small{display:block;font-size:.8rem;color:var(--text);margin-top:3px;line-height:1.4}
.rows .r.svc{align-items:flex-start;gap:12px}                /* service due: the tick box beside it */
.rows .r.svc .t small{color:var(--text)}
.rows .r.svc .every{color:var(--muted)}
.rows .r.svc .gap{font-weight:700}
.rows .r.svc.due .gap{color:var(--danger)}
.rows .r.svc.soon .gap{color:#8a5200}
.rows .r.svc.fine .gap{color:var(--accent)}
.tile.warn .ic{background:rgba(161,27,27,.1)}
.tile.warn .ic svg{stroke:var(--danger)}
.tile small a{color:var(--accent);font-weight:600;text-decoration:none}


/* Docs (docs.php): the send button, and lists of documents that open on a tap */
.ftabs a{position:relative}
.ftabs .tbadge{position:absolute;top:5px;left:calc(50% + 5px);min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--danger);color:#fff;font-style:normal;font-size:.64rem;font-weight:800;line-height:17px;text-align:center}
.docsend{display:flex;align-items:center;gap:14px;width:100%;margin:0 0 14px;padding:14px 16px;border:1.5px dashed var(--accent);border-radius:14px;background:var(--accent-soft);color:var(--text);text-align:left;font:inherit;cursor:pointer}
.docsend svg{flex:0 0 auto;width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.docsend b{display:block;font-size:1.02rem;color:var(--accent-hover)}
.docsend small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px;font-weight:400}
.r.doc.off .ic{background:rgba(0,0,0,.05);color:var(--muted)}
.dochead{margin:22px 0 10px}
.r.doc.tosign .ic{background:rgba(161,27,27,.1);color:var(--danger)}
.r.doc.tosign .t>b{color:var(--danger)}
/* the fill-in-and-sign screen: its buttons sit just above the bottom tabs */
body:has(#signFoot) .fwrap{padding-bottom:110px}
.signfoot{position:fixed;left:0;right:0;bottom:calc(var(--tabh) + env(safe-area-inset-bottom));z-index:29;display:flex;gap:8px;align-items:center;padding:10px 12px;background:#fff;border-top:1px solid var(--border);box-shadow:0 -3px 12px rgba(0,0,0,.08)}
.signfoot span{flex:1;font-weight:700;font-size:.9rem;color:var(--heading)}
.signfoot button{width:auto;margin:0;padding:12px 16px}
.signfoot #signDone:not(.ready){opacity:.55}
.signdoc{margin:0 -8px}
/* pdfview.js: a file the viewer cannot draw (a Word file...) - what it is, and the one button that saves or shares it */
.dv-file{max-width:420px;margin:12vh auto 0;padding:26px 20px;border-radius:16px;background:#fff;text-align:center;color:var(--text)}
.dv-file .dv-ext{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:64px;padding:0 10px;border-radius:14px;background:var(--accent-soft);color:var(--accent-hover);font-size:.95rem;font-weight:800;letter-spacing:.03em}
.dv-file p{margin:14px 0 18px;font-size:.95rem;line-height:1.45}
.dv-file .dv-go{display:block;text-decoration:none}
/* the Share button in the viewer's bar is a link styled like Download */
.dv-dl[role=button]{cursor:pointer}
/* My hours (hours.php): the row of ranges (.views.scroll) scrolls sideways on a phone; totals, then each day's cards */
.hupd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px}
.hupd a{flex:0 0 auto;padding:8px 2px}
.hviews{margin:0 0 12px}
.hviews a{padding:11px 14px;font-size:.85rem}   /* a finger's worth in the cab */
.hrange{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 12px}
.hrange b{display:block;font-size:1.02rem;color:var(--heading)}
.hrange small{display:block;color:var(--muted);font-size:.8rem;overflow-wrap:anywhere}
.hrange .btn{flex:0 0 auto;margin:0}
.htot{text-align:center;padding:20px 16px 16px}
.htot .big{font-size:2rem;font-weight:800;line-height:1.1;color:var(--heading)}
.htot .lbl{color:var(--muted);font-size:.82rem;margin-top:2px;overflow-wrap:anywhere}
.htot .note{margin:10px 0 0}
.hstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 2px}
.hstats div{background:var(--accent-soft);border-radius:12px;padding:10px 4px}
.hstats b{display:block;font-size:1rem;white-space:nowrap}
.hstats small{color:var(--muted);font-size:.74rem}
.hstats .ot{background:rgba(138,90,0,.1)}
.hstats .ot b{color:var(--warn)}
.hby{margin-top:12px;text-align:left}
.hby div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--border);font-size:.9rem}
.hby span{min-width:0;overflow-wrap:anywhere}
.hby b{white-space:nowrap}
.rows .r .hot{color:var(--warn);font-weight:700}           /* My hours: overtime, a punch still to send */
.rows .r.pending .top b{color:#7a5200}
.htags{margin-top:5px;display:flex;flex-wrap:wrap;gap:4px}
.htags .chip+.chip{margin-left:0}
.hcust a{display:flex;justify-content:space-between;gap:12px;padding:14px 4px;border-top:1px solid var(--border);color:var(--text);text-decoration:none;font-weight:600}
.hcust a:first-child{border-top:0}
.hcust a.on{color:var(--accent-hover)}
.hcust a.on span::before{content:"\2713  "}
.hcust b{white-space:nowrap}
.hfoot{margin:4px 2px 0;text-align:left}
/* the clock's way into My hours */
.tile.hours-tile{margin:0 0 14px;min-height:0;padding:16px 18px}
.tile.hours-tile .go{margin-left:auto;font-size:1.6rem;color:var(--muted);line-height:1}

/* ---- Due (due.php) ---- */
/* a row that can be ticked: the box on the left, the service beside it */

/* ---- The time clock bar on the driver home (index.php) ---- */
/* front.css's .clockbar text is a steady small line; on the clock it needs to read at a glance
   from across the cab, so just these two lines get bumped - kept here since front.css is shared */
.clockbar .clockedin{font-size:1.55rem;font-weight:800;letter-spacing:.02em;line-height:1.2}
.clockbar .clockedin-cust{font-size:1.05rem;font-weight:700;text-transform:uppercase;color:var(--text);margin-top:3px}

/* ---- A company's order link (d.php) ---- */
.dsp-ask{display:flex;gap:10px}.dsp-ask>*{flex:1}
.dsp-ask .btn.ghost{border:1px solid var(--border)}
.dsp-said{font-size:.95rem;margin:0 0 12px}
/* Finish day (d.php, 2026-10-14): after a send, Send another ticket / Finish day; then Day complete */
.dsp-sent{text-align:center;padding:6px 0 4px}
.dsp-sent-mark{width:56px;height:56px;margin:0 auto 10px;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:800}
.dsp-sent>b{display:block;font-size:1.25rem;color:var(--heading)}
.dsp-sent>p{color:var(--muted);margin:4px 0 14px}
.dsp-sent .dsp-finf button,.dsp-fin .dsp-finf button{width:100%}
.dsp-sent.dsp-ended .dsp-finf{display:inline-block}
.dsp-fin{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.dsp-fin span{color:var(--muted);font-size:.9rem}
.dsp-fin .dsp-finf{flex:0 0 auto}
.dsp-fin .btn.ghost{border:1px solid var(--border)}
.dsp-tk{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--border)}
.dsp-tk:first-of-type{border-top:0}
.dsp-tk img{width:56px;height:72px;object-fit:cover;border-radius:8px;background:#eee;flex:0 0 auto}
.dsp-tk b{display:block;color:var(--heading)}
.dsp-tk small{display:block;color:var(--muted);font-size:.8rem}
.dsp-foot{text-align:center;color:var(--muted);font-size:.78rem;margin:18px 0 0}
.dsp-tl{display:flex;gap:8px;align-items:center;padding:10px 0;border-top:1px solid var(--border)}
.dsp-tl:first-of-type{border-top:0}
.dsp-tl>div{flex:1;min-width:0}.dsp-tl b{display:block;color:var(--heading)}.dsp-tl small{display:block;color:var(--muted);font-size:.8rem}
.dsp-tl .btn{width:auto;flex:0 0 auto;margin:0}
.dsp-who{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,white);border-radius:10px;padding:9px 12px;margin:0 0 12px;font-size:.88rem;color:var(--text)}
.dsp-who b{color:var(--heading)}
.dlg .card{padding:18px}

/* ---- Privacy and terms pages (_legal.php) ---- */
.legal h2{font-size:1.05rem;color:var(--heading);margin:20px 0 6px}
.legal p,.legal li{font-size:.95rem;line-height:1.5;margin:0 0 10px}
.legal ul{padding-left:20px;margin:0 0 10px}
.legal .updated{color:var(--muted);font-size:.82rem;margin:0 0 14px}
.legal .other{margin-top:22px;padding-top:12px;border-top:1px solid var(--border);font-size:.9rem}

/* ---- The Add / Edit service popup in the drivers' app (_service_form.php): the office's form layout it needs ---- */
/* the drivers' app has none of the office's form layout (admin.css): the popup brings what it uses, here only */
#svcDlg .field{margin-bottom:12px}
#svcDlg input,#svcDlg select,#svcDlg textarea{margin-bottom:0}
#svcDlg .lede{margin:0 0 12px;color:var(--muted);font-size:.84rem;line-height:1.4}
#svcDlg .dlg-head h3{font-size:1.1rem;color:var(--heading)}
/* (2026-10-13: "+ Add a new part" was hidden here, the office's job; the owner: drivers add a new part too) */
#svcDlg .svc-totals{display:flex;justify-content:flex-end;gap:16px;flex-wrap:wrap;margin:-4px 0 14px;font-size:.82rem;color:var(--muted)}
#svcDlg .svc-totals b{color:var(--heading);font-variant-numeric:tabular-nums}
#svcDlg .svc-totals .tot{font-size:.95rem;font-weight:700;color:var(--heading)}
#svcDlg .svc-pick{display:block;font-size:.74rem;color:var(--danger);margin-top:4px}
#svcDlg .svc-note{display:block;font-size:.76rem;color:var(--muted);margin-top:8px}
#svcDlg select.needs-pick{border-color:var(--danger)}
.due-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.due-bar label{display:flex;gap:8px;align-items:center;margin:0;font-size:.9rem}
.due-bar input{width:22px;height:22px;margin:0;accent-color:var(--accent)}
.due-bar .btn{width:auto;flex:1 1 auto}
.due-bar small{flex:1 1 100%;color:var(--muted);font-size:.8rem}
.due-tick{flex:0 0 auto;margin:0;display:flex;align-items:center;padding:2px 0}
.due-tick input{width:24px;height:24px;margin:0;accent-color:var(--accent)}

/* tablets (shared.css "tablets"): the column widens, the home cards and the due list go two across, and from 900px a form
   is two columns of fields with the long pieces (dispatch orders, notes, photos, the save button) across both */
@media(min-width:600px){
  .fwrap{max-width:1000px}
  .tiles.home{grid-template-columns:repeat(2,minmax(0,1fr))}
  .due-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;align-items:start}   /* Service due: a card a vehicle, two across */
}
@media(min-width:1000px){.tiles.home,.due-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:600px){   /* a fold open too (900px until 2026-10-26) */
  /* a form that opts in (form.card.cols: Fuel up / Service) is two columns of fields: a pair row, a plain field wrapper or the
     photo buttons take a column, everything else (the mode switch, a bare label, notes, the save button) runs across both.
     A [data-only] block is see-through so its fields sit in the grid too, unless it is hidden. */
  .fwrap form.card.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;align-items:start}
  .fwrap form.card.cols>*,.fwrap form.card.cols>[data-only]>*{grid-column:1/-1;min-width:0}
  .fwrap form.card.cols>[data-only]:not([hidden]){display:contents}
  .fwrap form.card.cols>.row.pair,.fwrap form.card.cols>[data-only]>.row.pair,.fwrap form.card.cols>.photobtns,.fwrap form.card.cols>.field,.fwrap form.card.cols>[data-only]>.field,
  .fwrap form.card.cols>div:not([class]):not([style]),.fwrap form.card.cols>[data-only]>div:not([class]):not([style]){grid-column:auto}
}
/* a time off row's Edit and Cancel side by side (timeoff.php) */
.to-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.to-acts form{margin:0}
/* the header's bell (notifications.php): the person's own notices, the unread count on it */
.fh-bell{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:#fff;flex:0 0 auto}
.fh-bell:active{background:rgba(255,255,255,.18)}
.fh-bell svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fh-bell .badge{position:absolute;top:3px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e5484d;color:#fff;font-size:.68rem;font-weight:700;line-height:18px;text-align:center}
/* What notifies me: a pick per category, what it covers under its name */
/* notifications on to use the app (pwa.js, where the office dispatches): over everything until this phone has them */
.push-gate{position:fixed;inset:0;z-index:400;background:var(--card,#fff);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px 22px calc(24px + env(safe-area-inset-bottom));text-align:center;overflow:auto}
.push-gate h2{margin:0;color:var(--heading);font-size:1.3rem}
.push-gate p{margin:0;max-width:360px;color:var(--muted);line-height:1.45}
.push-gate ol{margin:0;max-width:360px;text-align:left;line-height:1.5;padding-left:20px}
.push-gate .btn{width:100%;max-width:360px}
.push-gate a.out{color:var(--muted);font-size:.9rem}
.gated{overflow:hidden}
.push-gate .pg-icon{width:64px;height:64px;border-radius:50%;background:#e3f1ea;color:#2d6a4f;display:flex;align-items:center;justify-content:center}
.push-gate .pg-icon svg{width:34px;height:34px}
.push-gate .btn{min-height:52px;font-size:1.05rem}
.push-gate .pg-next{max-width:360px;padding:12px 14px;border-radius:12px;background:#fff7e0;color:#5a4a00;text-align:left;line-height:1.45;font-size:.92rem}
.push-gate .pg-allow{display:inline-block;padding:1px 8px;border-radius:6px;background:#1a73e8;color:#fff;font-weight:700}
.push-gate ol{background:#f6f6f8;border-radius:12px;padding:12px 14px 12px 34px}
.push-gate ol li{margin:3px 0}
.push-gate .pg-more{max-width:360px;width:100%;text-align:left}
.push-gate .pg-more summary{cursor:pointer;color:var(--accent,#2d6a4f);font-weight:700;padding:4px 0}
.push-gate .pg-small{font-size:.85rem}
.push-gate .pg-err{font-size:.8rem;color:#8a1c1c}
.push-gate .pg-reopen{max-width:360px;padding:12px 14px;border-radius:12px;background:#fff7e0;color:#5a4a00;line-height:1.45;font-size:.92rem}
/* the one search (bsFind, shared.js): their own records, from every screen's header */
.fh-find{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:#fff;flex:0 0 auto;margin-left:auto}
.fh-find:active{background:rgba(255,255,255,.18)}
.fh-find svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fh-find+.fh-refresh{margin-left:0}
.find-page{display:flex;gap:8px;align-items:center;padding:10px}
.find-page input{flex:1;min-width:0;margin:0}
.find-page button{width:auto;margin:0}
.find-card{padding:4px 0}

/* a ticket's page (tickets.php?id=): its details beside its photos from a fold's width up (owner, 2026-10-26: Ryan's iPhone fold,
   "this info on one side of my phone and the picture of the ticket on the other side"); the details follow their column's
   width (two facts across where three would not fit) */
@media(min-width:600px){
  .tkt-view{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
  .tkt-view .tkt-info{container-type:inline-size;min-width:0}
  .tkt-view .tkt-photos{position:sticky;top:12px;margin-top:0;min-width:0}
  .tkt-view .tkt-photos h2{margin-top:0}
  .tkt-view .pgal.big{grid-template-columns:minmax(0,1fr)}   /* the paper read whole beside the details, not a cropped tile */
  .tkt-view .pgal.big img{aspect-ratio:auto;height:auto;object-fit:contain}
}
@container (max-width:460px){.tkt-info .tkt-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}