/* ══════════════════════════════════════════════════════════════════════════
   Escargo Garage App — LOCKED design system
   Visual contracts: escargo-refs/ref-team-parts-hd.png, ref-payroll-hd.png,
   ref-home-hd.png. Do not restyle without founder approval.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --forest:#073B24; --forest-side:#0A3D26; --forest-deep:#052C1B;
  --nav-active:#1C5238;
  --lime:#80BF20; --lime-hover:#8FD226;
  --ink:#232323; --text:#3E443F; --muted:#6E756F; --faint:#9AA29B;
  --page:#F7F8F6; --panel:#FFFFFF; --border:#E7E9E4; --border-soft:#EFF1EC;
  --red-bg:#FDE8E8; --red:#C2402F;
  --amber-bg:#FCF0D8; --amber:#B07A18;
  --green-bg:#E4F3D4; --green:#3E7A16;
  --blue:#2F6FBF; --blue-bg:#EDF4FC;
  --radius:10px; --radius-sm:8px;
  --sidebar-w:257px;
  font-size:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--text);background:var(--page);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.visually-hidden{position:absolute;left:0;top:0;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ── App shell ─────────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.shell.payroll-shell{--sidebar-w:216px}

/* Sidebar */
.side{background:var(--forest-side);color:#fff;display:flex;flex-direction:column;padding:22px 14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side-logo{margin:6px 6px 30px}
.side-logo .tile{background:#fff;border-radius:34px;padding:10px 22px 10px 12px;display:inline-flex;align-items:center}
.side-logo .tile img{height:44px;width:auto;object-fit:contain}
.side-logo.lockup{padding-left:6px}
.side-logo.lockup img{height:40px;width:auto;object-fit:contain;filter:brightness(0) invert(1)}
.side-logo.lockup .garage-sub{display:block;color:var(--lime);font-weight:800;font-size:12px;letter-spacing:.42em;margin:4px 0 0 4px}
.nav-list{list-style:none;display:flex;flex-direction:column;gap:4px}
.nav-item{display:flex;align-items:center;gap:14px;width:100%;min-height:46px;padding:10px 14px;border-radius:8px;color:#EAF1EA;font-size:15px;font-weight:600;text-align:left}
.nav-item svg{width:21px;height:21px;flex-shrink:0}
.nav-item:hover{background:rgba(255,255,255,.07)}
.nav-item[aria-current="page"]{background:var(--nav-active);color:#fff}
.payroll-shell .nav-item[aria-current="page"]{background:var(--lime);color:var(--forest-deep)}
.nav-item.soon{color:#8FA396;cursor:pointer}
.nav-item.soon .soon-tag{font-size:12px;font-weight:500;color:#8FA396}

/* Top bar */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:18px;padding:0 28px;min-height:76px;position:sticky;top:0;z-index:30}
/* .biz needed 150px inside a 119px box at 375px (scrollWidth 150, clientWidth 119), so
   a long garage name spilled out of its own cell. It keeps nowrap — a name broken across
   two lines in the top bar reads badly — but may now shrink and ellipsize.
   This was NOT the source of the page being 383 wide; that was .team-grid below. Kept
   because text overflowing its box is a defect on its own terms. */
.topbar .biz{font-size:20px;font-weight:800;color:var(--ink);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.search-wrap{flex:1;display:flex;justify-content:center;position:relative}
.search-box{width:min(430px,100%);position:relative}
.search-box input{width:100%;min-height:44px;padding:10px 14px 10px 42px;border:1px solid var(--border);border-radius:8px;font:inherit;font-size:15px;color:var(--ink);background:#fff}
.search-box input::placeholder{color:var(--faint)}
.search-box .s-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
.search-results{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);width:min(520px,92vw);background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 14px 40px rgba(7,59,36,.14);max-height:70vh;overflow-y:auto;z-index:60}
.search-results h4{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 16px 4px}
.search-results button{display:block;width:100%;text-align:left;padding:10px 16px;font-size:14px;border-radius:0}
.search-results button:hover,.search-results button.kb{background:var(--page)}
.search-results .s-empty{padding:18px 16px;color:var(--muted);font-size:14px}
.top-actions{display:flex;align-items:center;gap:14px}
.icon-btn{position:relative;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.icon-btn:hover{background:var(--page)}
.icon-btn svg{width:22px;height:22px}
.icon-btn .badge{position:absolute;top:2px;right:2px;background:var(--lime);color:var(--forest-deep);font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.profile-btn{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 6px;border-radius:8px}
.profile-btn:hover{background:var(--page)}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--forest);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.profile-btn .p-name{font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap}
.profile-btn .chev{width:16px;height:16px;color:var(--muted)}

/* Content */
.content{padding:28px 32px 48px;max-width:1560px;width:100%}
.page-head{display:flex;align-items:flex-start;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.page-head h1{font-size:33px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.page-head .sub{color:var(--muted);font-size:16px;margin-top:6px}
.page-head .head-actions{margin-left:auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap;min-width:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:8px;font-size:15px;font-weight:700;border:1px solid transparent}
.btn-lime{background:var(--lime);color:var(--forest-deep)}
.btn-lime:hover{background:var(--lime-hover)}
.btn-white{background:#fff;color:var(--ink);border-color:#D5D9D2}
.btn-white:hover{background:var(--page)}
.btn-danger{background:var(--red);color:#fff}
.btn-sm{min-height:32px;padding:5px 14px;font-size:13px;border-radius:7px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* Panels */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.panel h2{font-size:19px;font-weight:800;color:var(--ink);margin-bottom:16px}
.panel .p-sub{color:var(--muted);font-size:13px;margin:-12px 0 14px}
.grid{display:grid;gap:20px}
/* 330px + 1fr + 230px is a 560px MINIMUM, and fixed tracks cannot shrink. In a 283px
   content column it reported offsetWidth 283 against scrollWidth 305, and that surfaced
   as the whole document measuring 383 against a 375 client — the Add team member button
   and the metric label sitting at x=383 were downstream of this, not causes.
   The three-column desktop layout is unchanged; below 760px, where the tracks can no
   longer fit, the panels stack. */
.team-grid{grid-template-columns:330px 1fr 230px;align-items:start}
.team-grid > *{min-width:0}
@media (max-width:760px){.team-grid{grid-template-columns:1fr}}
.cards-4{grid-template-columns:repeat(4,1fr)}
.payroll-grid{grid-template-columns:1fr 300px;align-items:start}

/* Team on shift */
.staff-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 2px;border-bottom:1px solid var(--border-soft);border-radius:6px}
.staff-row:hover{background:var(--page)}
.staff-row:last-of-type{border-bottom:0}
.staff-row img,.staff-row .ph{width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--page);color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:700}
.staff-row .s-name{font-weight:700;color:var(--ink);font-size:15px}
.staff-row .s-meta{color:var(--muted);font-size:12.5px}
.staff-row .s-meta b{color:var(--green);font-weight:700}
/* A non-wrapping flex row holding View timesheets and Add team member: it needed 283px
   inside a 238px panel (offsetWidth 238, scrollWidth 283), which is where the Team page
   was manufacturing the 8px that made the whole document 383 wide at a 375 viewport.
   Wrapping keeps both actions at full label and full touch target; on desktop there is
   room and they stay on one line. */
.panel .panel-foot{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}

/* Parts table */
.parts-table{width:100%;border-collapse:collapse}
.parts-table th{font-size:12px;color:var(--muted);font-weight:600;text-align:left;padding:6px 8px;border-bottom:1px solid var(--border-soft)}
.parts-table td{padding:14px 8px;border-bottom:1px solid var(--border-soft);vertical-align:middle;font-size:14px}
.parts-table tr:last-child td{border-bottom:0}
.parts-table tr.row-link{cursor:pointer}
.parts-table tr.row-link:hover td{background:var(--page)}
.part-name{font-weight:700;color:var(--ink);font-size:15px}
.part-sub{color:var(--muted);font-size:13px;line-height:1.5}
.reg-chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--blue);border-radius:6px;padding:4px 10px;font-weight:800;font-size:13.5px;color:var(--ink);background:#fff;white-space:nowrap}
.reg-chip .plate{background:var(--blue);color:#fff;font-size:8px;border-radius:2px;padding:1px 3px;font-weight:700}
.chip{display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:7px;white-space:nowrap}
.chip-high{background:var(--red-bg);color:var(--red)}
.chip-medium{background:var(--amber-bg);color:var(--amber)}
.chip-green{background:var(--green-bg);color:var(--green)}
.chip-grey{background:var(--page);color:var(--muted);border:1px solid var(--border)}
.chip-blue{background:var(--blue-bg);color:var(--blue)}
.price{font-weight:700;color:var(--ink);white-space:nowrap}
.opt-link{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;color:var(--text);font-weight:600;padding:6px 8px;border-radius:6px;white-space:nowrap}
.ct-page .opt-link{min-height:44px}
.opt-link:hover{background:var(--page)}
.opt-link svg{width:13px;height:13px;color:var(--muted)}
.action-stack{display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:96px}
.action-stack .btn{min-height:30px;padding:4px 12px;font-size:13px}

/* Order tracking */
.order-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;width:100%;padding:6px 2px 2px;border-radius:8px}
.order-card:hover{background:var(--page)}
.order-illus{position:relative;width:104px;height:104px;color:var(--ink);margin:14px 0 10px}
.order-illus svg.box{width:104px;height:104px}
.order-illus .truck-dot{position:absolute;right:-6px;bottom:2px;width:40px;height:40px;border-radius:50%;background:var(--lime);color:var(--forest-deep);display:flex;align-items:center;justify-content:center}
.order-illus .truck-dot svg{width:22px;height:22px}
.order-card .o-title{font-size:16px;color:var(--ink)}
.order-card .o-title b{font-weight:800}
.order-card .o-line{color:var(--muted);font-size:14px}
.order-card + .btn{width:100%;margin-top:14px}

/* Work log */
.worklog{grid-column:1 / -1}
.metric-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
/* A .metric spends 116px before any text: 22px padding each side, a 56px icon that is
   flex-shrink:0, and a 16px gap. In a 119px column that leaves the label exactly 3px —
   measured: the text SPAN reported clientWidth 3 against scrollWidth 68, so "Jobs
   completed" spilled its cell and carried the Team document to 381 against a 375 client.
   Below 600px each metric takes the full row, which gives the text 122px and lets it
   wrap. Desktop and tablet keep their four- and two-column arrangements. */
@media (max-width:600px){
  .metric-row{grid-template-columns:1fr}
  .metric{padding:14px 16px;gap:12px}
  .metric .m-label{overflow-wrap:anywhere}
}
.metric{display:flex;align-items:center;gap:16px;padding:14px 22px;border-left:1px solid var(--border-soft);text-align:left;border-radius:8px;width:100%;min-width:0}
.metric>span:last-child{min-width:0}
.metric:first-child{border-left:0}
.metric:hover{background:var(--page)}
.metric .m-icon{width:56px;height:56px;border-radius:50%;background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.metric .m-icon svg{width:26px;height:26px}
.metric .m-label{color:var(--text);font-size:14px;font-weight:600}
.metric .m-value{font-size:23px;font-weight:800;color:var(--ink);line-height:1.2}
.metric .m-sub{color:var(--muted);font-size:12.5px}
.metric .m-sub.pos{color:var(--green)}

/* Payroll */
.period-btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--border);background:#fff;border-radius:8px;min-height:44px;padding:9px 16px;font-weight:700;font-size:15px;color:var(--ink)}
.period-btn svg{width:18px;height:18px;color:var(--muted)}
.sum-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;width:100%;text-align:left}
.sum-card:hover{background:var(--page)}
.sum-card .m-icon{width:46px;height:46px;border-radius:50%;background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sum-card .m-icon svg{width:22px;height:22px}
.sum-card .s-label{color:var(--muted);font-size:13.5px;font-weight:600}
.sum-card .s-value{font-size:22px;font-weight:800;color:var(--ink)}
.pay-table{width:100%;border-collapse:collapse}
/* phones: a wide table scrolls inside its own panel, never the page (Garage OS visual pass 2026-09-02) */
@media (max-width:1100px){ .panel:has(.pay-table){overflow-x:auto} .pay-table{min-width:560px} }
.pay-table th{font-size:12px;color:var(--muted);font-weight:600;text-align:right;padding:8px;border-bottom:1px solid var(--border-soft)}
.pay-table th:first-child{text-align:left}
.pay-table td{padding:13px 8px;font-size:14px;border-bottom:1px solid var(--border-soft);text-align:right;white-space:nowrap}
.pay-table td:first-child{text-align:left;white-space:normal}
.pay-table tr:last-child td{border-bottom:0}
.pay-table .e-name{font-weight:700;color:var(--ink)}
.pay-table .e-role{color:var(--muted);font-size:13px}
.checks li{list-style:none;display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14.5px;color:var(--text)}
.checks .c-on{width:22px;height:22px;border-radius:50%;background:var(--green-bg);color:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.checks .c-on svg{width:13px;height:13px}
.checks .c-off{width:22px;height:22px;border-radius:50%;border:2px solid #C9CFC8;flex-shrink:0}
.recent-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:13px 6px;border-bottom:1px solid var(--border-soft);border-radius:6px;font-size:14.5px}
.recent-row:hover{background:var(--page)}
.recent-row:last-of-type{border-bottom:0}
.recent-row .r-period{font-weight:700;color:var(--ink);min-width:170px}
.recent-row .r-emp{color:var(--muted)}
.recent-row .r-total{margin-left:auto;font-weight:800;color:var(--ink)}
.recent-row .chev{width:16px;height:16px;color:var(--muted)}
.lock-panel{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:var(--text);font-size:14.5px;padding:30px 18px;width:100%}
.lock-panel:hover{background:var(--page)}
.lock-panel svg{width:34px;height:34px;color:var(--ink)}

/* Home */
.home-cards .sum-card .s-value{font-size:24px}
.home-grid{grid-template-columns:1.55fr 1fr;align-items:start}
/* a grid child must never dictate the page width: wide content (job refs,
   pipeline steps) scrolls inside its own panel instead (2026-09-02, the 9px
   phone blowout on /garage/home) */
.home-grid>*{min-width:0}
.home-col{min-width:0}
.home-col .panel{min-width:0}
@media (max-width:560px){.pipeline{overflow-x:auto;justify-content:flex-start;gap:6px;scrollbar-width:none}.pipeline::-webkit-scrollbar{display:none}}
.job-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 4px;border-bottom:1px solid var(--border-soft);border-radius:6px;font-size:14.5px;min-width:0}
/* the meta segment yields, the reg + status chip never push the page wider
   (2026-09-02: 320px blowout — the chip was forced past the viewport) */
.job-row .j-meta{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.job-row .chip{flex:0 0 auto;margin-left:auto}
.job-row:hover{background:var(--page)}
.job-row:last-of-type{border-bottom:0}
.job-row .j-reg{font-weight:800;color:var(--ink)}
.job-row .j-meta{color:var(--muted)}
.job-row .chip{margin-left:auto}
.attn-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 4px;border-bottom:1px solid var(--border-soft);border-radius:6px}
.attn-row:hover{background:var(--page)}
.attn-row:last-of-type{border-bottom:0}
.attn-row .a-icon{width:40px;height:40px;border-radius:10px;background:var(--page);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--forest);flex-shrink:0}
.attn-row .a-icon svg{width:20px;height:20px}
.attn-row .a-title{font-weight:700;color:var(--ink);font-size:14.5px}
.attn-row .a-sub{color:var(--muted);font-size:12.5px}
.attn-row .chev{margin-left:auto;width:16px;height:16px;color:var(--muted)}
.pipeline{display:flex;align-items:flex-start;justify-content:space-between;gap:2px;margin-top:8px}
.pipe-step{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);flex:1;text-align:center}
.pipe-step .p-dot{width:44px;height:44px;border-radius:50%;border:2px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--forest)}
.pipe-step .p-dot svg{width:20px;height:20px}
.pipe-step .p-count{font-size:15px;font-weight:800;color:var(--ink)}
.panel .view-link{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--forest);padding:6px 8px;border-radius:6px;min-height:40px;display:inline-flex;align-items:center}
.panel .view-link:hover{background:var(--page)}
.panel-head{display:flex;align-items:center;margin-bottom:10px}
.panel-head h2{margin-bottom:0}

/* Drawers & modals */
.overlay{position:fixed;inset:0;background:rgba(7,30,18,.44);z-index:80;display:flex;justify-content:flex-end}
.overlay.center{align-items:center;justify-content:center;padding:24px}
.drawer{background:#fff;width:min(460px,94vw);height:100%;overflow-y:auto;padding:26px;box-shadow:-18px 0 50px rgba(5,44,27,.25);display:flex;flex-direction:column;gap:16px}
.drawer.wide{width:min(680px,96vw)}
.modal{background:#fff;border-radius:12px;width:min(560px,94vw);max-height:92vh;overflow-y:auto;padding:26px;box-shadow:0 30px 80px rgba(5,44,27,.35);display:flex;flex-direction:column;gap:16px}
.dlg-head{display:flex;align-items:flex-start;gap:12px}
.dlg-head h3{font-size:19px;font-weight:800;color:var(--ink)}
.dlg-head .close{margin-left:auto;width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:20px}
.dlg-head .close:hover{background:var(--page)}
.dlg-sub{color:var(--muted);font-size:14px;margin-top:-8px}
.dlg-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.kv{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--border-soft);font-size:14.5px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted)}
.kv .v{font-weight:700;color:var(--ink);text-align:right}
/* phones: long values (tokens, emails, references) wrap instead of dragging the page wide */
@media (max-width:640px){ .kv{flex-wrap:wrap} .kv .v{overflow-wrap:anywhere;min-width:0} .panel{min-width:0} }
.note-box{background:var(--page);border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-size:13.5px;color:var(--text)}
.note-box.warn{background:var(--amber-bg);border-color:#EAD9AE;color:var(--amber)}
.note-box.ok{background:var(--green-bg);border-color:#CFE8B4;color:var(--green)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13.5px;font-weight:700;color:var(--ink)}
.field input,.field select,.field textarea{min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font:inherit;font-size:14.5px;color:var(--ink)}
.field textarea{min-height:76px;resize:vertical}
.field .err{color:var(--red);font-size:12.5px}
.field-check{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.field-check input{width:20px;height:20px;min-height:20px;margin-top:2px;accent-color:var(--forest)}
.f-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.menu{position:fixed;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 40px rgba(7,59,36,.16);min-width:230px;padding:6px;z-index:90}
.menu button{display:flex;width:100%;text-align:left;padding:11px 14px;font-size:14.5px;border-radius:7px;gap:10px;align-items:center}
.menu button:hover{background:var(--page)}
.menu hr{border:0;border-top:1px solid var(--border-soft);margin:5px 0}
.notif{display:flex;gap:12px;width:100%;text-align:left;padding:12px 8px;border-radius:8px;border-bottom:1px solid var(--border-soft)}
.notif:hover{background:var(--page)}
.notif .n-dot{width:9px;height:9px;border-radius:50%;background:var(--lime);margin-top:6px;flex-shrink:0}
.notif.read .n-dot{background:var(--border)}
.notif .n-title{font-weight:700;color:var(--ink);font-size:14px}
.notif .n-sub{color:var(--muted);font-size:12.5px}
.empty{padding:34px 20px;text-align:center;color:var(--muted);font-size:14.5px}
.empty b{color:var(--ink);display:block;margin-bottom:6px;font-size:16px}
.comp-table{width:100%;border-collapse:collapse;font-size:13px}
.comp-table th{text-align:left;color:var(--muted);font-weight:600;font-size:11.5px;padding:6px;border-bottom:1px solid var(--border-soft)}
.comp-table td{padding:9px 6px;border-bottom:1px solid var(--border-soft);vertical-align:top}
.audit-row{padding:11px 4px;border-bottom:1px solid var(--border-soft);font-size:13.5px}
.audit-row b{color:var(--ink)}
.audit-row .a-when{color:var(--muted);font-size:12px}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--forest);color:#fff;padding:13px 22px;border-radius:10px;font-weight:600;font-size:14.5px;z-index:120;box-shadow:0 14px 40px rgba(5,44,27,.4)}
.toast.err{background:var(--red)}

/* Responsive (usable, desktop-locked first) */
@media (max-width:1180px){
  .team-grid{grid-template-columns:1fr 1fr}
  .team-grid .panel:nth-child(3){grid-column:span 2}
  .home-grid,.payroll-grid{grid-template-columns:1fr}
  .cards-4{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .shell{grid-template-columns:64px 1fr}
  .side{padding:16px 8px}
  .side-logo .tile{padding:8px}
  .side-logo .tile img{height:26px}
  .side-logo.lockup .garage-sub{display:none}
  .nav-item span{display:none}
  .nav-item{justify-content:center;padding:10px}
  .topbar{padding:0 14px;gap:10px}
  .topbar .biz{font-size:16px}
  .profile-btn .p-name,.profile-btn .chev{display:none}
  .content{padding:18px 14px 40px}
  .team-grid,.cards-4{grid-template-columns:1fr}
  .team-grid .panel:nth-child(3){grid-column:auto}
  .metric-row{grid-template-columns:1fr 1fr}
  .metric{border-left:0}
  .pay-table-wrap,.parts-wrap{overflow-x:auto}
  .page-head h1{font-size:26px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* tables always scroll inside their wrappers — page never scrolls sideways */
.parts-wrap,.pay-table-wrap{overflow-x:auto}
.parts-table{min-width:640px}
.pay-table{min-width:720px}

/* lock-page line fitting (match reference wrapping) */
.btn{white-space:nowrap}
.staff-row .s-meta{font-size:12px;white-space:nowrap}
.staff-row .s-name{white-space:nowrap}
.part-name{white-space:nowrap}
.panel .panel-foot .btn{padding:8px 12px;font-size:13.5px}
.team-grid>*,.payroll-grid>*,.payroll-grid>*>*{min-width:0}
.parts-wrap,.pay-table-wrap{overflow-x:auto}
.nbk-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
@media (max-width:1100px){.nbk-grid{grid-template-columns:1fr}}

/* ══ Step 4 ops pages: bookings, jobs board, job detail, inspection, customers ══ */
.seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#fff}
.seg button{padding:9px 16px;font-weight:600;font-size:14px;border-right:1px solid var(--border);color:var(--text)}
.seg button:last-child{border-right:0}
.seg button[aria-current="page"]{background:var(--forest);color:#fff}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
.filters select,.filters input{min-height:40px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font:inherit;font-size:14px;background:#fff;color:var(--ink)}

/* Kanban board */
/* MOBILE JOBS LIST (defect found by real screenshot QA, 2026-08-27): app-ops.js
   renders .jobs-mobile/.mj-* markup on every width, but NO stylesheet defined it —
   so every garage saw an unstyled text list stacked ABOVE the kanban. One surface
   per width: the list on phones, the board on desktop. */
.jobs-mobile{display:none}
.mj-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.mj-list{display:flex;flex-direction:column;gap:10px}
.mj-row{display:block;background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--ink)}
.mj-row:active{border-color:#CBD3C8}
.mj-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mj-reg{font-weight:800;font-size:15px}
.mj-stage{font-size:12px;font-weight:700;color:var(--muted);background:var(--page);border:1px solid var(--border);border-radius:999px;padding:2px 10px;white-space:nowrap}
.mj-stage.cust{color:#14532d;background:#ecf7ec;border-color:#cde8cd}
.mj-stage.money{color:#7c2d12;background:#fff3e8;border-color:#f3ddc8}
.mj-sub{font-size:13px;color:var(--muted);margin-top:4px}
.mj-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.mj-next{margin-left:auto;font-size:12px;color:var(--muted)}
.mj-empty{background:#fff;border:1px dashed var(--border);border-radius:10px;padding:22px;text-align:center;color:var(--muted)}
.kanban{display:flex;gap:14px;overflow-x:auto;padding-bottom:14px}
/* AFTER the .kanban base rule — equal specificity, so cascade order is the switch. */
@media (max-width:760px){.jobs-mobile{display:block}.kanban{display:none}}
.kan-col{flex:0 0 236px;background:var(--page);border:1px solid var(--border);border-radius:10px;padding:12px;min-height:140px}
.kan-col.drop{outline:2px dashed var(--lime);outline-offset:-4px;background:#f0f6e8}
.kan-col > h3{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.kan-col > h3 .cnt{background:#fff;border:1px solid var(--border);border-radius:999px;padding:1px 9px;color:var(--ink);font-weight:800}
.kan-card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:10px;cursor:grab;text-align:left;width:100%;display:block}
.kan-card:hover{border-color:#CBD3C8}
.kan-card:active{cursor:grabbing}
.kan-card.dragging{opacity:.45}
.kan-card .kc-reg{font-weight:800;color:var(--ink);font-size:14.5px}
.kan-card .kc-meta{color:var(--muted);font-size:12.5px;margin-top:2px}
.kan-card .kc-foot{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.kan-empty{color:var(--faint);font-size:13px;padding:6px 2px}

/* Tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:22px;overflow-x:auto}
.tab{padding:12px 18px;font-weight:700;font-size:14.5px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tab[aria-current="page"]{color:var(--ink);border-bottom-color:var(--forest)}
.tab:hover{color:var(--ink)}

/* Job detail */
.job-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.stage-track{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 4px}
.stage-pip{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--page);border:1px solid var(--border);color:var(--muted)}
.stage-pip.done{background:var(--green-bg);color:var(--green);border-color:#CFE8B4}
.stage-pip.now{background:var(--forest);color:#fff;border-color:var(--forest)}
.internal-note{background:#FBF6E9;border:1px solid #EBDDBB;border-radius:8px;padding:12px 14px;font-size:13.5px;color:#6b5a2a;margin-bottom:10px}
.internal-note .n-by{color:#94824f;font-size:12px;margin-top:4px}
.cust-preview{background:var(--green-bg);border:1px solid #CFE8B4;border-radius:8px;padding:12px 14px;font-size:14px;color:#37610f}

/* Data table */
.dt-wrap{overflow-x:auto}
.dt{width:100%;border-collapse:collapse;min-width:820px}
.dt th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--border-soft);white-space:nowrap}
.dt td{padding:15px 12px;border-bottom:1px solid var(--border-soft);font-size:14px;vertical-align:middle}
.dt tbody tr{cursor:pointer}
.dt tbody tr:hover td{background:var(--page)}
.dt .c-name{font-weight:700;color:var(--ink)}

/* Inspection */
.check-item{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--border-soft)}
.check-item:last-child{border-bottom:0}
.check-item .ci-label{font-weight:600;color:var(--ink)}
.check-item .ci-status{margin-left:auto;display:flex;gap:6px}
.chip-btn{border:1px solid var(--border);border-radius:6px;padding:5px 11px;font-size:12.5px;font-weight:600;background:#fff;color:var(--text)}
.chip-btn[aria-pressed="true"].ok{background:var(--green);color:#fff;border-color:var(--green)}
.chip-btn[aria-pressed="true"].warn{background:var(--amber);color:#fff;border-color:var(--amber)}
.chip-btn[aria-pressed="true"].bad{background:var(--red);color:#fff;border-color:var(--red)}
.finding{border:1px solid var(--border);border-radius:8px;padding:14px;margin-bottom:12px}
.finding .f-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.finding .f-title{font-weight:700;color:var(--ink)}
.finding .f-note{font-size:13.5px;color:var(--text);margin-top:4px}
.finding .f-int{font-size:12.5px;color:#6b5a2a;margin-top:6px}
.sev{font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;text-transform:uppercase;letter-spacing:.02em}
.sev-high{background:var(--red-bg);color:var(--red)}
.sev-medium{background:var(--amber-bg);color:var(--amber)}
.sev-low{background:var(--green-bg);color:var(--green)}

/* Booking rows */
.book-day{margin-bottom:8px;font-weight:800;color:var(--ink);font-size:15px;padding:14px 2px 6px}
.book-row{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;width:100%;text-align:left;padding:13px 8px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;background:#fff}
.book-row:hover{border-color:#CBD3C8;background:var(--page)}
.book-row .bk-time{font-weight:800;color:var(--ink)}
.book-row .bk-veh{font-weight:700;color:var(--ink)}
.book-row .bk-meta{color:var(--muted);font-size:13px}
.book-row .bk-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* A grid child's default min-width is auto, not 0, so the middle cell refuses to
   shrink below its content and the row pushes the chip cluster past the viewport.
   Measured on a real 375px viewport (CDP device metrics, screen.width 375): the
   cancelled-bookings list gave scrollWidth 393 against clientWidth 375, with
   .bk-right ending at x=394. min-width:0 lets the text cell compress; the chips then
   wrap on their own because .bk-right is already flex-wrap:wrap. */
.book-row > *{min-width:0}
.book-row .bk-veh,.book-row .bk-meta{overflow-wrap:anywhere}
/* Below the DS phone breakpoint the three-column row cannot hold time + details +
   chips. Time and details share the top line, chips drop underneath and align left —
   the same information, no horizontal scroll. */
@media (max-width:480px){
  .book-row{grid-template-columns:56px 1fr;gap:10px}
  .book-row .bk-right{grid-column:1 / -1;justify-content:flex-start}
}
.cap-bar{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-bottom:14px}
.cap-track{flex:1;max-width:220px;height:8px;border-radius:999px;background:var(--border);overflow:hidden}
.cap-fill{height:100%;background:var(--lime)}

/* ══ Bookings calendar + staff timetable (scheduling module) ══════════════ */
.subtabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:-6px 0 20px;overflow-x:auto}
.subtab{padding:11px 16px;font-weight:700;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.subtab[aria-current="page"]{color:var(--ink);border-bottom-color:var(--forest)}
.subtab:hover{color:var(--ink)}

/* Time-grid calendar (staff / bays / day) */
.calwrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px;background:#fff}
.calgrid{display:grid;min-width:760px}
.cal-head{display:contents}
.cal-colhead{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);padding:12px 10px;font-weight:800;color:var(--ink);font-size:13.5px;text-align:center;z-index:2}
.cal-colhead .sub{font-weight:500;color:var(--muted);font-size:12px}
.cal-timecol{border-right:1px solid var(--border-soft)}
.cal-time{height:52px;padding:2px 8px;font-size:11.5px;color:var(--muted);text-align:right;border-bottom:1px solid var(--border-soft)}
.cal-cell{height:52px;border-bottom:1px solid var(--border-soft);border-right:1px solid var(--border-soft);position:relative;cursor:pointer}
.cal-cell:hover{background:#f2f7ec}
.cal-cell.closed{background:repeating-linear-gradient(45deg,#f4f5f2,#f4f5f2 6px,#eceee9 6px,#eceee9 12px);cursor:not-allowed}
.cal-cell.closed:hover{background:repeating-linear-gradient(45deg,#f4f5f2,#f4f5f2 6px,#eceee9 6px,#eceee9 12px)}
.cal-cell.brk{background:#fbf6e9}
.cal-cell.off{background:#f6eeee}
.cal-book{position:absolute;left:3px;right:3px;top:2px;background:var(--forest);color:#fff;border-radius:6px;padding:5px 8px;font-size:12px;overflow:hidden;z-index:1;cursor:grab;border-left:3px solid var(--lime)}
.cal-book.src-website{border-left-color:var(--lime)}
.cal-book.src-phone{border-left-color:#5aa9e6}
.cal-book.st-requested{background:var(--amber);color:#fff}
.cal-book .cb-reg{font-weight:800}
.cal-book .cb-svc{opacity:.9}

/* Schedule week grid (staff × weekday) */
.schedwrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px;background:#fff}
.sched{width:100%;border-collapse:collapse;min-width:820px}
.sched th{background:var(--page);font-size:12.5px;color:var(--muted);font-weight:700;padding:12px 10px;text-align:left;border-bottom:1px solid var(--border)}
.sched td{border-bottom:1px solid var(--border-soft);border-left:1px solid var(--border-soft);padding:6px;vertical-align:top;min-width:110px}
.sched td:first-child,.sched th:first-child{border-left:0;position:sticky;left:0;background:#fff;min-width:160px;z-index:1}
.sched .st-name{font-weight:700;color:var(--ink);font-size:14px}
.sched .st-role{color:var(--muted);font-size:12px}
.shift{background:var(--green-bg);border:1px solid #cfe8b4;border-radius:7px;padding:7px 9px;font-size:12.5px;color:#2f5210;cursor:pointer;font-weight:700}
.shift:hover{border-color:var(--green)}
.shift.draft{background:#eef1ec;border-color:var(--border);color:var(--muted);border-style:dashed}
.shift .sh-brk{font-weight:500;color:#6b7a4e;font-size:11px}
.shift-off{background:#f6eeee;border:1px solid #e7cfcf;border-radius:7px;padding:7px 9px;font-size:12px;color:var(--red);font-weight:700}
.cell-add{color:var(--faint);font-size:20px;text-align:center;padding:10px;border-radius:7px;width:100%}
.cell-add:hover{background:var(--page);color:var(--forest)}

/* availability slot chips (public + new booking) */
.slotgrid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.slot-chip{border:1px solid var(--border);border-radius:8px;background:#fff;padding:9px 15px;font-weight:700;font-size:14px;min-height:44px;color:var(--ink)}
.slot-chip:hover{border-color:var(--forest)}
.slot-chip.sel{background:var(--forest);color:#fff;border-color:var(--forest)}
.slot-none{color:var(--muted);font-size:14px;padding:12px 2px}
.hold-timer{display:inline-flex;align-items:center;gap:8px;background:var(--amber-bg);color:var(--amber);border:1px solid #ebd9ae;border-radius:8px;padding:8px 14px;font-weight:700;font-size:13.5px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin:6px 0 14px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.day-nav{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.day-nav button{width:40px;height:40px;border:1px solid var(--border);border-radius:8px;background:#fff;font-size:16px}
.day-nav .d-label{font-weight:800;color:var(--ink);font-size:16px;min-width:180px;text-align:center}
.affected{border:1px solid #ebd9ae;background:#fbf6e9;border-radius:8px;padding:12px;margin-bottom:10px;font-size:13.5px}
.affected .a-t{font-weight:700;color:var(--ink)}

/* ── RC A6 (S1 fix): topbar never clips below ~400px ─────────────────────────
   The workspace name was nowrap + unshrinkable and the search box refused to
   compress (flex min-width:auto), so topbar content overflowed its box on very
   narrow phones. Constraint-only fix: let the name truncate with an ellipsis and
   the search input genuinely shrink; icons keep their 44px touch targets.
   Keyboard focus order and aria labels are unchanged. */
@media (max-width:480px){
  .topbar{gap:8px}
  /* both flexible items may genuinely shrink; flexbox absorbs the shortage at ANY
     width ≥ the fixed items (icons + padding), so 320/360/375/390 all fit. The name
     truncates with an ellipsis (its nowrap base style makes the ellipsis work). */
  .topbar .biz{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .search-wrap{min-width:0}
  .search-box{min-width:0}
  .search-box input{font-size:14px;padding-left:38px}
  .top-actions{gap:6px;flex-shrink:0}
}

/* ── F2 (2026-07-17): bookings toolbar never overflows the page below ~416px ──
   Root cause: the Day/Week/Team segmented control (.seg) is ~416px and did not
   wrap or shrink, so it pushed the page sideways on phones. Constraint-only fix
   (no markup change, booking system untouched): tighten the control, let the day
   label size to content, and give .seg an internal scroll as a safety net. The
   calendar grid itself already scrolls inside .calwrap. Keyboard + a11y unchanged. */
@media (max-width:480px){
  .seg{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .seg button{padding:9px 12px;font-size:13px;white-space:nowrap}
  .day-nav{flex-wrap:wrap}
  .day-nav .d-label{min-width:0;flex:1 1 auto}
}

/* Staff access (invitations). Mobile-first: the grid is one column until there is
   genuinely room, so the invite form never forces horizontal scroll on a phone. */
/* Was `1fr` columns behind a @media (min-width:720px) breakpoint. Two faults, both
   measured at a real 1024px viewport (CDP, screen.width 1024): this grid lives in a
   panel only 289px wide, so a VIEWPORT breakpoint switched it to three columns that
   its container could never hold; and `1fr` carries min-width:auto, so the columns
   refused to shrink and pushed the fields to x=1054 inside a container ending at 954.
   Document scrollWidth 1213 against clientWidth 1009.
   auto-fit + minmax(0, …) makes the wrapping depend on the space actually available
   rather than on the window, and the 0 floor lets a column shrink when it must. */
.staff-inv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 10px; align-items: end; }
.staff-inv-grid > * { min-width: 0; }
.staff-inv-list { list-style: none; margin: 14px 0 0; padding: 0; }
.staff-inv-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
  padding: 10px 0; border-top: 1px solid var(--border, #e5e7eb); }
.staff-inv-main { min-width: 0; overflow-wrap: anywhere; }
.staff-inv-side { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ══ Garage responsive corrections, measured at a real 375px viewport ═════════
   Found with CDP device metrics on the signed-in garage. Each rule below fixes a
   normal-flow element that pushed the document wider than the client area, which is
   the only kind of overflow a user can actually scroll into. Fixed shell chrome that
   merely tracks the emulated scrollbar is NOT touched here — that gap disappears on a
   real phone, where scrollbars are overlays. */

/* Definition lists in the business profile: long values (a URL, a description) have no
   break opportunity and ran to x=431 against a 375 client. */
.panel dd { overflow-wrap: anywhere; min-width: 0; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   BUSINESS MOBILE NAVIGATION — founder commission 2026-08-15

   Phones get a REPLACEMENT, not a compression. Above 720px nothing changes: the desktop
   sidebar and the 900px icon rail (fine on a tablet) are untouched. Below 720px the rail
   is removed entirely — fifteen unlabelled icons in a 64px column is a squeezed desktop,
   and it permanently spent 17% of a 375px screen on chrome.

   Five real destinations, labels ALWAYS visible (an icon-only bar is the same mistake at
   the bottom of the screen instead of the side), 56px targets, and safe-area padding so
   the bar clears the iOS home indicator.
   ══════════════════════════════════════════════════════════════════════════════════════ */
.biz-mobnav { display: none; }

@media (max-width: 719px) {
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .content { padding: 16px 14px calc(84px + env(safe-area-inset-bottom)); }

  .biz-mobnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--forest-side, #06301d); border-top: 1px solid rgba(255,255,255,.14);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .biz-mobnav > a, .biz-mobnav summary {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; min-height: 56px; padding: 6px 2px;
    color: #c2d6c9; text-decoration: none; font-size: 11px; font-weight: 600;
    border-radius: 10px; list-style: none; cursor: pointer;
  }
  .biz-mobnav summary::-webkit-details-marker { display: none; }
  .biz-mobnav svg { width: 20px; height: 20px; flex: none; }
  .biz-mobnav > a.on, .biz-mobnav summary.on { background: rgba(128,191,32,.20); color: #fff; }
  /* Long labels must not knock the row out of alignment on a 375 screen. */
  .biz-mobnav span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .biz-more { flex: 1 1 0; display: flex; }
  /* The sheet lifts ABOVE the bar rather than pushing it, so the primary row never moves. */
  .biz-more[open] > .biz-more-sheet {
    position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom));
    max-height: 60vh; overflow-y: auto; background: #fff; color: var(--ink, #232323);
    border-top: 1px solid #e2e8e2; box-shadow: 0 -10px 30px rgba(0,0,0,.18);
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 12px;
    border-radius: 14px 14px 0 0;
  }
  .biz-more-sheet a {
    display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px;
    border-radius: 10px; text-decoration: none; color: var(--ink, #232323);
    font-size: 14px; font-weight: 600; background: #f6f8f6;
  }
  .biz-more-sheet a.on { background: rgba(128,191,32,.22); }
  .biz-more-sheet svg { width: 18px; height: 18px; flex: none; }

  /* Desktop assumptions that do not survive a phone. */
  .topbar .search-wrap { display: none; }
  .pay-table-wrap, .parts-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-head .head-actions { width: 100%; }
  /* A primary action on a phone is full-width, not a 120px button in a corner. */
  .page-head .head-actions .btn { width: 100%; justify-content: center; min-height: 48px; }
}


/* ── JOB DETAIL: CURRENT STAGE + LEGAL NEXT ACTIONS (2026-08-15; ported to this
   release 2026-08-27 — the markup shipped without these rules, so the stage header
   rendered as run-together inline text: "Current stageChecked in"). */
.jd-state{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;margin:14px 0 12px}
.jd-state-k{display:block;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.jd-state-v{display:block;font-size:21px;font-weight:800;color:var(--ink);margin-top:2px}
.jd-state-wait,.jd-state-none{margin-top:10px;font-size:13.5px;color:var(--muted)}
.jd-next{margin-top:14px;padding-top:14px;border-top:1px solid var(--border-soft)}
.jd-moves{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
/* Workshop targets: one-handed, beside a vehicle, possibly gloved. */
.jd-move{min-height:48px;flex:1 1 auto;min-width:44%}
.jd-note{margin-top:10px;font-size:12.5px;color:var(--muted)}
/* Demoted workflow context. Summary is a real 44px target in its own right. */
.job-workflow > summary{display:flex;align-items:center;min-height:44px;cursor:pointer;
  font-size:13.5px;font-weight:700;color:var(--forest);list-style:none}
.job-workflow > summary::-webkit-details-marker{display:none}
.job-workflow > summary::after{content:'';width:8px;height:8px;margin-left:8px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .15s}
.job-workflow[open] > summary::after{transform:rotate(-135deg)}
/* Desktop keeps the rail visible without needing the disclosure opened. */
@media (min-width:720px){
  .job-workflow > summary{display:none}
  .job-workflow > .stage-track{display:flex}
}

/* ── JOB DETAIL TABS: compact on a phone, full on desktop (2026-08-15) ─────────── */
.job-tabs-more{display:none}
@media (max-width:719px){
  .tabs .tab-secondary{display:none}
  .job-tabs-more{display:block;margin:-6px 0 14px}
  .job-tabs-more > summary{display:flex;align-items:center;min-height:44px;cursor:pointer;
    font-size:13.5px;font-weight:700;color:var(--forest);list-style:none}
  .job-tabs-more > summary::-webkit-details-marker{display:none}
  .job-tabs-more > summary::after{content:'';width:8px;height:8px;margin-left:8px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);transition:transform .15s}
  .job-tabs-more[open] > summary::after{transform:rotate(-135deg)}
  .job-tabs-sheet{display:flex;flex-direction:column;gap:2px;padding:6px 0 4px}
  /* Full-width rows, not a second cramped tab strip — this is a menu. */
  .job-tabs-sheet .tab{display:flex;align-items:center;width:100%;min-height:44px;
    padding:0 12px;border-radius:8px;text-align:left;font-size:14.5px}
  .job-tabs-sheet .tab[aria-current="page"]{background:var(--page);color:var(--forest);font-weight:800}
}

/* Calling the customer is a real operational action from the job. Only rendered when
   the job actually carries a number. */
.jd-call{display:inline-flex;align-items:center;min-height:44px;color:var(--forest);font-weight:700}

/* tiny phones (≤360): long-label buttons wrap their text and action rows wrap their
   buttons rather than widening the page — placed LAST so it outranks the base
   .btn{white-space:nowrap} in the cascade (Garage OS visual pass 2026-09-02) */
@media (max-width:360px){
  .btn{white-space:normal;max-width:100%;overflow-wrap:anywhere}
  .head-actions,.panel-head,.btn-row{flex-wrap:wrap;min-width:0}
  .et-btn{white-space:normal;max-width:100%}
  .et-avatar{flex:none}
}


/* CONTEXT SWITCHER (ESC-D032). Carried from the local tree as the ONLY css this slice needs:
   the deployed app.css has zero .esw rules, so the switcher would render unstyled. */
/* ── CONTEXT SWITCHER (Phase 2) ───────────────────────────────────────────────
   A restrained glass treatment on the navigation shell only: the switcher, menus and
   sheets. Operational content — job cards, tables, money — stays crisp and opaque, per
   the founder's direction. Escargo green/white identity is unchanged. */
.esw { margin-top: auto; padding: 10px 8px 8px; border-top: 1px solid rgba(255, 255, 255, .10); display: flex; flex-direction: column; gap: 2px; }
.esw-group { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .55; padding: 10px 10px 4px; }
.esw-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px;
  border: 1px solid transparent; border-radius: 10px; background: transparent; color: inherit; cursor: pointer;
  text-align: left; font: inherit; transition: background .15s ease, border-color .15s ease; }
.esw-row:hover { background: rgba(255, 255, 255, .07); }
.esw-row:focus-visible { outline: 2px solid var(--esc-lime, #b6e214); outline-offset: 2px; }
.esw-row.on { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px); }
.esw-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .28); flex: none; }
.esw-row.on .esw-dot { background: var(--esc-lime, #b6e214); }
.esw-text { display: flex; flex-direction: column; min-width: 0; }
.esw-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esw-meta { font-size: 11.5px; opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }