/* Move CRM design tokens. DESIGN.md (next to README.md) explains each one and the contrast it was checked at. Dark is what most owners see (their phone is in dark mode); light follows the phone setting. */
:root{
  color-scheme: light;
  /* colour */
  --canvas:#f6f5f3; --surface:#fcfcfb; --surface-2:#ffffff; --text:#0b0b0b; --text-2:#52514e; --muted:#6f6d68;
  --accent:#2a78d6; --accent-text:#1b5fb0; --accent-fill:#2470cc; --accent-fill-hover:#1b5fb0; --on-accent:#ffffff; --tint:#eaf1fb;
  --hairline:rgba(20,18,12,.09); --border:#e3e1dc; --border-strong:#d6d3cd; --field-edge:#878580;
  --success:#1d7a3e; --warn:#8a5d00; --danger:#b3261e; --success-bg:#e6f3ea; --warn-bg:#faf0d9; --danger-bg:#f9e6e4;
  --shadow-1:0 1px 2px rgba(20,18,12,.05),0 1px 1px rgba(20,18,12,.03); --shadow-bar:0 -1px 0 var(--hairline),0 -4px 12px rgba(20,18,12,.04);
  --sai-t:env(safe-area-inset-top,0px); --sai-r:env(safe-area-inset-right,0px); --sai-b:env(safe-area-inset-bottom,0px); --sai-l:env(safe-area-inset-left,0px);   /* the notch and home bar, read by crm.js so pop-ups stay clear of them */
  --scrim:rgba(11,11,11,.6);   /* dims the page behind the welcome guide */
  /* type: one system font; sizes in px so a phone never zooms an input (16px) */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-body:15px; --fs-input:16px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px;
  /* spacing (4px steps) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px;
  /* corners: controls 8, callouts and segments 10, cards 12, a card that holds cards 16 (12 + its 4px... see .col) */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-pill:999px;
  /* motion: state feedback only */
  --t-fast:150ms cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme: dark){
  :root{color-scheme:dark;--canvas:#121211;--surface:#1a1a19;--surface-2:#222220;--text:#f0efec;--text-2:#c3c2b7;--muted:#9a988f;
    --accent:#3987e5;--accent-text:#79b0f2;--accent-fill:#2b6dcb;--accent-fill-hover:#245fb3;--tint:#1f2a3a;
    --hairline:rgba(255,255,255,.07);--border:#2c2b29;--border-strong:#3a3936;--field-edge:#6b6964;
    --success:#52c27c;--warn:#e0a63a;--danger:#f07a72;--success-bg:#16301f;--warn-bg:#33280f;--danger-bg:#3a1b19;
    --shadow-1:0 1px 2px rgba(0,0,0,.35);--shadow-bar:0 -1px 0 var(--hairline),0 -6px 16px rgba(0,0,0,.35);--scrim:rgba(0,0,0,.72)}
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* the page script shows and hides buttons with the hidden attribute; .btn and .actions must not undo it */
html,body{margin:0;background:var(--canvas);color:var(--text);font:var(--fs-body)/1.5 var(--font);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%}
a{color:var(--accent-text);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:2px}
h1{font-size:var(--fs-2xl);line-height:1.2;margin:0 0 var(--s-1);letter-spacing:-.015em;font-weight:650;text-wrap:balance}
h2{font-size:var(--fs-lg);line-height:1.3;margin:var(--s-6) 0 var(--s-2);font-weight:650;letter-spacing:-.005em;text-wrap:balance}
h3{font-size:var(--fs-body);line-height:1.35;margin:var(--s-4) 0 var(--s-2);font-weight:650;color:var(--text-2);text-wrap:balance}
p,li,dd,.lead,.empty{text-wrap:pretty}
p{margin:0 0 var(--s-2)} .muted{color:var(--muted)} .small{font-size:var(--fs-sm)} .lead{color:var(--text-2);margin-bottom:var(--s-4);max-width:68ch}
.num,.tnum{font-variant-numeric:tabular-nums} .num{text-align:right;white-space:nowrap}
/* money, phone numbers, dates, times and counts line up and never jitter */
table,dl.facts,.stat,.counts,.cal,.daybtn,.pill,.meta,.lc-when,.when,.readonly,.tel,.suggest,input[type=tel],input[type=date],input[type=time],input[type=number],#preview{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:var(--s-2);top:-60px;z-index:30;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:var(--accent-fill);color:var(--on-accent);font-weight:650}
.skip:focus{top:var(--s-2)}
/* shell */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-4);height:54px;background:var(--surface);border-bottom:1px solid var(--hairline)}
.brand{font-weight:650;white-space:nowrap;color:var(--text);min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.brand{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px} .brand .bname{min-width:0;overflow:hidden;text-overflow:ellipsis} .brand:hover{text-decoration:none}
.logo{display:block;height:34px;width:auto;max-width:120px;object-fit:contain;flex:0 0 auto}
.logo.big{height:72px;max-width:220px} .logopreview{margin:var(--s-2) 0;padding:var(--s-2);border:1px solid var(--hairline);border-radius:var(--r-md);display:inline-block;background:var(--surface)}
.crewbrand{display:flex;align-items:center;gap:var(--s-2)} .crewbrand .logo{height:40px}
.codestep .btn.big{min-height:52px;font-size:18px}
.top form.search{flex:1;max-width:420px}
.top input[type=search]{width:100%}
.searchtoggle{display:none}
.grow{flex:1}
.nav{display:flex;gap:2px;overflow-x:auto;padding:0 var(--s-2);background:var(--surface);border-bottom:1px solid var(--hairline)}
.nav a{padding:var(--s-3);color:var(--text-2);white-space:nowrap;border-bottom:2px solid transparent;transition:color var(--t-fast),border-color var(--t-fast)}
.nav a:hover{color:var(--text);text-decoration:none}
.nav a.on{color:var(--text);font-weight:600;border-bottom-color:var(--accent)}
.nav a.addlead{margin-left:auto;color:var(--accent-text);font-weight:600}
main{max-width:1180px;margin:0 auto;padding:var(--s-5) var(--s-4) 96px}
main:focus{outline:0}
.flash{background:var(--tint);border:1px solid var(--hairline);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);margin:0 0 var(--s-3);color:var(--text)}
/* controls */
input,select,textarea,button{font:inherit;color:var(--text)}
input[type=text],input[type=search],input[type=email],input[type=tel],input[type=password],input[type=date],input[type=time],input[type=number],input:not([type]),select,textarea{
  width:100%;background:var(--canvas);border:1px solid var(--field-edge);border-radius:var(--r-sm);padding:9px var(--s-3);min-height:40px;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
textarea{min-height:84px;resize:vertical}
input[type=file]{max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--danger)}
input[aria-invalid=true]:focus,textarea[aria-invalid=true]:focus{outline-color:var(--danger)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 var(--s-4);border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--surface-2);cursor:pointer;font-weight:550;color:var(--text);line-height:1.2;
  transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn:hover{text-decoration:none;background:var(--tint)}
.btn:active{background:var(--tint);border-color:var(--field-edge)}
.btn.primary{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-fill-hover);border-color:var(--accent-fill-hover)}
.btn.primary:active{background:var(--accent-fill-hover);border-color:var(--accent-fill-hover)}
.btn.tonal{background:var(--tint);border-color:transparent;color:var(--accent-text);font-weight:600}   /* the main action of one card (Call); the screen's one primary button stays filled */
.btn.tonal:hover,.btn.tonal:active{border-color:var(--accent)}
.btn.danger{color:var(--danger)} .btn.small{min-height:32px;padding:0 var(--s-3);font-size:var(--fs-sm)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.btn[aria-busy=true]{cursor:progress;opacity:.85}
.btn[aria-busy=true]:before{content:"";width:14px;height:14px;flex:0 0 14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.linklike{background:none;border:0;color:var(--accent-text);cursor:pointer;padding:0}
label{display:block;font-size:var(--fs-sm);color:var(--text-2);margin:0 0 var(--s-1)}
.field{margin:0 0 var(--s-3)}
.field-error{display:flex;gap:6px;align-items:flex-start;margin:6px 0 0;font-size:var(--fs-sm);font-weight:550;color:var(--danger)}
.field-error:before{content:"!";flex:0 0 16px;height:16px;border-radius:50%;background:var(--danger);color:var(--canvas);font-size:11px;font-weight:800;line-height:16px;text-align:center;margin-top:1px}
.hint{font-size:var(--fs-sm);color:var(--muted);margin:6px 0 0}
.row{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.row.two{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.check{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-2)} .check input{width:auto;min-height:0;accent-color:var(--accent-fill)}
.errors{background:var(--danger-bg);border:1px solid var(--danger);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);margin:0 0 var(--s-3);color:var(--text)}
.errors ul{margin:var(--s-1) 0 0 18px;padding:0}
/* surfaces: a soft hairline and a faint shadow instead of a hard line */
.card{background:var(--surface);border:1px solid var(--hairline);box-shadow:var(--shadow-1);border-radius:var(--r-lg);padding:var(--s-4);margin:0 0 var(--s-3);overflow-wrap:anywhere}
.card h2:first-child{margin-top:0}
.stats{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:var(--s-4) 0 var(--s-5)}
.stat{background:var(--surface);border:1px solid var(--hairline);box-shadow:var(--shadow-1);border-radius:var(--r-lg);padding:var(--s-3) var(--s-4)}
.stat b{display:block;font-size:var(--fs-2xl);line-height:1.2;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .stat span{color:var(--muted);font-size:var(--fs-sm)}
.pill{display:inline-flex;align-items:center;font-size:var(--fs-xs);font-weight:600;padding:2px 9px;border-radius:var(--r-pill);background:var(--tint);color:var(--accent-text);white-space:nowrap;vertical-align:middle}
.pill.booked,.pill.done,.pill.paid{background:var(--success-bg);color:var(--success)} .pill.lost{background:var(--danger-bg);color:var(--danger)}
.pill.quoted,.pill.contacted{background:var(--warn-bg);color:var(--warn)} .pill.flag{background:var(--danger-bg);color:var(--danger)} .pill.ready{background:var(--accent-fill);color:var(--on-accent)}
table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--hairline);font-size:var(--fs-md)}
th,td{padding:10px var(--s-3);text-align:left;border-bottom:1px solid var(--hairline);vertical-align:top}
th{font-size:var(--fs-xs);color:var(--text-2);font-weight:650;background:var(--surface)} tr:last-child td{border-bottom:0}
.tw{overflow-x:auto;border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.tw > table{border-radius:var(--r-lg)}
tr.link{cursor:pointer} tr.link:hover td{background:var(--tint)}
.empty{padding:var(--s-5);border:1px dashed var(--border-strong);border-radius:var(--r-lg);color:var(--text-2);text-align:center}
.empty b{color:var(--text)} .empty .actions{justify-content:center;margin-bottom:0}
dl.facts{display:grid;grid-template-columns:150px 1fr;gap:6px var(--s-3);margin:0} dl.facts dt{color:var(--muted)} dl.facts dd{margin:0;overflow-wrap:anywhere}
.filters{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:end;margin:0 0 var(--s-3)} .filters .f{flex:1 1 140px;min-width:0}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-3) 0}
.tl{list-style:none;padding:0;margin:0;border-left:2px solid var(--border)}
.tl li{position:relative;padding:0 0 var(--s-3) var(--s-4)} .tl li:before{content:"";position:absolute;left:-6px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.tl li.system:before{background:var(--muted)} .tl li.status:before{background:var(--success)} .tl li.call:before{background:var(--warn)}
.tl .when{font-size:var(--fs-xs);color:var(--muted)}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--s-2)}
.photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--hairline)}
.copy{width:100%;font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs)}
.callout{background:var(--warn-bg);border:1px solid var(--warn);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);margin:0 0 var(--s-3)}
/* board: a column holds cards, so its corner is the card's corner plus its padding (concentric) */
.board{display:flex;gap:var(--s-3);overflow-x:auto;padding-bottom:var(--s-3);align-items:flex-start;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.pills{display:none}
.col{scroll-snap-align:start;scroll-margin-left:12px;flex:0 0 270px;background:var(--surface);border:1px solid var(--hairline);box-shadow:var(--shadow-1);border-radius:calc(var(--r-sm) + var(--s-2));padding:var(--s-2)}
.col h2,.col h3{display:flex;justify-content:space-between;margin:var(--s-1) var(--s-1) var(--s-2);font-size:var(--fs-body);color:var(--text)}
.cardlet{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-sm);padding:var(--s-3);margin:0 0 var(--s-2)}
.cardlet b{display:block} .cardlet b a{display:inline-flex;align-items:center;min-height:44px} .cardlet .meta{color:var(--muted);font-size:var(--fs-sm)}
.cardlet form{margin-top:var(--s-2)}
/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.cal .dow{background:var(--surface);padding:6px;font-size:var(--fs-xs);color:var(--muted);text-align:center}
.cal .day{background:var(--surface);min-height:92px;padding:6px;font-size:var(--fs-sm);overflow:hidden}
.cal .day.out{background:var(--canvas);color:var(--muted)} .cal .day.today b{background:var(--accent-fill);color:var(--on-accent);border-radius:99px;padding:1px 7px}
.cal .ev{display:block;margin:3px 0;padding:2px 6px;border-radius:var(--r-xs);background:var(--success-bg);color:var(--success);white-space:normal;overflow-wrap:anywhere;font-size:var(--fs-xs)}
.cal .ev.quoted,.cal .ev.contacted,.cal .ev.new{background:var(--warn-bg);color:var(--warn)}
.cal .dots{display:none}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--success)} .dot.new,.dot.contacted,.dot.quoted{background:var(--warn)} .dot.lost{background:var(--danger)}
.agenda{display:none}
.agenda-day{margin:var(--s-4) 0 6px;font-size:var(--fs-md);color:var(--text-2)} .agenda-day.today{color:var(--accent-text)}
.agenda-card{display:grid;gap:3px;padding:var(--s-3);border:1px solid var(--hairline);box-shadow:var(--shadow-1);border-radius:var(--r-lg);background:var(--surface);margin:0 0 var(--s-2);color:var(--text)} .agenda-card:hover{text-decoration:none;background:var(--tint)}
.agenda-card .when{font-size:var(--fs-sm);color:var(--text-2);font-variant-numeric:tabular-nums} .agenda-card .pill{justify-self:start}
.bar{height:10px;border-radius:99px;background:var(--tint);overflow:hidden} .bar i{display:block;height:100%;background:var(--accent)}
.w10{width:10%}.w20{width:20%}.w30{width:30%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w80{width:80%}.w90{width:90%}.w100{width:100%}.w0{width:0}
/* login and crew */
.center{max-width:400px;margin:8vh auto;padding:0 16px}
/* sign-in (email, then the emailed code): 16px so phones do not zoom, 44px targets everywhere, not only on touch screens */
.codestep input[type=email],.codestep select{font-size:16px;min-height:44px}
input.code{font-size:16px;min-height:44px;letter-spacing:.25em;font-variant-numeric:tabular-nums}
.codestep .btn{min-height:44px;width:100%} .codeactions{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin-top:6px} .codeactions form{margin:0}
.crew{max-width:560px;margin:0 auto;padding:16px}
.crew{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:max(16px,env(safe-area-inset-bottom))}
.crew .big{font-size:var(--fs-xl);font-weight:650}
.crew .tel{display:flex;align-items:center;justify-content:center;min-height:48px;padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--accent-fill);color:var(--on-accent);text-align:center;font-weight:650;margin:var(--s-2) 0}
.crew .tel:hover{text-decoration:none;background:var(--accent-fill-hover)}
.crew .stop{border:1px solid var(--hairline);box-shadow:var(--shadow-1);border-radius:var(--r-lg);padding:var(--s-3);margin:0 0 var(--s-2);background:var(--surface)}
.hide{display:none}
/* new controls */
.pagehead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2);margin:0 0 var(--s-1)} .pagehead h1{margin:0}
.seg{position:relative;display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--r-md);overflow:hidden;background:var(--surface-2);margin:0 0 var(--s-3)}
.pagehead .seg{margin:0}
.seg a,.seg label{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;margin:0;color:var(--text-2);font-size:var(--fs-md);font-weight:600;cursor:pointer;transition:background-color var(--t-fast),color var(--t-fast)}
.seg a:hover{text-decoration:none;background:var(--tint)}
.seg a + a,.seg label + input + label{border-left:1px solid var(--border-strong)}
.seg a.on,.seg .seg-in:checked + label{background:var(--accent-fill);color:var(--on-accent)}
.seg-in{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.seg-in:focus-visible + label{outline:2px solid var(--accent);outline-offset:-2px}
.more-price{margin:6px 0 var(--s-3)} .more-price summary{cursor:pointer;color:var(--accent-text);font-weight:600;padding:6px 0;margin-bottom:var(--s-2)}
.stages{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0 0 var(--s-2)} .stages form{flex:1 1 150px;display:flex}
.btn.stage{min-height:48px;width:100%}
.btn.stage.current,.btn.stage:disabled{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent);opacity:1;cursor:default}
details.picker{margin-top:6px} details.picker summary{list-style:none;cursor:pointer} details.picker summary::-webkit-details-marker{display:none}
.reasons{border:1px solid var(--border-strong);border-radius:var(--r-md);padding:var(--s-2) var(--s-3) var(--s-1);margin:var(--s-2) 0} .reasons legend{font-weight:650;padding:0 6px;font-size:var(--fs-md)} .reasons.bad{border-color:var(--danger)} .reasons.bad legend{color:var(--danger)}
.crewnote{margin:calc(-1 * var(--s-1)) 0 var(--s-3)}
.upload{display:grid;gap:var(--s-2);max-width:520px} .upload label{font-weight:600;color:var(--text);font-size:var(--fs-md)}
.upload input[type=file]{width:100%;min-height:48px;padding:var(--s-2);border:1px dashed var(--field-edge);border-radius:var(--r-md);background:var(--canvas)}
.upload input[type=file]::file-selector-button{margin-right:var(--s-2);min-height:32px;padding:0 var(--s-3);border-radius:var(--r-xs);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font:inherit;font-weight:550;cursor:pointer}
.actions.sticky{position:sticky;bottom:0;z-index:15;margin:var(--s-3) -16px 0;padding:var(--s-2) var(--s-4) calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--hairline);box-shadow:var(--shadow-bar)}
.actions.sticky .btn.primary{flex:1 1 auto;max-width:320px}
.morelinks{display:grid;gap:var(--s-2);max-width:420px} .morelinks .btn,.morelinks form,.morelinks form .btn{width:100%}
/* People: presets and switches */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2);position:relative}
.chips label{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-4);border:1px solid var(--border-strong);border-radius:var(--r-pill);background:var(--surface-2);cursor:pointer;font-weight:600;font-size:var(--fs-md);color:var(--text-2);margin:0;transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.chips label:hover{border-color:var(--field-edge);color:var(--text)}
.chips .seg-in:checked + label{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.presets,.switches,.weekdays{border:1px solid var(--border-strong);border-radius:var(--r-md);padding:var(--s-2) var(--s-3) 6px;margin:var(--s-2) 0} .presets legend,.switches legend,.weekdays legend{font-weight:650;padding:0 6px;font-size:var(--fs-md)}
.presets .hint{margin:var(--s-2) 0 var(--s-1)}
.switches .check{align-items:flex-start;min-height:36px} .switches .check input{margin-top:3px;width:20px;height:20px} .switches label{color:var(--text);font-size:var(--fs-md)}
details.access{margin-top:var(--s-2)} details.access summary{list-style:none} details.access summary::-webkit-details-marker{display:none} details.access form{margin-top:var(--s-2)}
/* Settings: calendar and open days */
ol.steps{margin:0 0 var(--s-3);padding-left:22px} ol.steps li{margin:0 0 6px}
.connected{color:var(--success)} .connected b{color:var(--success)}
.weekdays{display:flex;flex-wrap:wrap;gap:var(--s-2);position:relative}
.weekdays label{display:inline-flex;align-items:center;justify-content:center;min-width:56px;min-height:48px;padding:0 var(--s-2);border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface-2);cursor:pointer;font-weight:650;font-size:var(--fs-body);color:var(--text-2);margin:0 0 6px}
.weekdays .seg-in:checked + label{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.stepper{display:inline-flex;align-items:stretch;gap:6px} .stepper .btn{min-width:48px;min-height:48px;font-size:22px;padding:0} .stepper input{width:72px;text-align:center;font-size:18px;min-height:48px}
.came{color:var(--text-2);margin-top:-10px}
details.vivid summary{cursor:pointer} details.vivid{border-style:dashed}
.nudge .actions{margin:6px 0 0}
/* Calendar: open days */
.cal.days form.dayform{display:block;margin:0;background:var(--surface)}
.daybtn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:76px;padding:var(--s-2);border:0;border-radius:0;background:var(--success-bg);color:var(--success);font:inherit;text-align:left;cursor:pointer}
.daybtn b{font-size:var(--fs-body);color:var(--text)} .daybtn .state{font-size:var(--fs-sm);font-weight:650} .daybtn .cnt{font-size:var(--fs-xs);color:var(--text-2)}
.daybtn.full,.daybtn.booked{background:var(--warn-bg);color:var(--warn)} .daybtn.off{background:var(--canvas);color:var(--muted)} .daybtn.off .state{text-decoration:line-through}
.daybtn.still{cursor:default} .daybtn.out{background:var(--canvas);color:var(--muted)} .daybtn.out b{color:var(--muted)}
.daybtn.today b{background:var(--accent-fill);color:var(--on-accent);border-radius:99px;padding:0 7px}
.daybtn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .daybtn:disabled{opacity:.6}
.keyline{margin-top:var(--s-2)} .key{display:inline-block;width:12px;height:12px;border-radius:3px;margin:0 var(--s-1) 0 var(--s-2);vertical-align:-1px;border:1px solid var(--field-edge)} .key.open{background:var(--success-bg)} .key.full{background:var(--warn-bg)} .key.off{background:var(--canvas)}
.crewmove .actions{margin-bottom:0}
/* B17: tap chips instead of dropdowns, one-tap actions, the Book sheet */
fieldset.chipset{border:0;padding:0;margin:0 0 var(--s-4);min-width:0} fieldset.chipset legend{font-size:var(--fs-sm);color:var(--text-2);padding:0;margin:0 0 6px}
.chips .seg-in:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}
.chips label{min-width:44px;justify-content:center;text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.label{display:block;font-size:var(--fs-sm);color:var(--text-2);margin:0 0 var(--s-1)}
.readonly{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-sm);padding:9px var(--s-3);margin:0 0 var(--s-2);white-space:normal}
.quick{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-2) 0 0} .quick form{margin:0;display:inline-flex}
.btn.wide{width:100%}
details.sheet{padding:0;overflow:hidden} details.sheet > summary{list-style:none;margin:0;border:0;border-radius:0;min-height:48px} details.sheet > summary::-webkit-details-marker{display:none}
details.sheet > form{padding:var(--s-4)} details.sheet[open] > summary{border-bottom:1px solid var(--hairline)}
details.sheet:not(.card){margin:var(--s-3) 0}
.reasonbtns{display:grid;gap:var(--s-2);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin:var(--s-1) 0 var(--s-2)} .btn.reason{min-height:48px;justify-content:flex-start;text-align:left;padding:var(--s-2) var(--s-4);white-space:normal}
.pickbiz{display:grid;gap:var(--s-2);margin:var(--s-2) 0} .pickbiz .btn{min-height:48px;width:100%}
/* Today: "Do this now" */
.donow h2{margin-top:6px}
.counts{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0 0 6px} .counts a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--s-4);border-radius:var(--r-pill);background:var(--tint);color:var(--accent-text);font-weight:600;font-size:var(--fs-md)} .counts a:hover{text-decoration:none;box-shadow:inset 0 0 0 1px var(--accent)} .counts b{font-size:var(--fs-lg)}
.dohead{font-size:var(--fs-body);color:var(--text);margin:var(--s-5) 0 var(--s-2);scroll-margin-top:64px}
.leadcard{padding:var(--s-3) var(--s-4);margin:0 0 var(--s-2)} .lc-top{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-2)} .lc-name{display:inline-flex;align-items:center;min-height:44px;font-weight:650;font-size:var(--fs-input)} .lc-when{margin-left:auto}
.caughtup{font-size:var(--fs-input);color:var(--text-2)} .caughtup b{color:var(--success);font-size:18px}
a.rowcard{display:grid;gap:2px;color:var(--text);padding:var(--s-3) var(--s-4);margin:0 0 var(--s-2)} a.rowcard:hover{text-decoration:none;background:var(--tint)} a.rowcard .pill{justify-self:start}
.rowcard.task{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);padding:var(--s-2) var(--s-4);margin:0 0 var(--s-2)} .rowcard.task form{margin:0}
/* phone app */
.install .steps{margin-top:var(--s-2)} .howto{margin:var(--s-2) 0} .howto summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:.3em}   /* the gap is the space between 'iPhone or iPad' and '(in Safari)' that a flex box would swallow */
.check.big{min-height:44px} .check.big input{width:22px;height:22px} .check.big label{font-size:var(--fs-body);color:var(--text);margin:0}
ul.plain{list-style:none;padding:0;margin:0 0 var(--s-2)} ul.plain li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);padding:6px 0;border-bottom:1px solid var(--hairline)} form.inline{display:inline;margin:0 0 0 auto}
.places-wrap gmp-place-autocomplete,.places-wrap .places{display:block;width:100%;min-height:44px}
.filters .f-wide{flex:1 1 100%}
/* New lead in 20 seconds: name, phone and the move date first; everything else folds under "More details (optional)" */
.quickstart h2{margin-bottom:var(--s-1)} .quickstart .hint{margin:0 0 var(--s-3)}
.quickstart .row{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.quickdate .chips{margin-bottom:var(--s-2)}
.quickdate .datebox{max-width:240px}
.quickdate .datebox.js-hide{display:none}
details.more{margin:0 0 var(--s-3)}
details.more > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:52px;padding:var(--s-3) var(--s-4);border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-1);cursor:pointer;font-weight:650}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary:after{content:"+";flex:0 0 auto;font-size:22px;line-height:1;color:var(--accent-text);font-weight:500}
details.more[open] > summary{margin-bottom:var(--s-3)} details.more[open] > summary:after{content:"\2212"}
details.more > summary .muted{font-weight:400;font-size:var(--fs-sm)}
details.more > summary:hover{border-color:var(--border-strong)}
.usual{font-size:var(--fs-sm);color:var(--muted);margin:calc(-1 * var(--s-2)) 0 var(--s-3)}
/* existing customers, as you type a name or phone number */
.suggest{margin:calc(-1 * var(--s-1)) 0 var(--s-3);border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--canvas);padding:var(--s-2)}
.suggest.pop{margin:0;background:var(--surface);border-color:var(--border-strong)}
.suggest > p{margin:0 var(--s-1) var(--s-2);font-size:var(--fs-sm);color:var(--text-2);font-weight:600}
.suggest ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.suggest li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:var(--surface)}
.suggest li .who{flex:1 1 180px;min-width:0} .suggest li .who b{display:block} .suggest li .who span{font-size:var(--fs-sm);color:var(--muted)}
.picked{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin:0 0 var(--s-3);padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:var(--success-bg);color:var(--success);font-weight:600;font-size:var(--fs-sm)}
.picked .linklike{font-size:var(--fs-sm);min-height:0}
/* Long words never push the page sideways (375, 768 and 1280+): names, emails, addresses, links, notes, tracking strings and table cells wrap;
   flex and grid children may shrink (min-width:0); a button wraps its label instead of overflowing. */
body{overflow-wrap:break-word}
main,.card,.cardlet,.stop,.callout,.flash,.errors,.empty,.readonly,.tl li,dl.facts dd,td,th,.agenda-card,a.rowcard,.rowcard.task > span,.lc-top,.lc-name,.suggest li .who,.picked,.howto,ul.plain li,code,.came{overflow-wrap:anywhere;min-width:0}
.row > *,.filters > *,.actions > *,.quick > *,.stages > *,.pagehead > *,.lc-top > *,.stats > *,.photos > *,.reasonbtns > *,.chips > label,.counts > a,ul.plain li > *{min-width:0}
.btn{white-space:normal;text-align:center;overflow-wrap:anywhere;max-width:100%}
.btn.reason{text-align:left}
.chips label{max-width:100%;white-space:normal;overflow-wrap:anywhere;padding-top:6px;padding-bottom:6px}
.pill{max-width:100%;white-space:normal}
code{white-space:pre-wrap}
/* table columns that must not be squeezed to a sliver by the long-word wrapping above: phone numbers stay whole, names and emails keep a readable width (they still wrap when longer) */
.nw{white-space:nowrap}
td[data-label=Name]{min-width:8em} td[data-label=Email]{min-width:13em} td[data-label=Phone]{white-space:nowrap}
/* pop-ups (lists that open over the page): crm.js places them with CRM.place so they stay on screen, 8px from every edge, above the phone's bottom bar,
   flipping above or to the left when there is no room; long ones scroll inside themselves. Escape or a tap outside closes them. */
.pop{position:fixed;z-index:40;max-width:calc(100vw - 16px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;box-shadow:0 8px 24px rgba(0,0,0,.28),0 0 0 1px var(--hairline)}
.pop[data-side=above]{box-shadow:0 -8px 24px rgba(0,0,0,.28),0 0 0 1px var(--hairline)}
/* "?" help tips: a small circle with a 44px tap area (never shown without the page script, which also places the bubble with CRM.popup) */
.tipwrap{display:none;vertical-align:middle;margin:-12px 0 -12px -6px}
html.js .tipwrap{display:inline-block}
.tip{position:relative;width:44px;height:44px;margin:0;padding:0;border:0;background:none;color:var(--accent-text);font:inherit;font-size:var(--fs-sm);font-weight:650;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tip:before{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;box-sizing:border-box;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface-2);transition:background-color var(--t-fast),border-color var(--t-fast)}
.tip:hover:before,.tip[aria-expanded=true]:before{background:var(--tint);border-color:var(--accent)}
.tip span{position:relative}
.tip:focus-visible{outline:0}
.tip:focus-visible:before{outline:2px solid var(--accent);outline-offset:2px}
.tipbody{width:max-content;max-width:min(320px,calc(100vw - 16px));padding:var(--s-3) var(--s-4);background:var(--surface-2);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--r-md);font-size:var(--fs-md);font-weight:400;font-style:normal;letter-spacing:0;line-height:1.45;text-align:left;text-transform:none;white-space:normal}
.labelrow{display:flex;align-items:center;gap:var(--s-1);margin:0 0 var(--s-1)} .labelrow label{margin:0}
/* the welcome guide: the page is dimmed except the real thing being pointed at; the bubble is placed by CRM.place (or CRM.placeCentered) so it stays on screen */
.tour-shield{position:fixed;top:0;left:0;right:0;bottom:0;z-index:50;background:none}
.tour-shield.dim{background:var(--scrim)}
.tour-spot{position:fixed;z-index:51;border-radius:var(--r-md);box-shadow:0 0 0 2px var(--accent),0 0 0 100vmax var(--scrim);pointer-events:none}
.tour-bubble.pop{z-index:60;width:min(360px,calc(100vw - 16px));padding:var(--s-4);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-lg);overflow-wrap:anywhere}
.tour-count{margin:0 0 var(--s-1);font-size:var(--fs-sm);color:var(--muted);font-variant-numeric:tabular-nums}
.tour-title{margin:0 0 var(--s-2);font-size:var(--fs-lg);line-height:1.3}
.tour-title:focus{outline:0}
.tour-text{margin:0 0 var(--s-2);font-size:var(--fs-input);color:var(--text)}
.tour-where{margin:0 0 var(--s-2);padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:var(--tint);color:var(--text);font-size:var(--fs-md)}
.tour-how{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.tour-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
.tour-actions .btn{min-height:44px;flex:1 1 auto}
/* Help pages */
.helplist{list-style:none;margin:0;padding:0} .helplist .rowcard{margin:0 0 var(--s-2)}
.helpsteps{margin:0 0 var(--s-4);padding-left:26px} .helpsteps li{margin:0 0 var(--s-5);padding-left:var(--s-1)} .helpsteps li::marker{font-weight:650;color:var(--accent-text)}
.helpsteps p{font-size:var(--fs-input);margin:0 0 var(--s-2)}
.helpshot{display:block;width:100%;max-width:320px;height:auto;border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-1);background:var(--surface)}
.helpshot.wide{max-width:640px}
.maps-paused{margin:0 0 var(--s-3)}
/* B19: every screen size. No sideways scrolling of the page; wide things scroll inside themselves. */
html,body{max-width:100%;overflow-x:clip} img{max-width:100%}
.top .brand .bname{max-width:52vw}
@media (min-width:761px) and (max-width:1024px){ main{padding-left:20px;padding-right:20px} .col{flex-basis:250px} }
@media (min-width:1280px){ main{max-width:1240px} }
/* phone */
.bottom{display:none}
@media (max-width:768px){
  input,select,textarea{font-size:16px}   /* below 16px, iPhone Safari zooms the page when a box is tapped */
  table.stack thead{display:none}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack tr{padding:var(--s-3);border-bottom:1px solid var(--hairline)}
  table.stack td{border:0;padding:var(--s-1) 0}
  table.stack td[data-label]:before{content:attr(data-label);display:block;font-size:12px;color:var(--muted)}
  table.stack td.rowactions form{display:inline-block;margin:var(--s-1) var(--s-2) var(--s-1) 0}
  table.stack .filters{margin:0}
}
@media (max-width:760px){
  html,body{font-size:var(--fs-input)}                 /* outdoors on a phone: body text at 16px reads better in sunlight */
  main{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .btn,.btn.small{min-height:44px}                     /* 44 px targets on a phone, whatever the pointer */
  .quick .btn.small{padding:0 var(--s-3)}
  .lc-when{margin-left:0;width:100%}
  table.stack thead{display:none}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack tr{padding:var(--s-3);border-bottom:1px solid var(--hairline)}
  table.stack td{border:0;padding:3px 0;text-align:left}
  table.stack td.num{text-align:left}
  table.stack td:empty{display:none}   /* no empty 'Email' label over nothing */
  table.stack td[data-label]:before{content:attr(data-label);display:block;font-size:12px;color:var(--muted)}
  .reasonbtns{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))} .stat b{font-size:var(--fs-xl)}
  .nav.office,.hide-phone{display:none}   /* one navigation bar on a phone: the one at the bottom */
  .searchtoggle{display:inline-flex;align-items:center;min-height:40px;padding:0 6px}
  .top form.search{display:none;position:absolute;left:0;right:0;top:100%;max-width:none;padding:var(--s-2) var(--s-4);background:var(--surface);border-bottom:1px solid var(--hairline);box-shadow:var(--shadow-1)}
  .top.searching form.search{display:block}
  .bottom{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--hairline);box-shadow:var(--shadow-bar);z-index:20;min-height:calc(52px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
  .bottom a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;text-align:center;padding:2px 2px;color:var(--text-2);font-size:var(--fs-xs);line-height:1.1}   /* two lines of label ('Leads & Moves') still fit in 52px, so the Save bar sits exactly on this bar */ .bottom a b{display:block;font-size:19px;line-height:1.1} .bottom a.on{color:var(--accent-text);font-weight:650} .bottom a:hover{text-decoration:none}
  .actions.sticky{bottom:calc(52px + env(safe-area-inset-bottom));padding-bottom:10px}
  .actions.sticky .btn.primary{max-width:none}
  dl.facts{grid-template-columns:110px 1fr}
  .pills{display:flex;gap:var(--s-2);overflow-x:auto;margin:0 0 var(--s-3);padding-bottom:var(--s-1)}
  .pills a{flex:0 0 auto;padding:var(--s-2) var(--s-4);border-radius:var(--r-pill);background:var(--tint);color:var(--accent-text);font-size:var(--fs-sm);font-weight:600;white-space:nowrap} .pills a:hover{text-decoration:none}
  .col{flex-basis:84vw}
  .upload .btn{width:100%}
  .card{padding:var(--s-4) var(--s-3)} .leadcard{padding:var(--s-3)}
  .quickdate .datebox{max-width:none}
}
@media (min-width:640px) and (max-width:760px){ .cal .day{min-height:64px;padding:3px} .cal .ev{font-size:11px;padding:1px 3px} }
@media (max-width:639px){
  .cal .ev{display:none}
  .cal .day{min-height:48px;padding:var(--s-1)}
  .cal .dots{display:flex;flex-wrap:wrap;gap:3px;margin-top:var(--s-1)} .cal .dots .more{font-size:11px;color:var(--muted)}
  .agenda{display:block;margin-top:16px}
  .daybtn{min-height:60px;padding:5px var(--s-1)} .daybtn .cnt{display:none} .daybtn .state{font-size:11px}
}
@media (max-width:760px),(pointer:coarse){
  .check,.switches .check{min-height:44px} .check label{flex:1;display:grid;align-content:center;min-height:44px;margin:0}   /* the whole row is the tap target, not the 13px box */
  details:not(.howto) > summary:not([class]){display:list-item;min-height:44px;padding-top:10px;padding-bottom:10px}   /* the folds on the move form, Settings and the lead page */
  input.copy,select,input[type=file]{font-size:16px;min-height:44px}
}
@media (pointer:coarse){
  .btn,.btn.small,.btn.stage{min-height:44px}
  .nav a,.linklike:not(.searchtoggle){min-height:44px;display:inline-flex;align-items:center}
  .searchtoggle{min-width:44px;justify-content:center}
  .btn.stage{min-height:48px}
  .pills a,.seg a,.seg label{min-height:44px;display:inline-flex;align-items:center}
  .searchtoggle{min-height:44px}
}
@media (pointer:coarse) and (min-width:640px){ .cal .ev{min-height:44px;display:flex;align-items:center} }   /* touch tablets: each calendar entry is a 44px target (a phone shows dots and the agenda instead) */
@media (pointer:coarse) and (min-width:761px){ .top a.small{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 var(--s-1)} }   /* the top bar's More link on a tablet (a phone has the bottom bar instead) */
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{transition-duration:0s !important;animation-duration:0s !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
  .btn[aria-busy=true]:before{border-right-color:currentColor;opacity:.6}   /* a still ring instead of a spinning one */
}
@media (forced-colors: active){ .btn,.chips label,.seg,.card{border:1px solid CanvasText} .seg-in:checked + label,.btn.primary{forced-color-adjust:none;background:Highlight;color:HighlightText} }
@media print{.top,.nav,.bottom,.actions,.pills,.searchtoggle,.skip{display:none}}