:root { --bg:#eef1f5; --topbg:#16294d; --panel:#ffffff; --line:#d7dfe9; --txt:#16233a; --muted:#5d6f88; --acc:#1668dc; --acc-d:#0f4fb3; --acc-tx:#ffffff; --ok:#1e9e56; --danger:#d92d20; --inputbg:#f4f6fa; --flashbg:#d7f2e1;
--navbg:#16294d; --navtx:#ffffff; --navlink:#c3cfe4; --navmut:#8fa0bd; --navacc:#9fc1ff; --navhover-bg:rgba(255,255,255,.14); --navhover-tx:#ffffff; --navline:rgba(255,255,255,.15);
--newbtn:#f5c518; --newbtn-d:#c9a227; --newbtn-tx:#16233a; --expr:#c07f13; --expr-d:#96650f; --lock:#1e9e56; --lock-d:#157a41;
--cardbg:#ffffff; --chip-work:#e2ebfb; --chip-people:#ece6fa; --chip-system:#ddf2e2; --chip-you:#fdf3d7; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--txt); font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
.top { background:var(--navbg); border-bottom:1px solid var(--navbg); padding:.6rem .9rem; position:sticky; top:0; z-index:10; }
.top .brand { color:var(--navtx); }
.top .navlink { color:var(--navlink); }
.top .navlink.on, .top .navlink:hover { background:var(--navhover-bg); color:var(--navhover-tx); }
.brand { font-weight:800; letter-spacing:.3px; margin-bottom:.4rem; }
nav { display:flex; gap:.4rem; flex-wrap:wrap; }
.navlink { color:var(--muted); text-decoration:none; padding:.35rem .7rem; border-radius:.5rem; font-size:.9rem; }
.navlink.on, .navlink:hover { background:var(--panel); color:var(--txt); }
.wrap { max-width:960px; margin:0 auto; padding:1rem .9rem 3rem; }
h1 { font-size:1.35rem; margin:.4rem 0 1rem; }
h2 { font-size:1.05rem; margin:1.4rem 0 .6rem; color:var(--acc); }
h3 { font-size:.95rem; margin:.2rem 0 .6rem; }
table { width:100%; border-collapse:collapse; font-size:.92rem; }
th, td { text-align:left; padding:.5rem .55rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.4px; }
.r { text-align:right; } .mono { font-family:ui-monospace,monospace; font-size:.82rem; word-break:break-all; }
.muted { color:var(--muted); } .hint { color:var(--muted); font-size:.82rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.7rem; margin-bottom:1rem; grid-auto-rows:1fr; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:.7rem; padding:.9rem; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; min-height:5.2rem; }
.card .big { font-size:1.6rem; font-weight:800; } .card .lbl { color:var(--muted); font-size:.82rem; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:.7rem; padding:.9rem; margin-bottom:.9rem; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
@media (max-width:640px){ .grid2{ grid-template-columns:1fr; } }
.form label { display:block; margin:.55rem 0; font-size:.9rem; }
.form input, .form select, .form textarea { width:100%; margin-top:.25rem; padding:.55rem .6rem; border-radius:.5rem; border:1px solid var(--line); background:var(--inputbg); color:var(--txt); font-size:1rem; }
.form .chk input { width:auto; margin-right:.4rem; }
[hidden] { display:none !important; }
.btn { display:inline-block; background:#4a6fa5; color:#fff; border:1px solid #3a5a87; padding:.55rem .9rem; border-radius:.55rem; text-decoration:none; font-size:.92rem; cursor:pointer; font-weight:600; }
.btn.primary { background:var(--acc); border-color:var(--acc-d); color:var(--acc-tx); font-weight:700; }
.btn.green { background:var(--lock); border-color:var(--lock-d); color:#fff; font-weight:700; }
.btn.amber { background:var(--expr); border-color:var(--expr-d); color:#fff; font-weight:700; }
.btn.yellow { background:var(--newbtn); border-color:var(--newbtn-d); color:var(--newbtn-tx); font-weight:700; }
.row2 { display:flex; gap:.5rem; flex-wrap:wrap; margin:.8rem 0; }
.linkbtn { background:none; border:none; color:var(--acc); cursor:pointer; font-size:.9rem; padding:.2rem; }
.linkbtn.danger { color:var(--danger); }
.badge { display:inline-block; padding:.18rem .6rem; border-radius:1rem; font-size:.78rem; font-weight:700; background:#e3e7ee; color:#3c4657; }
.st-draft { background:#e3e7ee; color:#3c4657; } .st-estimate { background:#d2f0dc; color:#1c6b3f; } .st-approved { background:#d9e8fd; color:#1d4f9c; }
.st-in_progress { background:#f7e9c4; color:#8a5f00; } .st-dispatched { background:#e0e7ff; color:#3730a3; } .st-complete { background:#d2f0dc; color:#1c6b3f; }
.st-invoiced { background:#e9dcf7; color:#5b3a78; } .st-paid { background:#d2f0dc; color:#1c6b3f; } .st-cancelled { background:#f9d8d5; color:#a02328; }
.totals { max-width:420px; margin-left:auto; } .totals .grand td { font-weight:800; font-size:1.1rem; border-top:2px solid var(--acc); }
.internal { color:var(--muted); }
.foot { text-align:center; color:var(--muted); font-size:.78rem; padding:1.2rem; border-top:1px solid var(--line); }

/* Sidebar navigation layout (per-user display option) */
body.sidenav { display:flex; align-items:stretch; }
body.sidenav .top { position:sticky; top:0; height:100vh; width:var(--sidew,228px); flex:0 0 var(--sidew,228px); display:flex; flex-direction:column; overflow-y:auto; }
body.sidenav .top nav { flex-direction:column; align-items:stretch; margin-top:.5rem; flex:1; }
body.sidenav .top .navlink { display:inline-flex; align-items:center; gap:.3rem; padding:.55rem .75rem; white-space:nowrap; } /* (2026-10-10, Justin): horizontal nav */
body.sidenav .uchip { margin:auto 0 0; padding-top:.8rem; border-top:1px solid var(--navline); align-self:stretch; }
body.sidenav .uchip .who { white-space:nowrap; font-weight:600; }
body.sidenav .uchip .who .navlink { display:inline; padding:0; }
body.sidenav .sidewrap { flex:1; min-width:0; }
body.sidenav .brand { flex-direction:column; align-items:center; gap:.25rem; text-align:center; }
body.sidenav .brandsub { font-size:.72rem; letter-spacing:1.2px; }
@media (max-width:760px) {
  body.sidenav { display:block; }
  body.sidenav .top { width:auto; height:auto; }
  body.sidenav .top nav { flex-direction:row; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  body.sidenav .top nav::-webkit-scrollbar { display:none; }
  body.sidenav .top .navlink { flex:none; white-space:nowrap; }
  body.sidenav .uchip { margin-left:auto; border-top:none; padding-top:0; }
  body.sidenav .brand { flex-direction:row; align-items:center; }
}

/* Phase 2: auth & user management */
.err { background:#f9d8d5; border:1px solid var(--danger); border-radius:.5rem; padding:.7rem .9rem; overflow-wrap:anywhere; }
.flash { background:var(--flashbg); border:1px solid var(--ok); border-radius:.5rem; padding:.7rem .9rem; overflow-wrap:anywhere; }
/* Role-toggle banner: shown on every page while an owner is viewing as technician. */
.rolebanner { background:#b45309; color:#fff; border-radius:.5rem; padding:.6rem .9rem; margin:0 0 1rem; font-size:.92rem; }
.rolebanner .btn { background:#fff; color:#7c3a06; border-color:#fff; padding:.25rem .7rem; font-size:.85rem; }
/* Trial-nudge banner: solo mode, shown to the owner at 30 days in, 15 days out, then daily from 7 days out. */
.trialbanner { background:#1d4ed8; color:#fff; border-radius:.5rem; padding:.6rem .9rem; margin:0 0 1rem; font-size:.92rem; }
.trialbanner a { color:#fff; font-weight:700; }
.trialbanner .btn { background:#fff; color:#1e40af; border-color:#fff; padding:.25rem .7rem; font-size:.85rem; }
.trialbanner .trialwarn { font-weight:700; text-decoration:underline; }
.uchip { margin-left:auto; color:var(--muted); font-size:.82rem; align-self:center; }
.uchip .navlink { display:inline; padding:.2rem .4rem; }
.inlineform { display:inline; }
.roctlrow { display:flex; flex-wrap:wrap; gap:.4rem .6rem; align-items:center; }
/* Writer + Tech picker row (2026-10-19, Justin): the two pickers stay
   side by side on one row at every width — they shrink, they never
   stack or wrap apart. */
.roctlrow.pickers { flex-wrap:nowrap; }
.roctlrow.pickers form.inlineform { flex:1 1 0; min-width:0; display:flex; align-items:center; gap:.55rem; margin:0; }
.roctlrow.pickers form.inlineform select { flex:1 1 auto; min-width:0; }
/* R.O. control row (2026-10-18): on phones the R.O. page's top controls
   (status, department, writer, tech, hold, take…) stack as clean
   full-width rows — muted label on the left, the select/control flexing
   to fill, uniform spacing, 44px tap targets, no sideways scroll.
   Desktop keeps today's inline wrapped row: every rule is media-scoped. */
@media (max-width:640px) {
  .roctlrow { display:flex; flex-direction:column; gap:.5rem; }
  .roctlrow.pickers { flex-direction:row; flex-wrap:nowrap; }
  .roctlrow.pickers form.inlineform { width:auto; }
  .roctlrow form.inlineform { display:flex; align-items:center; gap:.55rem; width:100%; margin:0; min-height:44px; }
  .roctlrow form.inlineform select { flex:1 1 auto; min-width:0; min-height:44px; }
  .roctlrow form.inlineform > button.btn { flex:1 1 auto; min-height:44px; }
  .roctlrow form.inlineform > button.linkbtn { flex:0 0 auto; min-width:44px; min-height:44px; }
  .roctlrow > button.btn { width:100%; min-height:44px; }
  .roctlrow .btn { min-height:44px; }
  .roctlrow > a.badge, .roctlrow > span.chip { align-self:flex-start; }
}
.nowrap { white-space:nowrap; }
.terms { max-height:220px; overflow:auto; background:var(--inputbg); border:1px solid var(--line); border-radius:.5rem; padding:.7rem; font-size:.85rem; white-space:pre-wrap; }
.bigpass { font-size:1.3rem; font-weight:800; letter-spacing:1px; background:var(--inputbg); padding:.7rem; border-radius:.5rem; border:1px dashed var(--acc); }
.mono.small { font-size:.72rem; }
.vmodal { position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; z-index:60; padding:16px; }
.vmodal[hidden] { display:none; }
tr.voided td { opacity:.55; text-decoration:line-through; }
tr.voided td:last-child { text-decoration:none; }
.vmodal-box { max-width:440px; width:100%; }
.vmodal-box video { width:100%; border-radius:8px; background:#000; min-height:220px; }
.mgallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:1rem; }
.mitem { margin:0; }
.mitem img, .mitem video { width:100%; height:140px; object-fit:cover; border-radius:8px; background:#111; display:block; }
.mitem figcaption { font-size:12px; color:var(--muted); margin-top:4px; }
.ainote { border-left:3px solid var(--acc); padding:.4rem .7rem; margin:.6rem 0; background:rgba(255,255,255,.02); border-radius:0 .5rem .5rem 0; }
.ainote p { margin:.25rem 0; }
.brand { display:flex; align-items:center; gap:.75rem; }
.brandlogo { height:42px; width:auto; }
.brandsub { font-weight:600; letter-spacing:2px; text-transform:uppercase; font-size:.82rem; color:#c8d0e0; white-space:nowrap; }
/* Logo doubles as the owner role-switcher: a button reset to look like the old home link. */
.logobtn { background:none; border:none; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; text-align:left; }
.loginbrand { text-align:center; margin:1.4rem 0 .8rem; }
.loginlogo { height:72px; width:auto; }
.logintitle { margin-top:.55rem; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; font-size:.95rem; color:var(--txt); }

/* Owner inspection form (mobile-first) */
.seg{display:flex;gap:.4rem;margin:.4rem 0}
.segbtn{flex:1;min-width:0;padding:.75rem .2rem;font-size:.85rem;font-weight:700;border-radius:.6rem;border:2px solid var(--line);background:var(--inputbg);color:var(--txt);cursor:pointer}
.segbtn.on-good{background:#1f6b43;border-color:#1f6b43;color:#fff}
.segbtn.on-attention{background:#7a5b12;border-color:#7a5b12;color:#fff}
.segbtn.on-urgent{background:#5a2326;border-color:#e05252;color:#fff}
.segbtn.on-na{background:#3a3f4d;border-color:#3a3f4d;color:#fff}
.prog{height:10px;background:var(--inputbg);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:.3rem 0 .6rem}
.prog>i{display:block;height:100%;background:var(--acc);transition:width .2s}
.insp-item{border:1px solid var(--line);border-radius:.6rem;padding:.6rem .7rem;margin:.5rem 0}
.insp-item.flagged-attention{border-color:#7a5b12}
.insp-item.flagged-urgent{border-color:#e05252}
/* Section status badges (2026-10-01): same palette as the rating buttons */
.badge.secbadge-good{background:#1f6b43;color:#fff}
.badge.secbadge-attention{background:#7a5b12;color:#fff}
.badge.secbadge-urgent{background:#5a2326;border:1px solid #e05252;color:#fff}
.notelbl{display:block;margin:.4rem 0;font-size:.85rem;color:var(--muted)}
.notelbl input{width:100%;margin-top:.2rem;padding:.5rem .6rem;border-radius:.5rem;border:1px solid var(--line);background:var(--inputbg);color:var(--txt);font-size:.95rem;box-sizing:border-box}
/* Tekion-style inspection rows (2026-10-01, Justin): label + rating seg on
   top, measurement + mic'd note below. */
.insp-head{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-bottom:.15rem}
.insp-head strong{font-size:.95rem}
.insp-sub{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end}
.measlbl{font-size:.85rem;color:var(--muted)}
.measrow{display:flex;gap:.35rem;align-items:center;margin-top:.2rem}
.measrow input{width:5rem;padding:.5rem .6rem;border-radius:.5rem;border:1px solid var(--line);background:var(--inputbg);color:var(--txt);font-size:.95rem}
.notelbl{flex:1;min-width:12rem}
.noterow{display:flex;gap:.35rem;align-items:center;margin-top:.2rem}
.noterow input{width:auto;flex:1;min-width:0;margin-top:0}
.micbtn.listening{background:#b91c1c;border-color:#b91c1c;color:#fff}
.thumbrow{display:flex;gap:.4rem;flex-wrap:wrap;margin:.4rem 0}
.thumbrow img,.thumbwrap img{width:90px;height:70px;object-fit:cover;border-radius:6px}
.testbox{border:1px solid var(--line);border-radius:.6rem;padding:.7rem .8rem;margin:.6rem 0;background:var(--inputbg)}
.testbox h4{margin:.1rem 0 .5rem}
.testres{margin:.4rem 0}
.trow{display:flex;justify-content:space-between;gap:1rem;padding:.25rem 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.trow span{color:var(--muted)}
.qrrow{display:flex;gap:.9rem;align-items:flex-start;margin:.6rem 0}
.qrimg{width:150px;height:150px;border:1px solid var(--line);border-radius:.4rem;background:#fff;flex:none}
.mono{font-family:ui-monospace,monospace;font-size:.82rem;word-break:break-all}
.docrow{padding:.3rem 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.checkline{display:flex;gap:.6rem;align-items:flex-start;padding:.55rem .6rem;border:1px solid var(--line);border-radius:.5rem;margin:.45rem 0;cursor:pointer}
.checkline input{margin-top:.2rem;transform:scale(1.25);flex:none}
.msglog{margin:.6rem 0}
.msgline{padding:.55rem .7rem;border-radius:.6rem;margin:.4rem 0;font-size:.93rem;line-height:1.45}
.msg-out{background:#d9e8fd;border:1px solid var(--acc)}
.msg-in{background:#d2f0dc;border:1px solid var(--ok)}
.pwWrap{position:relative;display:block}
.pwWrap input{padding-right:2.6rem}
.pwEye{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);background:none;border:none;font-size:1.15rem;line-height:1;cursor:pointer;padding:.25rem}
.modalBack{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:.75rem;max-width:440px;width:100%;padding:1.25rem;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.modal h3{font-size:1.1rem}
.btn.danger { background:var(--danger); border-color:var(--danger); color:#fff; font-weight:700; }
.btn:disabled { opacity:.45; cursor:not-allowed; }

/* ---- Phone layout: the app must read cleanly in the installed PWA, not just on desktop. ---- */
@media (max-width:640px) {
  .wrap { padding:.8rem .6rem 3rem; }
  h1 { font-size:1.15rem; margin:.2rem 0 .8rem; }
  /* Data tables: scroll sideways instead of crushing columns. */
  table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  th, td { white-space:nowrap; }
  /* Top nav: one sideways-scrollable strip instead of a wrapping wall of links. */
  .top { padding:.5rem .6rem; }
  .top nav { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .top nav::-webkit-scrollbar { display:none; }
  .top .navlink, .uchip { flex:none; white-space:nowrap; }
  .brandlogo { height:32px; }
  .brandsub { font-size:.7rem; letter-spacing:1.5px; }
  /* Bigger tap targets, tighter panels. */
  .btn { padding:.65rem 1rem; }
  .panel { padding:.75rem; }
  .card { padding:.7rem; }
  .card .big { font-size:1.35rem; }
  .row2 { margin:.6rem 0; }
  .totals { max-width:none; }
}

/* Top-bar mode above phone width (2026-10-20, found live by the controller
   rehearsal): the base nav rule wraps (line 12) and the only nowrap rescue lived
   in the max-640px phone block above — so a tablet or small window in top-bar
   mode wrapped 17+ links into a full-screen wall under the sticky header and
   buried the page. Same one-row sideways-scrollable strip as phones get. */
@media (min-width:641px) {
  body:not(.sidenav) .top nav { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  body:not(.sidenav) .top nav::-webkit-scrollbar { display:none; }
  body:not(.sidenav) .top .navlink, body:not(.sidenav) .top .uchip { flex:none; white-space:nowrap; }
}

/* Navigation editor (profile): reorder rows with up/down, show/hide, favorites */
.navrow { display:flex; align-items:center; gap:.6rem; padding:.3rem 0; border-bottom:1px solid var(--line); }
.navrow:last-child { border-bottom:none; }
.navmove { display:flex; flex-direction:column; gap:2px; }
.navmove .linkbtn { padding:.05rem .35rem; line-height:1.2; }
.navshow { flex:1; display:flex; align-items:center; gap:.5rem; margin:0; }
.navfav { display:flex; align-items:center; gap:.3rem; margin:0; white-space:nowrap; }

/* Dashboard stat cards that link into their data */
a.card.cardlink { text-decoration:none; color:inherit; display:block; }
a.card.cardlink:hover { border-color:var(--acc); }
a.card.cardlink:hover .lbl { color:var(--acc); }

/* R.O. detail tab strip */
.rotabs { display:flex; gap:.4rem; flex-wrap:wrap; margin:.55rem 0 .2rem; }
.rotabs a { padding:.32rem .75rem; border:1px solid var(--line); border-radius:999px;
  text-decoration:none; font-size:.9rem; color:inherit; background:var(--panel); }
.rotabs a:hover { border-color:var(--acc); color:var(--acc); }
/* R.O. tab strip colors — Justin's model: yellow = pending action,
   green = build/go (or "has what it needs": tech assigned, parts waiting on
   Scout), red = destructive. Blue/yellow stay neutral gray; green/red carry
   real color. Active tab is always gold ("you are here"). */
.rotabs a.rotab-yellow { background:#e5e7eb; border-color:#9ca3af; color:#374151; font-weight:700; }
.rotabs a.rotab-yellow:hover { background:#d1d5db; border-color:#9ca3af; color:#374151; }
.rotabs a.rotab-yellow.active { background:#c9a227; border-color:#a8861c; color:#16233a; }
.rotabs a.rotab-green { background:#d2f0dc; border-color:#1e9e56; color:#145c33; font-weight:700; }
.rotabs a.rotab-green:hover { background:#bfe8cf; border-color:#157a41; color:#0f4d2a; }
.rotabs a.rotab-green.active { background:#c9a227; border-color:#a8861c; color:#16233a; }
.rotabs a.rotab-blue { background:#e5e7eb; border-color:#9ca3af; color:#374151; font-weight:700; }
.rotabs a.rotab-blue:hover { background:#d1d5db; border-color:#9ca3af; color:#374151; }
.rotabs a.rotab-blue.active { background:#c9a227; border-color:#a8861c; color:#16233a; }
.rotabs a.rotab-red { background:#fdeceb; border-color:#d92d20; color:#b91c1c; font-weight:700; }
.rotabs a.rotab-red:hover { background:#fbd9d7; border-color:#b91c1c; color:#a01616; }
.rotabs a.rotab-red.active { background:#c9a227; border-color:#a8861c; color:#16233a; }

/* Dashboard sections: press and hold (mouse or touch) to move, no grips */
.dashsec { position:relative; }
.dashsec.dragging { opacity:.45; }
.dashsec[data-dkey] { -webkit-touch-callout:none; }
/* While a press is in flight, kill text selection so Android's long-press
   selection can't hijack the gesture (added synchronously on press start). */
.dashsec.noselect, .dashsec.noselect * { user-select:none !important; -webkit-user-select:none !important; }
body.secdrag, body.secdrag * { user-select:none !important; -webkit-user-select:none !important; cursor:grabbing !important; }
.dashsec.dcard { display:flex; }
.dashsec.dcard > .card { flex:1; }
/* R.O. detail sections: press and hold (mouse or touch) to move, no grips */
.rosec { position:relative; }
.rosec.dragging { opacity:.45; }
.rosec[data-rosec] { -webkit-touch-callout:none; }
.rosec.noselect, .rosec.noselect * { user-select:none !important; -webkit-user-select:none !important; }
/* Home layout editor rows */
.hlrow { display:flex; align-items:center; gap:.5rem; padding:.4rem .2rem; border-bottom:1px solid var(--line); }
.hlrow:last-child { border-bottom:none; }
.hlrow.hlhead { font-weight:700; font-size:.82rem; color:var(--muted); }
.hlrow .hllabel { flex:1; min-width:0; }
.hlrow .hlrole { flex:0 0 4.6rem; text-align:center; }

/* Quick-action buttons: slide side to side to reorder, no grips. */
#quickactions [data-qkey] { cursor:grab; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
#quickactions .qdragging { opacity:.45; cursor:grabbing; }
/* Nav bar tab dragging */
.navlink[data-navkey] { cursor:grab; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
.navlink.navdragging { opacity:.45; cursor:grabbing; }
/* Nav sections (2026-10-01): WORK / PEOPLE / SYSTEM group headers + color chips. */
.navsec { font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--navmut);
  padding:.65rem .75rem .2rem; cursor:grab; user-select:none; -webkit-user-select:none; white-space:nowrap; }
.navsec:first-child { padding-top:.1rem; }
.navsec-you { cursor:default; }
.navsec.navdragging { opacity:.45; cursor:grabbing; }
.navico { display:inline-block; border-radius:.35rem; padding:.02rem .32rem; margin-right:.4rem; }
.navico.nv-work { background:rgba(96,165,250,.20); }
.navico.nv-people { background:rgba(74,222,128,.20); }
.navico.nv-system { background:rgba(251,191,36,.22); }
.navico.nv-you { background:rgba(148,163,184,.25); }
/* Top-bar and phone layouts: hide section headers, keep the chips. */
body:not(.sidenav) .navsec { display:none; }
@media (max-width:760px) { body.sidenav .navsec { display:none; } }
/* Nav editor: section header rows with whole-section ▲ ▼. */
.navsecrow { display:flex; align-items:center; gap:.6rem; padding:.55rem 0 .15rem; margin-top:.35rem;
  border-bottom:1px solid var(--line); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.navsecrow strong { font-weight:700; }

/* Recommendation part entry rows (R.O. detail add form) + parts list */
.recpart-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.35rem; }
.recpart-row input { width:auto; margin-top:0; }
.recpart-row input[name="partDesc"] { flex:1 1 10rem; }
.recpart-row input[name="partNum"] { flex:1 1 7rem; }
.recpart-row input[name="partQty"] { flex:0 1 4.5rem; }
.recparts { margin:.4rem 0 .2rem; padding-left:1.2rem; }
.recparts li { margin:.25rem 0; }

/* SOS voice assist */
.soslog { max-height:46vh; overflow-y:auto; display:flex; flex-direction:column; gap:.5rem; padding:.25rem 0 .75rem; }
.sosmsg { max-width:88%; padding:.55rem .8rem; border-radius:.9rem; line-height:1.45; font-size:.95rem; }
.sosmsg.you { align-self:flex-end; background:#1e3a5f; color:#fff; border-bottom-right-radius:.25rem; }
.sosmsg.bot { align-self:flex-start; background:#eef2f7; color:#16233a; border-bottom-left-radius:.25rem; }
.soschips { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.6rem; }
.sosrow { display:flex; gap:.5rem; align-items:center; }
.sosrow .input { flex:1; }
.sosmic { width:3.2rem; height:3.2rem; border-radius:50%; border:2px solid #1e3a5f; background:#fff; font-size:1.5rem; cursor:pointer; flex:none; }
.sosmic.listening { background:#b91c1c; border-color:#b91c1c; color:#fff; animation:sospulse 1s infinite; }
@keyframes sospulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.12); } }
.sosbig { font-size:1.15rem; padding:.8rem 1.4rem; display:inline-block; margin-top:.2rem; }

/* Techs dropdown in the nav bar */
.navdrop { position:relative; display:inline-block; }
.navdrop > summary { list-style:none; cursor:pointer; }
.navdrop > summary::-webkit-details-marker { display:none; }
.navdrop > summary::marker { content:''; font-size:0; }
.navdrop .navmenu { display:none; position:absolute; top:calc(100% + .35rem); left:0; z-index:80; min-width:14rem; background:#fff; border:1px solid var(--line); border-radius:.6rem; box-shadow:0 12px 30px rgba(10,25,50,.22); padding:.35rem; }
.navdrop[open] .navmenu { display:block; }
.navmenu a { display:block; padding:.55rem .8rem; border-radius:.4rem; color:var(--txt); text-decoration:none; font-weight:600; white-space:nowrap; }
.navmenu a:hover { background:var(--panel); }
.navmenu a.navall { border-top:1px solid var(--line); margin-top:.25rem; color:var(--acc); }
/* Sidebar layout: expand in-flow (the sidebar scrolls, so no floating menu). */
body.sidenav .navdrop { display:block; }
body.sidenav .navdrop .navmenu { position:static; box-shadow:none; border:none; background:transparent; padding:.1rem 0 .3rem .8rem; min-width:0; }
body.sidenav .navdrop .navmenu a { color:var(--navlink); padding:.4rem .6rem; }
body.sidenav .navdrop .navmenu a:hover { background:var(--navhover-bg); color:var(--navhover-tx); }
body.sidenav .navdrop .navmenu a.navall { border-top:1px solid var(--navline); color:var(--navacc); }
@media (max-width:760px) {
  /* Phone strip scrolls sideways — the menu becomes a fixed panel under the tab (JS sets top). */
  .navdrop .navmenu, body.sidenav .navdrop .navmenu { position:fixed; left:.6rem; right:.6rem; top:7rem; min-width:0; background:#fff; border:1px solid var(--line); border-radius:.6rem; box-shadow:0 12px 30px rgba(10,25,50,.22); padding:.35rem; }
  .navdrop .navmenu a, body.sidenav .navdrop .navmenu a { color:var(--txt); }
  .navdrop .navmenu a:hover, body.sidenav .navdrop .navmenu a:hover { background:var(--panel); color:var(--txt); }
  .navdrop .navmenu a.navall, body.sidenav .navdrop .navmenu a.navall { color:var(--acc); border-top:1px solid var(--line); }
}

/* Customer online booking (/book) */
.svccards { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.5rem; margin:.5rem 0; }
.svccard { display:flex; gap:.6rem; align-items:flex-start; border:1px solid #d7dee9; border-radius:10px; padding:.7rem .8rem; cursor:pointer; background:#fff; }
.svccard input { width:auto; margin-top:.2rem; }
.svccard:has(input:checked) { border-color:#16294d; box-shadow:0 0 0 2px #16294d33; }
.chiprow { display:flex; flex-wrap:wrap; gap:.45rem; }
.chip { border:1px solid #d7dee9; background:#fff; border-radius:999px; padding:.45rem .9rem; cursor:pointer; font-size:.95rem; }
.chip.sel { background:#16294d; color:#fff; border-color:#16294d; }
.chip.taken { opacity:.35; text-decoration:line-through; cursor:not-allowed; }
.maintline { display:flex; gap:.6rem; align-items:flex-start; border:1px solid #e3e8f0; border-radius:8px; padding:.6rem .7rem; margin:.4rem 0; cursor:pointer; background:#fbfcfe; }
.heroesline { display:flex; gap:.6rem; align-items:flex-start; border:1px dashed #b98a1d; border-radius:8px; padding:.7rem .8rem; background:#fffdf4; cursor:pointer; }

/* Pinned nav items (Tech Reports, My techs): fixed at the bottom of the nav */
.navpinned { border-top:1px solid var(--line); border-radius:0; }
body.sidenav .navpinned { border-top-color:rgba(255,255,255,.15); }
/* Dealership pay-type box (demo): always-visible W / CP / INT selector */
.paytypebox { display:inline-flex; align-items:center; gap:.4rem; border:2px solid #b9c4d6; border-radius:.6rem; padding:.2rem .5rem; background:#fff; vertical-align:middle; }
.paytypebox .inlineform { display:inline-flex; gap:.25rem; margin:0; }
.ptopt { display:inline-flex; align-items:center; gap:.25rem; cursor:pointer; padding:.25rem .5rem; border-radius:.4rem; font-weight:700; font-size:.85rem; border:1px solid transparent; }
.ptopt:hover { background:#eef2f8; }
.ptopt.on { background:#e3ecfd; border-color:#1a73e8; }
.ptopt input { accent-color:#1a73e8; margin:0; }

/* Live-update toasts (2026-09-28): pop in when notifications arrive — no refresh needed. */
#liveToasts { position:fixed; right:.8rem; bottom:.8rem; z-index:9999; display:flex; flex-direction:column; gap:.5rem; max-width:min(92vw, 360px); }
.liveToast { display:block; background:#16294d; color:#fff; border-radius:.7rem; padding:.7rem .9rem; text-decoration:none; box-shadow:0 6px 24px rgba(0,0,0,.35); animation:toastIn .35s ease-out; border-left:4px solid #4caf50; }
.liveToast b { display:block; font-size:.92rem; margin-bottom:.15rem; }
.liveToast span { font-size:.82rem; opacity:.9; }
.liveToast.out { opacity:0; transform:translateY(8px); transition:opacity .4s, transform .4s; }
.liveToast { position:relative; padding-right:2.4rem; }
.liveToast .tx { position:absolute; top:.3rem; right:.4rem; border:0; background:transparent; color:#fff; opacity:.7; font-size:.95rem; line-height:1; cursor:pointer; padding:.25rem .4rem; }
.liveToast .tx:hover { opacity:1; }
.liveToast .tacts { display:flex; gap:.4rem; margin-top:.45rem; }
.liveToast .tact { border:0; border-radius:.45rem; padding:.35rem .7rem; font-size:.82rem; font-weight:600; cursor:pointer; background:#4caf50; color:#fff; }
.liveToast .tact:hover { filter:brightness(1.1); }
.liveToast .tact:disabled { opacity:.6; cursor:default; }
.mutetoggle { cursor:pointer; margin-left:.25rem; font-size:.85em; }
@keyframes toastIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
/* Flash highlight when an R.O. badge updates live. */
.roFlash .badge, select.roFlash { animation:roFlash 1.6s ease-out; }
@keyframes roFlash { 0% { box-shadow:0 0 0 3px #ffd54f; } 100% { box-shadow:0 0 0 0 transparent; } }

/* ---------- Tab strips (2026-09-29, Justin: tabs makeover — fit + colors) ---------- */
.tabs { display:flex; gap:.3rem; overflow-x:auto; padding:.3rem; margin:.7rem 0; background:var(--panel); border:1px solid var(--line); border-radius:.85rem; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.tabs::-webkit-scrollbar { display:none; }
.tab { flex:0 0 auto; display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .95rem; border-radius:.6rem; font-size:.9rem; font-weight:600; color:var(--muted); text-decoration:none; white-space:nowrap; border:1px solid transparent; background:transparent; cursor:pointer; font-family:inherit; }
.tab:hover { color:var(--txt); background:#eef2f8; }
.tab.on { background:var(--topbg); color:#fff; font-weight:700; box-shadow:0 1px 3px rgba(22,41,77,.35); }
/* Segmented period control */
.seg { display:inline-flex; gap:.15rem; background:#dbe2ed; border-radius:.7rem; padding:.22rem; }
.seg a { padding:.42rem .95rem; border-radius:.5rem; font-size:.88rem; font-weight:600; color:var(--muted); text-decoration:none; white-space:nowrap; }
.seg a:hover { color:var(--txt); }
.seg a.on { background:var(--panel); color:var(--topbg); font-weight:700; box-shadow:0 1px 2px rgba(22,41,77,.25); }
/* Ghost button: light companion to segmented controls */
.btn.ghost { background:var(--panel); border-color:var(--line); color:var(--txt); }

/* ===== Appearance themes (2026-10-01, Justin) — 12 themes incl. "Current" (= :root defaults).
   Per-user, per-device (phone/desktop) via body[data-theme]. Buttons recolor through
   --newbtn/--expr/--lock so the dashboard's yellow/amber/green language survives. ===== */
[data-theme="midnight"] { --bg:#0d1117; --topbg:#1c2530; --panel:#151b24; --line:#26303d; --txt:#e6ebf2; --muted:#8b98ab; --acc:#58a6ff; --acc-d:#1f6feb; --acc-tx:#ffffff; --ok:#3fb950; --danger:#f85149; --inputbg:#10151c; --flashbg:#12331f;
--navbg:#0b0f16; --navtx:#ffffff; --navlink:#c3cfe4; --navmut:#7d8ca3; --navacc:#9fc1ff; --navhover-bg:rgba(255,255,255,.1); --navhover-tx:#ffffff; --navline:rgba(255,255,255,.12);
--newbtn:#f5c518; --newbtn-d:#c9a227; --newbtn-tx:#1a1a1a; --expr:#c07f13; --expr-d:#96650f; --lock:#3fb950; --lock-d:#2e8b3a;
--cardbg:#151b24; --chip-work:#1c2b3a; --chip-people:#2b2340; --chip-system:#23382b; --chip-you:#3a2f16; }
[data-theme="copper"] { --bg:#14100c; --topbg:#3a2c1c; --panel:#1f1a14; --line:#3a2f22; --txt:#f0e8dc; --muted:#a89a85; --acc:#e09a4e; --acc-d:#b06f2c; --acc-tx:#241505; --ok:#7fc96b; --danger:#e5484d; --inputbg:#100d09; --flashbg:#2c3a1e;
--navbg:#171310; --navtx:#f5ead9; --navlink:#d8c9b4; --navmut:#8a7a63; --navacc:#e8b96e; --navhover-bg:rgba(224,154,78,.16); --navhover-tx:#ffffff; --navline:rgba(255,255,255,.1);
--newbtn:#f5c518; --newbtn-d:#c9a227; --newbtn-tx:#1a1a1a; --expr:#e09a4e; --expr-d:#b06f2c; --lock:#7fc96b; --lock-d:#5aa34c;
--cardbg:#1f1a14; --chip-work:#2a2620; --chip-people:#33241f; --chip-system:#24301f; --chip-you:#3d2f16; }
[data-theme="arctic"] { --bg:#eaf2f8; --topbg:#0c4a6e; --panel:#ffffff; --line:#cfdfe9; --txt:#0f2a3d; --muted:#5b7a90; --acc:#0284c7; --acc-d:#0369a1; --acc-tx:#ffffff; --ok:#16a34a; --danger:#dc2626; --inputbg:#f4f9fc; --flashbg:#d1f0dc;
--navbg:#ffffff; --navtx:#0f2a3d; --navlink:#33475c; --navmut:#8aa5b8; --navacc:#0369a1; --navhover-bg:rgba(2,132,199,.1); --navhover-tx:#0c4a6e; --navline:rgba(15,42,61,.12);
--newbtn:#fbbf24; --newbtn-d:#d97706; --newbtn-tx:#1c1917; --expr:#ea580c; --expr-d:#c2410c; --lock:#16a34a; --lock-d:#15803d;
--cardbg:#ffffff; --chip-work:#e0eefb; --chip-people:#ece4fa; --chip-system:#ddf2e2; --chip-you:#fdf3d7; }
[data-theme="highvis"] { --bg:#faf7f2; --topbg:#292524; --panel:#ffffff; --line:#e5ded2; --txt:#1c1917; --muted:#78716c; --acc:#ea580c; --acc-d:#c2410c; --acc-tx:#ffffff; --ok:#16a34a; --danger:#dc2626; --inputbg:#faf8f4; --flashbg:#d9f2e2;
--navbg:#1a1a1a; --navtx:#faf7f2; --navlink:#e7e5e4; --navmut:#a8a29e; --navacc:#fdba74; --navhover-bg:rgba(234,88,12,.28); --navhover-tx:#ffffff; --navline:rgba(255,255,255,.15);
--newbtn:#facc15; --newbtn-d:#ca8a04; --newbtn-tx:#1c1917; --expr:#ea580c; --expr-d:#c2410c; --lock:#16a34a; --lock-d:#15803d;
--cardbg:#ffffff; --chip-work:#fde8d8; --chip-people:#f3e8fd; --chip-system:#dcf2e3; --chip-you:#fef6d8; }
[data-theme="forest"] { --bg:#eef4ec; --topbg:#1c2e1f; --panel:#ffffff; --line:#d4e0d0; --txt:#16281a; --muted:#5f7a63; --acc:#2f7d3b; --acc-d:#1f5c28; --acc-tx:#ffffff; --ok:#2f9e44; --danger:#d92d20; --inputbg:#f5f8f3; --flashbg:#d3f0da;
--navbg:#1c2e1f; --navtx:#f0f5ee; --navlink:#cfdccf; --navmut:#8aa58e; --navacc:#a7d8b2; --navhover-bg:rgba(255,255,255,.12); --navhover-tx:#ffffff; --navline:rgba(255,255,255,.14);
--newbtn:#f5c518; --newbtn-d:#c9a227; --newbtn-tx:#16281a; --expr:#b7791f; --expr-d:#92600f; --lock:#2f9e44; --lock-d:#237a33;
--cardbg:#ffffff; --chip-work:#dcebfd; --chip-people:#e9e2f8; --chip-system:#d9f0dd; --chip-you:#fdf3d0; }
[data-theme="crimson"] { --bg:#140a0c; --topbg:#4a1218; --panel:#241114; --line:#3d1e23; --txt:#f5e6e6; --muted:#b08d8d; --acc:#e5484d; --acc-d:#b3272f; --acc-tx:#ffffff; --ok:#46a758; --danger:#ff6369; --inputbg:#100708; --flashbg:#173522;
--navbg:#1d0d10; --navtx:#f7e8e8; --navlink:#e3c4c4; --navmut:#96707a; --navacc:#f0a3a8; --navhover-bg:rgba(229,72,77,.16); --navhover-tx:#ffffff; --navline:rgba(255,255,255,.1);
--newbtn:#f5c518; --newbtn-d:#c9a227; --newbtn-tx:#1a1a1a; --expr:#e8833a; --expr-d:#b25f22; --lock:#46a758; --lock-d:#34804a;
--cardbg:#241114; --chip-work:#33242e; --chip-people:#3a2030; --chip-system:#1f3826; --chip-you:#443310; }
[data-theme="royal"] { --bg:#120e1e; --topbg:#2e1a5e; --panel:#1d1733; --line:#2e2547; --txt:#ece7f7; --muted:#9a8fc0; --acc:#8b5cf6; --acc-d:#6d28d9; --acc-tx:#ffffff; --ok:#34d399; --danger:#f87171; --inputbg:#0e0a18; --flashbg:#14352a;
--navbg:#150f2e; --navtx:#efeafb; --navlink:#d3cbf0; --navmut:#7e719e; --navacc:#b79bff; --navhover-bg:rgba(139,92,246,.18); --navhover-tx:#ffffff; --navline:rgba(255,255,255,.12);
--newbtn:#f5c518; --newbtn-d:#c9a227; --newbtn-tx:#1a1a1a; --expr:#d97706; --expr-d:#b45309; --lock:#34d399; --lock-d:#059669;
--cardbg:#1d1733; --chip-work:#262040; --chip-people:#322457; --chip-system:#1e3a2e; --chip-you:#453512; }
[data-theme="ocean"] { --bg:#0a1a20; --topbg:#134e5e; --panel:#0f2830; --line:#1e3d46; --txt:#e0f0f2; --muted:#7fa3ac; --acc:#0891b2; --acc-d:#0e7490; --acc-tx:#ffffff; --ok:#34d399; --danger:#f87171; --inputbg:#071318; --flashbg:#123a2e;
--navbg:#082026; --navtx:#e6f4f5; --navlink:#bcd9de; --navmut:#5f8891; --navacc:#7dd3e8; --navhover-bg:rgba(34,211,238,.14); --navhover-tx:#ffffff; --navline:rgba(255,255,255,.1);
--newbtn:#f5c518; --newbtn-d:#c9a227; --newbtn-tx:#0a1a20; --expr:#fb923c; --expr-d:#ea580c; --lock:#34d399; --lock-d:#059669;
--cardbg:#0f2830; --chip-work:#142e3d; --chip-people:#232a4a; --chip-system:#14362e; --chip-you:#423512; }
[data-theme="mono"] { --bg:#f4f4f4; --topbg:#262626; --panel:#ffffff; --line:#d4d4d4; --txt:#171717; --muted:#737373; --acc:#404040; --acc-d:#171717; --acc-tx:#ffffff; --ok:#166534; --danger:#b91c1c; --inputbg:#fafafa; --flashbg:#dcfce7;
--navbg:#ffffff; --navtx:#171717; --navlink:#404040; --navmut:#a3a3a3; --navacc:#404040; --navhover-bg:rgba(0,0,0,.07); --navhover-tx:#000000; --navline:rgba(0,0,0,.1);
--newbtn:#171717; --newbtn-d:#000000; --newbtn-tx:#ffffff; --expr:#525252; --expr-d:#262626; --lock:#166534; --lock-d:#14532d;
--cardbg:#ffffff; --chip-work:#e7e7e7; --chip-people:#e7e7e7; --chip-system:#e7e7e7; --chip-you:#e7e7e7; }
[data-theme="blush"] { --bg:#fdf3f4; --topbg:#8e2f48; --panel:#ffffff; --line:#f0d5da; --txt:#4a2330; --muted:#a07a86; --acc:#db4f6d; --acc-d:#b23a54; --acc-tx:#ffffff; --ok:#16a34a; --danger:#dc2626; --inputbg:#fdf8f9; --flashbg:#d9f2e2;
--navbg:#ffffff; --navtx:#4a2330; --navlink:#6b4553; --navmut:#c49aa5; --navacc:#b23a54; --navhover-bg:rgba(219,79,109,.1); --navhover-tx:#8e2f48; --navline:rgba(74,35,48,.1);
--newbtn:#fbbf24; --newbtn-d:#d97706; --newbtn-tx:#4a2330; --expr:#ea7a3c; --expr-d:#c25f22; --lock:#16a34a; --lock-d:#15803d;
--cardbg:#ffffff; --chip-work:#fbe3ea; --chip-people:#f3e2f7; --chip-system:#dcf2e3; --chip-you:#fef3d8; }
[data-theme="cyber"] { --bg:#0a0c05; --topbg:#3f6212; --panel:#111507; --line:#2a3312; --txt:#eef7d8; --muted:#93a06b; --acc:#65a30d; --acc-d:#4d7c0f; --acc-tx:#f7fee7; --ok:#4ade80; --danger:#fb7185; --inputbg:#070903; --flashbg:#1a2e12;
--navbg:#0a0f02; --navtx:#ecfccb; --navlink:#cdd9a8; --navmut:#6b7a45; --navacc:#d9f99d; --navhover-bg:rgba(163,230,53,.14); --navhover-tx:#ecfccb; --navline:rgba(163,230,53,.16);
--newbtn:#a3e635; --newbtn-d:#65a30d; --newbtn-tx:#0a0c05; --expr:#fb923c; --expr-d:#ea580c; --lock:#4ade80; --lock-d:#16a34a;
--cardbg:#111507; --chip-work:#1c2410; --chip-people:#241a3d; --chip-system:#14301c; --chip-you:#2e2a0e; }

/* ===== Compact density (2026-10-01) ===== */
body.compact { font-size:14px; }
body.compact .wrap { padding:.7rem .7rem 2.5rem; }
body.compact .top { padding:.45rem .7rem; }
body.compact .top .brand { margin-bottom:.25rem; }
body.compact .top .navlink, body.compact.sidenav .top .navlink { padding:.4rem .6rem; font-size:.85rem; }
body.compact .btn { padding:.42rem .7rem; font-size:.86rem; }
body.compact .card { padding:.6rem; min-height:4.2rem; }
body.compact .card .big { font-size:1.35rem; }
body.compact .panel { padding:.65rem; margin-bottom:.65rem; }
body.compact h1 { font-size:1.15rem; }
body.compact h2 { margin:1rem 0 .5rem; }
body.compact .flash { padding:.5rem .7rem; margin:.5rem 0; }
body.compact th, body.compact td { padding:.35rem .5rem; }

/* ===== Sharp corners (2026-10-01) ===== */
body.sharp .card, body.sharp .panel, body.sharp .btn, body.sharp .form input, body.sharp .form select, body.sharp .form textarea, body.sharp .navlink, body.sharp .tab, body.sharp .seg, body.sharp .seg a, body.sharp .badge, body.sharp .flash, body.sharp .err, body.sharp .modal, body.sharp .setchip, body.sharp .navdrop .navmenu { border-radius:0; }

/* ===== Voice inspection (2026-10-01) ===== */
.voicetranscript{border:1px dashed #888;border-radius:8px;padding:.5rem .7rem;margin:.5rem 0;min-height:2.2em;font-style:italic}
.voicerow{padding:.4rem 0;border-top:1px solid rgba(136,136,136,.35)}
#voicebtn.listening{background:#b91c1c;border-color:#b91c1c;color:#fff}

/* ===== Sliding toggle switch (2026-10-01: schedule lane mode) ===== */
.switch{position:relative;display:inline-block;width:54px;height:28px;flex:none;vertical-align:middle}
.switch input{opacity:0;width:0;height:0;margin:0}
.switch .knob{position:absolute;inset:0;background:#cbd5e1;border-radius:999px;transition:background .2s;cursor:pointer}
.switch .knob:before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.switch input:checked + .knob{background:#16a34a}
.switch input:checked + .knob:before{transform:translateX(26px)}