/* ===== Design tokens (web-11.0, see DESIGN.md). Every colour, size, radius, shadow and timing lives here. ===== */
/* web-11.16: ascent/descent overrides lift Urbanist 0.06em so mostly-lowercase labels look centred in pills (same 1.2em line, so no layout moves) */
@font-face{font-family:"Urbanist";font-style:normal;font-display:swap;font-weight:100 900;ascent-override:89%;descent-override:31%;line-gap-override:0%;
  src:url("fonts/urbanist-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Urbanist";font-style:normal;font-display:swap;font-weight:100 900;ascent-override:89%;descent-override:31%;line-gap-override:0%;
  src:url("fonts/urbanist-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  /* colour roles, light. Built from the reference design (DESIGN.md): a grey window, a lighter grey panel, near-white
     tiles, white chips, one solid charcoal for the main action, and racing green where the reference uses lime and teal. */
  --win:#D9DADC; --panel:#E7E8E9; --tile:#F3F3F4; --chip:#FFFFFF; --raised:#FFFFFF; --field:#FFFFFF; --hover:#ECEDEE;
  --ink:#1A1D21; --ink-2:#4A5058; --ink-3:#7A8087; --on-ink:#FFFFFF;
  --solid:#1A1D21; --on-solid:#FFFFFF;
  --line:#C9CDD2; --rule:#D6D8DB; --rule-strong:#C9CDD2;
  --green:#1F5C3A; --green-2:#2E7D50; --hi:#CFE7D7; --hi-2:#E3F1E7; --green-wash:#E3F1E7; --hd:#1F4D33; --green-soft:#9FD9B5;
  --score-lo:#F1DEDC;
  --bad:#B3261E; --warn:#B3261E;
  --sheen:linear-gradient(165deg,#D5EBDC 0%,#E9F2EC 34%,#F3F4F3 70%,#F1F1F1 100%);
  --scrim:rgba(17,19,21,.42);
  --shadow-pop:0 1px 2px rgba(17,19,21,.06),0 10px 32px rgba(17,19,21,.14);
  /* type: Urbanist, light and roomy like the reference. Display titles 32, a person's name 30, card titles 22, list names 19 */
  --font:"Urbanist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --t-display:32px; --t-name:28px; --t-figure:44px; --t-h2:22px; --t-row:19px; --t-body:15px; --t-small:14px; --t-label:12.5px; --t-micro:12px;
  --w-title:500; --w-row:500; --w-label:500;
  --track-title:-.01em; --track-body:0;
  /* space */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:56px;
  --gutter:16px; --gap:10px;
  --hit:44px; --btn-h:46px; --ctl-h:50px; --circ:46px;
  /* shape: everything rounded generously, as in the reference */
  --r-panel:30px; --r-card:24px; --r-tile:18px; --r-pill:999px; --r-ctl:999px; --r-pop:24px; --line-w:1px;
  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1); --dur-1:120ms; --dur-2:200ms;
  /* legacy names, mapped onto the roles above until each screen is rebuilt (rollout passes remove them) */
  --bg:var(--panel); --card:var(--tile); --text:var(--ink); --sub:var(--ink-2); --na:var(--ink-3); --press:var(--hover);
  --hair:var(--rule); --tint:var(--hover); --paper:var(--tile); --canvas:var(--panel); --page:var(--panel); --pane:var(--tile);
  --navy:var(--ink); --teal:var(--green); --teal-ink:var(--green); --ok:var(--green); --mon:var(--warn); --rep:var(--bad);
  --blue:var(--ink-2); --purple:var(--ink-2);
  --display:var(--font); --ui:var(--font);
  --tabh:64px;
  box-sizing:border-box;
  padding-top:calc(env(safe-area-inset-top,0px) + var(--tb,0px)); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (min-width:860px) and (min-height:500px){ :root{ --t-name:30px; --gutter:24px; --btn-h:42px; --ctl-h:44px; --hit:38px; --circ:40px } }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --win:#0D0E10; --panel:#16181B; --tile:#1F2225; --chip:#2A2D31; --raised:#1F2225; --field:#2A2D31; --hover:#24272B;
  --ink:#F0F1F2; --ink-2:#AAB0B6; --ink-3:#848A91; --on-ink:#111315; --solid:#F0F1F2; --on-solid:#111315;
  --line:#3A3F45; --rule:#2C3035; --rule-strong:#3A3F45;
  --green:#6FB08A; --green-2:#3E8A5E; --hi:#244A33; --hi-2:#1C3226; --green-wash:#1C3226; --hd:#1E4A31; --green-soft:#9FD9B5;
  --score-lo:#4A2C2A; --bad:#F2938B; --warn:#F2938B;
  --sheen:linear-gradient(165deg,#1E3A2A 0%,#1B2722 36%,#1A1D20 72%,#191B1E 100%);
  --scrim:rgba(0,0,0,.6); --shadow-pop:0 1px 2px rgba(0,0,0,.4),0 12px 36px rgba(0,0,0,.5) } }
:root[data-theme="dark"]{
  --win:#0D0E10; --panel:#16181B; --tile:#1F2225; --chip:#2A2D31; --raised:#1F2225; --field:#2A2D31; --hover:#24272B;
  --ink:#F0F1F2; --ink-2:#AAB0B6; --ink-3:#848A91; --on-ink:#111315; --solid:#F0F1F2; --on-solid:#111315;
  --line:#3A3F45; --rule:#2C3035; --rule-strong:#3A3F45;
  --green:#6FB08A; --green-2:#3E8A5E; --hi:#244A33; --hi-2:#1C3226; --green-wash:#1C3226; --hd:#1E4A31; --green-soft:#9FD9B5;
  --score-lo:#4A2C2A; --bad:#F2938B; --warn:#F2938B;
  --sheen:linear-gradient(165deg,#1E3A2A 0%,#1B2722 36%,#1A1D20 72%,#191B1E 100%);
  --scrim:rgba(0,0,0,.6); --shadow-pop:0 1px 2px rgba(0,0,0,.4),0 12px 36px rgba(0,0,0,.5) }
:root{color-scheme:light dark} :root[data-theme="light"]{color-scheme:light} :root[data-theme="dark"]{color-scheme:dark}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important} }
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:inherit;-webkit-tap-highlight-color:transparent}
body{margin:0;min-height:100%;background:var(--panel);color:var(--ink);font:400 var(--t-body)/1.5 var(--font);letter-spacing:var(--track-body);font-variant-numeric:tabular-nums lining-nums;-webkit-font-smoothing:antialiased;caret-color:var(--green)}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit;color:var(--text)}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:var(--r-ctl)}
::selection{background:var(--green-wash)}
[hidden]{display:none!important}
.screen{max-width:640px;margin:0 auto;padding:0 16px calc(var(--tabh) + 40px + env(safe-area-inset-bottom,0px))}
body.withfoot .screen{padding-bottom:calc(var(--tabh) + 120px + env(safe-area-inset-bottom,0px))}
body.withfoot .toast{bottom:calc(var(--tabh) + 96px + env(safe-area-inset-bottom,0px))}
.tabbar{transform:translateZ(0)}

/* nav bars */
.bar{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--tb,0px));z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);margin:0 -16px;padding:10px 16px;display:flex;align-items:center;gap:10px;min-height:52px;border-bottom:.5px solid transparent}
.bar.scrolled{border-bottom-color:var(--hair)}
.bar .t{flex:1;text-align:center;font-weight:600;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navbtn{background:none;border:0;color:var(--teal-ink);font-weight:600;font-size:1rem;padding:6px 4px;cursor:pointer;min-width:64px;text-align:left}
.navbtn.r{text-align:right}
.brandrow{padding:16px 0 2px}
.brandrow picture img{width:min(100%,230px);height:auto;display:block}
h1.large{font:700 2.05rem/1.1 var(--ui);letter-spacing:-.02em;margin:18px 0 14px}
.sectionlabel{font-size:.8rem;font-weight:600;color:var(--sub);margin:22px 4px 7px}

/* grouped lists */
.group{background:var(--card);border-radius:14px;overflow:hidden}
.cell{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:48px;position:relative;background:var(--card);width:100%;border:0;text-align:left}
.cell+.cell::before,.item+.item::before{content:"";position:absolute;top:0;left:14px;right:0;height:.5px;background:var(--hair)}
button.cell{cursor:pointer}
button.cell:active{background:var(--press)}
.cell .lbl{flex:1;min-width:0}
.cell .val{color:var(--sub);text-align:right}
.chev{width:8px;height:13px;flex:none;opacity:.35}
.cell input,.cell select{border:0;background:transparent;text-align:right;padding:0;min-width:0;flex:1;outline:none;color:var(--text)}
.cell select{appearance:none;-webkit-appearance:none;text-align:right;text-align-last:right;color:var(--sub);cursor:pointer}
.cell input::placeholder{color:var(--na)}

/* history */
.plate{font:700 .8rem/1 var(--ui);letter-spacing:.08em;border:1.5px solid currentColor;border-radius:6px;padding:4px 6px;color:var(--sub);white-space:nowrap}
.badge{font-size:.72rem;font-weight:700;padding:3px 7px;border-radius:999px;background:var(--field);color:var(--sub)}
.badge.draft{background:color-mix(in srgb,var(--mon) 18%,transparent);color:color-mix(in srgb,var(--mon) 80%,var(--text))}
.empty{text-align:center;padding:48px 18px 28px}
.empty svg{width:150px;height:auto;opacity:.9}
.empty h2{font-weight:700;font-size:1.25rem;margin:14px 0 6px}
.empty p{color:var(--sub);margin:0 auto 20px;max-width:34ch}
.stat{background:var(--card);border-radius:14px;padding:12px}
.stat b{display:block;font:700 1.5rem/1.15 var(--display)}
.stat span{display:block;font-size:.72rem;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* buttons */
.cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--teal);color:#fff;border:0;border-radius:14px;padding:15px 18px;font-weight:700;font-size:1rem;cursor:pointer}
a.cta{text-decoration:none}
.cta:active{filter:brightness(.94)}
.cta.secondary{background:var(--card);color:var(--teal-ink)}
.cta.danger{background:var(--card);color:var(--rep)}
.cta:disabled{opacity:.45}

/* tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:saturate(1.6) blur(20px);-webkit-backdrop-filter:saturate(1.6) blur(20px);border-top:.5px solid var(--hair);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar .in{max-width:640px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;height:var(--tabh);padding:0 6px}
.tab{position:relative}
.tabdot{position:absolute;top:2px;right:calc(50% - 18px);width:9px;height:9px;border-radius:50%;background:var(--rep);border:2px solid var(--card)}
.tab{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.72rem;font-weight:600;color:var(--na);cursor:pointer}
.tab[aria-current="page"]{color:var(--teal-ink)}
.tab svg{width:25px;height:25px}

/* check editor */
.progress{height:3px;background:var(--hair);border-radius:6px;overflow:hidden;margin:0 -16px}
.progress i{display:block;height:100%;background:var(--teal);width:0;transition:width .3s}
.chips{display:flex;gap:7px;overflow-x:auto;padding:12px 16px;margin:0 -16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:0;background:var(--card);border-radius:999px;padding:8px 13px;font-size:.9rem;font-weight:600;color:var(--sub);cursor:pointer;display:flex;align-items:center;gap:6px}
.chip[aria-current="true"]{background:var(--navy);color:var(--bg)}
.chip .n{font-size:.72rem;opacity:.75}
.chip .d{width:7px;height:7px;border-radius:50%;background:var(--hair)}
.chip .d.full{background:var(--teal)}
.chip .d.issue{background:var(--rep)}
.secthead{margin:6px 4px 12px}
.secthead h2{font:700 1.65rem/1.15 var(--ui);letter-spacing:-.015em;margin:0}
.secthead p{color:var(--sub);margin:4px 0 0;font-size:.9rem}
.allok{background:none;border:0;color:var(--teal-ink);font-weight:600;font-size:.9rem;cursor:pointer;padding:4px 0}

.item{position:relative;padding:13px 14px;background:var(--card)}
.item .top{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.item .q{font-weight:600;font-size:.9rem;line-height:1.3}
.item .h{font-size:.8rem;color:var(--sub);margin-top:3px}
.pricechip{display:inline-block;margin-top:7px;font-size:.8rem;font-weight:700;color:var(--rep);background:color-mix(in srgb,var(--rep) 10%,transparent);border-radius:6px;padding:3px 8px}
.item .tag{display:inline-block;white-space:nowrap;font-size:.72rem;font-weight:700;color:var(--rep);background:color-mix(in srgb,var(--rep) 12%,transparent);border-radius:6px;padding:1px 5px;margin-left:6px;vertical-align:2px}
.seg4{display:grid;grid-template-columns:repeat(4,1fr);background:var(--field);border-radius:10px;padding:2px;margin-top:10px}
.seg4 button{border:0;background:none;border-radius:10px;padding:7px 0;font-size:.8rem;font-weight:600;color:var(--sub);cursor:pointer}
.seg4 button[aria-pressed="true"]{background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.seg4 button.s-ok[aria-pressed="true"]{color:var(--ok)}
.seg4 button.s-mon[aria-pressed="true"]{color:var(--mon)}
.seg4 button.s-rep[aria-pressed="true"]{color:var(--rep)}
.itemopts{margin-top:6px}
.itemopts .opt{background:var(--field)}
.itemopts .opt[aria-pressed="true"]{background:color-mix(in srgb,var(--teal) 12%,var(--card))}
.item textarea,.sheet textarea{width:100%;margin-top:9px;border:0;background:var(--field);border-radius:10px;padding:9px 11px;resize:none;font-size:.9rem;min-height:40px}

/* car map */
.carwrap{background:var(--card);border-radius:14px;padding:14px 10px 10px}
svg.car{display:block;width:100%;max-width:400px;margin:0 auto;height:auto;touch-action:manipulation}
.z{fill:var(--field);stroke:var(--navy);stroke-opacity:.55;stroke-width:1.3;cursor:pointer;transition:fill .15s}
.z:hover{fill:color-mix(in srgb,var(--teal) 16%,var(--field))}
.z.glass{fill:color-mix(in srgb,#5FA8D3 26%,var(--field))}
.z.hl{fill:#FFF3C4}
.z.tl{fill:#F7B4B4}
.z.wheel{fill:#1E2A3A;stroke:#1E2A3A}
.z.has{fill:color-mix(in srgb,var(--rep) 26%,var(--field))}
.z.wheel.has{fill:#7A2A31}
.z:focus-visible{outline:none;stroke:var(--teal);stroke-width:3;stroke-opacity:1}
.pin circle{fill:var(--rep);stroke:#fff;stroke-width:1.8}
.pin text{fill:#fff;font:700 8.5px var(--ui);text-anchor:middle;pointer-events:none}
.pin.flag circle{fill:var(--mon)}
.pin.temp circle{fill:var(--teal)}
svg.car:not(.static) .pin{cursor:pointer}
svg.car.static{pointer-events:none;max-width:260px}
@keyframes pinring{30%{r:13}100%{r:7.5}}
.dirlbl{font:700 12px var(--display);letter-spacing:.06em;fill:var(--teal-ink)}
.sidelbl{font:600 9.5px var(--ui);fill:var(--sub);letter-spacing:.04em}
.legend{display:flex;justify-content:center;gap:14px;font-size:.8rem;color:var(--sub);margin-top:6px;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:6px;margin-right:5px;vertical-align:-1px}

.dmg{display:flex;gap:10px;align-items:center}
.dmg .dot{width:9px;height:9px;border-radius:50%;background:var(--rep);flex:none}
.dmg .dot.flag{background:var(--mon)}
.dmg .val{white-space:nowrap}
.dmg .lbl{min-width:0}
.num{width:23px;height:23px;border-radius:50%;background:var(--rep);color:#fff;font:700 .72rem/23px var(--ui);text-align:center;flex:none;font-style:normal}
.num.flag{background:var(--mon)}
button.cell.dmg{cursor:pointer}
.dmg .x{border:0;background:none;color:var(--na);font-size:1.25rem;line-height:1;padding:2px 4px;cursor:pointer}

.photos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
.addphoto{aspect-ratio:1;border-radius:10px;border:1.5px dashed var(--hair);display:grid;place-items:center;color:var(--teal-ink);cursor:pointer;background:var(--card);font-size:.72rem;font-weight:600;text-align:center}
.notebox{font-size:.9rem;color:var(--sub);margin:8px 4px 0}


/* 3D car */
.stage{position:relative;height:clamp(270px,80vw,420px);background:radial-gradient(ellipse 70% 60% at 50% 42%,color-mix(in srgb,var(--teal) 9%,var(--card)),var(--card))}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;outline:none}
.stage canvas:active{cursor:grabbing}
.views{display:grid;grid-template-columns:repeat(5,1fr);border-top:.5px solid var(--hair)}
.views button{border:0;background:none;padding:11px 0;font-size:.8rem;font-weight:600;color:var(--teal-ink);cursor:pointer}
.views button+button{border-left:.5px solid var(--hair)}
.views button:active{background:var(--press)}
.modelnote{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--sub);margin:8px 4px 0}
.modelnote button{border:0;background:none;color:var(--teal-ink);font-weight:600;padding:0;cursor:pointer;font-size:.8rem}
.zonepick{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:10px;padding:9px 12px;margin-bottom:4px}
.zonepick span{font-size:.8rem;color:var(--sub);font-weight:600;white-space:nowrap}
.zonepick select{flex:1;min-width:0;border:0;background:transparent;font-weight:600;text-align:right;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer}

.cell .val.set{color:var(--text)}
.cell .val{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62%}
.swatch{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.sheet.tall{height:86vh;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pksearch{flex:none;margin:12px 0 4px}
.pklist{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px 20px}
.pksub{display:block;font-size:.8rem;color:var(--sub)}
.cell.combo{gap:8px;scroll-margin-top:118px}
.cell.combo input{font-weight:500}
.cell.combo input::placeholder{color:var(--na);font-weight:400}
.cell.combo .caret{color:var(--na);display:grid;place-items:center;padding:4px;cursor:pointer;transition:transform .15s}
.cell.combo.open .caret{transform:rotate(180deg);color:var(--teal-ink)}
.cell.combo.open{background:color-mix(in srgb,var(--teal) 6%,var(--card))}
.combolist{max-height:280px;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--field);border-top:.5px solid var(--hair);border-bottom:.5px solid var(--hair);padding:4px 0}
.cbsec{font-size:.72rem;font-weight:700;color:var(--sub);padding:8px 16px 4px}
.cbitem{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;text-align:left;padding:11px 16px;font-size:.9rem;cursor:pointer;color:var(--text)}
.cbitem:active{background:var(--press)}
.cbitem.on{color:var(--teal-ink);font-weight:600}
.cbitem small{margin-left:auto;color:var(--sub);font-size:.8rem}
.cbitem.custom{color:var(--teal-ink);font-weight:600}
.cbnote{padding:12px 16px;color:var(--sub);font-size:.9rem}
.dlgwrap{position:fixed;inset:0;z-index:80;background:rgba(2,10,22,.45);display:grid;place-items:center;padding:24px;opacity:0;transition:opacity .18s}
.dlgwrap.on{opacity:1}
.dlg{background:var(--card);border-radius:18px;padding:22px 20px 18px;max-width:340px;width:100%;text-align:center;transform:scale(.94);transition:transform .18s;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.dlgwrap.on .dlg{transform:none}
.dlgicon{width:52px;height:52px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;color:var(--rep);background:color-mix(in srgb,var(--rep) 12%,transparent)}
.dlg h3{margin:0 0 6px;font-size:1.12rem}
.dlg p{margin:0 0 18px;color:var(--sub);font-size:.9rem}
.dlgbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dlgbtns .cta{padding:12px}
.cta.secondary{border:1px solid var(--hair)}
.cta.dangerfill{background:var(--rep);color:#fff}
.offer{background:var(--card);border-radius:18px;padding:16px 16px 14px;margin-top:10px;border:1.5px solid color-mix(in srgb,var(--teal) 45%,transparent)}
.listing{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:.9rem;margin:4px 0 2px;color:var(--sub)}
.listing a{color:var(--teal-ink);font-weight:600;text-decoration:none}
.photorow{margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.photobtn{width:auto;padding:10px 14px;font-size:.9rem;gap:8px}
.pinphoto{width:96px;height:96px;object-fit:cover;border-radius:14px;display:block}
.pinphoto.big{width:100%;height:auto;max-height:280px;margin-top:12px}
.dmgthumb{width:40px;height:40px;object-fit:cover;border-radius:10px;flex:none}
.rrow .num{margin-top:1px}
.chip.known{background:color-mix(in srgb,var(--mon) 16%,var(--card));color:color-mix(in srgb,var(--mon) 70%,var(--text))}
.chip.known[aria-current="true"]{background:var(--mon);color:#fff}
.searchbar{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:14px;padding:0 12px;margin-top:14px;color:var(--na)}
.searchbar input{flex:1;border:0;background:transparent;padding:12px 0;outline:none;font-size:1rem;min-width:0}
.searchbar:focus-within{box-shadow:0 0 0 2px var(--teal)}
mark{background:color-mix(in srgb,var(--teal) 28%,transparent);color:inherit;border-radius:6px;padding:0 1px}
.selfrow{gap:12px}
.badge.st-new{background:color-mix(in srgb,var(--rep) 14%,transparent);color:var(--rep)}
.badge.st-reviewed{background:color-mix(in srgb,var(--mon) 18%,transparent);color:color-mix(in srgb,var(--mon) 75%,var(--text))}
.badge.st-booked{background:color-mix(in srgb,var(--teal) 18%,transparent);color:var(--teal-ink)}
.badge.st-declined{background:var(--field);color:var(--na)}
.sdphotos{grid-template-columns:repeat(3,1fr)}
.sdphotos figure{margin:0} .sdphotos img{cursor:zoom-in}
.sdphotos figcaption{font-size:.72rem;color:var(--sub);margin-top:3px;text-align:center}
/* customer mode */
body.custmode .screen{padding-bottom:40px}
.custtop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.custtop span{font-size:.8rem;color:var(--sub);font-weight:600;white-space:nowrap}
.custhead{margin:22px 2px 14px} .custhead h2{font-size:1.7rem;line-height:1.15;letter-spacing:-.015em;margin:0} .custhead p{color:var(--sub);margin:6px 0 0;font-size:1rem}
.cgroup{background:var(--card);border-radius:14px;padding:4px 14px}
.cfield{display:block;padding:10px 0} .cfield+.cfield{border-top:.5px solid var(--hair)}
.cfield span{display:block;font-size:.8rem;font-weight:700;color:var(--sub);margin-bottom:2px}
.cfield input{width:100%;border:0;background:transparent;font-size:1.12rem;padding:4px 0;outline:none}
.custnav{display:flex;gap:10px;margin-top:22px} .custnav .cta.secondary{flex:0 0 34%} .cta.soft{opacity:.55}
.photogrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pslot{aspect-ratio:4/3;border:2px dashed color-mix(in srgb,var(--teal) 45%,var(--hair));border-radius:14px;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--teal-ink);cursor:pointer;padding:8px;text-align:center;position:relative;overflow:hidden}
.pslot b{color:var(--text);font-size:1rem} .pslot small{color:var(--sub);font-size:.72rem;line-height:1.25}
.pslot.has{border-style:solid;border-color:var(--teal);padding:0} .pslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pslot .ok{position:absolute;left:6px;bottom:6px;background:rgba(17,19,21,.8);color:#fff;font-size:.72rem;font-weight:700;border-radius:999px;padding:3px 8px}
.pslot.busy{opacity:.5}
.cnote{color:var(--sub);font-size:.9rem;text-align:center;margin:12px 0 0}
.qcard{background:var(--card);border-radius:14px;padding:14px;margin-bottom:10px}
.qq{font-weight:600;font-size:1rem} .qh{color:var(--sub);font-size:.9rem;margin-top:2px}
.qopts{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;margin-top:10px}
.qopts button{border:1.5px solid var(--hair);background:var(--field);border-radius:14px;padding:12px 4px;font-weight:600;font-size:.9rem;cursor:pointer}
.qopts button[aria-pressed="true"]{border-color:var(--teal);background:color-mix(in srgb,var(--teal) 14%,var(--card));color:var(--teal-ink)}
.qcard textarea{width:100%;margin-top:10px;border:0;background:var(--field);border-radius:10px;padding:10px 12px;resize:vertical}
.opts.big .opt{padding:12px 16px;font-size:1rem}
.custdone{text-align:center;padding:50px 10px 10px}
.custdone .tick{width:76px;height:76px;border-radius:50%;background:var(--teal);display:grid;place-items:center;margin:0 auto 18px}
.custdone h2{font-size:1.7rem;margin:0 0 8px} .custdone p{color:var(--sub);max-width:32ch;margin:0 auto}
.brandslot .brandrow{padding:14px 0 2px}
.loginbox{max-width:420px;margin:0 auto;padding-top:20px}
.loginerr{color:var(--rep);font-weight:600;margin:12px 4px 0}
.loginmsg{color:var(--teal-ink);font-weight:600;text-align:center;margin:6px 4px 0}
.linkbox{margin-top:12px;background:var(--field);border-radius:10px;padding:10px 12px;font-size:.8rem;color:var(--sub);word-break:break-all;user-select:all}
/* bottom strip once reserved for the Netlify badge (badge removed, so no gap) */
:root{--badge:0px}
.tabbar{padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--badge))!important}
.footbar{bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px) + var(--badge))!important}
.screen{padding-bottom:calc(var(--tabh) + 40px + env(safe-area-inset-bottom,0px) + var(--badge))!important}
body.withfoot .screen{padding-bottom:calc(var(--tabh) + 120px + env(safe-area-inset-bottom,0px) + var(--badge))!important}
body.custmode .screen{padding-bottom:calc(40px + var(--badge))!important}
.toast{bottom:calc(var(--tabh) + 12px + env(safe-area-inset-bottom,0px) + var(--badge))!important}
body.withfoot .toast{bottom:calc(var(--tabh) + 96px + env(safe-area-inset-bottom,0px) + var(--badge))!important}
.sheet{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px) + var(--badge))!important}
.cell input[type=date]{text-align:right;color:var(--text)}
.fu{font-size:.72rem;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--field);color:var(--sub)}
.fu.today{background:color-mix(in srgb,var(--teal) 18%,transparent);color:var(--teal-ink)}
.fu.late{background:color-mix(in srgb,var(--rep) 14%,transparent);color:var(--rep)}
.badge.st-contacted{background:color-mix(in srgb,var(--mon) 18%,transparent);color:color-mix(in srgb,var(--mon) 75%,var(--text))}
.badge.st-offer{background:color-mix(in srgb,var(--purple) 16%,transparent);color:var(--purple)}
.badge.st-bought{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.badge.st-lost{background:var(--field);color:var(--na)}
.estcard{background:var(--card);border-radius:14px;padding:14px}
.est-top b{display:block;font:800 1.6rem/1.1 var(--display)} .est-top span{font-size:.9rem;color:var(--sub)}
.est-lines{margin-top:10px}
.est-lines div{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:.5px solid var(--hair);font-size:.9rem}
.est-lines span{flex:1} .est-lines b{font-variant-numeric:tabular-nums}
.est-unk{margin-top:8px}
.est-unk div{background:color-mix(in srgb,var(--mon) 13%,var(--card));border-radius:10px;padding:8px 10px;font-size:.9rem;margin-top:6px}
.estcard p{font-size:.8rem;color:var(--sub);margin:10px 0 0}
.consent{display:flex;gap:10px;align-items:flex-start;background:var(--card);border-radius:14px;padding:14px;margin-top:12px;font-size:.9rem;cursor:pointer}
.consent input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--teal)}
.consent a{color:var(--teal-ink);font-weight:600}
.track{display:flex;justify-content:space-between;margin:14px 2px 0;position:relative}
.track:before{content:"";position:absolute;left:8%;right:8%;top:13px;height:2px;background:var(--hair)}
.nextcard{background:var(--card);border-radius:14px;padding:14px;margin-top:12px;border:1.5px solid color-mix(in srgb,var(--teal) 40%,transparent);display:flex;flex-direction:column;gap:4px}
.nextcard b{font-size:1rem} .nextcard span{color:var(--sub);font-size:.9rem} .nextcard .cta,.nextcard .stack{margin-top:8px}
.nextcard .navbtn{text-align:center;padding:8px 0}
.badge.st-sa_sent{background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue)}
.badge.st-sa_done{background:color-mix(in srgb,var(--rep) 14%,transparent);color:var(--rep)}
.badge.st-inspected{background:color-mix(in srgb,var(--teal) 18%,transparent);color:var(--teal-ink)}
.calhead{display:flex;align-items:center;justify-content:space-between;background:var(--card);border-radius:14px 14px 0 0;padding:6px 8px 0}
.calhead b{font-size:1rem}
.calhead .navbtn{font-size:1.5rem;padding:2px 12px}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);background:var(--card);border-radius:0 0 14px 14px;padding:4px 8px 10px;gap:2px}
.calwd{text-align:center;font-size:.72rem;font-weight:700;color:var(--sub);padding:6px 0}
.calday{border:0;background:none;border-radius:10px;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;color:var(--text);font-size:.9rem;padding:0}
.calday i{font-style:normal;color:var(--teal-ink);font-size:.72rem;line-height:.8;letter-spacing:1px;font-weight:800}
.calday.past{color:var(--na)}
.calday.today span{color:var(--teal-ink);font-weight:800}
.calday.sel{background:var(--navy);color:var(--bg)} .calday.sel i{color:var(--teal)} .calday.sel span{color:var(--bg)}
.bkrow{gap:12px}
.bktime{flex:none;width:62px;text-align:left}
.bktime b{display:block;font-size:.9rem} .bktime span{font-size:.72rem;color:var(--sub)}
.badge.st-booked{background:color-mix(in srgb,var(--teal) 18%,transparent);color:var(--teal-ink)}
.bkline{color:var(--text)!important;line-height:1.7;margin-top:4px}
.okline{color:var(--ok)!important;font-weight:600;font-size:.9rem!important}
.warnline{color:color-mix(in srgb,var(--mon) 80%,var(--text))!important;font-weight:600;font-size:.9rem!important}
.btnrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.cell input.switch,.switch{flex:none!important;min-width:51px;max-width:51px;padding:0;appearance:none;-webkit-appearance:none;width:51px;height:31px;border-radius:14px;background:var(--hair);position:relative;flex:none;cursor:pointer;transition:background .2s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.cell input.switch{background:var(--hair)} .cell input.switch:checked,.switch:checked{background:var(--ok)} .switch:checked::after{transform:translateX(20px)}
.lrow .badge{flex:none;font-size:.72rem}
.lrow .meta{font-size:.8rem}
.ctx{color:var(--sub)} .ctx.today{color:var(--teal-ink);font-weight:600} .ctx.late{color:var(--rep);font-weight:600}
.lhero{background:var(--card);border-radius:18px;padding:16px;margin-top:8px}
.lh1{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.lname{font-size:1.25rem;font-weight:700;line-height:1.2}
.lcar{color:var(--sub);font-size:.9rem;margin-top:2px}
.lcontact{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.lcontact button{border:0;background:var(--field);border-radius:14px;padding:9px 0 8px;font-size:.8rem;font-weight:600;cursor:pointer;color:var(--teal-ink);display:flex;flex-direction:column;align-items:center;gap:2px}
.lcontact button b{font-size:1.12rem;font-weight:400}
.lcontact button:disabled{opacity:.35;cursor:default}
.btnrow3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.btnrow3 button{border:0;background:var(--field);border-radius:10px;padding:9px 4px;font-size:.8rem;font-weight:600;cursor:pointer;color:var(--teal-ink)}
.tcount{display:inline-block;min-width:18px;height:18px;line-height:18px;border-radius:10px;background:var(--rep);color:#fff;font-size:.72rem;padding:0 5px;margin-left:3px}
.pmore{border:0;background:none;color:var(--teal-ink);font-weight:600;font-size:.9rem;padding:8px 14px;cursor:pointer}
.funnel{padding:4px 0}
.pstats3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pstats3 div{background:var(--card);border-radius:14px;padding:12px}
.pstats3 b{display:block;font:800 1.25rem/1.15 var(--display);white-space:nowrap}
.pstats3 span{font-size:.72rem;color:var(--sub)}
.lswitch{margin:0 0 12px}
.badge.sk-recon{background:color-mix(in srgb,var(--mon) 18%,transparent);color:color-mix(in srgb,var(--mon) 75%,var(--text))}
.badge.sk-ready{background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue)}
.badge.sk-listed{background:color-mix(in srgb,var(--teal) 18%,transparent);color:var(--teal-ink)}
.badge.sk-sold{background:color-mix(in srgb,var(--mon) 18%,transparent);color:color-mix(in srgb,var(--mon) 75%,var(--text))}
.badge.sk-prep{background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue)}
.badge.sk-paid{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.soldstrip{margin-top:8px;background:color-mix(in srgb,var(--ok) 12%,var(--card));color:var(--ok);font-weight:700;border-radius:14px;padding:10px 14px;font-size:.9rem}
.numcard{background:var(--card);border-radius:14px;padding:6px 16px;margin-top:12px}
.numcard div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:.5px solid var(--hair);font-size:.9rem}
.numcard div:last-child{border-bottom:0}
.numcard span{color:var(--sub);min-width:0;overflow-wrap:anywhere} .numcard b{font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:12px} /* overnight 25 Oct 2026: a long name wraps instead of pushing the figure off a phone screen */
.numcard .tot b{font-weight:800}
.numcard .big span{color:var(--text);font-weight:600} .numcard .big b{font:800 1.25rem var(--display)}
.numcard .pos b{color:var(--ok)} .numcard .neg b{color:var(--rep)}
.recrow{gap:10px}
.recrow .lbl small{display:block;color:var(--sub);font-size:.8rem}
.recrow.done .lbl{color:var(--sub)}
.rck,.cell input.rck{width:22px;height:22px;flex:none!important;accent-color:var(--teal);margin:0}
.cell input.rcost{flex:0 0 84px;text-align:right;background:var(--field);border-radius:10px;padding:6px 8px;font-size:.9rem}
.recrow .x{border:0;background:none;color:var(--na);font-size:1.25rem;padding:0 2px;cursor:pointer}
.rexp{width:22px;text-align:center;color:var(--sub);font-weight:700;flex:none}
@supports (-webkit-touch-callout:none){ input,textarea,select{font-size:16px!important} }
.buyprog{margin-top:12px}
.buyprog div{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem} .buyprog span{color:var(--sub)}
.buyprog i{display:block;height:6px;background:var(--field);border-radius:6px;margin-top:6px;overflow:hidden} .buyprog em{display:block;height:100%;background:var(--teal)}
.ckrow{display:flex;gap:12px;padding:13px 14px;align-items:flex-start;position:relative}
.ckrow+.ckrow::before{content:"";position:absolute;top:0;left:48px;right:0;height:.5px;background:var(--hair)}
.ckrow.tick{cursor:pointer}
.ckm{width:22px;height:22px;border-radius:50%;border:2px solid var(--hair);flex:none;display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#fff;margin-top:1px}
.ckm.req{border-color:color-mix(in srgb,var(--rep) 60%,transparent)} .ckm.ok{background:var(--ok);border-color:var(--ok)}
.ckbody{flex:1;min-width:0}
.cklbl{font-weight:600;font-size:.9rem;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cksub{font-size:.8rem;color:var(--sub);margin-top:3px} .cksub a{color:var(--teal-ink);font-weight:600}
.rtag{font-size:.72rem;font-weight:700;border-radius:999px;padding:2px 7px;background:var(--field);color:var(--sub)}
.rtag.req{background:color-mix(in srgb,var(--rep) 12%,transparent);color:var(--rep)}
.ckinlbl{display:block;margin:9px 0 -3px 2px;font-size:.72rem;font-weight:600;color:var(--sub)}
.ckin{display:block;width:100%;border:0;background:var(--field);border-radius:10px;padding:9px 11px;margin-top:7px;color:var(--text);font:inherit;font-size:.9rem}
.ck2{display:grid;grid-template-columns:1fr 1fr;gap:0 8px} .ck2.expline{grid-template-columns:minmax(0,2fr) minmax(0,1fr)} .ofcomm{flex-direction:column;align-items:stretch;gap:8px} .ofcomm .qopts{margin:0} .ofcomm input.ckin{width:100%;text-align:left;background:var(--field);border-radius:10px;padding:9px 11px} .commin{display:grid;grid-template-columns:1fr 1fr;gap:0 8px} .commin>div:only-child{grid-column:1/-1} .ofcomm .ckinlbl{margin-top:0} .ck3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 8px}
.qopts.sm{margin-top:8px} .qopts.sm button{padding:9px 4px;font-size:.9rem}
.cktick{width:24px;height:24px;flex:none;accent-color:var(--ok);margin-top:1px}
.sigwrap,.tabbar,.lcontact{-webkit-user-select:none;user-select:none}
.sigwrap{position:relative;margin-top:8px;background:#fff;border:1.5px dashed var(--hair);border-radius:14px;height:150px;overflow:hidden}
.sigwrap canvas{position:absolute;inset:0}
.sigph{position:absolute;inset:0;display:grid;place-items:center;color:#9AA5B4;font-size:.9rem;pointer-events:none}
.sigimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.sigbar{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--sub);margin-top:4px}
.licimg{display:block;max-width:100%;max-height:180px;border-radius:10px;margin-top:8px}
.regrow{gap:10px} .regrow small{display:block;font-size:.8rem;color:var(--sub)}
/* web-12.24 (Tom): register page spacing */
.regintro{margin:4px 2px 0;color:var(--ink-2);font-size:15px;line-height:1.5;max-width:70ch}
.regtools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 12px}
.regcount{font:500 14px/1.2 var(--font);color:var(--ink-2)}
.pill.regex{min-height:36px;padding:0 14px;gap:6px;font-size:14px;border:1px solid var(--line);background:transparent;cursor:pointer}
.pill.regex:disabled{opacity:.45;cursor:default}
.regempty{color:var(--ink-3)} .regempty b{color:var(--ink)}
.docthumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.doct{aspect-ratio:3/4;background:var(--field);border-radius:10px;overflow:hidden;display:grid;place-items:center;cursor:zoom-in;font-size:.72rem;color:var(--sub)}
.doct img{width:100%;height:100%;object-fit:cover}
.subtick{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:.9rem;font-weight:600}
.subtick input{width:20px;height:20px;accent-color:var(--ok)}
#pbMode{margin-top:4px}
.welsub{color:var(--sub);margin:4px 2px 16px;font-size:1rem}
.pwrow{display:flex;align-items:center;gap:8px} .pwrow input{flex:1}
.pwrules{display:flex;gap:14px;margin:10px 4px 0;font-size:.8rem;color:var(--sub)}
.pwrules span{display:inline-flex;align-items:center;gap:6px} .pwi{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--hair);display:grid;place-items:center;color:transparent} .pwrules span.ok{color:var(--ok);font-weight:600} .pwrules span.ok .pwi{background:var(--ok);border-color:var(--ok);color:#fff}
.brandslot2 .brandrow{padding:14px 0 2px}
.themeseg button{font-size:.9rem}
.badge.st-accepted{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.prevbar{position:sticky;top:0;z-index:5;margin:0 -16px;background:var(--navy);color:var(--bg);font-size:.9rem;font-weight:600;padding:10px 16px;display:flex;justify-content:space-between;align-items:center}
.prevbar .navbtn{color:var(--bg)!important}
.offhero{background:var(--card);border-radius:18px;overflow:hidden;margin-top:10px;text-align:center;padding-bottom:20px}
.offphoto{height:190px;background:var(--field) center/cover no-repeat;margin-bottom:16px}
.offhero>div:first-child:not(.offphoto){margin-top:20px}
.offhi{color:var(--sub);font-size:.9rem;padding:0 16px;margin-top:4px}
.offcar{font-size:1.25rem;font-weight:700;padding:2px 16px 0}
.offmeta{color:var(--sub);font-size:.9rem}
.offamt{font:800 3rem/1.1 var(--display);color:var(--teal-ink);margin-top:14px}
.offvalid{font-size:.9rem;font-weight:600;color:var(--sub);margin-top:4px}
.offmsg{background:var(--card);border-radius:14px;padding:14px 16px;margin-top:12px;font-size:.9rem}
.offby{color:var(--sub);font-size:.9rem;margin-top:6px}
.offbtns{display:grid;gap:10px;margin-top:20px}
.offdone{background:color-mix(in srgb,var(--ok) 12%,var(--card));border-radius:14px;padding:16px;margin-top:18px;font-weight:600;text-align:center}
.xmk{color:var(--rep);font-weight:800;width:16px;flex:none}
.offcall{display:block;text-align:center;text-decoration:none;margin-top:14px}
.tbar .t{font-size:1.12rem;font-weight:700;letter-spacing:-.01em}
.tbar+*{margin-top:10px}
.tbar .navbtn{min-width:44px}
.plusbtn{display:flex;justify-content:flex-end;align-items:center;padding:4px 0}
body.scrolled .bar{border-bottom-color:var(--hair)}
.lswitch{margin-top:10px}
.splash{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:50}
@keyframes spin{to{transform:rotate(360deg)}}
.offbar{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + var(--tb,0px) + 58px);z-index:30;background:var(--navy);color:var(--bg);font-size:.8rem;font-weight:700;padding:6px 12px;border-radius:999px;max-width:calc(100% - 32px);text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.18);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.offbar.off{background:#8A5A00;color:#fff}
/* animated TB loader */
/* loader (web-9.45): the TB mark fills with colour, left to right, then fades and starts again. Nothing moves. */
.tbloadwrap{display:grid;place-items:center;min-height:calc(100dvh - var(--tabh) - 170px)}
/* the product's name filling with colour (web-10.71; was the TradeBeat mark) */
.tbload{position:relative;line-height:0}
.tbload span{display:block}
.tbload img{height:64px;width:auto;display:block}
.tbload .ghost{filter:grayscale(1);opacity:.18}
.tbload .fill{position:absolute;inset:0}
.tbload .fill{-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 40%,transparent 60%);-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;animation:tbfill 2s cubic-bezier(.45,0,.25,1) infinite}
@keyframes tbfill{0%{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:1}60%{-webkit-mask-position:0 0;mask-position:0 0;opacity:1}80%{-webkit-mask-position:0 0;mask-position:0 0;opacity:1}100%{-webkit-mask-position:0 0;mask-position:0 0;opacity:0}}
@keyframes tbpulse{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.tbload .fill{-webkit-mask-image:none;mask-image:none;animation:tbpulse 1.4s ease-in-out infinite alternate}}
html.nozoom,html.nozoom body{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.nozoom *{touch-action:manipulation}
html.nozoom canvas{touch-action:none}
.sidebrand{display:none}
.deskph{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:calc(100vh - 150px);color:var(--sub);max-width:380px;margin:0 auto;font-size:.9rem}
.deskph b{color:var(--text);font-size:1.25rem;margin-top:8px}
.dpi{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--teal) 13%,transparent);color:var(--teal-ink)!important}
.dpkeys{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:22px;font-size:.8rem;color:var(--sub)}
.dpkeys span{display:inline-flex;align-items:center;gap:4px}
.dpkeys kbd{font:600 .72rem inherit;min-width:22px;height:22px;padding:0 6px;display:inline-grid;place-items:center;border:1px solid var(--hair);border-bottom-width:2px;border-radius:6px;background:var(--card);color:var(--text)}
.cfield select{width:100%;border:0;background:transparent;font-size:1rem;padding:4px 0;color:var(--text);outline:none}
.listtools{display:flex;align-items:center;gap:10px;margin-top:4px;flex-wrap:wrap}
.bulkbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--navy);color:var(--bg);border-radius:14px;padding:6px 10px;font-size:.8rem;flex:1}
.bulkbar b{margin-right:4px} .bulkbar button{border:0;background:color-mix(in srgb,var(--bg) 16%,transparent);color:var(--bg);border-radius:10px;padding:6px 9px;font-weight:600;font-size:.8rem;cursor:pointer}
.bulkbar button.danger{background:var(--rep);color:#fff}
.bulkck{width:22px;height:22px;border-radius:6px;border:2px solid var(--hair);flex:none;display:grid;place-items:center;font-size:.8rem;font-weight:800;color:#fff}
.bulkck.on{background:var(--teal);border-color:var(--teal)}
.chip.cview{border-style:dashed} .chip .vx{margin-left:4px;font-weight:800;opacity:.7}
.chip.addview{background:none;color:var(--teal-ink);border:1px dashed color-mix(in srgb,var(--teal) 50%,transparent)}
.tblwrap{overflow-x:auto;background:var(--card);border-radius:14px;margin-top:8px}
.stbl{width:100%;border-collapse:collapse;font-size:.9rem}
.stbl th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--sub);padding:12px 12px 8px;cursor:pointer;white-space:nowrap;user-select:none;border-bottom:.5px solid var(--hair)}
.stbl td{padding:10px 12px;border-bottom:.5px solid var(--hair);vertical-align:middle;white-space:nowrap}
.stbl tbody tr{cursor:pointer} .stbl tbody tr:hover{background:var(--press)}
.stbl .tnum{text-align:right;font-variant-numeric:tabular-nums}
.stbl .tcar{font-weight:600} .stbl .tsub{font-size:.72rem;color:var(--sub)}
.stbl .pos{color:var(--ok);font-weight:700} .stbl .neg{color:var(--rep);font-weight:700}
.stbl .late{color:var(--rep);font-weight:700} .stbl .warn{color:color-mix(in srgb,var(--mon) 80%,var(--text));font-weight:700}
.tprice{width:100px;text-align:right;border:1px solid transparent;background:var(--field);border-radius:10px;padding:6px 8px;font:inherit;color:var(--text)}
.tprice:hover{border-color:var(--hair)} .tprice:focus{outline:none;border-color:var(--teal);background:var(--card)}
@media (min-width:860px) and (min-height:500px){ #s-stock{max-width:1200px} }
.wkhead{display:flex;align-items:center;gap:6px;margin-bottom:10px} .wkhead b{font-size:1rem}
.wkgrid{display:grid;grid-template-columns:54px repeat(7,minmax(0,1fr));background:var(--card);border-radius:14px;overflow:hidden}
.wktimes .wkt{font-size:.72rem;color:var(--sub);text-align:right;padding-right:8px;transform:translateY(-7px)}
.wkdh{height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom:.5px solid var(--hair);font-size:.72rem;color:var(--sub)}
.wkdh b{font-size:1rem;color:var(--text)} .wkcol.today .wkdh b{color:#fff;background:var(--teal);border-radius:50%;width:28px;height:28px;display:grid;place-items:center}
.wkcol{border-left:.5px solid var(--hair)} .wkcol.today{background:color-mix(in srgb,var(--teal) 4%,transparent)}
.wkbody{position:relative} .wkbody.over{background:color-mix(in srgb,var(--teal) 10%,transparent)}
.wkslot{position:absolute;left:0;right:0;border-bottom:.5px solid var(--hair)}
.wkev{position:absolute;left:3px;right:3px;background:color-mix(in srgb,var(--mon) 22%,var(--card));border-radius:10px;padding:4px 6px;font-size:.72rem;overflow:hidden;cursor:grab;display:flex;flex-direction:column;line-height:1.25;z-index:2}
.wkev.conf{background:color-mix(in srgb,var(--teal) 18%,var(--card))}
.wkev.done{background:var(--field);opacity:.75}
.wkev{gap:1px;justify-content:flex-start}
.wkev span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.wkt1{font-weight:700;font-size:.8rem;color:var(--text)} .wkt1 em{font-style:normal;font-weight:600;color:var(--sub);margin-right:2px}
.wkt2{font-size:.72rem;color:var(--sub)}
.wkev.dragging{opacity:.4}
@media (min-width:860px) and (min-height:500px){ #s-cal{max-width:1200px} }
.tab.deskonly{display:none} .sidekbd{display:none}
.cmdk{position:fixed;inset:0;z-index:80;background:rgba(2,10,22,.45);display:flex;justify-content:center;align-items:flex-start;padding:calc(env(safe-area-inset-top,0px) + 70px) 14px 14px}
.cmdbox{width:100%;max-width:600px;background:var(--bg);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.3);overflow:hidden}
.cmdin{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:.5px solid var(--hair);color:var(--sub)}
.cmdin input{flex:1;border:0;background:none;font-size:1rem;color:var(--text);outline:none}
.cmdin kbd,.sidekbd{font:600 .72rem var(--font,inherit);border:1px solid var(--hair);border-radius:6px;padding:2px 6px;color:var(--sub)}
.cmdres{max-height:60vh;overflow-y:auto;padding:6px}
.cmdh{font-size:.72rem;color:var(--sub);font-weight:700;padding:6px 10px}
.cmditem{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;text-align:left;padding:9px 10px;border-radius:10px;cursor:pointer;color:var(--text)}
.cmditem.on,.cmditem:hover{background:color-mix(in srgb,var(--teal) 12%,transparent)}
.cmditem small{display:block;color:var(--sub);font-size:.8rem} .cmdk-ic{font-size:1.12rem}
.cmdempty{padding:20px;text-align:center;color:var(--sub)}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:6px}
.kpi{background:var(--card);border-radius:14px;padding:12px 14px} .kpi b{display:block;font-size:1.5rem;font-weight:800;line-height:1.15} .kpi span{font-size:.8rem;color:var(--sub);font-weight:600} .kpi small{display:block;font-size:.72rem;color:var(--teal-ink);font-weight:600;margin-top:2px}
.rcard{background:var(--card);border-radius:14px;padding:14px}
/* headroom above the tallest bar for its number (web-10.11) */
.wbars{display:flex;align-items:flex-end;gap:6px;height:190px;padding:24px 0 20px}
.wbar{flex:1;height:100%;position:relative;display:flex;align-items:flex-end;justify-content:center}
.wb{width:70%;background:color-mix(in srgb,var(--teal) 30%,transparent);border-radius:5px 5px 0 0;position:relative;min-height:2px}
.wb span{position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:.72rem;font-weight:700;color:var(--sub)}
.wbb{position:absolute;bottom:0;width:70%;background:var(--teal);border-radius:5px 5px 0 0}
.wbar small{position:absolute;bottom:-18px;font-size:.72rem;color:var(--sub);white-space:nowrap}
/* dark mode: the light bars (all leads) need more colour to show on a dark card */
:root[data-theme="dark"] .wb,:root[data-theme="dark"] .l1{background:color-mix(in srgb,var(--teal) 45%,var(--card))}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .wb,:root:not([data-theme="light"]) .l1{background:color-mix(in srgb,var(--teal) 45%,var(--card))} }
.rlegend{display:flex;gap:16px;align-items:center;font-size:.8rem;color:var(--sub);margin-top:8px} .rlegend span{display:inline-flex;align-items:center;gap:6px} .rlegend i{display:inline-block;width:10px;height:10px;border-radius:6px} .l1{background:color-mix(in srgb,var(--teal) 30%,transparent)} .l2{background:var(--teal)}
.frow2{display:grid;grid-template-columns:130px 1fr 36px 40px;gap:10px;align-items:center;padding:6px 0;font-size:.9rem}
.fb{height:10px;background:var(--field);border-radius:6px;overflow:hidden} .fb i{display:block;height:100%;background:var(--teal);border-radius:6px}
.frow2 b{text-align:right} .frow2 small{color:var(--sub);text-align:right}
.rgrid{display:grid;gap:0 16px}
.ied{cursor:text;border-radius:6px} .ied:hover{background:var(--press);outline:1px dashed var(--hair)}
.iedin{font:inherit;border:1px solid var(--teal);border-radius:10px;padding:2px 6px;background:var(--card);color:var(--text);outline:none}
.pblabel{display:none}
.ic{display:inline-block;vertical-align:middle;flex:none}
.ilin{display:inline-flex;align-items:center;gap:6px}
.bkline .ilin{display:flex;margin-top:3px}
.okic{color:var(--ok)} .tealic{color:var(--teal-ink)}
.ctxic{margin:-2px 4px 0 0}
.chipic{margin:-2px 4px 0 -2px}
.lcontact button .ic{margin-bottom:1px}
.cmdk-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--field);color:var(--teal-ink)}
.offdoneic{color:var(--ok);margin-bottom:6px}
.themeseg button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.addphoto .ic{color:var(--teal-ink)}
.welback{display:block;margin:calc(env(safe-area-inset-top,0px) + 10px) 0 0;padding:6px 0;min-width:0;font-size:.9rem}
.unreaddot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rep);margin:0 6px 1px 0;vertical-align:middle}
.taskrow{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;cursor:pointer;position:relative}
.taskrow+.taskrow::before{content:"";position:absolute;top:0;left:48px;right:0;height:.5px;background:var(--hair)}
.taskrow:active{background:var(--press)} .taskrow .lbl{flex:1;min-width:0} .taskrow>svg:last-child,.taskrow>.chev{align-self:center;color:var(--na);flex:none} /* .chev too: on iPhone a haptic switch is appended after it (web-10.50) */
.tkchk{width:22px;height:22px;border-radius:50%;border:2px solid var(--hair);background:none;flex:none;display:grid;place-items:center;color:#fff;cursor:pointer;margin-top:1px;padding:0}
.tkchk:hover{border-color:var(--teal)} .tkchk.on{background:var(--ok);border-color:var(--ok)}
.tktitle{font-weight:600;font-size:.9rem} .taskrow.done .tktitle{text-decoration:line-through;color:var(--sub);font-weight:500}
.tksub{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:.8rem;color:var(--sub);margin-top:2px}
.tksub .late{color:var(--rep);font-weight:700} .tksub .today{color:var(--teal-ink);font-weight:700}
.tkav{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--teal) 18%,transparent);color:var(--teal-ink);font-size:.72rem;font-weight:800}
.tkhigh{display:inline-block;font-size:.72rem;font-weight:800;color:#fff;background:var(--rep);border-radius:6px;padding:1px 5px;margin-right:6px;vertical-align:1px}
.tknote{font-size:.8rem;color:var(--sub);margin-top:4px;white-space:pre-wrap}
.tkempty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:28px 16px;text-align:center;color:var(--sub)} .tkempty .ic{color:var(--ok)} .tkempty b{color:var(--text)}
.tabcount{margin-left:auto;background:var(--rep);color:#fff;font-size:.72rem;border-radius:10px;min-width:20px;height:20px;line-height:20px;text-align:center;padding:0 6px}
.opts .opt .ic{margin:-2px 2px 0 0}
@media (min-width:860px) and (min-height:500px){ #s-tasks{max-width:900px} }
:root{--c-new:#3B82F6;--c-wait:#F59E0B;--c-sain:#8B5CF6;--c-book:#14B8A6;--c-insp:#0EA5E9;--c-offer:#EC4899;--c-acc:#22C55E;--c-sell:#0D9488}
/* needs attention cards */
.astack{display:flex;flex-direction:column;gap:8px}
.acard{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:12px 12px 12px 12px;border:1px solid var(--hair);cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}
/* web-9.99: the coloured edge became a round icon, tinted by how urgent it is */
.aic{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--field);color:var(--sub)}
.acard.late .aic{background:color-mix(in srgb,var(--rep) 14%,transparent);color:var(--rep)} .acard.today .aic{background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal-ink)}
.acard:active{background:var(--press)}
.ainfo{flex:1;min-width:0} .aname{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .acar{font-size:.8rem;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.awhy{font-size:.8rem;font-weight:600;margin-top:3px;color:var(--sub)} .acard.late .awhy{color:var(--rep)} .acard.today .awhy{color:var(--teal-ink)}
.abtn{flex:none;border:0;border-radius:999px;padding:8px 14px;font-weight:700;font-size:.8rem;background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal-ink);cursor:pointer}
.acard.late .abtn{background:color-mix(in srgb,var(--rep) 12%,transparent);color:var(--rep)}
.aclear{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:14px;padding:14px;color:var(--sub);font-size:.9rem} .aclear .ic{color:var(--ok)}
/* phone stage timeline */
.ptl{background:var(--card);border-radius:14px;padding:6px 0}
.ptlrow{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;text-align:left;padding:11px 14px 11px 16px;cursor:pointer;color:var(--text);position:relative}
.ptlrow::before{content:"";position:absolute;left:21px;top:0;bottom:0;width:2px;background:var(--hair)}
.ptl>.ptlrow:first-child::before{top:50%} .ptl>.ptlrow:nth-last-child(2)::before{bottom:50%} .ptlrow.zero .ptlname,.ptlrow.zero .ptlcount{color:var(--na)}
.ptlrow .lbl{flex:1;min-width:0} .ptlname{font-weight:600;font-size:.9rem} .ptlsub{font-size:.8rem;color:var(--sub)}
.ptlcount{min-width:30px;height:26px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:.9rem;background:color-mix(in srgb,var(--sc) 14%,transparent);color:var(--sc);padding:0 8px}
.ptlrow.zero .ptlcount{background:var(--field)}
.ptlrow.open{background:var(--press)}
.ptlitems{margin:2px 10px 10px 38px;display:flex;flex-direction:column;gap:6px}
.ptlitem{display:flex;align-items:center;gap:10px;width:100%;border:0;text-align:left;background:var(--bg);border-radius:14px;padding:9px 10px;cursor:pointer;color:var(--text)}
.ptlitem:active{background:var(--press)} .ptlitem .lbl{flex:1;min-width:0}
.ptlitem>svg:last-child{color:var(--na);flex:none}
.bav.sm{width:28px;height:28px;font-size:.72rem;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--sc);flex:none}
.pin{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pic{font-size:.8rem;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pix{font-size:.8rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* month + kpis */
.pmonth{display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border-radius:14px;padding:14px 6px}
.pmonth div{text-align:center;border-left:.5px solid var(--hair)} .pmonth div:first-child{border-left:0}
.pmonth b{display:block;font-size:1.25rem;font-weight:800} .pmonth span{font-size:.72rem;color:var(--sub);font-weight:600}
.pmonth .pos{color:var(--ok)} .pmonth .neg{color:var(--rep)}
.pkpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:6px}
.pkpis.phone{grid-template-columns:repeat(2,1fr);margin-top:10px}
.pkpi{background:var(--card);border-radius:14px;padding:12px 14px} .pkpi b{display:block;font-size:1.25rem;font-weight:800;line-height:1.2} .pkpi span{font-size:.8rem;color:var(--sub);font-weight:600}
/* computer: attention row + board */
.psec{margin-top:16px}
.psechead{display:flex;justify-content:space-between;align-items:baseline;margin:0 2px 8px} .psechead b{font-size:1rem} .psechead span{font-size:.8rem;color:var(--sub);font-weight:600}
.arow{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.arow .acard{flex:0 0 290px;scroll-snap-align:start}
.boardshell{position:relative}
.boardshell::before,.boardshell::after{content:"";position:absolute;top:0;bottom:10px;width:36px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:2}
.boardshell::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)} .boardshell::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.boardshell.fl::before,.boardshell.fr::after{opacity:1}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{flex:none;margin:0!important}
.mtotal{margin-left:auto;font-size:.8rem;color:var(--sub);font-weight:600}
.mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--card);border-radius:14px;overflow:hidden;border:.5px solid var(--hair)}
.mwd{font-size:.72rem;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.05em;padding:10px 10px 8px;border-bottom:.5px solid var(--hair)}
.mcell{min-height:118px;border-right:.5px solid var(--hair);border-bottom:.5px solid var(--hair);padding:6px 6px 8px;display:flex;flex-direction:column;gap:4px;transition:background .12s;cursor:default}
.mcell:nth-child(7n){border-right:0}
.mcell:hover{background:var(--press)} .mcell.over{background:color-mix(in srgb,var(--teal) 12%,transparent)}
.mcell.out{background:color-mix(in srgb,var(--field) 55%,transparent)} .mcell.out .mday span{color:var(--na)}
.mday span{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:14px;font-size:.9rem;font-weight:700;color:var(--text)}
.mcell.past:not(.today) .mday span{color:var(--sub);font-weight:600}
.mcell.today .mday span{background:var(--teal);color:#fff}
.mlane{display:flex;flex-direction:column;gap:3px;min-width:0}
.mev{display:block;font-size:.72rem;font-weight:600;padding:3px 7px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;background:color-mix(in srgb,var(--mon) 20%,var(--card));color:var(--text)}
.mev em{font-style:normal;font-weight:500;color:var(--sub);margin-right:4px}
.mev.conf{background:color-mix(in srgb,var(--teal) 16%,var(--card))}
.mev.done{background:var(--field);color:var(--sub)}
.mev:hover{filter:brightness(.97)} .mev.dragging{opacity:.4}
.mmore{border:0;background:none;text-align:left;font-size:.72rem;font-weight:700;color:var(--teal-ink);padding:1px 7px;cursor:pointer}
.ppsrcard{background:var(--card);border-radius:14px;padding:14px;border:1.5px solid var(--hair)}
.ppsrcard.clear{border-color:color-mix(in srgb,var(--ok) 45%,transparent)} .ppsrcard.flag{border-color:color-mix(in srgb,var(--rep) 55%,transparent);background:color-mix(in srgb,var(--rep) 6%,var(--card))}
.pphead{display:flex;gap:10px;align-items:center} .pphead b{display:block;font-size:1rem} .pphead span{font-size:.8rem;color:var(--sub)}
.ppsrcard.clear .pphead .ic{color:var(--ok)} .ppsrcard.flag .pphead .ic{color:var(--rep)}
.pprow{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:.5px solid var(--hair);font-size:.9rem;margin-top:6px}
.pprow+.pprow{margin-top:0} .pprow span{color:var(--sub)} .pprow b{display:inline-flex;align-items:center;gap:5px} .pprow b.ok{color:var(--ok)} .pprow b.bad{color:var(--rep)}
.ppmeta{font-size:.8rem;color:var(--sub);margin-top:8px;word-break:break-all}
.ppbtns{display:flex;align-items:center;gap:12px;margin-top:10px} .ppbtns .cta{width:auto;padding:9px 14px;font-size:.9rem}
.ppsrbtn{display:inline-flex;align-items:center;gap:6px;width:auto;padding:9px 14px;font-size:.9rem;margin-top:8px}
#pbPpsrRes .ppsrcard{margin-top:8px}
.ppsrtl{background:var(--card);border-radius:14px;padding:6px 0 4px}
.ptlhead{display:flex;justify-content:space-between;align-items:baseline;padding:10px 14px 6px} .ptlhead b{font-size:1rem} .ptlhead span{font-size:.8rem;color:var(--sub)}
.ptrow{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:.5px solid var(--hair)}
.ptrow .lbl{flex:1;min-width:0} .ptrow b{display:block;font-size:.9rem;font-weight:600} .ptrow small{display:block;font-size:.8rem;color:var(--sub)}
.ptic{width:22px;height:22px;border-radius:50%;border:2px solid var(--hair);display:grid;place-items:center;flex:none;color:#fff}
.ptrow.ok .ptic{background:var(--ok);border-color:var(--ok)} .ptrow.bad .ptic{background:var(--rep);border-color:var(--rep)}
.ptrow.due .ptic{border-color:var(--mon)} .ptrow.due small{color:color-mix(in srgb,var(--mon) 80%,var(--text));font-weight:600}
.ptrow.bad small{color:var(--rep);font-weight:600} .ptrow.ok small{color:var(--ok);font-weight:600}
.ptrun{border:0;border-radius:999px;padding:7px 13px;font-weight:700;font-size:.8rem;background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal-ink);cursor:pointer;flex:none}
.ptrow.ok .ptrun,.ptrow.bad .ptrun{background:var(--field);color:var(--sub)}
.ppwarn{display:flex;gap:8px;align-items:flex-start;margin-top:8px;font-size:.8rem;font-weight:600;color:color-mix(in srgb,var(--mon) 80%,var(--text))}
.ppwarn.bad{color:var(--rep)} .ppwarn.agend{margin:12px 0 0;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,currentColor 8%,var(--card))} .agend>div{display:flex;flex-direction:column;gap:3px;flex:1} .agend b{font-size:.9rem} .agend span{font-weight:500;color:var(--text)} .agend .cta{color:var(--text)}
.ppwarn.big{background:color-mix(in srgb,var(--mon) 14%,var(--card));border-radius:14px;padding:12px;margin:0 0 12px;font-weight:500;color:var(--text)} .ppwarn.big b{display:block} .ppwarn.big .ppsrbtn{display:flex;margin-top:8px}
.ppok{display:flex;gap:8px;align-items:center;background:color-mix(in srgb,var(--ok) 12%,var(--card));color:var(--ok);font-weight:700;font-size:.9rem;border-radius:14px;padding:10px 12px;margin-bottom:12px}
.sheet>*{flex-shrink:0} .sheet>.pklist{flex-shrink:1;min-height:0}
.cdcard{background:var(--card);border-radius:14px;padding:12px 14px 6px}
.cdhead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px} .cdhead b{display:block;font-size:1rem} .cdhead span{font-size:.8rem;color:var(--sub)}
.cdedit{display:inline-flex;align-items:center;gap:4px;font-size:.9rem}
.cdgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.cdi{padding:8px 0;border-top:.5px solid var(--hair);min-width:0} .cdi span{display:block;font-size:.72rem;color:var(--sub);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.cdi b{display:block;font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cdi b.mono{font-family:ui-monospace,Menlo,monospace;font-size:.8rem;letter-spacing:.02em} .cdi b.cddue{color:var(--rep)}
@media (min-width:860px) and (min-height:500px){ .cdgrid{grid-template-columns:repeat(3,1fr)} }
.setrow{align-items:center;gap:12px} .setrow .lbl{flex:1;min-width:0;white-space:normal} .setrow small{white-space:normal;overflow-wrap:anywhere}
/* sheet */
.scrim{position:fixed;inset:0;background:rgba(2,10,22,.42);z-index:65;opacity:0;transition:opacity .2s}
.scrim.on{opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:66;max-width:640px;margin:0 auto;background:var(--bg);border-radius:18px 18px 0 0;padding:8px 16px calc(18px + env(safe-area-inset-bottom,0px));transform:translateY(102%);transition:transform .28s cubic-bezier(.2,.8,.2,1),translate .28s cubic-bezier(.2,.8,.2,1);max-height:88vh;overflow-y:auto}
.sheet.on{transform:none}
.grab{width:38px;height:5px;border-radius:6px;background:var(--hair);margin:2px auto 10px}
.sheet h3{font-weight:700;font-size:1.25rem;margin:0}
.sheet .sub{color:var(--sub);font-size:.9rem;margin:2px 0 14px}
.opts{display:flex;flex-wrap:wrap;gap:7px}
.opt{border:1.5px solid transparent;background:var(--card);border-radius:10px;padding:9px 12px;font-size:.9rem;font-weight:600;cursor:pointer;text-align:left}
.opt small{display:block;font-weight:500;color:var(--sub);font-size:.8rem}
.opt[aria-pressed="true"]{border-color:var(--teal);background:color-mix(in srgb,var(--teal) 10%,var(--card))}

/* footer bar in editor */
.footbar{position:fixed;left:0;right:0;bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px));z-index:29;background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:saturate(1.6) blur(20px);-webkit-backdrop-filter:saturate(1.6) blur(20px);border-top:.5px solid var(--hair);padding:10px 16px}
.footbar .in{max-width:608px;margin:0 auto;display:flex;align-items:center;gap:12px}
.footbar .est{flex:1;min-width:0}
.footbar .est span{display:block;font-size:.72rem;color:var(--sub);font-weight:600}
.footbar .est b{font:700 1.25rem/1.1 var(--display);white-space:nowrap}
.footbar .cta{width:auto;padding:12px 22px}

/* report */
.rhero{background:var(--card);border-radius:18px;padding:18px;position:relative;overflow:hidden}
.rhero .car{font-weight:700;font-size:1.25rem;line-height:1.2;margin:8px 0 2px}
.rhero .meta{color:var(--sub);font-size:.9rem}
.scorebox{display:flex;align-items:center;gap:16px;margin-top:16px}
.ring{width:96px;height:96px;flex:none;position:relative}
.ring .v{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring .v b{font:800 2rem/1 var(--display)}
.ring .v small{display:block;font-size:.72rem;color:var(--sub);font-weight:600;margin-top:2px}
.verdict b{display:block;font-weight:700;font-size:1.12rem}
.verdict span{font-size:.9rem;color:var(--sub)}
.estbig{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.estbig .stat b{font-size:clamp(.92rem,4.1vw,1.12rem);white-space:nowrap}
.total{background:var(--navy);color:var(--bg);border-radius:18px;padding:16px 18px;margin-top:10px}
.total span{font-size:.8rem;font-weight:600;opacity:.75}
.total b{display:block;white-space:nowrap;font:800 clamp(1.55rem,7.6vw,2.1rem)/1.1 var(--display);letter-spacing:-.01em;margin-top:2px}
.alert{border-radius:14px;padding:12px 14px;margin-top:10px;font-size:.9rem;display:flex;gap:10px}
.alert.red{background:color-mix(in srgb,var(--rep) 13%,var(--card))}
.alert.amber{background:color-mix(in srgb,var(--mon) 15%,var(--card))}
.alert b{display:block}
.rrow{display:flex;gap:10px;align-items:flex-start}
.rrow .lbl{flex:1}
.rrow .lbl small{display:block;color:var(--sub);font-size:.8rem}
.rrow .amt{font-weight:700;font-size:.9rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.fine{font-size:.8rem;color:var(--sub);margin:14px 4px}
.stack>*+*{margin-top:10px}

/* price guide */
.segctl{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--field);border-radius:10px;padding:2px}
.segctl button{border:0;background:none;border-radius:10px;padding:7px 4px;font-size:.8rem;font-weight:600;color:var(--sub);cursor:pointer}
.segctl button[aria-pressed="true"]{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.search{width:100%;border:0;background:var(--field);border-radius:10px;padding:10px 12px;margin-top:10px}

.toast{position:fixed;left:50%;bottom:calc(var(--tabh) + 12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:var(--navy);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:.9rem;font-weight:600;opacity:0;transition:all .25s;z-index:70;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translateX(-50%)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.tl-long{display:none} .ltabs button{white-space:nowrap}
@media (min-width:860px) and (min-height:500px){ .tl-long{display:inline} .tl-short{display:none} body.split-leads #s-selfd .bar .t,body.split-stock #s-stockd .bar .t{visibility:hidden} }
.cdmore{display:flex;align-items:center;gap:6px;width:100%;border:0;border-top:.5px solid var(--hair);background:none;padding:12px 0 8px;color:var(--teal-ink);font-weight:600;font-size:.9rem;cursor:pointer;text-align:left}
.cdcard .cdgrid+.cdmore{margin-top:2px}
.setitem{gap:12px} .setitem .lbl small{display:block;color:var(--sub);font-size:.8rem;font-weight:400;margin-top:1px}
.seticon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal-ink);flex:none}
#setBody:not(.insection) .setcontent{display:none} #setBody.insection .setmenu{display:none}
#setBody .setmenu{margin-top:8px} .setpane>.sectionlabel:first-child{margin-top:12px}
@media (min-width:860px) and (min-height:500px){
  #setBody,#setBody.insection{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;align-items:start;max-width:1100px!important}
  #setBody .setmenu,#setBody.insection .setmenu{display:block;position:sticky;top:76px} #setBody .setcontent{display:block}
  .setitem.on{background:color-mix(in srgb,var(--teal) 10%,var(--card))} .setitem.on .lbl{color:var(--teal-ink);font-weight:700}
  .setitem>svg:last-child{display:none}
}
.dlgwrap.ask{z-index:90} .dlg .dlgbody{white-space:pre-wrap;text-align:left} .dlg .dlgbtns .cta{min-height:46px;font-size:.9rem}
.dlgin{width:100%;margin-top:8px;border:1px solid var(--hair);border-radius:10px;padding:12px;background:var(--card);color:var(--text);font-size:1rem}
.cta.dangerfill{background:var(--rep);color:#fff}
.toast.act{display:flex;align-items:center;gap:14px;padding:8px 8px 8px 16px} .toast.act.on{pointer-events:auto}
.tundo{border:0;background:color-mix(in srgb,var(--bg) 18%,transparent);color:var(--teal);font-weight:800;font-size:.9rem;padding:6px 12px;border-radius:999px;cursor:pointer}
.skel{background:var(--card);border-radius:var(--r-card);margin-top:10px;overflow:hidden}
.skrow{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:.5px solid var(--hair)} .skrow>div{flex:1;display:flex;flex-direction:column;gap:7px}
.skav,.skl,.skb{display:block;border-radius:8px;background:linear-gradient(90deg,var(--field) 0%,color-mix(in srgb,var(--field) 50%,var(--card)) 50%,var(--field) 100%);background-size:200% 100%;animation:skel 1.2s ease-in-out infinite}
.skav{width:42px;height:42px;border-radius:12px;flex:none} .skl{height:11px} .w60{width:60%} .w40{width:40%} .skb{width:70px;height:18px;border-radius:999px;flex:none}
@keyframes skel{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){ .skav,.skl,.skb{animation:none} }
.estate{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:40px 20px;color:var(--sub);font-size:.9rem}
.estate b{color:var(--text);font-size:1.12rem;margin-top:6px} .estate span:not(.esic){max-width:34ch}
.esic{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--teal) 13%,transparent);color:var(--teal-ink)}
.esbtn{width:auto;margin-top:12px;padding:0 20px}
.mnicon{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--teal) 13%,transparent);color:var(--teal-ink);flex:none;margin-right:12px}
.mnicon.bad{background:color-mix(in srgb,var(--rep) 12%,transparent);color:var(--rep)}
.sep{display:inline-block;width:1px;height:.8em;background:currentColor;opacity:.28;margin:0 .5em;vertical-align:-.06em;font-style:normal}
.sheetfoot{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom,0px));margin:14px -16px calc(-18px - env(safe-area-inset-bottom,0px));padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:.5px solid var(--hair);z-index:3}
.stickyfoot{position:sticky;bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px));margin:14px -16px 0;padding:12px 16px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:.5px solid var(--hair);z-index:5}
/* bigger targets for thumbs */
.tkchk{position:relative} .tkchk::after{content:"";position:absolute;inset:-11px}
.chip{min-height:36px} .ptrun,.abtn,.pill{min-height:36px}
.cdedit,.navbtn.r{min-height:44px}
/* computer polish: hover, focus, two columns */
@media (hover:hover){
  .cell[role=button]:hover,button.cell:hover,.taskrow:hover,.ptlitem:hover,.acard:hover,.setitem:hover,.cmditem:hover{background:var(--press)}
  .cta:not(:disabled):hover{filter:brightness(1.06)} .cta.secondary:not(:disabled):hover{border-color:color-mix(in srgb,var(--teal) 40%,var(--hair))}
  .chip:hover,.opt:hover{filter:brightness(.97)} .navbtn:hover{opacity:.8} .tab:hover{color:var(--text)}
}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:8px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:0}
@media (min-width:1400px){ body.split-leads #s-self,body.split-stock #s-stock{width:340px} body.split-leads #s-selfd,body.split-stock #s-stockd{margin-left:340px} body.split-leads .ldcols,body.split-stock .ldcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start} body.split-leads .ldside .ltabs,body.split-stock .ldside .ltabs{margin-top:8px!important} body.split-leads #s-selfd>div,body.split-stock #s-stockd>div{max-width:1200px} }
@media (min-width:860px) and (min-height:500px){ .stickyfoot{bottom:0;margin:14px -16px 0;padding:12px 16px} }
.subwrap{position:relative}
.subbox{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--card);border:1px solid var(--hair);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.14);overflow:hidden;margin-top:4px;max-height:300px;overflow-y:auto}
.subbox button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;text-align:left;padding:11px 14px;font-size:.9rem;color:var(--text);cursor:pointer;border-bottom:.5px solid var(--hair)}
.subbox button:last-child{border-bottom:0} .subbox button:hover,.subbox button:focus{background:var(--press)} .subbox button .ic{color:var(--teal-ink)} .subbox b{font-weight:600}
.subnone{padding:12px 14px;font-size:.88rem;color:var(--sub)}
.suberr input{box-shadow:inset 0 -2px 0 var(--rep)}
a.sublink{color:inherit;text-decoration:none} a.sublink:hover{color:var(--teal-ink);text-decoration:underline}
.cgroup:has(.subwrap),.group:has(.subwrap){overflow:visible}
/* utilities (replacing one-off inline styles) */
.mt8{margin-top:8px} .mt10{margin-top:10px} .mt12{margin-top:12px} .mt14{margin-top:14px} .pt8{padding-top:8px}
.mw0{min-width:0} .fa{flex:0 0 auto} .tsub{color:var(--sub)} .fw6{font-weight:600} .tlink{background:none;border:0;padding:0;margin:0;font:inherit;font-weight:600;color:var(--teal-ink);cursor:pointer;text-align:left;-webkit-appearance:none;appearance:none}
.subline{display:block;color:var(--sub);font-size:.8rem} .btns12{display:grid;grid-template-columns:1fr 2fr;gap:10px}
/* ================= design system ================= */
:root{--r-s:6px;--r-m:10px;--r-card:16px;--r-pill:999px}
/* cards: one look everywhere */
.group,.rcard,.cdcard,.ppsrtl,.ptl,.acard,.pkpi,.kpi,.pmonth,.ppsrcard,.tblwrap,.lhero,.nextcard,.offhero,.offmsg,.aclear,.mgrid,.wkgrid,.alert{border-radius:var(--r-card)}
/* section titles: always above the card, one style */
.sectionlabel{font-size:.8rem;font-weight:700;color:var(--sub);letter-spacing:.01em;margin:24px 4px 8px}
.ptlhead b,.cdhead b,.pphead b,.psechead b{font-size:1rem;font-weight:700}
/* buttons: main, secondary, quiet, small pill */
.cta{min-height:50px;border-radius:12px;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:filter .12s,transform .08s}
.cta:active{transform:scale(.985)} .cta:disabled{opacity:1;background:color-mix(in srgb,var(--sub) 18%,var(--card));color:color-mix(in srgb,var(--sub) 85%,var(--text));border-color:transparent;box-shadow:none;cursor:default}
.cta.secondary{background:var(--card);color:var(--teal-ink);border:1px solid var(--hair)}
.btnrow .cta,.stack .cta.secondary,.ppbtns .cta{min-height:44px;font-size:.9rem;padding:10px 12px}
.navbtn{min-height:44px;font-size:.9rem;font-weight:600}
.bar .navbtn{font-size:1rem}
.pill,.ptrun,.abtn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:34px;border:0;border-radius:var(--r-pill);padding:0 14px;font-weight:700;font-size:.8rem;background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal-ink);cursor:pointer;white-space:nowrap;flex:none}
.ppsrbtn{min-height:40px;border-radius:12px;font-size:.9rem}
/* stage colours on every badge */
.badge.st-new,.badge.st-contacted{--sc:var(--c-new)}
.badge.st-sa_sent{--sc:var(--c-wait)}
.badge.st-sa_done{--sc:var(--c-sain)}
.badge.st-booked{--sc:var(--c-book)}
.badge.st-inspected{--sc:var(--c-insp)}
.badge.st-offer{--sc:var(--c-offer)}
.badge.st-accepted{--sc:var(--c-acc)}
.badge.st-bought{--sc:var(--ok)}
.badge.st-selling{--sc:var(--c-sell)}
.badge.st-sold{--sc:var(--ok)}
.badge[class*="st-"]{background:color-mix(in srgb,var(--sc,var(--na)) 15%,transparent);color:color-mix(in srgb,var(--sc,var(--na)) 72%,var(--text))}
.badge.st-lost{background:var(--field);color:var(--na)}
.badge{border-radius:var(--r-pill);font-weight:700}
@media (min-width:860px) and (min-height:500px){
  :root{--side:236px}
  body.navshown{padding-left:var(--side)}
  .tabbar{top:var(--tb,0px);bottom:0;right:auto;width:var(--side);border-top:0;border-right:.5px solid var(--hair);padding:0!important;background:var(--card)}
  .tabbar .in{max-width:none;height:100%;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:14px 12px}
  .sidebrand{display:block;padding:4px 6px 14px} .sidebrand .brandrow{padding:0} .sidebrand img{max-width:170px;height:auto}
  .tab{flex-direction:row;justify-content:flex-start;gap:12px;font-size:.9rem;padding:10px 12px;border-radius:10px;color:var(--sub)}
  .tab svg{width:21px;height:21px}
  .tab[aria-current="page"]{background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal-ink)}
  .tab:hover{background:var(--press)}
  .tabdot{position:static;margin-left:auto}
  .screen{max-width:880px;padding-bottom:60px!important}
  #s-pipe{max-width:none;padding:0 28px 60px!important}
  .bar{margin:0 -16px}
  #s-pipe .bar{margin:0 -28px}
  .footbar{left:var(--side)!important;bottom:0!important}
  body.withfoot .screen{padding-bottom:120px!important}
  .toast,body.withfoot .toast{left:calc(50% + var(--side)/2);bottom:28px!important}
  .offbar{left:calc(50% + var(--side)/2)}
  /* modal sheets instead of bottom sheets */
  .sheet{left:calc(50% + var(--side)/2);right:auto;bottom:auto;top:50%;width:540px;max-width:calc(100vw - var(--side) - 48px);margin:0;border-radius:18px;transform:translate(-50%,-46%);opacity:0;transition:transform .2s,opacity .2s,translate .2s;padding-bottom:20px!important;max-height:86vh}
  .sheet.on{transform:translate(-50%,-50%);opacity:1}
  .sheet .grab{display:none}
  /* split views */
  body.split-leads #s-self,body.split-stock #s-stock,body.split-stock #s-stock{position:fixed;top:var(--tb,0px);bottom:0;left:var(--side);width:400px;max-width:none;margin:0;overflow-y:auto;border-right:.5px solid var(--hair);padding:0 16px 40px!important;background:var(--bg);z-index:5}
  body.split-leads #s-selfd,body.split-stock #s-stockd,body.split-stock #s-stockd{max-width:none;margin:0 0 0 400px;padding:0 32px 60px!important}
  body.split-leads #s-selfd .bar,body.split-stock #s-stockd .bar,body.split-stock #s-stockd .bar{margin:0 -32px}
  body.split-leads #sdBack,body.split-stock #skBack,body.split-stock #skBack{visibility:hidden}
  body.split-leads #s-selfd>div,body.split-stock #s-stockd>div,body.split-stock #s-stockd>div{max-width:820px}
  .selfrow.sel{background:color-mix(in srgb,var(--teal) 12%,var(--card))}
  .selfrow:hover{background:var(--press)}
  /* pipeline board */
  .board{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start;scroll-behavior:smooth}
  .bcol{flex:0 0 268px;background:color-mix(in srgb,var(--field) 70%,transparent);border-radius:14px;padding:0 10px 10px;min-height:220px;transition:background .15s}
  .bcol.over{background:color-mix(in srgb,var(--sc) 12%,var(--field))}
  .bhead{display:flex;align-items:center;gap:7px;padding:12px 4px 10px;font-size:.9rem}
  .bdot{width:8px;height:8px;border-radius:50%;background:var(--sc);flex:none}
  .bcount{font-size:.72rem;font-weight:800;color:var(--sc);background:color-mix(in srgb,var(--sc) 14%,transparent);border-radius:10px;padding:1px 7px}
  .bval{margin-left:auto;font-size:.8rem;font-weight:700;color:var(--sub)}
  .blane{display:flex;flex-direction:column;gap:8px}
  .bcard{background:var(--card);border-radius:14px;padding:11px 12px;cursor:grab;box-shadow:0 1px 3px rgba(0,0,0,.07);transition:box-shadow .15s,transform .15s}
  .bcard:hover{box-shadow:0 4px 14px rgba(0,0,0,.12);transform:translateY(-1px)} .bcard.dragging{opacity:.4}
  .bctop{display:flex;align-items:center;gap:9px} .bctop .lbl{flex:1;min-width:0}
  .bav{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#fff;background:var(--sc);flex:none}
  .bcol .bav{background:var(--sc)}
  .bthumb{width:38px;height:30px;border-radius:10px;background:var(--field) center/cover;flex:none}
  .bname{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bcar{font-size:.8rem;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bline{display:flex;align-items:center;gap:5px;font-size:.8rem;color:var(--sub);margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bline.late{color:var(--rep);font-weight:700} .bline.today{color:var(--teal-ink);font-weight:600} .bline.muted{color:var(--na)}
  .bamt{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.9rem;margin-top:7px} .bamt span{display:inline-flex;align-items:center;gap:3px;font-size:.72rem;font-weight:600;color:var(--sub)}
  .bempty{font-size:.8rem;color:var(--na);text-align:center;padding:18px 0;border:1.5px dashed var(--hair);border-radius:14px}
  .tbloadwrap{min-height:60vh}
  .tab.deskonly{display:flex}
  .lswitch{display:none!important}
  #drawerScrim{display:none;position:fixed;top:var(--tb,0px);bottom:0;right:0;left:var(--side);background:rgba(2,10,22,.3);z-index:59}
  body.drawer-lead #drawerScrim,body.drawer-stock #drawerScrim{display:block}
  body.drawer-stock #s-stockd{position:fixed;top:var(--tb,0px);right:0;bottom:0;width:min(720px,calc(100vw - var(--side) - 80px));max-width:none;margin:0;overflow-y:auto;background:var(--bg);z-index:60;box-shadow:-14px 0 40px rgba(0,0,0,.2);padding:0 26px 40px!important;animation:drawerIn .22s ease}
  body.drawer-stock #s-stockd .bar{margin:0 -26px}
  .stbl tr.sel{background:color-mix(in srgb,var(--teal) 10%,var(--card))}
  body.drawer-lead #s-selfd,body.drawer-stock #s-stockd{position:fixed;top:var(--tb,0px);right:0;bottom:0;width:min(700px,calc(100vw - var(--side) - 80px));max-width:none;margin:0;overflow-y:auto;background:var(--bg);z-index:60;box-shadow:-14px 0 40px rgba(0,0,0,.2);padding:0 26px 40px!important;animation:drawerIn .22s ease}
  body.drawer-lead #s-selfd .bar,body.drawer-stock #s-stockd .bar{margin:0 -26px}
  @keyframes drawerIn{from{transform:translateX(48px);opacity:0}}
  .plusbtn .pblabel{display:inline}
  .plusbtn{background:var(--teal);color:#fff!important;border-radius:10px;padding:7px 12px 7px 9px!important;gap:5px;font-weight:700;font-size:.9rem;min-width:0!important}
  .plusbtn svg{width:18px;height:18px}
  .plusbtn:hover{filter:brightness(1.05)}
  .tbar .t{flex:1;text-align:left;padding-left:4px}
  .sidekbd{display:inline-block;margin-left:auto}
  #sideSearch{margin-top:auto} .tbar>span.navbtn:first-child{display:none}
  #repBack{display:none!important}
  #s-reports, #s-plat{max-width:1200px}
  .kpis{grid-template-columns:repeat(5,1fr)}
  .rgrid{grid-template-columns:1fr 1fr}
  .cmdk{padding-left:calc(var(--side) + 14px)}
}
@media (min-width:1280px){ body:not(.split-leads):not(.drawer-lead) #s-selfd,body:not(.split-stock):not(.drawer-stock) #s-stockd{max-width:1180px} body:not(.split-leads):not(.drawer-lead) #s-selfd .ldcols,body:not(.split-stock):not(.drawer-stock) #s-stockd .ldcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start} body:not(.split-leads):not(.drawer-lead) #s-selfd .ldside .ltabs,body:not(.split-stock):not(.drawer-stock) #s-stockd .ldside .ltabs{margin-top:8px!important} }
@media (min-width:1700px){ body.split-leads .ldcols,body.split-stock .ldcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start} body.split-leads #s-selfd>div,body.split-stock #s-stockd>div{max-width:1200px} body.split-leads .ldside .ltabs,body.split-stock .ldside .ltabs{margin-top:8px!important} }
@media (min-width:860px) and (min-height:500px) and (max-width:1199px){
  :root{--side:196px}
  .sidebrand img{max-width:140px}
  body.split-leads #s-self,body.split-stock #s-stock{width:330px}
  body.split-leads #s-selfd,body.split-stock #s-stockd{margin-left:330px;padding:0 20px 60px!important}
  body.split-leads #s-selfd .bar,body.split-stock #s-stockd .bar{margin:0 -20px}
  .pkpis{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:860px) and (min-height:500px){
  /* one page header everywhere: title on the left, main button on the far right */
  #s-self,#s-stock,#s-pipe,#s-cal,#s-stock,#s-tasks,#s-home,#s-reports,#s-plat,#s-settings,#s-prices,#s-reg{max-width:none!important;margin:0!important;padding:0 28px 60px!important}
  #s-self>.bar.tbar,#s-stock>.bar.tbar,#s-pipe>.bar.tbar,#s-cal>.bar.tbar,#s-stock>.bar.tbar,#s-tasks>.bar.tbar,#s-reports>.bar.tbar,#s-plat>.bar.tbar,#s-settings>.bar.tbar,#s-prices>.bar.tbar{margin:0 -28px 6px!important;padding:10px 28px!important;min-height:60px}
  #tasksBody{max-width:900px} #calBody,#stockBody,#repBody{max-width:1200px} #setBody,#pricesBody,#regBody{max-width:760px}
  /* Leads: the header spans both panes so New lead lines up with every other page */
  body.split-leads #s-self>.bar.tbar,body.split-stock #s-stock>.bar.tbar{position:fixed;top:var(--tb,0px);left:var(--side);right:0;z-index:30;margin:0!important;background:var(--bg);border-bottom:.5px solid var(--hair)}
  body.split-leads #s-self,body.split-stock #s-stock{top:60px!important;padding:12px 16px 40px!important}
  body.split-leads #s-selfd,body.split-stock #s-stockd{padding-top:60px!important}
  body.split-leads #s-selfd .bar,body.split-stock #s-stockd .bar{top:60px}
}

/* red unread dots: centred on the text line whatever font the phone uses */
.unreaddot{display:inline-block;width:8px;height:8px;margin:0 7px 0 0!important;vertical-align:middle!important;position:relative;top:-.09em}
.segctl button{display:inline-flex;align-items:center;justify-content:center;gap:0}

/* haptics helpers: real switches kept invisible */
.hapsw{position:fixed;left:0;bottom:0;width:2px;height:2px;opacity:.002;pointer-events:none;z-index:-1;margin:0}
/* .002: below what a screen can show (at .011 the green switch showed faintly over dark buttons, Tom web-9.92),
   but not 0, so iOS still treats it as a real switch and plays the haptic */
.hapov{position:absolute;margin:0;opacity:.002;z-index:3;cursor:pointer;-webkit-tap-highlight-color:transparent;accent-color:transparent}
#tabbar .in{position:relative}
.segctl,.chips,.taskrow{position:relative}

/* calendar booking rows */
.bkrow .lbl{min-width:0;flex:1}
.bkrow .name{font-weight:700;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bkrow .meta{font-size:.8rem;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.bkrow .bktime b{font-size:1rem;font-weight:700}
.bkrow .badge{flex:none}
.badge.bk-ok{background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal-ink)}
.badge.bk-warn{background:color-mix(in srgb,var(--mon) 20%,transparent);color:color-mix(in srgb,var(--mon) 70%,var(--text))}
.badge.bk-done{background:var(--field);color:var(--sub)}

/* valuation card */
.valcard{background:var(--card);border-radius:var(--r-card);padding:14px;position:relative}
.vbar{height:6px;border-radius:999px;background:var(--field);overflow:hidden;margin:10px 0 4px}
.vbar i{display:block;height:100%;width:0;border-radius:999px;background:var(--teal);transition:width 1s linear;position:relative;overflow:hidden}
.vbar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:vshine 1.6s ease-in-out infinite}
.vsteps{list-style:none;margin:8px 0 0;padding:0}
.vsteps li{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:.9rem;color:var(--sub);transition:color .3s}
.vsteps li.now{color:var(--text);font-weight:600} .vsteps li.done{color:var(--sub)}
.vsi{width:22px;height:22px;flex:none;border-radius:999px;display:grid;place-items:center;border:1.5px solid var(--hair);color:#fff;transition:background .3s,border-color .3s}
.vsi svg,.vsi .vspin{display:none} .vsi>*{grid-area:1/1}
.vsteps li.now .vsi{border-color:transparent} .vsteps li.now .vspin{display:block;width:18px;height:18px;border-radius:999px;border:2px solid color-mix(in srgb,var(--teal) 25%,transparent);border-top-color:var(--teal);animation:vspin .8s linear infinite}
.vsteps li.done .vsi{background:var(--teal);border-color:var(--teal)} .vsteps li.done .vsi svg:first-of-type{display:block}
.vsteps li.fail .vsi{background:var(--rep);border-color:var(--rep)} .vsteps li.fail .vsi svg:last-of-type{display:block}
.vtips{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--field);font-size:.8rem;color:var(--sub);display:grid;gap:4px} .vtips b{font-size:.8rem;color:var(--text)}
.vamt{display:grid;justify-items:end;gap:2px;text-align:right;flex:none} .vamt small{font-size:.72rem;color:var(--sub);white-space:nowrap}
.vwk{justify-content:space-between;gap:12px} .vwk .lbl{font-size:.9rem;color:var(--sub)} .vwk b{flex:none;font-size:.9rem} .vwk.key .lbl{color:var(--text);font-weight:600}
@keyframes vspin{to{transform:rotate(360deg)}} @keyframes vshine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.vbar i::after,.vsteps li.now .vspin{animation:none}}
.vhead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px} .vhead b{display:block;font-size:1rem} .vhead span{font-size:.8rem;color:var(--sub)}
.vconf{font-weight:700;text-transform:capitalize} .vconf.c-high{color:var(--ok)} .vconf.c-medium{color:color-mix(in srgb,var(--mon) 75%,var(--text))} .vconf.c-low{color:var(--rep)} .vconf.c-self{text-transform:none;color:var(--teal)} .valsearch{display:block;margin:10px auto 0}
.vrow{display:grid;grid-template-columns:1fr auto;gap:0 10px;align-items:baseline;padding:9px 0;border-top:.5px solid var(--hair);width:100%;background:none;border-left:0;border-right:0;border-bottom:0;text-align:left;color:var(--text);font:inherit}
.vrow span{font-size:.9rem;color:var(--sub)} .vrow b{font-size:1rem} .vrow small{grid-column:1/-1;font-size:.8rem;color:var(--sub)} .vrow.muted b{color:var(--sub);font-weight:600}
.vrow em{font-style:normal;color:var(--teal-ink);font-weight:600} button.vrow{cursor:pointer}
.voffer{margin-top:8px;background:color-mix(in srgb,var(--teal) 9%,var(--card));border-radius:12px;padding:12px}
.voffer>div:first-child{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .voffer>div:first-child span{font-size:.9rem;font-weight:600} .voffer>div:first-child b{font-size:1.5rem;color:var(--teal-ink)}
.vprofit{font-size:.9rem;margin-top:6px} .vprofit b{margin-left:4px} .vprofit.ok b{color:var(--ok)} .vprofit.bad b{color:var(--rep)} .vprofit small{display:block;font-size:.8rem;color:var(--sub)}
.vwarn{display:flex;gap:6px;align-items:center;margin-top:8px;font-size:.8rem;font-weight:700;color:var(--rep)}
.vbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px} .vbtns .cta{min-height:44px;font-size:.9rem}
.vnotes{margin:10px 2px 0}
a.compr{text-decoration:none;color:inherit}
/* customer offer page: comparison */
.offcmp{background:var(--card);border-radius:var(--r-card);padding:14px 16px;margin-top:12px}
.ocrow{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;font-size:.95rem} .ocrow s{color:var(--sub)} .ocrow.us b{font-size:1.12rem;color:var(--teal-ink)}
.ocmore{display:flex;gap:6px;align-items:center;margin-top:6px;padding-top:10px;border-top:.5px solid var(--hair);font-weight:700;color:var(--ok)}

/* selling for owners (web-9.0) */
.offlbl{font-size:.9rem;font-weight:600;color:var(--sub);margin-top:14px}
.offlbl+.offamt{margin-top:2px}
.offamt.rng{font-size:2.1rem}
.offamt span{font-size:.45em;font-weight:700;color:var(--sub);vertical-align:middle}
.offsteps{margin:0;padding:4px 16px 4px 34px;background:var(--card);border-radius:var(--r-card)}
.offsteps li{padding:8px 0;font-size:.9rem;color:var(--sub);line-height:1.45}
.offsteps li b{color:var(--text);font-weight:700}
.voffer .vrow{border-top-color:color-mix(in srgb,var(--teal) 18%,transparent);padding:7px 0}
.vgood{display:flex;gap:6px;align-items:center;margin-top:8px;font-size:.8rem;font-weight:700;color:var(--ok)}
.agterms{margin:6px 0 10px;padding-left:18px;font-size:.9rem;color:var(--text);line-height:1.45}
.agterms li{margin:4px 0}
.nextcard .okline,.nextcard .warnline{display:flex}

/* customer pages: full tradebeat logo (web-9.2) */
.pubbrand{display:flex;align-items:center;gap:12px;min-width:0}
.pubbrand picture{flex:none} .pubbrand img{height:30px;width:auto;display:block}
.pubtag{font-size:1rem;font-weight:600;color:var(--sub);padding-left:12px;border-left:1.5px solid var(--hair);line-height:1.25;white-space:nowrap}
.pubtag:empty{display:none}
#s-cust .custtop{padding:20px 0 12px}
.custstep{position:sticky;top:0;z-index:5;background:var(--bg);margin:0 -16px;padding:6px 16px 10px}
.custstep .progress{margin:0;height:4px}
.custstep #custStepLbl{display:block;font-size:.8rem;font-weight:700;color:var(--sub);margin-top:8px}
#s-cust .custhead{margin:14px 2px 16px} #s-cust .custhead p{line-height:1.45}
#s-cust .cgroup,#s-cust .group,#s-cust .qcard{border-radius:var(--r-card)}
#s-cust .qcard{padding:16px}
#s-cust .custnav{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 30%);padding:18px 0 calc(12px + env(safe-area-inset-bottom,0px));margin-top:10px}
.offbrand{display:flex;justify-content:center;padding:22px 0 10px}
.offbrand .pubbrand img{height:34px}
#s-offer .offhero{margin-top:6px} #s-offer .sectionlabel{margin-top:22px}
#s-offer .offmsg{line-height:1.5}

.cell.combo #sw-colour{margin-left:-2px}

/* editable comparables (web-9.7) */
.comprow{display:flex;align-items:center;gap:8px;background:var(--card);padding-right:10px} .comprow+.comprow{border-top:.5px solid var(--hair)}
.comprow .cell{flex:1;min-width:0} .comprow.off .cell{opacity:.45} .comprow.off .cell b{text-decoration:line-through}
.comprow .cmpx{min-height:30px;padding:0 10px}

/* condition adjustments on the valuation card (web-9.8) */
.vcond{display:grid;gap:4px;padding:8px 0 4px;border-top:.5px solid color-mix(in srgb,var(--teal) 18%,transparent)}
.vcond span{display:flex;gap:6px;align-items:center;font-size:.8rem;color:var(--sub)} .vcond span b{margin-left:auto;color:var(--text)}
.vcond span.bad{color:var(--rep);font-weight:600}
/* valuation: details still needed before it can run */
.valneeds .fine{margin:6px 0 8px}
.vnchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.vnchips span{font-size:.8rem;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--field);color:var(--text);border:.5px solid var(--hair)}
/* car details sheet: every field is a row like the dropdowns */
.cdsheet .sectionlabel{margin-top:16px}
.cdsheet .sectionlabel:first-of-type{margin-top:12px}
.cell.cdrow{cursor:text}
.cell.cdrow .lbl{flex:0 0 auto;max-width:48%;color:var(--text)}
.cell.cdrow input,.cell.cdrow select{font-size:1rem;font-weight:500;color:var(--text);text-align:right;min-width:0}
.cell.cdrow input.caps{text-transform:uppercase}
.cell.cdrow input.caps::placeholder{text-transform:none}
.cell.cdrow select{cursor:pointer}
.cell.cdrow select:has(option[value=""]:checked){color:var(--na)}
.cell.cdrow .caret{color:var(--na);display:grid;place-items:center;padding:4px;pointer-events:none}
/* bigger tap targets on phones */
@media (max-width:859px), (max-height:499px){
  .cell{min-height:54px}
  .cbitem{padding:14px 16px;min-height:48px}
  .cell.combo .caret{padding:10px;margin-right:-6px}
}
/* iOS Safari ignores text-align on date inputs: align the inner value instead */
.cell input[type=date]{display:flex;justify-content:flex-end;text-align:right;-webkit-appearance:none;appearance:none;min-height:1.4em}
.cell input[type=date]::-webkit-date-and-time-value{text-align:right;margin:0;width:100%}
.cell input[type=date]::-webkit-datetime-edit{display:flex;justify-content:flex-end;padding:0}
/* consignment notice to paste into ads */
.noticecard{background:var(--card);border-radius:14px;padding:12px 14px;display:flex;gap:12px;align-items:flex-start}
.noticecard p{margin:0;flex:1;font-size:.9rem;line-height:1.45}
/* selling steps */
.steps{background:var(--card);border-radius:var(--r-card);padding:14px;margin-top:12px}
.steps.guide{padding:6px 14px 10px}
.sshead0{display:flex;flex-direction:column;gap:8px;padding-bottom:4px}
.sshead0 div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sshead0 b{font-size:1rem} .sshead0 span{color:var(--sub);font-size:.8rem;white-space:nowrap}
.sshead0 i{display:block;height:6px;border-radius:999px;background:var(--field);overflow:hidden}
.sshead0 em{display:block;height:100%;background:var(--teal);border-radius:999px}
.ssphase{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sub);margin:16px 0 4px}
.sstep{position:relative}
.sstep+.sstep::before{content:"";position:absolute;left:13px;top:-6px;height:12px;width:2px;background:var(--hair)}
.sshd{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:6px 0;border:0;background:none;text-align:left;color:var(--text);cursor:pointer}
.ssdot{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;background:var(--field);color:var(--sub)}
.sstep.done .ssdot{background:var(--ok);color:#fff}
.sstep.cur .ssdot{background:var(--teal);color:#fff}
.sstep.done .sstt{color:var(--sub)}
.sstt{flex:1;min-width:0;font-weight:600;font-size:.9rem;line-height:1.3;overflow-wrap:anywhere} .ssbd{min-width:0;overflow-wrap:anywhere}
.sstt em{font-style:normal;font-weight:500;font-size:.72rem;color:var(--sub)}
.sstt small{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.sscv{color:var(--na);transition:transform .15s}
.sshd[aria-expanded="true"] .sscv{transform:rotate(180deg)}
.who{font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px}
.who.you{background:color-mix(in srgb,var(--teal) 18%,transparent);color:var(--teal-ink)}
.who.seller{background:color-mix(in srgb,var(--c-new) 16%,transparent);color:var(--c-new)}
.who.buyer{background:color-mix(in srgb,var(--c-wait) 20%,transparent);color:color-mix(in srgb,var(--c-wait) 70%,var(--text))}
.ssbd{margin:0 0 10px 40px;font-size:.9rem;line-height:1.45}
.ssbd p{margin:6px 0 0;color:var(--text)}
.ssline{display:flex;gap:8px;align-items:flex-start;background:var(--field);border-radius:10px;padding:8px 10px;margin-top:6px}
.ssline svg{flex:none;margin-top:2px;color:var(--teal-ink)} .ssline>span{min-width:0;overflow-wrap:anywhere}
.ssline.money .rexp{flex:none}
.ssact{margin-top:10px}
.ssguide{display:block;margin:10px auto 0;text-align:center}
.moneyflow{display:grid;grid-template-columns:1fr;gap:6px;background:var(--card);border-radius:14px;padding:12px 14px}
.moneyflow div{display:flex;justify-content:space-between;gap:10px;background:var(--field);border-radius:10px;padding:8px 10px;font-size:.9rem}
.moneyflow div span{color:var(--sub);font-size:.8rem;text-align:right}
.moneyflow i{font-style:normal;text-align:center;color:var(--sub);line-height:1}
.vbtns.one{grid-template-columns:1fr}
/* "?" help buttons and the glossary */
.tipq{display:inline-block;box-sizing:border-box;width:17px;height:17px;border-radius:50%;border:0;padding:0;margin:0 0 0 2px;vertical-align:middle;position:relative;top:-.08em;text-align:center;line-height:17px;background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal-ink);font-size:.74rem;font-weight:700;font-family:inherit;cursor:pointer;flex:none;-webkit-appearance:none;appearance:none}
.tipq::after{content:"";position:absolute;inset:-12px}
.tipq.tiplink{display:inline-block;width:auto;height:auto;border-radius:0;background:none;margin:6px 0 0;line-height:1.4;top:0;vertical-align:baseline;text-align:left;font-size:.8rem;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.tipq.tiplink::after{inset:-8px -4px}
.glfirst{font-size:1rem;line-height:1.5;margin:4px 0 14px}
.gloss .cell{align-items:flex-start}.gloss .subline{white-space:normal;line-height:1.45;margin-top:2px}
/* buyer info sheet editor */
.bsph{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (min-width:500px){.bsph{grid-template-columns:repeat(4,1fr)}}
.bsp{position:relative;border-radius:10px;overflow:hidden;background:var(--field);aspect-ratio:4/3}
.bspimg{display:block;width:100%;height:100%;border:0;padding:0;margin:0;background:none;cursor:pointer}
.bspimg img{width:100%;height:100%;object-fit:cover;display:block}
.bsp.off .bspimg img{opacity:.3}
.bspoff{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:var(--text)}
.bspstar,.bspx{position:absolute;top:4px;width:30px;height:30px;border-radius:50%;border:0;padding:0;display:flex;align-items:center;justify-content:center;background:rgba(17,19,21,.55);color:#fff;cursor:pointer}
.bspstar{left:4px} .bspx{right:4px}
.bspstar.on{background:var(--teal-ink)} .bspstar.on svg{fill:currentColor}
.bspcover{position:absolute;left:0;right:0;bottom:0;padding:3px 0;text-align:center;font-size:.72rem;font-weight:700;color:#fff;background:rgba(16,40,66,.85);pointer-events:none}
.bspadd{aspect-ratio:4/3;border:1.5px dashed var(--hair);border-radius:10px;background:var(--card);color:var(--teal-ink);font:inherit;font-size:.8rem;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.bsta{display:block;width:100%;box-sizing:border-box;border:0;border-radius:14px;padding:12px 14px;background:var(--card);color:var(--text);font:inherit;font-size:16px;line-height:1.45;resize:vertical}
.bsfine{margin:-4px 0 8px}
/* test leads */
.testbanner{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--mon,#d97706) 14%,var(--card));color:var(--text);font-size:.8rem;line-height:1.4}
.testbanner svg{flex:none;margin-top:1px;color:var(--mon,#d97706)}
/* brand row: TradeBeat logo + "Assessments" (sign in, invite and sidebar) */
.brandrow .pubbrand img{width:auto;height:30px;max-width:none}
.loginbox.welinapp{margin-top:4px}
@media (min-width:860px) and (min-height:500px){
  .sidebrand .pubbrand{gap:8px} .sidebrand .pubbrand img{height:18px;max-width:none}
  .sidebrand .pubtag{font-size:.76rem;padding-left:8px}
}
@media (min-width:860px) and (min-height:500px) and (max-width:1199px){
  .sidebrand{padding-left:2px;padding-right:2px} .sidebrand .pubbrand{gap:6px} .sidebrand .pubbrand img{height:14px} .sidebrand .pubtag{font-size:.68rem;padding-left:6px}
}
/* pull down to refresh (phone) */
.ptr{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + var(--tb,0px) + 52px);z-index:19;width:38px;height:38px;border-radius:50%;background:var(--card);box-shadow:0 2px 10px rgba(17,19,21,.18);display:flex;align-items:center;justify-content:center;opacity:0;transform:translate(-50%,-48px);pointer-events:none}
.vfinnote{margin:-4px 0 4px}
/* website enquiry card on the lead */
.enqcard{margin-top:12px}
.enqcard .cdi b.enqbad{color:var(--rep)} .enqcard .cdi b.enqok::after{content:" (floor price)";font-weight:500;color:var(--sub);font-size:.8rem}
.enqnotes{border-top:.5px solid var(--hair);padding:8px 0 8px}
.enqnotes span{display:block;font-size:.72rem;color:var(--sub);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.enqnotes p{margin:3px 0 0;font-size:.9rem;line-height:1.45;white-space:pre-wrap}
/* leads list sections (Needs you / In progress / Closed) */
.leadsecs .lsec{margin:14px 4px 7px;display:flex;align-items:center;gap:6px}
.leadsecs .lsec:first-child{margin-top:8px}
.lsecn{font-size:.72rem;font-weight:700;color:var(--sub);background:var(--field);border-radius:999px;padding:1px 7px}
.leadsecs .group+.group{margin-top:12px}

/* photo viewer (web-9.39, restyled 9.44): blurred photo backdrop, glass controls, thumbnail strip */
html.pvopen,html.pvopen body{overflow:hidden}
.pv{position:fixed;inset:0;z-index:95;background:#03080f;display:flex;flex-direction:column;color:#fff;--pvfade:1;opacity:0;transition:opacity .22s ease}
.pv.on{opacity:1} .pv.closing{transition:opacity .26s ease}
.pvbg{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:calc(var(--pvfade))}
.pvbg img{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(44px) saturate(1.5) brightness(.5);transform:scale(1.05);opacity:.95;transition:opacity .3s ease}
.pvbg img:not([src]),.pvbg img.fade{opacity:0}
.pvbg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,8,15,.55) 0%,rgba(3,8,15,.1) 22%,rgba(3,8,15,.1) 70%,rgba(3,8,15,.75) 100%)}
.pvtop,.pvfoot,.pvarr{position:relative;z-index:2;opacity:var(--pvfade);transition:opacity .2s}
.pvtop{display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px 18px;min-height:60px}
.pvhead{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pvhead b{font-size:1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvhead small{font-size:.8rem;color:rgba(255,255,255,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvn{flex:none;font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.12);border:.5px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.pvx{flex:none;width:40px;height:40px;border-radius:999px;border:.5px solid rgba(255,255,255,.16);background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;display:grid;place-items:center;cursor:pointer}
.pvstrip{position:relative;z-index:1;flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pv.opening .pvstrip{opacity:0}
.pvstrip::-webkit-scrollbar{display:none}
.pvslide{position:relative;flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always}
.pvfig{position:absolute;inset:6px 14px;display:flex;align-items:center;justify-content:center}
.pvslide img{max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);user-select:none;-webkit-user-select:none}
.pvfly{position:fixed;z-index:96;object-fit:cover;pointer-events:none;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.pvfoot{padding:10px 0 calc(14px + env(safe-area-inset-bottom,0px))}
.pvcap{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 20px 12px;text-align:center;min-height:2.6em}
.pvtag{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:color-mix(in srgb,var(--teal) 30%,transparent);color:#bff3e6}
.pvtag.dmg{background:rgba(239,68,68,.28);color:#ffd0d0}
.pvct{font-size:1rem;font-weight:700} .pvcs{font-size:.8rem;color:rgba(255,255,255,.7)}
.pvthumbs{display:flex;gap:8px;overflow-x:auto;padding:4px 16px;scrollbar-width:none;justify-content:safe center}
.pvthumbs::-webkit-scrollbar{display:none}
.pvth{position:relative;flex:none;width:48px;height:48px;padding:0;border:0;border-radius:10px;overflow:visible;background:none;cursor:pointer;opacity:.5;transition:opacity .2s,transform .2s}
.pvth img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}
.pvth.on{opacity:1;transform:scale(1.06)} .pvth.on::after{content:"";position:absolute;inset:-3px;border-radius:13px;border:2px solid var(--teal)}
.pvth.dmg::before{content:"";position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:#ef4444;border:2px solid #03080f;z-index:1}
.pvarr{position:absolute;top:50%;margin-top:-24px;width:48px;height:48px;border-radius:999px;border:.5px solid rgba(255,255,255,.16);background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;display:none;place-items:center;cursor:pointer}
.pvarr:disabled{opacity:.2;cursor:default}
.pvprev{left:20px} .pvnext{right:20px} .pvnext svg{transform:scaleX(-1)}
@media (hover:hover) and (pointer:fine){.pvarr{display:grid}.pvarr:not(:disabled):hover,.pvx:hover{background:rgba(255,255,255,.22)}.pvth:hover{opacity:.85}}
@media (min-width:860px) and (min-height:500px){.pvfig{inset:10px 90px}.pvtop{padding-left:28px;padding-right:20px}}
/* refresh spinner: outlined so it stands out over cards in dark mode too (web-9.40) */
.ptr{border:.5px solid var(--hair);box-shadow:0 3px 14px rgba(17,19,21,.22)}
:root[data-theme="dark"] .ptr{background:var(--field);box-shadow:0 4px 16px rgba(0,0,0,.6)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ptr{background:var(--field);box-shadow:0 4px 16px rgba(0,0,0,.6)}}
/* staff app: no page bounce, so the header doesn't get dragged down by pull to refresh (web-9.41) */
html.nobounce,html.nobounce body{overscroll-behavior-y:none}
/* photo viewer zoom (web-9.42): we handle pinch ourselves; the page itself stays unzoomable */
html.nozoom .pv.zoomed .pvstrip,html.nozoom .pv.zoomed .pvslide,html.nozoom .pv.zoomed .pvslide img,.pv.zoomed .pvstrip{touch-action:none}
.pv.zoomed .pvstrip{overflow-x:hidden} .pv.zoomed .pvslide img{cursor:grab}
.pvslide img{transform-origin:center center}
.pv.zoomed .pvarr,.pv.zoomed .pvfoot,.pv.zoomed .pvhead,.pv.zoomed .pvn{opacity:0;pointer-events:none}
.pv.zoomed .pvslide img{border-radius:0;box-shadow:none}
/* notification bell (web-9.48) */
.tbar.hasbell>span.navbtn[aria-hidden]{min-width:88px}
.bellbtn{display:grid;place-items:center;min-width:44px!important;width:44px;height:44px;align-self:center;padding:0;flex:none;margin-right:-6px}
.bellbtn .bwrap{position:relative;display:block;width:22px;height:22px}.bellbtn .bwrap svg{display:block}
.bellbtn .bdot{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--rep);border:2px solid var(--bg)}
.bellbtn.ring svg{animation:bellring .7s ease-in-out;transform-origin:50% 10%}
@keyframes bellring{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(7deg)}80%{transform:rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.bellbtn.ring svg{animation:none}}
.nfhead{padding:4px 2px 6px}.nfhead h3{margin:0;font-size:1.12rem}.nfhead small{color:var(--sub);font-size:.8rem}
.nfgroup{padding:0;overflow:hidden}
.nfrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;border-top:.5px solid var(--hair);padding:12px 14px;color:var(--text);cursor:pointer;font:inherit;position:relative}
.nfrow:first-child{border-top:0}
.nfrow.unread{background:color-mix(in srgb,var(--teal) 7%,transparent)}
.nfrow.unread .nfbody b{font-weight:700}
.nfside{flex:none;align-self:stretch;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:6px;padding:2px 0}
.nfnew{width:8px;height:8px;border-radius:50%;background:var(--rep);margin-bottom:4px}
.nfic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal-ink)}
.nfic.k-sa{background:color-mix(in srgb,var(--c-sain) 18%,transparent);color:var(--c-sain)}
.nfic.k-viewed{background:color-mix(in srgb,var(--c-offer) 18%,transparent);color:var(--c-offer)}
.nfic.k-yes{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.nfic.k-no{background:color-mix(in srgb,var(--rep) 15%,transparent);color:var(--rep)}
.nfbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nfbody b{font-size:.9rem;font-weight:600;line-height:1.3}
.nfbody small{font-size:.8rem;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nftime{font-size:.72rem;color:var(--sub);white-space:nowrap}
.nfpush{margin-top:14px;text-align:center}
@media (min-width:860px) and (min-height:500px){.tbar.hasbell>span.navbtn[aria-hidden]{min-width:0}.bellbtn{margin-left:auto}.tbar.hasbell .plusbtn{margin-left:4px}}
/* dealer's receipts (web-9.51) */
.rcwords{font-size:.8rem!important;font-style:italic;min-height:0!important;padding-top:8px!important;padding-bottom:8px!important}
.rccar .cell b{font-weight:600;font-size:.9rem;text-align:right;max-width:60%;overflow-wrap:anywhere}
.rccar .cell b.rcmiss{color:var(--rep)}
.badge.sk-deposit{background:color-mix(in srgb,var(--purple) 18%,transparent);color:color-mix(in srgb,var(--purple) 80%,var(--text))}
/* signed Form 9, read only (web-9.56) */
.aglock{display:flex;gap:10px;align-items:flex-start;background:color-mix(in srgb,var(--ok) 12%,var(--card));border-radius:var(--r-card);padding:14px;margin-top:12px;color:var(--ok)}
.aglock>div{flex:1;min-width:0;color:var(--text)} .aglock b{display:block;font-size:.9rem;color:var(--ok)} .aglock span{display:block;font-size:.8rem;color:var(--sub);margin-top:2px}
.aglocked input:disabled,.aglocked textarea:disabled,.aglocked select:disabled{opacity:1;-webkit-text-fill-color:var(--text);color:var(--text);background:transparent}
.aglocked .qopts button:disabled{opacity:.85} .aglocked .qopts button:disabled:not([aria-pressed="true"]){opacity:.4}
.aglock.part{background:color-mix(in srgb,var(--mon) 13%,var(--card));color:color-mix(in srgb,var(--mon) 80%,var(--text))} .aglock.part b{color:color-mix(in srgb,var(--mon) 80%,var(--text))}
.sigwrap.sigoff,.sigwrap.sigadmin{display:grid;place-items:center;background:var(--field);border-style:dashed} .sigwrap.sigoff .sigph,.sigwrap.sigadmin .sigph{position:static;transform:none;color:var(--sub);font-size:.8rem;text-align:center;padding:0 16px}
/* stacked notes (web-9.60) */
/* pull to refresh ring (web-9.61): fills clockwise from 12 o'clock as you pull, spins while refreshing */
.ptrring{width:22px;height:22px;transform:rotate(-90deg);overflow:visible}
.ptrring circle{fill:none;stroke-width:2.6}
.ptrring .trk{stroke:color-mix(in srgb,var(--teal) 18%,transparent)}
.ptrring .arc{stroke:var(--teal);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.ptr.spin .ptrring{animation:ptrspin .8s linear infinite}
.ptr.spin .ptrring .arc{stroke-dasharray:28 72;stroke-dashoffset:0}
@keyframes ptrspin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
@media (prefers-reduced-motion:reduce){.ptr.spin .ptrring{animation-duration:2s}}

/* phone turned sideways: staff app asks to turn it back (iPhone can't lock rotation) */
.rotlock{display:none;position:fixed;inset:0;z-index:9999;background:var(--bg);color:var(--text);flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
.rotlock .rlmark{font-size:1.25rem}
.rotlock b{font-size:1.12rem}
.rotlock small{font-size:.9rem;color:var(--sub)}
html.rotated .rotlock{display:flex}
html.rotated body{overflow:hidden}

/* Emails tab (web-9.78) */
.emst{font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--field);color:var(--sub)}
.emst.opn{background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal-ink)}
.emst.clk{background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue)}
.emst.rep{background:color-mix(in srgb,var(--purple) 14%,transparent);color:var(--purple)}
.emmsg{border:1px solid var(--hair);border-radius:14px;padding:12px 14px;margin-top:10px;background:var(--card)}
.emwho{display:flex;align-items:center;gap:8px;min-width:0} .emwho b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emav{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800;background:var(--field);color:var(--sub)}
.emmsg.out .emav{background:var(--teal);color:#fff}
.emmsg .emto,.emmsg .emtrk{margin-left:36px}
.emmeta{display:flex;justify-content:space-between;gap:10px;font-size:.9rem}
.emmeta span{color:var(--sub);font-size:.8rem;flex:0 0 auto}
.emto{font-size:.8rem;color:var(--sub);margin-top:2px;overflow-wrap:anywhere}
.emtrk{font-size:.8rem;color:var(--teal-ink);margin-top:6px;line-height:1.45}
.embody{margin-top:10px}
.emframe{width:100%;border:0;min-height:24px;border-radius:10px;background:#fff;display:block;border:1px solid var(--hair)}
.emtext{font-size:.9rem;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.emfiles{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.emfiles span{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;padding:3px 8px;border-radius:6px;background:var(--field)}

/* Email editor (web-9.80) */
.rte{border:1px solid var(--hair);border-radius:14px;background:var(--card);overflow:hidden}
.rtebar{display:flex;gap:2px;padding:4px 6px;border-bottom:1px solid var(--hair);overflow-x:auto;scrollbar-width:none}
.rtebar::-webkit-scrollbar{display:none}
.rtebar{align-items:center}
.rtebar button{flex:0 0 auto;width:40px;height:38px;border:0;border-radius:10px;background:none;color:var(--sub);display:flex;align-items:center;justify-content:center;cursor:pointer}
.rtebar button[aria-pressed="true"]{background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal-ink)}
.rtesep{flex:0 0 1px;height:20px;background:var(--hair);margin:0 4px}
.rtebar button:active{background:var(--field)}
.rtebody{min-height:150px;max-height:46vh;overflow-y:auto;padding:12px 14px;font-size:16px;line-height:1.5;color:var(--text);outline:none;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}
.rtebody:empty::before{content:attr(data-ph);color:var(--sub)}
.rtebody a{color:var(--blue);text-decoration:underline}
.rtebody ul,.rtebody ol{margin:4px 0;padding-left:24px}
.rtesig{background:#fff;border-top:1px dashed var(--hair);padding:12px 14px 14px;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#222;pointer-events:none}
.rtesig img{max-width:220px;height:auto}

/* Activity timeline (web-9.81): tasks, emails, calls, notes and updates in one place, like HubSpot */
.tlbar{display:flex;align-items:center;gap:4px;margin-bottom:6px;flex-wrap:wrap}
.tlbar .fa{flex:1}
.tlfilter{font-size:.8rem}
.tlmonth{font-size:.8rem;font-weight:700;color:var(--sub);margin:18px 2px 8px}
.tlcard{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:12px 14px;margin-bottom:8px;color:var(--text);font:inherit}
button.tlcard{cursor:pointer}
.tlcard.new{border-color:var(--rep)}
.tlhead{display:flex;align-items:center;gap:8px}
.tlhead b{font-weight:600;font-size:.95rem;flex:1;min-width:0;overflow-wrap:anywhere}
.tlhead .nx{border:0;background:none;color:var(--sub);padding:4px;margin:-4px;cursor:pointer}
.tlic{flex:0 0 28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--field);color:var(--sub)}
.tlic.in,.tlic.out,.tlic.email{background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal-ink)}
.tlic.call,.tlic.text{background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue)}
.tlic.note{background:color-mix(in srgb,var(--purple) 14%,transparent);color:var(--purple)}
.tlic.task{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.tlchips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.tldate{font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:6px;border:1px solid var(--hair);color:var(--sub)}
.tlwho{font-size:.8rem;color:var(--sub);margin-top:6px}
.tltext{font-size:.9rem;line-height:1.45;margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere}
.tltext.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.tlfoot{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--hair);font-size:.8rem;color:var(--sub)}
.tlfoot svg:last-child{margin-left:auto}
.tlsys{display:flex;align-items:baseline;gap:8px;padding:6px 4px 10px;font-size:.8rem;color:var(--sub)}
.tlsys span{flex:1;line-height:1.45}
/* the dot sits on the middle of the lowercase letters of the first line, whatever the font (web-10.46): drawn as a
   5px circle whose bottom rests on the text's baseline, then raised by half the x-height */
.tlsys>.ic{display:none}
.tlsys::before{content:"";flex:none;width:5px;height:5px;margin:0 3px 0 3px;border-radius:50%;background:currentColor;opacity:.75;transform:translateY(calc(2.5px - .5ex))}
.tlsys time{white-space:nowrap;font-size:.72rem}

/* A notification brings you to the part it's about (web-9.86): a short teal glow */
.flash{animation:flash 1.8s ease-out}
@keyframes flash{0%,35%{box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 55%,transparent)}100%{box-shadow:0 0 0 3px transparent}}
@media (prefers-reduced-motion:reduce){.flash{animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 55%,transparent)}}
/* archive (web-9.88) */
.archbanner{align-items:center;background:color-mix(in srgb,var(--sub) 12%,var(--card))} .archbanner svg{color:var(--sub)} .archbanner span{flex:1}
.archbanner .pill,.archrow .pill{flex:none}
.archrow{cursor:pointer;gap:10px}
.archlink{display:flex;align-items:center;gap:6px;margin:18px auto 4px;color:var(--sub);font-size:.9rem}
/* lead menu on the lead card (web-9.90): on computer and tablet the empty bar above the lead goes, so the card lines up with the search */ .lhmore{display:none}
@media (min-width:860px) and (min-height:500px){
  body.split-leads #s-selfd>.bar,body.split-stock #s-stockd>.bar{display:none} body.split-leads #s-selfd .lhero,body.split-stock #s-stockd .lhero{margin-top:4px}
  body.split-leads .lhmore,body.split-stock .lhmore{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:36px;margin:-6px -8px 0 0;font-size:1.25rem;letter-spacing:1px;color:var(--teal-ink)}
}

/* layers (web-9.93): drawers 59/60 < pop-ups 65/66 < toast 70 < dialogs 80/90 < photo viewer 95. Pop-ups opened from a lead in the
   side drawer (from Tasks, Pipeline or Calendar) used to open behind it. */
/* Check the email (web-9.94): the email as they'll see it, white whatever the app's theme */
.evfiles{display:flex;align-items:center;gap:6px;margin-top:10px}
/* pinned buttons in a centred pop-up: the pop-up's bottom padding is 20px there, so the footer has to cover it (web-9.94) */
@media (min-width:860px) and (min-height:500px){ .sheet .sheetfoot{bottom:-20px;margin-bottom:-20px;padding-bottom:20px} }
/* timeline entries you can change (web-9.95): a small pencil on the right */
.tledit{flex:none;color:var(--sub);display:inline-flex;opacity:.8}
/* messages while a pop-up is open (web-9.95): shown at the top so an Undo never covers the pop-up's buttons,
   and a faded-out Undo message no longer blocks taps underneath it */
body.sheetopen .toast,body.sheetopen.withfoot .toast{top:calc(env(safe-area-inset-top,0px) + 14px);bottom:auto!important;transform:translateX(-50%) translateY(-20px)}
body.sheetopen .toast.on{transform:translateX(-50%)}
/* completed task in Activity (web-9.96): its tick reopens it */
.tltask{cursor:pointer} .tlhead{position:relative} .tlchk{margin:3px 3px 3px 3px}
/* pipeline stages on phones (web-9.99, Tom: no coloured lines): each stage is a plain row with its count in a tinted
   circle on the left and a chevron; no connecting line, dots or bars */
.ptl{padding:0}
.ptlrow{padding:12px 14px;gap:12px}
.ptlrow+.ptlrow,.ptlitems+.ptlrow{border-top:.5px solid var(--hair)}
.ptlrow::before{display:none}
.ptlrow .ptlcount{order:0;width:38px;height:38px;min-width:38px;border-radius:50%;padding:0;font-size:1rem}
.ptlrow>svg{color:var(--sub);flex:none;transition:transform .15s} .ptlrow.open>svg{transform:rotate(90deg)}
/* an opened stage and its leads read as one block (web-10.10): avatars sit in the count circles' column and names line up
   with the stage names (14px row padding + 38px circle + 12px gap) */
.ptlitems{margin:0;padding:2px 8px 12px;gap:6px;background:var(--press)}
.ptlitem{padding:10px 10px 10px 6px;gap:12px;border-radius:12px;background:var(--card)}
.ptlitem .bav.sm{width:38px;height:38px;font-size:.8rem}
.ptlitem .pic,.ptlitem .pix{margin-top:1px}
/* Form 9 signed on their phone (web-10.0) */
.agremote{margin-top:12px}
.agremote .agor{display:block;font-size:.8rem;color:var(--sub);margin:0 0 6px;text-align:center}
.agremote .cta{display:flex;gap:8px;align-items:center;justify-content:center}
.agremote.sent{background:color-mix(in srgb,var(--teal) 8%,var(--card));border:1px solid color-mix(in srgb,var(--teal) 30%,var(--hair));border-radius:12px;padding:12px}
.agremote.sent b{display:flex;align-items:center;gap:6px;font-size:.92rem;color:var(--teal-ink)} .agremote.sent span{display:block;font-size:.85rem;color:var(--sub);margin-top:4px}
.agremote.done{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--sub)} .agremote.done span{flex:1} .agremote.done svg{color:var(--teal-ink);flex:none}
.sgphotos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sgph{display:flex;flex-direction:column;align-items:center;gap:8px;border:1.5px dashed var(--hair);border-radius:14px;background:var(--card);padding:14px 8px;font:inherit;font-weight:600;font-size:.88rem;color:var(--text);cursor:pointer}
.sgph span{width:64px;height:48px;border-radius:10px;display:grid;place-items:center;background:var(--field);color:var(--sub);overflow:hidden}
.sgph span img{width:100%;height:100%;object-fit:cover}
.sgph.has{border-style:solid;border-color:color-mix(in srgb,var(--teal) 50%,var(--hair))} .sgph.busy{opacity:.6}
.sgagree{display:flex;gap:10px;align-items:flex-start;background:var(--card);border-radius:14px;padding:12px 14px;margin-bottom:12px;font-size:.92rem;line-height:1.4;cursor:pointer}
.sgagree input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--teal)}
/* the seller's Form 9 page (web-10.0): their details beside the official form, filled in live.
   Phone: two steps (details, then read and sign). Tablet and computer: side by side, the form scrolls on its own. */
.sgwrap{display:flex;flex-direction:column}
.sghead .offcar{margin-bottom:6px} .sghead .offhi,.sghead .offcar{padding-left:4px;padding-right:4px}
.sgsteps{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--field);padding:4px;border-radius:12px;margin:14px 0 4px}
.sgsteps button{border:0;background:none;border-radius:9px;padding:9px 6px;font:inherit;font-weight:700;font-size:.85rem;color:var(--sub);cursor:pointer}
.sgsteps button[aria-pressed="true"]{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.sgform{margin-top:16px}
.sgformhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 2px 8px} .sgformhead span{font-size:.8rem;color:var(--sub)}
.sgpages{display:flex;flex-direction:column;gap:10px;align-items:center;min-height:200px}
.sgpage{display:block;background:#fff;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.14);max-width:100%}
.sgend{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.85rem;color:var(--sub);padding:14px 0 4px} .sgend svg{color:var(--teal-ink)}
.sgtick{gap:12px;align-items:flex-start;cursor:pointer} .sgtick input{width:20px;height:20px;flex:none;accent-color:var(--teal);margin-top:2px} .sgtick .lbl{white-space:normal;line-height:1.4}
.sgreadhint{margin:0 2px 10px;font-weight:600;color:var(--text)}
@media (max-width:859px),(max-height:499px){
  .sgpanel{display:contents}
  .sghead{order:1} .sgsteps{order:2} #sgDetails{order:3} .sgform{order:4} #sgSignBox{order:5} .sgpanel>.offcall{order:6}
  .sgwrap[data-step="1"] .sgform,.sgwrap[data-step="1"] #sgSignBox{display:none}
  .sgwrap[data-step="2"] #sgDetails{display:none}
}
@media (min-width:860px) and (min-height:500px){
  body.signpage #s-offer{max-width:1280px!important}
  .sgwrap{display:grid;grid-template-columns:minmax(340px,420px) minmax(0,1fr);gap:28px;align-items:start}
  .sgsteps,.sgnext{display:none!important}
  .sgform{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;margin-top:6px;background:var(--field);border-radius:14px;padding:12px}
}
.agremote .cta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;text-align:center} /* web-12.33: one line, like every pill button */
.agremnote{display:block;font-size:.8rem;color:var(--sub);text-align:center;margin-top:6px;line-height:1.4}
/* signing code (web-10.1) */
.sgcodeerr{margin:0;color:var(--rep);font-size:.88rem;font-weight:600}
.sgagain{align-self:center;font-size:.9rem}

/* web-10.3 check it's you, then sign each spot */
.sggate{background:var(--card);border-radius:var(--r-card);padding:24px 20px 20px;margin-top:16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.sggate h2{margin:0;font-size:1.25rem;line-height:1.3;color:var(--text)} .sggate p{margin:0;color:var(--sub);font-size:.95rem;line-height:1.5;max-width:420px} .sggate p b{color:var(--text)}
.sggateic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--teal) 14%,var(--card));color:var(--teal-ink)}
.sggate #sgGate1,.sggate #sgGate2{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;gap:12px} .sggate .cta{width:100%}
.sggatesent{font-size:.92rem} .sggate .fine{font-size:.8rem}
.otp{position:relative;width:100%;max-width:340px}
.otp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;border:0;padding:0;z-index:1;cursor:text}
.otpcells{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.otpcells span{height:58px;border-radius:12px;background:var(--field);border:1.5px solid var(--hair);display:grid;place-items:center;font-size:1.5rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s}
.otpcells span.full{border-color:color-mix(in srgb,var(--text) 30%,var(--hair))}
.otpcells span.cur{border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 22%,transparent)}
.otpcells span.cur::after{content:"";width:2px;height:26px;background:var(--teal);border-radius:1px;animation:otpblink 1s steps(1) infinite}
@keyframes otpblink{50%{opacity:0}}
.otp.bad .otpcells span{border-color:var(--rep)} .otp.bad .otpcells{animation:otpshake .35s}
@keyframes otpshake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.otp.bad .otpcells,.otpcells span.cur::after{animation:none}}
.sgspotsnote{margin:4px 2px 10px}
.sgsig{margin-top:14px} .sgsig .sigwrap{margin-top:6px}
.sgspot{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;margin:14px 2px 0} .sgsig .sgspot{margin-top:0}
.sgspot b{font-size:.95rem;color:var(--text)} .sgspot span{font-size:.85rem;color:var(--sub)}
.sgsee{margin-left:auto;font-size:.85rem;min-height:32px;padding:0 2px}
.sgsig.done .sgspot b::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-left:8px;vertical-align:middle}
.sggate #sgOtp{width:100%;display:flex;justify-content:center} .sggate p.sgcodeerr{color:var(--rep);font-weight:600}
.aglock.bad{background:color-mix(in srgb,var(--rep) 12%,var(--card));color:var(--rep)} .aglock.bad b{color:var(--rep)} .aglock.bad span{color:var(--text)}
/* web-10.6 signing link: one header on every screen, logo far left, our number on the right; messages in one centred card */
.sgtop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 4px 4px}
.sglogo .pubbrand img{height:30px}
.sgcall{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;background:var(--card);border:1px solid var(--hair);color:var(--teal-ink);font-weight:700;font-size:.9rem;text-decoration:none;white-space:nowrap}
.sgcall svg{flex:none} .sgcall small{font-size:.9rem;font-weight:500;color:var(--sub)}
@media (hover:hover){ .sgcall:hover{border-color:color-mix(in srgb,var(--teal) 45%,var(--hair))} }
body.signflow .sggate{max-width:460px;margin:20px auto 0}
.sggateic.ok{background:color-mix(in srgb,var(--ok) 14%,var(--card));color:var(--ok)}
.sggateic.warn{background:color-mix(in srgb,var(--mon) 16%,var(--card));color:color-mix(in srgb,var(--mon) 85%,var(--text))}
@media (max-width:420px){ .sgcall small{display:none} .sgcall{padding:0 12px} .sglogo .pubbrand img{height:26px} }
@media (min-width:860px) and (min-height:500px){
  body.signflow #s-offer{max-width:1280px!important}
  .sgtop{padding:24px 4px 12px}
  body.signflow .sggate{margin-top:48px;padding:32px 32px 28px}
}
.sggate p b{white-space:nowrap} .sggate #sgGate2 .sggatesent{font-size:.95rem}
body.signflow .sgwrap{margin-top:10px}
@media (max-width:859px),(max-height:499px){ .sgtop{padding-bottom:10px} body.signflow .sgwrap{margin-top:14px} }
/* web-10.7 signing record */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;font-weight:600;letter-spacing:0} .mono.bad{color:var(--rep)}
.sghist{background:var(--card);border-radius:var(--r-card);padding:4px 14px}
.sghrow{display:grid;gap:2px;padding:10px 0;border-bottom:1px solid var(--hair)} .sghrow:last-child{border-bottom:0}
.sghrow b{font-size:.92rem;font-weight:600;color:var(--text)} .sghwhen{font-size:.78rem;color:var(--sub);font-variant-numeric:tabular-nums} .sghmeta{font-size:.8rem;color:var(--sub);overflow-wrap:anywhere}
/* customer self assessment: a comfortable reading width on a computer (web-10.8) */
@media (min-width:860px) and (min-height:500px){ #s-cust{max-width:600px} }
/* a task that just moved (ticked into Activity, or unticked back to Upcoming) eases into place (web-10.12) */
@keyframes tlin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.tlin{animation:tlin .32s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){ .tlin{animation:none} }

/* impersonating an employee (web-10.25): a bar above the dock with Switch back */
.impbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px) + 10px);z-index:58;display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);padding:6px 6px 6px 14px;border-radius:999px;background:#9a3412;color:#fff;font-size:.8rem;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.impbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.impbar button{border:0;border-radius:999px;background:#fff;color:#9a3412;font-weight:700;font-size:.8rem;padding:7px 12px;white-space:nowrap;cursor:pointer;flex-shrink:0}
@media (min-width:860px) and (min-height:500px){ .impbar{bottom:18px;left:calc(var(--side) + (100% - var(--side))/2)} }

/* web-10.28: For sale's header has a wide "How it works" on the right, so on phones both sides take equal room and the title stays centred */
@media (max-width:859px), (max-height:499px){
  #s-stock>.bar.tbar>.navbtn{flex:1 1 0;min-width:0}
  #s-stock>.bar.tbar>.navbtn.r{text-align:right;justify-content:flex-end}
  #s-stock>.bar.tbar>.t{flex:0 1 auto}
}

/* new version ready (web-10.31): same place and shape as the impersonating bar, in the app's navy */
.verbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px) + 10px);z-index:57;display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);padding:6px 6px 6px 14px;border-radius:999px;background:#191C1F;color:#fff;border:1px solid rgba(255,255,255,.14);font-size:.8rem;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.verbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.verbar button{border:0;border-radius:999px;background:#fff;color:#191C1F;font-weight:700;font-size:.8rem;padding:7px 12px;white-space:nowrap;cursor:pointer;flex-shrink:0}
#impBar~.verbar{bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px) + 62px)}
@media (min-width:860px) and (min-height:500px){ .verbar{bottom:18px;left:calc(var(--side) + (100% - var(--side))/2)} #impBar~.verbar{bottom:70px} }

/* collapsible computer sidebar (web-10.32): html.sidemin shrinks it to icons; the toggle sits at the bottom like HubSpot's */
@media (min-width:860px) and (min-height:500px){
  :root.sidemin{--side:72px}
  html.sideanim .tabbar{transition:width .2s ease} html.sideanim body.navshown{transition:padding-left .2s ease}
  html.sidemin .tabbar .in{padding:14px 10px;overflow:hidden}
  html.sidemin .tlab,html.sidemin .sidekbd,html.sidemin .sidebrand .pubtag{display:none}
  html.sidemin .tab{justify-content:center;padding:10px 0;position:relative}
  html.sidemin .tabcount{position:absolute;top:2px;right:6px;margin:0;min-width:17px;height:17px;line-height:17px;font-size:.66rem;padding:0 4px}
  html.sidemin .tabdot{position:absolute;top:6px;right:12px;margin:0}
  /* just the TB mark from the logo */
  html.sidemin .sidebrand{padding:4px 0 14px;display:flex;justify-content:center}
  html.sidemin .sidebrand .pubbrand{width:38px;overflow:hidden;display:block}
  html.sidemin .sidebrand .pubbrand img{height:22px;width:auto;max-width:none;display:block}
}
/* web-10.33: what the collapsed sidebar frees up goes to the pages (Tom: the point of collapsing is more room) */
@media (min-width:860px) and (min-height:500px){
  :root.sidemin{--sidefree:164px}
  #tasksBody{max-width:calc(900px + var(--sidefree,0px))}
  #calBody,#stockBody,#repBody{max-width:calc(1200px + var(--sidefree,0px))}
  body.split-leads #s-selfd>div,body.split-stock #s-stockd>div,body.split-stock #s-stockd>div{max-width:calc(820px + var(--sidefree,0px))}
  html.sidemin body.split-leads #s-self,html.sidemin body.split-stock #s-stock,html.sidemin body.split-stock #s-stock{width:440px}
  html.sidemin body.split-leads #s-selfd,html.sidemin body.split-stock #s-stockd,html.sidemin body.split-stock #s-stockd{margin-left:440px}
}
@media (min-width:860px) and (min-height:500px) and (max-width:1199px){
  :root.sidemin{--sidefree:124px}
  html.sidemin body.split-leads #s-self,html.sidemin body.split-stock #s-stock{width:370px} html.sidemin body.split-leads #s-selfd,html.sidemin body.split-stock #s-stockd{margin-left:370px}
}
@media (min-width:1280px){ html.sidemin body:not(.split-leads):not(.drawer-lead) #s-selfd,html.sidemin body:not(.split-stock):not(.drawer-stock) #s-stockd{max-width:calc(1180px + var(--sidefree,0px))} }
@media (min-width:1400px){ html.sidemin body.split-leads #s-self,html.sidemin body.split-stock #s-stock{width:400px} html.sidemin body.split-leads #s-selfd,html.sidemin body.split-stock #s-stockd{margin-left:400px} }
@media (min-width:1400px){ html.sidemin body.split-leads #s-selfd>div,html.sidemin body.split-stock #s-stockd>div{max-width:calc(1200px + var(--sidefree,0px))} }

/* web-10.34/35 separate column scrolling removed in web-11.4: the lead page scrolls as one */

/* dropdowns on a computer (web-10.36, openPop) */
.pop{position:fixed;z-index:64;background:var(--card);color:var(--text);border:.5px solid var(--hair);border-radius:14px;box-shadow:0 12px 32px rgba(2,10,22,.18),0 2px 6px rgba(2,10,22,.08);overflow-y:auto;overscroll-behavior:contain;padding:6px;opacity:0;transform:translateY(-4px);transition:opacity .12s,transform .12s}
.pop.on{opacity:1;transform:none}
.pop>h3,.pop>.sub{display:none}
.pop .group{margin:0;box-shadow:none;background:none;border-radius:0}
.pop .group+.group,.pop .group.mt12{margin-top:4px!important;border-top:.5px solid var(--hair);padding-top:4px}
.pop .cell{min-height:38px;padding:7px 8px;border-radius:8px;border:0!important;font-size:.9rem}
.pop .cell:hover{background:var(--press)}
.pop .cell .chev,.pop .cell>svg:last-child{display:none}
.pop .mnicon{width:26px;height:26px;margin-right:10px} .pop .mnicon svg{width:15px;height:15px}
.poptitle{font-size:.72rem;font-weight:700;color:var(--sub);text-transform:none;padding:6px 8px 4px}
.popchk{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;cursor:pointer;font-size:.9rem}
.popchk:hover{background:var(--press)}
.popchk input{width:17px;height:17px;margin:0;accent-color:var(--teal);flex:none}
.popfoot{border-top:.5px solid var(--hair);margin-top:4px;padding:8px 8px 4px}
.popfoot .tlink{font-size:.85rem}
.pop.nfpop{padding:8px 10px 10px}
.pop.nfpop .nfhead{padding:4px 4px 6px}
.pop.nfpop .sectionlabel{margin:10px 4px 6px}
.pop.nfpop .nfgroup{border:.5px solid var(--hair);border-radius:12px;overflow:hidden}
.pop.nfpop .nfrow{padding:10px 12px}
.pop.nfpop .empty{padding:20px 10px}

/* Tasks page (web-10.37) */
.tkviews{margin-top:2px}
.tkviews .chip.late .n{background:color-mix(in srgb,var(--rep) 16%,transparent);color:var(--rep)}
.tkbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 4px}
.tksearch{display:flex;align-items:center;gap:6px;background:var(--card);border:.5px solid var(--hair);border-radius:10px;padding:0 10px;height:38px;color:var(--sub);flex:1 1 160px;max-width:260px}
.tksearch input{border:0;background:none;outline:none;font:inherit;font-size:.9rem;color:var(--text);width:100%;min-width:0;height:36px;padding:0}
.tkdd{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:10px;border:.5px solid var(--hair);background:var(--card);color:var(--text);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap}
.tkdd:hover{background:var(--press)} .tkdd.on{border-color:var(--teal);color:var(--teal-ink);background:color-mix(in srgb,var(--teal) 10%,var(--card))}
.tkbar .tkclear{font-size:.85rem}
.tkbulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--teal) 10%,var(--card));border:.5px solid color-mix(in srgb,var(--teal) 35%,transparent)}
.tkbulk b{font-size:.9rem;margin-right:6px} .tkbulk .pill{display:inline-flex;align-items:center;gap:5px} .tkbulk .pill.bad{color:var(--rep)} .tkbulk .tlink{margin-left:auto;font-size:.85rem}
.tkwrap{margin-top:8px;background:var(--card);border-radius:var(--r-card);overflow:hidden;border:.5px solid var(--hair)}
.tktable{width:100%;border-collapse:collapse;font-size:.9rem}
.tktable th{text-align:left;font-size:.72rem;font-weight:700;color:var(--sub);padding:10px 10px;border-bottom:.5px solid var(--hair);white-space:nowrap;background:var(--card)}
.tktable td{padding:10px;border-bottom:.5px solid var(--hair);vertical-align:middle}
.tktable tbody tr{cursor:pointer} .tktable tbody tr:hover{background:var(--press)} .tktable tbody tr:last-child td{border-bottom:0}
.tktable tr.sel{background:color-mix(in srgb,var(--teal) 7%,transparent)}
.tktable .tksel{width:34px;padding-right:0} .tktable .tksel input{width:16px;height:16px;margin:0;accent-color:var(--teal);cursor:pointer}
.tktable .tkc{width:32px;padding-right:0}
.tktable .tkt{min-width:200px} .tktable .tknote1{font-size:.8rem;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.tktable .tklead{font-weight:600;white-space:nowrap} .tktable .tksub1{font-size:.8rem;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.tktable .tktype{white-space:nowrap;color:var(--sub)} .tktable .tktype .ic{vertical-align:-2px;margin-right:6px}
.tktable td.late{color:var(--rep);font-weight:600;white-space:nowrap} .tktable td.today{color:var(--teal-ink);font-weight:600;white-space:nowrap} .tktable td{white-space:nowrap} .tktable td.tkt{white-space:normal}
.tktable tr.done .tktitle{text-decoration:line-through;color:var(--sub);font-weight:500}
.tkfoot{font-size:.8rem;color:var(--sub);padding:10px 4px}
@media (max-width:859px),(max-height:499px){ .tkbar .tksearch{max-width:none;flex-basis:100%} }
/* Start tasks panel */
.tqpanel{position:fixed;z-index:61;background:var(--bg);display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.tqtop{display:flex;align-items:center;gap:10px} .tqcount{font-weight:700} .tqlabel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tqprog{height:4px;border-radius:4px;background:var(--field);overflow:hidden} .tqprog i{display:block;height:100%;background:var(--teal);transition:width .3s}
.tqcard{background:var(--card);border-radius:var(--r-card);padding:16px;display:flex;flex-direction:column;gap:8px;border:.5px solid var(--hair)}
.tqtype{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--teal-ink)}
.tqtitle{font-size:1.12rem;font-weight:700} .tqmeta{display:flex;gap:12px;font-size:.85rem;color:var(--sub)} .tqmeta .late{color:var(--rep);font-weight:600} .tqmeta .today{color:var(--teal-ink);font-weight:600}
.tqnotes{font-size:.9rem;background:var(--field);border-radius:10px;padding:8px 10px;white-space:pre-wrap}
.tqlead{display:flex;flex-direction:column;border-top:.5px solid var(--hair);padding-top:8px} .tqlead span{font-size:.85rem;color:var(--sub)}
.tqbtns{display:flex;flex-direction:column;gap:8px} .tqbtns .cta{display:flex;align-items:center;justify-content:center;gap:6px}
.tqrow{display:flex;gap:8px} .tqrow .cta{flex:1}
.tqnav{display:flex;align-items:center;justify-content:space-between;font-size:.85rem} .tqnav .tlink[disabled]{opacity:.4;pointer-events:none}
.tqend{text-align:center;padding:10px 0 0} .tqend .ic{color:var(--ok)} .tqend h3{margin:8px 0 4px} .tqend p{margin:0;color:var(--sub)}
@media (min-width:860px) and (min-height:500px){
  body.tq{--tqw:380px}
  .tqpanel{top:0;bottom:0;left:var(--side);width:var(--tqw);padding:20px 20px 24px;border-right:.5px solid var(--hair)}
  body.tq.drawer-lead #s-selfd,body.tq.drawer-stock #s-stockd{width:calc(100vw - var(--side) - var(--tqw))!important;box-shadow:none;animation:none}
  body.tq #drawerScrim{display:none!important}
}
@media (min-width:860px) and (min-height:500px) and (max-width:1199px){ body.tq{--tqw:320px} }
@media (max-width:859px),(max-height:499px){
  .tqpanel{left:8px;right:8px;bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px) + 8px);max-height:46vh;padding:12px;border-radius:16px;border:.5px solid var(--hair);box-shadow:0 10px 30px rgba(2,10,22,.22);gap:8px}
  .tqpanel .tqcard{padding:10px 12px;gap:4px;border:0;background:var(--field)} .tqpanel .tqtitle{font-size:1rem} .tqpanel .tqlead,.tqpanel .tqnotes{display:none}
  .tqpanel .tqbtns .cta{height:44px}
  body.tq #s-selfd,body.tq #s-stockd{padding-bottom:calc(var(--tabh) + 300px)!important}
}
.tkdds{display:contents}
@media (min-width:860px) and (min-height:500px){ #tasksBody{max-width:calc(1280px + var(--sidefree,0px))} .tkwrap{overflow-x:auto} }
@media (max-width:859px),(max-height:499px){
  .tkdds{display:flex;gap:6px;overflow-x:auto;flex:1 1 100%;margin:0 -16px;padding:0 16px 2px;scrollbar-width:none} .tkdds::-webkit-scrollbar{display:none}
  .tkdds .tkdd{height:34px;font-size:.8rem;flex:none} .tkdds .tkclear{flex:none;white-space:nowrap}
  .tkbar .tksearch{height:40px}
}
/* web-10.39 Tasks tidy */
.tkhead{display:flex;align-items:center;gap:10px}
.tkhead .tkviews{flex:1;min-width:0}
.tkstart{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 14px;border:0;border-radius:10px;background:var(--teal);color:#fff;font:inherit;font-size:.85rem;font-weight:700;white-space:nowrap;cursor:pointer;flex:none}
.tkstart:hover{filter:brightness(1.05)} .tkstart:active{transform:scale(.98)}
.tksearch input{font-size:.85rem}
.tktable .tkticon{display:none;color:var(--sub);margin-right:6px;vertical-align:-1px}
.tqlead{font-size:.85rem;color:var(--sub);border-top:.5px solid var(--hair);padding-top:8px;flex-direction:row}
.sheet .poptitle{display:none}
/* web-12.31: a pop-up title straight onto a list (no line under it) gets the same space a subtitle would give, instead of touching the list (Tom, dashboard ••• on iPhone) */
.sheet h3+.group,.sheet h3+.poptitle+.group{margin-top:14px}
@media (min-width:860px) and (min-height:500px) and (max-width:1279px){ .tktable .tkwide{display:none} .tktable .tkticon{display:inline} }
@media (max-width:859px),(max-height:499px){
  .tkhead{flex-direction:column;align-items:stretch;gap:8px} .tkhead .tkviews{order:0} .tkstart{height:44px;font-size:.9rem;order:1}
  .tksearch input{font-size:16px} .tqpanel .tqlead{display:none}
}
@media (min-width:860px) and (min-height:500px) and (max-width:1279px){
  .tktable td,.tktable th{padding:10px 8px} .tktable .tklead,.tktable .tksub1{white-space:normal} .tktable .tkt{min-width:160px}
}
@media (min-width:860px) and (min-height:500px) and (max-width:1099px){ .tktable .tkmid{display:none} }
/* web-10.40: Start tasks on a phone is a slim two-row bar above the dock (Tom: the card covered most of the lead) */
.tqtop .tqprev{margin-left:auto;font-size:.85rem} .tqtop .tqprev[disabled]{opacity:.35;pointer-events:none} .tqtop .tqexit{font-size:.85rem}
.tqtop .tqlabel{flex:1} .tqtop:has(.tqprev) .tqlabel{flex:1}
@media (min-width:860px) and (min-height:500px){ .tqnav{justify-content:flex-end} .tqcard{cursor:default} }
@media (max-width:859px),(max-height:499px){
  .tqpanel{max-height:none;padding:10px 12px 12px;gap:8px;overflow:visible}
  .tqpanel .tqtop{gap:12px} .tqpanel .tqcount{font-size:.85rem} .tqpanel .tqlabel{display:none}
  .tqpanel .tqtop .tqprev{margin-left:auto}
  .tqpanel .tqprog{position:absolute;top:0;left:14px;right:14px;height:3px}
  .tqpanel .tqcard{padding:0;background:none;gap:4px;cursor:pointer}
  .tqpanel .tqtype,.tqpanel .tqmeta,.tqpanel .tqnotes{display:none}
  .tqpanel .tqtitle{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tqpanel .tqcard.open .tqtitle{white-space:normal}
  .tqpanel .tqcard.open .tqtype,.tqpanel .tqcard.open .tqmeta{display:flex}
  .tqpanel .tqcard.open .tqnotes{display:block;max-height:22vh;overflow-y:auto}
  .tqpanel .tqbtns{flex-direction:row;gap:6px}
  .tqpanel .tqrow{display:contents}
  .tqpanel .tqbtns .cta{height:42px;min-height:0;font-size:.85rem;padding:0 10px;border-radius:10px;flex:1 1 0;white-space:nowrap}
  .tqpanel .tqbtns .tqdone{flex:1.4 1 0} .tqpanel .tqnext{display:none}
  .tqpanel .tqnav{display:none}
  body.tq #s-selfd,body.tq #s-stockd{padding-bottom:calc(var(--tabh) + 150px)!important}
}
.tqmvs{display:none}
@media (max-width:859px),(max-height:499px){ .tqpanel .tqmvl{display:none} .tqpanel .tqmvs{display:inline} .tqpanel .tqmove .ic{width:12px;height:12px} }
/* web-10.41 Tasks spacing: one 12px rhythm between the blocks */
.tkhead{margin-top:4px} .tkhead .tkviews{padding-top:2px;padding-bottom:2px}
.tkbar{margin:12px 0 0} .tkbulk{margin:12px 0 0} .tkwrap{margin-top:12px} .tkfoot{padding:10px 2px 0}
.tklist{margin-top:12px}
.tktable .tksel input{vertical-align:middle}
/* a task's line under its title stays on one line: the lead's name gives way */
#tasksBody .tksub{flex-wrap:nowrap;white-space:nowrap;min-width:0} #tasksBody .tksub b{overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto} #tasksBody .tksub>*:not(b){flex:none}
@media (max-width:859px),(max-height:499px){
  .tkhead{gap:12px;margin-top:0}
  /* Start tasks bar sits on the dock, so no strip of the page shows between them */
  .tqpanel{left:0;right:0;bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px));border-radius:16px 16px 0 0;border-width:.5px .5px 0;box-shadow:0 -8px 24px rgba(2,10,22,.12);padding:12px 16px}
  .tqpanel .tqprog{left:16px;right:16px}
}

/* web-10.42: five tabs on phones (Leads, Tasks, Calendar, For sale, Settings); the + is gone. Tasks shows how many are due */
@media (max-width:859px),(max-height:499px){ .tab .tabcount{position:absolute;top:0;left:calc(50% + 6px);margin:0;min-width:17px;height:17px;line-height:17px;font-size:.66rem;padding:0 4px;border:2px solid var(--card);box-sizing:content-box} }
/* copy-link button beside the ••• on the lead card (computer/tablet, web-10.44) */
.lhshare{display:none}
@media (min-width:860px) and (min-height:500px){ body.split-leads .lhshare,body.split-stock .lhshare{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;margin:-6px -4px 0 0;color:var(--teal-ink)} }
/* web-10.47: on a computer Start tasks sits straight after the Completed pill instead of at the far right (Tom) */
@media (min-width:860px) and (min-height:500px){ .tkhead .tkviews{flex:0 1 auto;padding-right:0;margin-right:0} .tkhead{gap:12px} }
/* web-10.48: pick tasks to start on a phone */
.tkpickbar{display:flex;align-items:center;gap:12px;margin:6px 0 0;font-size:.85rem;color:var(--sub)} .tkpickbar .navbtn{min-width:0;font-size:.9rem;padding-left:4px;padding-right:4px} /* Select on the left, like Leads (web-10.49) */
.tkpickbar+.tklist{margin-top:6px}
.tkpick{box-sizing:border-box;width:22px;height:22px;border-radius:6px;border:2px solid var(--hair);flex:none;display:grid;place-items:center;color:#fff;margin-top:1px}
.tkpick.on{background:var(--teal);border-color:var(--teal)}
.tklist.picking .taskrow.sel{background:color-mix(in srgb,var(--teal) 8%,transparent)}
.tkpickbar .fa{flex:1}
/* web-10.52: Undo messages sit just above the dock now the + is gone; above the Start tasks bar while it's open */
@media (max-width:859px),(max-height:499px){ body.tq .toast{bottom:calc(var(--tabh) + 140px + env(safe-area-inset-bottom,0px))!important} }
/* email composer: Templates list and Save as a template (web-10.53) */
.emtools{display:flex;align-items:center;gap:10px;margin:4px 0 10px}
.emtools .tlink{font-size:.85rem}
.tplpick{position:relative;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 10px;border-radius:10px;border:.5px solid var(--hair);background:var(--card);color:var(--text);font-weight:600;font-size:.85rem;cursor:pointer;max-width:100%}
.tplpick .ic{flex:none;color:var(--teal-ink)}
.tplpick{flex:0 1 auto;min-width:0;font-family:inherit} .tpllab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:52vw}
@media (min-width:860px) and (min-height:500px){ .tpllab{max-width:300px} }
.tplpick .ic:last-child{color:var(--sub);flex:none}
.tplpick[aria-expanded="true"]{border-color:var(--teal)}
.emtools .tlink{white-space:nowrap}
.tplpick:focus-within{border-color:var(--teal)}
.tpfields{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.tpfields .tsub{font-size:.8rem;margin-right:2px}

/* web-10.54: the Templates menu is the app's own (not the phone's picker); To and Subject are single compact lines */
.emtools,.tplwrap{position:relative}
.tplmenu{position:absolute;left:0;top:calc(100% + 6px);z-index:6;min-width:240px;max-width:min(340px,calc(100vw - 32px));max-height:min(52vh,380px);overflow-y:auto;overscroll-behavior:contain;background:var(--card);border:.5px solid var(--hair);border-radius:14px;box-shadow:0 12px 32px rgba(2,10,22,.18),0 2px 6px rgba(2,10,22,.08);padding:6px;animation:tplin .12s ease}
@keyframes tplin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tplmenu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:none;color:var(--text);font:inherit;font-size:.9rem;padding:10px 10px;border-radius:8px;cursor:pointer;min-height:40px}
.tplmenu button:hover,.tplmenu button:active{background:var(--press)}
.tplmenu .tplmanage{color:var(--teal-ink);font-weight:600;border-top:.5px solid var(--hair);border-radius:0 0 8px 8px;margin-top:4px}
.tplnone{padding:10px;font-size:.85rem}
.emfields .cfield{display:flex;align-items:center;gap:10px;padding:0;min-height:46px}
.emfields .cfield>span{flex:none;width:58px;margin:0;font-size:.85rem}
.emfields .cfield input{flex:1;min-width:0;padding:10px 0;height:auto;font-size:1rem}
.tpfields{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:2px 16px} .tpfields::-webkit-scrollbar{display:none} .tpfields .pill,.tpfields .tsub{flex:none;white-space:nowrap}
/* web-10.58 Templates button spacing: even padding, the label centred between its icon and arrow, and the row's spacer
   actually stretches (Reply on the left, Templates on the right; Templates left, Save as a template right) */
.emtools .fa{flex:1}
.tplpick{gap:0;height:36px;padding:0 10px 0 11px}
.tplpick .tpllab{margin:0 6px 0 8px;line-height:1}
.tplpick .ic{width:15px;height:15px}
.tplpick .ic:last-child{width:14px;height:14px}
.emtools .sectionlabel{line-height:36px}
/* Reply / Forward on emails in Activity (computer only) and Forward in a conversation (web-10.59) */
.tlacts{display:none}
@media (min-width:860px) and (min-height:500px){
  .tlacts{display:flex;gap:2px;flex:none;margin:-6px -6px -6px 0}
  .tlact{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:none;color:var(--sub);cursor:pointer;padding:0}
  .tlact:hover{background:var(--press);color:var(--teal-ink)}
}
.emto{display:flex;align-items:center;gap:10px} .emto>span{flex:1;min-width:0;overflow-wrap:anywhere}
.emfwd{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;flex:none}
/* web-10.60: the Reply label and the Templates button share a text line (same size, baselines lined up) with even gaps
   above and below the row */
.emtools{align-items:center;margin:12px 0}
.emtools .sectionlabel{font-size:.85rem;line-height:1;margin:0!important;padding:0}
.emtools .tlink{line-height:1}
/* rego finder on the self assessment (web-10.61) */
.platecard{margin-bottom:12px}
.platerow{display:flex;gap:8px;margin-top:10px;align-items:stretch}
.platerow select{flex:0 0 84px;border:1.5px solid var(--hair);background:var(--field);border-radius:10px;padding:0 8px;font-size:16px;font-weight:600;color:var(--text)}
.platerow .plateinp{flex:1;min-width:0;border:1.5px solid var(--hair);background:var(--field);border-radius:10px;padding:0 12px;height:50px;font-size:1.12rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text);outline:none}
.platerow .plateinp:focus{border-color:var(--teal)}
.platerow .plateinp::placeholder{letter-spacing:0;font-weight:500;text-transform:none;color:var(--sub)}
.platerow .platego{flex:0 0 auto;width:auto;padding:0 18px;height:50px}
.plateres:empty{display:none}
.plateres{margin-top:10px}
.platemsg{color:var(--sub);font-size:.9rem}
.platehit{display:flex;gap:10px;align-items:flex-start;color:var(--teal-ink)}
.platehit svg{flex:0 0 auto;margin-top:2px}
.platehit b{display:block;color:var(--text);font-size:1rem}
.platehit span{display:block;color:var(--sub);font-size:.9rem}
.platealt{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.platealt>span{flex:1 0 100%;color:var(--sub);font-size:.8rem}
.platealt button{border:1.5px solid var(--hair);background:var(--field);border-radius:999px;padding:7px 12px;font-size:.9rem;font-weight:600;cursor:pointer;color:var(--text)}
.platealt button small{color:var(--sub);font-weight:500;font-size:.8rem}
.platealt button[aria-pressed="true"]{border-color:var(--teal);background:color-mix(in srgb,var(--teal) 14%,var(--card));color:var(--teal-ink)}
.platenext{margin-top:8px;font-size:.9rem;color:var(--sub)}
/* Settings > Business > Logo, and a business without one (web-10.70) */
.logorow{flex-wrap:wrap;gap:10px}
.logorow .lbl{flex:1 1 180px;min-width:0}
.logoprev{display:flex;align-items:center;min-height:44px;padding:6px 10px;border-radius:10px;background:var(--field)}
.logoprev.dark{background:#191C1F}
.logoprev img{max-height:36px;max-width:170px;width:auto;height:auto;display:block}
.logobtns{display:flex;gap:8px;flex:1 0 100%;justify-content:flex-end}
.pubname{font-size:1.25rem;font-weight:800;color:var(--text);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}

/* carassessments.com.au, the product (web-10.71): sign in, welcome and invite screens */
/* Car Assessments logo (web-10.77): colour version in light mode, white version in dark mode */
.prodmark{display:inline-block;line-height:0}
.prodmark img{height:38px;width:auto;display:block}
.prodmark .lp{display:none} .prodmark .lw,.prodmark .lp{line-height:0}
#s-login .prodmark .lw{display:none} #s-login .prodmark .lp{display:block}
.pl-d{display:none!important}
:root[data-theme="dark"] .pl-l{display:none!important} :root[data-theme="dark"] .pl-d{display:block!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pl-l{display:none!important} :root:not([data-theme="light"]) .pl-d{display:block!important}}
/* the computer sidebar shows the business's own logo or name; collapsed, its first letter */
.sidebrand .bizbrand{display:flex;align-items:center;min-width:0;padding:2px 2px 0}
.sidebrand .bizbrand img{max-height:26px;max-width:170px;width:auto;height:auto;display:block}
.sidebrand .bizbrand .pubname{font-size:1.05rem}
.sidebrand .bizinit{display:none;width:34px;height:34px;border-radius:10px;background:var(--teal);color:#fff;font-weight:800;font-size:1rem;place-items:center}
html.sidemin .sidebrand .bizbrand{display:none}
html.sidemin .sidebrand .bizinit{display:grid}
.brandrow .prodmark img{height:30px}
/* "Car Assessments AI" on the valuation (web-10.79) */
.vai{display:inline-flex;align-items:center;gap:5px;flex:none;padding:3px 9px 3px 7px;border-radius:999px;background:color-mix(in srgb,var(--teal) 12%,var(--card));color:var(--teal-ink);font-size:.72rem;font-weight:700;white-space:nowrap;line-height:1.4}
.vhead .vai{display:flex;width:max-content;margin-top:7px;font-size:.72rem;color:var(--teal-ink)}
.vhead .navbtn{white-space:nowrap}
/* staff sign in (web-10.80): logo, then one card with the form, centred */
#s-login:not([hidden]){display:flex;min-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
#s-login .loginbox{width:100%;max-width:400px;margin:auto;padding:24px 0 32px}
#s-login .brandslot .brandrow{display:flex;justify-content:center;padding:0 0 22px}
#s-login .brandslot .prodmark img{height:92px}
.logincard{background:var(--card);border-radius:20px;padding:24px 20px 20px;box-shadow:0 1px 2px rgba(2,10,22,.05),0 10px 30px rgba(2,10,22,.07)}
.loginh{font:700 1.4rem/1.2 var(--ui);letter-spacing:-.01em;margin:0}
.loginsub{color:var(--sub);font-size:.9rem;margin:4px 0 18px}
.lifield{display:block;font-size:.8rem;font-weight:700;color:var(--sub);margin:0 0 6px}
.lirow{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px}
.lirow .lifield{margin-bottom:6px}
.liforgot{min-width:0!important;font-size:.8rem!important;padding:0!important;text-align:right}
.liinput{display:block;width:100%;height:48px;padding:0 14px;border:1px solid var(--hair);border-radius:12px;background:var(--field);color:var(--text);font-size:1rem;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.liinput:focus{border-color:var(--teal);background:var(--card);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 18%,transparent)}
.liinput::placeholder{color:var(--na)}
.loginfoot{text-align:center;margin:16px 12px 0}
#s-login .loginerr{margin:12px 2px 0;font-size:.9rem}
@supports (-webkit-touch-callout:none){.liinput{font-size:16px}}
.sidebrand .prodmark img{height:auto!important;width:100%;max-width:180px}

/* trust ledger (web-10.87) */
.trow .tin{color:var(--ok)} .trow .tout{color:var(--text)} .trow.rev{opacity:.6} .tamt{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto} .tamt small{font-size:.72rem;color:var(--sub)}
.trmonth{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px} .trmonth b{font-size:.9rem} .tval{font-weight:600;font-size:.9rem;text-align:right;max-width:60%}

/* our own pickers (web-10.89): a button in place of each select, and the menu it opens */
select.fshid{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;flex:0 0 0!important;padding:0!important;border:0!important;overflow:hidden}
.fsel{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:inherit;color:var(--text);padding:0;margin:0;cursor:pointer;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-tap-highlight-color:transparent}
.fsel:disabled{cursor:default}
.cell .fsel{flex:1;text-align:right;color:var(--sub);min-height:24px}
.cell.cdrow .fsel{font-size:1rem;font-weight:500;color:var(--text)} .cell.cdrow .fsel.ph{color:var(--na)}
.zonepick .fsel{flex:1;font-weight:600;text-align:right;color:var(--text)}
.cfield .fsel{width:100%;text-align:left;font-size:1rem;padding:4px 0}
.platerow .fsel{flex:0 0 84px;border:1.5px solid var(--hair);background:var(--field);border-radius:10px;padding:0 8px;font-size:16px;font-weight:600;text-align:center}
.pkmenu{position:fixed;z-index:97;background:var(--card);border:1px solid var(--hair);border-radius:14px;box-shadow:0 14px 36px rgba(0,0,0,.2);padding:6px;overflow-y:auto;overscroll-behavior:contain;animation:pkin .14s ease-out}
@keyframes pkin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pkmenu{animation:none}}
.pkitem{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:10px 12px;border:0;background:none;border-radius:10px;font:inherit;font-size:.95rem;color:var(--text);text-align:left;cursor:pointer}
.pkitem span{min-width:0;overflow-wrap:anywhere} .pkitem svg{flex:0 0 auto;color:var(--teal-ink)}
.pkitem[aria-selected="true"]{font-weight:600;color:var(--teal-ink)}
.pkitem:hover,.pkitem:focus-visible{background:var(--field);outline:none} .pkitem:disabled{opacity:.45;cursor:default}
/* web-10.90: little i explanations instead of text under each setting */
.infob{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-6px -4px -6px 2px;padding:0;border:0;background:none;border-radius:50%;color:var(--na);vertical-align:middle;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative}
.infob::after{content:"";position:absolute;inset:-8px} /* a 44px tap area (web-12.47) */
.infob:hover,.infob[aria-expanded="true"]{color:var(--teal-ink)} .infob:focus-visible{outline:2px solid var(--teal-ink);outline-offset:-2px}

.infopop{position:fixed;z-index:98;background:var(--card);color:var(--text);border:1px solid var(--hair);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.18);padding:11px 13px;font-size:.88rem;line-height:1.45;font-weight:400;white-space:pre-line;animation:pkin .14s ease-out}
.infopop::before{content:"";position:absolute;left:var(--ax);width:10px;height:10px;background:var(--card);border:1px solid var(--hair);transform:translateX(-50%) rotate(45deg)}
.infopop.below::before{top:-6px;border-right:0;border-bottom:0} .infopop.above::before{bottom:-6px;border-left:0;border-top:0}
@media (prefers-reduced-motion:reduce){.infopop{animation:none}}
.infonb{white-space:nowrap}
/* web-10.91: office work is hidden on phones (computers and tablets, 700px+, see everything) */
/* web-11.86: phones show everything again (was html.phonemode .officeonly{display:none}) */
.ssoffice{display:flex;align-items:center;gap:6px;margin:10px 0 0;color:var(--sub)}
/* web-10.92: glossary tips are an i with the term in the bubble */
.infopop .infot{display:block;margin-bottom:3px;font-weight:700}
.infob.tipi{margin:-6px -6px -6px 0}
/* web-10.93: every i sits on the middle of the capital letters beside it (vertical-align:middle centres on the x-height, about .1em low) */
.infob{font-size:inherit;top:-.1em}
/* web-10.94: every tick box is the app's own (rounded square, brand green with a white tick, like the task pickers), never the
   browser's blue one. Not switches or the invisible iPhone haptic switches ([switch], .hapov, .hapsw): those must stay native. */
input[type=checkbox]:not(.switch):not([switch]):not(.hapov):not(.hapsw){-webkit-appearance:none;appearance:none;box-sizing:border-box;width:22px;height:22px;min-width:22px;max-width:22px;flex:none!important;margin:0;padding:0;border:2px solid color-mix(in srgb,var(--sub) 45%,transparent);border-radius:6px;background:var(--card) center/14px 14px no-repeat;cursor:pointer;display:inline-block;vertical-align:middle;accent-color:auto;transition:background-color .12s,border-color .12s}
input[type=checkbox]:not(.switch):not([switch]):not(.hapov):not(.hapsw):checked{background-color:var(--teal);border-color:var(--teal);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
input[type=checkbox]:not(.switch):not([switch]):not(.hapov):not(.hapsw):disabled{opacity:.45;cursor:default}
input[type=checkbox]:not(.switch):not([switch]):not(.hapov):not(.hapsw):focus-visible{outline:2px solid var(--teal-ink);outline-offset:2px}
.tktable .tksel input[type=checkbox]:not(.switch):not([switch]):not(.hapov):not(.hapsw),.popchk input[type=checkbox]:not(.switch):not([switch]):not(.hapov):not(.hapsw){width:18px;height:18px;min-width:18px;max-width:18px;border-radius:5px;background-size:12px 12px}
/* web-10.96 score by section on the inspection report */
.secscore .lbl{min-width:0}
.ssbar{display:block;height:4px;border-radius:2px;background:var(--field);margin-top:7px;overflow:hidden;max-width:220px}
.ssbar i{display:block;height:100%;border-radius:2px;background:var(--ok)}
.ssbar i.mid{background:var(--mon)} .ssbar i.bad{background:var(--rep)}
.ssval{font-size:.9rem;color:var(--sub);white-space:nowrap}
.ssval b{color:var(--text);font-size:1rem}
.ssbad{color:var(--rep);font-weight:600}
/* web-10.96 engine-start video */
.vidcard{margin-top:16px}
.qopt{font-weight:500;font-size:.8rem;color:var(--sub);margin-left:4px}
.vidprev{display:block;width:100%;max-height:320px;margin-top:12px;border-radius:12px;background:#000;object-fit:contain}
.vidok{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:.9rem;font-weight:600;color:var(--ok)}
.vidbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.vidbtns .photobtn{grid-column:1/-1;width:100%;display:flex;align-items:center;justify-content:center;gap:8px}
.sdvideo{border-radius:var(--r-card);overflow:hidden}
.sdvideo .vidprev{margin-top:0;max-height:420px}
.sdvwait{display:flex;align-items:center;gap:8px;padding:16px;background:var(--card);border-radius:var(--r-card);color:var(--sub);font-size:.9rem}
/* web-10.96 possible duplicate when adding a lead */
.dupbox{margin-top:14px;background:color-mix(in srgb,var(--mon) 12%,var(--card));border-radius:14px;padding:12px 14px}
.dupbox>b{display:block;font-size:.9rem;margin-bottom:6px}
.dupitem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--card);border:0;border-radius:10px;padding:10px 12px;margin-top:6px;color:var(--text);font:inherit;cursor:pointer}
.dupitem .lbl{flex:1;min-width:0;font-weight:600;font-size:.9rem}
.dupitem .subline{font-weight:400}
.duplink{color:var(--teal-ink);font-weight:600;font-size:.85rem;white-space:nowrap}
.dupbox .fine{margin:8px 0 0}
/* web-10.97 keys */
.keystate{display:flex;gap:12px;align-items:flex-start;background:var(--card);border-radius:14px;padding:14px;margin-top:4px}
.keystate>svg{flex:none;margin-top:2px;color:var(--ok)}
.keystate.out>svg{color:var(--mon)}
.keystate b{display:block;font-size:1rem}
.keystate span{display:block;color:var(--sub);font-size:.9rem;margin-top:2px}
/* web-12.33: choice pills that wrap onto more lines (report columns and steps, key reasons, buyer sources) flow in rows
   at their own width, one line each, so a long label never turns a pill into an oval (Tom, iPhone). Rule: a pill is always one line. */
.qopts.kywrap{display:flex;flex-wrap:wrap;gap:8px}
.qopts.kywrap button{flex:1 1 auto;min-width:0;max-width:100%;min-height:42px;padding:0 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
/* every other group of choice pills too (Form 9 "They have one / We'll arrange it / Not yet", proposal, settings...): they sit
   side by side while they fit and move to a new row when they don't, instead of squeezing each label onto two lines */
.qopts:not(.kywrap){display:flex;flex-wrap:wrap}
.qopts:not(.kywrap)>button{flex:1 1 auto;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:14px;padding-right:14px}
.kyquick{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.kywhy{display:inline-block;font-size:.72rem;font-weight:600;color:var(--sub);background:var(--field);border-radius:6px;padding:2px 6px;margin-left:6px;vertical-align:2px}
.kylog .lbl{font-weight:600}
.kyreg{background:var(--card);border-radius:var(--r-card);overflow:hidden}
.kyhead,.kyrow{display:grid;grid-template-columns:90px minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1.2fr);gap:12px;align-items:center;padding:10px 16px}
.kyhead{font-size:.72rem;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--hair)}
.kyrow{width:100%;text-align:left;border:0;background:none;color:var(--text);font:inherit;border-bottom:1px solid var(--hair);cursor:pointer}
.kyrow:last-child{border-bottom:0}
.kyrow:hover{background:var(--press)}
.kyrow small{display:block;color:var(--sub);font-size:.8rem;font-weight:400;margin-top:1px}
.kyrow i{color:var(--sub);font-style:normal}
.kyno{font-weight:700;font-size:.9rem}
.kycar,.kywhere{font-weight:600;font-size:.9rem;min-width:0}
.kyhook{font-size:.9rem}
.kywhere.in{color:var(--ok)} .kywhere.out{color:var(--mon)} .kywhere.bad{color:var(--rep)}
.kyexp{font-size:.85rem;font-weight:600;color:var(--sub);white-space:nowrap}
.kyexp.soon{color:var(--mon)} .kyexp.bad{color:var(--rep)}
.sflpg{gap:12px}
@media (min-width:860px) and (min-height:500px){ .sheet.wide{width:760px} }
/* web-10.98 buyers */
.tabn{font-style:normal;font-size:.72rem;font-weight:700;background:var(--field);color:var(--sub);border-radius:999px;padding:1px 6px;margin-left:2px}
.bystats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bystats>div{background:var(--card);border-radius:14px;padding:12px 10px;text-align:center;min-width:0}
.bystats b{display:block;font-size:1.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bystats span{display:block;font-size:.72rem;color:var(--sub);margin-top:2px}
#byAdd,#byView,#byOffer{display:flex;align-items:center;justify-content:center;gap:8px}
.byname{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600}
.bybadge,.badge.vw-booked,.badge.vw-done,.badge.vw-noshow,.badge.vw-cancelled{display:inline-block;font-size:.72rem;font-weight:700;border-radius:6px;padding:2px 7px;white-space:nowrap;background:var(--field);color:var(--sub)}
.by-acc,.of-accepted,.vw-done,.ref-won{background:color-mix(in srgb,var(--ok) 16%,transparent)!important;color:var(--ok)!important}
.by-wait,.of-wait,.vw-noshow{background:color-mix(in srgb,var(--rep) 14%,transparent)!important;color:var(--rep)!important}
.by-offer,.of-open,.of-countered,.ref-referred{background:color-mix(in srgb,var(--mon) 18%,transparent)!important;color:color-mix(in srgb,var(--mon) 70%,var(--text))!important}
.by-view,.vw-booked{background:color-mix(in srgb,var(--purple,#7C5CD6) 16%,transparent)!important;color:var(--purple,#7C5CD6)!important}
.bynote{margin:10px 0 0;font-size:.9rem;color:var(--sub)}
.bycontact{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.bycontact .pill{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.bycnt{font-weight:500;font-size:.85rem;color:var(--sub)}
.ofok{display:flex;align-items:center;gap:6px;color:var(--ok);font-weight:600;margin-top:10px}
#ofCmp .ppwarn{margin-top:10px}
.wkev.view,.mev.view{background:color-mix(in srgb,var(--purple,#7C5CD6) 16%,var(--card));color:var(--text)}
.wkev.view.done{opacity:.6}
.bygone{display:block;margin:10px auto 0;color:var(--sub)}
.even2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wkev.view svg,.mev.view svg{flex:none;vertical-align:-1px;margin-right:3px;color:var(--purple)}
/* web-10.99 seller's page */
.sggate #spG1,.sggate #spG2{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;gap:12px}
.sggate #spOtp{width:100%;display:flex;justify-content:center} .sggate p.sgcodeerr{color:var(--rep);font-weight:600}
.sppage{max-width:640px;margin:8px auto 0;padding-bottom:28px}
.spcar{background:var(--card);border-radius:var(--r-card);overflow:hidden}
.spph{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--field)}
.spcarin{padding:16px}
.spcarhd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.spcarhd h1{margin:0;font-size:1.25rem;line-height:1.25}
.spsub{color:var(--sub);font-size:.9rem;margin-top:2px}
.spsteps{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.spsteps li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:.72rem;color:var(--sub);position:relative}
.spsteps li i{width:22px;height:22px;border-radius:50%;border:2px solid var(--hair);background:var(--card);display:flex;align-items:center;justify-content:center;color:#fff;position:relative;z-index:1}
.spsteps li:not(:first-child)::before{content:"";position:absolute;top:10px;right:50%;width:100%;height:2px;background:var(--hair)}
.spsteps li.done i{background:var(--teal);border-color:var(--teal)}
.spsteps li.done::before,.spsteps li.now::before{background:var(--teal)!important}
.spsteps li.now i{border-color:var(--teal);box-shadow:inset 0 0 0 4px var(--card);background:var(--teal)}
.spsteps li.now span{color:var(--text);font-weight:700}
.spask{background:var(--card);border-radius:var(--r-card);padding:16px;margin-bottom:10px}
.spask>b{display:block;font-size:1.05rem}
.spask p{margin:6px 0 10px;color:var(--sub);font-size:.9rem;line-height:1.45}
.spnote{width:100%;box-sizing:border-box;border:0;background:var(--field);border-radius:10px;padding:10px 12px;font:inherit;font-size:16px;color:var(--text);resize:vertical;margin-bottom:12px}
.splink{display:flex;align-items:center;justify-content:center;text-decoration:none}
.sprefresh{display:block;margin:14px auto 0}
.spfine{text-align:center;margin-top:10px}
.dangerlink{color:var(--rep)!important}
button.paask{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;cursor:pointer;font:inherit;margin-bottom:12px}
button.paask span{flex:1}
.sppage .bystats{grid-template-columns:repeat(3,minmax(0,1fr))}
.spph{max-height:300px}
.even2 .navbtn{justify-content:center;text-align:center;width:100%}
/* long messages wrap instead of running off a phone (web-10.99) */
.toast{max-width:calc(100vw - 32px);box-sizing:border-box;white-space:normal;text-align:center;line-height:1.35}
.toast.act{text-align:left}
@media (min-width:860px) and (min-height:500px){ .toast{max-width:min(560px,calc(100vw - var(--side) - 48px))} }
.wkmsg{user-select:text;word-break:normal;overflow-wrap:anywhere;font-size:.9rem;color:var(--text);line-height:1.45}



/* ===================================================================================================================
   web-11.0 DESIGN SYSTEM (see DESIGN.md). Rebuilt to the reference design Tom chose (22 Oct 2026): a grey window, a
   rounded grey panel for the list, a soft green sheen panel for the record, near-white rounded tiles, white pill chips,
   outlined circle buttons, one solid charcoal pill for the main action, racing green where the reference uses lime and teal.
   Pass 1 covers the shell, the leads list, the lead page and the seller's self assessment.
   =================================================================================================================== */
body{letter-spacing:0;font-weight:400}
h1,h2,h3{text-wrap:balance}
.sectionlabel{font:500 var(--t-small)/1.3 var(--font);color:var(--ink-2);margin:var(--s-6) 0 var(--s-2)}
.fine{color:var(--ink-3);font-size:var(--t-small);line-height:1.45}
.navgrp{display:none}

/* ---------- controls ---------- */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;min-height:var(--btn-h);padding:0 var(--s-6);background:var(--solid);color:var(--on-solid);border:0;border-radius:var(--r-pill);box-shadow:none;font:500 var(--t-body)/1.2 var(--font);letter-spacing:0;transition:opacity var(--dur-1) var(--ease),background var(--dur-1)}
.cta:hover{opacity:.88}
.cta:active{transform:none;filter:none}
.cta.secondary,.cta.danger{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.cta.secondary:hover,.cta.danger:hover{background:var(--hover);opacity:1}
.cta.danger{color:var(--bad)}
.cta:disabled{opacity:.4}
.navbtn{color:var(--ink);font-weight:500}
/* circle buttons (bell, +, back, more) */
.tbar .plusbtn,.bellbtn,#sdBack,#sdMore,.lhmore{width:var(--circ);height:var(--circ);min-width:var(--circ);padding:0!important;border-radius:50%!important;background:transparent!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--line)!important;display:inline-flex!important;align-items:center;justify-content:center;font-size:0!important}
.tbar .plusbtn svg,.bellbtn svg{width:19px;height:19px}
.tbar .plusbtn .pblabel{display:none!important}

/* ---------- headers ---------- */
.bar{background:transparent;border:0;box-shadow:none}
.bar .t{font:500 var(--t-row)/1.2 var(--font)}
.tbar .t{text-align:left;font:var(--w-title) var(--t-display)/1.1 var(--font)!important;letter-spacing:var(--track-title);padding-left:0}
@media (max-width:859px),(max-height:499px){
  .tbar>span.navbtn[aria-hidden]:first-child{display:none}
  .bar{background:color-mix(in srgb,var(--panel) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  #s-self>.bar.tbar,#s-stock>.bar.tbar{gap:8px;padding-top:10px;padding-bottom:6px}
  #s-selfd>.bar .t,#s-stockd>.bar .t{visibility:hidden}
  #sdBack::before{content:"";width:9px;height:9px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateX(2px) rotate(45deg)}
  #sdMore::before{content:"•••";font-size:14px;letter-spacing:1px}
}

/* ---------- phone tab bar: a floating pill of circles, the current one solid ---------- */
@media (max-width:859px),(max-height:499px){
  .tabbar{left:50%!important;right:auto!important;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;background:color-mix(in srgb,var(--chip) 80%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:0;border-radius:var(--r-pill);box-shadow:var(--shadow-pop);padding:6px!important}
  .tabbar .in{display:flex!important;gap:6px;padding:0;grid-template-columns:none}
  .tab{width:52px;height:52px;min-height:0;flex:none;padding:0;border-radius:50%;font-size:0!important;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);background:transparent;justify-content:center;align-items:center;position:relative}
  .tab svg{width:21px;height:21px;margin:0}
  .tab[aria-current="page"]{background:var(--solid);color:var(--on-solid);box-shadow:none}
  .tab .tabcount{position:absolute!important;top:-2px;right:-2px;min-width:20px!important;height:20px!important;padding:0 5px!important;border-radius:10px!important;background:var(--hi)!important;color:var(--ink)!important;font:600 11.5px/20px var(--font)!important;box-shadow:none!important}
  .tab .tabdot{top:6px;right:8px}
  body .screen{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
}
.tabcount::before{content:""}
/* computer menu: on the window, no panel; grouped; each item an outlined circle icon and a label; the current one a green pill */
@media (min-width:860px) and (min-height:500px){
  body{background:var(--win)}
  .tabbar{top:var(--tb,0px);bottom:0;left:0;background:transparent;border:0!important;border-radius:0;box-shadow:none;padding:14px 14px 18px!important}
  .tabbar .in{gap:2px}
  .navgrp{display:block;font:500 var(--t-small)/1 var(--font);color:var(--ink);margin:22px 0 10px 8px}
  .tabbar .tab{gap:12px;min-height:46px;padding:0 8px!important;border-radius:var(--r-pill);color:var(--ink);font:400 var(--t-body)/1 var(--font)}
  .tabbar .tab svg{width:34px;height:34px;padding:8px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);flex:none;box-sizing:border-box;margin:0}
  .tabbar .tab:hover{background:color-mix(in srgb,var(--panel) 60%,transparent)}
  .tabbar .tab[aria-current="page"]{background:var(--hi);color:var(--ink);font-weight:500}
  .tabbar .tab[aria-current="page"] svg{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 40%,transparent)}
  .tabbar .tabcount{margin-left:auto;background:var(--chip)!important;color:var(--ink)!important;font:500 12px/22px var(--font)!important;min-width:22px!important;height:22px!important;padding:0 7px!important;border-radius:11px!important;position:static!important}
  .sidekbd{display:none!important}
  .sidebrand{padding:6px 8px 4px}
  #s-self>.bar.tbar,#s-stock>.bar.tbar,#s-pipe>.bar.tbar,#s-cal>.bar.tbar,#s-stock>.bar.tbar,#s-tasks>.bar.tbar,#s-reports>.bar.tbar,#s-plat>.bar.tbar,#s-settings>.bar.tbar,#s-prices>.bar.tbar{background:transparent}
  /* the leads list: a rounded panel of its own, title and circle buttons at its top */
  body.split-leads #s-self,body.split-stock #s-stock{top:12px!important;bottom:12px;background:var(--panel);border:0;border-radius:var(--r-panel);padding:0 18px 24px!important;scrollbar-width:none}
  body.split-leads #s-self::-webkit-scrollbar,body.split-stock #s-stock::-webkit-scrollbar{display:none}
  body.split-leads #s-self>.bar.tbar,body.split-stock #s-stock>.bar.tbar{position:sticky!important;top:0;left:auto;right:auto;margin:0 -18px 4px!important;padding:22px 18px 10px!important;background:var(--panel)!important;border:0!important;border-radius:var(--r-panel) var(--r-panel) 0 0;min-height:0;gap:8px;z-index:3}
  body.split-leads #s-selfd,body.split-stock #s-stockd{padding:12px 12px 12px 12px!important;background:transparent}
  body.split-leads #s-selfd>#selfdBody,body.split-stock #s-stockd>#stockdBody{background:var(--sheen);border-radius:var(--r-panel);padding:22px 26px 40px;min-height:calc(100vh - 24px)}
  .plusbtn{background:transparent!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--line)!important}
}

/* ---------- list controls: pill tabs (active solid), white pill search ---------- */
#s-self .segctl.lswitch,#s-stock .segctl.lswitch,#s-pipe .segctl.lswitch,.segctl.ltabs{display:flex;justify-content:flex-start;gap:8px;background:none;padding:0;border:0;border-radius:0;box-shadow:none;overflow-x:auto;scrollbar-width:none}
#s-self .segctl.lswitch,#s-stock .segctl.lswitch{margin:var(--s-2) 0 var(--s-3)}
#s-self .segctl.lswitch button,#s-stock .segctl.lswitch button,#s-pipe .segctl.lswitch button,.segctl.ltabs button{flex:none;min-height:42px;padding:0 20px;background:transparent!important;border:0;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line)!important;color:var(--ink-2);font:400 var(--t-body)/1 var(--font)}
#s-self .segctl.lswitch button[aria-pressed="true"],#s-stock .segctl.lswitch button[aria-pressed="true"],#s-pipe .segctl.lswitch button[aria-pressed="true"],.segctl.ltabs button[aria-pressed="true"]{background:var(--solid)!important;color:var(--on-solid);box-shadow:none!important;font-weight:500}
.segctl.ltabs .tcount{background:none;color:inherit;opacity:.6;padding:0;margin-left:4px}
#s-self .chips,#s-stock .chips{gap:8px;padding:2px var(--gutter);margin:var(--s-3) calc(-1 * var(--gutter)) 0;border:0;background:none}
#s-self .chip,#s-stock .chip{background:transparent;border:0;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line);padding:0 16px;min-height:38px;font:400 var(--t-small)/1 var(--font);color:var(--ink-2)}
#s-self .chip[aria-current="true"],#s-stock .chip[aria-current="true"]{background:var(--solid);color:var(--on-solid);box-shadow:none;font-weight:500}
#s-self .chip .n,#s-stock .chip .n{font-size:var(--t-label);color:inherit;opacity:.6;margin-left:5px}
#s-self .chip .chipic,#s-stock .chip .chipic,#s-self .chip svg,#s-stock .chip svg{display:none}
#s-self .searchbar,#s-stock .searchbar{background:var(--chip);border:0;border-radius:var(--r-pill);box-shadow:none;min-height:48px;padding-left:18px;color:var(--ink-3)}
#s-self .searchbar:focus-within,#s-stock .searchbar:focus-within{box-shadow:0 0 0 2px var(--green)}
#s-self .searchbar input,#s-stock .searchbar input{font:400 var(--t-body) var(--font)}
#s-self .searchbar input::placeholder,#s-stock .searchbar input::placeholder{color:var(--ink-3)}
#s-self .listtools,#s-stock .listtools{margin-top:var(--s-2)}

/* ---------- section divider: "Needs you" centred between two lines ---------- */
#s-self .leadsecs .lsec,#s-stock .leadsecs .lsec{display:flex;align-items:center;gap:14px;font:500 var(--t-small)/1 var(--font);color:var(--ink);margin:var(--s-5) 4px var(--s-4);padding:0}
#s-self .leadsecs .lsec::before,#s-stock .leadsecs .lsec::before,#s-self .leadsecs .lsec::after,#s-stock .leadsecs .lsec::after{content:"";flex:1;height:1px;background:var(--line)}
#s-self .leadsecs .lsec .lsecn,#s-stock .leadsecs .lsec .lsecn{font:400 var(--t-small)/1 var(--font);color:var(--ink-3);background:none;padding:0;margin-left:-8px;min-width:0;height:auto}
#s-self .leadsecs .group,#s-stock .leadsecs .group{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;display:grid;gap:6px}

/* ---------- lead cards ---------- */
.lrow{display:grid!important;grid-template-columns:auto 1fr auto;grid-template-areas:"av main act" "foot foot fig";align-items:start;gap:14px 14px;background:var(--tile);border:0;border-radius:var(--r-card);box-shadow:none;padding:18px 18px 16px;min-height:0;text-align:left;width:100%;transition:background var(--dur-1) var(--ease)}
.lrow.cell+.lrow.cell::before{display:none}
.lrow:hover{background:color-mix(in srgb,var(--tile) 70%,var(--chip))}
.lav{grid-area:av;width:46px;height:46px;border-radius:50%;background:var(--hi-2) center/cover no-repeat;color:var(--green);display:inline-flex;align-items:center;justify-content:center;font:600 15px/1 var(--font);box-shadow:0 0 0 3px var(--chip)}
.lav.big{width:76px;height:76px;font-size:24px;box-shadow:0 0 0 4px var(--chip)}
.lrow .lrmain{grid-area:main;min-width:0;padding-top:1px}
.lrow .name{display:block;font:var(--w-row) var(--t-row)/1.25 var(--font);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .lrsub{margin-top:3px;font-size:var(--t-small);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .lrsub.late{color:var(--bad)}
.pill{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:var(--r-pill);background:var(--chip);color:var(--ink);font:400 var(--t-label)/1 var(--font);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.lrow .unreaddot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green)!important;margin:0 8px 3px 0;vertical-align:middle}
body.split-leads .lrow.on,body.split-stock .lrow.on,body.split-leads .lrow[aria-current="true"],body.split-stock .lrow[aria-current="true"],body.split-leads .selfrow.sel,body.split-stock .selfrow.sel,.lrow.sel{background:var(--hi)!important}
body.split-leads .lrow.on .pill,body.split-stock .lrow.on .pill,body.split-leads .selfrow.sel .pill,body.split-stock .selfrow.sel .pill{background:var(--chip)}

/* ---------- lead page ---------- */
#s-selfd .lhero,#s-stockd .lhero{display:flex;flex-direction:column;background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin:0}
#s-selfd .lcontact,#s-stockd .lcontact{order:0;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--s-6)}
#s-selfd .lcontact button,#s-stockd .lcontact button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 13px;background:transparent;border:0;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:400 var(--t-small)/1 var(--font)}
#s-selfd .lcontact button:hover,#s-stockd .lcontact button:hover{background:color-mix(in srgb,var(--chip) 60%,transparent)}
#s-selfd .lcontact button:disabled,#s-stockd .lcontact button:disabled{opacity:.4}
#s-selfd .lcontact button svg,#s-stockd .lcontact button svg{width:17px;height:17px;margin:0;color:var(--ink)}
#s-selfd .lcontact .lhmore,#s-stockd .lcontact .lhmore{width:40px!important;height:40px!important;min-width:40px!important}
#s-selfd .lcontact .lhmore b,#s-stockd .lcontact .lhmore b{font-size:13px;letter-spacing:1px}
#s-selfd .lh1,#s-stockd .lh1{order:1;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
#s-selfd .lhid,#s-stockd .lhid{flex:1;min-width:200px}
#s-selfd .lname,#s-stockd .lname{font:var(--w-title) var(--t-name)/1.1 var(--font);letter-spacing:var(--track-title);color:var(--ink)}
#s-selfd .ltags,#s-stockd .ltags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tagpill{display:inline-flex;align-items:center;min-height:30px;padding:0 13px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--chip) 70%,transparent);border:0;color:var(--ink);font:400 var(--t-label)/1 var(--font);cursor:default}
button.tagpill{cursor:pointer} button.tagpill:hover{background:var(--chip)}
.tagpill.plate{font-weight:600;letter-spacing:.08em;box-shadow:inset 0 0 0 1.2px var(--ink);background:transparent}
.lfields{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-7);margin:0}
.lfields .lf{min-width:0}
.lfields dt{font:400 11.5px/1.3 var(--font);color:var(--ink-3)}
.lfields dd{margin:4px 0 0;font:400 var(--t-body)/1.3 var(--font);color:var(--ink);white-space:nowrap}
.lfields dd a{color:inherit;text-decoration:none}
#s-selfd .lfields,#s-stockd .lfields{flex-basis:100%;margin-top:var(--s-3)}
@media (min-width:1100px) and (min-height:500px){ #s-selfd .lfields,#s-stockd .lfields{flex-basis:auto;margin-top:0} }
/* process bar */
#s-selfd .track,#s-stockd .track{margin:var(--s-6) 0 0;padding:20px 22px 18px;border-radius:var(--r-card);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent);background:color-mix(in srgb,var(--chip) 30%,transparent);display:block}
#s-selfd .track:before,#s-stockd .track:before{display:none}
#s-selfd .trhead b,#s-stockd .trhead b{display:block;font:500 var(--t-row)/1.2 var(--font)}
#s-selfd .trhead span,#s-stockd .trhead span{display:block;margin-top:4px;font-size:var(--t-label);color:var(--ink-3)}
#s-selfd .trbar,#s-stockd .trbar{position:relative;display:flex;justify-content:space-between;align-items:center;margin-top:18px;height:58px;padding:0 6px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--ink) 9%,transparent);overflow:hidden}
#s-selfd .trfill,#s-stockd .trfill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p) * 100% + 29px);border-radius:var(--r-pill);background:linear-gradient(90deg,var(--green) 0%,var(--green-2) 70%,color-mix(in srgb,var(--green-2) 0%,transparent) 100%)}
#s-selfd .trdot,#s-stockd .trdot{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;background:var(--chip);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);box-shadow:0 1px 3px rgba(0,0,0,.12)}
#s-selfd .trdot.done,#s-stockd .trdot.done{color:var(--green)} #s-selfd .trdot.now,#s-stockd .trdot.now{color:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--chip) 40%,transparent)}
#s-selfd .trdot.now svg,#s-stockd .trdot.now svg{width:16px;height:16px}
#s-selfd .trlbl,#s-stockd .trlbl{display:flex;justify-content:space-between;margin-top:10px;padding:0 2px;font-size:var(--t-label);color:var(--ink-2)}
#s-selfd .trlbl span,#s-stockd .trlbl span{width:56px;text-align:center;line-height:1.25}
#s-selfd .trlbl span.now,#s-stockd .trlbl span.now{color:var(--ink);font-weight:500}
/* cards on the record: up next (green), valuation, tabs content */
#s-selfd .ldmain,#s-stockd .ldmain{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap);align-items:start}
@media (min-width:1560px) and (min-height:500px){ #s-selfd .ldmain,#s-stockd .ldmain{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} #s-selfd .ldmain>*,#s-stockd .ldmain>*{grid-column:1/-1} #s-selfd .ldmain>.nextcard,#s-stockd .ldmain>.nextcard{grid-column:1} #s-selfd .ldmain>#ldVal,#s-stockd .ldmain>#ldVal{grid-column:2;grid-row:span 3} }
body:not(.split-leads) #s-selfd .ldmain,body:not(.split-stock) #s-stockd .ldmain{grid-template-columns:minmax(0,1fr)!important} body:not(.split-leads) #s-selfd .ldmain>*,body:not(.split-stock) #s-stockd .ldmain>*{grid-column:1/-1!important;grid-row:auto!important}
#s-selfd .nextcard,#s-stockd .nextcard{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;background:var(--hi);border:0;border-radius:var(--r-card);box-shadow:none;padding:66px 20px 20px;margin:var(--s-2) 0 0;text-align:left}
#s-selfd .nextcard::before,#s-stockd .nextcard::before{content:"Up next";position:absolute;left:20px;top:20px;font:500 var(--t-h2)/1 var(--font);color:var(--ink)}
#s-selfd .nextcard>b,#s-stockd .nextcard>b,#s-selfd .nextcard>b.ilin,#s-stockd .nextcard>b.ilin{flex-basis:100%;display:block;font:500 var(--t-body)/1.3 var(--font);color:var(--ink)}
#s-selfd .nextcard>span,#s-stockd .nextcard>span{flex-basis:100%;display:block;color:var(--ink-2);font-size:var(--t-small);line-height:1.5;margin:-6px 0 4px}
#s-selfd .nextcard .cta,#s-stockd .nextcard .cta{margin:0;width:auto;min-height:44px}
#s-selfd .nextcard .navbtn,#s-stockd .nextcard .navbtn{display:inline-flex;align-items:center;width:auto;min-height:44px;padding:0 18px;margin:0;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 25%,transparent);font:400 var(--t-small)/1 var(--font);color:var(--ink);text-decoration:none}
#s-selfd .nextcard .btnrow,#s-stockd .nextcard .btnrow,#s-selfd .nextcard .btnrow3,#s-stockd .nextcard .btnrow3{display:flex;flex-wrap:wrap;gap:8px;flex-basis:100%}
#s-selfd .nextcard .btnrow .cta,#s-stockd .nextcard .btnrow .cta,#s-selfd .nextcard .btnrow3 button,#s-stockd .nextcard .btnrow3 button{flex:none;width:auto}
#s-selfd #ldVal,#s-stockd #ldVal{margin-top:var(--s-2)!important}
#s-selfd .valcard,#s-stockd .valcard{background:color-mix(in srgb,var(--chip) 55%,transparent);border:0;border-radius:var(--r-card);box-shadow:none;padding:20px 22px 22px}
#s-selfd .vhead,#s-stockd .vhead{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding-bottom:var(--s-3)}
#s-selfd .vhead b,#s-stockd .vhead b{font:500 var(--t-h2)/1.2 var(--font)}
#s-selfd .vhead>div>span,#s-stockd .vhead>div>span{display:block;font-size:var(--t-label);color:var(--ink-3);margin-top:4px}
#s-selfd .vhead .sep,#s-stockd .vhead .sep{display:none}
#s-selfd .vhead .vconf::before,#s-stockd .vhead .vconf::before{content:", "}
#s-selfd .vhead .navbtn,#s-stockd .vhead .navbtn{min-height:40px;padding:0 16px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line);font:400 var(--t-small)/1 var(--font)}
#s-selfd .vconf,#s-stockd .vconf{color:inherit;font-weight:400;text-transform:none}
#s-selfd .vrow,#s-stockd .vrow{display:grid;grid-template-columns:1fr auto;column-gap:var(--s-4);align-items:baseline;border:0;border-bottom:1px solid var(--line);padding:12px 0 10px;background:none;width:100%;text-align:left;font:inherit;color:inherit}
#s-selfd .vrow span,#s-stockd .vrow span{grid-column:1;font-size:var(--t-label);color:var(--ink-3)}
#s-selfd .vrow b,#s-stockd .vrow b{grid-column:2;grid-row:1 / span 2;align-self:center;font:500 var(--t-body)/1.3 var(--font);color:var(--ink);text-align:right}
#s-selfd .vrow small,#s-stockd .vrow small{grid-column:1;font-size:var(--t-body);color:var(--ink);margin-top:3px}
#s-selfd .vrow.muted b,#s-stockd .vrow.muted b{color:var(--ink-2)}
#s-selfd .vrow em,#s-stockd .vrow em{font-style:normal;color:var(--ink-2)}
#s-selfd .voffer,#s-stockd .voffer{background:none;border:0;border-radius:0;padding:0;margin-top:var(--s-4)}
#s-selfd .voffer>div:first-child,#s-stockd .voffer>div:first-child{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
#s-selfd .voffer>div:first-child span,#s-stockd .voffer>div:first-child span{font-size:var(--t-small);color:var(--ink-2)}
#s-selfd .voffer>div:first-child b,#s-stockd .voffer>div:first-child b{font:500 var(--t-body)/1.3 var(--font);color:var(--ink)}
#s-selfd .voffer .vrow.vgets,#s-stockd .voffer .vrow.vgets{display:flex;flex-direction:column-reverse;align-items:center;text-align:center;border:0;margin:14px 0 6px;padding:26px 16px;border-radius:var(--r-card);background:var(--chip)}
#s-selfd .voffer .vrow.vgets b,#s-stockd .voffer .vrow.vgets b{font:400 var(--t-figure)/1 var(--font);letter-spacing:-.02em;color:var(--green)}
#s-selfd .voffer .vrow.vgets span,#s-stockd .voffer .vrow.vgets span{font-size:var(--t-small);color:var(--ink-2);margin-top:10px}
#s-selfd .vcond,#s-stockd .vcond{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0;background:none}
#s-selfd .vcond span,#s-stockd .vcond span{background:var(--chip);padding:5px 11px;border-radius:var(--r-pill);font-size:var(--t-label);border:0;color:var(--ink)}
#s-selfd .vcond svg,#s-stockd .vcond svg{display:none}
#s-selfd .vcond .bad,#s-stockd .vcond .bad{color:var(--bad)}
#s-selfd .vprofit,#s-stockd .vprofit{display:grid;grid-template-columns:1fr auto;column-gap:var(--s-4);border-bottom:1px solid var(--line);padding:12px 0;background:none;font-size:var(--t-small);color:var(--ink-2)}
#s-selfd .vprofit b,#s-stockd .vprofit b{grid-column:2;grid-row:1;font:500 var(--t-body)/1.3 var(--font);color:var(--ink);text-align:right}
#s-selfd .vprofit small,#s-stockd .vprofit small{grid-column:1;font-size:var(--t-label);color:var(--ink-3)}
#s-selfd .vgood,#s-stockd .vgood,#s-selfd .vwarn,#s-stockd .vwarn{display:inline-flex;align-items:center;gap:6px;background:var(--hi);border:0;margin-top:12px;padding:7px 13px;border-radius:var(--r-pill);font:500 var(--t-label)/1.2 var(--font);color:var(--ink)}
#s-selfd .vwarn,#s-stockd .vwarn{background:var(--score-lo)}
#s-selfd .vgood svg,#s-stockd .vgood svg,#s-selfd .vwarn svg,#s-stockd .vwarn svg{width:13px;height:13px}
#s-selfd .vbtns,#s-stockd .vbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-4)}
#s-selfd .vbtns .cta,#s-stockd .vbtns .cta{flex:none;width:auto}
#s-selfd .vbtns .cta.secondary,#s-stockd .vbtns .cta.secondary{box-shadow:inset 0 0 0 1px var(--line)}
#s-selfd .vtips,#s-stockd .vtips{background:none;border:0;padding:0;margin-top:var(--s-4);font-size:var(--t-small);color:var(--ink-2)}
#s-selfd .ldside,#s-stockd .ldside{margin-top:var(--s-6)}
#s-selfd .segctl.ltabs,#s-stockd .segctl.ltabs{margin:var(--s-6) 0 var(--s-3)!important}
#s-selfd #ltab,#s-stockd #skTimeline{background:color-mix(in srgb,var(--chip) 55%,transparent);border-radius:var(--r-card);padding:6px 20px 20px}
#s-selfd .ppwarn,#s-stockd .ppwarn,#s-selfd .alert,#s-stockd .alert{background:color-mix(in srgb,var(--chip) 55%,transparent)!important;border:0;border-radius:var(--r-tile);padding:var(--s-3) var(--s-4);color:var(--ink)}
/* activity */
#s-selfd .tlbar,#s-stockd .tlbar{display:flex;align-items:center;gap:8px;margin:var(--s-3) 0 var(--s-2)}
#s-selfd .tlfilter,#s-stockd .tlfilter{background:transparent!important;border:0!important;box-shadow:inset 0 0 0 1px var(--line)!important;border-radius:var(--r-pill)!important;padding:0 14px!important;min-height:38px;color:var(--ink)!important;font:400 var(--t-label)/1 var(--font)!important}
#s-selfd .tlbar .navbtn,#s-stockd .tlbar .navbtn,#s-selfd .tlacts button,#s-stockd .tlacts button{min-height:38px;padding:0 13px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line);font:400 var(--t-label)/1 var(--font);color:var(--ink)}
#s-selfd .tlmonth,#s-stockd .tlmonth{font:500 var(--t-small)/1.3 var(--font);color:var(--ink);margin:var(--s-5) 0 var(--s-2)}
#s-selfd .tlcard,#s-stockd .tlcard{background:var(--chip)!important;border:0!important;border-radius:var(--r-tile)!important;box-shadow:none!important;padding:14px 16px!important;margin:0 0 6px!important}
#s-selfd .tlic,#s-stockd .tlic{background:var(--hi-2)!important;color:var(--green)!important;border-radius:50%!important}
#s-selfd .tlhead,#s-stockd .tlhead{font:500 var(--t-body)/1.35 var(--font)}
#s-selfd .tldate,#s-stockd .tldate{background:var(--tile)!important;border:0!important;border-radius:var(--r-pill)!important;padding:4px 10px!important;font:400 var(--t-label)/1 var(--font)!important;color:var(--ink-2)!important}
#s-selfd .tlwho,#s-stockd .tlwho{font-size:var(--t-label);color:var(--ink-3)}
#s-selfd .tltext,#s-stockd .tltext{font-size:var(--t-body);color:var(--ink);margin-top:6px}
#s-selfd .tlsys,#s-stockd .tlsys{color:var(--ink-3);font-size:var(--t-label)}
@media (max-width:859px),(max-height:499px){
  #s-selfd #selfdBody,#s-stockd #stockdBody{padding-top:0}
  #s-selfd .lcontact,#s-stockd .lcontact{order:2;margin:var(--s-5) 0 0;gap:10px}
  #s-selfd .lcontact button,#s-stockd .lcontact button{width:var(--circ);height:var(--circ);padding:0;justify-content:center;font-size:0}
  #s-selfd .lcontact button span,#s-stockd .lcontact button span{display:none}
  #s-selfd .lcontact .lhshare,#s-stockd .lcontact .lhshare,#s-selfd .lcontact .lhmore,#s-stockd .lcontact .lhmore{display:none!important}
  #s-selfd .lh1,#s-stockd .lh1{gap:16px}
  #s-selfd .lav.big,#s-stockd .lav.big{width:66px;height:66px}
  #s-selfd .track,#s-stockd .track{padding:18px 16px 16px}
  #s-selfd .trbar,#s-stockd .trbar{height:52px}
  #s-selfd .trdot,#s-stockd .trdot{width:40px;height:40px}
  #s-selfd .trlbl span,#s-stockd .trlbl span{width:52px;font-size:12px}
  body:has(#s-selfd:not([hidden])),body:has(#s-stockd:not([hidden])){background:var(--sheen) fixed,var(--panel)}
  #s-selfd>.bar,#s-stockd>.bar{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------- seller's self assessment ---------- */
#s-cust{background:transparent}
body:has(#s-cust:not([hidden])){background:var(--sheen) fixed,var(--panel)}
#s-cust .pubbrand{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) 0 var(--s-2)}
#s-cust .pubbrand img{max-height:36px;width:auto}
#s-cust .pubbrand .pubname{font:600 20px/1.1 var(--font);color:var(--ink)}
#s-cust .pubbrand .pubtag{font-size:var(--t-small);color:var(--ink-3);border-left:1px solid var(--line);padding-left:var(--s-3)}
#s-cust .custstep{display:flex;flex-direction:column;background:transparent;padding:var(--s-3) 16px var(--s-2)}
#s-cust .custstep #custStepLbl{display:block;order:-1;font:400 var(--t-label)/1.3 var(--font);color:var(--ink-2);margin:0 0 var(--s-2)}
#s-cust .progress{height:10px;background:color-mix(in srgb,var(--ink) 9%,transparent);border-radius:var(--r-pill)}
#s-cust .progress i{background:linear-gradient(90deg,var(--green),var(--green-2));border-radius:var(--r-pill)}
#s-cust .custhead{margin:var(--s-6) 0 var(--s-5)}
#s-cust .custhead h2{font:500 var(--t-display)/1.12 var(--font);letter-spacing:var(--track-title);color:var(--ink)}
#s-cust .custhead p{font-size:var(--t-body);line-height:1.55;color:var(--ink-2);margin-top:var(--s-3);max-width:34em}
#s-cust .cgroup{background:color-mix(in srgb,var(--chip) 55%,transparent);border:0;border-radius:var(--r-card);box-shadow:none;padding:20px;display:grid;gap:var(--s-4)}
#s-cust .cfield{padding:0;display:block}
#s-cust .cfield+.cfield{border-top:0}
#s-cust .cfield span{display:block;font:400 11.5px/1.3 var(--font);color:var(--ink-3);margin:0 0 6px 4px}
#s-cust .cfield input,#s-cust .cfield textarea{width:100%;min-height:var(--ctl-h);background:var(--chip);border:0;border-radius:var(--r-pill);padding:0 20px;font:400 16px var(--font);color:var(--ink)}
#s-cust .cfield textarea{border-radius:var(--r-tile);padding:14px 18px}
#s-cust .cfield input:focus,#s-cust .cfield textarea:focus{outline:2px solid var(--green);outline-offset:0}
#s-cust .qcard{background:color-mix(in srgb,var(--chip) 55%,transparent);border:0;border-radius:var(--r-card);box-shadow:none;padding:20px;margin:0 0 var(--gap)}
#s-cust .qq{font:500 17px/1.35 var(--font);color:var(--ink)}
#s-cust .qh{font-size:var(--t-small);color:var(--ink-2);margin-top:4px}
#s-cust .qopts{display:flex;gap:8px;background:none;box-shadow:none;border-radius:0;padding:0;margin-top:var(--s-4)}
#s-cust .qopts button{flex:1;min-height:48px;padding:0 12px;background:transparent;border:0;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:400 var(--t-body)/1 var(--font)}
#s-cust .qopts button[aria-pressed="true"]{background:var(--solid);color:var(--on-solid);box-shadow:none;font-weight:500}
#s-cust .qcard textarea{margin-top:var(--s-3);background:var(--chip);border:0;border-radius:var(--r-tile)}
#s-cust .photogrid{gap:var(--gap)}
#s-cust .pslot{background:color-mix(in srgb,var(--chip) 55%,transparent);border:0;border-radius:var(--r-card);box-shadow:none;color:var(--ink-2)}
#s-cust .pslot svg{width:40px;height:40px;padding:10px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
#s-cust .pslot b{font:500 var(--t-body) var(--font);color:var(--ink)} #s-cust .pslot small{color:var(--ink-2);font-size:var(--t-label)}
#s-cust .pslot.has{background:none}
#s-cust .pslot .ok{background:var(--chip);color:var(--ink);border-radius:var(--r-pill);font:500 var(--t-micro)/1 var(--font)}
#s-cust .custnav{background:linear-gradient(transparent,color-mix(in srgb,var(--panel) 90%,transparent) 35%);border:0;box-shadow:none}
#s-cust .custnav .cta{flex:1}
#s-cust .custnav .cta.secondary{flex:0 0 32%;background:color-mix(in srgb,var(--chip) 60%,transparent)}
#s-cust .cnote{color:var(--ink-2);font-size:var(--t-small)}
#s-selfd .lcontact button,#s-stockd .lcontact button{flex-direction:row!important;flex:none}
#s-selfd .lcontact button span,#s-stockd .lcontact button span{display:inline}
@media (max-width:859px),(max-height:499px){ #s-selfd .lcontact button span,#s-stockd .lcontact button span{display:none} }
#s-selfd .nextcard .navbtn+.btnrow,#s-stockd .nextcard .navbtn+.btnrow,#s-selfd .nextcard .btnrow,#s-stockd .nextcard .btnrow{margin-top:2px}
/* design only: everything below keeps what the screens showed before */
.lrow{grid-template-columns:auto 1fr;grid-template-areas:"av main" "foot fig"}
#s-selfd .vai,#s-stockd .vai{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:5px 11px;border-radius:var(--r-pill);background:var(--chip);color:var(--ink);font:500 var(--t-label)/1 var(--font)}
#s-selfd .vai svg,#s-stockd .vai svg{width:13px;height:13px;color:var(--green)}
#s-selfd .voffer .vrow.vgets small,#s-stockd .voffer .vrow.vgets small{display:block;grid-column:auto;font-size:var(--t-small);color:var(--ink-2);margin-top:6px;order:-1}
#s-selfd .lcontact .lhshare,#s-stockd .lcontact .lhshare,#s-selfd .lcontact .lhmore,#s-stockd .lcontact .lhmore{display:none!important}
@media (min-width:860px) and (min-height:500px){ body.split-leads #s-selfd .lcontact .lhshare,body.split-stock #s-stockd .lcontact .lhshare,body.split-leads #s-selfd .lcontact .lhmore,body.split-stock #s-stockd .lcontact .lhmore{display:inline-flex!important} }
#s-cust .custperks{display:grid;gap:12px;background:color-mix(in srgb,var(--chip) 55%,transparent);border:0;border-radius:var(--r-card);padding:18px 20px;margin:0 0 var(--gap)}
#s-cust .custperks div{display:flex;align-items:center;gap:12px;font:500 var(--t-body)/1.3 var(--font);color:var(--ink)}
#s-cust .custperks .ic,#s-cust .custperks svg{flex:none;width:34px;height:34px;padding:8px;border-radius:50%;background:var(--hi);color:var(--green);box-sizing:border-box}
.lrow .lrmain{justify-self:stretch;text-align:left;margin:0;width:auto}
.lrow{grid-template-columns:46px minmax(0,1fr) auto;grid-template-areas:"av main main" "foot foot fig"}
/* pass 1 bug fixes */
@media (min-width:860px) and (min-height:500px){ body.split-leads #s-self .chips,body.split-stock #s-stock .chips{margin:var(--s-3) -18px 0;padding:2px 18px} }
#s-self .listtools .navbtn,#s-stock .listtools .navbtn{min-height:34px;padding:0 14px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line);font:400 var(--t-label)/1 var(--font)!important;color:var(--ink)}
#s-selfd .lcontact button,#s-stockd .lcontact button,#s-selfd .lcontact .lhshare,#s-stockd .lcontact .lhshare,#s-selfd .lcontact .lhmore,#s-stockd .lcontact .lhmore{margin:0!important;align-self:center}
#s-selfd .vcond span,#s-stockd .vcond span{border-radius:14px;line-height:1.35}
#s-selfd .vprofit,#s-stockd .vprofit{display:block;position:relative;padding-right:96px}
#s-selfd .vprofit b,#s-stockd .vprofit b{position:absolute;right:0;top:12px}
#s-selfd .vprofit small,#s-stockd .vprofit small{display:block;margin-top:3px}
#s-selfd .vprofit .tipi,#s-stockd .vprofit .tipi,#s-selfd .vprofit .infob,#s-stockd .vprofit .infob{display:inline-flex;vertical-align:-2px}
#s-selfd .tlbar,#s-stockd .tlbar{flex-wrap:wrap;gap:6px}
#s-selfd .tlbar .fa,#s-stockd .tlbar .fa{flex:1;min-width:0}
#s-selfd .tlfilter,#s-stockd .tlfilter,#s-selfd .tlbar .navbtn,#s-stockd .tlbar .navbtn{min-height:34px!important;padding:0 11px!important;font-size:12.5px!important}
#s-selfd .tlbar .navbtn svg,#s-stockd .tlbar .navbtn svg{width:13px;height:13px}
@media (max-width:859px),(max-height:499px){
  .tabbar{background:color-mix(in srgb,var(--chip) 96%,transparent)}
  #s-selfd .lfields,#s-stockd .lfields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4) var(--s-5)}
}
#s-cust .custnav{background:color-mix(in srgb,var(--panel) 88%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
#s-cust .custnav .cta.secondary{background:var(--chip)}
@media (max-width:859px),(max-height:499px){ #s-selfd .tlbar .fa,#s-stockd .tlbar .fa{flex-basis:100%;height:0} }
#s-selfd .lcontact .lhshare,#s-stockd .lcontact .lhshare{width:40px;height:40px;padding:0!important;justify-content:center}
#s-selfd .lcontact .lhshare span,#s-stockd .lcontact .lhshare span{display:none!important}
@media (min-width:860px) and (max-width:1199px) and (min-height:500px){
  #s-selfd .lcontact,#s-stockd .lcontact{gap:6px}
  #s-selfd .lcontact button,#s-stockd .lcontact button{padding:0 12px 0 10px;gap:6px}
  #s-selfd .lcontact .lhshare,#s-stockd .lcontact .lhshare,#s-selfd .lcontact .lhmore,#s-stockd .lcontact .lhmore{width:38px!important;height:38px!important;min-width:38px!important;padding:0!important}
  body.split-leads #s-selfd>#selfdBody,body.split-stock #s-stockd>#stockdBody{padding:20px 20px 40px}
}
/* List / Pipeline switches the view, so it's a segmented switch, not a filter pill */
#s-self .segctl.lswitch,#s-stock .segctl.lswitch,#s-pipe .segctl.lswitch{display:flex;gap:0;padding:4px;margin:var(--s-2) 0 var(--s-3);background:color-mix(in srgb,var(--ink) 8%,transparent);border-radius:var(--r-pill);overflow:visible}
#s-self .segctl.lswitch button,#s-stock .segctl.lswitch button,#s-pipe .segctl.lswitch button{flex:1;min-height:40px;padding:0 16px;box-shadow:none!important;background:transparent!important;color:var(--ink-2);font:500 var(--t-body)/1 var(--font)}
#s-self .segctl.lswitch button[aria-pressed="true"],#s-stock .segctl.lswitch button[aria-pressed="true"],#s-pipe .segctl.lswitch button[aria-pressed="true"]{background:var(--chip)!important;color:var(--ink);box-shadow:0 1px 3px rgba(17,19,21,.12)!important}
:root[data-theme="dark"] #s-self .segctl.lswitch button[aria-pressed="true"],:root[data-theme="dark"] #s-stock .segctl.lswitch button[aria-pressed="true"],:root[data-theme="dark"] #s-pipe .segctl.lswitch button[aria-pressed="true"]{background:#40454C!important;box-shadow:none!important}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #s-self .segctl.lswitch button[aria-pressed="true"],:root:not([data-theme="light"]) #s-stock .segctl.lswitch button[aria-pressed="true"],:root:not([data-theme="light"]) #s-pipe .segctl.lswitch button[aria-pressed="true"]{background:#40454C!important;box-shadow:none!important} }
/* phone tab bar: nearly full width, the five tabs spread evenly */
@media (max-width:859px),(max-height:499px){
  .tabbar{left:16px!important;right:16px!important;transform:none;width:auto;max-width:460px;margin:0 auto;padding:7px 10px!important}
  .tabbar .in{justify-content:space-between;gap:0;width:100%}
  .tab{width:54px;height:54px}
}
@media (max-width:859px),(max-height:499px){ .tabbar{box-shadow:inset 0 0 0 1px var(--line),var(--shadow-pop)} }

/* ===================================================================================================================
   web-11.0 pass 2: the same design across every other screen. Shared components first, then screen tweaks.
   Design only: no markup or behaviour changes.
   =================================================================================================================== */
/* grouped rows: a rounded tile, hairlines between rows */
.group{background:var(--tile);border-radius:var(--r-card);border:0;box-shadow:none}
.cell{background:transparent;padding:14px 18px;min-height:52px}
.cell+.cell::before{left:18px;right:18px;background:var(--rule)}
.cell .lbl{font-weight:400}
.numcard,.kpi,.pkpi,.rcard,.tblwrap,.wkgrid,.mgrid,.acard,.pmonth{background:var(--tile);border-radius:var(--r-card);border:0;box-shadow:none}
.numcard{padding:8px 20px}
.numcard div{border-bottom-color:var(--rule)}
.numcard .big b{font:500 22px var(--font);letter-spacing:-.01em}
.kpi,.pkpi{padding:16px 18px} .kpi b,.pkpi b{font:500 26px/1.15 var(--font);letter-spacing:-.01em}
.notebox{color:var(--ink-2)}
.alert,.ppwarn{border-radius:var(--r-tile)!important;border:0!important}
.sectionlabel{font:500 var(--t-small)/1.3 var(--font);color:var(--ink);letter-spacing:0;text-transform:none}
/* filters and option pills everywhere: outlined pills, the chosen one solid */
.chip{background:transparent;border:0;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line);padding:0 16px;min-height:38px;font:400 var(--t-small)/1 var(--font);color:var(--ink-2)}
.chip[aria-current="true"],.chip.on{background:var(--solid);color:var(--on-solid);box-shadow:none;font-weight:500}
.chip .n{background:none;color:inherit;opacity:.6}
.opts button,.opts .opt,.qopts button{border-radius:var(--r-pill)!important;background:transparent!important;border:0!important;box-shadow:inset 0 0 0 1px var(--line)!important;color:var(--ink)!important;font-weight:400!important}
.opts button[aria-pressed="true"],.opts .opt.on,.opts .opt[aria-pressed="true"],.qopts button[aria-pressed="true"]{background:var(--solid)!important;color:var(--on-solid)!important;box-shadow:none!important;font-weight:500!important}
/* switches inside a page (Week / Month, Deposit / Full payment, tabs on a car): a segmented track */
.segctl:not(.ltabs):not(.lswitch){background:color-mix(in srgb,var(--ink) 8%,transparent);border-radius:var(--r-pill);padding:4px;border:0;gap:0}
.segctl:not(.ltabs):not(.lswitch) button{border-radius:var(--r-pill);min-height:38px;font:500 var(--t-small)/1 var(--font);color:var(--ink-2);box-shadow:none}
.segctl:not(.ltabs):not(.lswitch) button[aria-pressed="true"]{background:var(--chip);color:var(--ink);box-shadow:0 1px 3px rgba(17,19,21,.12)}
:root[data-theme="dark"] .segctl:not(.ltabs):not(.lswitch) button[aria-pressed="true"]{background:#40454C;box-shadow:none}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .segctl:not(.ltabs):not(.lswitch) button[aria-pressed="true"]{background:#40454C;box-shadow:none} }
/* the car's tabs read like the lead's: pill tabs */
.segctl.stabs{display:flex!important;gap:8px;background:none!important;padding:0!important;overflow-x:auto;scrollbar-width:none}
.segctl.stabs button{flex:none;min-height:42px!important;padding:0 20px!important;background:transparent!important;box-shadow:inset 0 0 0 1px var(--line)!important;color:var(--ink-2)!important;font:400 var(--t-body)/1 var(--font)!important}
.segctl.stabs button[aria-pressed="true"]{background:var(--solid)!important;color:var(--on-solid)!important;box-shadow:none!important;font-weight:500!important}
.segctl.stabs .tabn{background:none;color:inherit;opacity:.6}
/* tags */
.badge{background:var(--chip)!important;color:var(--ink)!important;border-radius:var(--r-pill);font:400 var(--t-label)/1 var(--font)!important;padding:6px 11px!important;border:0!important}
.pill,.ptrun,.abtn{border-radius:var(--r-pill)}
button.pill,.ptrun,.abtn{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:400 var(--t-label)/1 var(--font);padding:0 14px}
/* pop-ups: a rounded panel, pinned buttons on the panel colour */
.sheet{background:var(--panel)!important;border-radius:28px 28px 0 0;padding-left:20px!important;padding-right:20px!important}
.sheet h3{font:500 24px/1.15 var(--font);letter-spacing:-.01em}
.sheet .sub{color:var(--ink-2)}
.sheet .sheetfoot{background:var(--panel)}
@media (min-width:860px) and (min-height:500px){ .sheet{border-radius:28px} }
.dlg{background:var(--panel);border-radius:28px}
.pop{background:var(--panel)!important;border-radius:var(--r-card)!important;border:0!important;box-shadow:var(--shadow-pop)!important}
.toast{border-radius:var(--r-pill)!important;background:var(--solid)!important;color:var(--on-solid)!important}
/* fields in rows and forms */
.cfield input,.cfield textarea,.liinput{background:var(--chip);border:0;border-radius:var(--r-pill);padding:0 18px;min-height:48px}
.cfield textarea{border-radius:var(--r-tile);padding:12px 16px}
.cfield span{font-weight:400;color:var(--ink-3)}
.cgroup{background:var(--tile);border-radius:var(--r-card)}
/* page headers with a back button: circle back, title centred */
.bar:not(.tbar) .navbtn:first-child{min-height:40px;padding:0 16px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line);font:400 var(--t-small)/1 var(--font)}
/* ---------- screens ---------- */
/* car page: same sheen panel as the lead */
@media (min-width:860px) and (min-height:500px){
  body.split-stock #s-stock,body.split-stock #s-stock{background:transparent}
  body.split-stock #s-stockd>#stockdBody,body.drawer-stock #s-stockd>#stockdBody{background:var(--sheen);border-radius:var(--r-panel);padding:22px 24px 40px}
  body.drawer-stock #s-stockd,body.drawer-lead #s-selfd,body.drawer-stock #s-stockd{background:var(--panel);border-radius:var(--r-panel) 0 0 var(--r-panel)}
  #s-pipe,#s-cal,#s-stock,#s-tasks,#s-home,#s-reports,#s-plat,#s-settings,#s-prices,#s-reg{margin:12px 12px 12px 0!important;background:var(--panel);border-radius:var(--r-panel);min-height:calc(100vh - 24px)}
  body.split-stock #s-stock{margin:0!important;top:12px!important;bottom:12px;border-radius:var(--r-panel);background:var(--panel)}
}
#s-stockd .lhero{background:var(--tile);border-radius:var(--r-card);padding:20px}
#s-stockd .lname{font:500 26px/1.15 var(--font);letter-spacing:-.01em}
#s-stockd .plate{font-weight:600;letter-spacing:.08em;border:1.2px solid var(--ink);background:transparent;border-radius:var(--r-pill);padding:5px 11px}
.sstep{border-radius:var(--r-tile)}
/* pipeline */
.acard{padding:14px 16px}
.bcol{background:var(--tile);border-radius:var(--r-card);border:0}
.ptlrow{border-radius:var(--r-tile)}
/* calendar */
.mgrid,.wkgrid{border:0}
.calday[aria-current="true"],.calday.today b,.mday.today b{background:var(--solid);color:var(--on-solid)}
/* tasks */
.tktable{font-size:var(--t-small)} .tktable th{background:transparent;font-weight:500;color:var(--ink-3)}
.tktable td{border-bottom-color:var(--rule)}
.tkstart{border-radius:var(--r-pill)!important;background:var(--solid)!important;color:var(--on-solid)!important}
.taskrow{border-radius:var(--r-tile)}
/* settings */
.setmenu{background:var(--tile);border-radius:var(--r-card);border:0}
.mnicon{background:transparent!important;box-shadow:inset 0 0 0 1px var(--line);border-radius:50%!important;color:var(--ink)!important}
/* sign in */
.logincard{background:var(--tile);border-radius:28px;border:0;box-shadow:none}
.liinput{background:var(--chip)!important;border:0!important;border-radius:var(--r-pill)!important}
/* customer pages: proposal, Form 9 signing, seller's page */
#s-offer{background:transparent}
body:has(#s-offer:not([hidden])){background:var(--sheen) fixed,var(--panel)}
.offhero,.sgpanel,.spcar,.spask{background:color-mix(in srgb,var(--chip) 55%,transparent)!important;border-radius:var(--r-card)!important;border:0!important;box-shadow:none!important}
.sgcall{border-radius:var(--r-pill)}
/* For sale rows keep their own layout (photo or stock number, car, details); styled as cards */
#stockBody .lrow{display:flex!important;align-items:center;gap:14px;padding:14px 16px}
#stockBody .lrow .lbl{flex:1;min-width:0}
#stockBody .lrow .meta{font-size:var(--t-label);color:var(--ink-2);margin-top:3px}
#stockBody .group{display:grid;gap:6px;background:none}
#stockBody .lrow.sel{background:var(--hi)}
.tkpickbar .navbtn{min-height:34px;padding:0 14px!important;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line);font:400 var(--t-label)/1 var(--font)!important;color:var(--ink)}
/* the floating tab bar is 68px tall and sits 12px up: everything that rests on it (footers, toasts, task panel) clears it */
@media (max-width:859px),(max-height:499px){
  :root{--tabh:88px}
  .tabbar .in{height:auto!important}
  .footbar,.stickyfoot{border-radius:22px 22px 0 0}
}
#stockBody .lrow{background:var(--tile)!important;border-radius:var(--r-card)!important}
#stockBody .lrow.sel{background:var(--hi)!important}
.stickyfoot,.footbar{background:color-mix(in srgb,var(--panel) 92%,transparent)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:0!important;box-shadow:none!important}
/* labels in sentence case, like the reference */
.stbl th,.mwd,.cdi span,.ssphase,.enqnotes span,.pvtag,.kyhead{text-transform:none!important;letter-spacing:0!important;font-weight:500!important;font-size:12.5px!important}
.ssphase{font-size:var(--t-small)!important;color:var(--ink)!important}
.cgroup .cfield+.cfield,.cgroup .cfield{border-top:0!important;border-bottom:0!important}
.cgroup .cfield::before{display:none}
/* pipeline board: neutral like the rest, the one green for the stage dot */
.bcount{color:var(--ink)!important;background:var(--chip)!important;border-radius:var(--r-pill)!important;font-weight:500!important;padding:2px 8px!important}
.bhead .bdot,.bctop .bdot{background:var(--green)!important}
.bcol .bcard,.bcard{background:var(--chip);border:0;border-radius:var(--r-tile);box-shadow:none}
.bempty{border-radius:var(--r-tile)!important}
#regBody .cell .badge{min-width:76px;justify-content:center;text-align:center;flex:none}
.setmenu{padding:6px!important}
.setmenu .cell{border-radius:var(--r-tile)}
.setmenu .cell+.cell::before{left:14px;right:14px}
.setmenu .cell[aria-current="true"],.setmenu .cell.on,.setmenu .cell.sel{background:var(--hi)!important}
.setmenu .cell[aria-current="true"]::before,.setmenu .cell[aria-current="true"]+.cell::before{display:none}
@media (min-width:860px) and (min-height:500px){
  body.navshown #s-buy,body.navshown #s-check,body.navshown #s-report,body:not(.split-stock):not(.drawer-stock).navshown #s-stockd,body:not(.split-leads):not(.drawer-lead).navshown #s-selfd,body:not(.split-stock):not(.drawer-stock).navshown #s-stockd{margin:12px 12px 12px 0!important;max-width:none!important;background:var(--panel);border-radius:var(--r-panel);min-height:calc(100vh - 24px);padding-left:max(28px,calc((100% - 860px)/2))!important;padding-right:max(28px,calc((100% - 860px)/2))!important}
  body.navshown #s-check .bar,body.navshown #s-buy .bar,body.navshown #s-report .bar{background:var(--panel);border-radius:var(--r-panel) var(--r-panel) 0 0}
  .footbar{left:calc(var(--side) + 0px)!important;right:12px!important;bottom:12px!important;border-radius:0 0 var(--r-panel) var(--r-panel)}
}
@media (min-width:860px) and (min-height:500px){ .footbar{bottom:0!important;border-radius:22px 22px 0 0;background:var(--panel)!important;box-shadow:0 -1px 0 var(--rule)!important} }
/* Select mode: the tick takes the photo's place */
.lrow.selecting{background:var(--tile)!important}
.lrow.selecting .lav{display:none}
.lrow .bulkck{grid-area:av;align-self:center;justify-self:center;width:28px;height:28px;border-radius:50%;margin:0}
@media (max-width:859px),(max-height:499px){ .segctl.stabs{margin-left:-16px!important;margin-right:-16px!important;padding:0 16px!important} }
/* lead cards are also .cell: keep their card background and padding over the shared row style */
.cell.lrow{background:var(--tile);padding:18px 18px 16px}
.cell.lrow:hover{background:color-mix(in srgb,var(--tile) 70%,var(--chip))}
body.split-leads .cell.lrow.sel,body.split-stock .cell.lrow.sel,.cell.lrow.sel{background:var(--hi)!important}

/* ===== web-11.1 fixes (Tom, 22 Oct 2026) ===== */
/* 1. bell centred in its circle */
.bellbtn{margin-right:0!important}
.bellbtn .bwrap{display:grid!important;place-items:center;width:22px;height:22px}
.bellbtn .bwrap svg{display:block;margin:0}
/* 2. Tasks: filters and search in the new style */
.tkdd{background:transparent!important;border:0!important;border-radius:var(--r-pill)!important;box-shadow:inset 0 0 0 1px var(--line)!important;min-height:38px;padding:0 14px!important;font:400 var(--t-small)/1 var(--font)!important;color:var(--ink)!important;display:inline-flex;align-items:center;gap:6px}
.tkdd.on,.tkdd[aria-pressed="true"]{background:var(--solid)!important;color:var(--on-solid)!important;box-shadow:none!important}
#s-tasks .searchbar,#s-tasks .tksearch,#s-tasks input[type=search]{border-radius:var(--r-pill)!important}
#s-tasks .searchbar{background:var(--chip)!important;border:0!important;box-shadow:none!important;min-height:44px;padding-left:16px}
.tkstart{min-height:44px}
/* 3 and 4. a page with a back button on a phone: back pill on its own line, the title under it */
@media (max-width:859px),(max-height:499px){
  .bar.tbar:has(>button.navbtn:first-child){flex-wrap:wrap;row-gap:10px;padding-top:12px}
  .bar.tbar:has(>button.navbtn:first-child)>button.navbtn:first-child{min-height:36px;padding:0 14px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line);font:400 var(--t-small)/1 var(--font)}
  .bar.tbar:has(>button.navbtn:first-child)>.t{flex:1 0 100%;order:2;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.1}
  .bar.tbar:has(>button.navbtn:first-child)>span.navbtn[aria-hidden]{display:none}
}
/* 5. computer menu collapsed: icons only, centred, the current one a green circle */
@media (min-width:860px) and (min-height:500px){
  html.sidemin .tabbar{padding:14px 10px 18px!important}
  html.sidemin .navgrp{display:block;height:1px;margin:14px 12px;background:var(--line);font-size:0;overflow:hidden}
  html.sidemin .navgrp:first-of-type{margin-top:18px}
  html.sidemin .tabbar .tab{justify-content:center;padding:0!important;gap:0;width:46px;min-height:46px;margin:0 auto;border-radius:50%;position:relative;font-size:0!important}
  html.sidemin .tabbar .tab .tlab{display:none}
  html.sidemin .tabbar .tab svg{margin:0}
  html.sidemin .tabbar .tab[aria-current="page"]{background:var(--hi)}
  html.sidemin .tabbar .tabcount{position:absolute!important;top:0;right:-2px;min-width:18px!important;height:18px!important;padding:0 4px!important;font:600 10.5px/18px var(--font)!important}
  html.sidemin .sidebrand{display:flex;justify-content:center;padding:8px 0 6px}
  html.sidemin .sidebrand .pubbrand{width:44px!important;overflow:hidden}
  html.sidemin .sidebrand .pubbrand img{height:24px!important;max-width:none!important}
  html.sidemin .sidebrand .bizinit{border-radius:50%;background:var(--solid);color:var(--on-solid);font-weight:600}
  html.sidemin .tabbar .tab .tabcount{top:-2px!important;right:-2px!important;background:var(--hi)!important;color:var(--ink)!important;margin:0!important}
}
/* 6. slimmer lead cards: photo, name and what's next, the figure top right, stage and car underneath */
.lrow,.cell.lrow{grid-template-columns:40px minmax(0,1fr) auto!important;grid-template-areas:"av main fig" "av foot foot"!important;gap:8px 12px!important;padding:12px 14px!important;align-items:center!important}
.lav{width:40px;height:40px;font-size:13.5px;box-shadow:0 0 0 2px var(--chip);align-self:start}
.lrow .name{font-size:17px}
.lrow .lrsub{margin-top:1px;font-size:var(--t-label)}
#s-self .leadsecs .group,#s-stock .leadsecs .group{gap:6px}
@media (min-width:860px) and (min-height:500px){ html.sidemin .tabbar,html.sidemin .tabbar .in{overflow:visible!important} }
/* web-11.2: the business logo centred in the menu; the icon when collapsed; rounded panels on every page */
@media (min-width:860px) and (min-height:500px){
  .sidebrand{display:flex;justify-content:center;align-items:center;padding:10px 6px 2px!important}
  .sidebrand .bizbrand{display:flex;justify-content:center;width:100%}
  .sidebrand .bizbrand img{max-width:100%;max-height:44px;width:auto;height:auto;display:block;margin:0 auto}
  .sidebrand .bizinit.bizicon{flex:none;min-width:44px;background:#fff!important;border-radius:12px!important;width:44px;height:44px;padding:5px;box-shadow:inset 0 0 0 1px var(--line)}
  .sidebrand .bizinit.bizicon img{width:100%;height:100%;object-fit:contain;display:block}
  html.sidemin .navgrp{display:block!important;height:1px!important;margin:14px 14px!important;background:var(--line)!important;font-size:0!important;line-height:0!important;color:transparent!important;overflow:hidden!important;padding:0!important}
  /* every page sits in a rounded panel with the same gap all round */
  #s-self,#s-stock,#s-pipe,#s-cal,#s-stock,#s-tasks,#s-home,#s-reports,#s-plat,#s-settings,#s-prices,#s-reg{border-radius:var(--r-panel)!important;overflow:clip}
  body:not(.split-leads) #s-pipe,body:not(.split-stock) #s-pipe,body:not(.split-stock) #s-stock,#s-cal,#s-tasks,#s-home,#s-reports,#s-plat,#s-settings,#s-prices,#s-reg{margin:12px 12px 12px 0!important;min-height:calc(100vh - 24px)}
}
.logoprev.icon{width:56px;height:56px;border-radius:14px;background:#fff;display:grid;place-items:center;padding:6px}
.logoprev.icon img{max-width:100%;max-height:100%}
/* web-11.3: show-password eye */
.pwwrap{position:relative;display:block;width:100%}
.pwwrap>input{width:100%;padding-right:48px!important;box-sizing:border-box}
.pweye2{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:none;border-radius:50%;color:var(--ink-3);display:grid;place-items:center;cursor:pointer;padding:0}
.pweye2:hover{color:var(--ink);background:var(--hover)}
/* ===== web-11.4: lead page on a computer: one header across the top, then two columns, one scroll ===== */
.lfic{display:none}
@media (min-width:860px) and (min-height:500px){
  #s-selfd .ldtop,#s-stockd .ldtop{margin-bottom:var(--s-5)}
  #s-selfd .lhero,#s-stockd .lhero{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px}
  #s-selfd .lh1,#s-stockd .lh1{grid-column:1;grid-row:1;display:grid!important;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"av id" "av facts";column-gap:20px;row-gap:12px;align-items:center}
  #s-selfd .lh1>.lav,#s-stockd .lh1>.lav{grid-area:av;width:76px;height:76px}
  #s-selfd .lhid,#s-stockd .lhid{grid-area:id;display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;min-width:0}
  #s-selfd .lname,#s-stockd .lname{font-size:30px}
  #s-selfd .ltags,#s-stockd .ltags{margin:0}
  #s-selfd .lfields,#s-stockd .lfields{grid-area:facts;display:flex!important;flex-wrap:wrap;gap:8px 24px;margin:0!important}
  #s-selfd .lf,#s-stockd .lf{display:flex;align-items:center;gap:8px}
  #s-selfd .lf dt,#s-stockd .lf dt{display:none}
  #s-selfd .lf dd,#s-stockd .lf dd{margin:0;font-size:var(--t-small)}
  #s-selfd .lfic,#s-stockd .lfic{display:inline-block;color:var(--ink-2);flex:none}
  #s-selfd .lcontact,#s-stockd .lcontact{grid-column:2;grid-row:1;margin:4px 0 0!important;flex-wrap:nowrap;justify-content:flex-end}
  #s-selfd #ldCall:not(:disabled),#s-stockd #skCall:not(:disabled){background:var(--green);color:var(--on-green,#fff);box-shadow:none}
  #s-selfd #ldCall:not(:disabled) svg,#s-stockd #skCall:not(:disabled) svg{color:#fff}
  #s-selfd .ldcols,#s-stockd .ldcols{gap:var(--gap)!important}
  #s-selfd .ldside,#s-stockd .ldside{margin-top:0!important}
  #s-selfd .ldside .segctl.ltabs,#s-stockd .ldside .segctl.ltabs{margin-top:0!important}
  #s-selfd .ldmain>.track:first-child,#s-stockd .ldmain>.track:first-child,#s-selfd .ldmain>:first-child,#s-stockd .ldmain>:first-child{margin-top:0}
}
/* not enough room beside the name for the actions: they go under it */
@media (min-width:860px) and (max-width:1399px) and (min-height:500px){
  body.split-leads #s-selfd .lhero,body.split-stock #s-stockd .lhero{grid-template-columns:minmax(0,1fr)}
  body.split-leads #s-selfd .lcontact,body.split-stock #s-stockd .lcontact{grid-column:1;grid-row:2;justify-content:flex-start;flex-wrap:wrap}
}
@media (min-width:860px) and (min-height:500px){
  #s-selfd .lhero,#s-stockd .lhero{grid-template-columns:auto minmax(0,1fr) auto!important;grid-template-areas:"av id act" "av facts facts";column-gap:20px;row-gap:12px;align-items:center}
  #s-selfd .lh1,#s-stockd .lh1{display:contents!important}
  #s-selfd .lh1>.lav,#s-stockd .lh1>.lav{grid-area:av;align-self:start}
  #s-selfd .lhid,#s-stockd .lhid{grid-area:id}
  #s-selfd .lfields,#s-stockd .lfields{grid-area:facts}
  #s-selfd .lcontact,#s-stockd .lcontact{grid-area:act;grid-column:auto;grid-row:auto;align-self:center}
}
@media (min-width:860px) and (max-width:1599px) and (min-height:500px){
  body.split-leads #s-selfd .lhero,body.split-stock #s-stockd .lhero{grid-template-columns:auto minmax(0,1fr)!important;grid-template-areas:"av id" "av facts" "av act"}
  body.split-leads #s-selfd .lcontact,body.split-stock #s-stockd .lcontact{justify-content:flex-start;flex-wrap:wrap}
}
@media (min-width:860px) and (min-height:500px){
  #s-selfd .ldmain,#s-stockd .ldmain{grid-template-columns:minmax(0,1fr)!important}
  #s-selfd .ldmain>*,#s-stockd .ldmain>*{grid-column:1/-1!important;grid-row:auto!important}
  body.split-leads #s-selfd>div,body.split-stock #s-stockd>div,body.split-leads #s-selfd>#selfdBody,body.split-stock #s-stockd>#stockdBody{max-width:none!important}
  body.split-leads #s-selfd .ldcols,body.split-stock #s-stockd .ldcols{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)!important}
}
:root[data-theme="dark"] #s-selfd #ldCall:not(:disabled),:root[data-theme="dark"] #s-stockd #skCall:not(:disabled){background:var(--green-2)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #s-selfd #ldCall:not(:disabled),:root:not([data-theme="light"]) #s-stockd #skCall:not(:disabled){background:var(--green-2)} }

/* ===================================================================================================================
   web-11.5: on a computer (mouse or trackpad: hover:hover and pointer:fine) the menu is a bar across the top (Tom, 22 Oct 2026). No sidebar: --side is 0 and everything
   that sat beside it now sits under the bar (--nav).
   =================================================================================================================== */
@media (min-width:860px) and (min-height:500px) and (hover:hover) and (pointer:fine){
  :root,:root.sidemin{--side:0px!important;--sidefree:0px!important;--nav:68px}
  body.navshown{padding-left:0!important;padding-top:var(--nav)}
  .tabbar{top:var(--tb,0px)!important;left:0!important;right:0!important;bottom:auto!important;width:auto!important;height:var(--nav);padding:0 16px!important;background:color-mix(in srgb,var(--win) 92%,transparent)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:0!important;border-radius:0!important;box-shadow:none!important;z-index:40}
  .tabbar .in{flex-direction:row!important;align-items:center!important;height:100%!important;gap:4px!important;padding:0!important;max-width:none!important;overflow:visible!important}
  .sidebrand{padding:0 18px 0 4px!important;flex:none;display:flex;align-items:center}
  .sidebrand img{max-height:34px!important;max-width:170px!important;width:auto}
  .sidebrand .bizinit{display:none!important}
  .sidebrand .bizbrand{display:flex!important;width:auto}
  .navgrp,#sideToggle{display:none!important}
  .tabbar .tab{flex:none;width:auto!important;min-height:42px!important;height:42px;padding:0 14px 0 10px!important;gap:8px!important;border-radius:var(--r-pill)!important;font:500 var(--t-small)/1 var(--font)!important;color:var(--ink)!important;margin:0!important;background:transparent;box-shadow:none!important;position:relative}
  .tabbar .tab .tlab{display:inline!important}
  .tabbar .tab svg{width:19px!important;height:19px!important;padding:0!important;box-shadow:none!important;border-radius:0!important}
  .tabbar .tab:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)!important}
  .tabbar .tab[aria-current="page"]{background:var(--hi)!important;color:var(--ink)!important}
  .tabbar .tab[aria-current="page"] svg{color:var(--green)}
  .tabbar .tabcount{position:static!important;margin-left:2px!important;background:var(--chip)!important;color:var(--ink)!important;min-width:22px!important;height:22px!important;padding:0 7px!important;border-radius:11px!important;font:600 12px/22px var(--font)!important}
  .tabbar .tabdot{position:absolute;top:8px;right:8px;margin:0}
  /* search becomes a field on the right; Settings a circle beside it */
  #sideSearch{margin-left:auto!important;margin-top:0!important;min-width:280px;justify-content:flex-start;background:var(--chip)!important;color:var(--ink-3)!important;font-weight:400!important;padding:0 14px!important}
  #sideSearch .sidekbd{display:inline-block!important;margin-left:auto;font:500 11px/1 var(--font);color:var(--ink-3);background:var(--panel);border-radius:6px;padding:4px 6px;border:0}
  .tabbar .tab[data-tab="settings"]{width:42px!important;padding:0!important;justify-content:center;box-shadow:inset 0 0 0 1px var(--line)!important;margin-left:6px!important}
  .tabbar .tab[data-tab="settings"] .tlab{display:none!important}
  /* everything that hung off the top of the window now hangs off the bar */
  .bar{top:calc(var(--nav) + var(--tb,0px))!important}
  body.split-leads #s-self,body.split-stock #s-stock,body.split-stock #s-stock{top:calc(var(--nav) + var(--tb,0px) + 4px)!important;left:12px!important;bottom:12px!important}
  body.split-leads #s-self>.bar.tbar,body.split-stock #s-stock>.bar.tbar{position:sticky!important;top:0!important;left:auto!important}
  body.split-leads #s-selfd,body.split-stock #s-stockd,body.split-stock #s-stockd{padding-top:4px!important}
  body.split-leads #s-selfd>#selfdBody,body.split-stock #s-stockd>#stockdBody,body.split-stock #s-stockd>#stockdBody{min-height:calc(100vh - var(--nav) - 16px)!important}
  body.drawer-lead #s-selfd,body.drawer-stock #s-stockd,body.drawer-stock #s-stockd,.tqpanel{top:calc(var(--nav) + var(--tb,0px))!important}
  #s-pipe,#s-cal,#s-stock,#s-tasks,#s-home,#s-reports,#s-plat,#s-settings,#s-prices,#s-reg,body.navshown #s-buy,body.navshown #s-check,body.navshown #s-report,body:not(.split-stock):not(.drawer-stock).navshown #s-stockd,body:not(.split-leads):not(.drawer-lead).navshown #s-selfd,body:not(.split-stock):not(.drawer-stock).navshown #s-stockd{margin:4px 12px 12px 12px!important;min-height:calc(100vh - var(--nav) - 16px)!important}
  body.split-stock #s-stock{margin:0!important}
  .footbar{left:12px!important;right:12px!important}
}
@media (min-width:860px) and (max-width:1319px) and (min-height:500px) and (hover:hover) and (pointer:fine){
  .tabbar .tab .tlab{display:none!important}
  .tabbar .tab{width:42px!important;padding:0!important;justify-content:center}
  #sideSearch{min-width:0;width:auto!important;padding:0 12px!important}
  #sideSearch .tlab{display:inline!important}
  .tabbar .tabcount{position:absolute!important;top:-2px;right:-4px;min-width:18px!important;height:18px!important;line-height:18px!important;padding:0 4px!important;font-size:10.5px!important}
}
@media (min-width:860px) and (max-width:1599px) and (min-height:500px){
  body.split-leads #s-selfd .lcontact,body.split-stock #s-stockd .lcontact{grid-column:2!important;grid-row:3!important}
  body.split-leads #s-selfd .lhid,body.split-stock #s-stockd .lhid{grid-column:2;grid-row:1;justify-content:flex-start}
  body.split-leads #s-selfd .lfields,body.split-stock #s-stockd .lfields{grid-column:2;grid-row:2}
  body.split-leads #s-selfd .lh1>.lav,body.split-stock #s-stockd .lh1>.lav{grid-column:1;grid-row:1 / span 3}
}
@media (min-width:860px) and (min-height:500px) and (hover:hover) and (pointer:fine){
  body.navshown #s-buy,body.navshown #s-check,body.navshown #s-report,body:not(.split-stock):not(.drawer-stock).navshown #s-stockd,body:not(.split-leads):not(.drawer-lead).navshown #s-selfd,body:not(.split-stock):not(.drawer-stock).navshown #s-stockd{padding:0 28px 60px!important;max-width:none!important}
  body.navshown #s-buy>*,body.navshown #s-check>*,body.navshown #s-report>*{max-width:900px;margin-left:auto!important;margin-right:auto!important}
  body.navshown #s-buy>.bar,body.navshown #s-check>.bar,body.navshown #s-report>.bar{max-width:none;margin-left:-28px!important;margin-right:-28px!important;padding-left:28px;padding-right:28px}
  body.navshown #s-buy .stickyfoot{margin-left:0;margin-right:0}
}
@media (min-width:860px) and (min-height:500px) and (hover:hover) and (pointer:fine){
  body:not(.split-leads) #s-pipe,body:not(.split-stock) #s-pipe,body:not(.split-stock) #s-stock,body #s-cal,body #s-tasks,body #s-home,body #s-reports,body #s-plat,body #s-settings,body #s-prices,body #s-reg{margin:4px 12px 12px 12px!important;min-height:calc(100vh - var(--nav) - 16px)!important}
  body.split-stock #s-stock{margin:0!important}
}
/* web-11.6: week view hour labels sit just under their hour line, no line through the 7am label */
.wktimes .wkt{transform:none!important;padding-top:5px;line-height:1;font:500 11.5px/1 var(--font)!important;color:var(--ink-3)!important}
.wktimes .wkdh{border-bottom-color:transparent!important}

/* ===== web-11.6: list and lead page like Tom's mockup ===== */
/* lead rows: photo or initials, name and how long ago, what's happening, the car */
.lrow,.cell.lrow{display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;grid-template-areas:"av main"!important;align-items:center!important;gap:14px!important;padding:14px 16px!important}
.lrow .lav{width:48px;height:48px;font-size:15px;align-self:center;box-shadow:none;background-color:var(--hi-2)}
.lrow .lrmain{grid-area:main;min-width:0}
.lrow .lrtop{display:flex;align-items:baseline;gap:10px}
.lrow .lrtop .name{flex:1;min-width:0;font:500 17px/1.25 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .lrago{flex:none;font-size:var(--t-label);color:var(--ink-3)}
.lrow .lrsub{font-size:var(--t-small);color:var(--ink);margin-top:3px}
.lrow .lrsub.late{color:var(--bad)}
.lrow .lrcar{font-size:var(--t-small);color:var(--ink-2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.split-leads .lrow.sel,body.split-stock .lrow.sel,.lrow.sel{background:var(--hi)!important;box-shadow:inset 0 0 0 1.5px var(--green)!important}
/* "Leads 4" */
@media (min-width:860px) and (min-height:500px){
  #s-self>.bar .t[data-n]::after,#s-stock>.bar .t[data-n]::after{content:attr(data-n);display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 8px;margin-left:12px;border-radius:14px;background:var(--chip);font:500 14px/1 var(--font);vertical-align:middle}
  #s-self>.bar .t,#s-stock>.bar .t{font-size:26px!important}
}
/* lead page on a computer */
@media all{ /* web-11.24: on every device, so phone, iPad and computer match */
  #s-selfd .ldtop .segctl.ltabs,#s-stockd .ldtop .segctl.ltabs{grid-column:1/-1;margin:22px 0 0!important}
  #s-selfd .ldtop,#s-stockd .ldtop{margin-bottom:18px}
  #s-selfd #ldStage::after,#s-stockd #skStatus::after{content:"";width:6px;height:6px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
  #s-selfd .lh1>.lav,#s-stockd .lh1>.lav{background-color:var(--hi-2);box-shadow:0 0 0 3px var(--green)}
  /* selling process: circles on a thin line, the current one ringed in green */
  #s-selfd .trbar,#s-stockd .trbar{background:none!important;height:56px;overflow:visible}
  #s-selfd .trbar::before,#s-stockd .trbar::before{content:"";position:absolute;left:30px;right:30px;top:50%;height:2px;background:var(--line)}
  #s-selfd .trfill,#s-stockd .trfill{display:none}
  #s-selfd .trdot,#s-stockd .trdot{width:46px;height:46px;background:var(--tile);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink-2)}
  #s-selfd .trdot.done,#s-stockd .trdot.done{background:var(--hi-2);box-shadow:inset 0 0 0 1.5px var(--green);color:var(--green)}
  #s-selfd .trdot.now,#s-stockd .trdot.now{background:var(--tile);box-shadow:inset 0 0 0 4px var(--green);color:var(--ink)}
  /* activity: icons in circles joined by a line, no boxes */
  #s-selfd #ltab,#s-stockd #skTimeline{background:var(--tile);border-radius:var(--r-card);padding:8px 20px 20px}
  #s-selfd .tlcard,#s-stockd .tlcard{background:none!important;border-radius:0!important;padding:12px 0 12px 52px!important;margin:0!important;position:relative}
  #s-selfd .tlcard::before,#s-stockd .tlcard::before{content:"";position:absolute;left:19px;top:0;bottom:0;width:1.5px;background:var(--line)}
  #s-selfd .tlcard .tlic,#s-stockd .tlcard .tlic{position:absolute!important;left:0;top:10px;width:40px!important;height:40px!important;display:grid!important;place-items:center;background:var(--tile)!important;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink)!important;border-radius:50%!important;z-index:1}
  #s-selfd .tlcard .tlhead,#s-stockd .tlcard .tlhead{font-weight:500;position:static}
  #s-selfd .tlcard .tlhead b,#s-stockd .tlcard .tlhead b{font-weight:500}
  #s-selfd .tlsys,#s-stockd .tlsys{position:relative;padding-left:52px!important}
  #s-selfd .tlsys::before,#s-stockd .tlsys::before{content:"";position:absolute;left:19px;top:0;bottom:0;width:1.5px;background:var(--line)}
  #s-selfd .tlsys>svg,#s-stockd .tlsys>svg{position:absolute;left:14px;z-index:1;color:var(--ink-3)}
}

/* ===== web-11.7: the top bar like Tom's mockup: flat with a hairline, wide search, + for a new lead, your initials for Settings ===== */
.navav,.sshint,.navadd{display:none}
@media (min-width:860px) and (min-height:500px) and (hover:hover) and (pointer:fine){
  .tabbar{background:var(--win)!important;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 -1px 0 var(--rule)!important}
  body.navshown{padding-top:calc(var(--nav) + 8px)}
  #sideSearch{min-width:0;width:clamp(240px,24vw,380px)!important;border-radius:var(--r-pill)!important;box-shadow:inset 0 0 0 1px var(--rule)!important;background:var(--panel)!important}
  #sideSearch .sshint{display:inline;margin-left:-4px}
  #sideSearch .sidekbd{display:none!important}
  .tabbar .navadd{display:inline-flex;width:42px!important;padding:0!important;justify-content:center;margin-left:10px!important;box-shadow:inset 0 0 0 1px var(--line)!important}
  /* web-12.3 (Liam: your icon should be you, not the dashboard): Home is an ordinary tab first in the row; your initials
     are their own circle at the far right (#navMe) and open a small menu: your details, password, sign out */
  .tabbar .navme{order:99;display:inline-flex!important;width:42px!important;padding:0!important;justify-content:center;align-items:center;box-shadow:none!important;background:var(--hi-2)!important;color:var(--green)!important;margin-left:8px!important}
  .tabbar .navme .navav{display:block;font:600 14px/1 var(--font);font-style:normal;letter-spacing:.02em}
  .tabbar .navme[aria-expanded="true"]{box-shadow:inset 0 0 0 2px var(--green)!important}
  .tabbar .tab[data-tab="settings"]{margin-left:8px!important}
}
@media (min-width:860px) and (max-width:1319px) and (min-height:500px) and (hover:hover) and (pointer:fine){
  #sideSearch{width:auto!important}
  #sideSearch .sshint{display:none}
}

/* ===== web-11.8: lead page on a computer like Tom's mockup ===== */
@media all{ /* web-11.24: on every device, so phone, iPad and computer match */
  /* Upcoming and Activity as two cards */
  #s-selfd #ltab,#s-stockd #skTimeline{background:none!important;padding:0!important;border-radius:0}
  #s-selfd .tlbox,#s-stockd .tlbox{background:var(--tile);border-radius:var(--r-card);padding:16px 20px 18px;margin-bottom:12px}
  #s-selfd .tlbox[hidden],#s-stockd .tlbox[hidden]{display:none}
  #s-selfd .tlhd,#s-stockd .tlhd{display:flex;align-items:center;gap:6px;margin-bottom:8px}
  #s-selfd .tlhd>b,#s-stockd .tlhd>b{font:500 20px/1.2 var(--font);letter-spacing:-.01em}
  #s-selfd .tlhd .fa,#s-stockd .tlhd .fa{flex:1}
  #s-selfd .tlhd .tlfilter,#s-stockd .tlhd .tlfilter,#s-selfd .tlhd .navbtn,#s-stockd .tlhd .navbtn{min-height:34px!important;padding:0 12px!important;font-size:12.5px!important;flex:none}
  #s-selfd .tlhd .navbtn svg,#s-stockd .tlhd .navbtn svg{width:13px;height:13px}
  #s-selfd .tlupb .group,#s-stockd .tlupb .group{background:none!important;box-shadow:none!important;margin:0!important}
  #s-selfd .tlupb .cell,#s-stockd .tlupb .cell{padding-left:0!important;padding-right:0!important;background:none!important}
  #s-selfd .tlactbox .tlmonth,#s-stockd .tlactbox .tlmonth{margin:10px 0 2px!important;font-size:var(--t-label);color:var(--ink-3)}
  #s-selfd .tlactbox .tlmonth:first-child,#s-stockd .tlactbox .tlmonth:first-child,#s-selfd .tlactbox .tlbody>.tlmonth:first-child,#s-stockd .tlactbox .tlbody>.tlmonth:first-child{margin-top:0!important}
}
/* actions top right of the header when there is room beside the list (like the mockup) */
@media (min-width:1360px) and (min-height:500px){
  body.split-leads #s-selfd .lhero,body.split-stock #s-stockd .lhero{grid-template-columns:auto minmax(0,1fr) auto!important;grid-template-areas:"av id act" "av facts facts"!important}
  body.split-leads #s-selfd .lh1>.lav,body.split-stock #s-stockd .lh1>.lav{grid-area:av!important}
  body.split-leads #s-selfd .lhid,body.split-stock #s-stockd .lhid{grid-area:id!important}
  body.split-leads #s-selfd .lfields,body.split-stock #s-stockd .lfields{grid-area:facts!important}
  body.split-leads #s-selfd .lcontact,body.split-stock #s-stockd .lcontact{grid-area:act!important;justify-content:flex-end;flex-wrap:nowrap}
}
/* two columns beside the list from 1280 wide, like the mockup (was 1400) */
@media (min-width:1280px) and (min-height:500px){
  body.split-leads #s-selfd .ldcols,body.split-stock #s-stockd .ldcols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)!important;align-items:start}
}

/* ===== web-11.9: Select is a tick box before the lead filters; the computer tasks list as cards like the leads list ===== */
.selbox{flex:none;width:34px;height:34px;min-height:34px;padding:0;margin:0 2px 0 0;display:inline-grid;place-items:center;border:0;border-radius:9px;background:var(--chip);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--on-solid);cursor:pointer;align-self:center}
.selbox[aria-pressed="true"]{background:var(--green);box-shadow:none}
.selbox:hover{box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.selbox[aria-pressed="true"]:hover{box-shadow:none}
.selbox:focus-visible{outline:2px solid var(--green);outline-offset:2px}
#s-self .listtools:not(:has(.bulkbar:not([hidden]))),#s-stock .listtools:not(:has(.bulkbar:not([hidden]))){display:none}
@media (min-width:860px) and (min-height:500px){
  #s-tasks .tkwrap{background:none!important;border:0!important;border-radius:0!important;overflow:visible!important;margin-top:8px}
  #s-tasks .tktable{border-collapse:separate!important;border-spacing:0 8px;margin-top:-8px}
  #s-tasks .tktable th{background:none!important;border:0!important;font:400 var(--t-label)/1 var(--font)!important;color:var(--ink-3);padding:8px 12px 0!important}
  #s-tasks .tktable td{background:var(--tile);border:0!important;padding:14px 12px!important;transition:background .12s}
  #s-tasks .tktable tbody td:first-child{border-radius:var(--r-card) 0 0 var(--r-card);padding-left:18px!important}
  #s-tasks .tktable tbody td:last-child{border-radius:0 var(--r-card) var(--r-card) 0;padding-right:18px!important}
  #s-tasks .tktable thead th:first-child{padding-left:18px!important}
  #s-tasks .tktable tbody tr:hover td{background:var(--hi-2)}
  #s-tasks .tktable tbody tr.sel td{background:var(--hi)}
  #s-tasks .tktable tbody tr:hover{background:none!important}
  #s-tasks .tktable .tktitle{font:500 16px/1.3 var(--font)}
  #s-tasks .tktable .tkleadc{display:flex;align-items:center;gap:12px;white-space:nowrap}
  #s-tasks .tktable .tkleadc .lav{width:40px;height:40px;flex:none;font-size:13px;background-color:var(--hi-2);box-shadow:none}
  #s-tasks .tktable .tklead{font-weight:500}
  #s-tasks .tktable .tksub1{color:var(--ink-2)}
  #s-tasks .tktable .badge{background:var(--chip)!important;color:var(--ink)!important;border-radius:var(--r-pill)!important;padding:5px 11px!important;font:400 var(--t-label)/1 var(--font)!important}
  #s-tasks .tktable .tkav{width:30px;height:30px;font:600 11.5px/1 var(--font);background:var(--hi-2);color:var(--green)}
  /* the square tick boxes match the leads one */
  #s-tasks .tktable .tksel input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px!important;height:22px!important;min-width:22px!important;max-width:22px!important;border-radius:7px!important;border:0!important;background-color:var(--chip)!important;box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;background-position:center;background-repeat:no-repeat}
  #s-tasks .tktable .tksel input[type=checkbox]:checked{background-color:var(--green)!important;box-shadow:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")!important;background-size:14px 14px!important}
  #s-tasks .tkfoot{color:var(--ink-3)}
}
#s-self .chips .selbox,#s-stock .chips .selbox{width:24px!important;height:24px!important;min-height:24px!important;min-width:24px!important;padding:0!important;border-radius:7px!important;margin:0 6px 0 4px!important;font-size:0}
#s-self .chips .selbox svg,#s-stock .chips .selbox svg{width:14px;height:14px}

/* web-11.10: iPads and other touch screens keep the sidebar (Tom); only computers get the top bar. Panels stay rounded. */
@media (min-width:860px) and (min-height:500px) and (not ((hover:hover) and (pointer:fine))){
  #s-self,#s-stock,#s-pipe,#s-cal,#s-stock,#s-tasks,#s-home,#s-reports,#s-plat,#s-settings,#s-prices,#s-reg{border-radius:var(--r-panel)!important;overflow:clip}
  .tabbar .navadd,.tabbar .navav,#sideSearch .sshint{display:none!important}
}
/* web-11.11: the Upcoming card starts level with Selling process */
#s-selfd #ltab>:first-child,#s-stockd #skTimeline>:first-child{margin-top:0!important}

/* web-11.12: the lead page tabs are underlined tabs, not pills, so they don't look like the Call / Text / Email buttons (Tom) */
@media all{ /* web-11.24: on every device, so phone, iPad and computer match */
  #s-selfd .segctl.ltabs,#s-stockd .segctl.ltabs{gap:28px!important;box-shadow:inset 0 -1px 0 var(--rule)!important;overflow-x:auto;padding:0 2px!important}
  #s-selfd .segctl.ltabs button,#s-stockd .segctl.ltabs button{position:relative;min-height:0!important;height:auto!important;padding:4px 0 13px!important;background:none!important;box-shadow:none!important;border-radius:0!important;font:500 15px/1.2 var(--font)!important;color:var(--ink-3)!important}
  #s-selfd .segctl.ltabs button:hover,#s-stockd .segctl.ltabs button:hover{color:var(--ink)!important}
  #s-selfd .segctl.ltabs button[aria-pressed="true"],#s-stockd .segctl.ltabs button[aria-pressed="true"]{background:none!important;color:var(--ink)!important}
  #s-selfd .segctl.ltabs button[aria-pressed="true"]::after,#s-stockd .segctl.ltabs button[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--green)}
  #s-selfd .segctl.ltabs button:focus-visible,#s-stockd .segctl.ltabs button:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px!important}
  #s-selfd .segctl.ltabs .tcount,#s-stockd .segctl.ltabs .tcount{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px!important;margin-left:6px;border-radius:10px;background:var(--chip)!important;opacity:1!important;font:600 11.5px/1 var(--font);color:var(--ink)}
}

/* web-11.13: Tom's mockup at every computer and iPad width: actions top right, the facts under the name, tabs under that.
   Where the lead sits beside the list on a narrower screen, Text / Email / Log become round icon buttons so it all fits. */
@media (min-width:860px) and (min-height:500px){
  #s-selfd .lhero,#s-stockd .lhero,body.split-leads #s-selfd .lhero,body.split-stock #s-stockd .lhero{grid-template-columns:auto minmax(0,1fr) auto!important;grid-template-areas:"av id act" "av facts facts"!important;align-items:center}
  #s-selfd .lh1>.lav,#s-stockd .lh1>.lav,body.split-leads #s-selfd .lh1>.lav,body.split-stock #s-stockd .lh1>.lav{grid-area:av!important;align-self:start}
  #s-selfd .lhid,#s-stockd .lhid,body.split-leads #s-selfd .lhid,body.split-stock #s-stockd .lhid{grid-area:id!important;min-width:0}
  #s-selfd .lfields,#s-stockd .lfields,body.split-leads #s-selfd .lfields,body.split-stock #s-stockd .lfields{grid-area:facts!important}
  #s-selfd .lcontact,#s-stockd .lcontact,body.split-leads #s-selfd .lcontact,body.split-stock #s-stockd .lcontact{grid-area:act!important;justify-content:flex-end!important;flex-wrap:nowrap!important;align-self:center}
}
/* sized by the header's own width (container queries), so it works beside the list, beside the iPad sidebar, or full width */
@media (min-width:860px) and (min-height:500px){ #s-selfd .ldtop,#s-stockd .ldtop{container:ldtop/inline-size} }
@container ldtop (max-width:900px){
  #s-selfd .lcontact button:not(#ldCall)>span,#s-stockd .lcontact button:not(#skCall)>span{display:none!important}
  #s-selfd .lcontact button:not(#ldCall),#s-stockd .lcontact button:not(#skCall){width:42px!important;min-width:42px!important;padding:0!important;justify-content:center}
}
@container ldtop (max-width:660px){
  #s-selfd .lhero,#s-stockd .lhero,body.split-leads #s-selfd .lhero,body.split-stock #s-stockd .lhero{grid-template-columns:auto minmax(0,1fr)!important;grid-template-areas:"av id" "av facts" "av act"!important}
  #s-selfd .lcontact,#s-stockd .lcontact,body.split-leads #s-selfd .lcontact,body.split-stock #s-stockd .lcontact{justify-content:flex-start!important;flex-wrap:wrap!important}
}

/* web-11.14: the notifications bell is in the top bar on a computer (Tom), so the page headers don't repeat it; iPads keep it on the pages */
.tabbar .navbell{display:none}
@media (min-width:860px) and (min-height:500px) and (hover:hover) and (pointer:fine){
  .tabbar .navbell{display:inline-flex;width:42px!important;padding:0!important;justify-content:center;margin-left:10px!important;box-shadow:inset 0 0 0 1px var(--line)!important}
  .tabbar .navbell+.navadd{margin-left:6px!important}
  .tabbar .navbell .bwrap{position:relative}
  .tabbar .navbell .bdot{border-color:var(--win)}
  #s-self>.bar .bellbtn,#s-stock>.bar .bellbtn,#s-pipe>.bar .bellbtn,#s-tasks>.bar .bellbtn{display:none!important}
}
@media (min-width:860px) and (min-height:500px) and (hover:hover) and (pointer:fine){
  #sideSearch{width:clamp(170px,calc(100vw - 1050px),380px)!important;flex:0 1 auto;min-width:0!important;overflow:hidden;white-space:nowrap}
  #sideSearch .sshint{overflow:hidden;text-overflow:ellipsis}
}
@media (min-width:860px) and (max-width:1319px) and (min-height:500px) and (hover:hover) and (pointer:fine){
  #sideSearch{width:auto!important}
}

/* web-11.15: on a computer pop-ups have no drag handle, so give the title proper room at the top (was 8px, Tom) */
@media (min-width:860px) and (min-height:500px){ .sheet{padding-top:28px!important;padding-left:28px!important;padding-right:28px!important} }
/* web-11.16: all-capital labels (number plates) sit a touch lower to look centred with the lifted font (web-11.80: the car pages added 5px underneath, so plates sat differently on each page; measured, 2px top and 0 bottom centres the capitals on both) */
.tagpill.plate{padding-top:2px!important;padding-bottom:0!important}
/* web-11.17: the lead page tabs sit on the right (Tom) */
@media (min-width:860px) and (min-height:500px){ #s-selfd .segctl.ltabs,#s-stockd .segctl.ltabs{justify-content:flex-end!important} }

/* web-11.18: on a computer the search is a real field in the top bar; results drop down under it (no pop-up). The bar never wraps. */
.navsearch{display:none}
@media (min-width:860px) and (min-height:500px) and (hover:hover) and (pointer:fine){
  .tabbar .in{flex-wrap:nowrap!important}
  #sideSearch{display:none!important}
  .navsearch{display:flex;align-items:center;gap:10px;flex:0 1 380px;min-width:150px;height:42px;margin-left:auto;padding:0 14px;border-radius:var(--r-pill);background:var(--panel);box-shadow:inset 0 0 0 1px var(--rule);color:var(--ink-3);cursor:text}
  .navsearch:focus-within{box-shadow:inset 0 0 0 1.5px var(--green);color:var(--ink)}
  .navsearch svg{width:18px;height:18px;flex:none}
  .navsearch input{flex:1;min-width:0;border:0;background:none;outline:none;padding:0;height:100%;font:400 var(--t-small)/1 var(--font);color:var(--ink)}
  .navsearch input::placeholder{color:var(--ink-3);opacity:1}
  .navsearch input::-webkit-search-cancel-button{display:none}
}
@media (min-width:860px) and (max-width:1319px) and (min-height:500px) and (hover:hover) and (pointer:fine){
  .navsearch{flex-basis:220px}
}
.cmddrop{position:fixed;z-index:80}
.cmddrop .cmdbox{max-width:none;background:var(--panel);border-radius:20px;box-shadow:var(--shadow-pop,0 18px 48px rgba(0,0,0,.25));border:1px solid var(--rule)}
.cmddrop .cmdres{max-height:min(60vh,520px);padding:8px}

/* web-11.19: the bell and + in page headers are the same 44px circle, level at the top, 10px apart (Tom) */
@media (min-width:860px) and (min-height:500px){
  .tbar .bellbtn,.tbar .plusbtn{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;max-width:44px;flex:none!important;align-self:center!important;margin-top:0!important;margin-bottom:0!important;display:inline-grid!important;place-items:center}
  .tbar.hasbell .bellbtn+.plusbtn,.tbar.hasbell .plusbtn{margin-left:0!important}
  .tbar.hasbell{column-gap:10px!important}
}
@media (max-width:859px),(max-height:499px){ .tbar.hasbell .plusbtn{margin-left:0!important} .tbar.hasbell{column-gap:10px!important} .tbar .bellbtn,.tbar .plusbtn{align-self:center!important} }

/* web-11.20: on a computer the leads list starts 12px in from the window edge, so the lead beside it needs the same 12px gap (it was touching the list, Tom) */
@media (min-width:860px) and (min-height:500px) and (hover:hover) and (pointer:fine){
  body.split-leads #s-self,body.split-stock #s-stock{width:330px!important}
  body.split-leads #s-selfd,body.split-stock #s-stockd{margin-left:342px!important}
}
@media (min-width:1200px) and (min-height:500px) and (hover:hover) and (pointer:fine){
  body.split-leads #s-self,body.split-stock #s-stock{width:400px!important}
  body.split-leads #s-selfd,body.split-stock #s-stockd{margin-left:412px!important}
}

/* web-11.21: picking leads looks like picking tasks (Tom): square tick boxes, picked cards turn green, a "N selected" bar of outlined pills */
.lrow .bulkck{width:22px!important;height:22px!important;border-radius:7px!important;border:0!important;background:var(--chip);box-shadow:inset 0 0 0 1.5px var(--line);color:#fff}
.lrow .bulkck.on{background:var(--green);box-shadow:none}
.lrow .bulkck svg{width:14px;height:14px}
.cell.lrow.selecting.picked,.lrow.selecting.picked{background:var(--hi)!important;box-shadow:inset 0 0 0 1.5px var(--green)!important}
#s-self .bulkbar,#s-stock .bulkbar{background:var(--tile)!important;color:var(--ink)!important;border-radius:16px!important;padding:8px 10px 8px 14px!important;gap:6px!important;font-size:var(--t-small)!important}
#s-self .bulkbar b,#s-stock .bulkbar b{font-weight:600;margin-right:6px}
#s-self .bulkbar button,#s-stock .bulkbar button{background:transparent!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-pill)!important;padding:7px 13px!important;font:500 var(--t-label)/1 var(--font)!important}
#s-self .bulkbar button:hover,#s-stock .bulkbar button:hover{background:var(--chip)!important}
#s-self .bulkbar button.danger,#s-stock .bulkbar button.danger{color:var(--bad)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 45%,transparent)}
/* web-11.22: the leads list and the lead beside it start on the same line and have a clear 16px gap, so it reads in dark mode too (Tom) */
@media (min-width:860px) and (min-height:500px) and (hover:hover) and (pointer:fine){
  body.split-leads #s-self,body.split-stock #s-stock{top:calc(var(--nav) + var(--tb,0px) + 12px)!important}
  body.split-leads #s-selfd,body.split-stock #s-stockd{margin-left:346px!important}
}
@media (min-width:1200px) and (min-height:500px) and (hover:hover) and (pointer:fine){
  body.split-leads #s-selfd,body.split-stock #s-stockd{margin-left:416px!important}
}

/* web-11.23: the top bar's bell and + are for computers only; never show them in the phone or iPad tab bar (they leaked into the phone bar) */
#tabbar .tab.navbell,#tabbar .tab.navadd{display:none!important}
@media (min-width:860px) and (min-height:500px) and (hover:hover) and (pointer:fine){
  #tabbar .tab.navbell,#tabbar .tab.navadd{display:inline-flex!important}
}
/* web-11.23: Confirm / Change / Add to calendar are proper pills with room inside and between them (Tom) */
.nextcard .btnrow3{display:flex!important;flex-wrap:wrap;gap:10px!important;margin-top:12px!important}
.nextcard .btnrow3 button{flex:none!important;width:auto!important;min-height:42px;padding:0 18px!important;border-radius:var(--r-pill)!important;background:transparent!important;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)!important;font:500 var(--t-small)/1 var(--font)!important}
.nextcard .btnrow3 button:hover{background:var(--chip)!important}

/* ===== web-11.24: one design on phone, iPad and computer (Tom). The lead page's stages bar, tabs, Upcoming / Activity cards,
   header facts with icons and the green Call now look the same everywhere; only the layout differs by screen size. ===== */
#s-selfd .lfields,#s-stockd .lfields{display:flex!important;flex-wrap:wrap;gap:10px 22px}
#s-selfd .lf,#s-stockd .lf{display:flex;align-items:center;gap:8px}
#s-selfd .lf dt,#s-stockd .lf dt{display:none}
#s-selfd .lf dd,#s-stockd .lf dd{margin:0;font-size:var(--t-small)}
#s-selfd .lfic,#s-stockd .lfic{display:inline-block;color:var(--ink-2);flex:none}
#s-selfd #ldCall:not(:disabled),#s-stockd #skCall:not(:disabled){background:var(--green);color:var(--on-green,#fff);box-shadow:none}
#s-selfd #ldCall:not(:disabled) svg,#s-stockd #skCall:not(:disabled) svg{color:#fff}
#s-selfd .cdcard,#s-stockd .cdcard{background:var(--tile)!important;border-radius:var(--r-card)!important;padding:16px 20px 10px!important}
/* web-11.24: phone Tasks are separate cards like the leads list; picked ones turn green like picked leads; the tick box sits first in the filters */
#s-tasks .group.tklist{background:none!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;display:flex;flex-direction:column;gap:8px}
#s-tasks .group.tklist>.taskrow,#s-tasks .group.tklist>.cell{background:var(--tile)!important;border-radius:var(--r-card)!important;padding:14px 16px!important;border:0!important;box-shadow:none!important}
#s-tasks .group.tklist>*::after,#s-tasks .group.tklist>*::before{border:0!important}
#s-tasks .tklist.picking .taskrow.sel{background:var(--hi)!important;box-shadow:inset 0 0 0 1.5px var(--green)!important}
#s-tasks .tkdds .selbox{flex:none;width:24px!important;height:24px!important;min-height:24px!important;border-radius:7px!important;margin:0 4px 0 0!important;align-self:center}
#s-tasks .tkpick{width:22px;height:22px;border-radius:7px;background:var(--chip);box-shadow:inset 0 0 0 1.5px var(--line);display:grid;place-items:center;color:#fff;flex:none}
#s-tasks .tkpick.on{background:var(--green);box-shadow:none}
#s-tasks .group.tklist>.cell+.cell::before,#s-tasks .group.tklist>*+*::before{display:none!important}
/* web-11.24: the old rainbow stage colours (blue, amber, purple, teal, pink) become the one racing green, so every
   stage dot, count and avatar matches the rest of the design on all devices */
:root{--c-new:var(--green);--c-wait:var(--green);--c-sain:var(--green);--c-book:var(--green);--c-insp:var(--green);--c-offer:var(--green);--c-acc:var(--green);--c-sell:var(--green)}
.bav,.bav.sm,.bcol .bav{background:var(--hi-2)!important;color:var(--green)!important;font-weight:600!important}
.ptlrow .ptlcount{background:var(--hi-2)!important;color:var(--green)!important;font-weight:600!important}
.ptlrow.zero .ptlcount{background:var(--chip)!important;color:var(--ink-3)!important}
/* web-11.24: calendar days match on every device: round days, today in green (as in the week view), the picked day solid */
.calday{border-radius:50%!important;aspect-ratio:1;max-width:44px;margin:0 auto;width:100%}
.calday.today span{color:var(--green)!important;font-weight:600}
.calday.sel,.calday[aria-current="true"]{background:var(--solid)!important;color:var(--on-solid)!important}
.calday.sel span{color:var(--on-solid)!important}
.calday.today.sel{background:var(--green)!important}
.calday.today.sel span{color:#fff!important}
.mcell.today .mday span{background:var(--green)!important;color:var(--on-green,#fff)!important}
/* wide screens: calendar, for sale, reports and tasks use the whole panel (they stopped at 1200px, leaving a gap on the right) */
@media (min-width:860px) and (min-height:500px){ #calBody,#stockBody,#repBody,#tasksBody{max-width:none!important} }
/* phones: the Activity card's Note / Email / Filter go on their own line under the title so they never run off the screen */
@media (max-width:859px),(max-height:499px){
  #s-selfd .tlactbox .tlhd,#s-stockd .tlactbox .tlhd{flex-wrap:wrap;row-gap:10px}
  #s-selfd .tlactbox .tlhd .fa,#s-stockd .tlactbox .tlhd .fa{flex-basis:100%;height:0}
}
/* selling steps: the "What's a ...?" link and the step's button sit apart, lined up */
.ssbd .tiplink{display:inline-flex;align-items:center;min-height:44px;margin:6px 16px 0 0;vertical-align:middle}
.ssbd .ssact{vertical-align:middle;margin-top:6px!important}
/* computer: the bar inside a drawer sticks to the drawer's own top (it was offset by the top menu's height, leaving a gap and covering the title) */
@media (min-width:860px) and (min-height:500px) and (hover:hover) and (pointer:fine){
  body.drawer-stock #s-stockd>.bar,body.drawer-lead #s-selfd>.bar,body.drawer-stock #s-stockd>.bar{top:0!important}
}
/* the lead page's back and ••• circles show their icon on every screen size (on a computer they were empty circles);
   in a drawer the back circle is a close X */
#sdBack::before{content:"";width:9px;height:9px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateX(2px) rotate(45deg)}
#sdMore::before{content:"•••";font-size:14px;letter-spacing:1px}
body.drawer-lead #sdBack{position:relative}
body.drawer-lead #sdBack::before,body.drawer-lead #sdBack::after{content:"";position:absolute;left:50%;top:50%;width:15px;height:1.6px;border:0;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
body.drawer-lead #sdBack::after{transform:translate(-50%,-50%) rotate(-45deg)}
/* the car page's back button matches the lead page: a circle with a back arrow, or a close X when the car is open in a drawer */
#skBack{width:var(--circ)!important;height:var(--circ)!important;min-width:var(--circ)!important;padding:0!important;border-radius:50%!important;background:transparent!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--line)!important;display:inline-flex!important;align-items:center;justify-content:center;font-size:0!important;position:relative;flex:none}
#skBack::before{content:"";width:9px;height:9px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateX(2px) rotate(45deg)}
body.drawer-stock #skBack::before,body.drawer-stock #skBack::after{content:"";position:absolute;left:50%;top:50%;width:15px;height:1.6px;border:0;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
body.drawer-stock #skBack::after{transform:translate(-50%,-50%) rotate(-45deg)}
#s-stockd>.bar>span{min-width:var(--circ)!important}
@media (max-width:859px),(max-height:499px){ #s-stockd>.bar .t{visibility:hidden} }
/* settings menu icons: outlined circles on every device (phone had green squares) */
.seticon{width:36px!important;height:36px!important;border-radius:50%!important;background:transparent!important;box-shadow:inset 0 0 0 1px var(--line)!important;color:var(--ink)!important}
.setmenu .cell[aria-current="true"] .seticon{box-shadow:inset 0 0 0 1px var(--green)!important;color:var(--green)!important}
/* dropdowns in a form look like the fields around them (they were plain text), with a small chevron */
.cfield .fsel{background:var(--chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8087' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center/16px!important;border-radius:var(--r-pill)!important;min-height:48px;padding:0 44px 0 18px!important;display:flex;align-items:center;font-size:16px!important}
/* notification icons: outlined circles like the rest, colour only for a yes (green) or no (red) */
.nfic,.nfic.k-sa,.nfic.k-viewed,.nfic.k-enquiry,.nfic.k-again,.nfic.k-email,.nfic.k-f9{width:38px!important;height:38px!important;border-radius:50%!important;background:transparent!important;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)!important}
.nfic.k-yes{border-radius:50%!important;background:var(--hi-2)!important;color:var(--green)!important}
.nfic.k-no{border-radius:50%!important}
.cfield .fsel.ph{color:var(--ink-3)!important}
/* the lead count next to "Leads" on phones too (it showed only on iPad and computer) */
#s-self>.bar .t[data-n]::after,#s-stock>.bar .t[data-n]::after{content:attr(data-n);display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 8px;margin-left:12px;border-radius:14px;background:var(--chip);font:500 14px/1 var(--font);vertical-align:middle;letter-spacing:0}
/* every back button in the app is the same circle with a back arrow (the label stays for screen readers) */
#ckBack,#pbBack,#rpBack,#rgBack,#pgBack,#repBack,#setBack,#plBack{width:var(--circ)!important;height:var(--circ)!important;min-width:var(--circ)!important;padding:0!important;border-radius:50%!important;background:transparent!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--line)!important;display:inline-flex!important;align-items:center;justify-content:center;font-size:0!important;flex:none}
#ckBack::before,#pbBack::before,#rpBack::before,#rgBack::before,#pgBack::before,#repBack::before,#setBack::before,#plBack::before{content:"";width:9px;height:9px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateX(2px) rotate(45deg)}
/* button pairs wrap instead of squeezing their words; every pill keeps at least 16px each side */
.btnrow{display:flex!important;flex-wrap:wrap;gap:10px!important}
.btnrow>.cta,.btnrow>button{flex:1 1 auto!important;width:auto!important;padding-left:16px!important;padding-right:16px!important;white-space:nowrap}
.cdmore{padding:10px 0 10px!important}

/* ===== web-11.26: irregularities (Tom) ===== */
/* computer: the top bar's + adds a lead, so the Leads and Pipeline pages don't repeat it (iPad keeps them, it has no top bar) */
@media (min-width:860px) and (min-height:500px) and (hover:hover) and (pointer:fine){ #selfAdd,#pipeAdd{display:none!important} }
/* Reports is a main menu item on iPad and computer, so no back arrow to Settings there */
@media (min-width:860px) and (min-height:500px){ #repBack{display:none!important} }
/* computer and iPad: settings, the register and repair prices use the whole panel; long forms stay a comfortable width, centred */
@media (min-width:860px) and (min-height:500px){
  #setBody,#setBody.insection{max-width:none!important;grid-template-columns:300px minmax(0,1fr)!important}
  #setBody .setmenu,#setBody.insection .setmenu{top:calc(var(--nav,0px) + 16px)!important}
  #regBody,#pricesBody{max-width:none!important}
  body.navshown #s-check>*,body.navshown #s-buy>*,body.navshown #s-report>*{max-width:1100px!important}
  /* web-12.58: the sticky header bar spans the page (the cap above made its background stop short once scrolled) */
  body.navshown #s-check>.bar,body.navshown #s-buy>.bar,body.navshown #s-report>.bar{max-width:none!important}
}
/* the lead page shows one "Send proposal": when Up next has it, the valuation card doesn't repeat it */
#s-selfd:has(#nxSendOffer) .valsend,#s-stockd:has(#nxSendOffer) .valsend{display:none!important}
.bmore,.lmore{display:block;margin:10px auto 4px!important;min-height:38px;padding:0 18px!important}
.arow .amore{flex:none;align-self:center;margin:0 8px!important;min-height:38px;padding:0 18px!important;white-space:nowrap}
/* web-11.27: tabs that stay above their content (one-column lead page) get the same room as on a phone */
#s-selfd .ldside>.segctl.ltabs,#s-stockd .ldside>.segctl.ltabs{margin:28px 0 14px!important}

/* ===== web-11.28: collapsible leads list beside a lead (computer and iPad) ===== */
.lmtog{position:fixed;z-index:45;width:28px;height:28px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:var(--chip);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 2px 8px rgba(0,0,0,.12);cursor:pointer}
.lmtog:hover{background:var(--hi-2);color:var(--green)}
.lmtog:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.lmtog[hidden]{display:none}
.lmtog svg{transition:transform .2s}
html.leadsmin .lmtog svg{transform:rotate(180deg)}
@media (min-width:860px) and (min-height:500px){
  html.leadsmin body.split-leads #s-self,html.leadsmin body.split-stock #s-stock{width:84px!important;padding:0 10px 24px!important}
  html.leadsmin body.split-leads #s-selfd,html.leadsmin body.split-stock #s-stockd{margin-left:84px!important}
  html.leadsmin body.split-leads #s-self>.bar,html.leadsmin body.split-stock #s-stock>.bar{display:none!important}
  html.leadsmin body.split-leads #selfBody>*:not(.leadsecs),html.leadsmin body.split-stock #stockBody>*:not(.leadsecs){display:none!important}
  html.leadsmin body.split-leads #selfBody .lsec,html.leadsmin body.split-stock #stockBody .lsec,html.leadsmin body.split-leads #selfBody .lmore,html.leadsmin body.split-stock #stockBody .lmore{display:none!important}
  html.leadsmin body.split-leads #selfBody,html.leadsmin body.split-stock #stockBody{padding-top:14px}
  html.leadsmin body.split-leads .lrow,html.leadsmin body.split-stock .lrow,html.leadsmin body.split-leads .cell.lrow,html.leadsmin body.split-stock .cell.lrow{grid-template-columns:48px!important;grid-template-areas:"av"!important;justify-content:center!important;padding:8px 0!important;background:transparent!important;box-shadow:none!important}
  html.leadsmin body.split-leads .lrow .lrmain,html.leadsmin body.split-stock .lrow .lrmain,html.leadsmin body.split-leads .lrow .bulkck,html.leadsmin body.split-stock .lrow .bulkck{display:none!important}
  html.leadsmin body.split-leads .lrow.sel .lav,html.leadsmin body.split-stock .lrow.sel .lav{box-shadow:0 0 0 3px var(--green)}
  html.leadsmin body.split-leads .lrow:hover .lav,html.leadsmin body.split-stock .lrow:hover .lav{box-shadow:0 0 0 2px var(--line)}
  html.leadsmin body.split-leads .leadsecs .group,html.leadsmin body.split-stock .leadsecs .group{gap:2px!important}
}
@media (min-width:860px) and (min-height:500px) and (hover:hover) and (pointer:fine){
  html.leadsmin body.split-leads #s-selfd,html.leadsmin body.split-stock #s-stockd{margin-left:100px!important}
}

/* ===== web-11.29 (Tom) ===== */
/* activity: small updates ("Self assessment sent") get a dot on the timeline line again */
#s-selfd .tlsys,#s-stockd .tlsys{min-height:36px;align-items:center!important;padding-top:8px!important;padding-bottom:8px!important;margin:0!important}
#s-selfd .tlsys::after,#s-stockd .tlsys::after{content:"";position:absolute;left:14px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--tile);box-shadow:inset 0 0 0 2px var(--line);z-index:1}
#s-selfd .tlsys time,#s-stockd .tlsys time{margin-left:auto}
/* reply and forward on an email: two clean round buttons with a gap, not overlapping pills */
#s-selfd .tlacts,#s-stockd .tlacts{display:flex!important;gap:8px!important;margin:0 0 0 auto!important;flex:none;align-self:flex-start}
#s-selfd .tlacts .tlact,#s-stockd .tlacts .tlact,#s-selfd .tlacts button,#s-stockd .tlacts button{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center;background:transparent!important;box-shadow:inset 0 0 0 1px var(--line)!important;color:var(--ink)!important}
#s-selfd .tlacts .tlact:hover,#s-stockd .tlacts .tlact:hover{background:var(--chip)!important}
#s-selfd .tlacts svg,#s-stockd .tlacts svg{width:15px;height:15px}
/* search drop-down: the stage tag stays on one line, the name and car shrink instead */
.cmditem .lbl{flex:1;min-width:0}
.cmditem .lbl b,.cmditem .lbl small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmditem .badge{flex:none!important;white-space:nowrap!important;max-width:none!important;margin-left:8px}
.cmditem .badge,.cmditem .badge[class*="st-"],.cmditem .badge[class*="sk-"]{background:var(--chip)!important;color:var(--ink)!important;border-radius:var(--r-pill)!important;padding:6px 12px!important;font:500 var(--t-label)/1 var(--font)!important}
.cmditem.on,.cmditem:hover{background:var(--hi-2)!important}
.cmditem .cmdk-ic{width:38px;height:38px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
/* one continuous line down the timeline (no gaps between entries) */
#s-selfd .tlactbox .tlbody,#s-stockd .tlactbox .tlbody{display:block!important;gap:0!important}
#s-selfd .tlactbox .tlbody>.tlcard,#s-stockd .tlactbox .tlbody>.tlcard,#s-selfd .tlactbox .tlbody>.tlsys,#s-stockd .tlactbox .tlbody>.tlsys{margin-top:0!important;margin-bottom:0!important}
#s-selfd .tlsys::before,#s-stockd .tlsys::before{height:auto!important;width:1.5px!important;margin:0!important;border-radius:0!important;opacity:1!important;transform:none!important;background:var(--line)!important}
#s-selfd .tlcard .tlchips,#s-stockd .tlcard .tlchips{margin-left:0!important;padding-left:0!important}
#s-selfd .tlcard .tlchips .tldate:first-child,#s-stockd .tlcard .tlchips .tldate:first-child{padding-left:0!important;margin-left:0!important;background:none!important}

/* ===== web-11.30 (Tom) ===== */
/* pop-up button rows (Send by email / Send by text / Copy link and the like): clear gaps, wrap on a phone */
.sheet .stack{display:flex!important;flex-wrap:wrap;gap:10px!important}
.sheet .stack>*{margin:0!important;flex:1 1 auto;width:auto!important}
/* short messages ("Still needed: ...") are a compact rounded box, not a giant pill */
.toast{border-radius:16px!important;font:500 14px/1.35 var(--font)!important;padding:10px 16px!important;width:max-content;max-width:min(420px,calc(100vw - 32px))!important}
body:has(#s-offer:not([hidden])) .toast{bottom:calc(24px + env(safe-area-inset-bottom,0px))!important}
/* the car's photo circle, like a lead's */
.lav.carav{background-color:var(--hi-2);background-size:cover;background-position:center;color:var(--green);display:inline-grid;place-items:center}
#s-stock .segctl.stockswitch{display:flex;margin:4px 0 12px}
#s-stock .segctl.stockswitch button{flex:1}

/* web-11.31: a collapsed list with nothing in it says so, written sideways (Tom) */
@media (min-width:860px) and (min-height:500px){
  html.leadsmin body:is(.split-leads,.split-stock) :is(#selfBody,#stockBody)[data-empty]:not([data-empty=""])::after{content:attr(data-empty);display:block;margin:24px auto 0;writing-mode:vertical-rl;transform:rotate(180deg);font:500 15px/1 var(--font);color:var(--ink-3);letter-spacing:.01em;white-space:nowrap}
}

/* web-11.32: Change password inside the app looks like the other settings pages (Tom): a panel, a round back arrow,
   the title on the left and the form as a card underneath it */
#s-welcome:has(.welinapp) #wlBack{width:var(--circ)!important;height:var(--circ)!important;min-width:var(--circ)!important;padding:0!important;border-radius:50%!important;background:transparent!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--line)!important;display:inline-flex!important;align-items:center;justify-content:center;font-size:0!important;flex:none}
#s-welcome:has(.welinapp) #wlBack::before{content:"";width:9px;height:9px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateX(2px) rotate(45deg)}
#s-welcome:has(.welinapp)>#welBody>.bar{display:flex;align-items:center;gap:14px;justify-content:flex-start}
#s-welcome:has(.welinapp)>#welBody>.bar .t{flex:1;text-align:left}
#s-welcome:has(.welinapp)>#welBody>.bar>span.navbtn{display:none}
.loginbox.welinapp{max-width:560px!important;margin:8px 0 0!important;padding:0!important}
.loginbox.welinapp .welsub{margin:0 0 14px;color:var(--ink-2)}
.loginbox.welinapp .cgroup{background:var(--tile);border-radius:var(--r-card);padding:18px 20px 20px}
.loginbox.welinapp .pwrules{margin:12px 4px 0}
.loginbox.welinapp #wlGo,.loginbox.welinapp .cta{width:auto;padding:0 26px}
@media (min-width:860px) and (min-height:500px){
  body.navshown #s-welcome:has(.welinapp){background:var(--panel);border-radius:var(--r-panel);margin:4px 12px 12px 12px!important;min-height:calc(100vh - var(--nav,0px) - 16px);padding:8px 28px 40px!important;box-sizing:border-box}
}
@media (min-width:860px) and (min-height:500px) and (not ((hover:hover) and (pointer:fine))){
  body.navshown #s-welcome:has(.welinapp){margin:12px 12px 12px 0!important;min-height:calc(100vh - 24px)}
}
@media (min-width:860px) and (min-height:500px){ body.navshown #s-welcome:has(.welinapp){max-width:none!important;width:auto!important} }
.loginbox.welinapp #wlCancel{margin-left:10px!important}
.loginbox.welinapp #wlGo,.loginbox.welinapp #wlCancel{display:inline-flex;margin-top:16px!important}

/* web-11.33: the + menu */
.addpop{padding:8px!important}
.addpop .addmh{display:none}
.addsec{font-size:.8rem;font-weight:600;color:var(--sub);padding:12px 10px 4px}
.addsec:first-child{padding-top:4px}
.addmenu .cmditem{border-radius:14px;padding:10px 10px}
.addmenu .cmditem b{font-weight:500}
.addmenu .cmditem:hover{background:var(--hi-2)!important}
.addmenu .cmdk-ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
#sheet .addmh{display:block}

/* web-11.34: emails stand out on the activity timeline (Tom): each sits on its own card, with a solid green icon */
:is(#s-selfd,#s-stockd) .tlcard:has(.tlic.in,.tlic.out){isolation:isolate;padding:16px 14px 16px 64px!important;margin:6px 0!important;cursor:pointer}
:is(#s-selfd,#s-stockd) .tlcard:has(.tlic.in,.tlic.out)::after{content:"";position:absolute;left:50px;right:0;top:0;bottom:0;border-radius:18px;background:var(--chip);box-shadow:0 1px 2px rgba(0,0,0,.06);z-index:-1}
:is(#s-selfd,#s-stockd) .tlcard:has(.tlic.in,.tlic.out):hover::after{box-shadow:inset 0 0 0 1.5px var(--line)}
:is(#s-selfd,#s-stockd) .tlcard .tlic.in,:is(#s-selfd,#s-stockd) .tlcard .tlic.out{background:var(--green)!important;color:var(--on-green,#fff)!important;box-shadow:none!important;top:14px!important}
:is(#s-selfd,#s-stockd) .tlcard.new:has(.tlic.in)::after{box-shadow:inset 0 0 0 2px var(--green)}
:is(#s-selfd,#s-stockd) .tlcard:has(.tlic.in,.tlic.out) .tlhead b{font-weight:600}
:root[data-theme="dark"] :is(#s-selfd,#s-stockd) .tlcard .tlic:is(.in,.out){color:#111!important}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) :is(#s-selfd,#s-stockd) .tlcard .tlic:is(.in,.out){color:#111!important} }

/* web-11.35: email composer To / Subject (Tom: forwarding looked cooked). Plain rows inside the grey box with a rule between, not pills stacked on pills */
.sheet .cgroup.emfields{padding:0 18px!important;border-radius:var(--r-card)}
.sheet .emfields .cfield{display:flex!important;align-items:center;gap:12px;padding:0!important;min-height:52px;margin:0!important}
.sheet .emfields .cfield+.cfield{border-top:1px solid var(--rule)!important}
.sheet .emfields .cfield>span{flex:none;width:58px;margin:0!important;font:400 14px/1.2 var(--font);color:var(--ink-3)}
.sheet .emfields .cfield input{flex:1;min-width:0;background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;min-height:50px;height:50px;font:400 16px var(--font);color:var(--ink);text-overflow:ellipsis;box-shadow:none!important;outline:none}
.sheet .emfields .cfield:focus-within>span{color:var(--green)}
.sheet .emfields .cfield input::placeholder{color:var(--ink-3);opacity:1}

/* web-11.36: Calendar side column (Tom): Inspections and Test drives coming up, beside the week / month, collapsible to two icons */
.calsplit{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;align-items:start}
.calmain{min-width:0}
.calside{position:sticky;top:76px;background:var(--tile);border-radius:var(--r-card);padding:14px 12px 12px;max-height:calc(100vh - 100px);overflow:auto;overscroll-behavior:contain}
.calside .cstog{position:absolute;top:12px;right:10px;width:28px;height:28px;border-radius:50%;border:0;background:var(--chip);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;z-index:1}
.calside .cstog:hover{color:var(--ink)}
.cssec+.cssec{margin-top:18px}
.cshd{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;min-height:28px}
.cssec:first-of-type .cshd{padding-right:40px}
.cshd b{font:600 15px/1.2 var(--font);color:var(--ink)}
.csic{width:28px;height:28px;border-radius:50%;background:var(--hi-2);color:var(--green);display:grid;place-items:center;flex:none}
.cscount{margin-left:auto;min-width:24px;height:22px;padding:0 8px;border-radius:var(--r-pill);background:var(--chip);color:var(--ink-2);font:600 12px/22px var(--font);text-align:center}
.cssec:first-of-type .cscount{margin-left:auto}
.csitems{display:flex;flex-direction:column;gap:6px}
.csitem{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;border:0;background:var(--panel);border-radius:16px;padding:12px;color:var(--ink);cursor:pointer;font:inherit}
.csitem:hover{box-shadow:inset 0 0 0 1.5px var(--line)}
.cstile{flex:none;width:44px;height:48px;border-radius:12px;background:var(--chip);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.cstile i{font:500 10.5px/1 var(--font);font-style:normal;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.cstile b{font:600 18px/1 var(--font);color:var(--ink)}
.csbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.csbody b{font:600 14.5px/1.25 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csbody span{font:400 13px/1.3 var(--font);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csbody small{font:400 12.5px/1.35 var(--font);color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.csst{flex:none;align-self:flex-start;height:22px;padding:0 9px;border-radius:var(--r-pill);font:500 11.5px/22px var(--font);white-space:nowrap}
.csst.ok{background:var(--hi-2);color:var(--green)}
.csst.warn{background:rgba(217,140,0,.14);color:#9A6200}
:root[data-theme="dark"] .csst.warn{color:#F0B45A}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .csst.warn{color:#F0B45A} }
.csnone{padding:18px 12px;border-radius:16px;background:var(--panel);color:var(--ink-3);font:400 13.5px/1.35 var(--font);text-align:center}
.csmini{display:none}
/* collapsed: a slim strip with each section's icon and count */
.calsplit:has(.calside.min){grid-template-columns:64px minmax(0,1fr)}
.calside.min{padding:12px 8px;overflow:visible}
.calside.min .cstog{position:static;margin:0 auto 12px;transform:rotate(180deg)}
.calside.min .cshd,.calside.min .csitems{display:none}
.calside.min .csmini{display:flex;flex-direction:column;align-items:center;gap:4px;width:48px;margin:0 auto;padding:10px 0;border:0;border-radius:14px;background:var(--panel);color:var(--ink-2);cursor:pointer}
.calside.min .csmini i{font:600 12px/1 var(--font);font-style:normal;color:var(--ink)}
.calside.min .cssec+.cssec{margin-top:8px}
@media (max-width:1279px){ .calsplit{grid-template-columns:280px minmax(0,1fr)} .calside .cstile{width:40px} .csst{display:none} }
/* phone: empty upcoming sections */
.cell.calnone{color:var(--ink-3);font-size:.9rem}
.calside .cstop{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 12px 4px}
.calside .cstop b{font:600 17px/1.2 var(--font);color:var(--ink)}
.calside .cstop .cstog{position:static}
.cssec:first-of-type .cshd{padding-right:4px}
.calside.min .cstop{justify-content:center;padding:0 0 4px}
.calside.min .cstop b{display:none}
.calside.min .cstop .cstog{margin:0 0 8px}

/* web-11.37: email signature set-up (Tom) */
.sigprev{margin-top:14px;background:#fff;color:#222;border-radius:var(--r-card);padding:18px 18px 16px;overflow:auto;font:small Arial,Helvetica,sans-serif;box-shadow:inset 0 0 0 1px var(--line)}
.sigprev img{max-width:100%}
.sigsw{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sigsw button,.sigcustom{width:34px;height:34px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);position:relative}
.sigsw button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--ink)}
.sigcustom{background:conic-gradient(#e02830,#d97706,#16a34a,#1a73e8,#7c3aed,#e02830);overflow:hidden;display:block}
.sigcustom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
#sgSizeG input[type=range]{flex:1;max-width:220px;accent-color:var(--green)}
.sheet #sgEd .rtebody{min-height:120px}

/* web-11.38: Calendar + : pick a car, then a buyer, for a test drive */
.sheet .pkhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sheet .pklist .cell .lav,#pbList .lav{width:40px;height:40px;flex:none;margin-right:12px;font-size:14px}
.sheet .pklist .cell .lbl,#pbList .cell .lbl{min-width:0}

/* web-11.39: signature set-up tidy (Tom): option pills wrap and fit their words, nothing scrolls sideways */
#sheet:has(#sgPrev){overflow-x:hidden}
#sheet .qopts.sigpills{display:flex;flex-wrap:wrap;gap:8px}
#sheet .qopts.sigpills button{flex:1 1 auto;min-width:0;min-height:42px;padding:0 16px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;line-height:1.2}
#sheet #sgFont.sigpills button{flex:0 1 auto}
#sheet .sigsw{max-width:100%}
#sheet .sigreset{display:block;margin:22px 0 4px;text-align:left}
#sheet .sigprev{max-width:100%}
#sheet .sigprev table{max-width:100%}

/* web-11.40: test lead quick links to the customer's pages */
.testbanner{flex-wrap:wrap}
.testbanner>span{flex:1 1 200px;min-width:0}
.testlinks{flex:1 0 100%;padding-left:25px}
.testlinks small{display:block;font:500 11.5px/1.2 var(--font);color:var(--ink-3);margin:2px 0 8px}
.testlinks>div{display:flex;flex-wrap:wrap;gap:8px}
.tlchip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border:0;border-radius:var(--r-pill);background:var(--panel);color:var(--ink);font:500 13px/1 var(--font);cursor:pointer;white-space:nowrap}
.tlchip:hover{box-shadow:inset 0 0 0 1.5px var(--line)}
.tlchip svg{color:var(--mon,#d97706);margin:0!important}

/* web-11.43: self assessment form (Tom): the step bar was see-through when it stuck to the top (the heading showed
   through it), and the Next bar had a grey box the width of the column. Both are now a full-width frosted strip. */
#s-cust .custstep{position:sticky;top:0;z-index:6;margin:0 -16px!important;padding:12px 16px 12px!important;background:color-mix(in srgb,var(--win) 72%,transparent)!important;-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
#s-cust .custnav{margin:10px -16px 0!important;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px))!important;background:color-mix(in srgb,var(--win) 72%,transparent)!important;-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border-radius:0!important;box-shadow:none!important}
@media (min-width:860px) and (min-height:500px){ #s-cust .custstep,#s-cust .custnav{margin-left:0!important;margin-right:0!important;border-radius:var(--r-card)!important} }

/* web-11.44 (Tom: no grey boxes at all): the step bar sits in the page (not stuck to the top, so nothing scrolls under it)
   and the Next button floats on its own with a soft shadow, no strip behind it */
#s-cust .custstep{position:static!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;margin:0!important;padding:4px 0 8px!important;border-radius:0!important}
#s-cust .custnav{background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;margin:10px 0 0!important;padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px))!important}
#s-cust .custnav .cta{box-shadow:0 8px 24px rgba(0,0,0,.18)}
#s-cust .custnav .cta.soft,#s-cust .custnav .cta:disabled{opacity:1!important;background:color-mix(in srgb,var(--solid) 42%,var(--win))!important;color:var(--on-solid)!important}

/* web-11.45: Start tasks on a phone is a floating card above the dock, in the dock's style (Tom: it looked odd sitting
   flat with a strip of the page showing between it and the dock). tqPlace() sets its bottom. */
@media (max-width:859px),(max-height:499px){
  .tqpanel{left:16px!important;right:16px!important;border-radius:22px!important;border:0!important;background:var(--panel)!important;box-shadow:inset 0 0 0 1px var(--line),var(--shadow-pop,0 12px 32px rgba(0,0,0,.18))!important;padding:12px 14px 14px!important;gap:10px!important}
  .tqpanel .tqprog{position:static!important;height:3px;margin:-2px 0 0}
  .tqpanel .tqtop .tlink{font-size:.85rem}
  .tqpanel .tqbtns .cta{height:44px!important;border-radius:var(--r-pill)!important;font-size:.9rem!important}
  .tqpanel .tqbtns .cta.secondary{background:var(--chip)!important;border:0!important;box-shadow:none!important}
  body.tq #s-selfd,body.tq #s-stockd{padding-bottom:calc(var(--tabh) + 190px)!important}
}
@media (max-width:859px),(max-height:499px){ .tqpanel .tqprog{background:var(--line)!important} }

/* web-11.47 (Tom: the back and ••• circles looked odd floating over the cards when scrolled): on phones they're solid
   floating buttons with a soft shadow, so they read cleanly over whatever scrolls under them */
@media (max-width:859px),(max-height:499px){
  #s-selfd>.bar .navbtn,#s-stockd>.bar .navbtn{background:var(--panel)!important;border:0!important;box-shadow:inset 0 0 0 1px var(--line),0 6px 18px rgba(0,0,0,.12)!important}
}
/* web-11.47: Up next buttons line up: the main action spans the card, the others share the row under it equally, all 44px */
:is(#s-selfd,#s-stockd) .nextcard>.cta:not(.secondary){width:100%!important;min-height:44px}
:is(#s-selfd,#s-stockd) .nextcard .btnrow{gap:8px!important}
:is(#s-selfd,#s-stockd) .nextcard .btnrow>.cta{flex:1 1 0!important;width:auto!important;min-width:0;min-height:44px;padding:0 12px!important;white-space:nowrap}

/* web-11.48 (Tom: "Start selling it" looked out of place): a page's bottom button on phones floats full width just above
   the dock, like the self assessment's Next, with no strip behind it */
@media (max-width:859px),(max-height:499px){
  .stickyfoot{background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;border-radius:0!important;margin:16px 0 0!important;padding:0 0 12px!important}
  .stickyfoot .cta{width:100%!important;min-height:50px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
}

/* web-11.49 (Tom): on phones the lead tiles are smaller and the task tiles match them: same card, padding, height, gap
   and type sizes. A lead tile is a 40px avatar, the name with how long ago, then what's happening and the car on one line. */
@media (max-width:859px),(max-height:499px){
  #selfBody .group{display:flex;flex-direction:column;gap:8px;background:none!important;padding:0!important}
  #selfBody .lrow,#tasksBody .taskrow{min-height:68px;padding:12px 14px!important;gap:12px!important;border-radius:var(--r-card)!important;background:var(--tile)!important;align-items:center!important;margin:0!important;box-shadow:none!important}
  #selfBody .lrow .lav{width:40px!important;height:40px!important;min-width:40px;flex:none;font-size:14px!important}
  #selfBody .lrow .lrmain{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:0;min-width:0;flex:1}
  #selfBody .lrow .lrtop{grid-column:1/-1;display:flex;align-items:baseline;gap:8px;min-width:0}
  #selfBody .lrow .name,#tasksBody .taskrow .tktitle{font:500 16px/1.3 var(--font)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  #selfBody .lrow .lrago{margin-left:auto;flex:none;font:400 12.5px/1 var(--font);color:var(--ink-3)}
  #selfBody .lrow .lrsub,#selfBody .lrow .lrcar,#tasksBody .taskrow .tksub{font:400 13.5px/1.35 var(--font)!important;margin-top:3px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #selfBody .lrow .lrsub{max-width:100%}
  #selfBody .lrow .lrcar{color:var(--ink-3)!important}
  #selfBody .lrow .lrsub+.lrcar::before{content:"";display:inline-block;width:1px;height:11px;background:var(--line);margin:0 8px;vertical-align:-1px}
  #tasksBody .taskrow .tkchk{width:24px;height:24px;flex:none;align-self:center}
  #tasksBody .taskrow .lbl{min-width:0}
  #tasksBody .tklist,#tasksBody .group:has(.taskrow){display:flex;flex-direction:column;gap:8px;background:none!important;padding:0!important}
  #s-self .chips .selbox{width:24px!important;height:24px!important;min-width:24px!important;border-radius:7px!important;background:var(--panel)!important;box-shadow:inset 0 0 0 1.5px var(--line)!important;margin:0 4px 0 0!important;align-self:center}
  #s-self .chips .selbox[aria-pressed="true"]{background:var(--green)!important;box-shadow:none!important}
}

/* web-11.50 (Tom: same on every device): the compact lead tile from web-11.49 on computers and iPads too (leads list and
   For sale list; not when the list is collapsed to just the circles), and the task table rows the same 68px height */
@media (min-width:860px) and (min-height:500px){
  html:not(.leadsmin) :is(#selfBody,#stockBody) .group:has(.lrow){display:flex;flex-direction:column;gap:8px;background:none!important;padding:0!important}
  html:not(.leadsmin) :is(#selfBody,#stockBody) .lrow{min-height:68px;padding:12px 14px!important;gap:12px!important;border-radius:var(--r-card)!important;align-items:center!important;margin:0!important}
  html:not(.leadsmin) :is(#selfBody,#stockBody) .lrow .lav{width:40px!important;height:40px!important;min-width:40px;flex:none;font-size:14px!important}
  html:not(.leadsmin) :is(#selfBody,#stockBody) .lrow .lrmain{display:grid;grid-template-columns:auto minmax(0,1fr);min-width:0;flex:1}
  html:not(.leadsmin) :is(#selfBody,#stockBody) .lrow .lrtop{grid-column:1/-1;display:flex;align-items:baseline;gap:8px;min-width:0}
  html:not(.leadsmin) :is(#selfBody,#stockBody) .lrow .name{font:500 16px/1.3 var(--font)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  html:not(.leadsmin) :is(#selfBody,#stockBody) .lrow .lrago{margin-left:auto;flex:none;font:400 12.5px/1 var(--font)}
  html:not(.leadsmin) :is(#selfBody,#stockBody) .lrow .lrsub,html:not(.leadsmin) :is(#selfBody,#stockBody) .lrow .lrcar{font:400 13.5px/1.35 var(--font)!important;margin-top:3px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html:not(.leadsmin) :is(#selfBody,#stockBody) .lrow .lrcar{color:var(--ink-3)!important}
  html:not(.leadsmin) :is(#selfBody,#stockBody) .lrow .lrsub+.lrcar::before{content:"";display:inline-block;width:1px;height:11px;background:var(--line);margin:0 8px;vertical-align:-1px}
  #s-tasks .tktable tbody td{height:68px;box-sizing:border-box;padding-top:10px!important;padding-bottom:10px!important}
  #s-tasks .tktable .tksub1,#s-tasks .tktable .tkleadc small,#s-tasks .tktable .tkleadc .tsub{font-size:13.5px}
}
@media (max-width:859px),(max-height:499px){ #stockBody .lrow .lrsub+.lrcar::before{content:"";display:inline-block;width:1px;height:11px;background:var(--line);margin:0 8px;vertical-align:-1px} }

/* web-11.51: the proposal page's "Questions? Call" is a centred link with a phone icon (Tom: the half-width pill sat out of line) */
#offerBody a.offcall{display:flex!important;align-items:center;justify-content:center;gap:8px;width:max-content!important;max-width:100%;margin:22px auto 8px!important;padding:10px 18px!important;min-height:0!important;border-radius:var(--r-pill);background:none!important;box-shadow:none!important;border:0!important;color:var(--ink)!important;font:500 15px/1.2 var(--font);text-decoration:none}
#offerBody a.offcall svg{color:var(--green)}
#offerBody a.offcall:hover{background:var(--chip)!important}

/* web-11.52 (Tom: Overdue shouldn't be bold on Tasks when it isn't on Leads): one rule everywhere (DESIGN.md "Status
   words"): Overdue / Today / due dates are coloured, never bold, and a tile's second line is all regular weight */
.ctx.today,.ctx.late,.tksub .late,.tksub .today,.bline.late,.bline.today,.tktable td.late,.tktable td.today,.tqmeta .late,.tqmeta .today,.stbl .late,.stbl .warn,.lrow .lrsub.late{font-weight:400!important}
.tksub b,#tasksBody .tksub b{font-weight:400!important}
.awhy,.acard.late .awhy,.acard.today .awhy,.ptrow.due small{font-weight:400!important}

/* web-11.53 (Tom: apply the tile rules to Pipeline): attention cards and stage rows follow DESIGN.md "Consistency":
   68px tiles, 40px icon or count circle, 16px/500 name, one 13.5px/400 second line (status first, coloured, then the car
   after a thin divider), and a small neutral action pill */
.acard{min-height:68px;padding:12px 14px!important;gap:12px!important;border-radius:var(--r-card)!important;align-items:center!important}
.acard .aic{width:40px!important;height:40px!important;flex:none}
.acard .ainfo{display:grid!important;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"n n" "w c";align-items:baseline;min-width:0;flex:1}
.acard .aname{grid-area:n;font:500 16px/1.3 var(--font)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acard .awhy{grid-area:w;font:400 13.5px/1.35 var(--font)!important;margin-top:3px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.acard .acar{grid-area:c;font:400 13.5px/1.35 var(--font)!important;color:var(--ink-3)!important;margin-top:3px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.acard .acar:not(:empty)::before{content:"";display:inline-block;width:1px;height:11px;background:var(--line);margin:0 8px;vertical-align:-1px}
.acard .abtn{flex:none;height:32px!important;min-height:32px!important;padding:0 14px!important;border-radius:var(--r-pill)!important;background:var(--chip)!important;color:var(--ink)!important;border:0!important;box-shadow:none!important;font:500 13px/32px var(--font)!important}
.ptlrow{min-height:68px;padding:12px 14px!important;gap:12px!important}
.ptlrow .ptlcount{width:40px!important;height:40px!important;flex:none;font:500 15px/40px var(--font)!important}
.ptlrow .ptlname{font:500 16px/1.3 var(--font)!important}
.ptlrow .ptlsub{font:400 13.5px/1.35 var(--font)!important;margin-top:3px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptlitem{min-height:60px;padding:10px 12px!important;gap:12px!important}
.ptlitem .bav.sm{width:40px!important;height:40px!important;font-size:14px!important}
.ptlitem .pin{font:500 16px/1.3 var(--font)!important}
.ptlitem .lbl{display:grid!important;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"n n" "w c";align-items:baseline;min-width:0}
.ptlitem .pin{grid-area:n;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptlitem .pix{grid-area:w;font:400 13.5px/1.35 var(--font)!important;margin-top:3px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.ptlitem .pic{grid-area:c;font:400 13.5px/1.35 var(--font)!important;color:var(--ink-3)!important;margin-top:3px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ptlitem .pix:not(:empty)+.pic::before,.ptlitem .pic:has(+.pix:not(:empty))::before{content:"";display:inline-block;width:1px;height:11px;background:var(--line);margin:0 8px;vertical-align:-1px}
.ptl{display:flex!important;flex-direction:column;gap:8px;background:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important}
.ptl>.ptlrow{border-radius:var(--r-card)!important;background:var(--tile)!important;border:0!important;margin:0!important}
.ptl>.ptlrow.open{border-radius:var(--r-card) var(--r-card) 0 0!important}
.ptl>.ptlitems{margin-top:-8px!important;background:var(--tile);border-radius:0 0 var(--r-card) var(--r-card);padding:0 8px 8px!important;display:flex;flex-direction:column;gap:6px}

/* web-11.54 (Tom): lead and car tiles have the same arrow on the right as task tiles (hidden when the list is collapsed
   to circles, and while ticking leads) */
.lrow>.chev{flex:none;align-self:center;width:8px;height:13px;color:var(--na);margin-left:2px}
html.leadsmin :is(body.split-leads,body.split-stock) .lrow>.chev,.lrow.selecting>.chev{display:none}
/* the arrow gets its own column (the tile is a grid), and the For sale tiles on phones get the compact tile too */
html:not(.leadsmin) .lrow,html:not(.leadsmin) .cell.lrow,body:not(.split-leads):not(.split-stock) .lrow{display:grid!important;grid-template-columns:40px minmax(0,1fr) auto!important;grid-template-areas:"av main chev"!important;align-items:center!important}
.lrow>.lav{grid-area:av} .lrow>.lrmain{grid-area:main} .lrow>.chev{grid-area:chev}
.lrow.selecting{grid-template-columns:auto 40px minmax(0,1fr)!important;grid-template-areas:"ck av main"!important}
.lrow.selecting>.bulkck{grid-area:ck}
@media (max-width:859px),(max-height:499px){
  #stockBody .group:has(.lrow){display:flex;flex-direction:column;gap:8px;background:none!important;padding:0!important}
  #stockBody .lrow{min-height:68px;padding:12px 14px!important;gap:12px!important;border-radius:var(--r-card)!important;background:var(--tile)!important;margin:0!important}
  #stockBody .lrow .lav{width:40px!important;height:40px!important;min-width:40px;font-size:14px!important}
  #stockBody .lrow .lrmain{display:grid;grid-template-columns:auto minmax(0,1fr);min-width:0}
  #stockBody .lrow .lrtop{grid-column:1/-1;display:flex;align-items:baseline;gap:8px;min-width:0}
  #stockBody .lrow .name{font:500 16px/1.3 var(--font)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  #stockBody .lrow .lrago{margin-left:auto;flex:none;font:400 12.5px/1 var(--font);color:var(--ink-3)}
  #stockBody .lrow .lrsub,#stockBody .lrow .lrcar{font:400 13.5px/1.35 var(--font)!important;margin-top:3px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #stockBody .lrow .lrcar{color:var(--ink-3)!important}
}
html .lrow.selecting,html .cell.lrow.selecting{grid-template-columns:24px minmax(0,1fr)!important;grid-template-areas:"ck main"!important}
html .lrow.selecting>.lav{display:none!important}
html .lrow.selecting>.bulkck{grid-area:ck;align-self:center;margin:0!important}

/* web-11.57 (Tom: Run valuation and Value it yourself touched): buttons in a card follow one rule (DESIGN.md "Buttons in
   cards"): stacked full width, 10px apart, 44px tall; the main action first. Covers the valuation card and Up next. */
.valcard>.cta,.valcard>.navbtn.valfinish,.valcard>div>.cta{display:flex!important;align-items:center;justify-content:center;width:100%!important;min-height:44px;margin:10px 0 0!important;box-sizing:border-box}
.valcard>.cta:first-of-type,.valcard>.navbtn.valfinish:first-of-type{margin-top:14px!important}
:is(#s-selfd,#s-stockd) .nextcard>.navbtn{display:flex!important;align-items:center;justify-content:center;width:100%!important;min-height:44px;margin:0!important;box-sizing:border-box}

/* web-11.58: the email composer's Write / Preview switch; the preview is the real email on white */
.sheet .evmode{max-width:260px}
.sheet .evprev{background:#fff;border-radius:var(--r-card);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.sheet .evframe{display:block;width:100%;border:0;background:#fff;min-height:220px}

/* web-11.59 (Tom): every unticked tick box has the same fill as on Tasks (white in light mode), on every page */
.selbox:not([aria-pressed="true"]),#s-self .chips .selbox:not([aria-pressed="true"]),#s-stock .chips .selbox:not([aria-pressed="true"]),.bulkck:not(.on),#s-tasks .tkpick:not(.on){background:var(--chip)!important;box-shadow:inset 0 0 0 1.5px var(--line)!important}

/* web-11.60 (Tom: the details and call/text/email need their own box): the top of a lead or car page sits in the same
   card as Selling process, on every device */
:is(#s-selfd,#s-stockd) .lhero{padding:20px 22px!important;border-radius:var(--r-card)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent)!important;background:color-mix(in srgb,var(--chip) 30%,transparent)!important;margin-top:4px!important}
@media (max-width:859px),(max-height:499px){ :is(#s-selfd,#s-stockd) .lhero{padding:18px 16px!important} }

/* web-11.60 (Tom: make it clear everything below belongs to this lead, not another box): the top of a lead or car page
   is a solid green header (name, stage, rego, facts, call / text / email), so the page reads as theirs */
:is(#s-selfd,#s-stockd) .lhero{background:var(--hd)!important;color:#fff!important;border-radius:24px!important;padding:22px!important;box-shadow:0 10px 28px color-mix(in srgb,var(--hd) 24%,transparent)!important;margin-top:4px!important}
:is(#s-selfd,#s-stockd) .lhero :is(.lname,h1,h2,b,.lfields,.lfields span,.lfields b){color:#fff!important}
:is(#s-selfd,#s-stockd) .lhero .lfic{color:rgba(255,255,255,.7)!important}
:is(#s-selfd,#s-stockd) .lhero .lh1>.lav{background-color:rgba(255,255,255,.14)!important;color:#fff!important;box-shadow:0 0 0 3px rgba(255,255,255,.85)!important}
:is(#s-selfd,#s-stockd) .lhero .ltags>*{background:rgba(255,255,255,.14)!important;color:#fff!important;border-color:rgba(255,255,255,.55)!important;box-shadow:none!important}
:is(#s-selfd,#s-stockd) .lhero .ltags svg{color:#fff!important}
:is(#s-selfd,#s-stockd) .lhero .lcontact button,:is(#s-selfd,#s-stockd) .lhero .lcontact a{background:rgba(255,255,255,.12)!important;color:#fff!important;border:0!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)!important}
:is(#s-selfd,#s-stockd) .lhero .lcontact :is(#ldCall,#skCall){background:#fff!important;color:var(--hd)!important;box-shadow:none!important}
:is(#s-selfd,#s-stockd) .lhero .lcontact :is(button,a):hover{background:rgba(255,255,255,.22)!important}
:is(#s-selfd,#s-stockd) .lhero .lhmore,:is(#s-selfd,#s-stockd) .lhero .lhshare{color:#fff!important;background:rgba(255,255,255,.12)!important;box-shadow:none!important}
@media (max-width:859px),(max-height:499px){ :is(#s-selfd,#s-stockd) .lhero{padding:20px 18px!important} }
:is(#s-selfd,#s-stockd) .lhero .lfields *:not(svg):not(path){color:#fff!important;opacity:1!important}
:is(#s-selfd,#s-stockd) .lhero .lfields .lfic,:is(#s-selfd,#s-stockd) .lhero .lfields .lfic *{color:rgba(255,255,255,.7)!important}
:is(#s-selfd,#s-stockd) .lhero .lcontact :is(#ldCall,#skCall) *{color:var(--hd)!important;stroke:currentColor}

/* web-11.61 (Tom: buttons in a pop-up out of line): a lone button in a pop-up spans it, and buttons sharing a row are
   equal widths, all the same height and 10px apart (DESIGN.md "Buttons in cards" applies to pop-ups too) */
.sheet>.cta,.sheet>button.cta{display:flex!important;align-items:center;justify-content:center;width:100%!important;min-height:48px;box-sizing:border-box}
.sheet .btns12{display:flex!important;gap:10px!important}
.sheet .btns12>.cta,.sheet .btns12>button{flex:1 1 0!important;width:auto!important;min-width:0;min-height:48px;margin:0!important}
.sheet>.cta+.btns12,.sheet>.cta+.cta{margin-top:10px!important}
.sheet>p.fine{padding-left:0!important;padding-right:0!important;margin-left:0!important}

/* web-11.62 (Tom): on phones the gap under the green header matches the gap between the cards below it (18px) */
@media (max-width:859px),(max-height:499px){
  :is(#s-selfd,#s-stockd) .ldtop{margin-bottom:0!important;padding-bottom:0!important}
  :is(#s-selfd,#s-stockd) .ldcols,:is(#s-selfd,#s-stockd) .ldmain{margin-top:0!important;padding-top:0!important}
  :is(#s-selfd,#s-stockd) .ldmain>.track:first-child,:is(#s-selfd,#s-stockd) .track{margin-top:18px!important}
}

/* web-11.63 (Tom: on iPad move the buttons to the right): where the header is narrow (the lead beside the list on an
   iPad), the actions sit on the right as a block of round buttons (three to a row) beside the name and facts, instead
   of a row underneath. Only very narrow headers (under 480px, e.g. a 1024 iPad with the list open) still stack. */
@container ldtop (max-width:660px){
  #s-selfd .lhero,#s-stockd .lhero,body.split-leads #s-selfd .lhero,body.split-stock #s-stockd .lhero{grid-template-columns:auto minmax(0,1fr) auto!important;grid-template-areas:"av id act" "av facts act"!important;align-items:center}
  #s-selfd .lcontact,#s-stockd .lcontact,body.split-leads #s-selfd .lcontact,body.split-stock #s-stockd .lcontact{grid-area:act!important;justify-content:flex-end!important;flex-wrap:wrap!important;max-width:142px;gap:8px!important;align-self:center;align-content:center}
  #s-selfd .lcontact :is(button,a),#s-stockd .lcontact :is(button,a){width:42px!important;min-width:42px!important;height:42px!important;padding:0!important;justify-content:center}
  #s-selfd .lcontact :is(button,a)>span,#s-stockd .lcontact :is(button,a)>span{display:none!important}
}
@container ldtop (max-width:480px){
  #s-selfd .lhero,#s-stockd .lhero,body.split-leads #s-selfd .lhero,body.split-stock #s-stockd .lhero{grid-template-columns:auto minmax(0,1fr)!important;grid-template-areas:"av id" "av facts" "av act"!important}
  #s-selfd .lcontact,#s-stockd .lcontact,body.split-leads #s-selfd .lcontact,body.split-stock #s-stockd .lcontact{justify-content:flex-start!important;max-width:none}
}

/* web-11.64 (Tom: the task in Upcoming vanished into the background): tasks under Upcoming on a lead or car are tiles,
   like on the Tasks page and like the emails in Activity: their own card (--chip, white in light mode), 18px corners,
   a clear tick circle and the arrow */
:is(#s-selfd,#s-stockd) .tlupb{display:flex;flex-direction:column;gap:8px}
:is(#s-selfd,#s-stockd) .tlupb .group{display:flex;flex-direction:column;gap:8px}
:is(#s-selfd,#s-stockd) .tlupb .taskrow,:is(#s-selfd,#s-stockd) .tlupb .cell.taskrow{background:var(--chip)!important;border-radius:18px!important;padding:12px 14px!important;min-height:64px;align-items:center!important;box-shadow:0 1px 2px rgba(0,0,0,.06)!important;cursor:pointer}
:is(#s-selfd,#s-stockd) .tlupb .taskrow:hover{box-shadow:inset 0 0 0 1.5px var(--line)!important}
:is(#s-selfd,#s-stockd) .tlupb .tkchk:not(.on){width:24px;height:24px;border:0!important;box-shadow:inset 0 0 0 1.5px var(--ink-3)!important;align-self:center;margin:0}
:is(#s-selfd,#s-stockd) .tlupb .tktitle{font:500 16px/1.3 var(--font)!important}
:is(#s-selfd,#s-stockd) .tlupb .tksub{font:400 13.5px/1.35 var(--font)!important}

/* web-11.65 (Tom: spacing feels off under the tabs): Upcoming and Activity boxes have even padding (18px all round),
   sit 18px apart like every other card, the header is 12px above its first item, "+ Task" lines up with the tile edge,
   and the Activity actions (Note, Email, Filter) start in line with the title */
:is(#s-selfd,#s-stockd) .tlbox{padding:18px!important;margin:0!important}
:is(#s-selfd,#s-stockd) .tlbox+.tlbox{margin-top:18px!important}
:is(#s-selfd,#s-stockd) .tlhd{margin:0 0 12px!important;min-height:34px}
:is(#s-selfd,#s-stockd) .tlupbox .tlhd>button:last-child,:is(#s-selfd,#s-stockd) .tlupbox .tlhd .tlink:last-child{padding-right:0!important;margin-right:0!important}
:is(#s-selfd,#s-stockd) .tlactbox .tlhd .fa+*{margin-left:-12px!important}
:is(#s-selfd,#s-stockd) .ltabs{margin-top:18px!important;margin-bottom:16px!important}
@media (max-width:859px),(max-height:499px){ :is(#s-selfd,#s-stockd) .ldmain>.ltabs,:is(#s-selfd,#s-stockd) .ltabs{margin-top:22px!important;margin-bottom:18px!important} }
@media (max-width:859px),(max-height:499px){ html body :is(#s-selfd,#s-stockd) .ldside>.segctl.ltabs{margin-top:22px!important;margin-bottom:18px!important} }

/* web-11.66 (Tom): when we're waiting on the customer, Up next shows a "Waiting" pill with three softly bouncing dots */
@keyframes waitdot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@keyframes waitsheen{0%{background-position:120% 0}100%{background-position:-120% 0}}

/* web-11.67 (Tom): one line, "Waiting on Cemil", led by three bouncing dots (no separate pill); also on the car page's
   waiting-on-the-seller banners. The card keeps its slow sheen. */
.wdots{display:inline-flex;align-items:center;gap:4px;margin-right:10px;vertical-align:middle;flex:none}
.wdots i{display:block;width:6px;height:6px;border-radius:50%;background:var(--green);animation:waitdot 1.4s ease-in-out infinite}
.wdots i:nth-child(2){animation-delay:.18s} .wdots i:nth-child(3){animation-delay:.36s}
:root[data-theme="dark"] .wdots i{background:var(--green-soft)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .wdots i{background:var(--green-soft)} }
.waithead{display:flex!important;align-items:center}
.nextcard:has(.waithead){position:relative;overflow:hidden}
.nextcard:has(.waithead)::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,color-mix(in srgb,#fff 22%,transparent) 50%,transparent 70%);background-size:250% 100%;opacity:.6;animation:waitsheen 3.6s ease-in-out infinite;pointer-events:none}
.waitwarn .wdots i{background:currentColor}
.waitwarn{align-items:center}
@media (prefers-reduced-motion:reduce){ .wdots i,.nextcard:has(.waithead)::after{animation:none} }

/* web-11.69: Add to Home Screen sheet (numbered steps with the real icons) and the phone-browser banner above the dock */
.a2steps{list-style:none;margin:0;padding:6px 14px;background:var(--tile);border-radius:var(--r-card);counter-reset:a2}
.a2steps li{display:flex;align-items:center;gap:12px;padding:12px 0;font:400 15px/1.4 var(--font);color:var(--ink);counter-increment:a2}
.a2steps li+li{border-top:1px solid var(--rule)}
.a2steps li::before{content:counter(a2);flex:none;width:22px;height:22px;border-radius:50%;background:var(--solid);color:var(--on-solid);display:grid;place-items:center;font:600 12px/1 var(--font)}
.a2steps .a2ic{flex:none;width:34px;height:34px;border-radius:10px;background:var(--chip);color:#1A73E8;display:grid;place-items:center}
.a2steps b{font-weight:600}
.a2other{margin-top:14px} .a2other summary{cursor:pointer;color:var(--ink-2);font:500 14px/1.4 var(--font);padding:6px 0;list-style:none} .a2other summary::-webkit-details-marker{display:none}
.a2other summary::after{content:" ›";} .a2other[open] summary::after{content:" ⌄"}
.a2done{display:flex;align-items:center;gap:8px;color:var(--green);font:500 14px/1.4 var(--font);margin:6px 0 0}
.a2bar{position:fixed;left:16px;right:16px;bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px) + 20px);z-index:58;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line),0 12px 32px rgba(0,0,0,.18);animation:a2in .35s ease-out}
@keyframes a2in{from{transform:translateY(16px);opacity:0}}
.a2bic img{width:40px;height:40px;border-radius:10px;display:block}
.a2bt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.a2bt b{font:500 14px/1.25 var(--font);color:var(--ink)} .a2bt small{font:400 12.5px/1.3 var(--font);color:var(--ink-3)}
.a2go{flex:none;height:36px;padding:0 16px;border:0;border-radius:var(--r-pill);background:var(--solid);color:var(--on-solid);font:500 14px/1 var(--font);cursor:pointer}
.a2x{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
/* web-12.73: on iPad (only tablets get the banner at this width) a card at the bottom right, clear of the sidebar */
@media (min-width:860px) and (min-height:500px){ .a2bar{left:auto;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));width:440px;max-width:calc(100vw - var(--side) - 48px)} }
body.tq .a2bar,body.sheetopen .a2bar{display:none}
.sheet .sheetfoot>.cta:only-child{width:100%!important;flex:1 1 auto}
.a2steps .a2ic:has(img){background:none;overflow:hidden}

/* web-11.71: self assessment requirements: what's still needed shows above Next; front photo marked Needed, dashboard Helps */
.custmiss{flex-basis:100%;order:-1;margin:0 0 8px!important;font:400 13.5px/1.4 var(--font);color:var(--ink-2);text-align:center}
.custnav{flex-wrap:wrap}
.custmiss.shake{animation:cmshake .35s}
@keyframes cmshake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.pslot{position:relative}
.pslot .pneed{position:absolute;top:8px;right:8px;height:20px;padding:0 8px;border-radius:999px;font:500 11px/20px var(--font);background:var(--chip);color:var(--ink-2)}
.pslot .pneed.must{background:color-mix(in srgb,var(--green) 16%,var(--panel));color:var(--green)}
.offerproof{margin:8px 2px 0!important}
#s-cust .custmiss{flex-basis:100%!important;max-width:100%;margin:0 0 10px!important}
#s-cust .custmiss>span{display:inline-block;max-width:100%;padding:8px 14px;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line),0 6px 18px rgba(0,0,0,.08)}

/* web-11.72: a self assessment they've started but not sent */
.sadraftbar{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-card);background:color-mix(in srgb,var(--green) 10%,var(--tile))}
.sadraftbar .wdots{margin-top:7px}
.sadraftbar b{display:block;font:500 15px/1.3 var(--font);color:var(--ink)} .sadraftbar span{display:block;font:400 13.5px/1.4 var(--font);color:var(--ink-2);margin-top:2px}
.sadraftph{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.sadraftph button{border:0;padding:0;background:var(--tile);border-radius:12px;overflow:hidden;cursor:pointer;text-align:left}
.sadraftph img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.sadraftph span{display:block;padding:6px 8px;font:400 12.5px/1.2 var(--font);color:var(--ink-2)}
/* web-11.74: plan picker and the valuation's sell / buy switch */
.planpick .cell{min-height:60px}
.planpick .planon{flex:0 0 auto;display:inline-flex;color:var(--ok);margin-left:10px}
.planpick .cell[aria-pressed="true"] .lbl{font-weight:600}
.planpick .cell:disabled{opacity:.55;cursor:default}
.valcard .vdeal{margin-top:12px}
.valcard .vdeal button{padding:9px 4px;font-size:.85rem}
/* web-11.76: buying a car outright, the paperwork at handover */
.pucard{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:var(--r-card,16px);background:var(--hd);color:#fff;margin:4px 0 6px}
.pucard b{font-size:1.05rem;font-weight:600} .pucard span{font-size:.85rem;opacity:.85;line-height:1.4}
.pugroup{padding:6px 16px}
.purow{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}
.purow:last-child{border-bottom:0}
.pulbl{font-size:.9rem;font-weight:500}
.pugroup .cgroup{margin:0 0 6px}
.pugroup>.cfield{padding:12px 0}
.puck{display:flex;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);margin:0}
.pusig{margin-top:14px} .pusig .pulbl{margin:0 2px 8px}
.pubank{margin-top:10px}
#buyBody .notebox .tlink{font:inherit}
/* web-11.77: an owned car's steps */
.ownsteps .cell{gap:12px} .ownsteps .cell:disabled{opacity:.5;cursor:default}
.ownsteps .ckm{flex:0 0 auto}
.pugroup .qopts{display:flex;flex-wrap:wrap;gap:8px} .pugroup .qopts .opt{flex:0 1 auto;min-width:0;white-space:normal}
.nextcard .dealpick{display:flex;flex-direction:column;gap:8px;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.nextcard .dealpick>span{font-size:.85rem}
.nextcard .dealpick .segctl button{padding:9px 4px;font-size:.88rem}
/* web-11.80: handover days on the calendar (all day) */
.wkad{display:flex;flex-direction:column;gap:4px;padding:4px 3px;border-bottom:.5px solid var(--hair);box-sizing:border-box}
.wkadlbl{font:500 11.5px/1 var(--font);color:var(--ink-3);text-align:right;padding:10px 8px 0 0}
.wkho{display:flex;align-items:center;gap:4px;height:24px;min-width:0;padding:0 7px;border:0;border-radius:8px;background:var(--hi-2);color:var(--ink);font:500 .72rem/1 var(--font);text-align:left;cursor:pointer}
.wkho span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wkho svg,.mev.ho svg{flex:none;color:var(--green)}
.mev.ho{background:var(--hi-2);color:var(--ink);cursor:pointer}
.mev.ho svg{vertical-align:-1px;margin-right:4px}
.wkho.done,.mev.ho.done{opacity:.6}
/* web-11.80: a disabled button floating at the bottom was 40% see-through, so the form scrolled visibly behind it
   ("Finish the purchase", "Finish: mark it sold"); it's an opaque grey pill instead, on every floating footer */
.stickyfoot .cta:disabled,.footbar .cta:disabled{opacity:1!important;background:color-mix(in srgb,var(--ink) 12%,var(--panel))!important;color:var(--ink-3)!important;box-shadow:none!important}
/* web-11.80: the Up next deal switch spans the card, like the valuation card's */
.nextcard .dealpick{align-self:stretch;justify-self:stretch;width:100%;box-sizing:border-box}
.nextcard .dealpick .segctl{width:100%}
/* web-11.81: the waiting sheen moved to ::after; on ::before it collided with the "Up next" title on the lead and car pages
   and drew a lopsided light box over the card */
/* web-11.81 (Tom: a long car name ran under the call / text / email circles on the iPad): each fact in the record
   header may shrink and wrap, at most two lines, so it stays in its own column */
:is(#s-selfd,#s-stockd) .lfields{min-width:0;max-width:100%}
:is(#s-selfd,#s-stockd) .lfields .lf{min-width:0;max-width:100%}
:is(#s-selfd,#s-stockd) .lfields .lf dd{min-width:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
:is(#s-selfd,#s-stockd) .lname{overflow-wrap:anywhere;min-width:0}
/* web-11.81 (Tom: on the iPad the bell should be in the same spot on every page): touch screens with the sidebar show
   Notifications in its bottom group (Search, Notifications, Settings, Collapse) and drop the bells on page headers.
   The computer's top bar keeps its round bell without a label; phones keep the header bells. */
#tabbar .navbell .tlab{display:none}
@media (min-width:860px) and (min-height:500px) and (not ((hover:hover) and (pointer:fine))){
  #tabbar .tab.navbell{display:flex!important}
  #tabbar .tab.navbell .tlab{display:inline}
  html.sidemin #tabbar .tab.navbell .tlab{display:none}
  #tabbar .tab.navbell .bwrap{position:relative;display:inline-flex}
  #tabbar .tab.navbell{box-shadow:none!important;margin-left:0!important;width:auto!important;justify-content:flex-start!important;align-self:flex-start!important;font-size:15px!important;padding:0 8px!important}
  #tabbar .tab.navbell .bwrap{width:auto!important;height:auto!important;display:inline-flex!important}
  html.sidemin #tabbar .tab.navbell{width:46px!important;padding:0!important;justify-content:center!important;align-self:center!important;font-size:0!important}
  html.sidemin #tabbar .tab.navbell{margin:0 auto!important}
  #tabbar .tab.navbell .bdot{position:absolute;top:4px;right:4px}
  .screen>.bar .bellbtn{display:none!important}
}
/* web-11.81: collapsed sidebar: no dashes for the group headings, and the circles centred under the logo (the inner
   padding left 32px for 46px circles, pushing them 7px right) */
@media (min-width:860px) and (min-height:500px){
  html.sidemin .tabbar .navgrp{display:none!important}
  html.sidemin .tabbar .in{padding-left:0!important;padding-right:0!important}
}
/* web-11.81: a long car name in the record header wraps (two lines at most) instead of being cut to one */
:is(#s-selfd,#s-stockd) .lhero .lcarname{white-space:normal}
/* web-11.81: Reports' dashboard switch (Selling for owners / Buying cars) */

/* ===== web-11.81 Home ===== */
/* phones: Home takes Settings' place in the tab bar; Settings is the gear on Home */
@media (max-width:859px),(max-height:499px){ .tabbar .tab[data-tab="settings"]{display:none!important} }
@media (min-width:860px) and (min-height:500px){ #homeSet{visibility:hidden} }
#s-home>.bar .t{visibility:hidden}
#homeBody{max-width:1160px;padding-bottom:40px}
.homehero{background:var(--hd);color:#fff;border-radius:24px;padding:22px 22px 18px;margin:4px 0 18px;box-shadow:0 10px 28px color-mix(in srgb,var(--hd) 24%,transparent)}
.hhdate{font:500 13px/1.3 var(--font);color:rgba(255,255,255,.78)}
.hhtitle{font:400 26px/1.2 var(--font);letter-spacing:-.01em;margin:6px 0 18px;color:#fff}
.hstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hstat{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-width:0;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#fff}
.hstat b{font:600 24px/1.15 var(--font)}
.hstat span{font:400 12.5px/1.3 var(--font);color:rgba(255,255,255,.85)}
.hstat:hover{background:rgba(255,255,255,.2)}
.hstat:focus-visible{outline:2px solid #fff;outline-offset:2px}
.homecols{display:grid;gap:16px;align-items:start}
.homecol{display:flex;flex-direction:column;gap:16px;min-width:0}
.homecard{background:var(--tile);border-radius:24px;padding:16px 16px 8px}
.hchead{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.hcic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--hi-2);color:var(--green)}
.hchead h2{flex:1;min-width:0;margin:0;font:500 18px/1.25 var(--font);color:var(--ink)}
.hccount{font:500 14px/1 var(--font);color:var(--ink-3);margin-left:4px}
.hcmore{flex:none}
.hcbody{display:flex;flex-direction:column}
.hrow{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 2px;border-top:1px solid var(--rule);cursor:pointer}
.hcbody>.hrow:first-child{border-top:0}
.hrow:focus-visible{outline:2px solid var(--green);outline-offset:-2px;border-radius:12px}
.hrtime{flex:none;width:56px;font:500 13px/1.2 var(--font);color:var(--ink-2)}
.hric{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--chip);color:var(--ink-2)}
.hrtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hrtx b{font:500 15px/1.3 var(--font);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrtx small{font:400 13px/1.3 var(--font);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrow>svg:last-child{flex:none;color:var(--ink-3)}
.hrow.done{opacity:.6}
.hcempty{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:6px 2px 14px;color:var(--ink-2);font-size:14px}
.hcempty p{margin:0}
.hcmorebtn{all:unset;cursor:pointer;padding:12px 2px;color:var(--green);font:500 14px/1 var(--font)}
.homeattn{display:flex;flex-direction:column;gap:8px;padding:2px 0 10px}
.homecard .taskrow{margin-bottom:8px}
@media (min-width:600px){ .hstats{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:860px) and (min-height:500px){
  .homehero{padding:28px 30px 24px;margin-top:8px}
  .hhtitle{font-size:32px}
  .homecard{padding:20px 20px 10px}
}
@media (min-width:1100px) and (min-height:500px){ .homecols{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* web-11.81 (Tom: green only really showed on the lead page): every main page gets a soft wash of the brand colour
   across its top, fading into the page, like the lead and car pages. Follows the App colour setting (--green). */
:root{--wash:linear-gradient(180deg,color-mix(in srgb,var(--green) 13%,var(--panel)) 0,color-mix(in srgb,var(--green) 5%,var(--panel)) 220px,var(--panel) 420px)}
@media (min-width:860px) and (min-height:500px){
  #s-home,#s-self,#s-pipe,#s-cal,#s-stock,#s-tasks,#s-reports,#s-plat,#s-settings,#s-reg,#s-prices{background:var(--wash),var(--panel)!important}
}
@media (max-width:859px),(max-height:499px){
  body:has(#s-home:not([hidden])),body:has(#s-self:not([hidden])),body:has(#s-cal:not([hidden])),body:has(#s-stock:not([hidden])),body:has(#s-tasks:not([hidden])),body:has(#s-settings:not([hidden])),body:has(#s-pipe:not([hidden])){background:var(--wash) no-repeat,var(--panel)}
}
/* App colour swatches */
.brandsw{display:flex;flex-wrap:wrap;gap:12px;padding:6px 16px 16px}
.bsw{position:relative;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--sw);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.bsw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--tile),0 0 0 4px var(--sw)}
.bsw:disabled{cursor:default;opacity:.6}
.bswown{display:grid;place-items:center;overflow:hidden;background:var(--chip);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.bswown input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
@media (min-width:860px) and (min-height:500px){ #s-home>.bar{display:none!important} #s-home{padding-top:18px!important} }
@media (min-width:860px) and (min-height:500px) and (hover:hover) and (pointer:fine){ .tabbar .tab.navbell .tlab{display:none!important} }
@media (max-width:859px),(max-height:499px){ #s-home>.bar:not(.scrolled){background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important} }
/* web-11.82 (Tom): the sidebar's Notifications row looks selected while its list is open, like the other rows */
@media (min-width:860px) and (min-height:500px) and (not ((hover:hover) and (pointer:fine))){
  #tabbar .tab.navbell[aria-expanded="true"]{background:var(--hi)!important;color:var(--ink)!important;font-weight:500}
  #tabbar .tab.navbell[aria-expanded="true"] svg{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 40%,transparent)!important;color:var(--green)}
}
@media (min-width:860px) and (min-height:500px) and (not ((hover:hover) and (pointer:fine))){ html:not(.sidemin) #tabbar .tab.navbell{border-radius:var(--r-pill)!important;min-height:46px!important;height:auto!important} }
/* web-11.83 (Tom, iPad: the buttons in Up next looked wrong).
   The deal switch on the green Up next / valuation cards: a darker see-through track with the chosen side in see-through
   white, so it sits on the card's green in light and dark (it was the plain grey chip, which clashed in dark mode), and
   no focus ring after a tap (iPad Safari drew one around the chosen side). */
:is(.nextcard,.valcard) .segctl{background:color-mix(in srgb,var(--ink) 9%,transparent)!important}
:is(.nextcard,.valcard) .segctl button:focus:not(:focus-visible){outline:none}
:root[data-theme="dark"] :is(.nextcard,.valcard) .segctl{background:rgba(0,0,0,.24)!important}
:root[data-theme="dark"] :is(.nextcard,.valcard) .segctl button[aria-pressed="true"]{background:rgba(255,255,255,.16)!important;color:#fff!important;box-shadow:none!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) :is(.nextcard,.valcard) .segctl{background:rgba(0,0,0,.24)!important}
  :root:not([data-theme="light"]) :is(.nextcard,.valcard) .segctl button[aria-pressed="true"]{background:rgba(255,255,255,.16)!important;color:#fff!important;box-shadow:none!important}
}
/* a single second action in Up next spans the card under the main one (DESIGN.md: buttons in cards) */
.nextcard>.cta{width:100%!important;align-self:stretch}
/* web-11.85 (Tom, iPad: the + in the top corner looked out of place): on computers and iPads a page's + sits straight
   after its title, like the + beside "Leads", with a soft fill so it shows on the coloured wash. Phones keep the corner. */
@media (min-width:860px) and (min-height:500px){
  #s-cal>.bar.tbar,#s-tasks>.bar.tbar{justify-content:flex-start!important;gap:16px}
  #s-cal>.bar.tbar>.t,#s-tasks>.bar.tbar>.t{flex:0 1 auto!important;width:auto!important;min-width:0}
  #s-cal>.bar.tbar>.plusbtn,#s-tasks>.bar.tbar>.plusbtn{margin:0!important;position:static!important;order:2}
  .bar .plusbtn{background:color-mix(in srgb,var(--chip) 60%,transparent)!important}
}

/* ===== web-11.86 phone top bar and menu ===== */
.phonebar{display:none}
@media (max-width:859px),(max-height:499px){
  .phonebar{display:inline-grid;place-items:center}
  .bar.hasphonebar{display:flex!important;align-items:center;gap:8px}
  .bar.hasphonebar>.t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bar.hasphonebar>.navbtn,.bar.hasphonebar>button.navbtn{flex:none}
  .bar.hasphonebar .menubtn,.bar.hasphonebar .pbsearch,.bar.hasphonebar .bellbtn,.bar.hasphonebar .plusbtn{width:44px!important;min-width:44px!important;height:44px!important;padding:0!important;border-radius:50%!important;display:inline-grid!important;place-items:center;margin:0!important}
  #repBack,#rgBack{display:none!important}
  #s-home>.bar .t{visibility:hidden}
  #stockHow{width:44px!important;min-width:44px!important;height:44px!important;padding:0!important;border-radius:50%!important;display:inline-grid!important;place-items:center}
  #stockHow .hiwtxt{display:none}
}
.navscrim{position:fixed;inset:0;z-index:64;background:var(--scrim,rgba(0,0,0,.4));opacity:0;transition:opacity .2s}
.navscrim.on{opacity:1}
.navdrawer{position:fixed;top:0;bottom:0;left:0;z-index:65;width:min(86vw,340px);display:flex;flex-direction:column;gap:6px;padding:calc(env(safe-area-inset-top,0px) + 18px) 16px calc(env(safe-area-inset-bottom,0px) + 18px);background:var(--panel);box-shadow:var(--shadow-pop);border-radius:0 24px 24px 0;transform:translateX(-104%);transition:transform .22s ease;overflow-y:auto;overscroll-behavior:contain}
.navdrawer.on{transform:none}
.ndhead{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 2px 6px}
.ndlogo{max-height:36px;max-width:190px;width:auto;display:block}
.ndbiz{font:500 18px/1.2 var(--font)}
.ndclose{width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center;box-shadow:inset 0 0 0 1px var(--line)!important;background:transparent!important}
.ndme{display:flex;align-items:center;gap:12px;padding:12px;margin:2px 0 8px;border-radius:18px;background:var(--tile)}
.ndme>span:last-child{display:flex;flex-direction:column;min-width:0}
.ndme b{font:500 16px/1.25 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ndme small{font:400 13px/1.3 var(--font);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ndav{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--hi-2);color:var(--green);font:600 14px/1 var(--font)}
.ndlist{display:flex;flex-direction:column;background:var(--tile);border-radius:18px;padding:4px 0}
.nditem{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 12px;cursor:pointer;color:var(--ink);font:400 15.5px/1.2 var(--font)}
.ndlist .nditem+.nditem{border-top:1px solid var(--rule)}
.nditem>span:nth-child(2){flex:1;min-width:0}
.nditem>svg:last-child{flex:none;color:var(--ink-3)}
.ndic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--chip);color:var(--ink-2)}
.nditem:focus-visible{outline:2px solid var(--green);outline-offset:-2px;border-radius:14px}
.ndtheme{margin:10px 0 2px}
.ndout{margin-top:auto;border-radius:18px;background:var(--tile)}
.ndout .ndic{color:var(--bad)}
@media (max-width:699px){
  #repBody .tblwrap{overflow:visible;background:none!important;padding:0!important}
  #repBody table.stbl,#repBody table.stbl tbody{display:block;width:100%}
  #repBody table.stbl thead{display:none}
  #repBody table.stbl tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;padding:14px 16px;margin-bottom:8px;background:var(--tile);border-radius:18px}
  #repBody table.stbl td{display:flex;flex-direction:column;gap:2px;padding:0!important;border:0!important;text-align:left!important;min-width:0}
  #repBody table.stbl td:first-child{grid-column:1/-1;margin-bottom:6px;font-weight:500}
  #repBody table.stbl td[data-l]:not(:first-child)::before{content:attr(data-l);font:400 12.5px/1.3 var(--font);color:var(--ink-3)}
  #repBody table.stbl td[colspan]{grid-column:1/-1}
}
/* web-11.86: phone header = a row of buttons (menu or back on the left; search, notifications, + on the right) with the
   page title large underneath, the same on every main page */
@media (max-width:859px),(max-height:499px){
  .bar.hasphonebar{flex-wrap:wrap!important;row-gap:4px!important;height:auto!important;min-height:0!important}
  .bar.hasphonebar>.pbsearch{margin-left:auto!important}
  .bar.hasphonebar>.t{order:10!important;flex:1 0 100%!important;width:100%!important;position:static!important;transform:none!important;text-align:left!important;font:500 30px/1.15 var(--font)!important;letter-spacing:-.01em;padding:2px 2px 0!important;margin:0!important;white-space:normal!important}
  #s-home>.bar.hasphonebar>.t{display:none!important}
}
@media (max-width:859px),(max-height:499px){ .bar.hasphonebar>button,.bar.hasphonebar>span.navbtn{flex:0 0 auto!important} }
@media (max-width:859px),(max-height:499px){
  .bar.hasphonebar :is(.menubtn,.pbsearch,.bellbtn,.plusbtn,#stockHow){background:color-mix(in srgb,var(--chip) 60%,transparent)!important;box-shadow:inset 0 0 0 1px var(--line)!important;color:var(--ink)!important;align-self:center!important}
}
#stockHow .hiwic{display:none}
@media (max-width:859px),(max-height:499px){ #stockHow .hiwic{display:block} }
@media (max-width:859px),(max-height:499px){ #stockHow{margin:0!important;justify-items:center!important;align-items:center!important;text-align:center!important} #stockHow .hiwic{margin:0!important} }
@media (max-width:859px),(max-height:499px){ .bar.hasphonebar>#stockHow{display:flex!important;justify-content:center!important;align-items:center!important;gap:0!important} }
@media (min-width:860px) and (min-height:500px){ .bar .phonebar,.bar>.phonebar{display:none!important} }
/* web-11.87 (Tom didn't like the + in the corner or beside the title): on computers and iPads the Calendar and Tasks
   action is a labelled pill at the right end of the title row, level with the title ("+ Book", "+ New task"), white with
   a hairline so the page's one solid button stays the main action. Phones keep the round + in the header. */
.pluslbl{display:none}
@media (min-width:860px) and (min-height:500px){
  #s-cal>.bar.tbar,#s-tasks>.bar.tbar{justify-content:space-between!important;align-items:center!important}
  #s-cal>.bar.tbar>.t,#s-tasks>.bar.tbar>.t{flex:1 1 auto!important}
  #s-cal>.bar.tbar>.plusbtn,#s-tasks>.bar.tbar>.plusbtn{order:3;margin:0 0 0 auto!important;width:auto!important;max-width:none!important;min-width:0!important;height:42px!important;padding:0 18px 0 14px!important;border-radius:var(--r-pill)!important;display:inline-flex!important;align-items:center;gap:8px;background:var(--chip)!important;box-shadow:inset 0 0 0 1px var(--line)!important;color:var(--ink)!important}
  #s-cal>.bar.tbar>.plusbtn svg,#s-tasks>.bar.tbar>.plusbtn svg{width:18px;height:18px}
  #s-cal .pluslbl,#s-tasks .pluslbl{display:inline;font:500 var(--t-small,14px)/1 var(--font);white-space:nowrap}
}
/* web-11.88 (Tom: the header buttons moved slightly between pages): one padding and one gap for every phone header */
@media (max-width:859px),(max-height:499px){
  .bar.hasphonebar,.tbar.hasbell.hasphonebar{padding:12px 16px 8px!important;column-gap:8px!important;row-gap:4px!important;gap:4px 8px!important}
}
/* web-11.89: a handover with a time sits at its hour in the week view, tinted like the all-day ones */
.wkev.ho{background:var(--hi-2);color:var(--ink);cursor:pointer}
.wkev.ho svg{color:var(--green);vertical-align:-1px;margin-right:3px}
.wkev.ho.done{opacity:.6}
/* web-11.90 search: the empty message's tip on its own line; results scroll within the box */
.cmdempty small{display:block;margin-top:6px;font-size:13px;color:var(--ink-3)}
.cmdres{max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain}
/* web-11.91 (Tom: the count on Tasks' Overdue pill sat higher than the word): every pill's count is the same size and
   line as the Leads pills', sitting on the word's baseline */
.chip .n{font-size:var(--t-label)!important;margin-left:5px!important;position:relative;top:.04em}
/* the overdue count stays readable on the chosen (solid) pill */
.tkviews .chip.late[aria-current="true"] .n{color:#FF8A80!important;opacity:1!important}
:root[data-theme="dark"] .tkviews .chip.late[aria-current="true"] .n{color:var(--bad)!important}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tkviews .chip.late[aria-current="true"] .n{color:#B3261E!important} }
.tkviews .chip.late .n{background:none!important;padding:0!important;border-radius:0!important;font-weight:inherit!important;opacity:1!important} /* web-11.92: colour only, no box (DESIGN.md status words) */
/* web-11.93 Car Assessments admin (the platform portal) */
#platBody{padding:4px 0 120px;max-width:1200px;margin:0 auto}
.plgate{max-width:420px;margin:28px auto;background:var(--tile);border-radius:24px;padding:26px 22px;text-align:center}
.plgate h3{font:500 22px/1.25 var(--font);margin:12px 0 6px;color:var(--ink)}
.plgate p{font:400 14.5px/1.5 var(--font);color:var(--ink-2);margin:0 0 18px}
.plgate .lifield{text-align:left}
.plgate .cta{width:100%;margin-top:12px}
.plgateic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto;background:var(--hi-2);color:var(--green)}
.plerr,#platBody .plerr,.sheet .plerr{color:var(--bad)!important;font:400 13.5px/1.4 var(--font);margin:8px 0 0;text-align:left}
.plviews{max-width:320px;margin:4px 0 14px}
.plkpis{margin:0 0 12px}
@media (min-width:860px) and (min-height:500px){ .plkpis{grid-template-columns:repeat(4,1fr)} }
.plfilters{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px}
.plfilters .chips{padding:0;margin:0}
.plq{flex:1 1 220px;max-width:320px;height:40px;border:0;border-radius:var(--r-pill);background:var(--chip);box-shadow:inset 0 0 0 1px var(--line);padding:0 16px;font:400 15px var(--font);color:var(--ink);outline:none}
.plq:focus{box-shadow:inset 0 0 0 2px var(--green)}
@media (max-width:859px),(max-height:499px){ .plq{max-width:none;flex-basis:100%;font-size:16px} }
.pltbl tbody td,.plpeople tbody td{white-space:normal;overflow-wrap:anywhere}
.pltbl td:first-child{min-width:200px}
@media (min-width:700px){ .pltbl td[data-l="Owner"]{min-width:240px;overflow-wrap:normal;word-break:normal} }
.pltbl td[data-l="Joined"],.pltbl td[data-l="Last active"]{white-space:nowrap}
.plas{border:0;background:var(--chip);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-pill);height:34px;padding:0 14px;font:500 13.5px var(--font);color:var(--ink);cursor:pointer;white-space:nowrap}
@media (max-width:859px),(max-height:499px){ #s-plat>.bar.tbar>.plusbtn{margin-left:auto!important} }
.pltbl .tcar{font-weight:500}
#platBody .badge{align-self:flex-start;white-space:nowrap}
#platBody .badge.pl-on{background:var(--hi-2)!important;color:var(--green)!important}
#platBody .badge.pl-off{background:color-mix(in srgb,var(--bad) 13%,transparent)!important;color:var(--bad)!important}
.pllock{display:flex;align-items:center;gap:6px;margin-top:14px}
.pllock svg{flex:none;color:var(--ink-3)}
.plhead{margin:6px 0 12px} .plhead h2{font:500 28px/1.2 var(--font);margin:0 0 8px;color:var(--ink)}
.plsub{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.plbtns{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px;max-width:720px}
.plbtns .cta{flex:1 1 0;min-width:0;width:auto;height:44px;margin:0!important;border-radius:var(--r-pill)}
.plbtns .cta:first-child{flex-basis:100%}
.plwarn{color:var(--bad)}
.plpeople td{white-space:normal}
#platBody .sectionlabel{margin-top:20px}
#platBody .group .cell .val{text-align:right;word-break:break-all}
#s-plat>.bar.tbar .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:860px) and (min-height:500px){
  #s-plat>.bar.tbar{justify-content:space-between!important;align-items:center!important}
  #s-plat>.bar.tbar>.t{flex:1 1 auto!important}
  #s-plat>.bar.tbar>.plusbtn{order:3;margin:0 0 0 auto!important;width:auto!important;max-width:none!important;min-width:0!important;height:42px!important;padding:0 18px 0 14px!important;border-radius:var(--r-pill)!important;display:inline-flex!important;align-items:center;gap:8px;background:var(--chip)!important;box-shadow:inset 0 0 0 1px var(--line)!important;color:var(--ink)!important}
  #s-plat>.bar.tbar>.plusbtn[hidden]{display:none!important}
  #s-plat>.bar.tbar>.plusbtn svg{width:18px;height:18px}
  #s-plat .pluslbl{display:inline;font:500 var(--t-small,14px)/1 var(--font);white-space:nowrap}
}
@media (max-width:699px){
  #platBody .tblwrap{overflow:visible;background:none!important;padding:0!important}
  #platBody table.stbl,#platBody table.stbl tbody{display:block;width:100%}
  #platBody table.stbl thead{display:none}
  #platBody table.stbl tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;padding:14px 16px;margin-bottom:8px;background:var(--tile);border-radius:18px}
  #platBody table.stbl td{display:flex;flex-direction:column;gap:2px;padding:0!important;border:0!important;text-align:left!important;min-width:0}
  #platBody table.stbl td:first-child{grid-column:1/-1;margin-bottom:6px;display:block}
  #platBody table.stbl td[data-l]:not(:first-child)::before{content:attr(data-l);font:400 12.5px/1.3 var(--font);color:var(--ink-3)}
  #platBody table.stbl td[colspan]{grid-column:1/-1}
  #platBody table.stbl td:last-child:not([data-l]){grid-column:1/-1}
  .plbtns .cta{flex-basis:100%}
}
/* web-11.96 (Tom): the Settings menu and the open section scroll separately on iPad and computer; the page stays put */
@media (min-width:860px) and (min-height:500px){
  #s-settings{padding-bottom:0!important} /* web-12.23: keeps the full-height panel (min-height:0 let it shrink on short sections like App) */
  html.setfix{overflow:hidden!important}
  #setBody .setmenu,#setBody.insection .setmenu,#setBody .setcontent{position:static!important;max-height:calc(100dvh - var(--settop,160px) - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  #setBody .setcontent{padding:0 6px 40px 2px;margin-right:-6px}
}
/* web-11.97 (Tom): a long car name in the Tasks table stays on one line, cut short with ..., so every row is the same height */
.tktable .tkleadc>div{min-width:0;flex:1 1 auto}
.tktable .tklead,.tktable .tksub1{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;max-width:260px}
@media (max-width:1199px){ .tktable .tklead,.tktable .tksub1{max-width:200px} }
/* web-11.98 the assistant: a round button bottom right (the Car Assessments mark with a small AI tag), opening a chat
   panel; on phones it sits above the tab bar and the chat fills the screen */
.aifab{position:fixed;right:20px;bottom:calc(var(--tabh) + 14px + env(safe-area-inset-bottom,0px));z-index:58;width:56px;height:56px;border-radius:50%;border:0;padding:0;background:var(--solid);color:var(--on-solid);box-shadow:var(--shadow-pop);display:grid;place-items:center;cursor:pointer;transition:transform .15s}
.aifab:active{transform:scale(.94)} .aifab[hidden]{display:none}
.aifab img{width:34px;height:34px;object-fit:contain}
.aim-d{display:none}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .aim-l{display:none} :root:not([data-theme="light"]) .aim-d{display:inline} }
:root[data-theme="dark"] .aim-l{display:none} :root[data-theme="dark"] .aim-d{display:inline}
.aibadge{position:absolute;top:-3px;right:-5px;min-width:24px;height:18px;padding:0 6px;border-radius:999px;background:var(--green);color:var(--on-green,#fff);font:600 10.5px/18px var(--font);letter-spacing:.02em;box-shadow:0 0 0 2px var(--panel)}
@media (min-width:860px) and (min-height:500px){ .aifab{right:24px;bottom:24px} }
body.sheetopen .aifab,body.tq .aifab{display:none}
.aipanel{position:fixed;z-index:72;display:flex;flex-direction:column;background:var(--panel);box-shadow:var(--shadow-pop);opacity:0;transform:translateY(12px);transition:opacity .18s,transform .18s}
.aipanel.on{opacity:1;transform:none}
@media (min-width:860px) and (min-height:500px){ .aipanel{right:24px;bottom:24px;width:400px;height:min(640px,calc(100vh - 48px));border-radius:24px;overflow:hidden} }
@media (max-width:859px),(max-height:499px){ .aipanel{top:0;left:0;right:0;height:100%;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);transition:opacity .18s} .aipanel.kb{padding-bottom:0} .aipanel.kb .aifine{display:none} .aipanel.kb .aiform{padding-bottom:8px} body.aiopen{overflow:hidden} }
.aihead{display:flex;align-items:center;gap:8px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--rule)}
.aihead b{font:500 17px/1.2 var(--font);color:var(--ink)}
.aihic{width:32px;height:32px;border-radius:50%;background:var(--solid);display:grid;place-items:center;flex:none}
.aihic img{width:21px;height:21px}
.aihead .fa{flex:1}
.aibtn{width:38px!important;height:38px!important;min-width:0!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center}
.ailog{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:10px}
.aimsg{max-width:88%;padding:10px 14px;border-radius:18px;font:400 15px/1.45 var(--font);overflow-wrap:anywhere}
.aimsg p{margin:0} .aimsg p+p{margin-top:6px} .aimsg ul{margin:4px 0 0;padding-left:18px} .aimsg li+li{margin-top:2px}
.aimsg.me{align-self:flex-end;background:var(--solid);color:var(--on-solid);border-bottom-right-radius:6px}
.aimsg.bot{align-self:flex-start;background:var(--tile);color:var(--ink);border-bottom-left-radius:6px}
.aimsg.err{align-self:flex-start;background:none;color:var(--bad);padding:2px 4px;font-size:13.5px}
.aiwait{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:13.5px}
.aiempty{margin:auto 0;padding:8px 4px}
.aihello{font:500 22px/1.25 var(--font);color:var(--ink);margin-bottom:6px}
.aiempty p{margin:0 0 14px;color:var(--ink-2);font:400 14.5px/1.45 var(--font)}
.aisugg{display:flex;flex-wrap:wrap;gap:8px}
.aisugg .chip{height:auto;min-height:34px;padding:7px 14px;white-space:normal;text-align:left}
.aiact{width:88%;max-width:none}
.aiact dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0 10px;font-size:14px}
.aiact dt{color:var(--ink-3)} .aiact dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.aiactb{display:flex;gap:8px} .aiactb .cta{flex:1;height:40px;margin:0!important;font-size:14px}
.aidone{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2);font-size:13.5px}
.aiform{display:flex;align-items:flex-end;gap:8px;padding:10px 12px 4px;border-top:1px solid var(--rule)}
.aiform textarea{flex:1;resize:none;min-height:44px;max-height:140px;border:0;border-radius:22px;background:var(--chip);box-shadow:inset 0 0 0 1px var(--line);padding:11px 16px;font:400 16px/1.35 var(--font);color:var(--ink);outline:none}
.aiform textarea:focus{box-shadow:inset 0 0 0 2px var(--green)}
.aisend{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--solid);color:var(--on-solid);display:grid;place-items:center;cursor:pointer}
.aisend svg{transform:rotate(90deg)}
.aifine{margin:0;padding:4px 16px 10px;font:400 11.5px/1.35 var(--font);color:var(--ink-3);text-align:center}
.aitag{padding:2px 8px 2px 6px;font-size:11px}
/* web-12.0 assistant chat history */
.aipanel.hist .aiform,.aipanel.hist>.aifine{display:none}
.aihtop{margin:-4px 0 4px}
.aihlist{padding:4px!important}
.aihrow{display:flex!important;align-items:center;gap:6px;padding:0!important}
.aihrow.on{background:var(--hi-2)}
.aihopen{flex:1;min-width:0;border:0;background:none;text-align:left;padding:12px 6px 12px 12px;cursor:pointer;color:var(--ink);font:inherit}
.aihopen .lbl{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aihdel{flex:none;width:36px;height:36px;margin-right:6px;border:0;border-radius:50%;background:none;color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.aihdel:hover{background:var(--chip);color:var(--bad)}
/* web-12.1 (Tom: spacing on a wide computer): Home uses the page's full width like the other main pages (it stopped at 1160px, leaving an empty strip on the right) */
@media (min-width:860px) and (min-height:500px){ #homeBody{max-width:none!important} }
/* web-12.2: ticked boxes and today's date filled with the app colour draw their tick or number in --on-green, so a pale app colour (white) stays readable */
.selbox[aria-pressed="true"],.lrow .bulkck.on,#s-tasks .tkpick.on,.bulkck.on,.tkpick.on,.calday.today.sel{color:var(--on-green,#fff)!important}
/* web-12.3: the profile circle is only on the computer's top bar */
.navme{display:none}
@media not all and (min-width:860px) and (min-height:500px) and (hover:hover) and (pointer:fine){ .tabbar .navme{display:none!important} }
.mepop .mehead{padding:12px 14px 10px;border-bottom:1px solid var(--rule);margin-bottom:4px}
.mepop .mehead b{display:block;font:500 15px/1.3 var(--font);color:var(--ink)} .mepop .mehead small{display:block;font:400 13px/1.3 var(--font);color:var(--ink-3);overflow-wrap:anywhere}
/* web-12.5 Computer view bar (bottom left, above everything but pop-ups) */
.deskbar{position:fixed;left:16px;bottom:16px;z-index:64;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border-radius:999px;background:var(--solid);color:var(--on-solid);font:500 13.5px var(--font);box-shadow:var(--shadow-pop)}
.deskbar button{border:0;border-radius:999px;padding:7px 12px;background:var(--on-solid);color:var(--solid);font:600 13px var(--font);cursor:pointer}
/* web-12.6 (Tom: the g of "Settings" was cut off): page titles cut long text with ..., which also clips letters that hang
   below the line (g, y, p) at the tight title line height; give them room underneath without moving anything */
.bar .t{padding-bottom:.14em!important;margin-bottom:-.14em!important}
/* web-12.7 (Tom: task rows looked cut off at the end in computer view on the iPad): the row's rounded right end was on the
   last column, which hides under 1280 wide; an always-shown arrow column now ends every row (DESIGN: every tile that opens
   something has a small grey arrow at the far right) */
.tktable .tkgo{width:34px;padding-left:0!important;padding-right:14px!important;text-align:right;color:var(--ink-3)}
.tktable .tkgo svg{width:16px;height:16px;vertical-align:middle}
/* web-12.8 change password inside Settings (iPad and computer) */
.pwinline{margin-top:12px;padding:16px 18px!important}
.pwinline .pihead{font:500 16px/1.3 var(--font);color:var(--ink);margin:0 0 10px}
.pwinline .cfield{margin-top:8px}
.pwinline .btns12{display:flex;gap:10px} .pwinline .btns12 .cta{flex:1;margin:0!important}
#setPw[aria-expanded="true"]{background:var(--hi-2)}
/* web-12.11: on iPad and computer the business's actions are normal-sized pills in a row, not 720px wide bars */
@media (min-width:700px){
  .plbtns{flex-wrap:wrap;max-width:none}
  .plbtns .cta,.plbtns .cta:first-child{flex:0 0 auto;width:auto;height:40px;padding:0 20px;font-size:14px}
}

/* web-12.13: a viewing time can be emailed as well as texted */
.vwtell{display:flex;flex-wrap:wrap;gap:4px 20px}

/* web-12.14: Reports, a library of reports on the left (collapsible, like the leads list) and the report on the right */
.rpwrap{display:block}
.rplib{display:none}
.rpphonelib{display:flex;align-items:center;gap:8px;width:100%;height:44px;padding:0 16px;margin:4px 0 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:transparent;color:var(--ink);font:500 15px/1 var(--font);cursor:pointer}
.rpphonelib span{flex:1;text-align:left}
@media (min-width:860px) and (min-height:500px){
  .rpwrap{display:grid;grid-template-columns:272px minmax(0,1fr);gap:24px;align-items:start;padding-top:8px}
  .rplib{display:block;position:sticky;top:12px;max-height:calc(100vh - 110px);overflow:auto;overscroll-behavior:contain;background:var(--tile);border-radius:var(--r-card);padding:12px}
  .rpphonelib{display:none}
  html.replibmin .rpwrap{grid-template-columns:56px minmax(0,1fr)}
  html.replibmin .rplib{padding:10px;overflow:visible}
  html.replibmin .rplib>*:not(.rplibopen){display:none!important}
  html.replibmin .rplibopen{display:flex}
}
.rplibtop{display:flex;gap:8px;align-items:center}
.rpaibtn{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 14px;border-radius:var(--r-pill);border:0;background:var(--solid);color:var(--on-solid);font:600 14px/1 var(--font);cursor:pointer;white-space:nowrap}
.rplibopen{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink-2);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.rplibopen{display:none}
.rpsearch{display:flex;align-items:center;gap:8px;margin:10px 0 4px;height:40px;padding:0 14px;border-radius:var(--r-pill);background:var(--chip);border:1px solid var(--line);color:var(--ink-3)}
.rpsearch input{border:0;background:none;flex:1;min-width:0;font:400 15px/1 var(--font);color:var(--ink);outline:0;padding:0;height:100%}
.rpsearch input::-webkit-search-cancel-button{display:none}
.rpcat summary{list-style:none;display:flex;align-items:center;gap:6px;padding:12px 8px 6px;cursor:pointer;font-size:12.5px;color:var(--ink-2);font-weight:500;user-select:none}
.rpcat summary::-webkit-details-marker{display:none}
.rpcat summary small{color:var(--ink-3);font-size:12px}
.rpcat summary svg{margin-left:auto;transition:transform var(--dur-2) var(--ease)}
.rpcat:not([open]) summary svg{transform:rotate(-90deg)}
.rpitem{display:flex;align-items:center;gap:6px;width:100%;text-align:left;padding:9px 10px;border-radius:12px;border:0;background:none;color:var(--ink);font:400 14.5px/1.3 var(--font);cursor:pointer}
.rpitem span{flex:1;min-width:0}
.rpitem:hover{background:var(--hover)}
.rpitem.on{background:var(--solid);color:var(--on-solid)}
.rpitem .rpshared{display:flex;color:var(--ink-3)} .rpitem.on .rpshared{color:inherit}
.rpnone{font-size:13px;color:var(--ink-3);padding:2px 10px 8px;margin:0}
.sheet .rpcats{margin-top:4px}
.rphead{display:flex;gap:12px 20px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin:0 0 14px}
.rpht{min-width:0;flex:1 1 280px}
.rpht h2{margin:0;font-size:var(--t-h2);font-weight:500;letter-spacing:var(--track-title);line-height:1.2}
.rpht p{margin:4px 0 0;color:var(--ink-2);font-size:14px;max-width:62ch}
.rpht .vai,.rpht .rpby{margin-top:8px}
.rpby{display:inline-block;font-size:12.5px;color:var(--ink-3)}
.rptools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rptools .pill,.rprefine .pill{min-height:36px;padding:0 14px;gap:6px;font-size:14px;border:1px solid var(--line);background:transparent;cursor:pointer}
.rptools .pill.solid{background:var(--solid);color:var(--on-solid);border-color:var(--solid);font-weight:600}
.rptools #rpMore{padding:0 10px}
.rprefine{display:flex;gap:8px;margin:0 0 14px}
.rprefine input{flex:1;min-width:0;height:40px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--field);color:var(--ink);font:400 15px/1 var(--font)}
.rpbars{padding:10px 16px}
.rpbar{display:grid;grid-template-columns:minmax(80px,32%) minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:8px 0;background:none;border:0;border-radius:8px;font:inherit;color:inherit;text-align:left;cursor:pointer}
.rpbar:hover .rpbt i{filter:brightness(1.12)}
.rpbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.rpbt{height:12px;border-radius:var(--r-pill);background:var(--hover);overflow:hidden}
.rpbt i{display:block;height:100%;background:var(--green);border-radius:var(--r-pill);min-width:2px}
.rpbar b{font-weight:600;font-variant-numeric:tabular-nums;font-size:14px;min-width:3ch;text-align:right}
.rpcols .wbar{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.rpline{padding:22px 18px 10px}
.rplbox{position:relative;height:200px;color:var(--green)}
.rplbox svg{width:100%;height:100%;display:block;overflow:visible}
.rplpts{position:absolute;inset:0}
.rplpt{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--green);border:2px solid var(--tile);padding:0;cursor:pointer}
.rplx{position:relative;height:26px}
.rplx span{position:absolute;top:8px;transform:translateX(-50%);font-size:12px;color:var(--ink-3);white-space:nowrap}
.rpempty,.rpthinking{display:flex;flex-direction:column;align-items:center;gap:6px;padding:36px 24px;background:var(--tile);border-radius:var(--r-card);text-align:center}
.rpempty b{font-weight:500} .rpempty span{color:var(--ink-2);font-size:14px;max-width:46ch}
.rpthinking{flex-direction:row;justify-content:center;color:var(--ink-2)}
.rpthinking svg{color:var(--green);animation:rppulse 1.2s var(--ease) infinite}
@keyframes rppulse{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){ .rpthinking svg{animation:none} }
.rpkpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.rpkpis .kpi small{color:var(--ink-2);font-weight:400}
.stbl tfoot td{padding:10px 12px;font-weight:600;border-top:1px solid var(--line);white-space:nowrap}
.rplist td{white-space:normal}
.rems,.refl{gap:8px;flex-wrap:wrap}
.rems select,.refl select,.refl input{flex:1 1 120px;min-width:0;height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--field);color:var(--ink);font:400 15px/1 var(--font)}
.rems .tsub{flex:1 1 120px}
#raQ{width:100%;box-sizing:border-box;margin-top:10px;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:var(--field);color:var(--ink);font:400 16px/1.45 var(--font);resize:vertical}
.rpsharerow{display:flex;align-items:center;gap:12px;background:var(--tile);border-radius:var(--r-tile);padding:12px 14px}
.rpsharerow .lbl{flex:1}
@media (max-width:859px),(max-height:499px){
  #repBody .rpgt tfoot,#repBody .rplist tfoot{display:none}
  .rpbar{grid-template-columns:minmax(70px,36%) minmax(0,1fr) auto}
}
.rpitem,.rpaibtn,.rpsearch{box-sizing:border-box}
.rpnote{margin:8px 0 0!important;font-size:13.5px!important;color:var(--ink-2)}
details.rpfold{background:none!important;padding:0!important}
details.rpfold>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:14px;color:var(--ink-2);padding:6px 2px 10px}
details.rpfold>summary::-webkit-details-marker{display:none}
details.rpfold:not([open])>summary svg{transform:rotate(-90deg)}
details.rpfold>table{background:var(--tile);border-radius:var(--r-tile);overflow:hidden}
.rpedbox{background:var(--tile);border-radius:var(--r-tile);padding:4px 14px}
.rems,.refl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--rule)}
.rpedbox>:last-child{border-bottom:0}
.rems select,.refl select{appearance:auto;-webkit-appearance:menulist;text-align:left;text-align-last:auto;cursor:pointer}
.rems .navbtn,.refl .navbtn{min-width:0;padding:6px;flex:none;color:var(--ink-2)}
/* the app's own pickers (.fsel) inside the report edit rows: outlined like a field, with a caret */
.rems .fsel,.refl .fsel{flex:1 1 120px;min-width:0;height:38px;padding:0 30px 0 12px;border-radius:10px;border:1px solid var(--line);background:var(--field) no-repeat right 10px center/12px 8px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5l4.5 4.5 4.5-4.5' fill='none' stroke='%237A8087' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");color:var(--ink);font:400 15px/1 var(--font);text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.refl input{flex:1 1 140px}

/* web-12.15: the Reports dashboard, a grid of widget cards (number widgets one column, graphs two) */
.rpdash{margin:10px 0 2px;gap:10px;font-weight:500}
.rpdash svg{flex:none}
.dbgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
.dbw{background:var(--tile);border-radius:var(--r-card);padding:14px 16px 16px;min-width:0;display:flex;flex-direction:column}
.dbw.wide{grid-column:span 2}
.dbwh{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}
.dbwt{flex:1;min-width:0;text-align:left;background:none;border:0;padding:2px 0 0;font:inherit;color:inherit;cursor:pointer}
.dbwt b{display:block;font-weight:500;font-size:16px;line-height:1.25}
.dbwt small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px}
.dbwt:hover b{text-decoration:underline;text-underline-offset:3px}
.dbwm{flex:none;width:32px;height:32px;margin:-4px -6px 0 0;border-radius:50%;border:0;background:none;color:var(--ink-2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.dbwm:hover{background:var(--hover)}
.dbwb{flex:1;min-width:0}
.dbw .rcard,.dbw .tblwrap{background:none!important;padding:0!important;border-radius:0}
.dbw .rpbars{padding:0}
.dbw .wbars{height:170px;padding-top:20px}
.dbw .rpline{padding:12px 4px 0}
.dbw .rplbox{height:150px}
.dbw .rplpt{border-color:var(--tile)}
.dbw .rpempty{padding:18px 8px;background:none}
.dbw .stbl td,.dbw .stbl th{padding-left:6px;padding-right:6px}
.dbw .fine{margin:6px 0 0}
.dbk{grid-template-columns:1fr!important;margin:0;gap:0}
.dbk .kpi{background:none;padding:2px 0 0}
.dbk .kpi b{font-size:var(--t-figure);font-weight:500;line-height:1.05;letter-spacing:-.01em}
.dbk .kpi span{font-size:13px}
.dbw.dbnum .dbk .kpi small{margin-top:6px}
.dbempty{grid-column:1/-1}
.dbadd textarea{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:var(--field);color:var(--ink);font:400 16px/1.45 var(--font);resize:vertical}
.dbw.flash{animation:dbflash 1.6s var(--ease)}
@keyframes dbflash{0%,40%{box-shadow:0 0 0 3px var(--green)}100%{box-shadow:0 0 0 0 transparent}}
@media (max-width:1279px){ .dbgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
html.replibmin .dbgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1099px){ html.replibmin .dbgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:859px),(max-height:499px){
  .dbgrid,html.replibmin .dbgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dbw{padding:12px 14px 14px}
  .dbw.wide{grid-column:1/-1}
  .dbk .kpi b{font-size:32px}
}
/* web-12.16: the AI builder's examples, a tidy list (Tom: the wrapped pills looked uneven) */
.raex{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.raex button{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--ink);font:400 14px/1.3 var(--font);text-align:left;cursor:pointer}
.raex button svg{flex:none;color:var(--ink-3)}
.raex button:hover{background:var(--hover)}
@media (max-width:520px){ .raex{grid-template-columns:1fr} }

/* web-12.17: one collapse button everywhere (Tom): a 28px white circle with a chevron, sitting on the edge of the
   panel it folds (the iPad sidebar, the leads and For sale lists, the reports list). Points left when open, right when folded. */
.edgetog{width:28px;height:28px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:var(--chip);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 2px 8px rgba(0,0,0,.12);cursor:pointer;z-index:45}
.edgetog:hover{background:var(--hi-2);color:var(--green)}
.edgetog:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.edgetog[hidden]{display:none!important}
.edgetog svg{transition:transform .2s}
/* the sidebar's: on its right edge, level with the logo (iPad only; computers have the top bar, phones the dock) */
.sideedge{display:none;position:fixed;top:34px;left:calc(var(--side) - 14px)}
@media (min-width:860px) and (min-height:500px){ .sideedge{display:grid} }
html.sidemin .sideedge svg{transform:rotate(180deg)}
html.sideanim .sideedge{transition:left .22s var(--ease)}
/* the reports list's: on the panel's right edge, outside its scrolling */
.rplibwrap{display:none}
@media (min-width:860px) and (min-height:500px){
  .rplibwrap{display:block;position:sticky;top:12px;align-self:start}
  .rplib{position:static;max-height:calc(100vh - 110px)}
  .rpedge{position:absolute;top:22px;right:-14px}
  html.replibmin .rpwrap{grid-template-columns:44px minmax(0,1fr)}
  html.replibmin .rplib{padding:24px 0;cursor:pointer;overflow:hidden;display:flex;justify-content:center;align-items:center}
  /* web-12.20: the collapsed rail says what it is (Tom: an empty white bar) */
  html.replibmin .rplib::after{content:"All reports";writing-mode:vertical-rl;transform:rotate(180deg);font:500 15px/1 var(--font);color:var(--ink-2);letter-spacing:.01em;white-space:nowrap;line-height:1}
  html.replibmin .rplib:hover::after{color:var(--ink)}
  html.replibmin .rpedge svg{transform:rotate(180deg)}
}
/* web-12.18: "Show it as" picture tiles (Tom: the black chosen pill looked like the black Build button). Chosen = green, like every choice */
.gpick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.gpick button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:72px;padding:10px 6px;border-radius:14px;border:1px solid var(--line);background:var(--chip);color:var(--ink-2);font:400 13.5px/1.2 var(--font);cursor:pointer;text-align:center}
.gpick button svg{color:var(--ink-3)}
.gpick button:hover{background:var(--hover)}
.gpick button[aria-pressed="true"]{border:1.5px solid var(--green);background:var(--hi-2);color:var(--green);font-weight:500}
.gpick button[aria-pressed="true"] svg{color:var(--green)}
@media (max-width:520px){ .gpick{grid-template-columns:repeat(3,minmax(0,1fr))} }
.dbadd #dbGo{width:100%}
/* web-12.19: drag widgets by their header, resize them from the bottom-right corner (sizes snap to the grid) */
.dbgrid{grid-auto-rows:32px}
.dbw{position:relative;overflow:hidden;min-height:0}
.dbwh{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
/* web-12.21: html.nozoom * (manipulation) out-ranked .dbwh, so a finger scrolled the page instead of dragging (Tom, iPad) */
html.nozoom :is(.dbwh,.dbwh *,.dbwrs,.dbwrs *){touch-action:none}
.dbwh,.dbwh *{-webkit-touch-callout:none}
.dbwh .dbwt{cursor:pointer}
.dbw.dragging{opacity:.55;box-shadow:0 0 0 2px var(--green);z-index:2}
.dbgrid.dragmode .dbw:not(.dragging){transition:transform .15s var(--ease)}
.dbgrid.dragmode,.dbgrid.dragmode *{cursor:grabbing!important}
.dbwb{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.dbw.v-list .dbwb,.dbw.v-table .dbwb,.dbw.v-bar .dbwb,.dbw.v-funnel .dbwb{overflow:auto;overscroll-behavior:contain}
.dbw .rcard{flex:1;min-height:0;display:flex;flex-direction:column}
.dbw .wbars{flex:1;height:auto!important;min-height:80px;box-sizing:border-box}
.dbw .rpline{flex:1;display:flex;flex-direction:column}
.dbw .rplbox{flex:1;height:auto!important;min-height:60px}
.dbwrs{position:absolute;right:2px;bottom:2px;width:26px;height:26px;padding:0;border:0;background:none;color:var(--ink-3);display:grid;place-items:center;cursor:nwse-resize;touch-action:none;opacity:.55;border-radius:8px}
.dbw:hover .dbwrs,.dbw.resizing .dbwrs{opacity:1}
.dbwrs:hover{background:var(--hover);color:var(--ink)}
.dbw.resizing{box-shadow:0 0 0 2px var(--green)}
@media (hover:none){ .dbwrs{opacity:.85} }
/* overnight 25 Oct 2026: on touch screens the small Select box (24px) gets a bigger invisible tap area (44px tall), the
   way .tkchk and .infob already do; nothing visible changes */
@media (pointer:coarse){ .selbox{position:relative} .selbox::after{content:"";position:absolute;inset:-10px -4px} }
/* web-12.30: bigger invisible tap areas on touch screens for the dashboard resize corner (26px) and the text links under a lead's name (16px) */
@media (pointer:coarse){ .dbwrs::after{content:"";position:absolute;inset:-9px} a.sublink{position:relative} a.sublink::after{content:"";position:absolute;inset:-8px -4px} }
/* overnight 25 Oct 2026: a pop-up that's closing can't be tapped (a quick second tap used to land on its button again) */
.sheet:not(.on){pointer-events:none}
/* web-12.34 Website enquiry form builder (Settings > Business): settings on the left, the live preview and the code on the
   right on a computer; one column on a phone. Pills stay on one line (DESIGN.md). */
@media (min-width:860px) and (min-height:500px){ .sheet.xwide{width:min(1120px,94vw)} }
.efb{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 28px;margin-top:6px}
@media (min-width:860px) and (min-height:500px){ .efb{grid-template-columns:minmax(0,400px) minmax(0,1fr)} .efprev{position:sticky;top:0;align-self:start} }
.efgrp{padding:2px 14px}
.efrow{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-bottom:.5px solid var(--hair)} .efrow:last-child{border-bottom:0}
.efrow .eflbl{font-size:.92rem;color:var(--ink)} .efrow .qopts{margin:0}
.efb .group .qopts.sm{padding:0 14px 12px;margin:0}
.efsw{padding:0 14px 14px}
.efframe{border-radius:var(--r-card,16px);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);background:#F4F4F5;padding:14px}
.efframe iframe{display:block;width:100%;height:640px;border:0;border-radius:10px;background:transparent}
.efcode code{display:block;font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-all;color:var(--ink);user-select:all;-webkit-user-select:all}
.efb select{max-width:60%}
.efjump{margin:2px 0 4px;padding-left:0} @media (min-width:860px) and (min-height:500px){ .efjump{display:none} }

/* web-12.38 (Tom): Settings sections use the same round back arrow as every other page (it was a "‹ Settings" pill), and
   on a phone a pop-up never shows the page's back arrow above it: the pop-up has its own Cancel, Close or swipe down */
@media (max-width:859px),(max-height:499px){
  body.sheetopen .bar :is(#setBack,#sdBack,#skBack,#ckBack,#pbBack,#rpBack,#rgBack,#pgBack,#repBack,#plBack,#wlBack,[id$="Back"]){visibility:hidden}
}
/* web-12.43 ad pack photo strip */
.adthumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin-top:6px}
.adthumbs span{position:relative;aspect-ratio:4/3;border-radius:10px;background:var(--field) center/cover no-repeat}
.adthumbs i{position:absolute;left:5px;top:5px;min-width:20px;height:20px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:600 .72rem/20px var(--font,inherit);text-align:center;font-style:normal;padding:0 5px}
/* web-12.44 AI damage check card on the self assessment tab */
.aidmg{display:flex;flex-direction:column;gap:10px;background:var(--card);border-radius:16px;padding:14px 16px}
.aidmg>div{display:flex;flex-direction:column;gap:4px}
.aidmg span{color:var(--sub);font-size:.86rem}
/* web-12.59: the trust account's tools are rows, not a stack of buttons; Export opens its two choices under it */
.cell.trsub{padding-left:72px}
#trExp .chev{transition:transform .15s}
#trExp[aria-expanded="true"] .chev{transform:rotate(90deg)}
/* web-12.61 @mentions: the team list under a note or task box, and @Name in green in the text */
.mnpop{scroll-margin-bottom:96px;display:flex;flex-direction:column;background:var(--tile,var(--card));border-radius:18px;padding:4px;margin:6px 0 2px;box-shadow:var(--shadow-pop,0 8px 24px rgba(0,0,0,.12))}
.mnopt{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:var(--ink);text-align:left;font:inherit;font-size:.95rem;padding:8px 10px;border-radius:14px;min-height:44px;cursor:pointer}
.mnopt.on,.mnopt:hover{background:var(--hi-2,var(--hi))}
.mnav{width:30px;height:30px;border-radius:50%;background:var(--hi-2,var(--hi));color:var(--green,var(--teal-ink));display:inline-grid;place-items:center;font-size:.75rem;font-weight:500;flex:none}
.mnopt.on .mnav,.mnopt:hover .mnav{background:var(--chip,#fff)}
b.mention{font-weight:500;color:var(--green,var(--teal-ink))}
/* web-12.63 the deal picked when sending the self assessment (Consign and buy) */
.ssdeal{display:flex;flex-direction:column;gap:8px;margin:4px 0 12px}
.ssdeal>span{font-size:.85rem}
.ssdeal .segctl{width:100%}
.ssdeal .segctl button{padding:9px 4px;font-size:.88rem;white-space:nowrap}
.ssdeal .fine{margin:0}
/* web-12.64 Your website editor (websiteSheet): templates, the live preview frame (scaled to fit), address and DNS records */
.wsstatus .wsst{display:flex;gap:10px;align-items:center;background:var(--tile,var(--card));border-radius:14px;padding:10px 14px;margin:4px 0 6px;font-size:.92rem}
.wsstatus .wsst.ok svg{color:var(--ok,var(--green))}
.wsstatus .wsst.warn svg{color:#B45309}
.wsstatus .wsst a{font-weight:500}
.wstpls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wstpl{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--tile,var(--card));border:0;border-radius:16px;padding:10px;font:inherit;color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1.5px transparent;min-width:0}
.wstpl[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--teal-ink,var(--green))}
.wstn{font-weight:500;font-size:.92rem}
.wstd{font-size:.78rem;color:var(--sub);line-height:1.3}
.wsthumb{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;aspect-ratio:4/3;border-radius:10px;background:#fff;padding:5px;margin-bottom:4px;overflow:hidden}
.wsthumb i{grid-column:1/-1;height:6px;border-radius:3px;background:#D4D7DC}
.wsthumb b{grid-column:1/-1;border-radius:6px;background:linear-gradient(135deg,#6B7280,#374151);min-height:24px}
.wsthumb em{border-radius:4px;background:#E5E7EB;min-height:12px}
.wst-modern{background:#F4F5F7}
.wst-modern b{grid-column:2/-1;background:linear-gradient(135deg,#9CA3AF,#4B5563)}
.wst-modern i{background:#fff}
.wst-classic i{background:#1F2937;height:4px;border-radius:0}
.wst-classic b{border-radius:2px}
.wst-classic em{border-radius:2px}
.wsprevbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wsprevbar .qopts{margin:0}
.wspages{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.wspages button{font:inherit;font-size:.82rem;padding:6px 12px;border-radius:999px;border:0;background:var(--tile,var(--card));color:var(--ink);white-space:nowrap;cursor:pointer}
.wspages button[aria-pressed=true]{background:var(--solid,var(--ink));color:var(--on-solid,#fff)}
.wsframe{border-radius:var(--r-card,16px);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);background:#F4F4F5;padding:14px;position:relative}
.wsframe iframe{display:block;border:0;background:#fff;border-radius:6px}
.wspair{padding-bottom:6px}
.wspair+.wspair{border-top:1px solid var(--line);padding-top:8px}
.wsrm{margin:2px 0 4px}
.wsrev{background:var(--tile,var(--card));border-radius:16px;padding:4px 4px 10px;margin-bottom:10px}
.wsrevfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px}
.wsrevfoot .qopts{margin:0}
.wsthumbimg{width:64px;height:44px;object-fit:cover;border-radius:8px;flex:none}
.wsred{color:var(--rep)}
.wsdns{display:flex;flex-direction:column;background:var(--tile,var(--card));border-radius:14px;padding:6px 12px;font-size:.88rem;margin-top:8px}
.wsdns>div{display:grid;grid-template-columns:64px 70px minmax(0,1fr);gap:8px;align-items:center;padding:8px 0}
.wsdns>div+div{border-top:1px solid var(--line)}
.wsdnsh{color:var(--sub);font-size:.8rem}
.wsdnsv{display:flex;align-items:center;gap:8px;min-width:0}
.wsdnsv code{overflow-wrap:anywhere;min-width:0}
.wsdnsv .navbtn{flex:none}
.cfield .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:859px),(max-height:499px){ .wstpls{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .wstd{display:none} }

/* free trial signup /?start and the days-left bar (web-12.67) */
#s-start:not([hidden]){display:flex;min-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
#startBody{flex:1 1 auto;display:flex;min-width:0}
#s-start .stbox{width:100%;max-width:460px;margin:auto;padding:24px 0 40px;min-width:0}
#s-start .logincard .lifield:not(:first-of-type){margin-top:16px}
#s-start .lifield.mt8{margin-top:8px}
#s-start .stgo{width:100%;margin-top:18px}
.stfound{min-width:0}
#s-start .brandslot .brandrow{display:flex;justify-content:center;padding:0 0 22px}
#s-start .brandslot .prodmark .lw{display:none}
#s-start .brandslot .prodmark .lp{display:inline-block}
#s-start .brandslot .prodmark img{height:92px}
.stchips{display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0;overflow:visible}
.stchips .chip{min-width:52px;justify-content:center}
.stchips .chip:not([aria-current="true"]){background:var(--field)}
.stseg{display:flex}
.stseg button{flex:1 1 0}
.stweb{display:flex;gap:8px}
.stweb .liinput{flex:1 1 auto;min-width:0}
.stweb .cta{flex:0 0 auto;width:auto;padding:0 14px;height:48px;white-space:nowrap}
.sthp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.stfound{margin-top:14px;padding:14px;border:1px solid var(--hair);border-radius:14px;background:var(--field)}
.stfound.stwait{text-align:center}
.stfound.stwait .tbloadwrap{min-height:0;padding:8px 0 4px}
.stfound.stwait .tbload img{height:40px}
.sthd{font-weight:700;font-size:.9rem;margin-bottom:8px}
.stpick{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;font-size:.95rem}
.stpick input,.stcar input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--teal)}
.stlogo{display:inline-flex;align-items:center;justify-content:center;height:44px;min-width:44px;max-width:150px;padding:4px 8px;border-radius:8px;background:#fff;border:1px solid var(--hair)}
.stlogo img{max-height:36px;max-width:134px;object-fit:contain}
.stswatch{width:36px;height:36px;border-radius:8px;border:1px solid var(--hair);flex:0 0 auto}
.stcars{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-top:6px;max-height:340px;overflow:auto;overscroll-behavior:contain}
.stcar{display:flex;align-items:center;gap:10px;min-width:0;padding:6px;border-radius:10px;background:var(--card);cursor:pointer}
.stimg{width:64px;height:48px;border-radius:6px;overflow:hidden;flex:0 0 auto;background:var(--hair)}
.stimg img{width:100%;height:100%;object-fit:cover;display:block}
.stct{display:flex;flex-direction:column;min-width:0}
.stct b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stct small{color:var(--sub);font-size:.8rem}
.stterms{text-align:center}
.ststeps{display:flex;gap:6px;margin:0 0 16px}
.ststeps span{flex:1 1 0;height:4px;border-radius:2px;background:var(--hair)}
.ststeps span.on{background:#1F5C3A}
#s-start .stback{display:block;width:100%;margin-top:10px;padding:10px;background:none;border:0;color:var(--sub);font:inherit;font-size:.95rem;font-weight:600;cursor:pointer}
.stdone{text-align:center}
.stdone .plgateic{margin:4px auto 12px}
.stdone p{margin:10px 0 0}
/* web-12.73 trial banner: thin, right across the top (web-12.77: amber with dark text, so it never matches a business's app colour); --tb pushes the page, sticky headers and fixed side panels down */
:root.trialon:not(.tbhide){--tb:34px}
.trialbar{position:fixed;top:0;left:0;right:0;z-index:58;height:calc(env(safe-area-inset-top,0px) + var(--tb,0px));padding:env(safe-area-inset-top,0px) 12px 0;display:flex;align-items:center;justify-content:center;gap:12px;background:#FFC53D;color:#1A1D21;font-size:.85rem;line-height:1;border-bottom:1px solid rgba(0,0,0,.12)}
:root:not(.trialon) .trialbar,:root.tbhide .trialbar{display:none}
.trialbar .tbtxt{display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.trialbar .tbtxt b{font-weight:700}
.trialbar .tbsep{width:1px;height:12px;background:rgba(0,0,0,.3);margin:0 10px;flex:none}
.trialbar .tbcta{flex:none;border:0;border-radius:999px;background:#1A1D21;color:#fff;font:inherit;font-weight:700;font-size:.8rem;padding:5px 12px;cursor:pointer;white-space:nowrap}
.stbox a{color:var(--teal-ink)}
.loginfoot a{color:var(--teal-ink);font-weight:600}

/* web-12.70: the sidebar's collapse button only shows with the sidebar (it showed on the trial signup and sign in pages) */
body:has(#tabbar[hidden]) .sideedge{display:none!important}
/* the trial signup's main button is the website's green */
#s-start .stgo{background:#1F5C3A;border-color:#1F5C3A;color:#fff}
#s-start .logincard .lifield.mt14{margin-top:16px}
/* web-12.72 PPSR on a trial */
.trialtag{flex:none;margin-left:8px;padding:3px 9px;border-radius:999px;background:var(--field);color:var(--sub);font-size:.75rem;font-weight:600;white-space:nowrap}
#sheet .tc{text-align:center}
#sheet .plgateic{margin:4px auto 12px}
/* web-12.73 billing page */
#s-billing{max-width:none!important;padding:0 16px 48px!important}
.billwrap{max-width:1120px;margin:0 auto;padding:16px 0 0}
.billtop{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.billtop .brandrow{padding:0}
.billtop .prodmark img{height:30px}
.billhead{text-align:center;margin:28px auto 26px;max-width:620px}
.billh{font-size:clamp(1.7rem,4.5vw,2.4rem);line-height:1.1;font-weight:600;letter-spacing:-.02em;margin:0 0 10px}
.billsub{color:var(--sub);font-size:1rem;line-height:1.5;margin:0 0 20px}
.billcyc{display:inline-flex!important;width:auto}
.billcyc button{padding:0 16px;white-space:nowrap}
.billgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:620px){ .billgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1060px){ .billgrid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.billcard{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--hair);border-radius:20px;padding:20px 18px 18px;min-width:0}
.billcard.billhot{border:2px solid #1F5C3A}
.billpop{position:absolute;top:-11px;left:18px;background:#1F5C3A;color:#fff;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.billcard h3{margin:0;font-size:1.15rem;font-weight:700}
.billfor{color:var(--sub);font-size:.88rem;margin-top:3px}
.billprice{display:flex;align-items:baseline;gap:6px;margin-top:16px}
.billprice b{font-size:2rem;font-weight:700;letter-spacing:-.02em}
.billprice span{color:var(--sub);font-size:.85rem;white-space:nowrap}
.billnote{color:var(--sub);font-size:.8rem;margin-top:2px}
.billcard ul{list-style:none;padding:0;margin:16px 0 18px;display:grid;gap:7px;font-size:.9rem}
.billcard ul li{padding-left:14px;position:relative}
.billcard ul li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:#1F5C3A}
.billcard .cta{margin-top:auto;width:100%}
.billcard.billhot .cta:not(.secondary){background:#1F5C3A;border-color:#1F5C3A;color:#fff}
.billinc{margin:24px 0 0;background:var(--card);border:1px solid var(--hair);border-radius:20px;padding:18px 20px}
.billinch{font-weight:700;margin-bottom:12px}
.billinc ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:9px 20px;font-size:.92rem}
@media (min-width:620px){ .billinc ul{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1060px){ .billinc ul{grid-template-columns:repeat(3,minmax(0,1fr))} }
.billinc li{display:flex;gap:8px;align-items:flex-start} .billinc li svg{color:#1F5C3A;flex:none;margin-top:2px}
.billfoot{text-align:center;margin-top:20px}
.billok{max-width:460px;margin:40px auto 0;text-align:center}
.billok .plgateic{margin:4px auto 12px}
.billok p{margin:10px 0 0}
.badge.pl-want{background:color-mix(in srgb,#1F5C3A 14%,transparent);color:#1F5C3A}
.plwant{color:var(--text)}
.pltdays{display:flex;flex-wrap:wrap;gap:8px;padding:0}
@media (max-width:480px){ .billtop .prodmark img{height:22px} }
.billfoot a{color:var(--teal-ink)}
/* web-12.73 trial valuation note */
.notebox.valtrial{display:flex;gap:8px;align-items:flex-start;margin:4px 0 12px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,#1F5C3A 9%,transparent);color:var(--text)}
.notebox.valtrial svg{color:#1F5C3A;flex:none;margin-top:3px}
/* web-12.76 trial signup: that email already has a login */
.stexists{display:flex;flex-direction:column;gap:6px;margin-top:16px;padding:16px;border-radius:14px;background:color-mix(in srgb,#1F5C3A 8%,var(--card));border:1px solid color-mix(in srgb,#1F5C3A 25%,transparent)}
.stexists b{font-size:1rem}
.stexists span{color:var(--sub);font-size:.92rem;line-height:1.45}
.stexists .stgo{margin-top:10px}
.stexists .stback{margin-top:2px}
/* web-12.79 trade-in appraisals */
.aphead{padding:6px 0 4px}
.aphead h2{margin:0;font-size:1.35rem;font-weight:600;line-height:1.2}
.apsub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;color:var(--sub);font-size:.9rem}
.apsteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:2px}
.apstep{height:32px;border:0;background:transparent;padding:0;cursor:pointer;position:relative}
.apstep::before{content:"";position:absolute;left:0;right:0;top:13px;height:6px;border-radius:3px;background:var(--line)}
.apstep.on::before{background:var(--green)}
.apx{min-width:44px;justify-content:center}
.apcard{background:var(--tile);border-radius:20px;padding:14px 16px;margin-top:12px}
.apcard .cgroup{margin-top:0}
.aptitle{margin:0 0 10px;font-size:1rem;font-weight:600;display:flex;align-items:center;gap:8px}
.apcount{font-weight:500;color:var(--sub);font-size:.85rem}
.apgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}
.apgrid .apwide{grid-column:1/-1}
.apdeal{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--text);text-align:left;font:inherit;cursor:pointer}
.apdeal>svg:first-child{flex:none;color:var(--green)}
.apdeal>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.apdeal small{color:var(--sub);font-size:.85rem}
#apPlate .platecard{margin-top:12px}
.apphotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.apph{aspect-ratio:1;border-radius:14px;border:1.5px dashed var(--line);background:var(--card);color:var(--sub);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;padding:6px;text-align:center}
.apph.has{border:0;background-size:cover;background-position:center;justify-content:flex-end;align-items:flex-start;color:#fff}
.apph.has span{background:rgba(0,0,0,.55);border-radius:8px;padding:2px 6px}
.apai .aidmg{margin-top:0}
.apai .sectionlabel:first-child{margin-top:0}
.apck{cursor:pointer}
.apck input{flex:none;width:20px;height:20px;accent-color:var(--green);margin:0 4px 0 0}
.aplines>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:.92rem}
.aplines>div:first-child{border-top:0}
.aplines b{white-space:nowrap}
.aplines .apmost{border-top:2px solid var(--text);font-weight:600}
.aplines .apmost b{font-size:1.15rem}
.aplines.big b{font-size:1.3rem}
.apinl{width:120px;text-align:right;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit;padding:0 8px}
.apnums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.apnums .cfield input{font-size:1.15rem;font-weight:700}
.apfrom{font-size:.85rem;color:var(--sub)}
.apsum{margin:6px 0 0;font-size:.92rem;line-height:1.45}
.apnote{margin:8px 0 0;font-size:.92rem}
.apwait,.apok{display:flex;gap:12px;align-items:flex-start}
.apwait>svg,.apok>svg{flex:none;margin-top:2px;color:var(--sub)}
.apok{background:color-mix(in srgb,var(--ok) 12%,var(--tile))}
.apok>svg{color:var(--ok)}
.apwait>div,.apok>div{display:flex;flex-direction:column;gap:2px}
.apwait span,.apok span{font-size:.88rem;color:var(--sub)}
.apval .valcard,.apval>div>*:first-child{margin-top:0}
.apval .valsend{display:none!important}
.apsend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.apfoot{margin-top:18px}
.apfoot .cta{width:100%}
@media (max-width:380px){ .apgrid,.apnums{grid-template-columns:minmax(0,1fr)} }
.hric.ini{font-size:.75rem;font-weight:700}
/* web-12.80 the platform admin, its own bold item at the bottom of the Settings list */
.setadmin .lbl{font-weight:700}
.setadmin .lbl small{font-weight:400}
/* web-12.96 (Tom): Appraisals and For sale have their own + for what goes on that page, on the computer too */
#stockAdd,#selfAdd{justify-content:center!important;place-content:center!important}
#stockAdd[hidden]{display:none!important}
@media (min-width:860px) and (min-height:500px){
  #s-self>.bar.tbar>#selfAdd.pageadd,#s-stock>.bar.tbar>#stockAdd:not([hidden]){order:3;margin:0 0 0 auto!important;width:auto!important;max-width:none!important;min-width:0!important;height:40px!important;padding:0 16px 0 12px!important;border-radius:var(--r-pill)!important;display:inline-flex!important;align-items:center;gap:6px;background:var(--ink)!important;box-shadow:none!important;color:var(--bg)!important;font:600 var(--t-small,14px)/1 var(--font);white-space:nowrap}
  #s-self>.bar.tbar>#selfAdd.pageadd svg,#s-stock>.bar.tbar>#stockAdd svg{width:17px;height:17px}
  #s-self>.bar.tbar>#selfAdd.pageadd .pblabel,#s-stock>.bar.tbar>#stockAdd .pblabel{display:inline!important;font:600 14px/1 var(--font)!important;color:var(--bg)!important}
}
@media (min-width:860px) and (max-width:1199px) and (min-height:500px){
  #s-self>.bar.tbar>#selfAdd.pageadd,#s-stock>.bar.tbar>#stockAdd:not([hidden]){width:40px!important;padding:0!important;justify-content:center!important}
  #s-self>.bar.tbar>#selfAdd.pageadd .pblabel,#s-stock>.bar.tbar>#stockAdd .pblabel{display:none!important}
}
/* web-13.01 (Tom: spacing, "maybe use tabs instead"): Leads' Buyers | Sellers is a tab bar, not pills, so it reads as
   switching lists rather than another filter, with room before the search box */
#s-self #leadKind.segctl{display:flex!important;gap:0!important;background:none!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:inset 0 -1px 0 var(--line)!important;margin:var(--s-2,8px) 0 14px!important;width:auto!important}
#s-self #leadKind.segctl button{flex:1 1 0!important;min-height:44px!important;padding:0 12px!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--ink-2,var(--sub))!important;font:500 var(--t-body,16px)/1 var(--font)!important}
#s-self #leadKind.segctl button[aria-pressed="true"]{color:var(--ink)!important;box-shadow:inset 0 -2px 0 var(--ink)!important;font-weight:600!important}
#s-self #leadKind.segctl button:hover{color:var(--ink)!important}
/* web-13.02 three or more bookings at once: just the name in each narrow box (the full detail is in its tooltip) */
.wkev.tight .wkt1 svg,.wkev.tight .wkt1 em,.wkev.tight .wkt2{display:none}
.wkev.tight{padding:4px 4px}
/* web-13.06 a booking's pop-up on the Calendar */
.cpop{display:flex;flex-direction:column;gap:6px;padding:4px 2px}
.cpkind{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--sub)}
.cpname{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:none;border:0;padding:2px 0;text-align:left;font:600 1.15rem/1.25 var(--font);color:var(--ink);cursor:pointer}
.cpname:hover{text-decoration:underline}
.cpname svg{flex:none;opacity:.6}
.cpsub{font-size:.88rem;color:var(--ink-2,var(--sub));line-height:1.35}
.cpst{align-self:flex-start;margin-top:2px}
.cpcontact,.cpacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cpacts{padding-top:10px;border-top:1px solid var(--line)}
.cpacts .pill.danger{color:var(--rep)}
.cpcontact a.pill{text-decoration:none!important;color:var(--ink)}
/* web-13.07 a booking found from the Coming up column flashes */
.cfound{outline:2px solid var(--ink)!important;outline-offset:2px;animation:cfound 1.6s ease}
@keyframes cfound{0%,60%{box-shadow:0 0 0 6px color-mix(in srgb,var(--ink) 18%,transparent)}100%{box-shadow:none}}
/* web-13.08 search at the top of the Calendar's Coming up column */
.calside .cssearch{margin:2px 0 10px;min-height:40px}
.calside .cssearch input{font-size:.92rem}
.calside.min .cssearch{display:none}
.calside .csitem[hidden],.calside .csnone[hidden]{display:none!important}
.calside .cssec[hidden]{display:none!important}
/* web-13.11 + Book in the Calendar's Coming up header (the top-bar one hides while that column is open) */
#s-cal #calAdd.incal{display:none!important}
.calside .csbook{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 10px;border:0;border-radius:999px;background:var(--ink);color:var(--bg);font:600 14px/1 var(--font);cursor:pointer;margin-left:auto;white-space:nowrap}
.calside .csbook svg{width:16px;height:16px}
.calside.min .csbook{display:none}
.calside .cssearch{background:var(--card,#fff)!important;border-radius:999px;padding:0 14px;box-shadow:inset 0 0 0 1px var(--line)}
/* web-13.12 the Pipeline's Buyers | Sellers tabs, the same as Leads */
#s-pipe .segctl.pkind{display:flex!important;gap:0!important;background:none!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:inset 0 -1px 0 var(--line)!important;margin:0 0 16px!important;max-width:420px}
#s-pipe .segctl.pkind button{flex:1 1 0!important;min-height:44px!important;padding:0 12px!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--ink-2,var(--sub))!important;font:500 var(--t-body,16px)/1 var(--font)!important}
#s-pipe .segctl.pkind button[aria-pressed="true"]{color:var(--ink)!important;box-shadow:inset 0 -2px 0 var(--ink)!important;font-weight:600!important}

/* web-13.49 one site at a time on Leads, Pipeline, Calendar and Reports */
.sitebar{margin-bottom:12px}
.rplib .sitebar.rpsites{padding:0 0 4px;margin:0 0 8px;flex-wrap:wrap}
/* web-13.50 the buyer's signature waits for the Form 12 tick; a contract signed with different wording */
.sgsig.sgoff{opacity:.5;pointer-events:none}
.notebox.bad{color:var(--rep);font-weight:600}
/* web-13.57 (Tom): no List | Pipeline switch on phones either; Pipeline is in the menu, like the sidebar on a computer */
.segctl.lswitch{display:none!important}
/* web-13.58 (Tom): the site pills had 5px above the search bar; the page's chip rules zeroed .sitebar's margin */
#s-self .chips.sitebar,#s-stock .chips.sitebar,#s-cal .chips.sitebar{margin-bottom:var(--s-3)}
/* web-13.60: the split view's own .chips margin (iPad and computer) was overriding it */
body.split-leads #s-self .chips.sitebar,body.split-stock #s-stock .chips.sitebar{margin-bottom:var(--s-3)}
/* web-13.61 Switch account: the iPad sidebar item (the computer's top bar has it under your initials) and the phone menu button */
#navSwitch[hidden]{display:none!important}
@media (min-width:860px) and (min-height:500px) and (hover:hover) and (pointer:fine){ #navSwitch{display:none!important} }
.ndswitch{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:0;border-radius:var(--r-pill);background:var(--solid);color:var(--on-solid);font:500 14px/1 var(--font);white-space:nowrap}
.ndme>.ndwho{display:flex;flex-direction:column;min-width:0;flex:1}
/* web-13.62 (Tom): time boxes in a row line up on the right like the date (Safari left-aligned them) */
.cell input[type=time]{display:flex;justify-content:flex-end;text-align:right;-webkit-appearance:none;appearance:none;min-height:1.4em;color:var(--text)}
.cell input[type=time]::-webkit-date-and-time-value{text-align:right;margin:0;width:100%}
.cell input[type=time]::-webkit-datetime-edit{display:flex;justify-content:flex-end;padding:0}
/* web-13.63 (Tom): Email / Text the time are two even outlined buttons under their own heading, not loose links */
.vwtell{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.vwtell .cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
/* web-13.64 a buyer's note sits under their details in the hero, readable on the green (it was squeezed into the top row, dark on dark) */
:is(#s-selfd,#s-stockd) .lhero>.bynote{grid-column:1/-1;order:9;margin:0;color:rgba(255,255,255,.85)!important;font-size:.92rem;line-height:1.45}
/* web-13.65 the rego papers' details on the appraisal's first page */
.apsubh{margin:16px 0 8px;font-size:.95rem;font-weight:600}.apsubh .tsub{font-weight:400}
/* web-13.65 the duty worked out from the engine, one tap to add */
.dutysug{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.dutysug>span{flex:1 1 auto}.dutysug .cta{width:auto;padding:0 18px;min-height:40px}
.sigmine{display:inline-flex;align-items:center;gap:6px;margin:6px 0 4px;font-weight:600}
/* web-13.67 the Deal: one page per sale, a stage at a time (yard mode) */
.dlhero{display:flex;align-items:center;gap:8px;padding:14px 16px;background:var(--card);border-radius:14px}
.dlhero>div{flex:1;display:flex;flex-direction:column;gap:2px}
.dlhero b{font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlhero span{color:var(--sub);font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlhero .pill{width:40px;height:40px;padding:0;justify-content:center;flex:0 0 auto}
.dlline{display:flex;gap:0;margin:14px -16px 4px;padding:0 16px 4px;overflow-x:auto;scrollbar-width:none}
.dlline::-webkit-scrollbar{display:none}
.dlstep{flex:1 0 74px;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:6px 2px;color:var(--sub);font:inherit;position:relative;cursor:pointer}
.dlstep::before{content:"";position:absolute;top:21px;left:-50%;right:50%;height:2px;background:var(--hair);z-index:0}
.dlstep:first-child::before{display:none}
.dlstep.done::before,.dlstep.done+.dlstep::before{background:var(--teal)}
.dldot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;background:var(--card);border:2px solid var(--hair);color:var(--sub);position:relative;z-index:1}
.dlstep.done .dldot{background:var(--teal);border-color:var(--teal);color:#fff}
.dlstep.next .dldot{border-color:var(--teal);color:var(--teal-ink)}
.dlstep.on .dldot{box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 22%,transparent)}
.dlname{font-size:.74rem;font-weight:600;white-space:nowrap}
.dlstep.on .dlname{color:var(--text)}
.dlpanel{min-height:200px}
.dlfoot{display:flex;gap:10px}
.dlfoot .cta{flex:1;min-height:52px;font-size:1.05rem}
.dlsheet{background:var(--card);border-radius:14px;padding:4px 14px 10px}
.dlin{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:.5px solid var(--hair)}
.dlin>span{flex:1;min-width:0;font-weight:600;font-size:.95rem}
.dlin small,.dlrow small{display:block;font-weight:400;color:var(--sub);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlin input{width:132px;flex:0 0 auto;text-align:right;font-size:1.12rem;font-weight:600;border:1px solid var(--hair);border-radius:10px;padding:8px 10px;background:var(--field,var(--bg));color:var(--text)}
.dlin input:disabled{border-color:transparent;background:none;color:var(--text);opacity:1}
.dlrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:.5px solid var(--hair)}
.dlrow>span{flex:1;min-width:0;font-size:.95rem}
.dlrow>b{white-space:nowrap}
.dlrow.sub>span,.dlrow.sub>b{color:var(--sub);font-weight:600}
.dlgrp{margin:14px 0 2px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--sub)}
.dlsheet>.navbtn{margin-top:8px}
.dlsheet .segctl{margin:8px 0 4px}
.dlsheet .dutysug{margin:8px 0}
.dltotal{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 0 4px;margin-top:6px;border-top:2px solid var(--text)}
.dltotal span{font-weight:700}
.dltotal b{font-size:1.6rem;white-space:nowrap}
.dlnum{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.78rem;font-weight:700;border:2px solid var(--hair);color:var(--sub)}
.dlnum.ok{background:var(--teal);border-color:var(--teal);color:#fff}
.dlbar{display:flex;align-items:center;gap:8px;padding:10px 14px;margin-bottom:12px;border-radius:12px;background:color-mix(in srgb,var(--teal) 12%,var(--card));font-size:.9rem}
.dlbar>span{flex:1;min-width:0}
.dlbar .tlink{white-space:nowrap}
.cview{background:var(--card);border-radius:16px;padding:6px 18px 12px}
.cvrow{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:.5px solid var(--hair);font-size:1.1rem}
.cvrow b{white-space:nowrap}
.cvrow.tot{border-bottom:0;border-top:2px solid var(--text);font-size:1.5rem;font-weight:700}
.dlrowbtn .lbl{flex:1}
.dlmini{display:flex;gap:3px;flex:0 0 auto}
.dlmini i{width:8px;height:8px;border-radius:50%;background:var(--hair)}
.dlmini i.d{background:var(--teal)}
.dlmini i.n{box-shadow:0 0 0 2px var(--teal);background:var(--card)}
.dlnext{font-size:.8rem;color:var(--sub);white-space:nowrap;min-width:72px;text-align:right}
@media (max-width:420px){ .dlnext{display:none} }
@media (min-width:860px) and (min-height:500px){ .dlline{margin-left:0;margin-right:0;padding-left:0;padding-right:0} }
/* web-13.68 read it from a photo */
.readrow{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.readbtn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid var(--hair);border-radius:999px;padding:8px 14px;min-height:40px;background:var(--card)}
.readbtn:disabled{opacity:.6}
.sectionlabel+.readrow{margin-top:0}
@media (max-width:519px){ .dlline{margin:14px 0 4px;padding:0;overflow:visible} .dlstep{flex:1 1 0;min-width:0} .dlname{display:none} }
#selfBody .dlrowbtn.sel{background:color-mix(in srgb,var(--teal) 10%,var(--card))}
/* web-13.69 Prospects: Buying / Selling tags, and the Deals tab */
.ptags{display:inline-flex;gap:4px;margin-right:6px;vertical-align:1px}
.ptag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.02em;line-height:1;padding:3px 7px;border-radius:999px;white-space:nowrap}
.ptag.buy{background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal-ink)}
.ptag.sell{background:var(--chip,var(--field));color:var(--ink,var(--text));box-shadow:inset 0 0 0 1px var(--line,var(--hair))}
body.hasdeals .tabbar .in{grid-template-columns:repeat(6,1fr)}
@media (max-width:859px),(max-height:499px){ body.hasdeals .tabbar .in{gap:4px} body.hasdeals .tab{width:47px;height:47px} body.hasdeals .tab svg{width:20px;height:20px} }
/* web-13.70 the Deals list: views, owner, sort, amounts */
.dlviews{padding:12px 0 4px}
.dlbarf{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 2px}
.dldd{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.dldd.on{box-shadow:inset 0 0 0 1px var(--teal);color:var(--teal-ink)}
.dlsum{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:12px 4px 0;font-size:.85rem;color:var(--sub)}
.dlsum b{color:var(--text);font-weight:600}
.dlsum span{font-weight:600;color:var(--text);white-space:nowrap}
.dlrowbtn .lbl{min-width:0}
.dltop{display:flex;align-items:baseline;gap:8px;min-width:0}
.dlnm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlamt{font-weight:600;white-space:nowrap}
.dlright{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto}
.dlright .dlnext{min-width:0}
#s-self #leadKind.segctl[hidden]{display:none!important}
.dlrt{display:flex;align-items:center;gap:8px}
.dlav{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.62rem;font-weight:700;background:var(--hi-2,var(--chip));color:var(--teal-ink)}
/* web-13.72 deals and prospects linked both ways */
.assochd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.assochd .sectionlabel{margin-bottom:8px}
.assochd .tlink{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.cell.assoc{align-items:flex-start}
.assic{flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--hi-2,var(--chip));color:var(--teal-ink);margin-right:10px}
.cell.assoc .subline b{font-weight:600;color:var(--text)}
.tfbtns{display:flex;flex-wrap:wrap;gap:8px}
.dllinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dllink{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;border-radius:999px;border:1px solid var(--hair);background:var(--card);color:var(--text);font:inherit;cursor:pointer;max-width:100%}
.dllink>svg{flex:none;color:var(--teal-ink)}
.dllink span{display:block;line-height:1.2;font-size:.88rem;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dllink small{font-size:.88rem;font-weight:400;color:var(--sub);margin-right:5px}