/* PestFolio app: one design, native iOS calm. System font, large titles that collapse into the top bar, inset grouped lists, blue accent, frosted tab bar.
   Field use: 44px+ targets, dark text on white for sunlight, 16px+ inputs, no pinch zoom (set in app.html). */
:root{--bg:#f2f2f7;--surface:#fff;--sunk:#f7f7fa;--line:rgba(60,60,67,.16);--line2:rgba(60,60,67,.26);--txt:#0b0b0f;--txt2:#3a3a40;--mut:#636369;
 --acc:#0a63d1;--acc-h:#084fa8;--acc-soft:#eaf2fd;--acc-line:#bcd5f7;--ok:#1a7f37;--ok-soft:#e9f6ec;--red:#b91c1c;--red-soft:#fdeeee;--amb:#92400e;--amb-soft:#fff6e6;--fill:rgba(118,118,128,.1);
 --g:var(--acc);--body:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Segoe UI',Roboto,'IBM Plex Sans',system-ui,sans-serif;--brand:var(--body);--ar:'IBM Plex Sans Arabic','Noto Naskh Arabic',sans-serif;
 --r:14px;--r2:10px;--sh:none;--sh2:0 12px 40px -12px rgba(0,0,0,.28);
 /* Round 22: every colour the themes change is a token (theme 1 values) */
 --on-acc:#fff;--on-txt:#fff;--acc-soft-h:#dfeafb;--ring:rgba(10,99,209,.14);--red-h:#991b1b;--red-line:#f3c4c4;--red-bg2:#fffafa;--warn-bar:#d97706;--warn-bg:#fffbf3;--warn-line:#f3d2a6;--ok-bg:#f4fbf7;--ok-line:#b9e3d0;
 --tag-bg:#f0efeb;--ph:#8b8d93;--ph2:#7a7c82;--input:rgba(118,118,128,.1);--input-focus:#fff;--seg-bg:rgba(118,118,128,.12);--seg-sh:0 1px 3px rgba(0,0,0,.14);--hair:rgba(60,60,67,.14);
 --top-bg:rgba(242,242,247,.8);--bar-bg:rgba(249,249,251,.84);--tab-ink:#7c7c82;--glow:#f8f8fb;--h-font:var(--body);--paper:#fff;
 --cf-bg:var(--ok);--cf-win:linear-gradient(135deg,#22a04c,#157030);--cf-ink:#fff;--cf-sub:rgba(255,255,255,.9);--cf-disc:#fff;--cf-tick:var(--ok);--cf-shadow:0 14px 34px -10px rgba(26,127,55,.6),0 2px 6px rgba(16,24,40,.12);
 --cf-glow-a:rgba(52,199,89,.35);--cf-glow-b:rgba(52,199,89,.55);--cf-bg0:#e8f6ec;--cf-ink0:#12602b;--cf-bg1:#a9dcb7;--cf-bg2:#3f9c5a;--cf-rm-shadow:0 8px 24px -12px rgba(16,24,40,.22),0 1px 3px rgba(16,24,40,.08);--cf-rm-glow:0 0 18px 0 var(--cf-glow-a),0 12px 30px -12px rgba(26,127,55,.5);--cf-border:transparent;
 --btn-bg:var(--acc);--btn-bg-h:var(--acc-h);--on-btn:var(--on-acc);--btn-r:12px;--btn-sh:none;--ghost-bg:var(--acc-soft);--ghost-ink:var(--acc-h);--ghost-sh:none;--input-r:10px;--input-sh:none;--chip-r:10px;
 --tbh:56px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;touch-action:manipulation}
body{margin:0;font:16px/1.5 var(--body);background:var(--bg);color:var(--txt);padding-bottom:96px;overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(10,99,209,.12)}
a,button,label,summary,input,select,textarea{touch-action:manipulation}
a{color:var(--acc-h);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--h-font);font-weight:600;letter-spacing:-.015em;line-height:1.2;margin:0}
h1{font-size:1.75rem;letter-spacing:-.025em;margin:16px 0 16px}h2{font-size:1.25rem}h3{font-size:1.06rem;margin:0 0 8px}h4{font-size:.95rem;color:var(--txt2);margin:16px 0 8px}
[lang=ar],i[lang=ar]{font-family:var(--ar)}
:focus-visible{outline:3px solid rgba(10,99,209,.45);outline-offset:2px}
.wrap{max-width:720px;margin:0 auto;padding:8px 16px}
.eyebrow{margin:16px 0 0;font-size:.85rem;font-weight:600;color:var(--acc-h);letter-spacing:.02em}
h1.company{margin-top:4px}
.grouplabel{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin:24px 4px 8px}
/* top bar */
.topbar{position:sticky;top:0;z-index:6;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:8px 16px;padding-top:max(8px,env(safe-area-inset-top));min-height:56px}
.brand{display:flex;align-items:center;gap:8px;font:600 1.2rem var(--brand);letter-spacing:-.03em;text-decoration:none;color:var(--txt);flex:1;min-width:0}.brand img{width:28px}
.pill{font-size:.8rem;font-weight:600;background:var(--acc-soft);color:var(--acc-h);border:1px solid var(--acc-line);padding:3px 10px;border-radius:99px;white-space:nowrap}.pill:empty,.net:empty{display:none}
.net{font-size:.8rem;font-weight:600;background:var(--amb-soft);color:var(--amb);padding:3px 10px;border-radius:99px;white-space:nowrap}.net.off{background:var(--red-soft);color:var(--red)}
/* cards */
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 16px;box-shadow:var(--sh)}
.card.warn{border-color:var(--warn-line);background:var(--warn-bg)}.card.ok{border-color:var(--ok-line);background:var(--ok-bg)}
.card>h3:first-child{margin-bottom:8px}
.more{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none}.more::after{content:"›";margin-left:6px;font-size:1.2em}
/* forms */
label{display:block;font-size:.875rem;font-weight:500;color:var(--txt2);margin:16px 0 0;min-width:0;max-width:100%}
.group>h3+label,.group>h3+.chips{margin-top:8px}
input,select,textarea{display:block;width:100%;max-width:100%;min-width:0;font:16px/1.3 var(--body);color:var(--txt);padding:12px 14px;min-height:50px;border:1px solid var(--line2);border-radius:var(--r2);background:var(--surface);margin-top:6px;transition:border-color .12s,box-shadow .12s}
textarea{min-height:100px;line-height:1.45}
select{-webkit-appearance:none;appearance:none;padding-right:40px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2362646b' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") no-repeat right 16px center}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 4px var(--ring)}
input::placeholder,textarea::placeholder{color:var(--ph)}
/* Round 17: date, time and select values sit in the vertical middle like text inputs. WebKit on iOS lays the value of a
   date/time field out from the top of the content box (the UA inline-flex centring is lost with display:block), so the
   content box is made exactly one line tall: 13px + 24px + 13px = 50px. Empty iOS date fields keep that line height too. */
input[type=date],input[type=time],input[type=datetime-local],input[type=month],select{-webkit-appearance:none;appearance:none;height:50px;line-height:24px;padding-top:13px;padding-bottom:13px;text-align:left}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value,input[type=datetime-local]::-webkit-date-and-time-value,input[type=month]::-webkit-date-and-time-value{text-align:left;margin:0;min-height:24px;line-height:24px}
input::-webkit-datetime-edit{padding:0;line-height:24px}input::-webkit-datetime-edit-fields-wrapper{padding:0}
input::-webkit-calendar-picker-indicator{margin:0 0 0 6px;padding:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.two>*{min-width:0}.two label{margin-top:16px}
.check{display:flex;gap:12px;align-items:flex-start;color:var(--txt);font-size:.95rem;font-weight:400;min-height:44px;padding-top:4px}.check input{width:22px;height:22px;min-height:0;flex:none;margin:1px 0 0;accent-color:var(--acc);display:inline-block}
/* picker buttons (open a bottom sheet) */
.sr-select{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;opacity:0;pointer-events:none;overflow:hidden;clip:rect(0 0 0 0);font-size:16px}
label{position:relative}
.pick{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:50px;margin-top:6px;padding:12px 14px;border:1px solid var(--line2);border-radius:var(--r2);background:var(--surface);font:16px/1.3 var(--body);color:var(--txt);text-align:left;cursor:pointer}
.pick:disabled{background:var(--sunk);color:var(--mut);cursor:default}
.pick .pv{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pick .pv.ph{color:var(--ph2)}
.pick .chev{flex:none;width:8px;height:8px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg) translateY(-3px)}
.pick:focus-visible{outline:0;border-color:var(--acc);box-shadow:0 0 0 4px var(--ring)}
.sheet-wrap{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center}
.sheet-bg{position:absolute;inset:0;background:rgba(20,21,24,.38);animation:fade .18s}
.sheet{position:relative;width:100%;max-width:640px;max-height:78vh;display:flex;flex-direction:column;background:var(--surface);border-radius:20px 20px 0 0;box-shadow:var(--sh2);padding:8px 0 max(12px,env(safe-area-inset-bottom));animation:up .22s cubic-bezier(.2,.8,.2,1)}
.sheet-grip{width:40px;height:5px;border-radius:9px;background:var(--line2);margin:4px auto 4px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:4px 16px 8px}.sheet-head b{font-size:1.06rem}
.sheet-search{margin:0 16px 8px;width:auto}
.sheet-list{overflow:auto;padding:0 8px;-webkit-overflow-scrolling:touch}
.opt{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:52px;padding:12px;border:0;border-bottom:1px solid var(--line);background:none;font:16px/1.3 var(--body);color:var(--txt);text-align:left;cursor:pointer;border-radius:10px}
.opt:last-child{border-bottom:0}.opt:active{background:var(--sunk)}
.opt.sel{color:var(--acc-h);font-weight:600}.opt.sel::after{content:"";flex:none;width:7px;height:13px;border:solid var(--acc);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);margin-right:6px}
.pad{padding:16px}
@keyframes up{from{transform:translateY(100%)}}@keyframes fade{from{opacity:0}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;background:var(--btn-bg);color:var(--on-btn);border:0;border-radius:var(--r2);padding:12px 20px;font:600 1rem var(--body);text-decoration:none;cursor:pointer;text-align:center;box-shadow:0 1px 2px rgba(8,79,168,.25),inset 0 1px 0 rgba(255,255,255,.15);transition:background .12s,transform .08s}
.btn:hover{background:var(--btn-bg-h)}.btn:active{transform:scale(.985)}
.btn.block{display:flex;width:100%;margin:16px 0 0}.btn.big{min-height:56px;font-size:1.06rem}.btn.sm{min-height:44px;padding:8px 14px;font-size:.95rem}
.btn.ghost{background:var(--surface);color:var(--txt);border:1px solid var(--line2);box-shadow:var(--sh)}.btn.ghost:hover{background:var(--sunk)}
.btn:disabled{opacity:.5}
.link{background:none;border:0;color:var(--acc-h);font:600 .95rem var(--body);cursor:pointer;padding:10px 0;min-height:44px}.red{color:var(--red)}
details>summary{list-style:none;cursor:pointer}details>summary::-webkit-details-marker{display:none}details[open]>summary{margin-bottom:12px}
.muted{color:var(--mut);font-size:.9rem}.small{font-size:.9rem}.center{text-align:center}.err{color:var(--red);min-height:0;font-size:.95rem;font-weight:600;margin:0}.err:empty{display:none}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
hr{border:0;border-top:1px solid var(--line);margin:16px 0}
/* lists */
.list{list-style:none;margin:0;padding:0}.list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);min-height:56px}.list li:last-child{border:0}
.list li>*{min-width:0}.list .grow{flex:1;text-decoration:none;color:inherit}.card.list{padding:4px 16px}
.list li .tag{flex:none;max-width:46%;white-space:normal;text-align:center;line-height:1.25}.list li>span:first-child{flex:1}
.menu li a{display:block;width:100%;padding:6px 0;text-decoration:none;color:var(--txt);font-weight:500}
.tag{display:inline-block;font-size:.8rem;font-weight:600;padding:3px 10px;border-radius:99px;background:var(--tag-bg);color:var(--txt2);white-space:nowrap}
.tag.ok{background:var(--ok-soft);color:var(--ok)}.tag.expiring,.tag.r60,.tag.r90{background:var(--amb-soft);color:var(--amb)}.tag.expired,.tag.r30,.tag.rexpired{background:var(--red-soft);color:var(--red)}
.chem.expired{box-shadow:inset 4px 0 0 var(--red),var(--sh)}.chem.expiring{box-shadow:inset 4px 0 0 var(--warn-bar),var(--sh)}
/* dashboard */
.today .row{margin-bottom:4px}.today h2{font-size:1.25rem}
.empty{display:flex;flex-direction:column;gap:4px;padding:16px;margin-top:8px;border:1px dashed var(--line2);border-radius:var(--r2);background:var(--sunk)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 8px}
.stats div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:12px 8px;text-align:center;box-shadow:var(--sh)}
.stats b{display:block;font:600 1.6rem/1.1 var(--body);letter-spacing:-.03em;color:var(--txt)}.stats span{font-size:.8rem;color:var(--mut)}
/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{margin:0;cursor:pointer}.chip input{display:none}
.chip span{display:inline-flex;align-items:center;gap:6px;min-height:44px;border:1px solid var(--line2);border-radius:99px;padding:8px 14px;font-size:.95rem;font-weight:500;color:var(--txt);background:var(--surface);transition:background .1s,border-color .1s}
.chip i{font-style:normal;font-family:var(--ar);color:var(--mut)}
.chip input:checked+span{background:var(--acc-soft);border-color:var(--acc);color:var(--acc-h);font-weight:600;box-shadow:inset 0 0 0 1px var(--acc)}
.chip input:checked+span::before{content:"";width:6px;height:11px;border:solid var(--acc);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);margin-right:2px}
.chip input:checked+span i{color:var(--acc-h)}
.chemrow{border:1px solid var(--line);border-radius:var(--r2);padding:12px;margin-bottom:12px;background:var(--sunk)}
.chemrow .pick{margin-top:0}
.addother{display:flex;gap:8px;margin-top:12px}.addother input{flex:1;margin:0}.addother .btn{flex:none}
.filebtn{text-align:center;cursor:pointer;margin:0;width:100%}
.qtyrow{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:1rem;color:var(--txt)}.qtyrow input{width:8em;margin:0;display:inline-block}.c-unit{font-weight:600;white-space:nowrap}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.thumbs img{width:80px;height:80px;object-fit:cover;border-radius:10px}
img.logo{max-height:60px;margin:8px 0}
.auth{max-width:440px;margin:32px auto}.auth h1{font:600 2rem/1.1 var(--brand);letter-spacing:-.03em}
/* job form: grouped sections, sticky progress header, sticky save bar */
.group{padding:16px 16px 20px;scroll-margin-top:80px}
.gh{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-size:1.06rem}
.secno{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--bg);border:1px solid var(--line);font-size:.85rem;font-weight:600;color:var(--txt2)}
.gt{flex:1}.gnote{font-size:.8rem;font-weight:500;color:var(--mut)}
.group.done .secno{background:var(--ok);border-color:var(--ok);color:#fff;font-size:0}.group.done .secno::before{content:"✓";font-size:.9rem}
body.formmode{padding-bottom:140px}body.formmode .tabs{display:none}body.formmode .app-disc{display:none}
.savebar{position:fixed;left:0;right:0;bottom:0;z-index:6;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:8px 16px calc(8px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:4px}
.savebar .btn{margin:0;max-width:688px;width:100%;align-self:center}.savebar .err{text-align:center}
/* bottom tabs */
.tabs{position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;justify-content:space-around;gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:5}
.tabs a{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;min-height:48px;text-align:center;text-decoration:none;color:var(--mut);font-size:.88rem;font-weight:500;border-radius:12px}
.tabs a.on{color:var(--txt);font-weight:700;background:var(--bg)}
/* Round 16: confirmations (one system for every action). A white card with a self-drawing check, above the tab bar and the save bar,
   never in the way: it ignores taps unless it has Undo. Errors are red; milestones are a bit bigger. */
.toast{--tx:-50%;--ty:-10px;position:fixed;left:50%;top:calc(var(--tbh,56px) + 8px);transform:translateX(var(--tx));z-index:80;display:flex;align-items:center;gap:12px;width:max-content;max-width:min(440px,calc(100% - 24px));box-sizing:border-box;background:var(--surface,#fff);color:var(--txt);padding:10px 14px 10px 10px;border-radius:14px;border:1px solid var(--line2,rgba(0,0,0,.08));box-shadow:0 10px 30px -8px rgba(16,24,40,.28),0 2px 6px rgba(16,24,40,.08);font-size:.95rem;line-height:1.3;pointer-events:none;animation:npop .32s cubic-bezier(.2,.9,.3,1.25) both}
.toast[hidden]{display:none}
.toast.out{animation:nout .2s ease-in both}
.toast.hasundo,.toast .nundo{pointer-events:auto}
.toast .nico{flex:none;width:30px;height:30px;display:grid;place-items:center}
.toast .nico svg{width:30px;height:30px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.toast .nc{fill:var(--acc);stroke:none}.toast .nico path{stroke:#fff}
.toast .nk{stroke-dasharray:16;stroke-dashoffset:16;animation:ndraw .34s .14s ease-out forwards}
.toast .nmsg{display:flex;flex-direction:column;min-width:0}.toast .nmsg b{font-weight:600}
.toast .nmsg small{color:var(--txt2);font-size:.84rem;margin-top:1px}
.toast .nundo{flex:none;margin-left:6px;border:0;background:none;color:var(--acc);font:inherit;font-weight:600;padding:8px 6px;min-height:40px;cursor:pointer;border-radius:8px}
.toast .nundo:hover,.toast .nundo:focus-visible{background:var(--acc-soft)}
.toast.n-err{border-color:var(--red-line);background:var(--red-soft,#fdecec)}.toast.n-err .nc{fill:var(--red)}.toast.n-err .nmsg b{color:var(--red)}
.toast.n-info .nc{fill:var(--txt2)}
.toast.n-win{padding:12px 18px 12px 12px;font-size:1rem}.toast.n-win .nico,.toast.n-win .nico svg{width:36px;height:36px}.toast.n-win .nc{fill:var(--ok)}
.toast.n-win{animation:npop .42s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes npop{from{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.94)}to{opacity:1;transform:translate(var(--tx),0) scale(1)}}
@keyframes nout{to{opacity:0;transform:translate(var(--tx),calc(var(--ty) * .6)) scale(.98)}}
@keyframes ndraw{to{stroke-dashoffset:0}}
/* What just changed glows softly for a moment */
.flash{animation:nflash 1.8s ease-out}
@keyframes nflash{0%,30%{background-color:var(--acc-soft);box-shadow:0 0 0 3px var(--acc-soft)}100%{background-color:transparent;box-shadow:0 0 0 3px transparent}}
/* Milestone confetti: two dozen pieces, under a second */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:79;overflow:hidden}
.confetti i{position:absolute;width:7px;height:11px;border-radius:2px;opacity:0;animation:conf .95s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes conf{0%{opacity:1;transform:translate(0,0) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 90px)) rotate(var(--r))}}
.donecheck.draw svg path{stroke-dasharray:1;stroke-dashoffset:1;animation:ndraw .45s .15s ease-out forwards}
.donecheck.draw{animation:npopc .4s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes npopc{from{transform:scale(.6);opacity:0}}
.donehero.dayend .donecheck{background:var(--ok);color:#fff}
.dayline{display:flex;flex-direction:column;gap:2px;margin:4px 0 10px;animation:npopc .45s .15s cubic-bezier(.2,.9,.3,1.3) both}.dayline b{color:var(--ok);font-size:1.05rem}.dayline span{color:var(--txt2);font-size:.9rem}

.disclaimer{font-size:.78rem;color:var(--mut);text-align:center;padding:8px 16px 16px;max-width:720px;margin:0 auto}
.portal{padding-bottom:24px}.portal-head{display:flex;gap:12px;align-items:center;margin:16px 0}.portal-head img{max-height:56px}.portal-head h1{margin:0}
html,body{overflow-x:hidden}@supports (overflow-x:clip){html,body{overflow-x:clip}}
@media (max-width:400px){.wrap{padding:8px 12px}.card{padding:14px}.group{padding:14px 14px 18px}.two{gap:8px}h1{font-size:1.6rem}.tabs a{font-size:.82rem}}
/* validation */
.ferr{color:var(--red);font-size:.9rem;font-weight:600;margin:6px 0 0}.ferr:empty{display:none}.ferr::before{content:"! ";font-weight:800}
.invalid select,.invalid input,select.invalid,input.invalid,textarea.invalid,label.invalid input,label.invalid select,label.invalid textarea,label.invalid .pick{border-color:var(--red);background-color:var(--red-bg2);box-shadow:0 0 0 1px var(--red)}
.chips.invalid .chip span,.sigbox.invalid .sigtap{border-color:var(--red)}
#chems.invalid .c-qty{border-color:var(--red);background:var(--red-bg2)}
/* signatures */
.sigbox{margin-top:6px}
.sigtap{width:100%;height:112px;border:1.5px dashed var(--line2);border-radius:var(--r2);background:var(--sunk);color:var(--acc-h);font:600 1.02rem var(--body);cursor:pointer}
.sigprev{display:block;width:100%;max-height:150px;object-fit:contain;border:1px solid var(--line);border-radius:var(--r2);background:#fff;pointer-events:none}
.sigmodal{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;flex-direction:column;padding:16px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}
.sigm-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:12px;font-size:1.1rem}
.sigm-canvas{flex:1;width:100%;min-height:0;border:1.5px dashed var(--line2);border-radius:var(--r);background:#fff;touch-action:none;box-shadow:var(--sh)}
.sigm-btns{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px;margin-top:12px}.sigm-btns .btn{margin:0}
body.noscroll{overflow:hidden}
@media (orientation:landscape){.portrait-hint{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.toast .nk,.donecheck.draw svg path{stroke-dashoffset:0}.flash{animation:nflash 1.8s ease-out!important}.confetti{display:none}}


/* ---------- native calm layer (formerly design B) ---------- */
.ti{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tbtitle{display:none}
.seg{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;padding:2px;background:var(--seg-bg);border-radius:9px}
.seg button{min-height:40px;min-width:0;border:0;border-radius:7px;background:none;font:600 .9rem var(--body);color:var(--txt2);cursor:pointer;padding:0 12px}
.seg button.on{background:var(--surface);color:var(--txt);box-shadow:var(--seg-sh)}
body{background:var(--bg)}
.wrap{padding:4px 20px}
h1{font-size:2.125rem;font-weight:700;letter-spacing:.005em;margin:8px 0 16px}
h1.company{font-size:1.9rem}
.eyebrow{color:var(--mut);font-weight:600;text-transform:uppercase;font-size:.8rem;letter-spacing:.04em}
.topbar{background:var(--top-bg);border-bottom:1px solid transparent;transition:border-color .2s}
body.scrolled .topbar{border-bottom-color:var(--line)}
.brand{font-weight:600;font-size:1.05rem;letter-spacing:-.01em}.brand img{transition:opacity .2s}
.tbtitle{display:block;position:absolute;left:50%;transform:translateX(-50%);max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:1.02rem;opacity:0;transition:opacity .2s;pointer-events:none}
body.scrolled .tbtitle{opacity:1}body.scrolled .brand span,body.scrolled .brand{color:transparent}body.scrolled .brand img{opacity:0}
.card{border:0;box-shadow:var(--sh-card);border-radius:var(--r);padding:20px;margin-bottom:24px}
.card.list{padding:0 0 0 20px}.card.list li{padding-right:20px}
.list li{border-bottom:.5px solid var(--line2);min-height:52px}
.grouplabel{font-weight:400;text-transform:uppercase;font-size:.8rem;letter-spacing:.02em;color:var(--mut);margin:28px 20px 8px}
label{font-weight:400;color:var(--mut);font-size:.85rem}
input,select,textarea,.pick{border:0;background-color:var(--input);border-radius:var(--input-r);box-shadow:var(--input-sh)}
input:focus,select:focus,textarea:focus{background-color:var(--input-focus);box-shadow:0 0 0 2px var(--acc)}
.pick:disabled{background-color:rgba(118,118,128,.06)}
.chip span{border:0;border-radius:var(--chip-r);background:var(--input);min-height:44px;box-shadow:var(--input-sh)}
.chip input:checked+span{background:var(--acc);color:var(--on-acc);box-shadow:none}.chip input:checked+span::before{border-color:var(--on-acc)}.chip input:checked+span i{color:var(--on-acc);opacity:.85}
.btn{border-radius:var(--btn-r);box-shadow:var(--btn-sh);font-weight:600}
.btn.ghost{background:var(--ghost-bg);color:var(--ghost-ink);border:0;box-shadow:var(--ghost-sh)}
.tag{border-radius:6px}
.stats div{border:0;box-shadow:none;border-radius:var(--r)}
.stats b{font-weight:700}
.tabs{background:var(--bar-bg);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);border-top:.5px solid var(--line2);padding-top:4px}
.tabs a{flex-direction:column;gap:2px;font-size:.72rem;font-weight:500;min-height:50px;color:var(--tab-ink);background:none}
.tabs a .ti{display:block}
.tabs a.on{color:var(--acc);background:none;font-weight:600}
.group{padding:20px}.secno{border:0;background:var(--acc-soft);color:var(--acc-h)}
.savebar{background:var(--bar-bg);border-top:.5px solid var(--line2)}
.chemrow{border:0;background:var(--bg)}
.sigtap{border:1.5px dashed var(--line2);background:var(--bg);color:var(--acc)}
.sheet{border-radius:14px 14px 0 0}.opt{border-bottom:.5px solid var(--line2);border-radius:0}

/* ---------- roles: top bar mode switch ---------- */
.modeseg{flex:none;width:150px}.modeseg button{min-height:36px;padding:0 8px;font-size:.88rem}
body.hasmode .tbtitle{display:none!important}
body.hasmode.scrolled .brand,body.hasmode.scrolled .brand img{color:inherit;opacity:1}
.net{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:430px){body.hasmode .bname{display:none}body.hasmode .brand{flex:none}body.hasmode .topbar{justify-content:space-between}}
/* ---------- field: Today ---------- */
.vlist{list-style:none;margin:0;padding:0}
.list li.visit,.visit{display:grid;grid-template-columns:52px 1fr;gap:4px 12px;padding:16px 20px 16px 16px;border-bottom:.5px solid var(--line2)}
.list li.visit:last-child,.visit:last-child{border-bottom:0}
.vtime{font-weight:700;font-size:1rem;color:var(--txt);padding-top:2px;font-variant-numeric:tabular-nums}.vtime small{display:block;font-weight:500;color:var(--mut);font-size:.75rem}
.vmain{min-width:0}.vmain b{display:block;font-size:1.06rem}.vmain .muted{overflow-wrap:anywhere}
.vnote{margin:6px 0 0;font-size:.92rem;color:var(--txt2);background:var(--bg);border-radius:8px;padding:8px 10px}
/* Round 26: one notes field per visit; a note merged from the contract keeps its line break. */
.vnote,#vnotes dd,#ctnotes dd{white-space:pre-line}
.vlinks{display:flex;gap:16px;flex-wrap:wrap}.vlinks a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none;font-size:.95rem}
.vact{grid-column:2;margin-top:4px}.vact .btn{width:100%;margin:0}
.btn.done{background:var(--ok-soft);color:var(--ok)}.btn.wait{background:var(--amb-soft);color:var(--amb)}.btn.cont{background:var(--acc-soft);color:var(--acc-h)}
.visit.isdone .vmain b{color:var(--txt2)}
.unplanned{display:flex;justify-content:center;margin:8px 0 24px}
.empty .unplanned{justify-content:flex-start;margin:8px 0 0}
.unplanned small{display:block;color:var(--mut);font-weight:400}
.empty.big{align-items:flex-start;padding:20px;border:0;background:var(--surface)}
/* ---------- office: overview, schedule ---------- */
.trow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px 12px 0;border-bottom:.5px solid var(--line2);min-height:52px}
.trow:last-child{border-bottom:0}.trow .grow{flex:1;min-width:0;text-decoration:none;color:inherit}.trow .tag{flex:none}
.techhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:14px 20px 4px 0}.techhead b{font-size:1rem}
.tag.todo{background:var(--acc-soft);color:var(--acc-h)}.tag.unassigned{background:var(--amb-soft);color:var(--amb)}
.dayhead{display:flex;justify-content:space-between;align-items:baseline;margin:24px 4px 8px}.dayhead h3{margin:0;font-size:1.06rem}
.srow{padding:12px 20px 12px 0;border-bottom:.5px solid var(--line2)}.srow:last-child{border-bottom:0}
.srow .top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.srow .top>div{min-width:0}
.srow .assign{display:flex;align-items:center;gap:10px;margin-top:8px}.srow .assign .pick{margin-top:0;min-height:44px;padding:8px 12px}.srow .assign>span{flex:none;font-size:.85rem;color:var(--mut)}
.srow .assign>div,.srow .assign>label{flex:1;min-width:0;margin:0}
.daynav{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin-bottom:8px}.daynav input{margin:0}
/* ---------- sign-in: company code, who is working, PIN ---------- */
.who{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.who button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:120px;padding:12px;border:0;border-radius:var(--r);background:var(--surface);font:600 1rem var(--body);color:var(--txt);cursor:pointer;text-align:center}
.who button:active{background:var(--acc-soft)}
.avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--acc-soft);color:var(--acc-h);font-weight:700;font-size:1.1rem}
input.pin{font-size:2rem;letter-spacing:.5em;text-align:center;font-variant-numeric:tabular-nums;min-height:64px;padding-left:.5em}
.hint{background:var(--acc-soft);color:var(--acc-h);border-radius:10px;padding:10px 12px;font-size:.95rem;margin:12px 0 0}
/* ---------- job form: visit summary when started from a visit ---------- */
.locked{margin:8px 0 0;display:grid;gap:2px}.locked div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:.5px solid var(--line2)}.locked div:last-child{border:0}
.locked dt{color:var(--mut);font-size:.9rem}.locked dd{margin:0;font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}
.roles{display:flex;flex-wrap:wrap;gap:6px}.codebox{font:700 1.4rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}
[hidden]{display:none!important}
.savebar .actions{display:flex;gap:8px;width:100%;max-width:688px;align-self:center}.savebar .actions .btn{width:auto}.savebar #cancel{flex:none;padding:0 18px}.savebar #save{flex:1;min-width:0}
.card.vlist{padding:0}
.list li.visit{align-items:start}
.topbar .brand{min-height:44px}
a.link{display:inline-flex;align-items:center;text-decoration:none;padding:0}
/* ---------- round 2: detail pages, stat links, schedule bar, stock register, completion ---------- */
.backlink{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:4px 0 -4px -4px;padding:0 4px;font-weight:600;text-decoration:none;color:var(--acc)}
.backlink span{font-size:1.5rem;line-height:1}
.stats a.stat,.stats .stat{display:block;background:var(--surface);border-radius:var(--r);padding:12px 8px;text-align:center;text-decoration:none;color:var(--txt);min-height:76px}
.stats a.stat:active{background:var(--acc-soft)}.stats .stat span{display:block;font-size:.82rem;color:var(--mut);line-height:1.25;margin-top:2px}
.stats .stat.bad b{color:var(--red)}.stats.mini{margin:4px 0 8px}.stats.mini .stat{background:var(--bg);min-height:0;padding:10px 6px}
.stats:has(> :nth-child(4)){grid-template-columns:repeat(4,1fr)}
.techsec{padding:0 0 4px 20px}.techsec .list li{padding-right:20px}
.techhead{display:flex;align-items:center;gap:12px;padding:14px 20px 10px 0;border-bottom:.5px solid var(--line2)}.techhead .grow{min-width:0}
.techsec.unassigned{box-shadow:inset 4px 0 0 var(--warn-bar)}
.avatar.sm{width:40px;height:40px;font-size:.95rem;flex:none}.avatar.warn{background:var(--amb-soft);color:var(--amb)}.avatar.lg{width:64px;height:64px;font-size:1.4rem;flex:none}
.schedbar{background:var(--surface);border-radius:var(--r);padding:12px;margin-bottom:16px;display:grid;gap:10px}
.seg a{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:7px;font:600 .95rem var(--body);color:var(--txt2);text-decoration:none}
.seg a.on{background:var(--surface);color:var(--txt);box-shadow:var(--seg-sh)}
.schedbar .daynav{margin:0}
.rangelbl{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;margin:0;color:var(--txt);font-weight:600;font-size:1rem;text-align:center;cursor:pointer;border-radius:10px;background:var(--fill)}
.rangelbl input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.schedbar>.link{justify-self:center;min-height:44px}
.filterbar{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--acc-soft);color:var(--acc-h);border-radius:10px;padding:0 12px;margin-bottom:12px;font-weight:600}
.dayempty{margin:0 4px 8px}.dayhead.today h3{color:var(--acc)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btnrow.wide{margin:0 0 16px}.btnrow.wide .btn{flex:1 1 140px}
.kv{margin:0;display:grid}.kv div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:.5px solid var(--line2)}.kv div:last-child{border:0}
.kv dt{color:var(--mut);font-size:.9rem;flex:none}.kv dd{margin:0;text-align:right;min-width:0;overflow-wrap:anywhere;font-weight:500}
.chev{flex:none;width:8px;height:8px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(-45deg);margin-left:4px}
.list li a.grow{display:block;min-height:44px}#userlist li a.grow{display:flex;align-items:center;gap:12px}
.siteedit form{width:100%}
.search{margin:0 0 12px}
.ctline{color:var(--txt2)}
.card.warn{box-shadow:inset 4px 0 0 var(--warn-bar)}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.tags:empty{display:none}
.stock{flex:none;text-align:right;min-width:64px}.stock b{display:block;font-size:1.15rem;font-variant-numeric:tabular-nums}.stock small{color:var(--mut)}
.bigstock b{font-size:2.2rem;font-weight:700;letter-spacing:-.02em}.bigstock span{color:var(--mut)}
table.mini{width:100%;border-collapse:collapse;margin:12px 0;font-size:.92rem;table-layout:fixed}
table.mini th{text-align:left;color:var(--mut);font-weight:500;padding:6px 4px;border-bottom:.5px solid var(--line2)}table.mini td{padding:8px 4px;border-bottom:.5px solid var(--line2);overflow-wrap:anywhere;vertical-align:top}
table.mini tr.expired td{color:var(--red)}table.mini td:last-child,table.mini th:last-child{text-align:right}
.moves .qty{flex:none;font-variant-numeric:tabular-nums}.qty.pos{color:var(--ok)}.qty.neg{color:var(--txt2)}
.subform{background:var(--bg);border-radius:12px;padding:12px;margin:8px 0}
.userhead{display:flex;align-items:center;gap:16px;margin:8px 0 16px}.userhead h1{margin:0}
.pinbig{font:700 1.6rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2em;display:inline-block}
.rstat{display:inline-block;font-size:.85rem;font-weight:600;margin-top:4px}
.donehero{text-align:center;padding:28px 20px}.donecheck{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 12px;border-radius:50%;background:var(--ok-soft);color:var(--ok);font-size:2.2rem;font-weight:700}
.mailstate{border-radius:10px;padding:12px;margin:12px 0 0;background:var(--bg);text-align:left}
#mailstate{border-radius:10px;padding:12px;margin:12px 0 0;background:var(--bg);text-align:left}
.visit.ro .vact{display:none}
.more{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none}
.rstat{display:flex;flex-wrap:wrap;align-items:center;gap:6px;grid-column:2}
.donecheck svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mailstate.ok,#mailstate.ok{background:var(--ok-soft);color:var(--ok)}.mailstate.expiring,#mailstate.expiring{background:var(--amb-soft);color:var(--amb)}.mailstate.expired,#mailstate.expired{background:var(--red-soft);color:var(--red)}
.techhead .grow{flex:1}.techhead .btn{flex:none}
details.card:not([open])#newvisit,details.card:not([open])#newct,details.card:not([open])#newclient,details.card:not([open])#adduser{display:none}
#view > .tag{margin-bottom:12px}

.formtitle{font-size:1.6rem;margin:8px 0 16px}
/* Grouped action list (iOS style): one full-width row per action, destructive actions in red */
.actlist{list-style:none;padding:0;overflow:hidden}.actlist li+li{border-top:1px solid var(--line)}
.actrow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:14px 16px;border:0;background:none;font:16px/1.3 var(--body);color:var(--acc-h);text-align:left;cursor:pointer}
.actrow:hover,.actrow:active{background:var(--sunk)}.actrow:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.actrow .chev{flex:none;width:8px;height:8px;border-right:2px solid var(--mut);border-top:2px solid var(--mut);transform:rotate(45deg);margin-right:4px}
.actrow.danger{color:var(--red)}
.actpanel>.row{margin-bottom:8px}.actpanel>.row h3{margin:0}
.btn.danger{background:var(--red);color:#fff;border:0}.btn.danger:hover{background:var(--red-h)}
.formsec{margin:20px 0 4px;padding-top:16px;border-top:1px solid var(--line)}
.planline{margin:8px 0 12px;padding:10px 12px;background:var(--acc-soft);border-radius:var(--r2);color:var(--txt2);font-size:.95rem}
.planline:empty{display:none}
#mysig .sigprev,#usig .sigprev{display:block;max-width:100%;height:80px;object-fit:contain;background:var(--sunk);border-radius:var(--r2);margin:4px 0 8px}
/* Custom repeat sheet (Google Calendar style) */
.rsheet{max-height:92vh}.rs-body{overflow:auto;padding:0 16px 8px;-webkit-overflow-scrolling:touch}
.rs-lab{display:block;margin:14px 0 6px;font-weight:600;font-size:.95rem;color:var(--txt)}
.rs-every{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center}.rs-every input{margin:0}
.rs-unit button{min-height:46px}
.rs-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.daychip{min-height:44px;min-width:0;border-radius:99px;border:1px solid var(--line2);background:var(--surface);font:600 1rem var(--body);color:var(--txt2);cursor:pointer;padding:0}
.daychip.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.rs-endrow{display:flex;align-items:center;gap:10px}.rs-endrow .check{flex:none;min-width:76px}.rs-endrow input[type=date]{flex:1;margin:0}.rs-endrow input[type=number]{width:90px;margin:0}
#rs-sum{margin-top:14px}
#plantext{margin:0 0 8px}
.tbsf{margin-top:8px}
/* Opening stock: small secondary buttons, file picker, import preview (table on desktop, stacked rows on phones) */
.minorrow{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}.minorrow .btn{flex:1 1 150px;width:auto;min-height:44px;font-size:.93rem;padding:8px 12px}
#impstep1 .btn,#impstep2 .btn{width:auto}
.filebtn{position:relative;overflow:hidden;margin-top:8px}.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:16px}
.tablecard{padding:6px 12px}
.imptable{margin:4px 0}.imptable .c-row{width:44px}.imptable .c-qty{width:16%}.imptable .c-st{width:20%}
.imptable th:last-child,.imptable td:last-child{text-align:left}
.imptable tr.bad td{background:var(--red-soft)}.imptable tr.bad:not(.reason) td{border-bottom:0}
.imptable tr.bad td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.imptable tr.reason td{padding-top:0;color:var(--red);font-weight:600;font-size:.88rem}
.imptable tr.ex td{color:var(--mut)}.imptable tr.note td{padding-top:0;border-bottom:.5px solid var(--line2)}.imptable tr.good:has(+ tr.note) td{border-bottom:0}
.imptable .tag{margin:0;max-width:none}
@media (max-width:640px){
 .imptable,.imptable tbody,.imptable tr,.imptable td{display:block;width:auto!important}.imptable thead{display:none}
 .imptable tr{padding:8px 0;border-bottom:.5px solid var(--line2)}.imptable tr.bad{padding:8px 10px;border-radius:10px;border:0;margin:6px 0 0;background:var(--red-soft)}
 .imptable tr.bad.reason{margin:0;border-radius:0 0 10px 10px;padding-top:0}.imptable tr.bad:has(+ tr.reason){border-radius:10px 10px 0 0}
 .imptable td{border:0!important;padding:2px 0;display:flex;gap:8px;text-align:left!important;box-shadow:none!important;background:none!important}
 .imptable td[data-l]::before{content:attr(data-l);flex:0 0 76px;color:var(--mut);font-size:.85rem}
 .imptable td[data-l]>*{min-width:0}.imptable td[data-l="Product"]{display:block}.imptable td[data-l="Product"]::before{display:none}
 .imptable tr.note{border-top:0;padding-top:0;margin-top:-6px}
}
table.mini.imptable td:last-child,table.mini.imptable th:last-child,table.mini.imptable tr.reason td,table.mini.imptable tr.note td{text-align:left}
/* Visit detail and links to it */
a.vopen{color:inherit;text-decoration:none}a.vopen b::after{content:"›";margin-left:6px;color:var(--mut);font-weight:400}
#vstatus{margin:-4px 0 12px}#vstatus .tag{margin-bottom:0}
.minorrow.quiet{justify-content:flex-start}.minorrow.quiet .btn{flex:0 1 auto}
#startjob,#openreport{margin:0 0 16px}
/* Reports: logbook card, filters, result count */
.linkcard{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;border:1px solid var(--acc-line);background:var(--acc-soft)}
.linkcard .grow{display:flex;flex-direction:column;gap:2px;min-width:0}.linkcard b{color:var(--acc-h);font-size:1.05rem}
.linkcard .chev{flex:none;width:10px;height:10px;border-right:2px solid var(--acc-h);border-top:2px solid var(--acc-h);transform:rotate(45deg)}
.filters{padding-top:2px}.filters .two label,.filters>label{margin-top:12px}
.resultbar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin:0 4px 10px;min-height:44px}
/* Write-off */
.wohint{font-size:.85rem;padding:4px 0;min-height:0;font-weight:600}
.filelbl input[type=file]{display:block;margin-top:6px;font-size:16px;max-width:100%}
/* Supervising engineer hint, MOCCAE prompt, dilution, signed contract */
.amber{color:var(--amb);font-weight:600}.apok{color:var(--ok);font-weight:600}
.regprompt{color:var(--amb);margin:4px 0 0}.regprompt:empty{display:none}
.dilrow{margin-top:8px}.dilrow input{margin-top:4px}
.signedrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}.signedrow .filebtn{width:auto;text-align:left;margin:0;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
/* Pickers on desktop: anchored dropdown under the field; other choices as a centred dialog */
.sheet-wrap.pop{align-items:flex-start;justify-content:flex-start}
.sheet-wrap.pop .sheet-bg{background:transparent;animation:none}
.sheet-wrap.pop .sheet{position:fixed;max-width:none;border-radius:12px;border:1px solid var(--line2);box-shadow:0 12px 32px -8px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.06);padding:6px 0;animation:pop .12s ease-out}
.sheet-wrap.pop .sheet-grip,.sheet-wrap.pop .sheet-head{display:none}
.sheet-wrap.pop .sheet-search{margin:2px 8px 6px;min-height:40px;font-size:15px}
.sheet-wrap.pop .sheet-list{padding:0 6px}
.sheet-wrap.pop .opt{min-height:38px;padding:8px 10px;font-size:15px;border-bottom:0;border-radius:8px}
.sheet-wrap.pop .opt:hover,.sheet-wrap.pop .opt:focus-visible{background:var(--acc-soft);outline:0}
.sheet-wrap.dlg{align-items:center}
.sheet-wrap.dlg .sheet{max-width:440px;border-radius:14px;max-height:80vh;animation:pop .14s ease-out;margin:16px}
.sheet-wrap.dlg .sheet-grip{display:none}
.sheet-wrap.dlg .rsheet{max-width:520px}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* Top actions: one filled primary, tonal secondary row with icon and label, quiet destructive action at the end */
.topacts{margin:14px 0 18px}
.topacts .btn.primary{margin:0 0 10px;gap:10px}.topacts .btn.primary .ic{width:20px;height:20px}
.actbar{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px}
.actbar[data-n="1"]{--n:1}.actbar[data-n="2"]{--n:2}.actbar[data-n="3"]{--n:3}.actbar[data-n="4"]{--n:4}
.actbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:64px;padding:10px 6px;border:0;border-radius:12px;background:var(--acc-soft);color:var(--acc-h);font:600 .86rem/1.2 var(--body);text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.actbtn .ic{width:22px;height:22px}
.actbtn:hover{background:var(--acc-soft-h)}.actbtn:active{transform:scale(.98)}.actbtn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.actbtn.on{background:var(--acc);color:var(--on-acc)}
.ic{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.topacts+.actpanel,.actpanel+.actpanel{margin-top:0}
@media (min-width:768px){.actbar{grid-template-columns:repeat(var(--n,3),minmax(0,180px))}.actbtn{flex-direction:row;min-height:44px;padding:8px 14px;gap:8px;font-size:.93rem}.actbtn .ic{width:18px;height:18px}.topacts .btn.primary{width:auto;display:inline-flex;margin-right:8px;min-height:48px;padding:12px 22px}.topacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.topacts .btn.primary{margin:0}}
/* Assign from a row, records card, reminder settings */
.btn.tonal{background:var(--acc-soft);color:var(--acc-h)}.btn.tonal:hover{background:var(--acc-soft-h)}
.assignbtn{flex:none;min-height:36px;padding:6px 12px;gap:6px;font-size:.9rem;width:auto;margin:0}.assignbtn .ic{width:17px;height:17px}
.srow .top .assignbtn{align-self:flex-start}
.recordscard{display:flex;gap:14px;align-items:flex-start;cursor:pointer}.recordscard .rc-ic{flex:none;width:40px;height:40px;border-radius:10px;background:var(--acc-soft);color:var(--acc-h);display:flex;align-items:center;justify-content:center}.recordscard .rc-ic .ic{width:22px;height:22px}
.recordscard p{margin:4px 0 10px}.recordscard .btn{width:auto}.recordscard:hover{border-color:var(--acc-line)}
fieldset.plain{border:0;padding:0;margin:12px 0 0}fieldset.plain legend{font-weight:600;padding:0;margin-bottom:6px}
.addrow{display:flex;gap:8px;align-items:flex-end;margin-top:10px}.addrow .btn{min-height:50px;align-self:flex-end}.addrow label{flex:1;margin:0}.addrow .btn{flex:none;margin:0}

.suphint{margin:4px 2px 10px;font-size:14px;color:var(--mut);line-height:1.45}.suphint a{font-weight:600;white-space:nowrap}

/* ===================== Round 8: one design system (used by every page) =====================
   Buttons: .btn = primary (filled blue) · .btn.ghost = secondary (tonal) · .btn.minor = small / rare (outlined, quiet) · .btn.danger = confirms a destructive step (filled red)
   · .btn.minor.danger = rare destructive trigger (outlined, red text). Sizes: default 48px, .sm 44px, .minor 44px tap target on phones (38px on desktop) with smaller, lighter text. */
.btn.tonal{background:var(--acc-soft);color:var(--acc-h)}
.btn.minor{min-height:44px;padding:6px 14px;font-size:.92rem;font-weight:600;background:transparent;color:var(--txt2);border:1px solid var(--line2);border-radius:10px;box-shadow:none;gap:6px;width:auto}
.btn.minor:hover{background:var(--fill)}@media (min-width:1024px){.btn.minor{min-height:38px}}
.btn.minor.danger{color:var(--red);border-color:var(--red-line);background:transparent}.btn.minor.danger:hover{background:var(--red-soft)}
.btn.danger:not(.minor){background:var(--red);color:#fff}.btn.danger:not(.minor):hover{background:var(--red-h)}
.btn.ghost.on{background:var(--acc);color:var(--on-acc)}.btn.ghost.whenbtn.on{background:var(--acc-soft);color:var(--acc-h);box-shadow:inset 0 0 0 2px var(--acc)}
.btn .ic{width:18px;height:18px}
/* Page header: title left, the page's one "Add ..." action right */
.pagehead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 16px}.pagehead h1{margin:0;min-width:0}.pagehead .btn{flex:none}
.backlink+.pagehead,.eyebrow+.pagehead{margin-top:4px}
.listtools{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px}
/* Detail header chips */
.headtags{margin:-6px 0 4px}
.userhead .eyebrow{margin:0}.userhead .headtags{margin:6px 0 0}
/* Rare / destructive actions: small buttons at the end of the same top bar */
.topacts .rarebar{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:10px}
@media (min-width:768px){.topacts .rarebar{margin:0 0 0 auto}}
.actbtn{text-decoration:none}
/* Action panels and create cards: same title, same form buttons */
.actpanel>.panelt,.createcard>h3{margin:0 0 4px;font-size:1.06rem}
.actpanel{box-shadow:inset 0 0 0 1.5px var(--acc-line)}
.createcard{box-shadow:inset 0 0 0 1.5px var(--acc-line)}
.cardhead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}.cardhead h3{margin:0}
/* Form buttons, identical everywhere: Cancel (secondary) then the save action (primary); full width on phones, right-aligned on desktop */
.formacts{display:flex;gap:8px;margin-top:20px;align-items:stretch}
.formacts .btn{margin:0;flex:1 1 auto;min-width:0}
.formacts .btn.ghost{flex:0 0 auto;padding:0 18px}
.formacts .btn.minor{flex:0 0 auto}
@media (min-width:768px){.formacts{justify-content:flex-end}.formacts .btn{flex:0 0 auto;min-width:150px}.formacts .btn.ghost{min-width:0}}
#view>.formacts{justify-content:center;margin:24px 0 8px}
.subform .formacts{margin-top:14px}
.savebar .actions .btn.ghost{flex:none}
/* Fields: optional marker in the label, help text under the field, locked values in a grey box */
.optl{color:var(--mut);font-weight:400;font-size:.8rem}
.help{margin:6px 2px 0;font-size:.85rem;line-height:1.4;color:var(--mut)}
.lockbox{margin-top:16px;padding:4px 14px 12px;border-radius:var(--r2);background:var(--sunk)}.lockbox .kv div{padding:8px 0}.lockbox .help{margin-top:4px}
.subform h4{margin:0 0 4px;color:var(--txt)}
fieldset.plain{min-width:0}
#f>fieldset.plain{margin:0}
/* Schedule rows: Change date or time as a real secondary button */
.rowacts{display:flex;gap:8px;margin-top:10px}
.srow .ef{margin-top:4px;padding:12px;border-radius:12px;background:var(--bg)}
.srow .ef .two label{margin-top:4px}
.vsvc{color:var(--acc-h);font-weight:600;margin-top:2px}
.schedbar>.btn.minor{justify-self:center}
/* Confirmation dialog (same sheet as the pickers) */
.cfsheet .cfbody{padding:8px 20px 12px}.cfsheet h3{font-size:1.15rem;margin:4px 0 6px}.cfsheet p{margin:0}
.sheet-wrap.dlg .cfsheet{max-width:420px}
.sheet-wrap.dlg .cfsheet .formacts{justify-content:flex-end}
/* Desktop: wider content, two-column forms where it helps */
@media (min-width:1024px){.wrap{max-width:860px}}
/* Desktop (1024px+): the section tabs move into the top bar, like Jobber and Housecall Pro on the web. Phones and tablets keep the bottom tab bar. */
@media (min-width:1024px){
 body{padding-bottom:32px}
 .tabs{top:0;bottom:auto;left:50%;right:auto;transform:translateX(-50%);z-index:7;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding:8px 0;gap:4px;justify-content:center;max-width:calc(100vw - 520px)}
 .tabs a{flex:none;flex-direction:row;gap:8px;min-height:40px;padding:0 14px;font-size:.93rem;font-weight:600;color:var(--txt2);border-radius:10px}
 .tabs a .ti{width:19px;height:19px}
 .tabs a:hover{background:var(--fill)}
 .tabs a.on{background:var(--acc-soft);color:var(--acc-h)}
 /* Desktop: top right under the top bar, beside the page title. */
 .toast{--tx:-50%;left:50%;right:auto;top:72px}
 body.hasmode .tbtitle,.tbtitle{display:none!important}
 body.scrolled .brand,body.scrolled .brand span{color:inherit}body.scrolled .brand img{opacity:1}
}
/* ---------- Round 9 ---------- */
/* Schedule rows: time, client, site · service; technician chip or Assign on the right; colour bar shows the state. The whole row opens the visit. */
.slist{padding:0;overflow:hidden}
.slist .srow{display:flex;align-items:center;gap:10px;padding:0 12px 0 0;border-bottom:.5px solid var(--line2);position:relative;min-height:64px}
.slist .srow:last-child{border-bottom:0}
.slist .srow::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:var(--acc)}
.slist .srow[data-state=done]::before{background:var(--ok)}.slist .srow[data-state=late]::before{background:var(--red)}.slist .srow[data-state=cancelled]::before{background:var(--line2)}
.slist .vopen{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:12px 0 12px 16px;color:inherit;text-decoration:none;min-height:64px}
.slist .stime{flex:0 0 60px;font-weight:700;font-variant-numeric:tabular-nums;font-size:.95rem;color:var(--txt)}
.slist .smain{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.slist .smain b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slist .ssub{font-size:.87rem;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slist .ssub.red{color:var(--red)}
.slist .srow[data-state=done] .smain b,.slist .srow[data-state=done] .stime{color:var(--txt2)}
.slist .sact{flex:none}.slist .sact .assignbtn{min-height:40px}
.slist .vopen .tag{flex:none}
.tchip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:999px;background:var(--fill);font-size:.85rem;font-weight:600;color:var(--txt);max-width:120px}
.tchip>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tchip .avatar.sm{width:26px;height:26px;font-size:.7rem}
#tbshint{margin:-4px 0 8px}
@media (min-width:1024px){.slist .stime{flex-basis:76px}.slist .vopen:hover{background:var(--fill)}.slist .srow{min-height:58px}.slist .vopen{min-height:58px}}
/* Create forms are pages of their own (round 9): no closed, empty create cards on lists */
.formcard{padding-top:16px}
/* Scope chooser: three option cards, nothing preselected */
.scopeopts{display:flex;flex-direction:column;gap:8px;margin:12px 0 10px;outline:0}
.scopeopt{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1.5px solid var(--line2);border-radius:12px;cursor:pointer;margin:0;background:var(--surface)}
.scopeopt input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--acc)}
.scopeopt .so-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.scopeopt .so-t b{font-size:1rem;font-weight:700;color:var(--txt)}.scopeopt .so-d{font-size:.9rem;color:var(--txt2);font-weight:400;line-height:1.35}
.scopeopt.on{border-color:var(--acc);background:var(--acc-soft)}
.cfsheet .btn[disabled]{opacity:.45;cursor:not-allowed}
@media (max-width:599px){.slist .tchip{padding:3px}.slist .tchip>span:last-child{display:none}.slist .stime{flex-basis:50px;font-size:.92rem}.slist .vopen{gap:10px;padding-left:14px}}
#vjob{scroll-margin-top:84px}
/* ===== Round 10 ===== */
/* One header + action bar everywhere: title, then primary, up to 3 secondary buttons, rare actions or a More menu, on one row on desktop. */
.pageintro{margin:-6px 0 14px}
.topacts .btn.primary{min-height:50px}
.moremenu{position:relative;display:inline-flex}
.actmore{gap:6px}.actmore .ic{width:18px;height:18px}
.moremenu .menu{position:absolute;right:0;top:calc(100% + 6px);min-width:230px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh2,0 12px 32px rgba(0,0,0,.16));padding:6px;z-index:60;display:flex;flex-direction:column}
.moremenu .menu[hidden]{display:none}
.mitem{display:block;width:100%;text-align:left;padding:12px 14px;border:0;background:none;border-radius:9px;font:500 .97rem/1.25 var(--body);color:var(--txt);cursor:pointer;text-decoration:none}
.mitem:hover,.mitem:focus-visible{background:var(--fill);outline:0}.mitem.danger{color:var(--red)}
@media (min-width:768px){
  .topacts{flex-wrap:nowrap}
  .actbar{display:flex;flex-wrap:nowrap;gap:8px;min-width:0}
  .actbtn{white-space:nowrap;flex:0 1 auto;min-width:0}
  .topacts .rarebar{flex-wrap:nowrap;margin:0 0 0 auto;flex:none}
}
/* Desktop: list pages and the Overview use the full width (table-like lists, two-column Overview). */
@media (min-width:1024px){ body.wide .wrap{max-width:1120px} }
/* Schedule week strip (Google Calendar / Jobber mobile): thin, sticky under the top bar */
.weekstrip{position:sticky;top:var(--tbh,56px);z-index:5;background:var(--surface);border-radius:var(--r);padding:8px 8px 10px;margin:0 0 12px;box-shadow:0 1px 0 var(--line);touch-action:pan-y}
.wkhead{display:flex;align-items:center;gap:6px}
.wknav{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;color:var(--acc-h);font-size:1.5rem;text-decoration:none;flex:none}
.wknav:hover{background:var(--fill)}
.weekstrip .rangelbl{flex:1;min-height:40px;background:none;font-size:1rem}
.wktoday{min-height:36px!important;padding:4px 12px!important;flex:none}.wktoday.cur{color:var(--acc-h);border-color:var(--acc-soft);background:var(--acc-soft)}
.wkdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:6px}
.wkday{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 0 5px;border-radius:12px;text-decoration:none;color:var(--txt2);min-height:58px}
.wkday .wd{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--mut)}
.wkday .dn{font-size:1.06rem;line-height:1.3;color:var(--txt)}
.wkday .cnt{font-size:.72rem;font-weight:700;min-width:20px;height:16px;line-height:16px;border-radius:8px;background:var(--acc-soft);color:var(--acc-h);text-align:center;padding:0 5px}
.wkday .cnt.zero{background:none}
.wkday.today .dn{color:var(--acc)}.wkday.today .wd{color:var(--acc)}
.wkday.on{background:var(--acc)}.wkday.on .wd,.wkday.on .dn{color:var(--on-acc)}.wkday.on .cnt{background:rgba(255,255,255,.25);color:var(--on-acc)}
.wkday:hover:not(.on){background:var(--fill)}
.dayhead{scroll-margin-top:calc(var(--tbh,56px) + 130px)}
.dayhead.empty{margin:14px 4px 4px}.dayhead.empty h3{font-size:.98rem;color:var(--txt2)}
@media (min-width:768px){.weekstrip{padding:10px 14px 12px}.wkday{flex-direction:row;justify-content:center;gap:8px;min-height:44px}.wkday .wd{font-size:.8rem}.wkday .dn{font-size:1.02rem}}
/* Lists at scale: sticky search + chips, count and sort line, compact rows; a table with columns on desktop */
.lsearch{position:sticky;top:var(--tbh,56px);z-index:4;background:var(--bg,#f2f2f7);padding:6px 0 8px;margin:0 0 4px}
.sbox{position:relative}.sbox .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--mut)}
.sbox input{padding-left:44px;margin:0;background:var(--surface);border-color:var(--line);min-height:48px;border-radius:12px}
.fchips{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding:8px 0 2px;scrollbar-width:none}.fchips::-webkit-scrollbar{display:none}
.fchip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border-radius:18px;border:1px solid var(--line2);background:var(--surface);color:var(--txt2);font:600 .88rem/1 var(--body);cursor:pointer}
.fchip .n{font-weight:600;color:var(--mut);font-size:.8rem}
.fchip.on{background:var(--txt);border-color:var(--txt);color:var(--on-txt)}.fchip.on .n{color:var(--on-txt);opacity:.75}
.lmeta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 4px 8px;font-size:.9rem;color:var(--txt2)}
.sortlbl{display:flex;align-items:center;gap:6px;margin:0;font-size:.88rem;color:var(--mut)}
.sortlbl select,.sortlbl .pick{min-height:36px;height:36px;line-height:24px;padding:6px 30px 6px 10px;font-size:.9rem;width:auto;margin:0;background-color:var(--surface)}
.dtable{padding:0;overflow:hidden}
.dthead{display:none}
.drow{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);color:var(--txt);text-decoration:none;min-height:60px}
.dtbody .drow:first-child{border-top:0}
.drow:hover{background:var(--fill)}
.dc.main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dc.main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsub{font-size:.85rem;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc.mob{flex:none;text-align:right;max-width:44%}
.dk{display:none!important}
.dempty{padding:20px 16px}
.lmorewrap{display:flex;justify-content:center;margin:12px 0 20px}
@media (min-width:900px){
  .lsearch{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.sbox{flex:1 1 320px;max-width:460px}.fchips{padding:0}
  .dk{display:revert!important}.mob,.dsub,.mobonly{display:none!important}
  .dthead,.drow{display:grid;grid-template-columns:var(--cols);gap:14px;align-items:center}
  .dthead{padding:10px 16px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);border-bottom:1px solid var(--line);background:var(--surface)}
  .drow{min-height:52px;padding:10px 16px;font-size:.93rem}
  .drow .dc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .drow .dc.dk>.small{display:block!important;overflow:hidden;text-overflow:ellipsis}
  .dtable.clients{--cols:minmax(200px,2fr) minmax(160px,2fr) 140px 90px 130px 110px}
  .dtable.contracts{--cols:110px minmax(200px,2.2fr) minmax(140px,1.6fr) 120px 110px 110px 130px}
  .num{text-align:right}
}
.banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-radius:12px;margin:0 0 12px;text-decoration:none;color:var(--txt);background:var(--surface);border:1px solid var(--line)}
.banner.warn{background:var(--warn-bg);border-color:var(--warn-line)}.banner span{color:var(--txt2);font-size:.92rem;flex:1}.banner .chev{flex:none}
/* Overview (round 10): quick actions, today's numbers, today by technician + To do; two columns on desktop */
@media (min-width:1024px){
  .ovgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:24px;align-items:start}
  .ovside{position:sticky;top:calc(var(--tbh,56px) + 12px)}
  .ovside .grouplabel:first-child,.ovmain .grouplabel:first-child{margin-top:8px}
  body.wide .stats{max-width:none}
}
/* Overview (round 10): quick actions, today's numbers, today by technician + To do; two columns on desktop */
@media (min-width:1024px){
  .ovgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);gap:24px;align-items:start}
  .ovside{position:sticky;top:calc(var(--tbh,56px) + 12px)}
}
@media (max-width:899px){#lsort{font-size:16px}}
/* Round 11: double booking */
.busyhint{display:flex;gap:8px;align-items:flex-start;margin:6px 0 2px;padding:9px 12px;border-radius:10px;background:var(--warn-bg);color:var(--amb);font-size:.92rem;line-height:1.35}
.busyhint .ic{width:18px;height:18px;flex:none;margin-top:1px}
.busyhint[hidden]{display:none}
.sheet .opt .osub{display:block;font-size:.82rem;color:var(--muted);margin-top:2px;font-weight:500}
.sheet .opt .osub.busy{color:var(--amb)}
.clashlist{list-style:none;margin:8px 0 10px;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.clashlist li{padding:10px 12px;border-top:1px solid var(--line)}.clashlist li:first-child{border-top:0}
.cfsheet.clash h3::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--warn-bar);margin-right:8px;vertical-align:middle}
.cfsheet.clash .formacts{flex-wrap:wrap}
.cfhtml p{margin:0 0 6px}
.cfsheet.clash .formacts .btn{flex:1 1 220px}
/* Round 11: Set up PestFolio (checklist card on the Overview, setup page, import steps) */
.setupbar{height:6px;border-radius:6px;background:var(--fill,#eef1f5);overflow:hidden;margin:8px 0 4px}
.setupbar span{display:block;height:100%;background:var(--acc,#0b62d6);border-radius:6px}
.setupcard{border:1px solid var(--acc-line);background:linear-gradient(180deg,color-mix(in srgb,var(--acc-soft) 50%,var(--surface)),var(--surface))}
.setupcard .sc-head{display:flex;align-items:flex-start;gap:12px}.setupcard h3{margin:0}
.setupcard .sc-next{margin:12px 0 10px}.setupcard .sc-acts{display:flex;gap:8px;flex-wrap:wrap}
.setupsum .shead,.sstep .shead{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}
.setupsteps{list-style:none;padding:0}
.sstep{display:flex;gap:14px;padding:16px;border-top:1px solid var(--line)}.sstep:first-child{border-top:0}
.sstep .snum{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--fill,#eef1f5);color:var(--txt)}
.sstep.done .snum{background:var(--ok);color:#fff}.sstep.skipped{opacity:.75}
.sstep p{margin:4px 0 10px}.sstep .sacts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.menu .mdesc{display:block;font-weight:400}
.center{text-align:center}
.setupcard .sc-head .grow{flex:1;min-width:0}
.setupcard .sc-acts .btn{flex:0 0 auto}
#setuphelp,#setuphelpline a{display:inline-flex;align-items:center;min-height:44px}
.imptable .tag{white-space:normal}
.sstep .grow{flex:1;min-width:0}
/* Round 12: import from the customer's own file. Match your columns, match client names. */
.maptable{margin:8px 0;table-layout:fixed}.maptable th:nth-child(1){width:30%}.maptable th:nth-child(3){width:34%}
.maptable td,.maptable th{text-align:left!important}.maptable td{vertical-align:middle}
.maptable .mapex div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt2);font-size:.88rem}
.maptable tr.off td:not(:last-child){color:var(--mut)}.maptable tr.off td b{font-weight:500}
.maptable .pick{width:100%}.maptable .mapby{margin-top:4px}
#mapneed{margin:6px 0 0}#mapcard .formacts{margin-top:10px}
.cmatch{padding:12px 0;border-top:.5px solid var(--line2)}.cmatch:first-of-type{border-top:0}
.cmatch .cm-head b{font-size:1rem}.cmatch .scopeopts{margin:8px 0 0}.cmatch .cm-other{margin:-2px 0 2px 34px}.cmatch .cm-other .pick{width:100%}
.imptable tr.wait td{background:var(--amb-soft)}
@media (max-width:640px){
 .maptable,.maptable tbody,.maptable tr,.maptable td{display:block;width:auto!important}.maptable thead{display:none}
 .maptable tr{padding:10px 0;border-bottom:.5px solid var(--line2)}.maptable td{border:0!important;padding:2px 0}
 .maptable td[data-l="Examples"]{display:flex;flex-wrap:wrap;gap:0 10px}.maptable .mapex div{max-width:100%}
 .cmatch .cm-other{margin-left:0}
}
@media (min-width:641px){.cmatch .scopeopts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}.cmatch .scopeopt{padding:10px 12px}.cmatch .cm-other{grid-column:1/-1;margin:0}}
/* Round 13: report review */
.reviewbar{margin-top:12px}.reviewbar>b{display:block;margin-bottom:2px}.reviewbar .formacts{margin-top:10px}
.reviewbar form label{margin-top:10px}
.rvreason{margin:6px 0 2px;padding:8px 10px;border-left:3px solid var(--warn-bar);background:var(--surface);border-radius:0 8px 8px 0;white-space:pre-wrap;color:var(--txt)}
li .rvreason{margin:4px 0 2px;padding:4px 8px;font-size:.88rem}
.rvlog{margin-top:12px}.rvlog h4{margin:0 0 4px;font-size:.9rem;color:var(--txt2)}.rvlog .list li{padding:6px 0}
.approvebtn .ic{stroke-width:2.4}
.thumb{position:relative;display:inline-block}.thumbx{position:absolute;top:-6px;right:-6px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--txt);font-size:18px;line-height:1;cursor:pointer;padding:0}
#corrections .list li{align-items:flex-start}#corrections .btn.sm{flex:none;width:auto}
/* ---------- Round 14 ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Round 26: invoice details are a plain section (no collapsed optional sections). */
.optsec{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.optsec>h3{margin:0 0 6px;font-size:1rem}
.accclient+.accclient{margin-top:14px}.accclient h4{margin:6px 0 2px;font-size:1rem}
.accrow{align-items:center;gap:12px}.accprice{margin:0;flex:0 0 120px}.accprice input{text-align:right;min-height:40px}
.acctotal{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.dismissbtn{margin-left:6px}.missedlink{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;color:var(--mut)}
.trend{display:grid;gap:14px}.trendbars{display:flex;align-items:flex-end;gap:6px;height:120px;border-bottom:1px solid var(--line);padding-top:6px}
.trendbars .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;font-size:.75rem;color:var(--mut);height:100%}
.trendbars .bar i{display:block;width:100%;max-width:34px;border-radius:6px 6px 0 0;background:var(--acc)}
.sdsrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.sdsmiss{color:var(--mut);font-size:.85rem}
.portal .grouplabel{margin-top:22px}.ptrend{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px}.ptrend h4{margin:12px 0 4px;font-size:.95rem}.ptrend h4:first-child{margin-top:0}
/* Round 15: home. Needs attention first (one row per item, one action), then today's schedule by technician. */
.gcount{display:inline-block;margin-left:8px;min-width:22px;padding:1px 7px;border-radius:99px;background:var(--amb-soft);color:var(--amb);font-weight:700;text-align:center;letter-spacing:0}
.dtable.attn{padding:0}
.arow{position:relative;flex-wrap:wrap;gap:8px 12px;padding:12px 14px 12px 18px;min-height:64px}
.arow::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 3px 3px 0;background:var(--line2,#d6dde3)}
.arow.bad::before{background:var(--red)}.arow.warn::before{background:var(--warn-bar)}
.arow .agrow{flex:1 1 220px;min-width:0;color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:2px}
.arow .agrow b{font-weight:600;line-height:1.3}.arow .asub{color:var(--mut);font-size:.88rem;line-height:1.3}
.arow .aacts{flex:none;display:flex;flex-wrap:wrap;gap:8px;margin-left:auto;align-items:center}
.arow .aacts .btn{margin:0;width:auto;white-space:nowrap}
.attn .attnall{display:flex;padding:4px 18px 6px;border-top:1px solid var(--line)}

.tag.nrenew{background:var(--amb-soft);color:var(--amb)}
.nrlab{margin:12px 0 6px}.nrchips{display:flex;flex-wrap:wrap;gap:8px}.nrnote{margin-top:12px}
#renewal #marknr,#renewal #reopenrenewal{margin-top:4px}
@media (min-width:1024px){
  .dtable.attn{--cols:minmax(0,1fr) auto}
  .dtable.attn .drow.arow{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:10px 16px 10px 20px}
  .drow.arow .dc{white-space:normal;overflow:visible}
  .dtable.attn .dthead{padding-left:20px}
  #teamtoday{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;align-items:start}
  #teamtoday>.card{margin:0}
  #home{max-width:1100px}
}
/* ===== Round 16: computer screens (1024px+). Phones and tablets are unchanged. =====
   Left sidebar with the sections, content centred in the space beside it with a maximum width, record pages with a main column and a
   details panel, forms at a comfortable width, list rows that read as table rows with a hover. */
@media (min-width:1024px){
 :root{--side:224px}
 body.navside:not(.formmode){padding-left:var(--side)}
 body.navside:not(.formmode) .topbar .brand{position:fixed;left:0;top:0;width:var(--side);height:56px;padding:0 20px;box-sizing:border-box;z-index:8;flex:none}
 body.navside:not(.formmode) .topbar{justify-content:flex-end;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
 body.navside:not(.formmode) .topbar .brand img{opacity:1}body.navside:not(.formmode) .topbar .brand,body.navside:not(.formmode) .topbar .brand span{color:var(--txt)}
 .tabs{top:0;bottom:0;left:0;right:auto;transform:none;width:var(--side);max-width:none;box-sizing:border-box;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:2px;padding:68px 12px 16px;background:var(--surface,#fff);border-right:1px solid var(--line);z-index:5}
 .tabs a{justify-content:flex-start;gap:12px;min-height:42px;padding:0 12px;font-size:.95rem;font-weight:500;color:var(--txt2)}
 .tabs a.on{font-weight:600}
 .tabs a:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
 .wrap{max-width:880px;padding-left:32px;padding-right:32px}
 body.wide .wrap,body.record .wrap{max-width:1180px}
 #home{max-width:none}
 /* Record pages: main column and a details panel that stays in view */
 .rgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
 .rgrid.solo{grid-template-columns:minmax(0,780px)}
 .rmain,.rside{min-width:0}
 .rside{position:sticky;top:calc(var(--tbh,56px) + 16px)}
 .rmain>.card:first-child,.rside>.card:first-child,.rmain>.grouplabel:first-child,.rside>.grouplabel:first-child{margin-top:0}
 .rside .kv{font-size:.93rem}
 /* Forms: a comfortable width, never stretched */
 .formcard,body:not(.wide):not(.record) #view>form.card{max-width:720px}
 .actpanel{max-width:780px}
 #teamtoday{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
 #sfilter{max-width:360px}#rfilter{max-width:720px}
 /* Reports list reads as a table: date, client and service, reference */
 #joblist>li[data-job]{padding:0}
 #joblist>li[data-job]>a.grow{display:grid;grid-template-columns:150px minmax(0,1.3fr) minmax(0,1.5fr);gap:16px;align-items:center;padding:12px 16px;min-height:52px;box-sizing:border-box}
 #joblist>li[data-job]>a.grow>.small{margin:0}
 #joblist>li[data-job]>a.grow>.rvreason{grid-column:2/-1}
 #joblist>li[data-job]>.tag,#joblist>li[data-job]>.btn{margin-right:16px}
 #joblist>li[data-job]:hover,.menu li a:hover,.list li>a.grow:hover{background:var(--fill)}
 /* Confirmations: top right of the content, a card not a phone-wide strip */
 .toast{right:auto;top:72px;max-width:420px}
}
/* Round 17: tap chips that are buttons (findings phrases, usage amounts) look like the select chips */
button.chip{border:0;background:none;padding:0;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
button.chip:not(:has(span)){display:inline-flex;align-items:center;min-height:44px;border-radius:10px;padding:8px 14px;font-size:.95rem;font-weight:500;background:var(--input);color:var(--txt)}
button.chip[aria-pressed=true] span{background:var(--acc);color:var(--on-acc)}
button.chip[aria-pressed=true] span::before{content:"";width:6px;height:11px;border:solid var(--on-acc);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);margin-right:2px}
button.chip:active span,button.chip:not(:has(span)):active{transform:scale(.96)}
.fchips{margin:6px 0 8px}
/* Round 17: usage units on the job sheet */
.c-count{display:grid;gap:8px;margin:8px 0}
.c-units.seg{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:1fr}
.c-units button[aria-pressed=true]{background:var(--surface);color:var(--txt);box-shadow:var(--seg-sh)}
.stepper{display:grid;grid-template-columns:56px 1fr 56px;gap:8px;align-items:center}
.stp{height:56px;border:0;border-radius:12px;background:var(--seg-bg);font:600 1.6rem/1 var(--body);color:var(--acc);cursor:pointer}
.stp:active{transform:scale(.94)}
.stpval{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;height:56px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line2)}
.stpval input.c-n{width:5.5ch;min-width:0;height:auto;padding:0;text-align:center;font:600 1.4rem var(--body);background:none;box-shadow:none;border:0}
.c-cu{font-weight:600;color:var(--txt2)}
.c-calc{margin:0;color:var(--acc-h);font-weight:600;min-height:1.2em}
.usefs{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.usefs h3{margin:0 0 6px;font-size:1rem}
/* Round 17: Pest activity, one tap on a big segment (required) */
.actseg{grid-template-columns:repeat(4,1fr);margin:6px 0 4px}
.actseg label{margin:0;display:block}.actseg input{position:absolute;opacity:0;pointer-events:none}
.actseg span{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:7px;font:600 .95rem var(--body);color:var(--txt2);cursor:pointer}
.actseg input:checked+span{background:var(--acc);color:var(--on-acc);box-shadow:var(--seg-sh)}
.actseg input:focus-visible+span{outline:2px solid var(--acc);outline-offset:1px}
.actseg.invalid{box-shadow:inset 0 0 0 1.5px var(--red)}
/* Round 23: one confirmation, one motion. The card glides in (fade, 10 px drop, 97 to 100 percent) while the tick draws itself on
   the white disc. Its colour never changes on the way in, and there is no glow, halo, ring, sparkles, brightness pulse or second
   flash on the pressed button. Reduced motion: the same card fades in in place and the tick comes into focus with it, in one go.
   A follow up notice that replaces a visible confirmation (for example Everything handled) swaps the text without replaying it.
   Round 28: under Reduce Motion the card fades in with a soft green glow that settles once (no movement, no pulse). */
.toast.n-ok,.toast.n-win{background:var(--cf-bg);color:var(--cf-ink);border-color:var(--cf-border);padding:11px 16px 11px 12px;box-shadow:var(--cf-shadow);animation:ncin .44s cubic-bezier(.22,.9,.3,1) both}
.toast.n-ok.out,.toast.n-win.out{animation:nout .2s ease-in both}
.toast.n-win{background:var(--cf-win);padding:14px 20px 14px 14px;font-size:1.05rem}
.toast.n-ok .nmsg b,.toast.n-win .nmsg b{color:var(--cf-ink)}.toast.n-ok .nmsg small,.toast.n-win .nmsg small{color:var(--cf-sub)}
.toast.n-ok .nundo,.toast.n-win .nundo{color:var(--cf-ink);text-decoration:underline;text-underline-offset:3px}.toast.n-ok .nundo:hover,.toast.n-win .nundo:hover,.toast.n-ok .nundo:focus-visible,.toast.n-win .nundo:focus-visible{background:rgba(255,255,255,.18)}
@keyframes ncin{from{opacity:0;transform:translate(var(--tx),-10px) scale(.97)}to{opacity:1;transform:translate(var(--tx),0) scale(1)}}
.toast .nico{position:relative}
.toast.n-ok .nico,.toast.n-ok .nico svg{width:34px;height:34px}.toast.n-win .nico,.toast.n-win .nico svg{width:44px;height:44px}
.toast .ndisc{position:absolute;inset:0;border-radius:50%;background:var(--cf-disc)}
.toast.n-ok .nico svg,.toast.n-win .nico svg{position:relative;stroke-width:2.8}
.toast.n-ok .nk,.toast.n-win .nk{stroke:var(--cf-tick);stroke-dasharray:15;stroke-dashoffset:15;-webkit-animation:ndraw .34s .16s cubic-bezier(.4,0,.2,1) both;animation:ndraw .34s .16s cubic-bezier(.4,0,.2,1) both}
@keyframes ndraw{from{stroke-dashoffset:15}to{stroke-dashoffset:0}}
.toast.swap,.toast.swap .nk,.toast.swap .nico svg{animation:none!important;stroke-dashoffset:0}
.toast.swap .nmsg{animation:nfade .2s ease-out both}
@media (prefers-reduced-motion:reduce){
 .toast.n-ok,.toast.n-win{animation:nrglow .55s cubic-bezier(.2,.7,.3,1) both!important;box-shadow:var(--cf-rm-glow)}
 .toast.n-ok .nk,.toast.n-win .nk{stroke-dashoffset:0;animation:none!important}
 .toast.n-ok .nico svg,.toast.n-win .nico svg{animation:nrtick .34s .1s cubic-bezier(.2,.7,.3,1) both!important}
 .toast.swap,.toast.swap .nico svg{animation:none!important}.toast.swap .nmsg{animation:nfade .2s ease-out both!important}
 .toast.n-err,.toast.n-info{animation:nfade .2s ease-out both!important}
 .toast.out,.toast.n-ok.out,.toast.n-win.out{animation:nrout .2s ease-in both!important}
}
@keyframes nrglow{from{opacity:0;box-shadow:0 0 0 0 rgba(52,199,89,0),0 1px 3px rgba(16,24,40,.06)}55%{opacity:1;box-shadow:0 0 28px 4px var(--cf-glow-b),0 10px 28px -10px rgba(26,127,55,.5)}to{opacity:1;box-shadow:var(--cf-rm-glow)}}
@keyframes nrtick{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:blur(0)}}
@keyframes nrout{to{opacity:0}}
@keyframes nfade{from{opacity:0}to{opacity:1}}
/* Round 19: a bigger confirmation. Phones: as wide as the screen with the page side margins (16 px), taller, larger check and
   text. Tablet and desktop: a fixed 500 px card centred below the navigation. */
@media (max-width:767px){
 .toast{--tx:0;left:16px;right:16px;width:auto;max-width:none;border-radius:16px;padding:14px 16px 14px 14px;gap:14px;font-size:1.02rem}
 .toast .nmsg{flex:1}
 .toast.n-ok,.toast.n-win{padding:16px 18px 16px 16px}
 .toast.n-win{padding:18px 18px 18px 16px;font-size:1.08rem}
 .toast.n-ok .nico,.toast.n-ok .nico svg{width:40px;height:40px}
 .toast.n-win .nico,.toast.n-win .nico svg{width:48px;height:48px}
 .toast.n-ok .nmsg b,.toast.n-win .nmsg b{font-size:1.06rem}
 .toast.n-ok .nmsg small,.toast.n-win .nmsg small{font-size:.9rem;margin-top:2px}
}
@media (min-width:768px){
 .toast{--tx:-50%;left:50%;right:auto;width:500px;max-width:calc(100% - 56px);border-radius:16px;padding:14px 18px 14px 14px;gap:14px;font-size:1rem}
 .toast .nmsg{flex:1}
 .toast.n-ok .nico,.toast.n-ok .nico svg{width:38px;height:38px}
 .toast.n-win .nico,.toast.n-win .nico svg{width:46px;height:46px}
 .toast.n-ok .nmsg b,.toast.n-win .nmsg b{font-size:1.04rem}
}
.loading{animation:ldin .2s .35s both}@keyframes ldin{from{opacity:0}}
/* Round 17: client signature required / client not present */
#nosigbtn{display:inline-block;margin-top:8px}
#nosig .chips{margin:6px 0}
#signinstead{display:inline-block;margin-top:6px}
.c-hint{margin:6px 0 0}
/* ---------- Round 21: premium feel ----------
   One set of easing curves and durations for every UI transition (nothing longer than about 300 ms). A page that opens fades and
   rises 6 px into place, its first blocks a few milliseconds after each other; a redraw after an action does not animate (no flicker).
   Presses answer at once, panels, menus, sheets and dialogs ease in, focus rings glide in. With reduced motion: opacity fades only. */
:root{--ease:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(.22,.8,.24,1);--ease-sheet:cubic-bezier(.32,.72,0,1);--d1:.12s;--d2:.2s;--d3:.26s;
 --sh-card:0 1px 2px rgba(16,24,40,.04),0 3px 12px -4px rgba(16,24,40,.06);--sh-pop:0 18px 44px -14px rgba(16,24,40,.26),0 4px 12px -4px rgba(16,24,40,.08);
 --sh2:0 24px 56px -16px rgba(16,24,40,.28),0 6px 16px -6px rgba(16,24,40,.1);--line2:rgba(60,60,67,.2)}
/* Page entrance (class vin on #view, set by route() for a new page and removed again 400 ms later) */
body:not(.formmode) #view.vin>*{animation:vin .22s var(--ease-out) backwards}
body.formmode #view.vin>*{animation:vfade var(--d2) var(--ease) backwards}
#view.vin>:nth-child(2){animation-delay:20ms}#view.vin>:nth-child(3){animation-delay:40ms}#view.vin>:nth-child(4){animation-delay:60ms}#view.vin>:nth-child(n+5){animation-delay:80ms}
#view.vin .list>li:nth-child(-n+8),#view.vin .dtbody>:nth-child(-n+6){animation:vfade .18s var(--ease) backwards}
#view.vin .list>li:nth-child(2),#view.vin .dtbody>:nth-child(2){animation-delay:20ms}#view.vin .list>li:nth-child(3),#view.vin .dtbody>:nth-child(3){animation-delay:40ms}
#view.vin .list>li:nth-child(4),#view.vin .dtbody>:nth-child(4){animation-delay:60ms}#view.vin .list>li:nth-child(5),#view.vin .dtbody>:nth-child(5){animation-delay:80ms}
#view.vin .list>li:nth-child(6),#view.vin .dtbody>:nth-child(6){animation-delay:95ms}#view.vin .list>li:nth-child(n+7){animation-delay:105ms}
@keyframes vin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes vfade{from{opacity:0}to{opacity:1}}
/* Quiet placeholder while a page loads (after 350 ms, round 17): a soft card shape that breathes */
.loading{font-size:.85rem;margin:20px 4px 0}
.loading::after{content:"";display:block;height:168px;margin:12px -4px 0;border-radius:var(--r);box-shadow:var(--sh-card);
 background:linear-gradient(rgba(118,118,128,.11),rgba(118,118,128,.11)) 20px 24px/42% 14px no-repeat,linear-gradient(rgba(118,118,128,.08),rgba(118,118,128,.08)) 20px 50px/68% 12px no-repeat,
 linear-gradient(rgba(118,118,128,.11),rgba(118,118,128,.11)) 20px 98px/36% 14px no-repeat,linear-gradient(rgba(118,118,128,.08),rgba(118,118,128,.08)) 20px 124px/58% 12px no-repeat,var(--surface);
 animation:skel 1.4s ease-in-out infinite alternate}
@keyframes skel{from{opacity:.65}to{opacity:1}}
/* Presses, hovers and selection: colour at once with a short ease, a 2 % press on buttons */
.btn,.actbtn,.tabs a,.opt,.mitem,.menu li a,.list li>a.grow,.chip span,.seg button,.pick,.link,.more,.nundo,summary{transition:background-color var(--d1) var(--ease),color var(--d1) var(--ease),box-shadow var(--d2) var(--ease),opacity var(--d1) var(--ease),transform var(--d1) var(--ease),filter var(--d1) var(--ease),outline-color var(--d2) var(--ease),outline-offset var(--d2) var(--ease)}
.btn:active:not(:disabled),.actbtn:active{transform:scale(.98);filter:brightness(.94)}
.list li>a.grow:active,.opt:active,.mitem:active,.menu li a:active{background-color:var(--fill)}
.tabs a:active{opacity:.6}
.chip span:active,.seg button:active{filter:brightness(.95)}
/* Focus rings glide in instead of snapping */
a,button,summary,.pick,[tabindex]{outline:2px solid transparent;outline-offset:6px}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
input,select,textarea{transition:background-color var(--d2) var(--ease),box-shadow var(--d2) var(--ease)}
/* Panels, menus, inline forms and open details ease in; sheets slide up with the iOS curve over a fading backdrop; dialogs settle in */
.actpanel:not([hidden]),form[data-inline]:not([hidden]),.createcard:not([hidden]){animation:vin var(--d2) var(--ease-out)}
details[open]>:not(summary){animation:vfade var(--d2) var(--ease)}
.moremenu .menu:not([hidden]){animation:pop .16s var(--ease-out)}
.sheet-bg{animation:fade var(--d3) var(--ease)}
.sheet{animation:up .3s var(--ease-sheet)}
.sheet-wrap.dlg .sheet{animation:dlgin var(--d2) var(--ease-out)}
.sheet-wrap.pop .sheet{animation:pop .14s var(--ease-out);box-shadow:var(--sh-pop)}
.moremenu .menu{box-shadow:var(--sh-pop)}
@keyframes dlgin{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
/* Design: type, numbers, dividers, tags, empty states, a soft light at the top of the page */
body{background:linear-gradient(180deg,var(--glow) 0,transparent 420px) no-repeat,var(--bg)}
h1{letter-spacing:-.018em}h2,h3{letter-spacing:-.01em}
.grouplabel{font-weight:500;letter-spacing:.06em;font-size:.76rem}
.eyebrow{letter-spacing:.07em}
.list,.dtable,.tag,.gcount,.kv,.stats,.toast,.chem,time,.techhead{font-variant-numeric:tabular-nums}
.list li{border-bottom-color:var(--hair)}
.kv div{border-bottom-color:var(--hair)}
.tag{border-radius:7px;letter-spacing:.01em}
.btn .ti,.actbtn .ti{flex:none;display:block}
.card.empty{border:0;background:var(--surface);box-shadow:var(--sh-card);padding:20px;gap:6px}
.card.empty>b{font-size:1.02rem;font-weight:600}
.stats div{box-shadow:var(--sh-card)}
/* Reduced motion: the same moments as gentle opacity fades, nothing moves or scales */
@media (prefers-reduced-motion:reduce){
 #view.vin>*,body:not(.formmode) #view.vin>*{animation:vfade .2s ease-out backwards!important}
 #view.vin .list>li:nth-child(-n+8),#view.vin .dtbody>:nth-child(-n+6){animation:vfade .18s ease-out backwards!important}
 .actpanel:not([hidden]),form[data-inline]:not([hidden]),.createcard:not([hidden]),details[open]>:not(summary),.moremenu .menu:not([hidden]){animation:vfade .18s ease-out!important}
 .sheet-bg,.sheet,.sheet-wrap.dlg .sheet,.sheet-wrap.pop .sheet{animation:vfade .2s ease-out!important}
 .loading{animation:ldin .2s .35s both!important}
 .btn:active:not(:disabled),.actbtn:active{transform:none}
}

/* Round 32: trial access notice. */
.readonly{width:calc(100% - 32px);max-width:1160px;margin:16px auto;box-sizing:border-box;background:#f6f0e4;border:1px solid #e3d7bf;color:#514832;animation:none;overflow-wrap:anywhere}.readonly p{margin:10px 0 16px}.readonly .btn{min-height:44px;max-width:100%;box-sizing:border-box}
/* Round 34: Pavilion setup, with one calm screen at a time. */
.legal-line{font-size:12px;line-height:1.6;color:var(--mut);text-align:center;margin-block:12px 0}.legal-line a{text-decoration:underline;text-underline-offset:3px}
body.wizardmode{padding:0;min-height:100dvh}
.wizardmode .topbar,.wizardmode #tabs,.wizardmode #readonlybanner{display:none!important}
.wizardmode #view.wrap{width:100%;max-width:480px;margin:0 auto;padding: max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));box-sizing:border-box}
#wz{padding:24px;margin-block:24px;min-width:0}
#wz h1{font-size:28px;line-height:1.2;margin-block:24px 12px;overflow-wrap:anywhere}
#wz .wz-sub{line-height:1.4;margin-block:0 20px}
#wz input,#wz select{height:50px;min-width:0;width:100%;box-sizing:border-box}
#wz label{margin-block:0 12px}
#wz .ferr:empty,#wz .err:empty{display:none}
#wz .wz-check{display:flex;align-items:center;gap:10px;min-height:44px}
#wz .wz-check input{width:22px;height:22px;flex:none}
#wz .btn{min-height:50px;margin-block-start:16px}
#wz .link{display:block;min-height:44px;margin-inline:auto;padding:10px 12px}
.wz-progress{height:4px;background:var(--line);border-radius:4px;overflow:hidden}
.wz-progress span{display:block;height:100%;border-radius:inherit;background:var(--acc);transition:width 180ms ease}
.wz-screen{animation:wz-enter 180ms ease both}
@keyframes wz-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){#wz{margin:0;padding:8px 0;border:0;background:transparent;box-shadow:none}#wz h1{font-size:27px}#wz .wz-sub{font-size:15px}.wizardmode #view.vin{animation:none}}
@media(prefers-reduced-motion:reduce){.wz-progress span{transition:none}.wz-screen{animation:wz-fade 150ms ease both}.wizardmode #view.vin{animation:wz-fade 150ms ease both}}
@keyframes wz-fade{from{opacity:0}to{opacity:1}}

@media(max-width:600px){.wz-keyboard #wzf{padding-block-end:76px}.wz-keyboard #wzf>button{position:fixed;inset-block-end:calc(var(--wz-keyboard,0px) + 8px);inset-inline:20px;width:calc(100% - 40px);z-index:10;box-shadow:0 0 0 8px var(--bg)}}

.legal-line a{display:inline-flex;align-items:center;min-height:44px;min-inline-size:44px;justify-content:center}

body.wizardmode #view.vin>*{animation:none!important}

/* R34 B: shared desktop date and time controls. */
@media (hover:hover) and (pointer:fine){
 input[type=date],input[type=time]{height:50px;min-height:50px;box-sizing:border-box;line-height:normal;padding-block:0;padding-inline-end:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23236b63' stroke-width='1.7'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M7 3v4m10-4v4M3 11h18'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
 input[type=time]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23236b63' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E")}
 input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{display:none}
 input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{padding:0;text-align:start}
 input[type=date]:hover,input[type=time]:hover{border-color:var(--acc)}
 input[type=date]:focus,input[type=time]:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
 [dir=rtl] input[type=date],[dir=rtl] input[type=time]{background-position:left 14px center}
}
.pf-picker{position:fixed;z-index:200;width:286px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;box-sizing:border-box;padding:16px;background:#fff;color:var(--txt);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 36px -10px rgba(20,54,48,.24);font-family:Figtree,sans-serif;animation:pf-picker-in 140ms ease-out both}
.pf-picker button{border:0;background:none;color:inherit;font:inherit;cursor:pointer;box-shadow:none;margin:0;padding:0;min-height:36px;border-radius:50%}
.pf-picker button:hover{background:var(--acc-soft)}
.pf-picker button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.pf-picker button:disabled{opacity:.3;cursor:default}
.pf-picker-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:4px}
.pf-picker-head button{width:44px;min-height:44px;font-size:26px}
.pf-picker[dir=rtl] .pf-picker-head button{transform:scaleX(-1)}
.pf-day-grid{display:grid;grid-template-columns:repeat(7,36px);grid-auto-rows:36px}
.pf-day-grid>span{display:grid;place-items:center;font-size:12px;color:var(--txt2)}
.pf-day-grid button{width:36px;height:36px;font-size:14px}
.pf-picker .pf-other-month{color:var(--txt2);opacity:.55}
.pf-picker .pf-today{box-shadow:inset 0 0 0 1px var(--acc)}
.pf-picker button[aria-selected=true]{background:var(--acc);color:white;opacity:1}
.pf-picker-foot{display:flex;justify-content:space-between;margin-top:8px}
.pf-picker-foot button{border-radius:8px;min-height:44px;padding-inline:10px;color:var(--acc);font-size:14px}
.pf-time-list{height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.pf-time-list button{flex:none;min-height:44px;border-radius:10px;text-align:center}
@keyframes pf-picker-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.pf-picker{animation:nfade 140ms ease-out both!important}}

/* Round 34 C support chat */
#supportbubble{position:fixed;right:24px;bottom:24px;width:52px;height:52px;border:0;border-radius:50%;background:#17665c;color:white;z-index:30;box-shadow:var(--sh2);cursor:pointer}
#supportbubble[hidden]{display:none}#supportbubble svg,#supportsend svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8}
body.formmode #supportbubble,body.wizardmode #supportbubble,body.pubmode #supportbubble{display:none}
#supporthost{position:fixed;inset:0;z-index:100;pointer-events:none;display:flex;align-items:flex-end;justify-content:flex-end;padding:24px;box-sizing:border-box}
#supportpanel{pointer-events:auto;width:380px;height:560px;max-height:100%;max-width:100%;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh2);overflow:hidden;animation:support-in 180ms ease-out}
#supportpanel header{display:flex;justify-content:space-between;align-items:center;padding:16px;gap:12px;border-bottom:1px solid var(--line)}
#supportpanel h2{margin:0;font-size:1.2rem}#supportpanel header p{margin:4px 0 0;font-size:.85rem;color:var(--mut)}
#supportclose{min-height:44px;min-width:44px;background:var(--sunk);border:0;border-radius:12px;color:var(--txt);font:inherit;cursor:pointer}
#supportmessages{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:16px;overscroll-behavior:contain}
.supportmessage{align-self:flex-start;max-width:88%;border-radius:16px;background:var(--sunk);padding:12px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.9rem;flex-shrink:0}
.supportmessage.mine{align-self:flex-end;background:#17665c;color:white}.supportmessage time{display:block;text-align:end;font-size:.72rem;margin-top:6px;opacity:.8}
#supportform{padding:12px 16px max(16px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}#supporterror:empty{display:none}.supportcompose{display:flex;align-items:flex-end;gap:8px}#supportinput{resize:none;margin:0;min-height:48px;max-height:120px;flex:1}#supportsend{min-width:48px;min-height:48px;padding:12px;margin:0}
@keyframes support-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:767px){#supporthost{padding:0;background:rgba(0,0,0,.18);pointer-events:auto}#supportpanel{width:100%;height:75%;border-radius:24px 24px 0 0}#supportbubble{right:16px;bottom:calc(78px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){#supportpanel{animation:vfade 180ms ease-out}}