:root{
  --navy:#0b1c33; --navy-2:#13294a; --gold:#B08D57; --gold-lite:#d8b98a;
  --bg:#f4f6f8; --card:#fff; --line:#e1e6ec; --muted:#6b7684;
  --ok:#0f7b3d; --bad:#b3261e; --warn:#8a6100;
  --r:12px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--navy);
     font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:720px;margin:0 auto;padding:16px 16px 140px}
h1{font-size:1.3rem;margin:0}
h2{font-size:1.02rem;margin:0 0 12px}
.muted{color:var(--muted);font-size:.87rem}

/* header */
.top{background:var(--navy);color:#fff;padding:14px 16px;position:sticky;top:0;z-index:20}
.top .in{max-width:720px;margin:0 auto;display:flex;align-items:center;gap:12px}
.top h1{flex:1;font-size:1.05rem;font-weight:800;letter-spacing:.01em}
.top a{color:var(--gold-lite);font-size:.84rem;text-decoration:none}
.badge{background:rgba(255,255,255,.12);padding:3px 9px;border-radius:999px;font-size:.76rem}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
      padding:16px;margin:0 0 14px}
.card.appt{border-left:4px solid var(--gold)}
.rowhead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rowhead h2{flex:1;margin:0}

/* controls */
label{display:block;font-size:.78rem;font-weight:700;text-transform:uppercase;
      letter-spacing:.04em;color:var(--muted);margin:0 0 5px}
/* Every text-like input, by exclusion rather than an allow-list. The old rule
   named text/number/date only, so type=tel got no width:100% and sized itself
   to its content — which pushed the sign-in box outside the card on a phone.
   Adding types one at a time is how that recurs; this cannot miss one.

   WRAPPED IN :where() ON PURPOSE. A bare chain of five :not() selectors has
   specificity 0,5,1, which silently outranks `.field.money input` at 0,2,1 —
   the money field lost its 34px left padding and its "3000" rendered under
   the $ glyph. :where() contributes zero specificity, so this stays at 0,0,1
   and any class-based rule below can still override it. */
input:where(:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button])),
select,textarea{
  width:100%;max-width:100%;padding:11px 12px;border:1px solid var(--line);
  border-radius:9px;font:inherit;font-size:16px;background:#fff;color:var(--navy)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.field{margin:0 0 12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* segmented button groups — the whole point of the simplified entry */
.seg{display:flex;flex-wrap:wrap;gap:7px}
/* Payment: three across, big targets (approved redesign, 2026-10-03). */
.seg.paygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg.paygrid button{min-width:0;min-height:52px;font-weight:700}
.cash-q{margin:10px 0 4px;padding:12px;border:1.5px solid var(--gold,#B08D57);border-radius:12px;background:color-mix(in srgb,var(--gold,#B08D57) 10%,transparent)}
.cash-q-t{margin:0 0 8px;font-weight:800}
.cash-q-row{display:flex;flex-wrap:wrap;gap:8px}
.cash-q-b{flex:1 1 9rem;min-height:48px;border:1.5px solid var(--line,#c9d0d9);border-radius:10px;background:var(--surface,#fff);color:inherit;font:inherit;font-weight:700;cursor:pointer}
.cash-q-b.on{border-color:var(--gold,#B08D57);background:var(--gold,#B08D57);color:#0b1c33}
.pay-link{background:none;border:0;padding:0;min-height:44px;color:var(--muted);text-decoration:underline;
  font:inherit;font-size:.92rem;cursor:pointer}
.seg button{flex:1 1 auto;min-width:88px;padding:11px 10px;border:1.5px solid var(--line);
  background:#fff;border-radius:9px;font:inherit;font-size:.9rem;font-weight:600;
  color:var(--navy);cursor:pointer;transition:.12s}
.seg button[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
/* Exactly four options sit two by two, never three and an orphan. */
.seg:has(> :nth-child(4):last-child) button{flex:1 1 calc(50% - 7px)}
.seg.gold button[aria-pressed=true]{background:var(--gold);border-color:var(--gold)}

.btn{display:inline-block;padding:12px 18px;border-radius:10px;border:0;cursor:pointer;
     font:inherit;font-weight:700;font-size:.95rem}
.btn-g{background:var(--gold);color:#fff}
.btn-n{background:var(--navy);color:#fff}
.btn-o{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn-sm{padding:8px 13px;font-size:.86rem}
.btn-wa{background:#25D366;color:#fff;text-decoration:none;display:block;text-align:center}
.btn-o{text-decoration:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-x{background:none;border:0;color:var(--muted);font-size:1.3rem;line-height:1;
       cursor:pointer;padding:2px 6px}
.btn-x:hover{color:var(--bad)}
/* ---- job screen (approved redesign, stage 3, 2026-10-03) ------------- */
.jhead{margin:-2px 0 6px}
.jh-top{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--muted)}
.jh-n{font-weight:700;letter-spacing:.02em}
.jh-auto{display:inline-flex;align-items:center;gap:5px;margin-left:auto}
.jh-rm{background:none;border:0;color:var(--muted);text-decoration:underline;font:inherit;font-size:.82rem;
  min-height:44px;padding:0 0 0 6px;cursor:pointer}
.jh-rm:hover{color:var(--bad)}
.jh-row{display:flex;align-items:center;gap:10px}
.jh-t:focus{outline:none}
.xtra .sub-head{gap:6px;min-width:0}
.xtra .sub-head h3{flex:1;min-width:0}
@media(max-width:420px){ .mult-x{display:none} .ls-done{padding:0 2px} }
.jh-row h2.jh-t{margin:2px 0 0;font-size:1.45rem;line-height:1.2;color:var(--ink);text-transform:none;
  letter-spacing:0;font-weight:800;flex:1;min-width:0;overflow-wrap:anywhere}
.jsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:14px 0 4px;position:relative}
.jsteps::before{content:"";position:absolute;left:16.6%;right:16.6%;top:17px;height:2px;background:var(--line)}
.js-s{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;
  padding:0;min-height:56px;font:inherit;color:var(--muted);cursor:pointer}
.js-c{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;
  border:2px solid #cfc6b5;font-weight:800;color:var(--muted)}
.js-l{font-size:.8rem;font-weight:700}
.js-s.done .js-c{background:var(--gold);border-color:var(--gold);color:#12203a;font-size:0}
.js-s.done .js-c::after{content:"✓";font-size:1rem}
.js-s.done .js-l{color:var(--ink)}
.sec-h{display:flex;align-items:center;gap:10px;margin:22px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
.sec-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;
  font-weight:800;font-size:.9rem;flex:0 0 28px}
.sec-t{font-size:1.12rem;font-weight:800;color:var(--ink)}
.sec-note{margin-left:auto;font-size:.75rem;font-weight:800;color:#7a5c2e;background:#fbf1dc;padding:3px 10px;border-radius:99px}
.qadd{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.qa-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:72px;
  padding:8px 6px;border:1.5px solid #cfc6b5;border-radius:12px;background:#fff;color:var(--ink);font:inherit;
  font-size:.86rem;font-weight:700;cursor:pointer}
.qa-b:hover{border-color:var(--gold)}
.qa-i{color:#7a5c2e;line-height:0}
.qa-more[aria-expanded="true"]{border-color:var(--ink)}
.qmore{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;padding:10px;border-radius:12px;
  background:var(--surface-2)}
.qmore button{min-height:48px;border:1.5px solid #cfc6b5;border-radius:10px;background:#fff;color:var(--ink);
  font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;padding:6px 8px}
.qmore button:last-child:nth-child(odd){grid-column:1 / -1}
.sel-h{margin:18px 0 8px;font-size:.95rem;font-weight:800;color:var(--ink)}
/* A finished line: icon, words, price, Edit, remove. On a narrow phone the buttons used to take all the width and squeezed a long
   note (Custom work) to one or two letters a line (owner 2026-10-14): the words keep at least 9rem and the price and buttons drop
   to a second row when they do not fit; a long note shows three lines (Edit shows it whole). */
.line-sum{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px;margin:0 0 8px;border:1px solid var(--line);
  border-radius:12px;background:#fff}
.ls-i{color:#7a5c2e;line-height:0;display:inline-flex;margin-right:6px;vertical-align:middle}
.ls-m{flex:1 1 9rem;min-width:9rem}
.ls-t{font-weight:800;color:var(--ink)}
.ls-s{font-size:.86rem;color:var(--muted);overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.ls-p{white-space:nowrap;margin-right:auto}
.ls-ed,.ls-done{background:none;border:0;color:#7a5c2e;font:inherit;font-weight:700;font-size:.86rem;
  text-decoration:underline;min-height:44px;padding:0 6px;cursor:pointer}
.ls-x{width:44px;height:44px;border:0;background:none;color:var(--muted);font-size:1.4rem;cursor:pointer;flex:0 0 44px}
.ls-x:hover{color:var(--bad)}
.xtra h3{display:flex;align-items:center}
.cc{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.cc.cc3{grid-template-columns:repeat(6,1fr)}
.cc.cc3>*{grid-column:span 2}
/* Balanced last row (CLAUDE.md 8.9): 5 = 3 + 2 at half width each. */
.cc.cc3>:last-child:nth-child(3n+2),.cc.cc3>:nth-last-child(2):nth-child(3n+1){grid-column:span 3}
.cc:not(.cc3)>:last-child:nth-child(odd){grid-column:1 / -1}
.cc-b{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:76px;padding:10px 6px 8px;border:1.5px solid #cfc6b5;border-radius:12px;background:#fff;
  color:var(--ink);font:inherit;font-size:.86rem;font-weight:700;text-align:center;cursor:pointer}
.cc-b:hover{border-color:var(--gold)}
.cc-i{color:var(--muted);line-height:0}
.cc-r{position:absolute;top:8px;right:8px;width:16px;height:16px;border-radius:50%;border:1.5px solid #cfc6b5;background:#fff}
.cc-b[aria-pressed="true"]{border-color:var(--gold);background:#fbf3e4;box-shadow:inset 0 0 0 1px var(--gold)}
.cc-b[aria-pressed="true"] .cc-i{color:#7a5c2e}
.cc-b[aria-pressed="true"] .cc-r{border:5px solid var(--gold)}
.pf-bad .cc-b{border-color:var(--bad)}
.wiz-pos .wp-l{display:block;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.wiz-pos .wp-v{display:block;font-size:1.25rem;color:var(--ink)}
@media(max-width:360px){ .qadd{grid-template-columns:repeat(2,1fr)} }
[tabindex="-1"]:focus{outline:none}
.rv2 .rv2-h{font-size:1.45rem;color:var(--ink);text-transform:none;letter-spacing:0;font-weight:800;margin:0}
.rv2-sec{margin:18px 0 8px;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.rv2-job{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:8px 10px;margin:0 0 6px;
  border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.rv2-brand{font-size:.72rem;font-weight:800;padding:3px 7px;border-radius:6px;background:var(--ink);color:#fff}
.rv2-m{flex:1;min-width:0;display:flex;flex-direction:column}
.rv2-t{font-weight:700;overflow-wrap:anywhere}
.rv2-s{font-size:.82rem;color:var(--muted)}
.rv2-st{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ok);color:#fff;font-weight:800;font-size:.8rem}
.rv2-st.bad{background:var(--warn)}
.rv2-a{white-space:nowrap}
.rv2-sum{border:1px solid var(--line);border-radius:12px;padding:6px 12px;background:#fff}
.rv2-r{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.rv2-r:last-child{border-bottom:0}
.rv2-r.strong{color:var(--ink)}
.rv2-r.strong b{font-size:1.1rem}
.rv2-check{list-style:none;margin:0;padding:0}
.rv2-check li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.rv2-ci{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;flex:0 0 22px;font-weight:800;font-size:.8rem;color:#fff;background:var(--ok)}
.rv2-check li.bad .rv2-ci{background:var(--bad)}
.rv2-check li span:nth-child(2){flex:1}
.rv2-fix{min-height:44px;padding:0 10px;border:1.5px solid #cfc6b5;border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-weight:700;font-size:.85rem;white-space:nowrap;cursor:pointer}
.rv2-pay{margin:12px 0 0}
.rv2-all{margin:4px 0 16px}
.rv2-all>summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center;color:var(--ink)}
.tc-h{font-size:2rem;font-weight:700;color:var(--ink);text-transform:none;letter-spacing:-.01em;margin:4px 0 2px}
.tc-sync{display:flex;align-items:center;gap:6px;font-size:.84rem;color:var(--muted);margin-bottom:10px}
.tc-refresh{width:44px;height:44px;border:0;background:none;color:#7a5c2e;font-size:1.2rem;cursor:pointer;margin:-10px 0}
.tc{padding:14px;margin:0 0 10px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(11,28,51,.04)}
.tc.dim{opacity:.7}
.tc-r1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tc-time{font-weight:800;color:#7a5c2e;font-size:1.05rem}
.tc-brand{font-size:.72rem;font-weight:800;padding:3px 7px;border-radius:6px;background:var(--ink);color:#fff}
.tc-st{margin-left:auto;font-size:.76rem;font-weight:800;padding:4px 10px;border-radius:99px;background:var(--surface-2);color:var(--ink)}
.tc-st.ok{background:#e7f4ec;color:var(--ok)}
.tc-st.warn{background:#fbf1dc;color:var(--warn)}
.tc-st.done{background:#e9edf2;color:var(--muted)}
.tc-t{font-size:1.15rem;font-weight:800;color:var(--ink);margin-top:6px;overflow-wrap:anywhere}
.tc-s{font-size:.9rem;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.tc-act{display:flex;gap:8px;margin-top:12px}
.tc-go{flex:1;min-height:48px}
.tc-ic{display:grid;place-items:center;width:52px;min-height:48px;border:1.5px solid #cfc6b5;border-radius:10px;color:#7a5c2e;background:#fff}
.pay-hero{background:var(--ink) !important;color:#fff;border-color:var(--ink) !important}
.pay-hero .muted,.pay-hero p{color:#c9d3e0}
.pay-hero .big{color:#fff}
.pay-hero b{color:#fff}
.pay-hero .ph-k{margin:0;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#d8b98a}
.res-done{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.res-done .btn{min-height:52px;display:flex;align-items:center;justify-content:center;text-decoration:none}
.res-more>summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center;color:var(--ink)}
/* ---- design review 2 (2026-10-03) ---------------------------------- */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.scr-title{font-family:"Playfair Display",Georgia,serif!important;font-weight:700!important;letter-spacing:-.01em}
.tc-hrow{display:flex;align-items:center;gap:10px;margin:0 0 4px}
.tc-hrow .tc-h{flex:1;margin:0}
.tc-date{margin:0!important;flex:0 0 auto}
.tc-date input{width:auto;min-height:44px;padding:6px 10px;font-size:.95rem;border-radius:99px}
.tc-th{width:36px;height:36px;border-radius:8px;object-fit:cover;border:1px solid var(--line)}
/* Next up, notes, Map/Call/Text, 2-day agenda (owner 2026-10-06). */
.tc-next{border:2px solid var(--gold,#B08D57);box-shadow:0 4px 14px rgba(176,141,87,.18)}
.tc-nx{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7a5c2e;margin:0 0 6px}
.tc-next .tc-time{font-size:1.25rem}
.tc-next .tc-t{font-size:1.3rem}
.tc-next .tc-act{flex-wrap:wrap}
.tc-ic{text-decoration:none}
/* Today cards that open the appointment (visit.php, 2026-10-11): every button named, in two rows. */
.tc-tlink{display:block;text-decoration:none}
.tc-tlink:hover{text-decoration:underline}
.tc-act-v{flex-wrap:wrap}
.tc-act.tc-act-v .tc-ic{flex:1 1 calc(33% - 8px);width:auto;gap:6px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;padding:0 6px;white-space:nowrap}
.tc-act.tc-act-v .ic-omw{flex:1 0 100%}
.tc-act.tc-act-v .tc-go{order:2;flex:1 0 100%}
.tc-act.tc-act-v .tc-off{color:var(--muted,#6b7684);font-weight:600;font-size:.82rem;border-style:dashed;white-space:normal;text-align:center;flex:2 1 calc(66% - 8px)}
.tc-next .tc-ic{flex:1;width:auto;gap:6px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem}
.tc-next .tc-go{order:2;flex:1 0 100%}
.tc-n{margin-top:8px;font-size:.9rem;color:var(--ink);background:var(--surface-2,#f4f6f8);border-radius:10px;padding:8px 10px}
.tc-n summary{cursor:pointer;list-style:none;overflow-wrap:anywhere}
.tc-n summary::-webkit-details-marker{display:none}
.tc-n[open] summary{display:none}
.tc-nf{white-space:pre-line;overflow-wrap:anywhere}
.tc-fu{margin-top:8px;font-size:.88rem;font-weight:700;color:#7a5c2e;overflow-wrap:anywhere}
@media screen and (prefers-color-scheme: dark){.tc-fu{color:var(--gold-text,#d8b98a)}}
.tc-cmp{padding:12px}
.tc-cmp .tc-t{font-size:1.05rem}
.ag{margin-top:18px}
.ag-h{font-size:1.05rem;font-weight:800;color:var(--ink);margin:0 0 8px}
.ag-d{margin:0 0 10px}
.ag-d > summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;font-weight:800;color:var(--ink)}
.ag-d > summary::-webkit-details-marker{display:none}
.ag-d > summary::after{content:'▾';margin-left:4px;color:var(--muted)}
.ag-d[open] > summary::after{content:'▴'}
.ag-c{margin-left:auto;font-size:.82rem;font-weight:700;color:var(--muted)}
.jh-back{width:44px;height:44px;margin:-8px 0 -8px -10px;border:0;background:none;font-size:1.9rem;line-height:1;color:var(--ink);cursor:pointer}
.cf-raw{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.q-h{margin:16px 0 8px;font-size:1.05rem;font-weight:800;color:var(--ink)}
.surf-row{display:flex;align-items:center;gap:8px;margin:2px 0 12px;color:var(--ink);font-weight:600}
.surf-ch{background:none;border:0;padding:0 4px;min-height:44px;color:#7a5c2e;text-decoration:underline;font:inherit;font-weight:700;cursor:pointer}
.sec-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;margin:16px 0 0;padding:10px 12px;
  border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.sec-n.done{background:var(--gold);color:#12203a}
.sr-m{flex:1;min-width:0;display:flex;flex-direction:column}
.sr-t{font-weight:800}
.sr-s{font-size:.86rem;color:var(--muted);overflow-wrap:anywhere}
.sr-e{color:#7a5c2e;font-weight:700;text-decoration:underline}
.pt-i{display:block;line-height:0;margin-bottom:4px;color:var(--muted)}
.seg.paygrid button{flex-direction:column;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-size:.86rem}
.seg.paygrid button[aria-pressed="true"] .pt-i{color:#fff}
.rv-tog{display:flex;align-items:center;gap:12px;margin-top:14px}
.rv-tog span{flex:1;font-weight:700;color:var(--ink)}
.rv-tog .seg{flex:0 0 auto}
.rv-tog .seg button{min-width:64px}
.btn-x{min-width:44px;min-height:44px}
.rv2-all{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px 16px}
.rv-count{display:inline-flex;align-items:center;min-height:44px}
.wiz-pos{text-transform:none!important;font-weight:700;opacity:1!important;color:var(--ink)!important}
@media(max-width:767px){
  /* Today is the page itself, not a card inside it. */
  #setupCard{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
  /* My pay shows the cash; the strip only crowded every screen. */
  .cash-strip{display:none!important}
  /* The install tip belongs on Today only. */
  body.is-wiz:not(.on-today) .pwa{display:none!important}
  /* Review: the bar holds Send day report, nothing else. */
  body.on-review #barTotals .amt,body.on-review #barTax{display:none!important}
  body.on-review #doSubmit{width:100%;min-height:52px}
}
.res-jobs{margin:0 0 16px}
.res-jobs>summary{cursor:pointer;font-weight:700;min-height:48px;display:flex;align-items:center;padding:0 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);margin-bottom:12px}
/* QA round (2026-10-03): targets and contrast. */
.ls-ed{min-width:44px;min-height:44px}
.cal-from a{display:inline-flex;align-items:center;min-height:44px}
.tc-refresh{width:44px;margin:-10px -6px}
.tc.dim{opacity:1;background:var(--surface-2)}
.tc.dim .tc-time,.tc.dim .tc-s,.tc.dim .tc-st{color:var(--muted)}
.btn[aria-disabled="true"]{opacity:1!important;background:#5d6878!important;border-color:#5d6878!important;color:#fff!important}
.wiz-pos .wp-l{color:#4b5563}
/* Design sign-off (2026-10-03). */
.rv2-all .btn-sm{min-height:44px}
.xtra h3{text-transform:none!important;letter-spacing:0!important;font-size:1rem!important;flex-wrap:wrap}
.line-sum{cursor:pointer}
.tc-date{position:relative}
.tc-dl{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1.5px solid #cfc6b5;border-radius:99px;
  background:#fff;font-weight:700;color:var(--ink);white-space:nowrap}
.tc-date input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.tc-date input:focus-visible + .tc-dl,.tc-date:focus-within .tc-dl{outline:2px solid var(--gold);outline-offset:2px}
.res-jobs>summary{padding:12px 16px;line-height:1.3}
.res-more{padding:0!important}
.res-more>summary{padding:12px 16px;line-height:1.3}
.res-more>div{padding:0 16px 16px}
/* Before the first photo, Upload photos is a full-width navy card (mockup). */
.ph-row:not(:has(.ph-tile)) .ph-add{width:100%;height:72px;flex-direction:row!important;gap:10px!important;
  background:var(--ink);color:#fff;border:0;font-size:1rem}
/* Upload photo, under it: the same card, outlined (secondary). */
.ph-row:not(:has(.ph-tile)) .ph-add.ph-up{background:none;color:var(--ink);border:2px solid var(--ink);height:56px}
/* Guided job start (owner 2026-10-04). */
.qstart{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:10px}
.qs-b{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:12px;
  min-height:84px;padding:14px 16px;border:1.5px solid #cfc6b5;border-radius:14px;background:#fff;color:var(--ink);
  font:inherit;text-align:left;cursor:pointer}
.qs-b:hover{border-color:var(--gold)}
.qs-i{grid-row:1 / span 2;display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:#fbf3e4;color:#7a5c2e}
.qs-t{font-size:1.15rem;font-weight:800}
.qs-s{font-size:.88rem;color:var(--muted)}
/* "Something else" is a real button, not grey link text (owner 2026-10-05):
   full width, gold outline, same weight as the choices above it. */
.qs-other{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;margin-top:10px;padding:10px 14px;
  background:var(--surface,#fff);border:2px solid var(--gold);border-radius:12px;color:var(--ink);font:inherit;font-weight:700;
  font-size:.95rem;text-decoration:none;cursor:pointer;text-align:center}
.qs-other::before{content:"+";font-size:1.2rem;line-height:1;color:var(--gold-text,var(--gold))}
.qs-other[aria-expanded="true"]{background:var(--surface-2,#f3eee4)}
.qs-other[aria-expanded="true"]::before{content:"‘2"}
.qa-done{width:100%;min-height:52px;margin-top:12px}
/* Quiet pass (2026-10-04). */
.sec-wait{margin:-4px 0 4px;font-size:.88rem;color:var(--muted)}
.sec-dim{opacity:.55}
/* Calendar picker and completion photos (2026-10-03). */
.cal-pick{margin-top:16px}
.cal-item{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-top:8px;border:1px solid var(--line);
  border-radius:10px;background:var(--card)}
.cal-item .ci-main{flex:1;min-width:0}
.cal-item .ci-t{font-weight:700}
.cal-item .ci-s{font-size:.9rem;color:var(--muted);overflow-wrap:anywhere}
.cal-item .ci-tag{font-size:.8rem;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.cal-item button{min-height:44px;white-space:nowrap}
.cal-from{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:4px 0 4px}
.cal-from .cf-t{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.cal-from .cf-n{font-weight:700;margin-top:2px;overflow-wrap:anywhere}
.cal-from .cf-s{font-size:.92rem;margin-top:2px;overflow-wrap:anywhere}
.cal-from .cf-ph{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.cal-from .cf-ph a{min-height:0}
.cal-from .cf-ph img{width:76px;height:76px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.cal-from a{color:var(--gold)}
.ph-box{margin-top:16px}
.ph-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.ph-tile{position:relative;width:96px;height:96px;border-radius:10px;overflow:hidden;border:2px solid var(--line);background:#0003}
.ph-tile img{width:100%;height:100%;object-fit:cover;display:block}
.ph-tile .ph-st{position:absolute;left:0;right:0;bottom:0;font-size:.72rem;font-weight:700;padding:3px 5px;background:#000a;color:#fff}
.ph-tile.saved{border-color:var(--ok, #2e9d5b)}
.ph-tile.queued,.ph-tile.uploading{border-color:var(--gold)}
.ph-tile.failed{border-color:var(--bad)}
.ph-tile .ph-del{position:absolute;top:0;right:0;width:44px;height:44px;border-radius:50%;border:0;background:#000b;color:#fff;font-size:1.1rem;line-height:1}
.ph-add{width:96px;height:96px;border-radius:10px;border:2px dashed var(--gold);background:none;color:var(--gold);font-weight:700;font-size:.85rem;cursor:pointer}
.ph-why{margin-top:10px}
/* Photo labels (owner 2026-10-17): a caption under each thumbnail; the chips open under the photo being labelled. */
.ph-cell{display:flex;flex-direction:column;gap:4px;width:96px}
.ph-cell.open{width:100%}
.ph-cap{min-height:36px;padding:0 4px;border:0;background:none;color:var(--muted);font:inherit;font-size:.78rem;font-weight:700;line-height:1.2;text-align:left;cursor:pointer;text-decoration:underline}
.ph-cap.set{color:var(--ink);text-decoration:none}
.ph-chips{display:flex;flex-wrap:wrap;gap:6px}
.ph-chip{min-height:40px;padding:0 12px;border-radius:20px;border:1.5px solid var(--line);background:none;color:var(--ink);font:inherit;font-size:.86rem;font-weight:700;cursor:pointer}
.ph-chip[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#0b1c33}
/* Client sign-off (owner 2026-10-17, optional) */
.so-box{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.so-h{margin:0 0 6px;font-size:1rem}
.so-says{margin:6px 0 10px;font-weight:700;line-height:1.4}
.so-pad{margin-top:4px}
.so-pad canvas{display:block;width:100%;aspect-ratio:5/2;height:auto;background:#fff;border:2px dashed var(--line);border-radius:12px;touch-action:none;cursor:crosshair}
.so-img{display:block;width:260px;max-width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:10px;margin:4px 0 6px}
.so-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.so-acts .btn{min-height:44px}

/* sub-items */
.tv,.xtra{border:1px solid var(--line);border-radius:10px;padding:12px;margin:0 0 10px;background:#fbfcfd}
.tv h3,.xtra h3{margin:0;font-size:.85rem;font-weight:800;text-transform:uppercase;
                letter-spacing:.04em;color:var(--gold)}
.sub-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sub-head h3{flex:1}

/* The owner's per-line pay override. Deliberately set apart from the fields
   above it — it is not part of recording the job, it is a decision about it,
   and on a shared screen it should be obvious which is which. */
.ownerset{margin-top:12px;padding:10px 12px 2px;border:1px dashed var(--gold);
  border-radius:10px;background:rgba(176,141,87,.06)}
.ownerset-t{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.chips button{padding:9px 13px;border:1.5px dashed var(--line);background:#fff;border-radius:999px;
  font:inherit;font-size:.85rem;font-weight:600;color:var(--navy);cursor:pointer}
.chips button:hover{border-color:var(--gold);color:var(--gold)}
/* Quantity: - and + either side of the box, so the usual 1-3 is a tap and
   not a trip to the number keypad. The box still takes typing. */
.stepper{display:flex;align-items:stretch;gap:6px}
.stepper input{text-align:center;flex:1 1 auto;min-width:0}
.stepper button{flex:0 0 48px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--surface-2,#fff);color:var(--ink,inherit);
  font:inherit;font-size:1.3rem;font-weight:700;line-height:1;cursor:pointer}
.stepper button:active{border-color:var(--gold);color:var(--gold)}
/* The one-tap common job, beside + Add TV. */
.btn-kit{margin-left:8px}
/* Add buttons (owner 2026-10-03). The three main kinds of work share one
   row in equal thirds; everything else wraps below it, each row stretched
   to the full width so a short last row never leaves a lone narrow button.
   Never scrolls sideways. Two per row on a phone. */
.addmain{display:flex;gap:8px}
.addmore-r{display:flex;gap:8px;margin-top:8px}
.addmain button,.addmore button{font:inherit;font-weight:700;color:var(--navy);cursor:pointer;
  background:#fff;border:1.5px solid var(--line);border-radius:10px;text-align:center}
.addmain button{flex:1 1 0;min-width:0;padding:13px 8px;font-size:.95rem;border-color:var(--gold)}
.addmore button{flex:1 1 0;min-width:0;padding:11px 8px;font-size:.86rem;font-weight:600}
.addmain button:hover,.addmore button:hover{border-color:var(--gold);color:var(--gold)}
@media(max-width:560px){ .addmain button{padding:12px 4px;font-size:.9rem} }
/* The x counter in a card's header. */
.mult{display:flex;align-items:center;gap:6px}
.mult-x{color:var(--muted);font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.mult-n{min-width:1.4em;text-align:center}
.mult button{width:34px;height:34px;border:1.5px solid var(--line);border-radius:8px;
  background:var(--surface-2,#fff);color:var(--ink,inherit);font:inherit;font-size:1.1rem;
  font-weight:700;line-height:1;cursor:pointer}
.mult button:disabled{opacity:.35;cursor:default}
.mult button:not(:disabled):active{border-color:var(--gold);color:var(--gold)}

.sec-label{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
           color:var(--muted);margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--line)}
.sec-label:first-of-type{border-top:0;padding-top:0;margin-top:0}

/* check-before-submit block */
.confirm{margin-top:18px;padding:14px;border:1.5px solid var(--gold);border-radius:10px;
         background:#fffdf8}
.conf-t{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
        color:var(--gold);margin-bottom:10px}
.c-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
       padding:5px 0;font-size:.92rem}
.c-row b{font-variant-numeric:tabular-nums;white-space:nowrap}
.c-strong{border-top:1.5px solid var(--gold);margin-top:6px;padding-top:9px;font-weight:700;font-size:1.05rem}
.c-pay{color:var(--ok)} .c-pay b{color:var(--ok)}
.c-lab{margin:12px 0 5px}
.c-hint{font-size:.78rem;color:var(--muted);margin:8px 0 0;line-height:1.45}

/* cash-on-hand bar, top of the entry screen */
.cashbar{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy);
  background:#fffdf8;border:2px solid var(--gold);border-radius:var(--r);
  padding:13px 16px;margin:0 0 14px}
.cashbar-l{font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted)}
.cashbar b{flex:1;text-align:right;font-size:1.25rem;font-variant-numeric:tabular-nums}
.cashbar-r{font-size:.78rem;color:var(--gold);font-weight:700;white-space:nowrap}
@media(max-width:480px){
  .cashbar{flex-wrap:wrap}
  .cashbar b{flex:1 0 100%;text-align:left;margin:2px 0}
}

/* completeness */
.badge-ok{background:#e8f5ed;color:var(--ok)}
.badge-warn{background:#fff6e0;color:var(--warn)}
.card.appt.incomplete{border-left-color:var(--warn)}
.c-miss:empty{display:none}
.c-miss{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.c-miss-t{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
          color:var(--warn);margin-bottom:5px}
.c-miss ul{margin:0;padding-left:18px}
.c-miss li{font-size:.85rem;color:var(--warn);margin:2px 0}

/* the money field — loud while empty, quiet once done */
.field.money{margin:14px 0 2px}
.field.money label{font-size:.82rem;color:var(--navy);letter-spacing:.03em}
.money-wrap{position:relative}
.money-wrap::before{content:"$";position:absolute;left:14px;top:50%;
  transform:translateY(-50%);font-size:1.25rem;font-weight:700;
  color:var(--gold);pointer-events:none}
.field.money input{height:58px;padding:0 14px 0 34px;font-size:1.35rem;
  font-weight:700;font-variant-numeric:tabular-nums;
  border:2px solid var(--gold);border-radius:10px}
.field.money input:placeholder-shown{background:#fffaf0;
  box-shadow:inset 3px 0 0 var(--gold),0 0 0 3px rgba(176,141,87,.14)}
.field.money input:not(:placeholder-shown){border-color:#cfd6de;background:#fff;
  box-shadow:inset 3px 0 0 var(--ok)}
.field.money input::placeholder{color:#c9b391;font-weight:600}
.field.money input::-webkit-inner-spin-button,
.field.money input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* the cable line's arithmetic, shown so the price and the quantity cannot
   disagree silently the way they did while one field meant both */
.acc-total{margin:6px 0 0;font-size:.85rem;font-weight:700;color:var(--gold);
  font-variant-numeric:tabular-nums}

/* ---- the field that is actually missing --------------------------------
   A counted button and a list at the foot of the card told him HOW MANY
   things were missing and never WHICH BOX. These rules mark the box itself.
   Never applied on a fresh form — paint() only adds .pf-bad to a field he
   has left, or to everything once he has pressed Submit.

   SPECIFICITY IS LOAD-BEARING HERE. pay_theme_css() is emitted further down
   this <head> and restyles `.field.money input` in both placeholder states at
   0,3,1. A plain `.field.money.pf-bad input` ties that and loses on source
   order, which is exactly what happened the first time: the border went red
   and the field kept its gold "empty" fill and ring, so the box still read as
   waiting rather than wrong. Naming both pseudo-states takes it to 0,4,1.
   Colour only — no background change — so one rule set reads correctly on
   the dark theme and on the light baseline underneath it. */
.field.pf-bad > label,.field.money.pf-bad > label,.pf-lab-bad{color:var(--bad)}
.field.pf-bad input,.field.pf-bad select{border-color:var(--bad)}
/* The money box already speaks in a 3px inset bar: gold while empty, green
   once filled. Red is the third word in the same sentence. */
.field.money.pf-bad input,
.field.money.pf-bad input:placeholder-shown,
.field.money.pf-bad input:not(:placeholder-shown){border-color:var(--bad);
  box-shadow:inset 3px 0 0 var(--bad),0 0 0 3px rgba(248,113,113,.22)}
/* A picker has no box to outline, so the ring goes round the whole row and
   the label above it turns with it — paint() colours that label, because it
   is a sibling of the .seg rather than a child of it. */
.seg.pf-bad{border-radius:10px;box-shadow:0 0 0 2px var(--bad);padding:4px}

/* bar split */
.bar .split{display:flex;gap:18px}
.bar .split b{font-size:1.15rem}
.btn[aria-disabled="true"]{opacity:.45}

/* running total bar */
.bar{position:fixed;left:0;right:0;bottom:0;background:var(--navy);color:#fff;
     padding:12px 16px calc(12px + env(safe-area-inset-bottom));z-index:30;
     box-shadow:0 -2px 14px rgba(11,28,51,.22)}
.bar .in{max-width:720px;margin:0 auto;display:flex;align-items:center;gap:14px}
.bar .amt{flex:1}
.bar .amt b{display:block;font-size:1.45rem;line-height:1.1;font-variant-numeric:tabular-nums}
.bar .amt span{font-size:.74rem;opacity:.7;text-transform:uppercase;letter-spacing:.05em}
/* The figures above are billed + HST. Saying so, and showing the two halves,
   because "$1,197.80" under a column of round numbers reads as an arithmetic
   bug rather than as tax. Its own full-width row, not a third line inside the
   .amt column, so it stays on ONE line at 375px beside the Submit button. */
.bar-tax{display:block;margin-top:7px;font-size:.72rem;opacity:.72;
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
.bar-tax b{font-weight:700;opacity:.95}

/* ---- mobile wizard ---------------------------------------------------
   Below 767px — the width the nav header already switches at — the day is
   entered one appointment at a time: the date and the count, then each
   appointment on its own, then Review. At desktop width the long form is
   exactly what it was.

   Nothing in this stylesheet decides which step is on screen. applyMode()
   does that with the `hidden` attribute, because a media query and a step
   counter are two answers to the same question and they come apart the
   first time one of them is wrong. What is below is the chrome the wizard
   adds and nothing else, so every desktop rule above is untouched. */
[hidden]{display:none !important}

.wiz-nav{display:flex;align-items:center;gap:12px;margin-top:10px}
/* #barTotals stopped being the .in itself when the HST row went in below the
   totals, so the divider hangs off the id rather than off the class. */
.bar #barTotals + .wiz-nav{border-top:1px solid rgba(255,255,255,.14);padding-top:11px}
.wiz-pos{flex:1;text-align:center;font-size:.76rem;opacity:.78;
  text-transform:uppercase;letter-spacing:.05em}
.wiz-nav .btn{min-width:104px}
/* Three stacked rows in the bar on the Review step — totals, the HST split,
   the wizard nav — plus the safe area. */
body.is-wiz .wrap{padding-bottom:212px}

/* Review — a read-back rather than the form again, so it borrows the result
   sheet's language: what was recorded on the left, the figure on the right. */
.rv-lines{list-style:none;margin:10px 0 0;padding:0}
.rv-lines li{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.rv-lines li:last-child{border-bottom:0}
.rv-lines b{font-variant-numeric:tabular-nums;white-space:nowrap}
.rv-d{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
.rv-d.rv-own{color:var(--gold)}
.rv-empty{color:var(--muted);font-size:.88rem;margin:10px 0 0}
.rv-fix{margin-top:14px;width:100%}
.rv-count{background:none;border:0;padding:0;margin:10px 0 0;font:inherit;
  font-size:.85rem;color:var(--gold);text-decoration:underline;cursor:pointer}

/* messages */
.msg{padding:12px 14px;border-radius:9px;margin:0 0 14px;font-size:.9rem}
.msg.bad{background:#fdecea;color:var(--bad);border:1px solid #f5c6c2}
.msg.warn{background:#fff6e0;color:var(--warn);border:1px solid #f0dcae}
.msg.ok{background:#e8f5ed;color:var(--ok);border:1px solid #bde0ca}

/* result sheet */
table{width:100%;border-collapse:collapse}
th,td{padding:9px 6px;text-align:left;border-bottom:1px solid var(--line);font-size:.9rem;vertical-align:top}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.tot td{border-top:2px solid var(--navy);border-bottom:0;font-weight:800;font-size:1rem;padding-top:12px}
.detail{color:var(--muted);font-size:.78rem}
.err-txt{color:var(--bad);font-size:.82rem}
.big{font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums;margin:2px 0 0}

/* login */
.login{max-width:380px;margin:9vh auto;padding:0 16px}
.login .card{padding:26px}
.demo{font-size:.8rem;color:var(--muted);margin-top:16px;line-height:1.7}
.demo code{background:#eef1f5;padding:1px 6px;border-radius:4px}
@media(max-width:480px){ .grid2{grid-template-columns:1fr} }

/* ---- Save as PDF ---------------------------------------------------- *
   There is no PDF library here and there does not need to be: every phone
   and desktop browser can already print a page to a PDF file, and the
   result is this screen rather than a second rendering of it that could
   drift from the figures on it. The button just calls window.print().

   What comes off is the report and nothing else — the nav bar, the cash
   strip, every button and the "nothing sends until you press send" helper
   text are all screen furniture. .noprint is for anything that should
   disappear on paper without hunting for a selector. */
/* Closing summary. Tabular figures so the column reads as a ledger rather
   than as ragged text, and a gold rule above the total. */
.day-summary table{border-collapse:collapse}
.day-summary td{padding:7px 0;border-bottom:1px solid var(--line)}
.day-summary td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.day-summary__total td{border-bottom:none;border-top:2px solid var(--gold);
  padding-top:11px;font-size:1.05rem}

.print-head{display:none}
@media print{
  .day-summary{break-before:auto;break-inside:avoid;page-break-inside:avoid}
  .top, .cash-strip, .btn, .noprint { display:none !important; }
  .wrap { max-width:none; margin:0; padding:0 }
  body  { background:#fff; color:#000; font-size:10.5pt }
  .card { box-shadow:none; border:1px solid #bbb; margin:0 0 10px;
          break-inside:avoid; page-break-inside:avoid }
  /* Print stylesheets often append the href after a link. Here every link
     is an app route, so the URL is noise on a payslip. */
  a[href]:after { content:"" }
  .print-head{ display:block !important; margin:0 0 16px; line-height:1.6 }
  .print-head b{ font-size:13pt }
  @page { margin:14mm }
}
/* The strip is a SECOND ROW inside .top, not a sibling beneath it, so it
   inherits the header's sticky positioning and stays on screen while the
   page scrolls. That requires moving the header's padding off .top and onto
   .in, or the strip would be inset instead of spanning the full width.
   Emitted last, so these override the page's own header rules. */
.top{padding:0}
.top .in{padding:14px 16px}

/* always-visible cash strip, pinned under the header */
.cash-strip{display:flex;align-items:center;gap:10px;text-decoration:none;
  background:var(--gold);color:#0b1c33;padding:9px 16px;font-size:.9rem}
/* Navy on gold, not white: white on this gold is 3.1:1 and the faded label
   under it lower still (debug pass, 2026-09-22). Navy is 5.5:1. */
.cash-strip__l{font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em}
.cash-strip b{flex:1;text-align:right;font-size:1.05rem;
  font-variant-numeric:tabular-nums}
.cash-strip__r{font-size:.74rem;font-weight:700;white-space:nowrap}
.cash-strip--off{background:#9b1c16;color:#fff}   /* fixed: --bad lightens on the dark theme and white failed on it (2.8:1) */
.cash-strip__in{max-width:720px;margin:0 auto;display:flex;
  align-items:center;gap:10px;width:100%}
@media(max-width:420px){
  .cash-strip{padding:8px 16px}
  .cash-strip__l{font-size:.66rem}
  .cash-strip__r{display:none}
}/* The bottom bar and sidebar are in assets/crm.css (app shell, 2026-10-07). */
.sth-msg{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:6px;border-radius:12px;color:inherit;text-decoration:none}
.sth-msg{flex:0 0 auto}
.sth-msg + .sth-menu{margin-left:0}
.sth-msg.is-on,.sth-msg:hover{background:rgba(255,255,255,.12)}
.sth-refresh{display:none;border:0;background:none;cursor:pointer;font:inherit}
@media (min-width:1024px){ .sth .sth-refresh{display:inline-flex} }
.sth-msg .ui-badge{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:.7rem;line-height:18px}
/* One sticky wrapper holding both rows, so they move as a unit and the
   content below only ever has to clear one thing. */
.sth{position:sticky;top:0;z-index:60;background:#0a121e;
  border-bottom:1px solid #1d2a3d;
  /* Installed on an iPhone the app draws under the status bar
     (black-translucent + viewport-fit=cover), so the header grows by the
     status-bar height and the clock sits on the header's colour instead of
     over its text. The sides clear the notch in landscape. All three are 0
     in a normal browser tab and on phones without a notch (2026-10-06). */
  padding-top:env(safe-area-inset-top,0px);
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px)}
.sth-bar{height:56px}
.sth-in{height:100%;max-width:720px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:0}
.sth.is-admin .sth-in{max-width:1320px}
/* A gold hairline that fades at both ends rather than a hard rule edge to
   edge. On the admin screens it is solid and 2px — the one signal that says
   "this is the owner's side" without inventing a second hue. z-index 2 puts the
   line above the logo cell (z-index 1, assets/crm.css), which otherwise covered the
   line's top pixel and made it thinner and lower under the logo (owner 2026-10-12). */
.sth::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;z-index:2;
  background:linear-gradient(90deg,rgba(176,141,87,0),rgba(176,141,87,.55) 18%,
    rgba(176,141,87,.55) 82%,rgba(176,141,87,0))}
.sth.is-admin::after{height:2px;background:#B08D57}

/* ---- logo: the only left-hand element, on every screen --------------- *
   The small mark below 1024px; from 1024px the wide logo. Where a sidebar
   column sits under the header, the brand fills the top of that column and
   the logo is centred over it (assets/crm.css, "brand cell"). */
.sth-brand{display:flex;align-items:center;justify-content:center;text-decoration:none;flex:0 0 auto}
.sth-pic{display:block}
.sth-logo{display:block;height:34px;width:auto}
@media (min-width:1024px){ .sth-logo{height:auto;width:176px} }
.sth-brand:hover .sth-logo{filter:brightness(1.1)}
.sth-brand:focus-visible{outline:2px solid #B08D57;outline-offset:-3px;border-radius:6px}

/* ---- nav ------------------------------------------------------------ */
.sth-nav{display:flex;align-items:center;gap:2px;margin-left:28px;flex:0 0 auto}
.sth-nv{position:relative;display:inline-flex;align-items:center;height:36px;padding:0 12px;
  border-radius:8px;font-size:.82rem;font-weight:500;letter-spacing:.01em;
  color:#93a1b5;text-decoration:none;white-space:nowrap;
  transition:color .12s ease,background-color .12s ease}
.sth-nv:hover{color:#e8edf4;background:rgba(255,255,255,.05)}
.sth-nv:focus-visible{outline:2px solid #B08D57;outline-offset:2px}
.sth-nv.is-on{color:#fff;background:rgba(176,141,87,.12)}
/* The underline hugs the BAR's baseline, not the pill's: (56-36)/2 = 10. */
.sth-nv.is-on::after{content:"";position:absolute;left:10px;right:10px;bottom:-10px;
  height:2px;background:#B08D57;border-radius:2px}

/* ---- account menu --------------------------------------------------- */
.sth-menu{position:relative;margin-left:auto;flex:0 0 auto}
.sth-menu>summary{display:flex;align-items:center;gap:8px;height:40px;
  padding:5px 10px 5px 5px;border:1px solid #26344a;border-radius:999px;
  background:transparent;cursor:pointer;list-style:none;
  -webkit-tap-highlight-color:transparent}
.sth-menu>summary::-webkit-details-marker{display:none}
.sth-menu>summary:hover{background:rgba(255,255,255,.05);border-color:#33445f}
.sth-menu[open]>summary{background:#151f2e;border-color:#3a4d6b}
.sth-menu>summary:focus-visible{outline:2px solid #B08D57;outline-offset:2px}
.sth-ini{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,#c9a06a,#96733f);color:#0d1520;
  font-size:.74rem;font-weight:800;letter-spacing:.02em;flex:0 0 30px}
.sth-nm{font-size:.82rem;font-weight:600;color:#cdd7e4;white-space:nowrap;
  max-width:110px;overflow:hidden;text-overflow:ellipsis}
.sth-chev{width:7px;height:7px;border-right:2px solid #93a1b5;border-bottom:2px solid #93a1b5;
  transform:rotate(45deg) translateY(-2px);transition:transform .14s ease;flex:0 0 7px}
.sth-menu[open] .sth-chev{transform:rotate(-135deg) translateY(-2px)}

/* z-index 5 INSIDE the header: it inherits the bar's 60 against the page, so
   it never has to compete with it. */
.sth-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:5;width:272px;
  background:#16202f;border:1px solid #2b3a52;border-radius:12px;padding:6px;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.72),0 2px 8px rgba(0,0,0,.4);
  max-height:calc(100vh - 80px);overflow-y:auto}
@media(prefers-reduced-motion:no-preference){
  .sth-menu[open] .sth-panel{animation:sthIn .12s ease-out}
  @keyframes sthIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}
.sth-id{padding:12px 12px 10px}
.sth-id b{display:block;font-size:.88rem;font-weight:700;color:#e8edf4}
.sth-id span{display:block;font-size:.74rem;font-weight:500;color:#93a1b5;margin-top:1px}
.sth-photo{object-fit:cover;display:block;border-radius:50%;background:#151f2e}
.sth-id.has-photo{display:flex;align-items:center;gap:10px}
.sth-photo-lg{width:44px;height:44px;flex:0 0 44px}
.sth-lbl{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:#6f8099;padding:10px 10px 4px}
.sth-it{display:flex;flex-direction:column;justify-content:center;min-height:38px;
  padding:6px 10px;border-radius:8px;font-size:.85rem;font-weight:500;
  color:#cdd7e4;text-decoration:none}
.sth-it.has-ic{flex-direction:row;align-items:center;gap:12px}
.sth-it.has-ic svg{flex:0 0 auto}
.sth-it:hover{background:rgba(255,255,255,.06);color:#fff}
/* Inset, so the panel's own radius cannot clip the ring. */
.sth-it:focus-visible{outline:2px solid #B08D57;outline-offset:-2px}
.sth-it.is-on{color:#fff;background:rgba(176,141,87,.10)}
.sth-sub span{display:block;font-size:.72rem;font-weight:500;color:#6f8099;margin-top:1px}
.sth-back{color:#dfc79f}
.sth-back:hover{background:rgba(176,141,87,.14);color:#f0e0c4}
.sth-danger{color:#d98a8a}
.sth-danger:hover{background:rgba(200,80,80,.12);color:#f0b4b4}
.sth-hr{height:1px;background:#26344a;margin:6px 8px;border:0}
/* The destinations live in the bar on desktop, so the panel hides its copy. */
.sth-goto{display:none}

/* ---- row 2: the mode strip, conditional ----------------------------- */
.sth-mode{border-top:1px solid rgba(255,255,255,.04)}
.sth-mode .sth-in{height:34px;gap:10px}
.sth-dot{width:6px;height:6px;border-radius:50%;flex:0 0 6px}
.sth-mtxt{font-size:.8rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sth-mexit{margin-left:auto;font-size:.76rem;font-weight:700;text-decoration:none;
  white-space:nowrap;flex:0 0 auto}
.sth-mexit:hover{text-decoration:underline}
.sth-mode.is-file{background:rgba(176,141,87,.14);border-bottom:1px solid rgba(176,141,87,.32)}
.sth-mode.is-file .sth-mtxt{color:#e3cda6;font-weight:600}
.sth-mode.is-file .sth-mtxt b{color:#fff;font-weight:800}
.sth-mode.is-file .sth-dot{background:#B08D57}
.sth-mode.is-file .sth-mexit{color:#e3cda6}
.sth-mode.is-view{background:rgba(147,161,181,.08);border-bottom:1px solid #26344a}
.sth-mode.is-view .sth-mtxt{color:#93a1b5;font-weight:500}
.sth-mode.is-view .sth-mtxt b{color:#e8edf4;font-weight:700}
.sth-mode.is-view .sth-dot{background:#93a1b5}
.sth-mode.is-view .sth-mexit{color:#93a1b5}

/* ---- breakpoints ---------------------------------------------------- *
   The nav moves INTO the menu rather than scrolling sideways. A horizontally
   scrolling nav forces overflow-y to auto as well, which clips any popover
   inside it and silently kills position:sticky on ancestors — the exact
   class of bug that reads as "it collapsed when I clicked something". */
@media(max-width:767px){
  /* The nav collapses into the menu EXCEPT items marked to survive: the
     owner's Dashboard, and BOTH of a technician's two screens. A technician
     with no surviving item had no visible way between his day form and his
     own figures on the device he actually uses. */
  .sth-nav{display:flex;margin-left:12px}
  .sth-nv:not(.sth-keep){display:none}
  .sth-goto{display:block}
  .sth-nm{display:none}
  .sth-menu>summary{padding:4px;gap:6px}
}
/* A technician keeps BOTH his links in the bar, and at 320px the bar ran
   ~354px wide — the avatar that opens the menu (and Sign out) sat off the
   right edge (debug pass, 2026-09-22). Tightened below 360px only. */
@media(max-width:359px){
  .sth-in{padding:0 10px !important}
  .sth-logo{height:30px}
  .sth-nav{margin-left:6px !important}
  .sth-nv{padding:0 7px;font-size:.8rem}
  .sth-menu>summary{padding:3px !important}
}
@media(max-width:559px){
  .sth-bar{height:52px}
  .sth-in{padding:0 14px}
  .sth-panel{position:fixed;left:8px;right:8px;width:auto;top:auto;
    margin-top:8px;max-height:calc(100vh - 120px)}
  .sth-mode .sth-in{height:auto;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
  .sth-mtxt{white-space:normal;overflow:visible}
}
@media print{ .sth{display:none} }.pwa{background:rgba(176,141,87,.12);border-bottom:1px solid rgba(176,141,87,.38)}
.pwa-in{max-width:1320px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:11px}
.pwa-ico{color:var(--gold);flex:0 0 auto;display:flex}
.pwa-txt{margin:0;flex:1 1 auto;font-size:.86rem;line-height:1.35;color:var(--ink)}
.pwa-go{flex:0 0 auto;padding:7px 14px;border:0;border-radius:8px;background:var(--gold);
  color:#12203a;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.pwa-x{flex:0 0 auto;width:30px;height:30px;border:0;background:none;color:var(--muted);
  font-size:1.4rem;line-height:1;cursor:pointer;border-radius:8px}
.pwa-x:hover{color:var(--ink)}
@media(max-width:700px){ .pwa-in{padding:10px 14px;gap:9px} .pwa-txt{font-size:.82rem} }/* ===================================================================== */
/* Light "outdoor" theme — every screen in the portal (2026-10-03).      */
/*                                                                       */
/* The owner approved the merged redesign: warm paper, white cards, navy */
/* actions, gold for selection. Technicians read this in daylight on a   */
/* phone, where the old dark theme was the harder read (UX review). The  */
/* header stays navy (payout-header.php).                                */
/*                                                                       */
/* Dark theme (2026-10-04, owner-approved): every screen follows the     */
/* device. A device set to dark gets the dark block at the foot of this  */
/* function; a light device sees exactly the light rules above it. No    */
/* toggle. Page-specific dark overrides sit at the end of each page's    */
/* own <style>, after this. Print is always light (screen-only query).   */
/* ===================================================================== */
:root{
  /* light dark: native pickers, selects and scrollbars follow the device. */
  color-scheme: light dark;
  --bg:#f6f3ec;          /* warm paper */
  --surface:#ffffff;     /* cards, tiles */
  --surface-2:#f3eee4;   /* inputs, bars, raised strips */
  --card:#ffffff;
  --line:#e2dacb;        /* hairlines, warm */
  --ink:#0b1c33;         /* navy text */
  --muted:#5b6778;       /* 5.1:1 on --bg, clears AA */
  --ok:#1d7a46;
  --bad:#b42318;
  --warn:#8a5a00;
}
body{background:var(--bg);color:var(--ink)}
.card,.kpi{background:var(--surface);border-color:var(--line)}
h2,th,label,.kpi span,.fhint,.muted,.empty{color:var(--muted)}
th,td{border-bottom-color:var(--line)}

input,select,textarea{background:#fff;color:var(--ink);border-color:#cfc6b5}
input::placeholder{color:#7b8696}
select[multiple] option:checked{background:var(--gold);color:#12203a}

/* Navy text on gold: #fff on gold is 2.6:1 and fails. */
.btn{color:#12203a}
.btn-g{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-g:hover{background:#13294a}

tr.tot td{border-top-color:var(--gold)}
.bar{background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(11,28,51,.06)}

.msg.ok  {background:#e7f4ec;color:var(--ok)}
.msg.bad {background:#fbeae8;color:var(--bad)}
.msg.warn{background:#fbf1dc;color:var(--warn)}
.msg     {background:var(--surface-2);color:var(--ink)}
.msg.ok,.msg.bad,.msg.warn{border:1px solid currentColor}

.tech-link{border-bottom-color:rgba(11,28,51,.3)}
.btn-view{border-color:var(--line);color:var(--ink)}
.btn-view:hover{border-color:var(--gold);color:#7a5c2e}
tbody tr:hover td{background:rgba(176,141,87,.06)}

/* Cards and the appointment shells. */
.tv,.xtra,.appt,.vas-stat{background:var(--surface);border-color:var(--line)}
.card{box-shadow:0 1px 2px rgba(11,28,51,.04)}

/* Choices: white pills, navy when picked — the strongest contrast outdoors. */
.seg button{background:#fff;color:var(--ink);border-color:#cfc6b5}
.seg button:hover{border-color:var(--gold)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.seg.gold button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#12203a}
.chips button{background:#fff;color:var(--ink);border-color:#cfc6b5}
.chips button:hover{border-color:var(--gold);color:#7a5c2e}
.addmain button,.addmore button{background:#fff;color:var(--ink);border-color:#cfc6b5}
.addmain button{border-color:var(--gold)}
.addmain button:hover,.addmore button:hover{border-color:var(--gold);color:#7a5c2e}

.confirm{background:#fbf6ec;border-color:var(--gold)}
.cash{background:#fbf6ec;border-color:var(--gold)}

.field.money input{background:#fff;color:var(--ink)}
.field.money input:placeholder-shown{background:#fbf6ec;
  box-shadow:inset 3px 0 0 var(--gold),0 0 0 3px rgba(176,141,87,.16)}
.field.money input:not(:placeholder-shown){background:#fff;border-color:#cfc6b5;box-shadow:inset 3px 0 0 var(--ok)}
.field.money input::placeholder{color:#8d7a5c}
.field.money .cur{color:#7a5c2e}
.field.money label{color:var(--muted)}

.btn-o{background:#fff;color:var(--ink);border-color:#cfc6b5}
.btn-o:hover{border-color:var(--gold);color:#7a5c2e}
.btn-x{color:var(--muted)}
.btn-x:hover{color:var(--bad)}

.badge-ok{background:#e7f4ec;color:var(--ok)}
.badge-warn{background:#fbf1dc;color:var(--warn)}
.demo code{background:var(--surface-2);color:var(--ink)}
.login .card{background:var(--surface)}

.sec-label{color:var(--muted);border-top-color:var(--line)}
.c-row{color:var(--ink)}
.c-row span{color:var(--muted)}
.c-hint,.hint{color:var(--muted)}
hr,.rule{border-color:var(--line)}
/* The bottom bar was navy with white text; now white, so its text is navy
   (it was white on white — design review, 2026-10-03). */
.bar{color:var(--ink)}
.bar .muted,.bar span{color:var(--muted)}
/* Gold TEXT needs the darker shade on paper to clear AA (#B08D57 is ~3:1,
   #7a5c2e ~5.9:1). Gold stays for fills and borders. */
.cal-from a,.ph-add,.tv h3,.xtra h3,.ownerset-t,.conf-t,.acc-total,.cashbar-r,.rv-d.rv-own,.rv-count,
.day-edit,.bonus-t,.fdd-c,th[aria-sort] .th-sort,.ds-today a,details.give summary,
.presets a[aria-current]{color:#7a5c2e}
[style*="color:var(--gold)"]{color:#7a5c2e !important}
/* Phones: My pay shows the cash, so the strip no longer crowds every screen
   (design review 2). */
@media(max-width:767px){ .cash-strip{display:none!important} }
/* The install tip belongs on Today only (design sign-off). */
@media(max-width:767px){ body:not(.on-today) .pwa{display:none!important} }
/* 44px minimum tap targets on the phone (design review, stage 3). */
.wiz-nav .btn{min-height:48px}
.mult button{width:44px;height:44px}
.pwa-x{width:44px;height:44px}
/* Tab badges on the navy sidebar: solid, white text. */
.ob{background:#8a5a00;color:#fff}
.ob.hot{background:#b42318;color:#fff}
/* ===================================================================== */
/* Dark theme — devices set to dark (2026-10-04). Palette from the       */
/* design consultant, every text pair checked at 4.5:1 or better:       */
/* ink 14.7:1, muted 7.2:1, faint 5.2:1, gold text 9.2:1 on surface.    */
/* Screen only, so a printed copy stays light.                          */
/* ===================================================================== */
@media screen and (prefers-color-scheme: dark){
:root{
  color-scheme: dark;
  --bg:#08111d;
  --surface:#101b2c;
  --surface-2:#16233a;
  --card:#101b2c;
  --line:#22324a;
  --ink:#e8edf4;
  --muted:#9aa8bb;
  --faint:#8696ac;
  --ok:#4fc38a;
  --bad:#f2777a;
  --warn:#e4b860;
  --gold-text:#d8b98a;   /* gold as TEXT; #B08D57 stays for fills and borders */
  --field:#0e1828;       /* inputs */
  --field-line:#2a3b55;  /* input and button edges */
}
input,select,textarea{background:var(--field);color:var(--ink);border-color:var(--field-line)}
input::placeholder,textarea::placeholder{color:var(--faint)}

/* Primary button: gold fill, navy text (5.5:1). Navy fill vanishes on a
   navy-black page. */
.btn-g{background:var(--gold);color:#0b1c33;border-color:var(--gold)}
.btn-g:hover{background:#c09a62}

.bar{background:#0e1828;border-top-color:var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.45);color:var(--ink)}

/* Status tints: a wash of the status colour, never a pale panel. */
.msg.ok  {background:rgba(79,195,138,.12); color:var(--ok)}
.msg.bad {background:rgba(242,119,122,.12);color:var(--bad)}
.msg.warn{background:rgba(228,184,96,.12); color:var(--warn)}
.badge-ok{background:rgba(79,195,138,.14);color:var(--ok)}
.badge-warn{background:rgba(228,184,96,.14);color:var(--warn)}

.tech-link{border-bottom-color:rgba(232,237,244,.35)}
.btn-view{border-color:var(--field-line)}
.btn-view:hover{color:var(--gold-text)}
tbody tr:hover td{background:rgba(255,255,255,.03)}
.card{box-shadow:none}

/* Choices: raised dark pills; the picked one is gold with navy text. */
.seg button{background:var(--field);border-color:var(--field-line)}
.seg button[aria-pressed="true"],.seg.gold button[aria-pressed="true"]{background:var(--gold);color:#0b1c33;border-color:var(--gold)}
.chips button,.addmain button,.addmore button{background:var(--surface-2);border-color:var(--field-line)}
.addmain button{border-color:rgba(176,141,87,.75)}
.chips button:hover,.addmain button:hover,.addmore button:hover{color:var(--gold-text)}

.confirm,.cash{background:rgba(176,141,87,.08)}

.field.money input{background:var(--field)}
.field.money input:placeholder-shown{background:rgba(176,141,87,.10)}
.field.money input:not(:placeholder-shown){background:var(--field);border-color:var(--field-line)}
.field.money input::placeholder{color:#a8916b}
.field.money .cur{color:var(--gold-text)}

.btn-o{background:transparent;border-color:var(--field-line)}
.btn-o:hover{color:var(--gold-text)}

/* Gold text: the light theme's #7a5c2e is 2.6:1 here; the lighter gold
   carries it. */
.cal-from a,.ph-add,.tv h3,.xtra h3,.ownerset-t,.conf-t,.acc-total,.cashbar-r,.rv-d.rv-own,.rv-count,
.day-edit,.bonus-t,.fdd-c,th[aria-sort] .th-sort,.ds-today a,details.give summary,
.presets a[aria-current]{color:var(--gold-text)}
[style*="color:var(--gold)"]{color:var(--gold-text) !important}
/* Inline status buttons carry white text; on the lighter dark-theme
   status colours that is under 3:1, navy is over 7:1. */
.btn[style*="background:var(--ok)"],.btn[style*="background:var(--bad)"]{color:#0b1c33 !important}

/* Leaderboard (payout-leaderboard.php is emitted after this on My pay, so
   these carry one more class than the rules they replace). */
.lbx .lbx-hd h2,.lbx .lbx-you b{color:var(--gold-text)}
.lbx .lbx-av{border-color:rgba(0,0,0,.25)}
.lbx .lbx-bar{background:rgba(255,255,255,.08)}
/* Account-menu captions: #6f8099 is 4.1:1 on the panel. */
.sth-lbl,.sth-sub span{color:var(--faint)}
}
@media print{
  :root{color-scheme:light; --bg:#fff; --surface:#fff; --surface-2:#fff; --line:#ccc; --ink:#000; --muted:#444}
  body{background:#fff;color:#000}
  .card,.kpi{background:#fff;border-color:#ccc}
}/* ---- dark theme, this page (2026-10-04) ------------------------------ *
   pay_theme_css() above carries the tokens and the shared rules; these are
   the light literals only this page declares. Light devices never see it. */
@media screen and (prefers-color-scheme: dark){
  .js-c{background:var(--field);border-color:var(--field-line)}
  .sec-n,.rv2-brand,.tc-brand{background:var(--field-line);color:var(--ink)}
  .sec-n.done{background:var(--gold);color:#0b1c33}
  .sec-note{color:var(--gold-text);background:rgba(228,184,96,.14)}
  .qa-b,.qmore button,.cc-b,.qs-b,.rv2-fix,.tc-ic,.tc-dl{background:var(--surface-2);border-color:var(--field-line)}
  .cc-r{background:var(--field);border-color:var(--field-line)}
  .line-sum,.rv2-job,.rv2-sum,.sec-row{background:var(--surface-2)}
  .tc{background:var(--surface);box-shadow:none}
  .qa-i,.ls-i,.ls-ed,.ls-done,.tc-refresh,.tc-time,.tc-ic,.surf-ch,.sr-e,.qs-i,
  .cc-b[aria-pressed="true"] .cc-i{color:var(--gold-text)}
  .cc-b[aria-pressed="true"]{background:rgba(176,141,87,.16)}
  .qs-i{background:rgba(176,141,87,.16)}
  .tc-st.ok{background:rgba(79,195,138,.14)}
  .tc-st.warn{background:rgba(228,184,96,.14)}
  .tc-st.done{background:rgba(154,168,187,.14)}
  .rv2-st,.rv2-ci{color:#0b1c33}
  .seg.paygrid button[aria-pressed="true"] .pt-i{color:#0b1c33}
  .wiz-pos .wp-l{color:var(--muted)}
  /* Upload photos, before the first one: the primary action, so gold. */
  .ph-row:not(:has(.ph-tile)) .ph-add{background:var(--gold);color:#0b1c33}
  .ph-row:not(:has(.ph-tile)) .ph-add.ph-up{background:none;color:var(--gold);border-color:var(--gold)}
  .pay-hero{background:#0b1c33 !important;border-color:var(--field-line) !important}
  .cashbar{background:rgba(176,141,87,.08);color:var(--ink)}
  .btn-n{background:var(--surface-2);border:1px solid var(--field-line);color:var(--ink)}
  /* Bottom-bar captions faded with opacity read 4.2:1 here; muted at full
     strength is 7:1. */
  .bar .amt span,.bar-tax{opacity:1;color:var(--muted)}
}
/* ---- E-transfer receipt: the row under the tiles and its sheet (2026-10-11) ---- */
.etr-row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;margin:10px 0 2px;padding:8px 12px;border:1px solid var(--line);border-radius:10px}
.etr-t{margin:0;font-weight:600;flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.etr-sheet .field{margin:0 0 12px}
.etr-sheet .field label{display:block;font-weight:700;font-size:.9rem;margin:0 0 4px}
.etr-sheet .field input{width:100%;font-size:16px;min-height:48px}
.etr-p{margin:4px 0 12px;color:var(--muted);line-height:1.45}
.etr-small{font-size:.85rem;margin:12px 0 0}
.etr-err{margin:0 0 10px;color:var(--bad);font-weight:600}
.etr-acts{display:flex;flex-direction:column;gap:10px}
.etr-acts .ui-btn{width:100%;min-height:50px}
/* ---- One appointment: the sheet that lists what is missing before sending (2026-10-12) ---- */
.vm-p{margin:4px 0 12px;color:var(--muted);line-height:1.45}
.vm-h{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:14px 0 6px}
.vm-row{display:flex;align-items:flex-start;gap:10px;width:100%;min-height:48px;margin:0 0 8px;padding:10px 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;text-align:left}
button.vm-go{cursor:pointer;align-items:center}
.vm-i{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--warn);color:var(--surface);
  font-weight:800;font-size:.8rem;line-height:22px;text-align:center}
.vm-b{flex:1 1 auto;min-width:0}
.vm-t{display:block;font-weight:700;font-size:1rem;text-transform:none;letter-spacing:0;color:var(--ink);overflow-wrap:anywhere}
.vm-chk{display:flex;align-items:center;gap:10px}
.vm-chk input{width:22px;height:22px;flex:0 0 auto}
.vm-b textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:16px;padding:8px 10px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink)}
.vm-small{margin:6px 0 0;font-size:.85rem;color:var(--muted)}
.vm-e{flex:0 0 auto;font-weight:700;color:var(--muted)}
.vm-done{border-color:var(--ok)}
.vm-done .vm-i{background:var(--ok)}
.vm-acts{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.vm-acts .ui-btn{width:100%;min-height:50px}