/* Soho Sales look: style A "Clean white" + A2 layout (approved by Soho Oct 26 2026, 11:38 PM). Inter for the app, Open Sans for the paper (Soho's Zoho templates embed it). Fonts: Google Fonts distribution, OFL. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/Inter-400-700.woff2) format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/OpenSans-400-700.woff2) format('woff2')}
@font-face{font-family:'Fjalla One';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/FjallaOne-400.woff2) format('woff2')}
:root{
  /* Style A tokens: white surfaces, hairlines instead of cards, one green accent (#88B736, always with a dark label). */
  --soho-green:#88B736; --soho-dark:#22332D; --soho-paper:#FFFFFF; --soho-ink:#1B1A18; --soho-rule:#E7E6E1; --soho-green-text:#557A1F; --soho-danger:#B4412E; --soho-muted:#6F6B65;
  --bg:#FFFFFF; --surface:#fff; --sunk:#F7F7F5; --sunk-2:#F0EFEB; --line:#E7E6E1; --line-2:#E2E0DA; --line-in:#D6D4CD;
  --ink:#1B1A18; --ink-2:#4A4743; --muted:#6F6B65; --faint:#8A867F;
  --green:#1B1A18; --green-2:#557A1F; --green-3:#3F6B12; --green-tint:#F7FAF1; --green-tint-2:#EEF5E1; --leaf:#88B736;
  --leaf-hover:#7DAA2F; --leaf-press:#557A1F; --on-leaf:#17210B; --hover:#F7F7F5; --press:#F0EFEB; --nav-bg:var(--surface);
  --amber:#8A5A12; --amber-tint:#FBF2DF; --red:#B4412E; --red-tint:#FBEDE9; --blue:#2F5E9E; --blue-tint:#EAF1FB; --neutral-tint:#F1F0EC;
  --serif:'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --paper-font:'Open Sans', Arial, Helvetica, sans-serif;
  /* one type scale (A: 14px body) */
  --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:14px; --fs-16:16px; --fs-18:16px; --fs-20:16px; --fs-24:20px; --fs-28:24px; --fs-32:28px; /* uifix-nov10: one scale, 12/13/14/16/20/24/28 px only (the names are the old ones; the values are the scale) */
  /* 8px grid */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-12:48px; --s-16:64px;
  --r:10px; --r-sm:8px; --r-md:10px; --r-pill:999px;
  --shadow-xs:0 1px 1px rgba(27,26,24,.04);
  --shadow:0 1px 2px rgba(27,26,24,.05),0 0 0 1px rgba(27,26,24,.04);
  --shadow-md:0 1px 2px rgba(27,26,24,.05),0 12px 32px -8px rgba(27,26,24,.10);
  --shadow-lg:0 4px 12px -4px rgba(27,26,24,.10),0 24px 56px -12px rgba(27,26,24,.20);
  --ring:0 0 0 3px rgb(136 183 54 / 35%);
  --ease:cubic-bezier(.2,.7,.2,1); --t:140ms;
  /* A2 statuses: Zoho-style coloured words */
  --st-paid:#3F6B12; --st-open:#5C584F; --st-late:#A93A2A; --st-part:#8A5A12; --st-draft:#6B675F; --st-sent:#2F5E9E; --sel-bg:#F7FAF1; --sel-bar:#88B736;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--sans);font-size:var(--fs-15);line-height:1.5;letter-spacing:0;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:'cv11','ss01'}
a{color:var(--green-2);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--soho-dark);outline-offset:2px;border-radius:8px}
h1,h2,h3{font-family:var(--sans);font-weight:600;letter-spacing:-.018em;color:var(--ink);margin:0}
h1{font-size:var(--fs-32);line-height:1.2;letter-spacing:-.022em}
h2{font-size:var(--fs-24);line-height:1.2}
h3{font-size:var(--fs-20);line-height:1.25}
.num{font-variant-numeric:tabular-nums lining-nums}
.muted{color:var(--muted)}
.faint{color:var(--muted)}
.small{font-size:var(--fs-14)}
.tiny{font-size:var(--fs-13)}
.eyebrow{font-size:var(--fs-12);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* shell */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;padding:22px 16px 16px;border-right:1px solid var(--line);background:var(--nav-bg);color:var(--ink)}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:2px 8px 28px}
.brand img{width:120px;height:auto;object-fit:contain}
.brand:hover{text-decoration:none}
.brand .word{font-family:var(--sans);font-size:var(--fs-12);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--green-2);line-height:1.2}
.brand .word small{font-size:inherit;font-weight:600;color:var(--muted)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-radius:10px;color:var(--ink-2);font-weight:600;transition:background var(--t) var(--ease),color var(--t) var(--ease);font-size:var(--fs-15)}
.nav a:hover{background:var(--hover);text-decoration:none}
.nav a:active{background:var(--press)}
.nav a.on{background:var(--green-tint-2);color:var(--green)}
.nav a.on svg{opacity:1;color:var(--green-2)}
.nav svg{width:18px;height:18px;opacity:.62;flex:none}
.nav .count{margin-left:auto;min-width:22px;padding:0 8px;border-radius:999px;background:var(--sunk);font-size:var(--fs-12);line-height:20px;text-align:center;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.nav .count:empty{display:none}
.nav a.on .count{background:rgba(37,33,30,.08);color:var(--green)}
.nav-sep{height:1px;background:var(--line);margin:12px 12px}
.side-foot{margin-top:auto;padding:12px 0 0}
.me{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;text-align:left;transition:background var(--t) var(--ease)}
.me:hover{background:#FAFAF8}
.me > svg{width:18px;height:18px;margin-left:auto;color:var(--muted);flex:none}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--green-tint-2);color:var(--green);display:grid;place-items:center;font-weight:600;font-size:var(--fs-12);flex:none}
.me .who{display:flex;flex-direction:column;line-height:1.25;min-width:0;color:inherit;text-decoration:none}
.me .who b{display:block;font-weight:600;font-size:var(--fs-15);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me .who span{font-size:var(--fs-12);color:var(--muted)}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 32px;background:rgb(250 249 245 / 88%);backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid transparent;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);-webkit-backdrop-filter:saturate(1.6) blur(12px)}
.top.scrolled{border-bottom-color:var(--line);box-shadow:0 1px 0 rgb(37 33 30 / 2%), 0 6px 16px -12px rgb(37 33 30 / 18%)}
.top-brand,.me-sm{display:none}
.search-trigger{flex:1;max-width:520px;display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted);cursor:text;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);border-color:var(--line-2);box-shadow:var(--shadow-xs);font-size:var(--fs-15)}
.search-trigger:hover{border-color:var(--line-in);box-shadow:var(--shadow-xs)}
.search-trigger svg{width:16px;height:16px;flex:none}
.search-trigger span:not(.kbd){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;font-size:var(--fs-12);font-family:var(--sans);color:var(--muted);background:var(--surface)}
.search-trigger .kbd{margin-left:auto}
.top-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.page{padding:20px 28px 40px;max-width:1320px;width:100%;margin:0 auto;animation:fade .18s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.page-head{display:flex;align-items:flex-end;gap:16px;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap}
.page-head .sub{color:var(--muted);margin-top:4px;font-size:var(--fs-15)}
/* buttons */
/* 8px radius, 44px tall; primary = lime with a dark label; secondary = white with an ink outline */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 14px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:14px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-xs);transition:background var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform 80ms var(--ease),color var(--t);user-select:none;-webkit-tap-highlight-color:transparent}
.btn:hover{background:#FAFAF8;border-color:#D6D4CD;text-decoration:none}
.btn:active{transform:translateY(1px) scale(.98);background:var(--sunk-2);box-shadow:none}
.btn svg{width:15px;height:15px;flex:none;color:var(--ink-2)}
.btn.primary svg{color:var(--on-leaf)}
.btn.primary{background:var(--leaf);border-color:#7AA62C;color:var(--on-leaf);font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(60,90,20,.18)}
.btn.primary:hover{background:var(--leaf-hover);border-color:var(--leaf-hover)}
.btn.primary:active{background:var(--leaf-press);border-color:var(--leaf-press)}
.btn.ghost{background:var(--surface)}
.btn.ghost:hover{background:#FAFAF8}
.btn.danger{color:var(--red)}
.btn.ghost.danger:hover{background:var(--red-tint)}
.btn.primary.danger{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 1px 2px rgba(120,40,25,.18)}.btn.primary.danger svg{color:#fff}.btn.primary.danger:hover,.btn.primary.danger:active{background:#9A3727;border-color:#9A3727} /* a confirm that signs out, deletes or deactivates: white on red, 5.6:1 (review step 4 r2 nit 7) */
.btn.sm{height:32px;padding:0 10px;font-size:13px;gap:6px}
.btn.sm:not(.primary){border-color:var(--line-2)}
.btn.lg{height:44px;padding:0 20px;font-size:16px}
.btn.busy{opacity:.55;pointer-events:none}
.btn[disabled]{pointer-events:none;background:var(--sunk);border-color:var(--line);color:var(--muted);box-shadow:none}
.btn.busy::after{content:'';width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn.hold{border-style:dashed;color:var(--muted);background:transparent;cursor:not-allowed}
@keyframes spin{to{transform:rotate(360deg)}}
.icon-btn{width:36px;height:36px;padding:0;display:inline-grid;place-items:center;border-radius:8px;border:1px solid transparent;background:transparent;cursor:pointer;color:var(--ink-2);transition:background var(--t) var(--ease),color var(--t)}
.icon-btn:hover{background:var(--hover);color:var(--ink)}
.icon-btn:active{background:var(--press)}
.icon-btn svg{width:17px;height:17px}
/* No visible scrollbars anywhere in the app (Soho, Oct 29 3:32 PM: "more clean without it"); scrolling itself is unchanged. The customer's View page has no app shell, so it keeps its own. */
html:has(#app),html:has(#app) *{scrollbar-width:none}
html:has(#app)::-webkit-scrollbar,html:has(#app) *::-webkit-scrollbar{display:none;width:0;height:0}
/* forms */
label.f{display:flex;flex-flow:row wrap;align-items:baseline;gap:4px 6px;font-size:13px;font-weight:500;color:var(--ink-2);min-width:0;letter-spacing:.01em}
label.f .hint{font-weight:400;color:var(--muted);font-size:var(--fs-12)}
label.f > :not(.hint){flex:1 1 100%;min-width:0}
.in,select.in,textarea.in{width:100%;height:38px;padding:0 12px;border:1px solid var(--line-2);border-radius:8px;background:#fff;color:var(--ink);box-shadow:none;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);font-size:var(--fs-15)}
select.in{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236E6770' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;cursor:pointer}
textarea.in{height:auto;min-height:52px;padding:8px 12px;resize:vertical;line-height:1.45}
.in:hover{border-color:#CFCDC6}
.in:focus{outline:none;border-color:#88B736;box-shadow:0 0 0 3px rgb(136 183 54 / 18%)}
.in::placeholder{color:#8D8790;opacity:1}
.in[readonly],.in:disabled{background:var(--sunk);border-color:var(--line-2);color:var(--ink);opacity:1;-webkit-text-fill-color:var(--ink);box-shadow:none}
select.in:disabled{appearance:none;-webkit-appearance:none}
.in.err,.in[aria-invalid=true]{border:1px solid var(--red);box-shadow:0 0 0 3px rgb(178 31 45 / 14%)}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.span2{grid-column:span 2}
.span3{grid-column:span 3}
.span4{grid-column:1/-1}
.seg{display:inline-flex;gap:2px;padding:3px;background:#F2F1ED;border-radius:9px;border:0}
.seg button{border:0;background:transparent;height:30px;padding:0 12px;border-radius:7px;cursor:pointer;color:var(--ink-2);font-weight:500;font-size:13px;transition:background var(--t) var(--ease),color var(--t),box-shadow var(--t)}
.seg button:hover{background:rgb(255 255 255 / 60%);color:var(--ink)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgb(37 33 30 / 12%), 0 0 0 1px rgb(37 33 30 / 5%)}
.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--fs-14)}
.check input{accent-color:var(--leaf-press);width:18px;height:18px}
/* surfaces: sections separated by lines, not boxed cards */
.panel{background:var(--surface);border:1px solid #E9E8E3;border-radius:12px;box-shadow:none}
.section{padding:12px 20px;border-top:1px solid var(--line)}
.section:first-child{border-top:0}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.section-head h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
.section-head .eyebrow{margin:0}
.items-head{align-items:flex-start;flex-wrap:wrap}
.items-head .tiny{margin-top:4px}
.items-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* pills */
.pill,.tag-sample{font-family:var(--sans)}
/* statuses: words + a shape, never colour alone */
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:var(--r-pill);font-size:12px;font-weight:600;letter-spacing:0;line-height:1;background:#F1F0EC;color:#5C584F;white-space:nowrap;border:0;box-shadow:none}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.plain::before{display:none}
.pill.green,.pill.leaf{color:#3F6B12;background:#EEF5E1;box-shadow:none}
.pill.amber{color:#8A5A12;background:#FBF2DF;box-shadow:none}
.pill.amber::before{border-radius:1px}
.pill.red{color:#A93A2A;background:#FBEDE9;box-shadow:none}
.pill.red::before{border-radius:1px;transform:rotate(45deg)}
.pill.blue{color:#2F5E9E;background:#EAF1FB;box-shadow:none}
.pill.outline{background:var(--neutral-tint);box-shadow:none;color:#5C584F}
.tag-sample{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;font-size:var(--fs-12);font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:repeating-linear-gradient(135deg,#fbf1e1,#fbf1e1 6px,#f8e9cf 6px,#f8e9cf 12px);color:var(--amber);border:1px solid #efd9b4}
/* tables & lists */
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;text-align:left;padding:0 16px;height:36px;border-bottom:1px solid var(--line);background:#FAFAF8;position:sticky;top:68px;z-index:1;white-space:nowrap}
.table th:first-child{border-top-left-radius:var(--r-sm)}
.table th:last-child{border-top-right-radius:var(--r-sm)}
.table td{padding:0 16px;height:48px;border-bottom:1px solid #F0EFEB;vertical-align:middle;font-variant-numeric:tabular-nums lining-nums;font-size:14px}
.table tr:last-child td{border-bottom:0}
.table tbody tr{cursor:pointer;transition:background var(--t) var(--ease)}
.table tbody tr:hover,.table tbody tr.kb{background:#FAFAF8}
.table .r{text-align:right;font-variant-numeric:tabular-nums lining-nums}
.table th.r,.table td.r{width:1%;white-space:nowrap}
.rowlink{font-weight:600;color:var(--ink)}
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.li:first-child{border-top:0}
.li .grow{flex:1;min-width:0}
.li .t{font-weight:600}
.li .s{font-size:var(--fs-13);color:var(--muted);margin-top:2px}
.clickable{cursor:pointer}
.clickable:hover .t{color:var(--green-2)}
/* metrics */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);overflow:hidden;margin-bottom:32px}
.metric{padding:20px 28px;border-left:1px solid var(--line);cursor:pointer;transition:background var(--t) var(--ease);text-align:left;border-top:0;border-right:0;border-bottom:0;background:transparent}
.metric:first-child{border-left:0}
.metric:hover{background:#FAFAF8}
.metric .v{font-family:var(--sans);font-size:28px;font-weight:600;letter-spacing:-.025em;color:var(--ink);line-height:1;font-variant-numeric:lining-nums tabular-nums}
.metric .k{font-weight:600;margin-top:12px;font-size:var(--fs-14);color:var(--ink)}
.metric .d{font-size:var(--fs-13);color:var(--muted);margin-top:4px;line-height:1.35}
.metric.alert .v{color:var(--red)}
.metric-link,.metric-link:hover{display:block;color:inherit;text-decoration:none}
.metric-link .v svg{width:30px;height:30px}
.metric-link .k svg{width:14px;height:14px;vertical-align:-2px;margin-left:2px;color:var(--muted)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.cols-main{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
.sticky{position:sticky;top:76px}
/* empty & skeleton */
.empty{padding:48px 24px;text-align:center;color:var(--muted);border-radius:var(--r);display:flex;flex-direction:column;align-items:center}
.empty .ttl{font-family:var(--serif);font-size:var(--fs-20);color:var(--ink);margin-bottom:4px;letter-spacing:.01em}
.empty .small{max-width:420px;font-size:var(--fs-15);line-height:1.5}
.empty>svg{width:24px;height:24px;color:var(--green-2);margin-bottom:16px;padding:16px;box-sizing:content-box;border-radius:50%;background:var(--green-tint);box-shadow:0 0 0 8px rgb(136 183 54 / 8%)}
.sk{background:linear-gradient(105deg,#EAECE5 32%,#F6F8F1 50%,#EAECE5 68%);background-size:250% 100%;animation:sk 1.9s ease-in-out 120ms infinite both;border-radius:6px;height:12px}
.sk-region,.sk-visual{display:contents}
.sk-launch{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background:var(--soho-paper)}
.sk-launch img{display:block;max-width:100%;height:auto;margin-bottom:10px}
.sk-launch .sk{width:168px}
.sk-launch .sk:last-child{width:108px}
.sk-noscript{text-align:center;padding:18px}
noscript:has(.sk-noscript) + #root{display:none}
.sk-editor-field{display:block;width:min(100%,420px)}
.sk-editor .zf-il{min-width:0}
.sk-tile .it-img > .sk{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.sk-tile .it-sizes .skb{max-width:100%}
/* skeleton kit (Oct 28 2026): bars inside the real elements, so each line keeps the real line height */
.sk.skt{display:inline-block;max-width:100%;height:.72em;margin-block:calc((1lh - .72em) / 2);vertical-align:middle;border-radius:4px}
.sk.skb{display:inline-block;max-width:100%;flex:none;vertical-align:middle}
.sk-btn{pointer-events:none;color:var(--muted)}
.sk-btn > .skt{height:.8em}
.sk-z{pointer-events:none}
.sk-line{display:flex;justify-content:space-between;gap:16px;padding:6px 0;line-height:20px}
.sk-in{display:block;background:var(--sunk)}
.sk-pills{display:inline-flex;gap:8px;align-items:center}
.sk-wide{width:100%}
.sk-paper{display:flex;flex-direction:column;gap:22px;width:100%;max-width:816px;aspect-ratio:8.5/11;margin:0 auto;padding:6% 7%;background:#fff;border:1px solid #E6E6E2;border-radius:4px;box-shadow:0 1px 2px rgba(27,26,24,.05),0 10px 28px -14px rgba(27,26,24,.18)}
.sk-pp-top,.sk-pp-rows > span,.sk-pp-tot > span{display:flex;justify-content:space-between;align-items:center;gap:16px}
.sk-pp-r,.sk-pp-grid > span{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.sk-pp-band{padding:10px 12px;background:var(--sunk);border-radius:4px}
.sk-pp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sk-pp-grid > span{align-items:flex-start}
.sk-pp-rows{display:flex;flex-direction:column;gap:14px;padding-top:12px;border-top:1px solid var(--line)}
.sk-pp-rows > span .skt:nth-child(2){flex:1}
.sk-pp-tot{display:flex;flex-direction:column;gap:10px;align-self:flex-end;width:42%;margin-top:auto}
.sk-desc{display:block;height:30px;padding-top:8px;line-height:1.45;font-size:var(--fs-13);border-bottom:1px solid #F0EFEB}
.sk-q{justify-content:center;width:110px}
.sk-tile{pointer-events:none}
.sk-ph{display:block;width:100%;aspect-ratio:4/3;border-radius:0}
.sk-tb{display:flex;flex-direction:column;gap:8px;padding:10px 12px 12px}

@keyframes sk{from{background-position:100% 0}to{background-position:0 0}}
.sk-row{display:flex;gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.sk-row:first-child{border-top:0}
/* banners */
.banner{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:var(--r-md);font-size:var(--fs-14);line-height:1.5;border:1px solid}
.banner svg{width:18px;height:18px;flex:none;margin-top:1px}
.banner.info{background:var(--blue-tint);border-color:#CADCE8;color:#1F4A63}
.banner.warn{background:var(--amber-tint);border-color:#EED8B2;color:#6E410B}
.banner.err{background:var(--red-tint);border-color:#EEC8CB;color:#7C1C25}
.banner.ok{background:var(--green-tint);border-color:#D3E4B6;color:var(--green-3)}
.banner .act{margin-left:auto;display:flex;gap:8px;flex:none}
/* customer page */
.c-head{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:24px}
.c-head h1{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.c-meta{display:flex;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:var(--fs-13);margin-top:8px}
.c-meta b{color:var(--ink-2);font-weight:500}
.kv{display:grid;grid-template-columns:120px 1fr;gap:8px 16px;font-size:var(--fs-14)}
.kv dt{color:var(--muted)}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.role-chip{font-size:var(--fs-12);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--green-3);background:var(--green-tint);padding:1px 8px;border-radius:4px;margin-left:4px}
.access{margin-top:8px;padding:8px 12px;background:var(--sunk);border-radius:7px;font-size:var(--fs-13);color:var(--ink-2)}
.timeline .li{align-items:flex-start}
.tl-ico{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--sunk);color:var(--muted);flex:none;margin-top:1px}
.tl-ico svg{width:13px;height:13px}
/* editor */
/* editor top (A2 zone 1, same as the record header): crumb · number + status · customer · total · quiet steps — actions on the right */
.ed-head{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;margin-bottom:12px;padding:0 0 12px;border-bottom:1px solid var(--line)}
.ed-head > .steps{flex:1 0 100%;margin:0}
.ed-ht{min-width:0;flex:1 1 360px}
.ed-hr{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:none;margin-left:auto}
.ed-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:32px;margin-top:4px}
.ed-title h1{font-size:24px;font-weight:650;letter-spacing:-.02em;line-height:32px;white-space:nowrap}
.ed-title h1 small{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:0;margin-left:8px}
.states{display:flex;gap:8px;flex-wrap:wrap}
.ed-head .states .pill{height:24px;padding:0 10px}
.ed-sub{font-size:13px;color:var(--ink-2);min-height:20px;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;white-space:nowrap;margin-top:2px}
.ed-sub > *{flex:none}
.ed-sub .ed-cn{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ed-sub i{font-style:normal;color:#D6D4CD}
.ed-sub .hd-total{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.state{display:inline-flex;flex-direction:column;gap:4px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);min-width:112px}
.state .sl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.state .sv{font-size:var(--fs-13);font-weight:600}
.savestate{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-13);color:var(--muted);height:32px;padding:0 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.savestate i{width:7px;height:7px;border-radius:50%;background:var(--leaf)}
.savestate.dirty i{background:var(--amber)}
.savestate.saving i{background:var(--blue);animation:pulse 1s infinite}
.savestate.err i{background:var(--red)}
@keyframes pulse{50%{opacity:.3}}
.psearch{position:relative}
.psearch .in{height:44px;padding-left:40px;font-size:var(--fs-15);border-radius:10px}
.psearch>svg{position:absolute;left:13px;top:13px;width:18px;height:18px;color:var(--muted)}
.presults{position:absolute;left:0;right:0;top:50px;z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);max-height:440px;overflow:auto;padding:8px}
.pr{display:flex;gap:12px;align-items:center;padding:8px;border-radius:8px;cursor:pointer}
.pr.kb,.pr:hover{background:#f6f2e8}
.pr img,.thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--sunk);flex:none}
.pr .grow{flex:1;min-width:0}
.pr .n{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr .c{font-size:var(--fs-12);color:var(--muted)}
.vchips{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.vchip{height:24px;padding:0 8px;border-radius:6px;border:1px solid var(--line-2);background:#fffefb;font-size:var(--fs-12);cursor:pointer;font-weight:500}
#delFeeRule{display:flex;align-items:flex-start;gap:8px} /* tab-css (Nov 1): staff delivery-rule hint — the info icon no longer touches its text */
#delFeeRule svg{flex:none;margin-top:2px}
.vchip:hover,.vchip.kb{border-color:var(--green-3);background:var(--green-tint)}
.lines{margin-top:8px;position:relative;container:lines / inline-size}
.line{display:grid;grid-template-columns:44px minmax(0,1fr) 112px 96px 64px;gap:16px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.line:first-child{border-top:0}
.line .n{font-weight:600}
.line .v{font-size:var(--fs-13);color:var(--muted)}
.line .note{margin-top:8px}
.line .note input{height:30px;font-size:var(--fs-13);border-width:0 0 1px;border-style:solid;border-color:var(--line-soft,#F0EFEB);border-radius:0;padding-left:0;background:transparent}
.line .note input:focus{border-style:solid;background:#fffefb}
.qty{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:8px;height:34px;overflow:hidden;background:#fffefb}
.qty button{width:30px;height:100%;border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:var(--fs-16)}
.qty button:hover{background:var(--sunk);color:var(--ink)}
.qty input{width:100%;min-width:0;border:0;text-align:center;font-variant-numeric:tabular-nums;background:transparent;height:100%;font-weight:600}
.qty input:focus{outline:none}
.amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.amt small{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-12)}
.totals{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-14)}
.trow{display:flex;justify-content:space-between;align-items:center;gap:12px}
.trow .tv{font-variant-numeric:tabular-nums}
.trow.total{padding-top:12px;margin-top:4px;border-top:1px solid var(--line);font-size:var(--fs-15);font-weight:600}
.trow.total .tv{font-family:var(--serif);font-size:var(--fs-28);color:var(--green);font-weight:600}
.await{font-size:var(--fs-12);font-weight:600;color:var(--amber);background:var(--amber-tint);padding:2px 8px;border-radius:5px}
.inline-in{display:flex;gap:8px;align-items:center}
.inline-in .in{height:30px;font-size:var(--fs-13)}
.side-actions{display:flex;flex-direction:column;gap:8px}
.side-actions .btn{width:100%}
#editor .side-actions{flex-flow:row wrap}
#editor .side-actions > *{flex:1 1 100%}
#editor .side-actions > .btn{flex:1 1 140px;width:auto}
.hold-note{font-size:var(--fs-12);color:var(--muted);text-align:center}
.drift{margin-top:12px}
.mobilebar{display:none}
/* drawers & modals */
.scrim{position:fixed;inset:0;background:rgb(37 33 30 / 32%);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:60;animation:fadein .18s ease}
@keyframes fadein{from{opacity:0}}
.modal{position:fixed;left:50%;top:9vh;transform:translateX(-50%);width:min(620px,calc(100vw - 24px));max-height:84vh;overflow:auto;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-lg);z-index:61;animation:pop .2s var(--ease);border:1px solid var(--line)}
.modal.wide{width:min(980px,calc(100vw - 24px))}
@keyframes pop{from{opacity:0;transform:translate(-50%,8px) scale(.985)}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px 12px;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:var(--fs-24)}
.modal-body{padding:20px 24px 12px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--line);background:var(--soho-paper);border-radius:0 0 var(--r) var(--r);position:sticky;bottom:0}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(760px,100vw);background:var(--bg);z-index:61;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:slide .26s var(--ease)}
@keyframes slide{from{transform:translateX(30px);opacity:0}}
.drawer-head{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:center;background:var(--surface)}
.drawer-body{overflow:auto;padding:20px 24px;flex:1}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.pcard{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:box-shadow .18s,transform .18s}
.pcard:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.pcard .img{aspect-ratio:1/1;background:var(--sunk);overflow:hidden}
.pcard .img img{width:100%;height:100%;object-fit:cover;display:block}
.pcard .b{padding:12px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.pcard .n{font-weight:600;font-size:var(--fs-14);line-height:1.3}
.pcard .p{font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:var(--fs-13)}
.pcard .c{font-size:var(--fs-12);color:var(--muted)}
.catbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 20px}
.catbar button{height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;font-size:var(--fs-13);color:var(--ink-2)}
.catbar button.on{background:var(--leaf);border-color:var(--leaf);color:var(--on-leaf);font-weight:600}
/* palette */
.palette{position:fixed;left:50%;top:12vh;transform:translateX(-50%);width:min(640px,calc(100vw - 24px));background:var(--surface);border-radius:14px;box-shadow:var(--shadow-lg);z-index:71;overflow:hidden;animation:pop .18s var(--ease);border:1px solid var(--line)}
.palette input{width:100%;border:0;height:56px;padding:0 20px 0 48px;font-size:var(--fs-16);background:transparent;border-bottom:1px solid var(--line)}
.palette input:focus{outline:none}
.palette .pi{position:absolute;left:18px;top:19px;width:18px;height:18px;color:var(--muted)}
.palette .res{max-height:380px;overflow:auto;padding:8px}
.palette .grp{font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:12px 12px 4px}
.palette .it{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:8px;cursor:pointer}
.palette .it svg{width:16px;height:16px;color:var(--muted)}
.palette .it.kb{background:var(--green-tint)}
.palette .it .r{margin-left:auto;font-size:var(--fs-12);color:var(--muted)}
.palette .foot{display:flex;gap:16px;padding:8px 16px;border-top:1px solid var(--line);font-size:var(--fs-12);color:var(--muted);background:var(--soho-paper)}
/* toast */
.toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:0;z-index:90;align-items:center;pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:10px;align-items:center;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--leaf);padding:6px 6px 6px 16px;min-height:48px;border-radius:var(--r-md);box-shadow:var(--shadow-lg);font-size:14px;font-weight:500;animation:pop2 .2s var(--ease);max-width:min(560px,calc(100vw - 24px));line-height:1.35}
.toast.err{background:#FFF8F8;border-left-color:var(--red);color:#7C1C25}
.toast.warn{background:#FFFBF3;border-left-color:var(--amber);color:#6E410B}
/* livefix-nov10: "New version of the app · Update" sits at the top, so it never covers a message or the bottom bars */
.toasts.lv-ver{top:calc(10px + env(safe-area-inset-top));bottom:auto;z-index:95}
@keyframes pop2{from{opacity:0;transform:translateY(8px)}}
/* login: the Soho Platters sign-in page (Nov 9 2026). Brand colours from sohoplatters.com: brown #3C3229, green #88B736, cream #F9F6EC.
   Look A = brown brand panel + form card on cream; look B = one card on cream with the logo above it. No photos (Soho, Nov 9 8:17 AM). */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/InstrumentSerif-400.woff2) format('woff2')}
.login{--lk-brown:#3C3229;--lk-brown-2:#2E261F;--lk-cream:#F9F6EC;--lk-cream-2:#F1ECDD;--lk-green:#88B736;--lk-serif:'Instrument Serif',Georgia,'Times New Roman',serif;min-height:100vh;min-height:100svh;display:grid;background:var(--lk-cream);color:var(--ink);position:relative;overflow:hidden}
.login-form{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:48px 24px;position:relative;z-index:1}
.login-card{width:min(440px,100%);background:#fff;border:1px solid #E6E0CE;border-radius:18px;padding:36px 36px 30px;box-shadow:0 1px 2px rgba(60,50,41,.06),0 24px 48px -24px rgba(60,50,41,.28)}
.login-card:has(form.mfa-wide){width:min(520px,100%)}
.login-form form{width:100%;display:flex;flex-direction:column;gap:16px}
.login-form form > img{display:none}
.login-title{font-size:var(--fs-32);color:var(--lk-brown)}
.login-form .btn.primary{height:52px;font-size:var(--fs-16);margin-top:8px;border-radius:12px}
.login-form .in{height:46px;border-radius:10px;border-color:#DCD5C2;background:#FFFEFA}
.login-form .in:focus{border-color:var(--lk-green)}
.login .welcome{padding:0}
.lk-eyebrow{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#557A1F}
.lk-line{margin:0;font-size:var(--fs-18);line-height:1.5}
.lk-foot{margin:0;font-size:var(--fs-13);color:var(--muted)}
.lk-foot span{white-space:nowrap}
.lk-leaf{position:absolute;pointer-events:none;user-select:none}
/* A: brown panel */
.login.lk-a{grid-template-columns:minmax(420px,1fr) minmax(460px,1.05fr)}
.lk-a .login-art{position:relative;overflow:hidden;background:radial-gradient(110% 80% at 0% 0%,#4A3E33 0%,var(--lk-brown) 48%,var(--lk-brown-2) 100%);color:#F6F1E4;padding:56px 64px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.lk-a .login-art .logo{width:176px;height:auto;filter:brightness(0) invert(1);position:relative}
.lk-a .lk-leaf{right:-70px;bottom:-130px;width:440px;height:auto;opacity:.4}
.lk-a .lk-pitch{position:relative;display:flex;flex-direction:column;gap:16px;max-width:600px}
.lk-a .lk-pitch .lk-eyebrow{color:var(--lk-green)}
.lk-a .lk-pitch h1{font-family:var(--lk-serif);font-weight:400;font-size:84px;line-height:.98;letter-spacing:-.01em;color:#fff}
.lk-a .lk-pitch .lk-line{color:#E4DCC9}
.lk-a .login-art .lk-foot{color:#B9AE9B;position:relative}
.lk-a .login-form{background:var(--lk-cream)}
.lk-a .lk-foot-sm{display:none}
/* B: one card on cream */
.login.lk-b{grid-template-columns:1fr;background:radial-gradient(90% 70% at 50% 0%,#FFFDF6 0%,var(--lk-cream) 60%,var(--lk-cream-2) 100%)}
.lk-b .login-form{min-height:100vh;min-height:100svh;padding:56px 24px 40px;gap:24px}
.lk-b .lk-brand{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.lk-b .lk-logo{width:220px;height:auto;margin-bottom:6px}
.lk-b .lk-eyebrow{font-family:var(--lk-serif);font-weight:400;font-size:40px;line-height:1.05;letter-spacing:0;text-transform:none;color:var(--lk-brown)}
.lk-b .lk-line{color:#6B6155;font-size:var(--fs-16)}
.lk-b .login-card{border-top:4px solid var(--lk-green)}
.lk-b .lk-leaf-1{left:-120px;top:-80px;width:440px;height:auto;opacity:.6;transform:rotate(-24deg)}
.lk-b .lk-leaf-2{right:-110px;bottom:-140px;width:480px;height:auto;opacity:.5;transform:rotate(150deg)}
@media (max-width:900px){
  .login.lk-a{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .lk-a .login-art{padding:28px 24px 64px;gap:18px;justify-content:flex-start}
  .lk-a .login-art .logo{width:120px}
  .lk-a .lk-leaf{width:220px;right:-80px;top:-40px;bottom:auto;opacity:.32}
  .lk-a .lk-pitch{gap:8px}
  .lk-a .lk-pitch .lk-eyebrow{display:none}
  .lk-a .lk-pitch h1{font-size:44px}
  .lk-a .lk-pitch .lk-line{font-size:var(--fs-15)}
  .lk-a .login-art .lk-foot{display:none}
  .lk-a .login-form{justify-content:flex-start;padding:0 16px 32px;margin-top:-40px;gap:16px}
  .lk-a .lk-foot-sm{display:block;text-align:center}
  .login-card{padding:28px 22px 24px;border-radius:16px}
  .lk-b .login-form{justify-content:flex-start;padding:40px 16px 32px;gap:20px}
  .lk-b .lk-logo{width:150px}
  .lk-b .lk-eyebrow{font-size:32px}
  .lk-b .lk-line{font-size:var(--fs-15)}
  .lk-b .lk-leaf-1{width:240px;left:-150px;top:-90px;opacity:.4}
  .lk-b .lk-leaf-2{width:260px;right:-140px;bottom:-120px;opacity:.4}
  .lk-foot{text-align:center}
  .login-title{font-size:var(--fs-28)}
}
/* sign-in features (Nov 9 2026 v2, Soho 8:35 AM: "the small eye to see the password, forgot your password"): the eye, Caps Lock, Forgot, Remember my email, the set-password rules, Need help */
.login-form .lk-pw{display:flex;flex-flow:row wrap;align-items:baseline;gap:4px 6px;font-size:12.5px;font-weight:500;color:var(--ink-2);min-width:0;letter-spacing:.01em}
.login-form .lk-pw > label{flex:1 1 auto}
.login-form .lk-pw .hint{font-weight:400;color:var(--muted);font-size:var(--fs-12)}
.login-form .lk-pw > .pw-wrap,.login-form .lk-pw > .lk-caps{flex:1 1 100%;min-width:0}
.pw-wrap{position:relative;display:block}
.pw-wrap .in{width:100%;padding-right:52px}
.pw-eye{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:44px;height:40px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:#7A7064;cursor:pointer;padding:0}
.pw-eye svg{width:20px;height:20px}
.pw-eye:hover{color:var(--lk-brown,#3C3229);background:#F3EFE3}
.pw-eye:focus-visible{outline:2px solid var(--lk-green,#88B736);outline-offset:1px}
.pw-eye::after{content:'';position:absolute;left:50%;top:50%;width:22px;height:2px;background:currentColor;border-radius:2px;transform:translate(-50%,-50%) rotate(-45deg);box-shadow:0 0 0 1.5px #FFFEFA;opacity:0}
.pw-eye.on{color:#557A1F}
.pw-eye.on::after{opacity:1}
.lk-caps{margin:2px 0 0;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#8A5A00}
.lk-caps svg{width:15px;height:15px}
.lk-caps[hidden],.lk-forgot[hidden]{display:none}
.lk-link{margin-left:auto;background:none;border:0;padding:6px 0 0;font:inherit;font-size:13.5px;font-weight:600;color:#557A1F;cursor:pointer}
.lk-link:hover{text-decoration:underline}
.lk-link:focus-visible{outline:2px solid var(--lk-green,#88B736);outline-offset:2px;border-radius:4px}
.lk-forgot{background:#F7F4EA;border:1px solid #E6E0CE;border-radius:12px;padding:16px 16px 14px}
.lk-forgot h2{margin:0 0 6px;font-size:var(--fs-16);color:var(--lk-brown,#3C3229);outline:none}
.lk-forgot p{margin:0 0 8px;font-size:14px;line-height:1.45;color:#4A4036}
.lk-forgot .banner{margin:4px 0 8px}
.lk-forgot-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.lk-remember{display:flex;align-items:center;gap:10px;font-size:14px;color:#4A4036;cursor:pointer;margin-top:-2px}
.lk-remember input{width:18px;height:18px;accent-color:#557A1F;margin:0;flex:none}
.login-form .in.err{border-color:var(--red)} /* the app's one invalid-field rule draws it; this only wins over the sign-in box colour */
.lk-rules{list-style:none;margin:-6px 0 0;padding:0;display:grid;gap:4px;font-size:13px;color:var(--muted)}
.lk-rules li{display:flex;gap:8px;align-items:baseline}
.lk-rules li::before{content:'○';width:14px;flex:none;text-align:center}
.lk-rules li.ok{color:#3F6A12}
.lk-rules li.ok::before{content:'✓';font-weight:700}
.lk-rules li.bad{color:#A8322A}
.lk-rules li.bad::before{content:'✕'}
.lk-rules li.lk-rule-note::before{content:'·'}
.lk-help{margin:0;text-align:center;color:var(--muted)}
.lk-help a{color:var(--lk-brown,#3C3229);font-weight:600;text-decoration:none;white-space:nowrap}
.lk-help a:hover{text-decoration:underline}
.login-form .btn.primary[disabled]{cursor:progress}
/* the 27" screen: the same page drawn larger, like the rest of the app (see --vz below) */
@media (min-width:1800px){
  .lk-a .login-art > *,.login-form > *{zoom:var(--vz,1)}
  .lk-a .lk-leaf{zoom:var(--vz,1)}
}
/* kitchen */
.kday{margin-bottom:28px}
.kday-h{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.ticket{display:grid;grid-template-columns:92px minmax(0,1fr) 260px;gap:20px;padding:20px 20px;border-top:1px solid var(--line);border-radius:16px}
.ticket:first-child{border-top:0}
.ticket .time{font-family:var(--serif);font-size:var(--fs-24);color:var(--green);line-height:1}
.ticket .items{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.ticket .items b{display:inline-block;min-width:30px;font-variant-numeric:tabular-nums}
.kn{margin-top:8px;padding:8px 12px;border-left:3px solid var(--leaf);background:var(--green-tint);font-size:var(--fs-13);border-radius:0 6px 6px 0}
.evs{display:flex;flex-direction:column;gap:8px}
.ev{display:flex;align-items:center;gap:8px;font-size:var(--fs-14);min-height:36px}
.ev>span:nth-child(2){flex:1;min-width:0}
.ev .btn.sm{margin-left:auto;flex:none}
.ev .dot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;display:grid;place-items:center}
.ev.done .dot{background:var(--green-2);border-color:var(--green-2);color:#fff}
.ev.done .dot svg{width:10px;height:10px}
/* preview document */
.doc-preview{background:#F6F6F3;min-height:100vh;padding:0 0 48px}
.doc-bar{max-width:820px;margin:0 auto 16px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.paper{max-width:820px;margin:0 auto;background:#fff;border-top:6px solid var(--leaf);box-shadow:0 1px 2px rgb(37 33 30 / 6%), 0 24px 48px -24px rgb(37 33 30 / 30%);border-radius:6px;overflow:hidden}
.paper-top{padding:40px 56px 28px;display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid #E6E3DC}
.paper-top img{height:56px;width:auto}
.paper-top .from{text-align:right;font-size:12.5px;color:#6E6770;line-height:1.6}
.paper-hero{padding:34px 56px 8px}
.paper-hero .kind{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--green-2);font-weight:600}
.paper-hero h1{font-size:44px;color:var(--green);margin-top:6px}









.paper-note{margin:18px 56px 0;padding:14px 16px;background:var(--soho-paper);border-left:3px solid var(--leaf);border-radius:0 6px 6px 0;font-size:13px}
.paper-cta{margin:26px 56px 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}



.watermark{display:inline-flex;gap:8px;align-items:center;font-size:var(--fs-12);font-weight:600;color:#8a4f12;background:#fbf1e1;border:1px solid #efd9b4;padding:4px 12px;border-radius:6px}
/* checklist */
.chk{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:12px;padding:12px 0;border-top:1px solid var(--line);align-items:center}
.chk:first-child{border-top:0}
.chk .d{font-size:var(--fs-13);color:var(--muted)}
@media (max-width:1180px){
  .metrics{grid-template-columns:repeat(2,1fr)}
  .metric:nth-child(3){border-left:0}
  .metric:nth-child(n+3){border-top:1px solid var(--line)}
  .cols-main{grid-template-columns:minmax(0,1fr) 320px}
}
@media (max-width:980px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .top-brand{display:block;flex:none}
  .top-brand img{width:64px;height:auto;display:block}
  .me-sm{display:grid;place-items:center;border:0;cursor:pointer;width:40px;height:40px}
  .top{padding:10px 16px}
  .page{padding:16px 16px calc(112px + env(safe-area-inset-bottom))}
  .cols,.cols-main{grid-template-columns:1fr}
  .sticky{position:static}
  .ticket{grid-template-columns:70px 1fr}
  .ticket .evs{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
}
@media (max-width:640px){
  h1{font-size:var(--fs-28)}
  .metrics{grid-template-columns:1fr 1fr}
  .metric{border-left:0;border-top:1px solid var(--line)}
  .metric:nth-child(1),.metric:nth-child(2){border-top:0}
  .metric:nth-child(even){border-left:1px solid var(--line)}
  .metric .v{font-size:var(--fs-32)}
  .metric:last-child:nth-child(odd){grid-column:1/-1}
  .g2,.g3{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
  .span2,.span3{grid-column:1/-1}
  .g2.keep{grid-template-columns:1fr 1fr}
  .line .qty{grid-column:2;width:120px}
  .line .amt{grid-column:3/4;grid-row:2;text-align:right;white-space:nowrap;justify-self:end;margin-right:0px}
  .line > .x{grid-column:3;grid-row:1}
  .hide-sm{display:none!important}
  .table th.hide-sm,.table td.hide-sm{display:none}
  .search-trigger .kbd{display:none}
  
  
  
  .paper-top,.paper-hero{padding-left:22px;padding-right:22px}
  .paper-note,.paper-cta{margin-left:22px;margin-right:22px}
  
  .paper-hero h1{font-size:34px}
  .kv{grid-template-columns:100px 1fr}
  
  
  .ed-head > div:last-child{width:100%;flex-wrap:nowrap!important}
  .chk{grid-template-columns:1fr}
  .modal{top:auto;bottom:0;left:0;right:0;transform:none;width:100%;max-height:92vh;border-radius:20px 20px 0 0;border-bottom:0;animation:sheet .24s var(--ease);padding-bottom:env(safe-area-inset-bottom)}
  .section-head{gap:8px;flex-wrap:wrap}
  .top{gap:8px;background:rgb(250 249 245 / 97%);backdrop-filter:none;-webkit-backdrop-filter:none}
  .search-trigger{min-width:0;flex:1 1 auto;width:auto}
  .top-actions{flex:none}
  .top-actions .btn{width:44px;padding:0}
  .search-trigger span:not(.kbd){font-size:var(--fs-14)}
  .section-head h3{font-size:var(--fs-15);white-space:nowrap}
  .seg button{padding:0 12px}
  .ed-title h1{font-size:var(--fs-24)}
  .c-head h1{font-size:var(--fs-24)}
  .in{font-size:16px}
  /* 16px stops iPhone zooming into fields */
  .btn{height:44px}
  .c-head > div:last-child{display:grid!important;grid-template-columns:1fr 1fr;width:100%}
  .c-head > div:last-child .btn{width:100%}
  .ticket .evs{border-top:1px solid var(--line);padding-top:12px;margin-top:8px}
  .toasts{left:12px;right:12px;transform:none}
  .toast{max-width:100%}
}
/* touch screens: every tap target at least 44px */
@media (pointer:coarse){
  .btn.sm,.icon-btn,.seg button,.catbar button,.qty,.palette .it,.check,details.more>summary,.linkbtn,.orow{min-height:44px}
  .check{min-width:44px}
  .icon-btn{min-width:44px}
  .qty button{min-width:44px}
}
@media print{
  .doc-bar{display:none}
  .doc-preview{background:#fff;padding:0}
  .paper{box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
/* ---------- v4: Zoho field parity ---------- */
.sub-h{font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:20px 0 12px}
.grid .sub-h{margin:8px 0 -4px}
details.more{margin-top:16px;border-top:1px dashed var(--line);padding-top:12px}
details.more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-13);color:var(--green-2);font-weight:500;user-select:none}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary .mi{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--green-tint);transition:transform .18s var(--ease)}
details.more>summary .mi svg{width:12px;height:12px}
details.more[open]>summary .mi{transform:rotate(45deg)}
details.more .more-body{margin-top:16px;animation:fadeIn .18s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.rcpts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;font-weight:400}
.rcpt{display:flex;gap:8px;align-items:flex-start;padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:#fffefb;cursor:pointer;font-size:var(--fs-13);line-height:1.35;transition:border-color .15s,background .15s;max-width:100%}
.rcpt input{accent-color:var(--green);margin-top:2px}
.rcpt.on{border-color:var(--green-3);background:var(--green-tint)}
.rcpt b{font-weight:600}
.line .lbtns{display:flex;gap:2px;justify-content:flex-end;align-self:start;padding-top:8px}
.line .lbtns .icon-btn{width:28px;height:28px}
.line.hdr,.line.nt{grid-template-columns:minmax(0,1fr) auto;gap:12px}
.line.nt{grid-template-columns:minmax(0,1fr) 96px auto;background:linear-gradient(90deg,var(--sunk),transparent 70%);border-radius:0 8px 8px 0;padding-left:12px;border-left:2px solid var(--line-2)}
.line.hdr .hdr-in{font-family:var(--serif);font-size:var(--fs-20);font-weight:600;color:var(--green);border-color:transparent;background:transparent;height:38px;padding-left:4px}
.line.hdr .hdr-in:focus{border-color:var(--line-2);background:#fffefb}
.line.hdr .hdr-t{font-family:var(--serif);font-size:var(--fs-20);font-weight:600;color:var(--green)}
.line.nt .nt-name{height:30px;font-weight:600;border-style:dashed;background:transparent;margin-bottom:8px}
.line.lift{z-index:5;background:var(--surface);border-radius:8px;box-shadow:0 1px 2px rgb(37 33 30 / 8%),0 12px 28px -10px rgb(37 33 30 / 28%);will-change:transform}
.line.lift .grip{color:var(--soho-green)}
.lmove{display:flex;gap:2px;align-items:center}
.lmove .icon-btn{width:28px;height:28px;font-size:var(--fs-13);color:var(--muted)}
.lines.can-drag > .line{position:relative;padding-left:36px}
.line .grip{position:absolute;left:0;top:8px;bottom:8px;width:28px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:none;color:var(--muted);cursor:grab;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.line .grip:hover{color:var(--ink-2);background:var(--hover)}
.line .grip:focus-visible{outline:2px solid var(--soho-green);outline-offset:-2px;color:var(--ink-2)}
.lines.dragging,.lines.dragging *{cursor:grabbing;-webkit-user-select:none;user-select:none}
.lines.dragging > .line:not(.lift){transition:transform .16s var(--ease)}
.drop-line{position:absolute;left:0;right:0;height:2px;border-radius:1px;background:var(--soho-green);pointer-events:none;z-index:6}
.line .desc{min-height:30px;height:30px;font-size:var(--fs-13);border-width:0 0 1px;border-style:solid;border-color:var(--line-soft,#F0EFEB);border-radius:0;padding-left:0;background:transparent;resize:none;line-height:1.45;padding-top:8px;overflow:hidden}
.line .desc:focus{border-style:solid;background:#fffefb}
.line .cname{height:32px;font-weight:600;scroll-margin-top:112px}
.line .ldet{display:grid;grid-template-columns:110px 110px 150px 80px auto auto;gap:12px;margin-top:12px;padding:12px;border-radius:9px;background:var(--sunk);border:1px solid var(--line);align-items:end;animation:fadeIn .18s var(--ease)}
.line .ldet .in{height:32px;font-size:var(--fs-13)}
.line .src{font-size:var(--fs-12);font-weight:500;letter-spacing:0;text-transform:none;padding:0;border-radius:0;background:none;color:var(--muted)}
.line .src.w{background:none;color:var(--green-2)}
.line .src.z{background:none;color:var(--blue)}
.thumb.z,.thumb.c,.zimg{display:grid;place-items:center;background:var(--blue-tint);color:var(--blue);border-radius:8px}
.thumb.c{background:var(--green-tint);color:var(--green-3)}
.zimg{width:38px;height:38px;flex:none}
.pcard .img.zimg-lg{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--blue-tint),#f4f1e8);color:var(--blue);font-size:var(--fs-12);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.pcard .img.zimg-lg svg{width:26px;height:26px}
.pre{white-space:pre-line}
.tctl{gap:8px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px dashed var(--line)}
.kfacts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin-top:12px;background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.kfacts>div{background:var(--surface);padding:8px 12px;min-width:0}
.kfacts span{display:block;font-size:var(--fs-12);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kfacts b{display:block;font-size:var(--fs-14);font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticket .time small{font-family:var(--sans);font-size:var(--fs-12);margin-left:4px;color:var(--muted)}
.ticket .items .kh{margin-top:8px;font-family:var(--serif);font-weight:600;color:var(--green);font-size:var(--fs-15)}
.ticket .items .kdesc{font-size:var(--fs-12);color:var(--muted);white-space:pre-line;margin:1px 0 4px 32px}
.ticket .stn{font-size:var(--fs-12);font-weight:600;padding:0 4px;border-radius:4px;background:var(--sunk);color:var(--muted);margin-left:4px}
.paper-hero .subject{margin-top:8px;color:#5b574c;font-size:14px}







.doc-to{max-width:860px;margin:16px auto 0;font-size:var(--fs-12);color:var(--ink-2);text-align:center}
@media (max-width:980px){
  .line .ldet{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kfacts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .line{grid-template-columns:40px minmax(0,1fr) 64px;gap:12px}
  .line .lbtns{grid-column:3;grid-row:1}
  .line.hdr,.line.nt{grid-template-columns:minmax(0,1fr) auto}
  .line.nt .amt{display:none}
  .line .ldet{grid-template-columns:1fr 1fr;grid-column:1/-1}
  .kfacts{grid-template-columns:repeat(2,minmax(0,1fr))}
  
  
  
  .rcpt{flex:1 1 100%}
  #otSeg{width:100%}
  #otSeg button{flex:1}
  .kfacts span,.kfacts b{white-space:normal;overflow:visible}
}
@media print{
  .doc-to{display:none}
  
}


/* users & roles */
.permwrap{overflow-x:auto;margin:0 -4px;-webkit-overflow-scrolling:touch}
.permgrid{width:100%;border-collapse:collapse;font-size:var(--fs-13);min-width:720px}
.permgrid th{font-size:var(--fs-12);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:8px 8px;text-align:center;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface)}
.permgrid td{padding:8px 8px;border-bottom:1px solid var(--line);text-align:center}
.permgrid td:first-child{text-align:left;color:var(--ink-2);min-width:240px}
.permgrid tr.pg td{font-family:var(--serif);font-size:var(--fs-15);font-weight:600;color:var(--green);padding-top:16px;text-align:left;border-bottom:1px solid var(--line-2)}
.permgrid input[type=checkbox]{width:17px;height:17px;accent-color:var(--green)}
.permgrid input[type=checkbox]:disabled{opacity:.55}
.capin{display:inline-flex;align-items:center;gap:4px}
.capin .in{width:74px;height:30px;text-align:right;padding:0 8px}
.me .who:hover b{text-decoration:underline}
/* send block */
.sendblk{border:1px dashed var(--line-2);border-radius:var(--r-sm);padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--sunk)}
.sendblk .sb-h{display:flex;align-items:center;gap:8px;font-size:var(--fs-13)}
.sendblk .sb-h .pill{margin-left:auto}
.sb-row{display:flex;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 12px;font:inherit;font-size:var(--fs-13);color:var(--ink-2);cursor:not-allowed}
.sb-row .grow{display:flex;flex-direction:column;gap:1px}
/* deliveries */
.stops{display:flex;flex-direction:column;gap:16px;max-width:760px}
.stop h3{font-family:var(--serif);font-size:var(--fs-20)}
.stop .addr{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:12px 12px;border-radius:9px;background:var(--green-tint);color:var(--green);text-decoration:none;font-weight:500}
.stop .addr svg{flex:none;margin-top:2px}
/* customer page (staff preview) */
.cpage{min-height:100vh;background:var(--soho-paper);padding:16px 16px 80px}
.cp-bar{max-width:760px;margin:0 auto 16px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cp-wrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.cp-head{display:flex;gap:20px;align-items:center;padding:8px 0}
.cp-head img{width:132px;height:auto;object-fit:contain}
.cp-head h1{font-size:var(--fs-28)}
.cp-state{display:flex;gap:12px;align-items:flex-start;padding:16px 16px;border-radius:12px;border:1px solid var(--line);background:#fff}
.cp-state.open{border-left:4px solid var(--soho-green)}
.cp-state.locked{border-left:4px solid var(--soho-danger)}
.cp-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 24px;box-shadow:var(--shadow)}
.cp-card h2{font-size:var(--fs-24);margin-bottom:12px}
.cp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cp-grid .span2{grid-column:span 2}
.cp-items{display:flex;flex-direction:column}
.cp-it{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.cp-it:last-child{border-bottom:0}
.cp-it img,.cp-ph{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:none;background:var(--sunk);display:grid;place-items:center;color:var(--muted)}
.cp-it .t{font-weight:600}
.cp-it.gone{opacity:.45}
.cp-it.gone .t{text-decoration:line-through}
.cp-it.new{background:var(--green-tint);margin:0 -8px;padding:12px 8px;border-radius:10px}
.cp-tot>div:first-child{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-18)}
.cp-tot b{font-family:var(--serif);font-weight:400;font-size:var(--fs-28);color:var(--soho-dark)}
.cp-actions{position:sticky;bottom:12px;display:flex;justify-content:flex-end}
.cp-actions .btn{box-shadow:var(--shadow-lg)}
.cestate{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ce-ov{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.kchg{margin:8px 0}
@media (max-width:640px){
  .cp-grid{grid-template-columns:1fr}
  .cp-grid .span2{grid-column:auto}
  .cp-card{padding:16px}
  .cp-head img{width:96px}
  .cp-actions .btn{width:100%}
}
/* ---------- the one order list (website + app) and the website order page ---------- */
.ofilters{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.ofilters .psearch{flex:1;min-width:220px}
.ofilters select.in{width:220px;height:44px}
#dsrcSel{display:none}
.olist{overflow:hidden}
.orow{display:grid;grid-template-columns:minmax(124px,.9fr) minmax(150px,1.6fr) 120px 150px 110px 110px 80px 104px;gap:14px;align-items:center;padding:6px 20px;min-height:40px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;transition:background var(--t) var(--ease)}
.orow:hover{background:#FAFAF8;text-decoration:none}
.orow:active{background:var(--sunk)}
.orow.ohead{border-top:0;min-height:0;padding-top:12px;padding-bottom:12px;font-size:var(--fs-12);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;background:var(--sunk);border-bottom:1px solid var(--line)}
.orow.ohead:hover{background:var(--sunk)}
.orow.ohead + .orow{border-top:0}
.orow.ohead>span{font-size:var(--fs-12);color:var(--muted);font-weight:600}
.o-num{display:flex;flex-direction:row;align-items:center;gap:2px 8px;min-width:0;flex-wrap:wrap}
.o-num b{font-size:var(--fs-15);letter-spacing:.01em;white-space:nowrap}
.o-cust{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.o-when,.o-rep,.o-at{font-size:var(--fs-14);color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.o-tot{text-align:right;font-weight:600;font-size:var(--fs-15);font-variant-numeric:tabular-nums lining-nums}
.pill.src{height:20px;padding:0 6px;border-radius:5px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2)}
.pill.src::before{display:none}
.pill.src.leaf{color:var(--green-2);box-shadow:inset 0 0 0 1px rgb(86 120 38 / 30%)}
.pill.src.blue{color:var(--blue);box-shadow:inset 0 0 0 1px rgb(35 90 122 / 28%)}
.linkbtn{display:inline-flex;align-items:center;background:none;border:0;padding:0 2px;color:var(--green-2);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
.wline{display:flex;gap:12px;align-items:center}
.wline img,.wimg{width:48px;height:48px;border-radius:8px;object-fit:cover;flex:none;background:var(--sunk);display:grid;place-items:center;color:var(--muted)}
.kv.tot{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);grid-template-columns:1fr auto;font-size:var(--fs-14)}
.kv.tot dd{text-align:right;font-variant-numeric:tabular-nums}
.paylink{display:flex;gap:8px;margin-top:12px}
.paylink .in{flex:1;min-width:0;font-size:var(--fs-13)}
.wo-actions{display:flex;gap:8px;flex-wrap:wrap}
.wm-a{display:flex;gap:8px;flex-wrap:wrap;min-width:0;max-width:100%}
.wm-a .btn{white-space:normal;height:auto;min-height:44px;text-align:left;max-width:100%}
.wtabs{margin-bottom:20px}
.hist{list-style:none;margin:0;padding:0}
.hist li{padding:12px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere}
.hist li:first-child{border-top:0}
.check-row{display:flex;gap:12px;align-items:center;min-height:44px;font-weight:600;cursor:pointer}
.check-row input{width:20px;height:20px;accent-color:var(--leaf)}
@media (max-width:1180px){
  .orow{grid-template-columns:minmax(120px,1fr) minmax(150px,1.5fr) 140px 150px 100px}
  .o-pay,.o-rep,.o-at{display:none}
}
@media (max-width:640px){
  .orow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"num tot" "st when";gap:6px 12px;padding:10px 16px}
  .orow.ohead{display:none}
  .o-num{grid-area:num;flex-direction:row;align-items:center;gap:2px 8px;flex-wrap:wrap;min-width:0}
  .o-tot{grid-area:tot}
  .o-cust{display:none}
  .o-st{grid-area:st}
  .o-when{grid-area:when;text-align:right;font-size:var(--fs-13)}
  .ofilters .seg{width:100%;display:flex}
  .ofilters .seg button{flex:1;padding:0 8px}
  .ofilters select.in{width:100%}
  .wo-actions{width:100%}
  .wtabs{width:100%;display:flex}
  .wtabs button{flex:1;padding:0 8px}
  .wo-actions .btn{flex:1 1 auto;justify-content:center}
}
/* ---------- money (Phase 2): payments panel, customer balance, statement ---------- */
.mstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px}
.mstat{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 12px;background:var(--surface);display:flex;flex-direction:column;gap:2px;min-width:0}
.mstat span{font-size:var(--fs-12);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.mstat b{font-size:var(--fs-20);font-weight:600;color:var(--ink);line-height:1.2;overflow-wrap:anywhere}
.mstat b small{display:block;font-size:var(--fs-12);font-weight:400;color:var(--muted)}
.mstat.due{border-color:var(--leaf);background:var(--green-tint)}
.mstat.due b{color:var(--green)}
.mbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.mlist{display:flex;flex-direction:column}
.mrow{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);min-height:44px;color:inherit}
.mrow:first-child{border-top:0}
.mrow .grow{flex:1;min-width:0}
.mrow .t{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.mrow .s{font-size:var(--fs-13);color:var(--muted);overflow-wrap:anywhere}
.mrow.void .t b{text-decoration:line-through;color:var(--muted)}
.mrow.link{align-items:center;text-decoration:none}
.mrow.link:hover{background:var(--hover)}
.mprev{background:var(--sunk);border-radius:var(--r-sm);padding:12px 12px;margin-top:12px;line-height:1.5}
.st-bar .st-range{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.st-range label{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted)}
.st-range .in{width:150px}
.paper.statement{padding-bottom:40px}
.statement .st-sum{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:18px 56px 6px}
.st-sum div{border:1px solid #e8e1cf;border-radius:var(--r-sm);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.st-sum span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6b6457;font-weight:600}
.st-sum b{font-size:16px;font-variant-numeric:tabular-nums lining-nums}
.st-sum .due{border-color:var(--leaf);background:var(--green-tint)}
.statement .st-table,.statement > .eyebrow,.statement > p{margin-left:56px;margin-right:56px}
.st-table{margin-top:16px;font-size:14px}
.st-row{display:grid;grid-template-columns:96px minmax(0,1fr) 110px 130px 110px;gap:10px;padding:10px 0;border-bottom:1px solid #ECE9E2;align-items:baseline;font-variant-numeric:tabular-nums lining-nums}
.st-row .r{text-align:right}
.st-head{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6b6457;font-weight:600;border-bottom:1px solid #d9cfb8}
.st-open,.st-close{background:#F7F6F1}
.st-info{color:var(--muted)}
@media (max-width:640px){
  .mbtns .btn{flex:1 1 140px;justify-content:center}
  .mbtns .btn.primary{flex-basis:100%}
  .mrow{flex-wrap:wrap;gap:8px 12px}
  .st-bar .st-range{width:100%}
  .st-range label{flex:1}
  .st-range .in{width:100%}
  .statement .st-sum{grid-template-columns:1fr 1fr;padding:16px 22px 4px}
  .st-sum .due{grid-column:1/-1}
  .statement .st-table,.statement > .eyebrow,.statement > p{margin-left:22px;margin-right:22px}
  .st-row{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}
  .st-head{display:none}
  .st-row > span:nth-child(1){grid-column:1;font-size:12px;color:#6b6457}
  .st-row > span:nth-child(2){grid-column:1/-1;grid-row:2}
  .st-row > span:nth-child(3),.st-row > span:nth-child(4){grid-row:1;grid-column:2}
  .st-row > span:nth-child(3):empty,.st-row > span:nth-child(4):empty{display:none}
  .st-row > span:nth-child(5){grid-column:2;grid-row:3;font-size:12px;color:#6b6457}
  .st-row > span:nth-child(5)::before{content:'Balance '}
  .st-row > span.st-due::before{content:'Due '}
  .st-row > span.st-p:not(:empty)::before{content:'−'}
}
@media print{
  .st-open,.st-close,.st-sum .due{background:#fff}
}
/* ---------- Phase 3: sales (limits, manager OK, quote link, recurring) ---------- */
.repeatgrp{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.keepchip{font-size:var(--fs-13);color:var(--ink-2);padding:0 4px}
.keepchip.sm{font-size:var(--fs-12)}
.v s.was,.lim-h s,.modal s{color:var(--muted);text-decoration:line-through}
.v .ovr{color:var(--amber);font-weight:600}
.limbox{margin-top:12px;padding:12px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--sunk);display:flex;flex-direction:column;gap:8px;font-size:var(--fs-13)}
.lim-h{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.lim{display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.lim svg{flex:none;margin-top:2px}
.lim.ok{color:var(--green-2)}
.lim.over{color:var(--amber)}
.limbox .btn{align-self:flex-start}
.qshare .sb-row:not([disabled]){cursor:pointer;color:var(--ink)}
.qshare .sb-row:not([disabled]):hover{border-color:var(--leaf);background:var(--green-tint)}
.qshare .sb-row b{display:inline-flex;gap:8px;align-items:center}
a.sb-row{text-decoration:none}
.dchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.dchip{min-width:44px;height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);font-weight:600;cursor:pointer;color:var(--ink-2)}
.dchip.on{background:var(--leaf);border-color:var(--leaf);color:var(--on-leaf)}
.rprev{margin-top:12px;padding:12px 12px;border-radius:var(--r-sm);background:var(--green-tint);color:var(--ink-2);line-height:1.5}
/* Settings › Automations (Phase 4) */
.auto-back{display:inline-flex;gap:8px;align-items:center;min-height:44px;margin-bottom:4px}
.auto-warn{margin-bottom:16px;font-size:var(--fs-15)}
.auto-strip{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:20px}
.auto-list{display:flex;flex-direction:column;gap:24px}
.auto-card{padding:20px 24px}
.auto-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.auto-title{display:flex;gap:12px;align-items:flex-start;min-width:0}
.auto-title h3{font-size:var(--fs-24);line-height:1.2}
.auto-n{flex:none;width:32px;height:32px;border-radius:50%;background:var(--leaf);color:var(--on-leaf);display:grid;place-items:center;font-weight:600;font-size:var(--fs-14)}
.auto-labels{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.auto-switch{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none}
.tog{position:relative;width:60px;height:44px;border:0;background:transparent;cursor:pointer;padding:0}
.tog::before{content:'';position:absolute;left:4px;right:4px;top:9px;height:26px;border-radius:999px;background:var(--line-2);transition:background .15s}
.tog.on::before{background:var(--leaf)}
.tog-k{position:absolute;top:12px;left:8px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.tog.on .tog-k{left:32px}
.tog:focus-visible{outline:2px solid var(--green-2);outline-offset:2px;border-radius:999px}
.auto-dl{margin:16px 0 0;display:flex;flex-direction:column;gap:8px}
.auto-kv{display:grid;grid-template-columns:130px 1fr;gap:4px 16px;font-size:var(--fs-14)}
.auto-kv dt{color:var(--muted);font-weight:600}
.auto-kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.auto-fields{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.auto-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.auto-prev:empty{display:none}
.auto-prev{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line-2)}
.auto-sum{display:flex;flex-wrap:wrap;gap:8px 8px;align-items:center;margin-bottom:12px}
.auto-items{display:flex;flex-direction:column;gap:12px}
.auto-item{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 16px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.auto-item.go{border-color:#efd9b4}
.auto-item-h{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.auto-body summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--green-2);font-size:var(--fs-14)}
.auto-body pre{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--sans);font-size:var(--fs-14);line-height:1.5;background:var(--sunk);padding:12px;border-radius:var(--r-sm);margin:0}
.auto-klist{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.auto-ko{border-left:3px solid var(--leaf);padding:4px 0 4px 12px;font-size:var(--fs-14)}
.auto-ko ul{margin:4px 0;padding-left:20px}
.auto-link .btn{align-self:flex-start}
@media (max-width:640px){
  .auto-card{padding:16px}
  .auto-kv{grid-template-columns:1fr;gap:0}
  .auto-title h3{font-size:var(--fs-20)}
  .auto-actions .btn{width:100%;justify-content:center}
}
.auto-fields .await{align-self:flex-start}
.auto-item-h .pill,.auto-sum .pill{white-space:normal;height:auto;min-height:26px;padding-top:4px;padding-bottom:4px;max-width:100%}
/* ---------- Phase 5: Reports & printouts (one section; light brand; 44px targets; phone cards) ---------- */
.rep .page-head h1{font-size:var(--fs-32)}
.rep-tools{display:flex;gap:8px;flex-wrap:wrap}
.rep-tabs{display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:-8px 0 24px;padding:0;border-bottom:1px solid var(--line)}
.rep-tabs a{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:8px 8px 0 0;color:var(--muted);font-weight:600;font-size:var(--fs-15);white-space:nowrap;text-decoration:none;transition:color var(--t) var(--ease),background var(--t) var(--ease)}
.rep-tabs a:hover{background:var(--hover);color:var(--ink);text-decoration:none}
.rep-tabs a.on{background:transparent;color:var(--ink);box-shadow:inset 0 -3px 0 var(--leaf)}
.rep-range{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:12px}
.rep-range label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-12);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.rep-range .in{height:44px;width:170px}
.rep-presets{display:flex;gap:4px;flex-wrap:wrap}
.rep-presets .btn,.rep-day .btn.ghost{padding:0 12px;font-weight:600}
.rep-presets .btn.on,.rep-day .btn.ghost.on{background:var(--green-tint);border-color:var(--leaf)}
.rep-sub{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0 16px}
.rep-sub .seg button{height:40px;min-height:40px}
.rep-fresh{margin-bottom:16px}
.rep-day{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.rep-day .in{height:44px;width:170px}
.btn.icon{width:44px;padding:0}
.rep-kpis{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.rep-kpis>div{flex:1 1 120px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:2px}
.rep-kpis b{font-family:var(--serif);font-size:var(--fs-28);color:var(--green);font-weight:400;line-height:1.1;font-variant-numeric:tabular-nums}
.rep-kpis.money b{font-size:var(--fs-24)}
.rep-kpis span{font-size:var(--fs-13);color:var(--muted)}
.rep-kpis .warn b{color:var(--amber)}
.rep-batch{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.rep-panel{overflow:hidden}
.rp-h{padding:16px 20px 0;margin-bottom:8px}
.rep-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.rep-note{margin-top:16px;max-width:900px;line-height:1.5}
.byi-group+.byi-group{border-top:1px solid var(--line);margin-top:8px}
.byi-group .rp-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.byi-totals{margin-top:16px}
.rt.byi{table-layout:fixed}
.rt.byi th:first-child{width:36%}
.rt.byi .tiny{font-weight:400}
.rt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rt{width:100%;border-collapse:collapse;font-size:var(--fs-14)}
.rt th{font-size:var(--fs-12);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;text-align:left;background:var(--sunk);white-space:nowrap;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--soho-paper);white-space:nowrap}
.rt td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums lining-nums}
.rt .r{text-align:right;font-variant-numeric:tabular-nums lining-nums}
.rt th .th-sort{all:unset;cursor:pointer;white-space:nowrap}
.rt th[aria-sort] .th-sort{color:var(--ink)}
.rt th[aria-sort=descending] .th-sort::after{content:' ↓'}
.rt th[aria-sort=ascending] .th-sort::after{content:' ↑'}
.rt tfoot td{background:var(--green-tint);border-bottom:0;font-weight:600;border-top:1.5px solid var(--ink)}
.rt tr.clickable:hover td{background:#FAFAF8}
.rt a{color:var(--green-2);font-weight:600}
.dlist{display:flex;flex-direction:column;gap:16px;max-width:900px}
.dcard{padding:16px 20px}
.dcard-h{display:flex;gap:16px;align-items:flex-start}
.dtime{font-family:var(--serif);font-size:var(--fs-24);color:var(--green);line-height:1.1;min-width:92px;display:flex;flex-direction:column}
.dtime small{font-family:var(--sans);font-size:var(--fs-12);color:var(--muted);margin-top:4px}
.dwho{flex:1;min-width:0}
.dwho b{font-size:var(--fs-16)}
.dnum{width:40px;height:40px;border-radius:50%;background:var(--leaf);color:var(--on-leaf);font-weight:800;display:grid;place-items:center;flex:none;font-size:var(--fs-16)}
.dwhere{display:flex;gap:8px;align-items:flex-start;margin-top:12px;color:var(--ink-2)}
.dwhere svg{flex:none;margin-top:2px}
.dcard .banner{margin-top:12px}
.ditems{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-14)}
.ditems b{display:inline-block;min-width:32px;font-variant-numeric:tabular-nums}
.ditems .kdesc{margin-left:32px;font-size:var(--fs-13);color:var(--muted)}
.dfoot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px;padding-top:12px;border-top:1px dashed var(--line)}
.dfoot .dev{flex:1 1 260px;margin-left:auto}
.dfoot .ev .btn{margin-left:auto}
.dload{margin-top:12px}
.dload summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--green-2)}
.ar-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;margin-bottom:16px}
.ar-strip>div{padding:12px 16px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.ar-strip>div:first-child{border-left:0}
.ar-strip span{font-size:var(--fs-13);color:var(--muted);font-weight:600}
.ar-strip b{font-size:var(--fs-18);font-variant-numeric:tabular-nums}
.ar-strip .late b{color:var(--amber)}
.ar-strip .tot{background:var(--green-tint)}
.ar-strip .tot b{color:var(--green)}
.ar-list{display:flex;flex-direction:column;gap:12px}
.ar-c>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 20px;min-height:56px}
.ar-c>summary::-webkit-details-marker{display:none}
.ar-c>summary::before{content:'›';font-size:var(--fs-24);color:var(--green-2);transition:transform .15s;flex:none;width:14px}
.ar-c[open]>summary::before{transform:rotate(90deg)}
.ar-h{flex:1;min-width:0;display:flex;flex-direction:column}
.ar-t{font-size:var(--fs-16)}
.ar-b{display:flex;gap:8px;flex-wrap:wrap;padding:0 20px 12px}
.ar-chip{font-size:var(--fs-13);padding:4px 12px;border-radius:999px;background:var(--sunk);border:1px solid var(--line)}
.ar-chip.d31_60,.ar-chip.d61_90,.ar-chip.d90{background:var(--amber-tint);border-color:#efd9b4}
.ar-act{display:flex;gap:8px;flex-wrap:wrap;padding:12px 20px 16px}
/* printouts */
.print-run .doc-bar{max-width:820px;margin:0 auto 18px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.print-run .paper{margin-bottom:22px}
.kt{padding:32px 40px}
.kt-brand{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #E6E3DC;font-size:var(--fs-12);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--green-2)}
.kt-brand img{height:36px;width:auto}
.kt-top{display:flex;justify-content:space-between;gap:16px;border-bottom:3px solid var(--soho-dark);padding-bottom:16px}
.kt-no{font-family:var(--serif);font-size:40px;line-height:1;color:var(--soho-dark)}
.kt-cust{font-size:var(--fs-18);font-weight:600;margin-top:8px}
.kt-when{text-align:right;display:flex;flex-direction:column;gap:4px}
.kt-when b{font-size:var(--fs-24)}
.kt-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}
.kt-facts span{display:block;font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.kt-alert{border:2px solid #000;padding:8px 12px;font-weight:800;margin-bottom:12px}
.kt-st{font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:var(--fs-13);margin:16px 0 4px;border-bottom:1px solid #ccc;padding-bottom:4px}
.kt-items{list-style:none;margin:0;padding:0}
.kt-items li{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-bottom:1px solid #eee;font-size:var(--fs-16)}
.kt-items li b{min-width:40px;font-size:var(--fs-24);line-height:1}
.kt-items li span{flex:1}
.kt-items em{display:block;font-size:var(--fs-14);font-style:normal;color:#444;margin-top:2px}
i.box{width:22px;height:22px;border:2px solid #333;border-radius:4px;flex:none;display:inline-block}
.kt-note{margin-top:12px;padding:12px 12px;border:1.5px solid #333;border-radius:6px;font-size:var(--fs-14)}
.kt-sign{display:flex;gap:24px;flex-wrap:wrap;margin-top:24px;font-size:var(--fs-13);color:#333}
.slip-hero{display:flex;justify-content:space-between;gap:16px;padding:24px 40px 8px}
.slip-hero .kind{font-size:var(--fs-12);letter-spacing:.2em;text-transform:uppercase;color:var(--green-2);font-weight:600}
.slip-hero h1{font-size:38px;color:var(--green)}
.slip-when{text-align:right;display:flex;flex-direction:column;gap:2px}
.slip-grid{display:grid;grid-template-columns:1.2fr 1.6fr .6fr;gap:20px;padding:16px 40px;font-size:var(--fs-14)}
.slip-items{width:calc(100% - 80px);margin:8px 40px;border-collapse:collapse}
.slip-items th{font-size:var(--fs-12);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 8px;border-bottom:1px solid #1d2420}
.slip-items td{padding:12px 8px;border-bottom:1px solid #ece6d6;vertical-align:top;font-size:var(--fs-14)}
.slip-items .r{text-align:right;width:48px}
.slip-items .c{text-align:center;width:70px}
.slip .paper-note{margin:16px 40px 0}
.drv-list{padding:8px 32px 24px}
.drv-s{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid #E6E3DC;break-inside:avoid}
.drv-n{width:36px;height:36px;border-radius:50%;background:var(--leaf);color:var(--on-leaf);display:grid;place-items:center;font-weight:600;flex:none;font-variant-numeric:tabular-nums}
.drv-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-14)}
.drv-t{font-size:var(--fs-15)}
.drv-sig{font-size:var(--fs-12);color:#444;line-height:2;white-space:nowrap}
@media (max-width:980px){
  .rep-2{grid-template-columns:1fr}
  .ar-strip{grid-template-columns:repeat(3,1fr)}
  .ar-strip>div:nth-child(4){border-left:0}
  .ar-strip>div:nth-child(n+4){border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .rep .page-head h1{font-size:var(--fs-28)}
  .rep-tools .btn{flex:1}
  .rep-range .in,.rep-day .in{width:calc(50vw - 30px);min-width:0}
  .rep-day .in{flex:1 1 120px}
  .rep-day .btn.ghost{flex:1 1 40%}
  .rep-range>.btn{flex:1}
  .rep-presets{width:100%}
  .rep-presets .btn{flex:1 1 40%}
  .rep-kpis>div{flex:1 1 28%;padding:12px 12px}
  .rep-kpis.money>div{flex:1 1 40%}
  .rep-kpis b{font-size:var(--fs-24)}
  .rep-kpis.money b{font-size:var(--fs-20)}
  .rt thead{display:none}
  .rt,.rt tbody,.rt tfoot,.rt tr,.rt td{display:block;width:100%}
  .rt tr{padding:12px 16px;border-bottom:1px solid var(--line)}
  .rt td{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border:0;text-align:right}
  .rt td::before{content:attr(data-l);color:var(--muted);font-size:var(--fs-13);text-align:left;flex:none;max-width:48%}
  .rt-sortable td:empty{display:none}
  .rt td:first-child{font-size:var(--fs-15);text-align:left;padding-bottom:8px;font-weight:600}
  .rt td:first-child::before{display:none}
  .rt tfoot tr{background:var(--green-tint)}
  .rt.byi tr{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 12px}
  .rt.byi td{display:block;text-align:left;padding:0}
  .rt.byi td:empty{display:none}
  .rt.byi td::before{display:block;max-width:none;font-size:var(--fs-12)}
  .rt.byi td:first-child{grid-column:1/-1;padding-bottom:4px}
  .rt.byi td:first-child::before{display:none}
  .dcard{padding:16px}
  .dtime{min-width:72px;font-size:var(--fs-20)}
  .dfoot>.btn{flex:1 1 40%}
  .dfoot .dev{flex-basis:100%}
  .ar-strip{grid-template-columns:repeat(2,1fr)}
  .ar-strip>div{border-left:0!important;border-top:1px solid var(--line)}
  .ar-strip>div:nth-child(-n+2){border-top:0}
  .ar-strip>div:nth-child(odd){border-right:1px solid var(--line)}
  .ar-c>summary{padding:12px 16px}
  .ar-act .btn{flex:1}
  .print-run{padding:12px 8px 40px}
  .kt,.drv-list{padding:20px 16px}
  .kt-top{flex-direction:column}
  .kt-when{text-align:left}
  .kt-facts{grid-template-columns:repeat(2,1fr)}
  .slip-hero,.slip-grid{padding-left:16px;padding-right:16px}
  .slip-grid{grid-template-columns:1fr}
  .slip-items{width:calc(100% - 32px);margin:8px 16px}
  .slip .paper-note{margin:16px 16px 0}
  .drv-s{flex-wrap:wrap}
  .drv-sig{width:100%;padding-left:48px}
  .repeatgrp{position:fixed;left:0;right:0;bottom:calc(69px + env(safe-area-inset-bottom));z-index:40;display:flex;flex-wrap:nowrap;align-items:center;gap:12px;padding:10px 16px;background:rgb(255 255 255 / 94%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgb(37 33 30 / 30%)}
  .repeatgrp .btn{flex:1 1 auto;height:44px;background:var(--leaf);border-color:var(--leaf);color:var(--on-leaf)}
  .repeatgrp .keepchip{flex:0 0 132px;line-height:1.3;min-height:44px;font-size:var(--fs-13)}
  .modal-foot{border-radius:0;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .modal-foot .btn{flex:1 1 0}
  .modal-head{padding:20px 16px 12px}
  .modal-body{padding:16px 16px 12px}
  .modal.wide{width:100%}
  .rep-tabs{display:none}
  .rep-tabs a{justify-content:center;border-radius:8px;padding:0 8px;font-size:var(--fs-14);white-space:normal;text-align:center;line-height:1.2}
  .rep-tabs a.on{background:var(--surface);box-shadow:0 1px 2px rgb(37 33 30 / 12%), 0 0 0 1px rgb(37 33 30 / 5%)}
  .table:has(thead th:nth-child(4)) thead{display:none}
  .table:has(thead th:nth-child(4)) tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 16px;border-bottom:1px solid var(--line);grid-auto-flow:row dense}
  .table:has(thead th:nth-child(4)) tbody tr:last-child{border-bottom:0}
  .table:has(thead th:nth-child(4)) td{display:block;padding:0;border:0;grid-column:1;min-width:0}
  .table:has(thead th:nth-child(4)) td.r{grid-column:2;align-self:start;text-align:right}
  .states{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .rep-tabs a svg{display:none}
  .table th,.table td{padding-left:8px;padding-right:8px}
  .table th:first-child,.table td:first-child{padding-left:12px}
  .table th:last-child,.table td:last-child{padding-right:12px}
  .wline{gap:8px}
  .wline img,.wline .wimg{width:36px;height:36px}
}
@media print{
  .side,.top,.rep-tabs,.rep-tools,.rep-range,.rep-sub .seg,.rep-day,.rep-batch,.dfoot,.toasts,#toasts,.menu-btn{display:none!important}
  .app{display:block}
  .page{padding:0;max-width:none}
  .rep .page-head{margin-bottom:10px}
  .panel{box-shadow:none}
  .rt th{position:static}
  .ar-c>summary::before{display:none}
  .print-run .doc-bar{display:none}
  .print-run .paper{margin:0;border-radius:0;box-shadow:none;break-after:page;page-break-after:always}
  .print-run .paper:last-child{break-after:auto;page-break-after:auto}
  .kt{padding:10mm 8mm}
}
.btn:focus-visible{outline:2px solid var(--soho-dark);outline-offset:2px;box-shadow:var(--ring)}
@keyframes sheet{from{transform:translateY(32px);opacity:0}to{transform:none;opacity:1}}

/* ---------- Zoho history (read-only) ---------- */
.ctabs-wrap{align-items:start}
.c-main{display:flex;flex-direction:column;gap:24px;min-width:0}
.c-side{display:flex;flex-direction:column;gap:16px;min-width:0;container-type:inline-size}
.ctab{display:flex;flex-direction:column;gap:24px;min-width:0}
.ctabs{display:flex;flex-wrap:wrap;max-width:100%;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.ctabs button{flex:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;scroll-snap-align:start}
.tcount{font-size:var(--fs-12);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.tcount:empty{display:none}
.ctabs button.on .tcount{color:var(--ink-2)}
.zh-block{margin-top:24px}
.section.zh-block{margin-top:0}
.zh-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.zh-head .eyebrow{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zh-count{text-transform:none;letter-spacing:0;font-weight:400}
.zh-q{max-width:260px;flex:1 1 200px}




.zh-more{display:flex;justify-content:center;padding:12px 0 4px}
.zh-empty{padding:8px 0 4px}

.zh-t tbody tr[data-href]{cursor:pointer}
tr[data-href]{cursor:pointer}
tr[data-href]:hover td{background:var(--hover)}
.zrow .o-num .src{margin-left:6px}








.zh-code{display:block;margin-top:6px;padding:8px 10px;background:var(--sunk-2);border-radius:8px;font-size:var(--fs-12);word-break:break-all}
.pay-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0 0 16px}
.pay-filters select.in{width:auto;min-width:160px}
.pay-filters .psearch{flex:1 1 220px;max-width:340px}
@media (max-width:640px){
  .cols-main.ctabs-wrap:not([data-ctab="overview"]) .c-side{display:none}
  .ctabs{width:100%;flex-wrap:nowrap;overflow-x:auto}
  .ctabs button{padding:0 12px}
  .zh-q{max-width:none;flex-basis:100%}
  
  
  
  .pay-filters .seg{width:100%;display:flex}
  .pay-filters .seg button{flex:1;padding:0 6px}
  .pay-filters select.in,.pay-filters .psearch{width:100%;max-width:none;flex:1 1 100%}
  .ofilters #dsrc{display:none}
  #dsrcSel{display:block;width:100%}
  
  
}
@media print{
  .no-print{display:none!important}
}

/* builder assist: history card + address / contact pickers */
.bx-panel .section{padding:16px 24px 24px}
.ed-top .bx-row:last-child{border-bottom:0;padding-bottom:0}
.bx-hist>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center}
.bx-hist>summary::-webkit-details-marker{display:none}
.bx-top{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.bx-panel .fl{margin-bottom:6px}
.bx-name{font-size:16px;font-weight:600;color:var(--ink);line-height:22px}
.bx-sub{font-size:var(--fs-13);color:var(--muted);margin-top:2px}
.bx-m b{color:var(--ink)}
.bx-owe,.bx-owe b{color:#B42318}
.bx-tog svg{transition:transform var(--t) var(--ease);color:var(--muted)}
.bx-hist[open] .bx-tog svg{transform:rotate(90deg)}
.bx-rows{margin-top:10px;border-top:1px solid var(--line)}
.bx-row{display:grid;grid-template-columns:minmax(0,1.4fr) auto 110px auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);min-height:52px}
.bx-doc{display:flex;flex-direction:column;min-width:0}
.bx-doc b{font-size:var(--fs-14)}
.bx-tot{text-align:right;font-weight:600;font-variant-numeric:tabular-nums lining-nums}
.bx-row .btn{min-height:44px}
.bx-pick{display:flex;flex-direction:column;gap:8px}
.bx-pick-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bx-pick-h .btn,.bx-inline .btn{min-height:44px}
.bx-sel{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface)}
.bx-sel .t{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.bx-sel .s,.bx-opt .s{display:block;font-size:var(--fs-13);color:var(--muted);margin-top:2px}
.bx-inline{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.bx-opts{display:flex;flex-direction:column;gap:8px}
.bx-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface);min-height:52px;cursor:pointer;font:inherit;color:var(--ink);transition:background var(--t) var(--ease),border-color var(--t) var(--ease)}
.bx-opt:hover{background:#FAFAF8}
.bx-opt.on{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.bx-opt .t{display:block;font-weight:600;overflow-wrap:anywhere}
.bx-opt svg{color:var(--green-2);flex:none}
@media (max-width:640px){
  .bx-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"doc tot" "st use"}
  .bx-doc{grid-area:doc}.bx-tot{grid-area:tot}.bx-st{grid-area:st}.bx-row .btn{grid-area:use}
}

.line .lh{margin-top:2px}
.line .lh .linkbtn{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-12);color:var(--green-2);background:none;border:0;padding:4px 0;min-height:36px;cursor:pointer;text-align:left}
@media (max-width:980px){.line .lh .linkbtn{min-height:44px}} /* QA Nov 10: tablet too */
.line .lh .linkbtn:hover{text-decoration:underline}

.rc-tools{display:flex;gap:8px;flex-wrap:wrap;width:100%;margin-top:4px}

.pcard .btn.on,.vchip.on{border-color:var(--green);color:var(--green-2)}
.pcard .cnt,.vchip .cnt{font-weight:600}

.files{display:flex;flex-direction:column;gap:6px}
.files .file{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:6px 8px 6px 12px;background:var(--surface)}
.files .file a{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:var(--ink);text-decoration:none;min-height:40px}
.files .file a .grow{display:flex;flex-direction:column;min-width:0}
.files .file b{overflow-wrap:anywhere;font-size:var(--fs-14)}

/* change log */
.cl-list{display:flex;flex-direction:column}
.cl-row{padding:10px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-width:0}
.cl-row:last-child{border-bottom:0}
.cl-what{font-size:var(--fs-14);color:var(--ink)}
.cl-val{font-size:var(--fs-13);overflow-wrap:anywhere}
.cl-old{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25)}
.cl-new{color:var(--ink);font-weight:600}
.cl-list a.cl-link,.cl-list a.cl-link:hover{display:block;color:inherit;text-decoration:none;border-radius:8px}
.cl-fd>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;list-style:none}
.cl-fd>summary::-webkit-details-marker{display:none}
.cl-link:hover{background:#FAFAF8}
.cl-filters{margin-bottom:20px}
.pager{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

/* Customer Accept on the quote link (Oct 26) */
.accept-box{max-width:860px;margin:16px auto 32px;background:#fff;border:2px solid var(--leaf);border-radius:16px;padding:20px 22px;box-shadow:0 2px 10px rgb(0 0 0 / 6%)}
.accept-box h2{font-size:var(--fs-24);margin:0 0 6px}
.accept-box .f{display:block;margin-bottom:10px}
.accept-box .in{min-height:44px;font-size:16px}
.ab-agree{display:flex;gap:10px;align-items:flex-start;min-height:44px;padding:10px 0;font-size:var(--fs-14);color:var(--ink);cursor:pointer}
.ab-agree input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--soho-green)}
.ab-err{color:var(--red);font-size:var(--fs-13);min-height:18px;margin:2px 0 8px}
.ab-go{width:100%;min-height:52px;font-size:var(--fs-16);justify-content:center}
.ab-edit{margin-top:10px;text-decoration:none}
.ab-edit-note{margin:8px 0 0;text-align:center}
/* Edit your quote (p12 simple): the white screen shown ~1.8 s before the website opens, style "Orbit" (Soho picked it Nov 3 2026, 12:13 PM). A green comet runs round the logo on its own
   (speeding up, then a steady fast spin) while it shows; `.done` on .eq-load is the finish: the ring closes, the logo fills green
   and pulses once, the words turn into a green tick + "Your cart is ready". Reduced motion: a still ring and logo, the finish as a plain swap. */
.eq-load{position:fixed;inset:0;z-index:1000;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;padding:24px;-webkit-font-smoothing:antialiased}
.eq-orb{position:relative;width:min(74vw,330px);aspect-ratio:1;display:grid;place-items:center}
.eq-orb>*{grid-area:1/1}
.eq-ring,.eq-spin,.eq-spin2,.eq-comet,.eq-ripple{position:absolute;inset:0}
.eq-ring{width:100%;height:100%;overflow:visible}
.eq-track{stroke:#ECEDE8}
.eq-full{stroke:var(--soho-green);stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.eq-spin{animation:eqUp 1.1s cubic-bezier(.4,.15,1,1) both}
.eq-spin2{animation:eqRun .5s linear 1.1s infinite}
.eq-comet{border-radius:50%;background:conic-gradient(from 0deg,rgba(136,183,54,0) 0deg,rgba(136,183,54,0) 200deg,rgba(136,183,54,.7) 300deg,var(--soho-green) 345deg,var(--soho-green) 358deg,rgba(136,183,54,0) 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4.5px));animation:eqIn .35s ease-out both}
.eq-head{position:absolute;left:50%;top:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--soho-green);box-shadow:0 0 8px 1px rgba(136,183,54,.55);animation:eqIn .35s ease-out both}
.eq-ripple{border-radius:50%;box-shadow:0 0 0 3px var(--soho-green);opacity:0}
.eq-logo{position:relative;width:66%;aspect-ratio:930/522}
.eq-logo i{position:absolute;inset:0;background:var(--soho-ink);-webkit-mask:url(/brand/soho-logo.svg) center/contain no-repeat;mask:url(/brand/soho-logo.svg) center/contain no-repeat}
.eq-logo i+i{background:var(--soho-green);clip-path:inset(-4% 100% -4% -4%)}
.eq-t{display:grid;margin:0;font-size:16px;line-height:24px;font-weight:500;color:var(--soho-ink);letter-spacing:-.01em}
.eq-t>span{grid-area:1/1;justify-self:center;position:relative;white-space:nowrap}
.eq-dots{position:absolute;left:100%;top:0}
.eq-dots i{font-style:normal;animation:eqDot 1.05s infinite both}
.eq-dots i:nth-child(2){animation-delay:.175s}.eq-dots i:nth-child(3){animation-delay:.35s}
.eq-t .eq-ok{opacity:0;display:inline-flex;align-items:center;gap:7px}
.eq-ok svg{width:18px;height:18px}
.eq-ok path{stroke-dasharray:1;stroke-dashoffset:1}
.eq-load.done .eq-comet,.eq-load.done .eq-head{animation:eqHide .18s ease-out forwards}
.eq-load.done .eq-full{animation:eqRing .36s cubic-bezier(.3,0,.2,1) forwards}
.eq-load.done .eq-logo{animation:eqPulse .5s cubic-bezier(.3,0,.2,1) .26s both}
.eq-load.done .eq-logo i+i{animation:eqWipe .3s cubic-bezier(.4,0,.2,1) .18s forwards}
.eq-load.done .eq-ripple{animation:eqRipple .42s cubic-bezier(.2,.6,.3,1) .26s forwards}
.eq-load.done .eq-wait{animation:eqTextOut .18s cubic-bezier(.4,0,1,1) forwards}
/* the website never opened (a6 editQuoteGo, EQ_GONE_MS): the plain link and the phone on the same white screen */
.eq-fail{width:min(100%,340px);display:flex;flex-direction:column;align-items:stretch;gap:12px;text-align:center}
.eq-fail h2{margin:0;font-size:20px;line-height:28px;font-weight:600;color:var(--soho-ink)}
.eq-fail p{margin:0 0 8px;font-size:16px;line-height:22px;color:var(--muted)}
.eq-fail .btn{justify-content:center}
/* the website order made from a quote, on the staff record (a6 webOrderNote) */
.banner.web-order{margin:0 0 var(--s-3)}
.eq-load.done .eq-ok{animation:eqTextIn .3s cubic-bezier(.2,.8,.2,1) .16s forwards}
.eq-load.done .eq-ok path{animation:eqTick .3s cubic-bezier(.3,0,.2,1) .3s forwards}
@keyframes eqIn{from{opacity:0}}
@keyframes eqUp{from{transform:rotate(-90deg)}to{transform:rotate(464deg)}}
@keyframes eqRun{to{transform:rotate(360deg)}}
@keyframes eqDot{0%,100%{opacity:.15}35%{opacity:1}}
@keyframes eqHide{to{opacity:0}}
@keyframes eqRing{from{opacity:1;stroke-dashoffset:1}to{opacity:1;stroke-dashoffset:0}}
@keyframes eqPulse{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}
@keyframes eqWipe{to{clip-path:inset(-4% -4% -4% -4%)}}
@keyframes eqRipple{0%{opacity:.4;transform:scale(.99)}100%{opacity:0;transform:scale(1.22)}}
@keyframes eqTextOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes eqTextIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes eqTick{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){ /* the app's one rule above stops every animation: a still ring and logo, the finish as a plain swap */
  .eq-comet,.eq-head{display:none}
  .eq-dots i{opacity:1}
  .eq-full{stroke-dashoffset:0;opacity:.35}
  .eq-ok path{stroke-dashoffset:0}
  .eq-logo i+i{clip-path:none;opacity:0}
  .eq-load.done .eq-full,.eq-load.done .eq-logo i+i,.eq-load.done .eq-ok{opacity:1}
  .eq-load.done .eq-wait{opacity:0}
}
.accept-box.done{display:flex;gap:14px;align-items:flex-start;border-color:var(--green-tint-2);background:var(--green-tint)}
.accept-box.done .ab-ic{width:40px;height:40px;border-radius:50%;background:var(--soho-green);color:var(--soho-ink);display:grid;place-items:center;flex:none}
.accept-box.done p{margin:0;color:var(--ink)}
@media (max-width:640px){.accept-box{margin:12px 10px 24px;padding:16px}}
.paper-cta .accept-box{margin:0;width:100%;max-width:none;box-shadow:none}

/* Card payments in the app (p28): the customer's own card page, #/pay/<token>. Phone first (390), one column; desktop centers it at 560. */
.cpay-page{max-width:560px;margin:0 auto;padding:16px 14px 40px}
.cpay-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 2px 14px;border-bottom:1px solid var(--line)}
.cpay-no{font-weight:600;color:var(--soho-dark);font-size:var(--fs-16)}
.cpay-sum{padding:14px 2px 4px}
.cpay-cust{font-size:var(--fs-20);font-weight:700;color:var(--soho-ink);margin-bottom:8px}
.cpay-facts{margin:0 0 10px;display:grid;gap:6px}
.cpay-facts div{display:grid;grid-template-columns:110px 1fr;gap:10px}
.cpay-facts dt{color:var(--soho-muted);font-size:var(--fs-14)}
.cpay-facts dd{margin:0;font-size:var(--fs-15, 15px)}
.cpay-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:var(--fs-15, 15px)}
.cpay-sub{color:var(--soho-muted);font-size:var(--fs-14)}
.cpay-total{font-size:var(--fs-20);border-top:2px solid var(--soho-dark);padding-top:10px}
.cpay-total b{color:var(--soho-dark)}
.cpay-page .accept-box{margin:16px 0}
.cpay-test{margin:0 0 10px;padding:6px 10px;border-radius:8px;background:#FFF4D6;border:1px solid #E6C766;font-size:var(--fs-13);font-weight:600}
.cpay-secure{display:flex;gap:6px;align-items:flex-start;margin:12px 0 0}
.cpay-secure svg,.cpay-back svg{flex:none;width:14px;height:14px;margin-top:2px}
.cpay-back{display:inline-flex;gap:6px;align-items:center;margin:4px 2px}
.cpay-mail{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 12px}
.cpay-mail .f{flex:1 1 100%}
.cpay-mail .f[hidden]{display:none}
.cpay-agree{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-15, 15px);cursor:pointer;margin:2px 0 6px}
.cpay-agree input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--soho-dark)}
.cpay-terms{margin:0 0 12px 30px;font-size:var(--fs-14)}
.cpay-terms summary{cursor:pointer;color:var(--soho-dark);text-decoration:underline;text-underline-offset:2px}
.cpay-terms-text{white-space:pre-line;margin-top:8px;max-height:280px;overflow:auto;padding:10px 12px;border:1px solid var(--line);border-radius:8px;line-height:1.45}
.cpay-card .ab-go:disabled{opacity:.5;cursor:not-allowed}
.cpay-foot{display:grid;gap:2px;text-align:center;margin-top:22px;padding-top:12px;border-top:1px solid var(--line);line-height:1.5}
.cpay-paid{margin-top:12px}
.cpay-off{border-color:var(--line-2)}
@media print{.accept-box{display:none}}

/* Compact quote event card (phone): the full inputs stay in their sections, folded until Edit. */
.event-card{display:flex;align-items:flex-start;gap:12px;width:100%;padding:16px 24px 24px;text-align:left;cursor:pointer;font:inherit;color:var(--ink);background:transparent;border:0;border-radius:0;transition:background var(--t) var(--ease)}
.event-card:hover{background:var(--hover)}
.side-toggle{display:none}
@media(max-width:640px){
 #editor:has(.event-card):not(.ev-open) .ph-fold{display:none}
 .event-card .ev-sub{display:block;width:100%;margin-top:2px;font-size:12px;color:#4a5440}
 #editor:has(.event-card):not(.side-open) #sidePanels{display:none}
 .side-toggle{display:flex!important;width:100%;min-height:44px;justify-content:center}
 .event-card{min-height:72px;padding:14px 16px;background:var(--green-tint);box-shadow:inset 0 0 0 1px var(--green-tint-2)}
 .event-card #evSummary{flex:1;min-width:0;font-size:14px;line-height:1.4}
 #eventDetails{scroll-margin-top:80px}
 
 #totals .in,#totals select.in,#discReason{height:44px!important;min-height:44px;font-size:16px!important}
 #totals .vchip{min-height:44px;padding:0 12px}
}

/* Keyboard shortcuts sheet */
.kbd-list{margin:0;display:flex;flex-direction:column;gap:2px}
.kbd-row{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center;min-height:44px;padding:6px 0;border-bottom:1px solid var(--line)}
.kbd-row:last-child{border-bottom:0}
.kbd-row dt{display:flex;gap:4px;flex-wrap:wrap}
.kbd-row dd{margin:0;font-size:14px;color:#2b2b2b}
@media(max-width:640px){.kbd-row{grid-template-columns:1fr;gap:4px}}
.mobilebar #mbAct{margin-left:auto}

/* Desktop: use the width (Soho, Oct 26 2:53 PM; Oct 30 10:01 AM "the app doesn't cover the full screen"). One page width rule: no cap, every page fills the space beside the sidebar on any monitor; the editor splits its sections in two columns on wide screens. */
@media(min-width:1100px){
 .page{max-width:none}
 #editor:not(.side-open) #sidePanels{display:none}
 .side-toggle{display:flex!important;width:100%;min-height:44px;justify-content:center}
}
/* the editor (A2): the form on the left, the photo food picker as a side panel on the right (432px) — ONE picker for quotes and invoices */
.ed2{display:grid;grid-template-columns:minmax(0,1fr) 432px;gap:24px;align-items:start}
.ed2.ro{grid-template-columns:minmax(0,1fr)}
.ed-main{display:flex;flex-direction:column;gap:12px;min-width:0}
/* Details (A2 zone 2): ONE section, customer | delivery split by a hairline, labels like every other field */
.ed-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;align-items:stretch;margin:0;overflow:hidden}
.ed-top-h{grid-column:1/-1;display:flex;align-items:center;min-height:24px;padding:24px 24px 0}
.ed-top-h h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
.ed-top > .bx-panel{min-width:0}
.ed-top > .event-card{border-left:1px solid var(--line)}
.ed-sum{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
/* tab-css (Nov 1): from tablet width up the editor header stays pinned with the one green next-step button (it vanished at 769–1099: no bottom bar, no pinned header).
   Its rows never wrap, so its height stays within 169px and the side catalog sits below it instead of sliding beneath it. */
@media(max-width:768px){.hd-act{display:none}}
@media(min-width:769px){
 .ed-head{position:sticky;top:64px;z-index:30;background:var(--bg)}
 .ed-head .ed-title,.ed-head .ed-hr{flex-wrap:nowrap}
 .ed-head .savestate{min-width:0;overflow:hidden}
 .ed-head .savestate span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .ed2 .pk.ip{top:calc(64px + 169px + 12px);max-height:calc(100vh - 64px - 169px - 28px)} /* 169px = the pinned header at its tallest (measured 769–1920 on quotes and invoices) */
}
@media(min-width:769px) and (max-width:980px){.ed-head{top:60px}}

/* ===== Design cleanup (Oct 26 2026, pass 1): one "More" menu, quiet items bar ===== */
details.dd{position:relative;display:inline-block}
details.dd>summary{list-style:none;cursor:pointer}
details.dd>summary::-webkit-details-marker{display:none}
.dd-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:232px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(37,33,30,.14);padding:6px;display:flex;flex-direction:column}
.dd-item{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:0;background:none;border-radius:8px;font:inherit;font-size:var(--fs-14);color:var(--ink);text-align:left;cursor:pointer;width:100%}
.dd-item:hover,.dd-item:focus-visible{background:var(--hover)}
.dd-item svg{width:18px;height:18px;flex:none;color:var(--muted)}
.items-foot{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.adj-more{margin-top:2px}
@media (max-width:700px){.dd-pop{position:fixed;left:12px;right:12px;top:auto;bottom:84px;min-width:0}}

.updated{font-size:var(--fs-12);color:var(--muted);margin:-8px 0 16px}
.admin-head{margin-bottom:12px}
.admin-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 24px;overflow-x:auto}
.admin-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;color:var(--muted);font-weight:600;font-size:var(--fs-14);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.admin-tabs a:hover{color:var(--ink)}
.admin-tabs a.on{color:var(--ink);border-bottom-color:var(--leaf)}
.log-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.log-seg{margin-bottom:16px}
.log-bar .log-seg{margin-bottom:0}
.log-seg a{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:7px;color:var(--ink-2);font-weight:600;font-size:var(--fs-14);text-decoration:none}
.log-seg a.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgb(37 33 30 / 12%), 0 0 0 1px rgb(37 33 30 / 5%)}
.c-details{margin-top:6px}
.c-details>summary{cursor:pointer;color:var(--muted);font-size:var(--fs-13);font-weight:600;min-height:32px;display:inline-flex;align-items:center}
.c-details .c-meta{margin-top:4px}
/* one green next-step button: the pinned header (769px and up) and the bottom bar (768px and down) carry it, so the Next step card and the record's ⋯ menu keep only the other steps (tab-css Nov 1: 641–768 showed it twice) */
#actions .btn.primary{display:none}

.metrics.metrics-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.day-rows{display:flex;flex-direction:column}
.day-row{display:grid;grid-template-columns:80px 36px minmax(0,1fr) auto;gap:14px;align-items:center;min-height:52px;padding:8px 4px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.day-row:first-child{border-top:0}
.day-row:hover{background:#FAFAF8;text-decoration:none}
.day-time{font-weight:600;font-size:var(--fs-15);font-variant-numeric:tabular-nums}
.day-main{display:flex;flex-direction:column;min-width:0}
.day-main b{font-size:var(--fs-15);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.day-main .s{font-size:var(--fs-13);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.metrics.metrics-3{grid-template-columns:repeat(3,minmax(0,1fr))}.metrics.metrics-3 .d{display:none}.metrics.metrics-3 .metric:last-child:nth-child(odd){grid-column:auto}.day-row{grid-template-columns:64px 36px minmax(0,1fr)}.day-mode{display:none}}
.o-cust-sm{display:none}
@media (max-width:640px){.o-cust-sm{display:block;flex-basis:100%;font-weight:600;font-size:var(--fs-14);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

/* Reports: dates and filters in one row on desktop, one button on a phone; one Report menu on a phone */
.rep-fd{margin-bottom:16px}
.rep-fd>summary{list-style:none;display:none}
.rep-fd>summary::-webkit-details-marker{display:none}
.rep-fbody{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.rep-fbody .rep-range,.rep-fbody .pay-filters{margin:0}
.rep-fbody .rep-presets{width:auto}
.rep-pick{display:none}
.pay-tabs{margin-top:-8px}
.rep-byday{align-self:start}
.rep-byday>summary{list-style:none;cursor:pointer;min-height:44px}
.rep-byday>summary::-webkit-details-marker{display:none}
@media (max-width:640px){
  .rep-fd>summary{display:inline-flex}
  .rep-fd[open]>summary{margin-bottom:12px}
  .rep-fbody{flex-direction:column;align-items:stretch}
  .rep-pick{display:block;margin:-8px 0 16px}
  .rep-pick select{width:100%}
}

/* ===== Premium layout (Oct 26 2026): phone tab bar, profile menu, View as, homes, one search, one customer card ===== */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:rgb(255 255 255 / 96%);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);border-top:1px solid var(--line)}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:56px;padding-top:4px;font-size:var(--fs-12);font-weight:600;color:var(--muted);text-decoration:none;-webkit-tap-highlight-color:transparent}
.tabbar a:hover{text-decoration:none}
.tabbar .pill-ic{display:grid;place-items:center;width:min(60px,100%);height:32px;border-radius:var(--r-pill);transition:background var(--t) var(--ease)}
.tabbar svg{width:20px;height:20px}
.tabbar a.on{color:var(--green)}
.tabbar a.on .pill-ic{background:var(--leaf);color:var(--on-leaf)}
.viewas{display:flex;align-items:center;gap:12px;padding:10px 32px;background:var(--amber-tint);color:var(--amber);font-size:var(--fs-14);border-bottom:1px solid rgb(138 82 14 / 14%)}
.viewas svg{width:18px;height:18px;flex:none}
.viewas .btn{margin-left:auto}
.pm-scrim{position:fixed;inset:0;z-index:80}
.pmenu{position:fixed;z-index:81;width:320px;max-height:calc(100vh - 24px);overflow:auto;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);animation:fade .14s var(--ease)}
.pm-head{display:flex;align-items:center;gap:12px;padding:10px 10px 14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.pm-sec{padding:10px 10px 6px;font-size:var(--fs-12);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pm-it{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:8px 10px;border:0;border-radius:10px;background:none;color:var(--ink);text-align:left;cursor:pointer;text-decoration:none}
.pm-it:hover{background:var(--hover);text-decoration:none}
.pm-it > svg{width:18px;height:18px;color:var(--muted);flex:none}
.pm-it span:not(.kbd){display:flex;flex-direction:column;min-width:0}
.pm-it small{font-size:var(--fs-13);color:var(--muted);font-weight:400}
.pm-it .kbd{margin-left:auto}
.pm-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:0 10px 8px;padding:4px;border-radius:10px;background:var(--sunk)}
.pm-seg button{min-height:40px;border:0;border-radius:8px;background:none;font-weight:600;font-size:var(--fs-14);cursor:pointer;color:var(--ink-2)}
.pm-seg button.on{background:var(--surface);box-shadow:var(--shadow-xs);color:var(--green)}
.pm-sep{height:1px;background:var(--line);margin:6px 0}
.home-head{margin-bottom:24px}
.home-head h1{margin-top:6px}
.home-head .sub{color:var(--muted);margin-top:4px}
.bigsearch{display:flex;align-items:center;gap:14px;height:64px;padding:0 20px;background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--r);box-shadow:0 1px 2px rgb(37 33 30 / 4%), 0 8px 24px -12px rgb(37 33 30 / 12%);transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.bigsearch:focus-within,.bigsearch.on{border-color:var(--leaf);box-shadow:0 0 0 4px rgb(136 183 54 / 18%), 0 8px 24px -12px rgb(37 33 30 / 12%)}
.bigsearch > svg{width:22px;height:22px;color:var(--muted);flex:none}
.bigsearch input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font-size:16px}
.hres:empty{display:none}
.app.on-home .search-trigger{visibility:hidden}
.card-hd .link,.li-row .link{white-space:nowrap}
.hres{margin-top:16px;display:flex;flex-direction:column;gap:16px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:24px 0}
.tile{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 20px 16px;background:var(--surface);border-radius:var(--r);box-shadow:0 1px 2px rgb(37 33 30 / 4%), 0 6px 20px -8px rgb(37 33 30 / 10%);color:var(--ink);text-decoration:none;transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease)}
.tile:hover{text-decoration:none;box-shadow:0 2px 4px rgb(37 33 30 / 6%), 0 12px 28px -10px rgb(37 33 30 / 18%);transform:translateY(-1px)}
.tile-top{display:flex;align-items:center;gap:10px;font-size:var(--fs-13);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tile .ib{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--sunk);color:var(--ink)}
.tile .ib svg{width:16px;height:16px}
.tile .big{font-family:var(--serif);font-size:28px;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums}
.tile .sub{font-size:var(--fs-14);color:var(--muted)}
.tile .go{position:absolute;right:16px;top:20px;color:var(--muted)}
.tile .go svg{width:16px;height:16px}
.tile.alert .ib{background:var(--red-tint);color:var(--red)}
.card{background:var(--surface);border-radius:var(--r);box-shadow:0 1px 2px rgb(37 33 30 / 4%), 0 6px 20px -8px rgb(37 33 30 / 10%);overflow:hidden}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--sunk-2)}
.card-hd h2{font-size:var(--fs-20)}
.card .empty{padding:32px 20px}
.count-pill{min-width:26px;padding:0 9px;border-radius:var(--r-pill);background:var(--sunk);font-size:var(--fs-13);font-weight:600;line-height:24px;text-align:center;color:var(--ink-2)}
.home-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start}
.home-cols.sales{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);margin-top:24px}
.home-side{display:flex;flex-direction:column;gap:24px;min-width:0}
.home .day-rows{padding:0 8px}
.li-rows{display:flex;flex-direction:column}
.li-row{display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 20px;border-top:1px solid var(--sunk-2);color:var(--ink);text-decoration:none}
.li-row:first-child{border-top:0}
.li-row:hover{background:#FAFAF8;text-decoration:none}
.li-row .grow{display:flex;flex-direction:column;min-width:0;flex:1}
.li-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-row .s{font-size:var(--fs-13);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-row .s2{font-size:var(--fs-14);line-height:1.35}
.li-row .b{font-weight:600}
.li-row > svg{width:16px;height:16px;color:var(--muted);flex:none}
.tag-chip,.li-row .tag{flex:none;display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:var(--fs-12);font-weight:600;white-space:nowrap;background:var(--neutral-tint);color:var(--ink-2)}
.li-row .tag.green{background:var(--green-tint-2);color:var(--green-3)}
.li-row .tag.blue{background:var(--blue-tint);color:var(--blue)}
.li-row .tag.amber{background:var(--amber-tint);color:var(--amber)}
.li-row .link{display:inline-flex;gap:4px;font-weight:600;font-size:var(--fs-14);color:var(--green-2);flex:none}
.li-row .link svg{width:14px;height:14px}
.card-hd .link{display:inline-flex;gap:4px;font-weight:600;font-size:var(--fs-14);color:var(--green-2);padding:6px 8px;border-radius:8px}
.card-hd .link svg{width:14px;height:14px}
.ccard{padding:20px;background:var(--surface);border-radius:var(--r);box-shadow:0 1px 2px rgb(37 33 30 / 4%), 0 10px 28px -12px rgb(37 33 30 / 18%);border:1px solid var(--green-tint-2)}
.cc-head{display:flex;align-items:center;gap:14px}
.avatar.lg{width:48px;height:48px;font-size:var(--fs-15)}
.cc-name{font-family:var(--serif);font-size:var(--fs-24);color:var(--ink);line-height:1.15}
.cc-facts{display:flex;gap:32px;flex-wrap:wrap;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--sunk-2)}
.cc-fact{display:flex;flex-direction:column;gap:2px;min-width:0}
.cc-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.sr-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.sr-grp{display:flex;flex-direction:column;padding:12px 8px;background:var(--surface);border-radius:var(--r);box-shadow:0 1px 2px rgb(37 33 30 / 4%), 0 6px 20px -8px rgb(37 33 30 / 10%)}
.sr-grp .eyebrow{padding:4px 12px 8px}
.sr-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border-radius:10px;color:var(--ink);text-decoration:none}
.sr-row:hover{background:var(--hover);text-decoration:none}
.sr-row .grow{display:flex;flex-direction:column;min-width:0;flex:1}
.sr-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-sub{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-row > svg{width:16px;height:16px;color:var(--muted);flex:none}
.sr-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--sunk);flex:none}
.sr-ic svg{width:16px;height:16px;color:var(--ink-2)}
.sr-img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none;background:var(--sunk)}
.sr-empty{display:flex;align-items:center;gap:16px;padding:20px;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow)}
.sr-empty > svg{width:22px;height:22px;color:var(--muted);flex:none}
.sr-empty .btn{margin-left:auto}
@media (max-width:1180px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-cols,.home-cols.sales{grid-template-columns:1fr}
}
@media (max-width:980px){
  .tabbar{display:grid}
  .app.no-tabbar .tabbar{display:none}
  .top-actions #newBtn span{display:none}
  .viewas{padding:10px 16px}
  .pmenu{left:0!important;right:0;bottom:0!important;top:auto!important;width:auto;border-radius:20px 20px 0 0;padding-bottom:calc(12px + env(safe-area-inset-bottom));animation:sheet .22s var(--ease)}
  .pm-scrim{background:rgb(37 33 30 / 30%)}
}
@media (max-width:640px){
  .bigsearch{height:54px;padding:0 16px;gap:10px}
  .bigsearch input{font-size:16px}
  .tiles{gap:10px;margin:16px 0}
  .tile{padding:12px 14px;min-height:104px}
  .tile-top{font-size:12px;gap:7px}
  .tile .ib{display:none}
  .tile .big{font-size:24px;margin-top:4px}
  .tile .sub{font-size:var(--fs-13);line-height:1.3}
  .tile .go{display:none}
  .home-cols{gap:16px}
  .home-side{gap:16px}
  .card-hd{padding:14px 16px}
  .li-row{padding:10px 14px;gap:12px}
  .ccard{padding:16px}
  .cc-act .btn{flex:1 1 auto}
  .cc-name{font-size:var(--fs-20)}
}

/* ===== Quote = invoice editor (premium layout): step bar, right column (customer, delivery, total + one green step), item picker, item tiles ===== */
/* quiet step bar: small numbered dots on one hairline, green check when done, the current step in ink */
.steps{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;flex-wrap:wrap;row-gap:6px}
#edBanners:empty{margin-bottom:0!important}
.steps li{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--muted);line-height:20px}
.steps li + li::before{content:"";width:24px;height:1px;margin:0 10px;background:var(--line-in)}
.steps li.done + li::before{background:var(--leaf)}
.steps .dot{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--line-in);background:#fff;color:var(--muted);font-size:12px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.steps .dot svg{width:11px;height:11px;stroke-width:3}
.steps li.done{color:var(--ink-2)}
.steps li.done .dot{border-color:var(--leaf);background:var(--leaf);color:var(--on-leaf)}
.steps li.on{color:var(--ink);font-weight:600}
.steps li.on .dot{border:1.5px solid var(--ink);background:#fff;color:var(--ink);box-shadow:0 0 0 3px var(--sunk-2)}
.steps li.skip{opacity:.45}
.steps li.skip .dot{border-style:dashed}
.steps.off li.on .dot{border-color:var(--red);background:var(--red-tint);color:var(--red)}
/* the delivery half of Details: label row, date, one summary line, address — Edit on the right */
.ed-deliv > svg{display:none}
.ed-deliv .grow{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.event-card-title{display:flex;align-items:center;gap:8px;margin-bottom:6px;white-space:nowrap}
.ev-same{font-size:12px;font-weight:500;color:var(--green-2)}
.ed-deliv #evDate{font-size:16px;font-weight:600;color:var(--ink);line-height:22px}
.ed-deliv .ev-sum{display:block;font-size:13px;color:var(--ink-2);line-height:20px}
.ed-deliv .ev-sub{display:block;font-size:13px;color:var(--muted)}
.event-card-edit{display:inline-flex;gap:4px;align-items:center;font-weight:600;font-size:13px;color:var(--green-2);white-space:nowrap;margin-top:22px}
.event-card-edit svg{width:14px;height:14px}
.ed-top .bx-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"doc tot" "st use";gap:4px 12px;padding:12px 0;min-height:0}
.ed-top .bx-row .bx-doc{grid-area:doc}
.ed-top .bx-row .bx-st{grid-area:st}
.ed-top .bx-row .bx-tot{grid-area:tot;text-align:right}
.ed-top .bx-row .btn{grid-area:use;min-height:32px;height:32px;justify-self:end}
.ed-top .bx-st .pill{height:20px;padding:0 7px;gap:5px;font-size:12px}
.pk{position:sticky;top:76px;max-height:calc(100vh - 92px);display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid #E9E8E3;border-radius:12px;padding:0}
.ip-top{flex:none;padding:20px 20px 0;border-bottom:1px solid var(--line-soft,#F0EFEB);background:#fff}
.ip-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 20px 24px}
.ip-grab,.ip-done,.ip-scrim,.ip-open{display:none}
.ip-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.ip-head h3{font-size:16px;font-weight:600}
.pk .psearch{position:relative;margin:0}
.ip-sub{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;flex-wrap:wrap}
.ip-usual{display:grid;grid-auto-flow:column;grid-auto-columns:180px;gap:12px;overflow-x:auto;padding:2px 2px 8px;margin-bottom:16px;scroll-snap-type:x proximity}
.ip-usual .itile{scroll-snap-align:start}
.ip-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:16px 0 16px}
.ip-tabs button{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:500;font-size:13px;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.ip-tabs button span{font-size:12px;color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.ip-tabs button.on{background:#F5F9EC;border-color:#88B736;color:var(--ink);font-weight:600}
.ip-tabs button.on span{color:#557A1F}
.ip-res{font-size:var(--fs-14);color:var(--muted);padding:8px 0}
.ip-grid,.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px}
.pk .ip-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cat-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.itile{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;border-radius:10px;overflow:hidden;border:1px solid #ECEBE6;box-shadow:none;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.itile:hover{border-color:#D6D4CD}
.itile.picked{border-color:var(--leaf);box-shadow:0 0 0 1px var(--leaf)}
.itile.oos{opacity:.7}
.it-img{position:relative;aspect-ratio:4/3;background:#F7F6F2;display:grid;place-items:center;overflow:hidden}
.it-img img{width:100%;height:100%;object-fit:cover;display:block}
.it-img > svg{width:28px;height:28px;color:var(--muted)}
.it-flag{position:absolute;left:8px;top:8px;padding:2px 8px;border-radius:var(--r-pill);background:var(--red-tint);color:var(--red);font-size:var(--fs-12);font-weight:600}
.it-qty{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:2px;padding:2px;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 1px 2px rgba(27,26,24,.12),0 0 0 1px rgba(27,26,24,.06)}
.it-qty b{min-width:24px;text-align:center;font-size:var(--fs-15);font-variant-numeric:tabular-nums}
.it-btn{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:none;font-size:20px;font-weight:600;line-height:1;color:var(--ink);cursor:pointer}
.it-btn.add{background:var(--leaf);color:var(--on-leaf)}
.it-btn:active{transform:scale(.94)}
.it-b{display:flex;flex-direction:column;gap:8px;padding:10px 12px 12px;flex:1}
.it-n{font-weight:600;font-size:13px;line-height:18px;letter-spacing:-.005em}
.it-u{font-size:var(--fs-13);color:var(--green-2);font-weight:600}
.it-sizes{display:flex;flex-wrap:wrap;gap:6px}
.sz{display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:12px;font-weight:500;color:var(--ink-2);white-space:nowrap;max-width:100%}
button.sz{cursor:pointer}
.sz span{font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.sz.on{border-color:#88B736;background:#F5F9EC;color:var(--ink)}
.sz.on span{color:var(--green-2)}
.it-price{font-weight:600;font-variant-numeric:tabular-nums}
.it-d{font-size:var(--fs-13);color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.it-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:4px;font-size:var(--fs-13);font-weight:600}
@media (max-width:1280px){
  .ed2{grid-template-columns:minmax(0,1fr) 360px}
  .ed-top{grid-template-columns:1fr}
  .ed-top > .event-card{border-left:0;border-top:1px solid var(--line);padding-top:24px}
}
@media (max-width:980px){
  .ed2{display:flex;flex-direction:column;align-items:stretch}
  .ed-main{display:contents}
  .ed-top{order:1;display:flex;flex-direction:column}
  .items-panel{order:2}
  /* phone + tablet: the same picker is a bottom sheet, opened from "Add items" */
  .pk{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:90;height:min(90vh,calc(100dvh - 40px));max-height:none;border:0;border-radius:16px 16px 0 0;box-shadow:0 -1px 0 rgba(27,26,24,.06),0 -12px 40px rgba(27,26,24,.18);transform:translateY(104%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s}
  #editor.ip-on .pk{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .ip-scrim{display:block;position:fixed;inset:0;z-index:89;background:rgba(27,26,24,.36);opacity:0;pointer-events:none;transition:opacity .2s}
  #editor.ip-on .ip-scrim{opacity:1;pointer-events:auto}
  html.ip-lock,html.ip-lock body{overflow:hidden}
  .ip-top{padding:0 16px;border-bottom:1px solid var(--line)}
  .ip-grab{display:block;width:36px;height:4px;border-radius:2px;background:#D6D4CD;margin:8px auto 6px}
  .ip-head{align-items:center;margin-bottom:12px}
  .ip-head h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
  .ip-meta{display:none}
  .ip-done{display:inline-flex;margin-left:auto;min-height:36px}
  .ip-tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:12px 16px}
  .ip-tabs button{height:34px;padding:0 12px;font-size:13px}
  .ip-body{padding:14px 16px calc(28px + env(safe-area-inset-bottom))}
  .pk .it-sizes{flex-direction:column;gap:6px}
  .pk .sz{width:100%;justify-content:space-between;min-height:34px}
  .ip-open{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;justify-content:flex-start;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:600;font-size:16px;color:var(--ink)}
  .ip-open-i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--leaf);color:var(--on-leaf)}
  .ip-open-i svg{width:16px;height:16px}
  .ip-open-s{margin-left:auto;font-size:13px;font-weight:500;color:var(--muted)}
  .items-foot{flex-direction:column}
  .items-foot #customBtn{align-self:flex-start}
  .ed-main > *:not(.ed-top):not(.items-panel){order:4}
  .pk .ip-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media (max-width:640px){
  /* A finish (Oct 27): the phone editor in style A: flat sections on white, hairlines between them, no boxed cards */
  #editor .ed2,#editor .ed-top{gap:0}
  #editor .ed2 .panel{border:0;border-radius:0;background:transparent;box-shadow:none}
  #editor .ed-top>.panel+.panel,#editor .items-panel,#editor .ed-main>.panel,#editor .ed-sum>.panel{border-top:1px solid var(--line)}
  #editor .ed2 .section{padding:12px 0}
  #editor .ed2 .section+.section{border-top:1px solid var(--line)}
  #editor .bx-panel .section{padding:16px 0}
  #editor .event-card{background:transparent;box-shadow:none;padding:16px 0;min-height:0;border-radius:0}
  #editor .event-card>svg{color:var(--muted)}
  #editor .event-card .event-card-title{color:var(--muted);letter-spacing:.02em;text-transform:none;font-size:13px;font-weight:500}
  #editor .steps{display:none}
  #editor #discType{width:150px!important;flex:none}
  #editor .event-card .grow{flex:1 1 auto}
  #editor .event-card-edit{align-self:center;margin-top:0}
  #editor .ed-top-h,#editor .ed-tw,#editor .ed-sub i{display:none}
  #editor .ed-title{gap:6px 8px}
  #editor .ed-head{padding:8px 0 12px;margin-bottom:0;border-bottom:0}
  #editor #edBanners{margin-bottom:0!important}
  #editor #edBanners:not(:empty){margin:12px 0!important}
  #editor .ed-head .states{display:flex;margin-top:0;width:auto}
  #editor .ed-head .states .sv:not(:first-child){display:none}
  #editor .ed-title h1{font-size:24px;letter-spacing:-.02em}
  #editor .savestate{border:0;background:none;padding:0 2px;height:auto}
  #editor .lines .empty{padding:18px 0!important;text-align:left;align-items:flex-start}
  #editor .lines .empty>svg{display:none}
  #editor .side-toggle{border:0;border-top:1px solid var(--line);border-radius:0;background:none;color:var(--green-2);font-weight:600;justify-content:flex-start;padding:0}
  .steps{margin-top:10px;flex-wrap:nowrap;overflow-x:auto}
  .steps li{font-size:var(--fs-12);gap:5px}
  .steps .sn{white-space:nowrap}
  .steps li + li::before{width:10px;margin:0 5px}
  .steps .dot{width:22px;height:22px}
  .steps li:not(.on) .sn{display:none}
  #editor .states{display:none}
  .ed-head .btn[href^="#/preview"]{width:44px;padding:0;justify-content:center;font-size:0}
  .ed-head .btn[href^="#/preview"] svg{margin:0}
  #moreMenu > summary{font-size:0;width:44px;padding:0;justify-content:center}
  .ip-usual{grid-auto-columns:160px}
  .ip-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .it-b{padding:8px 10px 10px}
  .it-n{font-size:var(--fs-14)}
  .sz{min-height:36px;padding:0 7px;gap:4px;font-size:var(--fs-12);max-width:100%}
  .sz em{padding:0 4px}
  .it-d{display:none}
}
.sz em{font-style:normal;font-weight:600;color:var(--on-leaf);background:var(--leaf);border-radius:var(--r-pill);padding:0 6px;font-size:var(--fs-12)}
.c-act{display:flex;gap:8px;flex-wrap:wrap}
.make{margin:0 0 20px}
.make-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 24px}
.make-list li{display:flex;align-items:baseline;gap:10px;min-height:44px;padding:10px 0;border-bottom:1px solid var(--sunk-2)}
.make-list b{min-width:40px;font-size:var(--fs-18);color:var(--green);font-variant-numeric:tabular-nums}
.make-list li span:first-of-type{flex:1;font-weight:600}
@media (min-width:1181px) and (max-width:1599px){
  .orow{grid-template-columns:minmax(180px,1fr) minmax(150px,1.5fr) 120px 150px 110px 110px 104px}
  .o-at{display:none}
}

/* ===== Shell, lists, records and Home in style A2 (Soho approved Oct 26 2026, 11:38 PM). Same Zoho structure: grouped sidebar, module search, one list, split record view, dashboard. ===== */
.app.z{grid-template-columns:248px minmax(0,1fr);background:#fff}
.app.z .side{background:#FBFBF9;padding:20px 12px 12px;border-right:1px solid #ECEBE6}
.app.z .brand{padding:2px 12px 22px}
.app.z .brand img{width:96px}
.app.z .brand .word{color:var(--muted);font-weight:600;letter-spacing:.08em;font-size:12px}
.app.z .nav{gap:1px}
.app.z .nav a,.ngrp-h{min-height:36px;padding:7px 10px;border-radius:8px;font-size:14px;font-weight:500;color:#5F5B55;gap:10px}
.app.z .nav a:hover,.ngrp-h:hover{background:#F2F1ED;color:var(--ink)}
.app.z .nav a.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(27,26,24,.06),0 0 0 1px rgba(27,26,24,.05)}
.app.z .nav svg,.ngrp-h > svg{width:17px;height:17px;opacity:1;color:#8A867F}
.app.z .nav a.on svg{color:#557A1F}
.app.z .nav a.nsub{min-height:32px;padding:6px 10px 6px 37px;font-weight:500;color:#5F5B55;font-size:13px}
.app.z .nav a.nsub.on{font-weight:600;color:var(--ink)}
.app.z .nav .count{background:#F0EFEA;color:#5F5B55;font-weight:500;line-height:18px;font-size:12px}
.ngrp-h{display:flex;align-items:center;width:100%;border:0;background:none;cursor:pointer;text-align:left;font-family:var(--sans)}
.ngrp-h .chev{margin-left:auto;width:15px;height:15px;transition:transform var(--t) var(--ease)}
.ngrp.open .ngrp-h .chev{transform:rotate(180deg)}
.ngrp-b{display:none;flex-direction:column;gap:1px;padding:2px 0 6px}
.ngrp.open .ngrp-b{display:flex}
.ngrp.has-on .ngrp-h{color:var(--ink);font-weight:600}
.ngrp.has-on .ngrp-h > svg:first-child{color:#557A1F}
.app.z .nav a.next .extic{margin-left:auto;width:13px;height:13px}
.app.z .side-foot{display:flex;align-items:center;gap:4px;border-top:1px solid #ECEBE6;padding:10px 0 0}
.nset{flex:1;display:flex;align-items:center;gap:10px;min-height:36px;padding:7px 10px;border-radius:8px;color:#5F5B55;font-weight:500;font-size:14px;text-decoration:none}
.nset:hover{background:#F2F1ED;text-decoration:none;color:var(--ink)}
.nset svg{width:17px;height:17px;color:#8A867F}
.nset.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(27,26,24,.06),0 0 0 1px rgba(27,26,24,.05)}
.side-min-btn{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer;flex:none}
.side-min-btn:hover{background:#F2F1ED}
.app.side-min{grid-template-columns:68px minmax(0,1fr)}
.app.side-min .side{padding:16px 10px 12px}
.app.side-min .brand{padding:0 0 14px;align-items:center}
.app.side-min .brand img{width:44px}
.app.side-min .brand .word,.app.side-min .nav span,.app.side-min .ngrp-h span,.app.side-min .ngrp-h .chev,.app.side-min .nset span,.app.side-min .extic{display:none}
.app.side-min .nav a,.app.side-min .ngrp-h,.app.side-min .nset{justify-content:center;padding:8px}
.app.side-min .ngrp-b{display:none}
.app.side-min .side-foot{flex-direction:column}
.app.side-min .side-min-btn svg{transform:rotate(180deg)}
/* top bar: module search, the green +, initials */
.app.z .top{height:60px;padding:0 32px;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid #ECEBE6}
.zsearch{flex:1;min-width:0;max-width:560px;display:flex;align-items:center;height:36px;border:1px solid #ECEBE6;border-radius:8px;background:#F7F7F5;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t)}
.zsearch:focus-within{background:#fff;border-color:#88B736;box-shadow:0 0 0 3px rgb(136 183 54 / 18%)}
.zs-mod{display:flex;align-items:center;gap:6px;height:100%;padding:0 10px 0 12px;border:0;border-right:1px solid #ECEBE6;border-radius:8px 0 0 8px;background:transparent;color:var(--ink-2);font-weight:500;font-size:13px;cursor:pointer;white-space:nowrap}
.zs-mod svg{width:15px;height:15px;color:var(--muted)}
.zs-mod .chev{width:13px;height:13px}
.zs-in{flex:1;width:0;min-width:0;height:100%;border:0;outline:0;background:none;padding:0 12px;font-size:14px}
.zs-in::placeholder{color:var(--muted)}
.zsearch .search-trigger{flex:none;width:auto;max-width:none;height:24px;margin-right:6px;padding:0 6px;border:0;box-shadow:none;background:none}
.zplus{display:grid;place-items:center;width:36px;height:36px;border:1px solid #7AA62C;border-radius:8px;background:var(--leaf);color:var(--on-leaf);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(60,90,20,.18);transition:background var(--t) var(--ease)}
.zplus:hover{background:var(--leaf-hover)}
.zplus svg{width:18px;height:18px;stroke-width:2.2}
.z-rec .zplus{background:var(--surface);color:var(--ink);border-color:var(--line-2);box-shadow:var(--shadow-xs)} /* QA Nov 10: on a record the + is an outline button; the record keeps its one green */
.z-rec .zplus:hover{background:#FAFAF8}
.app.z .me-sm{display:grid;place-items:center;border:0;cursor:pointer;width:34px;height:34px;font-size:12px;background:#EEF4E2;color:#3F5C16;font-weight:600}
.pmenu.pm-narrow{width:300px}
.pm-it.on{background:var(--green-tint)}
.tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:56px;padding-top:4px;font-size:12px;font-weight:500;color:var(--muted);border:0;background:none;font-family:var(--sans);cursor:pointer}
.tabbar button.on{color:#3F6B12;font-weight:600}
.tabbar button.on .pill-ic{background:#EEF5E1;color:#3F6B12}
/* the one list (full page) */
.zl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:8px}
.zl-head h1{margin-top:2px;font-size:24px}
.zl-head .eyebrow{display:none}
.zl-head .sub{color:var(--muted);margin-top:0;font-size:13px}
.zl-head > div:first-child{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:12px;min-width:0}
.zl-act{display:flex;gap:8px}
.ztabs{display:flex;gap:20px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:0}
.ztabs button,.set-tabs a{display:flex;align-items:center;gap:6px;height:36px;padding:0;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;color:var(--muted);font-weight:500;font-size:13px;cursor:pointer;white-space:nowrap;font-family:var(--sans)}
.ztabs button:hover,.set-tabs a:hover{color:var(--ink)}
.ztabs button.on,.set-tabs a.on{color:var(--ink);border-bottom-color:var(--ink)}
.zct{min-width:0;padding:0;border-radius:0;background:none;font-size:12px;line-height:inherit;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:500}
.ztabs button.on .zct{background:none;color:var(--muted)}
.zl-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:48px;padding:6px 0;margin-bottom:0}
.zl-search{flex:1 1 260px;max-width:400px;display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.zl-search:focus-within{border-color:#88B736;box-shadow:0 0 0 3px rgb(136 183 54 / 18%)}
.zl-search svg{width:15px;height:15px;color:var(--muted);flex:none}
.zl-search .in{border:0;box-shadow:none;height:32px;padding:0;background:none;min-width:0;flex:1;font-size:13px}
.zl-search .in:focus{box-shadow:none}
.zsel{display:flex;align-items:center;gap:4px;height:34px;padding:0 2px 0 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.zsel svg{width:14px;height:14px;color:var(--muted);flex:none}
.zsel:focus-within{border-color:#88B736;box-shadow:0 0 0 3px rgb(136 183 54 / 18%)} /* QA Nov 10: the Source / Sort drop-downs show focus (as the search box) */
.zsel .in{border:0;box-shadow:none;height:32px;padding:0 24px 0 4px;background-color:transparent;font-weight:500;font-size:13px;min-width:0;color:var(--ink-2);background-position:right 8px center}
.zsel.sm{height:32px;margin:0 16px 8px}
.zsel.sm .in{height:30px}
.zchk{font-size:13px}
.zseg{margin-left:4px}
.zl-meta{margin-left:auto}
.zl-panel{background:#fff;border-top:1px solid var(--line);border-radius:0;box-shadow:none;transition:opacity var(--t) var(--ease)}
.zl-panel.photos{background:none;box-shadow:none;overflow:visible;border-top:0}
.zgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.zhead{position:sticky;top:60px;z-index:2;background:#FAFAF8;border-bottom:1px solid var(--line);border-radius:0}
.zhead .zc{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.zlr{display:block;border-bottom:1px solid #F0EFEB;color:var(--ink);text-decoration:none}
.zlr:last-child{border-bottom:0}
.zlr.click{cursor:pointer}
.zlr.click:hover{background:#FAFAF8;text-decoration:none}
.zr-d{display:flex;align-items:center;min-height:40px;padding:0 8px}
.zhead .zr-d{min-height:32px}
.zc{flex:0 0 120px;padding:4px 12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;display:flex;align-items:center;gap:8px}
.zc.grow{flex:1 1 200px;min-width:180px}
.zc.cnum{flex-basis:168px}
.zc.cst{flex-basis:128px}
.zc.cwide{flex-basis:170px}
.zc.r{justify-content:flex-end;text-align:right;font-variant-numeric:tabular-nums}
.zlist[data-mod="items"] .zc:nth-child(3){flex-basis:200px}
.zlist[data-mod="items"] .zc:last-child{flex-basis:170px}
.zlist[data-mod="invoices"] .zc:nth-child(1),.zlist[data-mod="quotes"] .zc:nth-child(1),.zlist[data-mod="payments"] .zc:nth-child(1){flex-basis:118px;color:var(--ink-2)}
.znum{font-weight:600;color:#557A1F}
.zcust{min-width:0;overflow:hidden;text-overflow:ellipsis;display:block;white-space:nowrap}
.zcust b{overflow:hidden;text-overflow:ellipsis;font-weight:600}
.zsub{display:block;font-size:13px;color:var(--muted);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zsrc{display:inline-flex;align-items:center;height:18px;padding:0;font-size:var(--fs-12);font-weight:500;color:var(--muted);flex:none} /* where a row comes from (Zoho / App / CRM): quiet words, not a coloured badge (audit #5) */
.zwoo{font-weight:600;color:var(--ink-2)}
.zlate{color:var(--st-late);font-weight:600}
.zav{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#EEF4E2;color:#3F5C16;font-weight:600;font-size:12px;flex:none}
.zthumb{width:40px;height:40px;border-radius:8px;object-fit:cover;background:#F7F6F2;flex:none}
.zlink{display:inline-flex;align-items:center;gap:4px;font-weight:500;font-size:13px;white-space:nowrap;color:#557A1F}
.zlink svg{width:14px;height:14px}
.zl-more{display:flex;justify-content:center;padding:16px 0}
.zempty{padding:24px}
/* status inside list rows: the SAME pill as the record page, editor and Home (UI round 2: one status component), just a size smaller */
.zlr .pill{height:20px;padding:0 7px;gap:5px;font-size:12px}
.zlr .pill::before{width:5px;height:5px}
/* split record view: the list on the left (A2: 344px, 72px rows), the record on the right */
.zsplit{display:grid;grid-template-columns:344px minmax(0,1fr);min-height:calc(100vh - 60px)}
.zs-list{position:sticky;top:60px;height:calc(100vh - 60px);display:flex;flex-direction:column;border-right:1px solid var(--line);background:#fff}
.zs-head{display:flex;align-items:center;justify-content:space-between;gap:8px;height:64px;padding:16px 24px 0}
.zs-title{color:var(--ink);text-decoration:none}
.zs-title:hover{text-decoration:none}
.zs-title h2{font-size:20px;font-weight:600;letter-spacing:-.015em}
.zs-list .ztabs{padding:0 24px;margin:4px 0 0}
.zs-list .zsel.sm{margin:12px 24px 12px;height:32px}
.zs-rows{flex:1;overflow-y:auto;border-top:1px solid var(--line)}
.zs-rows .zr-m{display:grid}
.zs-rows .zlr{border-bottom:1px solid #F0EFEB;position:relative}
.zs-rows .zlr.on{background:#F5F9EC;box-shadow:none}
.zs-rows .zlr.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--leaf)}
.zs-more{padding:8px;text-align:center}
.zs-pane{min-width:0;background:#F6F6F3}
.zs-back{display:none}
.zr-m{display:none;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:22px 18px;column-gap:16px;align-content:center;height:56px;padding:0 20px}
.zr-mm{display:contents}
.zr-mm b{grid-column:1;grid-row:1;align-self:end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;color:var(--ink)}
.zr-mm .zsub,.zr-mm > span{grid-column:1;grid-row:2;align-self:center;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.zr-mr{display:contents}
.zr-mr > :first-child{grid-column:2;grid-row:1;align-self:end;text-align:right;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.zr-mr > :nth-child(2){grid-column:2;grid-row:2;align-self:center;justify-self:end}
.zr-mr .zsrc{font-size:12px}
.zr-m .zav{display:none}
.zr-m:has(> .zthumb){grid-template-columns:40px minmax(0,1fr) auto}
.zr-m > .zthumb{grid-column:1;grid-row:1 / 3;align-self:center}
.zr-m:has(> .zthumb) .zr-mm > *{grid-column:2}
.zr-m:has(> .zthumb) .zr-mr > *{grid-column:3}
/* record (A2): zone 1 header bar · zone 2 details + what's next · zone 3 the paper · zone 4 two panels */
.zrec.xd{padding:0;max-width:none;background:#F6F6F3;min-height:100%;display:flex;flex-direction:column}
.z1{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:68px;padding:8px 24px;background:#fff;border-bottom:1px solid var(--line);flex-wrap:wrap;row-gap:12px}
.z1-t{min-width:0;flex:1 1 240px}
.z1-crumb{font-size:12px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.z1-crumb a{color:var(--muted)}
.z1-sl{color:#D6D4CD}
.z1-h{display:flex;align-items:center;gap:12px;min-height:32px;margin-top:2px;flex-wrap:nowrap}
.z1-h h1{white-space:nowrap;font-size:24px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:32px}
.z1-h .pill{height:24px;padding:0 10px}
.z1-sub{font-size:13px;color:var(--ink-2);min-height:20px;display:flex;align-items:center;gap:8px;white-space:nowrap;flex-wrap:nowrap;overflow:hidden}
.z1-sub a{color:var(--ink-2);font-weight:500}
.z1-sub b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.z1-sub i{font-style:normal;color:#D6D4CD}
.z1-sub > *{flex:none}
.z1-sub > a,.z1-sub > .z1-n{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} /* combined2: on one line, a long customer name gives way (…), never Total / Paid / Balance; combined3: a plain-text name too (no customer link) */
.z1-r{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;margin-left:auto}
.zbar.acts{display:flex;align-items:center;gap:8px;margin:0;padding:0;border:0;flex-wrap:wrap} /* combined2: when the actions row is wider than the record pane (981–1400 px with the sidebar / list pane) the buttons wrap instead of running off the right edge */
.grp{display:flex;align-items:stretch;border:1px solid var(--line-2);border-radius:8px;background:#fff;box-shadow:0 1px 1px rgba(27,26,24,.04)}
.gbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 12px;min-width:38px;font-size:13px;font-weight:500;color:var(--ink);border:0;border-left:1px solid var(--line);background:none;cursor:pointer;text-decoration:none;font-family:var(--sans);white-space:nowrap;list-style:none}
.grp > :first-child,.grp > :first-child > .gbtn{border-left:0;border-radius:8px 0 0 8px}
.grp > :last-child > .gbtn,.grp > .gbtn:last-child{border-radius:0 8px 8px 0}
.gbtn:hover{background:#FAFAF8;text-decoration:none}
.gbtn svg{width:15px;height:15px;color:var(--ink-2)}
.gbtn .chev{width:13px;height:13px;margin-left:-2px}
.grp > details{position:relative;display:flex}
.grp > details > summary::-webkit-details-marker{display:none}
.zbar.acts .btn{height:40px}
.zbar.acts .btn.icon{width:38px;padding:0}
.zbar.acts .btn.icon .zbl{display:none}
.zprimary:empty{display:none}
.zprimary .btn{margin:0}
.zmore,.zpdfm{position:relative}
.zmore > summary,.zpdfm > summary{list-style:none}
.zmore > summary::-webkit-details-marker{display:none}
/* the record's PDF and More menus are the shared dropdown (.dd-pop): they float over the page, open leftwards from their button and scroll inside when long (Oct 30: the More menu used to push the header down over the invoice number and run off the right edge) */
.zmore-menu,.zpdf-pop{right:0;left:auto;min-width:280px;padding:8px;max-height:calc(100vh - 140px);overflow:auto}
.zmore-menu{width:320px}
.zpdf-pop{min-width:200px;top:calc(100% + 6px)}
.zactions{display:flex;flex-direction:column;gap:6px}
.zactions .btn{width:100%;justify-content:flex-start}
.zactions .hold-note{font-size:var(--fs-12)}
.zmore-sep{height:1px;background:var(--line);margin:8px 0}
.zclose{color:var(--muted)}
.z2{background:#fff;border-bottom:1px solid var(--line)}
.facts{display:grid;grid-template-columns:1.4fr repeat(calc(var(--n) - 1),minmax(0,1fr));padding:0 24px}
.fact{padding:10px 0 10px 20px;border-left:1px solid #F0EFEB;min-width:0}
.fact:first-child{padding-left:0;border-left:0}
.fl{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);min-height:16px;display:flex;align-items:center}
.fv{font-size:14px;font-weight:600;color:var(--ink);margin-top:2px;min-height:20px;line-height:20px;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;font-variant-numeric:tabular-nums}
.fv > *{overflow-wrap:anywhere}
.fact.link .fv a{color:#557A1F}
.fv small{font-weight:500;color:var(--muted);font-size:13px;white-space:nowrap}
.next2{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-height:40px;padding:6px 24px;border-top:1px solid #F0EFEB;background:#FBFCF8;font-size:13px;color:var(--ink-2)}
.next2 > svg{width:16px;height:16px;color:#557A1F;flex:none}
.next2 b{color:var(--ink);font-weight:600}
.next2 .nx{flex:1 1 300px;min-width:0}
.next2.warn{background:#FFFBF2}
.zrec .banner{margin:12px 24px 0}
.canvas{padding:16px 24px 24px;display:flex;flex-direction:column;align-items:center;gap:16px}
.canvas > *{width:100%;max-width:1040px}
.zpaper-wrap{min-width:0}
.zpaper{max-width:none;container-type:inline-size}
.zpaper .zp-it td{padding-top:7px!important;padding-bottom:7px!important}
.zpaper .zp-logo,.zpaper .zp-ttl{padding-top:24px!important;padding-bottom:14px!important}
.zpaper .zp-sum{margin-top:16px!important}
.zpaper .zp-totw{padding-top:16px!important}
.zpaper .zp-terms{columns:2;column-gap:32px}
.zpaper .zp{max-width:none!important;border:1px solid #E6E6E2;border-radius:4px;box-shadow:0 1px 2px rgba(27,26,24,.05),0 10px 28px -14px rgba(27,26,24,.18)}
.z4{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.box{background:#fff;border:1px solid #E9E8E3;border-radius:12px;min-width:0;overflow:hidden}
.box-h{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 20px;border-bottom:1px solid var(--line)}
.box-h h3{font-size:14px;font-weight:600;letter-spacing:-.005em;display:flex;align-items:center;gap:8px}
.box-h h3 span{font-size:12px;font-weight:600;color:var(--muted);background:#F2F1ED;border-radius:999px;padding:1px 8px;font-variant-numeric:tabular-nums}
.box-b{padding:0}
.box-b > .section,.box-b .panel{border:0;box-shadow:none;border-radius:0}
.box-b .section{padding:12px 20px}
.box-empty{padding:20px 24px;color:var(--muted);font-size:13px}
.box-more{padding:0 24px 16px}
.zlinked{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 24px 16px;border-top:1px solid #F0EFEB}
.zlinked .fl{margin-right:4px}
.tl{list-style:none;margin:0;padding:6px 20px 10px}
.tl li{display:grid;grid-template-columns:16px 1fr;column-gap:12px;padding:5px 0;position:relative}
.tl li::before{content:"";position:absolute;left:7.5px;top:21px;bottom:-5px;width:1px;background:var(--line)}
.tl li:last-child::before{display:none}
.tl .dot{width:9px;height:9px;border-radius:50%;margin:6px 0 0 3.5px;background:#fff;border:2px solid #D6D4CD}
.tl .dot.g{border-color:var(--leaf);background:var(--leaf)}
.tl b{display:block;font-size:13px;font-weight:600;line-height:20px}
.tl small{display:block;font-size:12px;color:var(--muted);line-height:16px}
.qsteps{list-style:none;margin:0;padding:14px 12px 12px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
.qsteps li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0;position:relative}
.qsteps li::before{content:"";position:absolute;left:calc(50% + 18px);right:calc(-50% + 14px);top:12px;height:1px;background:var(--line)}
.qsteps li:last-child::before{display:none}
.qsteps .k{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid #D6D4CD;color:var(--muted);font-size:12px;font-weight:700;background:#fff;flex:none}
.qsteps .k svg{width:13px;height:13px;stroke-width:2.5}
.qsteps .done .k{background:var(--leaf);border-color:var(--leaf);color:var(--on-leaf)}
.qsteps .now .k{border-color:var(--leaf);color:#557A1F;box-shadow:0 0 0 4px #F1F7E6}
.qsteps b{display:block;font-size:12px;font-weight:600;line-height:16px}
.qsteps small{display:block;font-size:12px;color:var(--muted);line-height:15px}
.qsteps .later b{color:var(--muted);font-weight:500}
.zchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.zchip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:7px;background:#F4F3EF;font-weight:500;font-size:13px;color:var(--ink)}
.zchip small{color:var(--muted);font-weight:400}
.zchip svg{width:14px;height:14px}
.zmodal-act{margin-top:14px}
.zsend{display:flex;flex-direction:column;gap:14px}
.zs-row{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center}
.zs-row > div{display:flex;flex-wrap:wrap;gap:6px}
.zs-web{border-top:1px solid var(--line);padding-top:12px}
.zs-web summary{cursor:pointer;font-size:13px;font-weight:500;color:var(--ink-2)}
.zitem{display:grid;grid-template-columns:200px 1fr;gap:20px}
.zitem-img{width:200px;height:200px;border-radius:12px;object-fit:cover;background:#F7F6F2}
.zkv{display:flex;flex-direction:column;margin:10px 0}
.zkv div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}

.doc-preview .doc-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;max-width:none;margin:0 0 24px;padding:12px 24px;background:rgba(255,255,255,.95);border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
.doc-bar .watermark{flex:1;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.doc-bar-act{display:flex;gap:8px}
.doc-sheet{max-width:860px;margin:0 auto;padding:0 16px}
.doc-sheet .zp{border:1px solid #E6E6E2;border-radius:4px;box-shadow:0 1px 2px rgba(27,26,24,.05),0 10px 28px -14px rgba(27,26,24,.18)}
.doc-note{max-width:860px;margin:0 auto 12px}
.doc-preview .paper-cta{max-width:860px;margin:24px auto 0;padding:0 16px}
.doc-preview .doc-to{max-width:860px;margin:16px auto 0;padding:0 16px;font-size:13px;color:var(--muted)}
.pdf-stage{position:absolute;left:0;top:0;z-index:-1;width:860px;background:#fff;pointer-events:none}
#printRoot{display:none}
.pdf-stage .zp{border:0!important;box-shadow:none!important;border-radius:0!important}
/* Home: Zoho's dashboard in style A: a KPI strip with vertical rules, sections divided by hairlines, no cards */
.zd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.zd-head h1{margin-top:2px;font-size:28px}
.zd-head .eyebrow{color:var(--muted);font-weight:500;letter-spacing:.02em;text-transform:none;font-size:13px}
.zd-head .sub{color:var(--muted);margin-top:4px;font-size:14px}
.zd-act{display:flex;gap:8px}
.zd-search{margin-bottom:16px}
.zd-search .bigsearch{height:44px}
.zd-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:40px;row-gap:24px}
.zd-grid.hidden{display:none}
.zd-recv{grid-column:span 7}
.zd-q{grid-column:span 5}
.zd-sales{grid-column:span 7}
.zd-attn{grid-column:span 5}
.zd-recent{grid-column:span 12}
.zhome .zcard{background:none;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;padding:16px 0 0}
.zc-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.zc-h h2{font-size:16px;font-weight:600;letter-spacing:-.01em;margin-right:auto}
.zc-h .small.muted{margin-right:auto;margin-left:-4px;color:var(--muted)}
.zc-h .zlink{font-size:13px}
.zcard .lbl{display:block;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.zcard .big{display:block;font-family:var(--sans);font-weight:600;font-size:28px;letter-spacing:-.025em;line-height:1.15;margin:6px 0 2px;color:var(--ink);font-variant-numeric:tabular-nums}
.zd-recv-n,.zd-sales-n{display:flex;gap:0;align-items:stretch;flex-wrap:wrap}
.zd-recv-n > div,.zd-sales-n > div{display:flex;flex-direction:column;padding:0 28px;border-left:1px solid var(--line)}
.zd-recv-n > div:first-child,.zd-sales-n > div:first-child{padding-left:0;border-left:0}
.zd-recv-n b.num{font-size:16px;font-weight:600;letter-spacing:-.015em;margin-top:6px}
b.g{color:#4E7A17}
b.r{color:#B4412E}
.zd-bar{display:flex;gap:2px;height:8px;margin:14px 0 10px;border-radius:999px;overflow:hidden;background:#F2F1ED}
.zd-bar span.g,.dot.g{background:var(--leaf)}
.zd-bar span.a,.dot.a{background:#E2C15A}
.zd-bar span.r,.dot.r{background:#D46A45}
.zd-bk{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.zd-bk > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.zd-bk .lbl{display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0;font-size:12px;font-weight:500}
.zd-bk .dot{display:inline-block;width:7px;height:7px;border-radius:50%}
.zd-bk b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.zd-qbig{display:flex;align-items:baseline;gap:12px;color:var(--ink);text-decoration:none;padding:0 0 12px;border-bottom:1px solid var(--line)}
.zd-qbig:hover{text-decoration:none}
.zd-qbig .big{font-size:28px}
.zd-qs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:12px}
.zd-qs a{display:flex;flex-direction:column;padding:0 16px;border-left:1px solid var(--line);border-radius:0;background:none;color:var(--ink);text-decoration:none}
.zd-qs a:first-child{padding-left:0;border-left:0}
.zd-qs a:hover{background:none;text-decoration:none}
.zd-qs a:hover b{color:#557A1F}
.zd-qs b{font-size:16px;font-weight:600;letter-spacing:-.015em}
.zd-qs span{font-size:13px;color:var(--muted)}
.zd-chart{display:flex;align-items:flex-end;gap:12px;height:132px;margin-top:12px;padding-top:6px;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to top,transparent 0,transparent 31px,#EFEEEA 31px,#EFEEEA 32px)}
.zd-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;min-width:0}
.zd-col .bar{display:block;width:46%;max-width:36px;border-radius:3px 3px 0 0;background:#DCE8C6}
.zd-col.on .bar{background:var(--leaf)}
.zd-col .v{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.zd-col .m{font-size:12px;color:var(--muted);font-weight:500}
.zd-list{display:flex;flex-direction:column}
.zd-li{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 0;border-top:1px solid #F0EFEB;color:var(--ink);text-decoration:none}
.zd-li:first-child{border-top:0}
.zd-li:hover{background:#FAFAF8;text-decoration:none}
.zd-li > svg{width:16px;height:16px;color:var(--muted);flex:none}
.zd-li .grow{display:flex;flex-direction:column;min-width:0;flex:1}
.zd-li .s2{display:block;font-size:13px;color:var(--muted)}
.zd-clear{display:flex;align-items:center;gap:10px;padding:18px 0;color:#557A1F;font-weight:600}
.zd-clear svg{width:20px;height:20px}
.zd-li .tag:not(.amber):not(.blue):not(.green){background:#F2F1ED;color:var(--ink-2)}
@media (max-width:1560px){
  .zlist .zc.hide-lg{display:none}
}
@media (max-width:1400px){
  .facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fact:nth-child(3n+1){padding-left:0;border-left:0}
  .fact:nth-child(n+4){border-top:1px solid #F0EFEB}
  .z1{padding:16px 32px}
}
@media (max-width:1280px){
  .zd-recv,.zd-q,.zd-sales,.zd-attn{grid-column:span 6}
  .zsplit{grid-template-columns:300px minmax(0,1fr)}
  .zlist .zc.hide-md{display:none}
  .z4{grid-template-columns:1fr}
}
@media (max-width:980px){
  .app.z{grid-template-columns:1fr}
  .app.z .top{padding:0 12px;gap:8px;height:56px}
  .zs-mod span,.zs-mod .chev,.zsearch .search-trigger,.app.z .top-brand{display:none}
  .zs-mod{padding:0 10px}
  .zsplit{display:block;min-height:0}
  .zs-list{display:none}
  .zs-pane{background:#F6F6F3}
  .zs-back{display:flex;align-items:center;gap:4px;min-height:44px;padding:4px 16px 0;font-weight:600;color:#557A1F;background:#fff}
  .zs-back svg{width:18px;height:18px}
  .z1{padding:8px 16px 12px;min-height:0;gap:8px;flex-direction:column;align-items:stretch}
  .z1-h h1{font-size:24px}
  .zclose{display:none}
  .zpdf-pop,.zmore-menu{position:fixed;left:12px;right:12px;bottom:80px;top:auto;min-width:0;max-height:70vh;overflow:auto}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 16px}
  .fact,.fact:nth-child(3n+1){padding:8px 0 8px 16px;border-left:1px solid #F0EFEB;border-top:0}
  .fact:nth-child(2n+1){padding-left:0;border-left:0}
  .fact:nth-child(n+3){border-top:1px solid #F0EFEB}
  .next2{padding:8px 16px;align-items:flex-start;flex-wrap:wrap;row-gap:8px}
  .next2 .zdrive:not(:empty){flex:1 1 100%}
  .zrec .next2 .gdrv{flex-wrap:wrap}
  .zrec .next2 .gdrv-t{flex:1 1 200px;white-space:normal}
  .zrec .banner{margin:12px 16px 0}
  .canvas{padding:16px 12px 24px;gap:16px}
  .zpaper-wrap{overflow:hidden}
  .z4{grid-template-columns:1fr;gap:16px}
  .box-h{padding:0 16px}
  .tl,.qsteps{padding:8px 16px 12px}
  .zd-grid{grid-template-columns:1fr;row-gap:20px}
  .zd-recv,.zd-q,.zd-sales,.zd-attn,.zd-recent{grid-column:auto}
  .zd-head{flex-direction:column;align-items:stretch}
  .zd-act{display:grid;grid-template-columns:1fr 1fr}
  .zd-act .btn{height:44px}
  .zd-bk{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}
  .zd-recv-n > div,.zd-sales-n > div{padding:0 16px}
  .zd-qs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
  .zd-qs a:nth-child(3){padding-left:0;border-left:0}
  .zd-chart{gap:4px;height:112px}
  .zd-col .v{display:none}
  .zl-head{align-items:center}
  .zl-head h1{font-size:24px}
  .zl-tools{gap:8px}
  .zl-search{flex:1 1 100%;max-width:none;height:40px}
  .zsel{flex:1 1 0;height:40px}
  .zsel .in{width:100%}
  .zl-meta{display:none}
  .zl-panel .zhead,.zl-panel .zr-d{display:none}
  .zl-panel .zr-m{display:grid;padding:0 4px}
  .zitem{grid-template-columns:1fr}
  .zitem-img{width:100%;height:220px}
  .doc-preview .doc-bar{flex-wrap:wrap;padding:10px 12px}
  .doc-bar .watermark{order:3;flex-basis:100%}
  .doc-sheet{padding:0 8px}
}
.zs-pane .zpage-back{display:none!important}
.dd-item.ph-only{display:none}
@media (max-width:980px){
  .dd-item.ph-only{display:flex}
}
.ed-crumbs{font-size:12px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:6px;min-height:16px;white-space:nowrap}
.ed-crumbs a{display:inline-flex;align-items:center;gap:4px;color:var(--muted)}
.ed-crumbs a:hover{color:var(--ink)}
.ed-crumbs svg{width:12px;height:12px}
.ed-crumbs .z1-sl{color:#D6D4CD}
.zemb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 8px}
.zemb-head h3{font-size:16px;font-weight:600}
.zemb-head .zsel.sm{margin:0}
.zemb .ztabs{margin-bottom:10px}
.zemb .zl-panel .zr-d{display:none}
.zemb .zl-panel .zhead{display:none}
.zemb .zl-panel .zr-m{display:grid;padding:0 4px}
@media (max-width:1680px){
  .zs-pane .cols-main{grid-template-columns:minmax(0,1fr)}
}






.zbar.acts .keep,.zbar.acts .repeatgrp label{font-size:13px;color:var(--ink-2)}
.z1-h h1,.zr-mm .zsub{font-variant-numeric:normal}
.zh-lock{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-13);color:var(--muted);white-space:nowrap;margin-left:auto}
.zh-lock svg{width:14px;height:14px}
.owner-only{display:flex;align-items:center;gap:6px;margin-top:8px}
.owner-only svg{width:14px;height:14px;flex:none}
.zw-fresh{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--fs-13);margin-top:6px}
.zw-fresh svg{width:14px;height:14px}
.zw-site{display:flex;flex-direction:column;gap:6px;padding:12px 24px 16px;border-top:1px solid #F0EFEB}
.zw-site .paylink .in{height:34px;font-size:13px}
.zw-hh{padding:14px 24px 0}
.zw-ch{padding:4px 24px 16px}

table.pay{width:100%;border-collapse:collapse}
.pay th{height:32px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 0 0 24px;border-bottom:1px solid #F0EFEB}
.pay td{height:48px;font-size:13px;padding:6px 0 6px 24px;border-bottom:1px solid #F0EFEB;font-variant-numeric:tabular-nums}
.pay th:last-child,.pay td:last-child{text-align:right;padding-right:24px}
.pay td b{font-weight:600}
.pay td small{display:block;font-size:12px;color:var(--muted)}
.pay tr.sumr td{border-bottom:0;color:var(--muted)}
.pay tr.sumr td b{color:var(--ink)}
.zmoney > .section{padding:16px 24px}
.zmoney .section-head{margin-bottom:10px}
.zmoney .section-head h3{display:none}
.app-solo{min-height:100vh;background:#F6F6F3}
.gbtn.hold{color:var(--muted);cursor:not-allowed}
.gbtn[disabled]{color:var(--muted);cursor:not-allowed;background:none}

/* phone record (A2 phone): items + totals as a list; the full paper is in PDF / Print */
.zph{display:none}
@media (max-width:980px){
  .zph{display:block;background:#fff;border-bottom:1px solid var(--line)}
  .zrec.xd .canvas > .zpaper-wrap{display:none}
  .zph-bal{display:grid;grid-template-columns:1fr auto;align-items:end;gap:4px 12px;padding:16px 16px 18px;border-bottom:1px solid #F0EFEB}
  .zph-bal b{display:block;font-size:28px;font-weight:650;letter-spacing:-.03em;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums}
  .zph-bal .r{text-align:right;font-size:13px;color:var(--muted)}
  .zph-bal .r b{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:0;margin-top:2px}
  .zph-bar{grid-column:1/-1;height:6px;border-radius:999px;background:#F0EFEB;margin-top:10px;overflow:hidden}
  .zph-bar i{display:block;height:100%;background:var(--leaf);border-radius:999px}
  .zph-h{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 16px;background:#FAFAF8;border-bottom:1px solid #F0EFEB}
  .zph-items.noimg .zph-i{grid-template-columns:minmax(0,1fr) auto}
  .zph-i{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 16px;border-bottom:1px solid #F0EFEB}
  .zph-i img,.zph-noimg{width:44px;height:44px;border-radius:8px;object-fit:cover;background:#F7F6F2;display:grid;place-items:center;color:var(--muted)}
  .zph-n{min-width:0;display:flex;flex-direction:column}
  .zph-n b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .zph-n span{font-size:13px;color:var(--muted)}
  .zph-i > b{font-size:14px;font-weight:600}
  .zph-tot{padding:6px 16px 0}
  .zph-t{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
  .zph-t b{font-weight:500;color:var(--ink)}
  .zph-t.t{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-size:16px;color:var(--ink)}
  .zph-t.t b{font-weight:700}
  .zph-t.neg b{color:#4E7A17}
  .zph-t.bd{margin:6px -16px 0;padding:14px 16px;background:#F1F7E6;font-size:16px;font-weight:600;color:#2F4A0E}
  .zph-t.bd b{font-size:16px;font-weight:700;color:#2F4A0E}
  /* actions inline under the header: Edit · Send · Share · PDF as tiles, the one green step full width */
  .app.z-rec .tabbar{display:grid} /* go-live 9 sizing: grid, so the six buttons stay equal on record pages too (flex shrank them to their words) */
  .zrec.xd{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  
  .z1-crumb{display:none}
  .z1-t{flex:none;min-width:0}
  .z1-sub{white-space:normal;overflow:visible;flex-wrap:wrap;column-gap:12px;row-gap:2px} /* combined: the record line wraps on a phone so Paid · Balance (z8) is never cut off */
  .z1-sub > a,.z1-sub > .z1-n{flex-basis:100%}
  .z1-sub > i{display:none} /* combined2: wrapped, the customer has its own line and the amounts are spaced, no dots (a dot can't end up alone at a line end) */
  .z1-h{flex-wrap:wrap}
  .z1-r{margin:0;width:100%}
  .z1-r .zbar.acts{width:100%}
  .zbar.acts{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:0;background:none;border:0;box-shadow:none}
  .zbar.acts .grp{grid-column:1/-1;order:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;border:0;box-shadow:none;background:none}
  .zbar .gbtn,.grp > details > .gbtn{flex-direction:column;gap:2px;height:54px;width:100%;border:1px solid var(--line)!important;border-radius:10px!important;font-size:13px}
  .grp > details{display:block}
  .zbar .gbtn .zbl{display:inline}
  .zbar .gbtn .chev{display:none}
  .zbar .gbtn svg{width:19px;height:19px}
  .zbar #zShare{display:flex}
  .zbar #zPay,.zbar .zprimary{order:1;grid-column:1;width:100%}
  .zbar .zprimary .btn,.zbar #zPay{width:100%;height:44px;font-size:16px}
  .zbar .zmore{order:2;grid-column:2}
  .zbar .zmore > summary{width:48px;height:48px}
  .zbar .repeatgrp{order:1;grid-column:1/-1;display:flex;flex-wrap:wrap}
  .zbar .repeatgrp .btn{flex:1;height:44px}
  .zh-lock{grid-column:1/-1}
  .zprimary:empty + .zmore{grid-column:1/-1;justify-self:end}
}
@media (pointer:coarse){.it-btn{width:44px;height:44px}}
/* Print and the PDF: only the paper, page-wide, as Soho's Zoho PDF */
@media print{
  @page{size:letter;margin:12mm 0}
  body.print-paper > :not(#printRoot){display:none!important}
  body.print-paper #printRoot{display:block}
  body.print-paper #printRoot .zp{width:100%}
  .zp{border:0!important;box-shadow:none!important;border-radius:0!important;max-width:none!important}
  .zp .zp-rib{display:none!important}
  .zp tr.zp-it,.zp .zp-totw,.zp .zp-totw tr,.zp .zp-sum,.zp .zp-body,.zp .zp-notes,.zp .zp-foot,.zp .zp-head{break-inside:avoid}
  .zp .zi thead{display:table-header-group}
  .zp tr.zp-sec{break-after:avoid}
  .zp *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  
  .doc-preview .doc-bar,.doc-preview .doc-to,.doc-preview .paper-cta,.doc-note{display:none!important}
  .doc-sheet{max-width:none;padding:0}
}
/* page containers take focus for screen readers after each route; no ring around the whole page */
.zd-va{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:4px 10px;border-radius:999px;background:var(--green-50, #F1F7E6);color:var(--ink);font-size:var(--fs-13)}
.zd-va svg{width:15px;height:15px}
.zs-pane .ctabs button{padding:0 12px}

/* ---------- Polish pass (Oct 27 2026): alignment, clipping, one tab style, one record header ---------- */
@media (min-width:900px){
  .app.z .page{margin-left:0;margin-right:auto;padding-left:28px;padding-right:28px}
}
/* the phone dashboard: cards never wider than the screen */
@media (max-width:899px){
  .zd-grid{grid-template-columns:minmax(0,1fr)}
  .zd-grid > *{min-width:0}
}
/* list cells: long text ends in … with the full text on hover */
.zc .zt{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zcust > b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zlist[data-mod="creditnotes"] .zc:nth-child(1){flex-basis:150px}
.zlist[data-mod="payments"] .zc.cwide,.zlist[data-mod="payments"] .zc:nth-child(4){flex-basis:200px}
/* the "Updated · Refresh" line sits at the right end of the tools row */
.zl-tools .zl-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.zl-tools .zl-meta:empty{display:none}
.zl-sync{margin-left:auto;display:flex;align-items:center}
.zl-tools .zl-meta + .zl-sync{margin-left:12px}
.zl-sync .updated{margin:0;font-size:var(--fs-13);color:var(--muted)}
.zl-sync .banner{margin:0!important}
.zl-tools .linkbtn{font-size:var(--fs-13)}
/* one tab style everywhere (underline, like the lists and Zoho) */
.ztabs.ctabs,.ztabs.wtabs{flex-wrap:nowrap;margin-bottom:18px;background:none;padding:0;border-radius:0;box-shadow:none}
.ztabs.ctabs button,.ztabs.wtabs button{background:none;box-shadow:none;border-radius:0;padding:0 10px}
.ztabs.ctabs button.on,.ztabs.wtabs button.on{background:none;box-shadow:none;color:var(--ink);border-bottom-color:var(--leaf)}
.ztabs .tcount:empty{display:none}
/* customer page header in style A2: name, meta line, actions in one tidy bar */
.zcrec .zrec-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:0}
.zcrec .zrec-t{min-width:0}
.zcrec .zrec-t .eyebrow{color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0;font-size:12px}
.zcrec .zrec-t h1{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px;font-size:24px}
.zcrec h1 .pill{font-family:var(--sans)}
.zcrec .c-meta{margin-top:8px}
.zcrec .zbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.znext{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;margin-bottom:18px;border:1px solid #EEF0E6;border-radius:10px;background:#FBFCF8;color:var(--ink-2);font-size:13px}
.znext > svg{width:16px;height:16px;color:#557A1F;flex:none;margin-top:2px}
.zd-qnote{margin:12px 0 0}
.zd-qnote a{font-weight:600}
.zd-li .pill{flex:none}
/* Users: deactivated test logins folded away */
.u-off{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
.u-off > summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;font-size:var(--fs-14);color:var(--muted);list-style:none}
.u-off > summary::-webkit-details-marker{display:none}
.u-off > summary::before{content:'▸';margin-right:8px;transition:transform var(--t) var(--ease)}
.u-off[open] > summary::before{transform:rotate(90deg)}
@media (max-width:899px){
  .zcrec{padding:12px 16px calc(96px + env(safe-area-inset-bottom))}
  .zcrec .zclose{display:none}
  .zh-lock{display:none}
  .zl-sync{margin-left:0;width:100%}
}


/* ===== A finish pass (Oct 27): phone screens in style A: no boxed cards; flat sections divided by hairlines ===== */
@media (max-width:640px){
  #view .panel:not(.pk),#view section.box{border:0;border-radius:0;box-shadow:none;background:transparent;border-top:1px solid var(--line)}
  #view .panel:not(.pk) > .section,#view .box-b .section{padding-left:0;padding-right:0}
  #view .box-h,#view .box-empty,#view .box-more{padding-left:0;padding-right:0}
  #view .ar-c>summary{padding:14px 0}
  #view .ar-c{margin:0!important}
  #view .ar-strip{border:0;border-radius:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  #view .ar-strip>div{padding:12px 0 12px 12px}
  #view .ar-strip>div:nth-child(odd){padding-left:0}
  #view .ar-strip .tot{background:none}
  #view .mstat{border:0;border-radius:0;background:none;padding-left:0;padding-right:0}
  #view .mstat.due b,#view .mstat.due .v{color:var(--ink)}
  #view .bigsearch{border:1px solid var(--line);box-shadow:none;background:var(--sunk)}
}

/* customer link page (quote #/q/, invoice #/v/): quiet title in the top bar; on phone the title comes first and the two buttons share one row */
.doc-preview .doc-bar .watermark{background:none;border:0;padding:0;border-radius:0;color:var(--ink);font-weight:600;font-size:14px}
.doc-preview .doc-note.gone{max-width:828px;margin:0 auto 16px}
@media (max-width:640px){
  .doc-preview .doc-bar .watermark{order:0;flex-basis:100%}
  .doc-preview .doc-bar-act{flex-basis:100%}
  .doc-preview .doc-bar-act .btn{flex:1;justify-content:center}
}

/* Line type-ahead (Oct 28 2026): the catalog search under a line's name. One floating list, same data as the photo picker; hairlines, 8px grid, tabular prices. */
.ta{position:fixed;z-index:55;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:auto;overscroll-behavior:contain;animation:fade .12s var(--ease)}
.ta[hidden]{display:none}
.ta-g{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 12px;cursor:pointer;border-top:1px solid #F0EFEB}
.ta-g:first-child{border-top:0}
.ta-g.on{background:var(--hover)}
.ta-im{width:40px;height:40px;border-radius:var(--r-sm);object-fit:cover;background:var(--sunk);display:grid;place-items:center;color:var(--muted)}
.ta-im svg{width:18px;height:18px}
.ta-m{display:flex;flex-direction:column;min-width:0}
.ta-n{font-weight:600;font-size:var(--fs-15);line-height:20px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
mark.fzm{background:var(--green-tint-2);color:inherit;border-radius:3px} /* the shared fuzzy matcher's matched letters (fzMark), every search */
.ta-c{font-size:var(--fs-12);line-height:16px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ta-szs{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
.ta-o{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;min-width:112px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-size:var(--fs-13);white-space:nowrap;cursor:pointer;transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
.ta-o b{font-weight:600;color:var(--ink)}
.ta-sz{color:var(--muted);font-weight:500}
.ta-o.on{border-color:var(--leaf);background:var(--green-tint);box-shadow:inset 0 0 0 1px var(--leaf)}
.ta-o.off b{color:var(--muted)}
.ta-g.one .ta-o,.ta-g.one .ta-o.on{justify-content:flex-end;border-color:transparent;background:none;box-shadow:none;padding:0}
.ta-ft{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-top:1px solid var(--line);background:#fff;font-size:var(--fs-12);line-height:16px;color:var(--muted)}
.ta-k{display:flex;gap:4px;flex:none}
@media (max-width:640px){
  .ta-g{grid-template-columns:44px minmax(0,1fr);gap:4px 12px;padding:8px 12px}
  .ta-g.one{grid-template-columns:44px minmax(0,1fr) auto}
  .ta-im{width:44px;height:44px;grid-row:span 2}
  .ta-g.one .ta-im{grid-row:auto}
  .ta-szs{grid-column:2;justify-content:flex-start}
  .ta-g.one .ta-szs{grid-column:auto}
  .ta-o{height:40px;padding:0 12px}
  .ta-k{display:none}
}

/* ---------- UI fixes (Oct 28 2026): Repeat in one dialog (fix 1) ---------- */
.rp-from{margin-top:2px}
.rp{display:flex;flex-direction:column;gap:16px}
.rp-kind{align-self:flex-start}
.rp-when{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rp-when .f{margin:0}
.rp-lines{border-top:1px solid var(--line);max-height:264px;overflow:auto}
.rp-line{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--fs-15)}
.rp-q{min-width:32px;color:var(--muted)}
.rp-n{flex:1;min-width:0}
.rp-tot{display:flex;flex-direction:column;gap:4px;margin-top:8px;font-size:var(--fs-14);color:var(--ink-2)}
.rp-tot>div{display:flex;justify-content:space-between;gap:16px}
.rp-tot .rp-total{color:var(--ink);font-size:var(--fs-18);padding-top:8px;margin-top:4px;border-top:1px solid var(--line)}
.rp-addr{display:flex;align-items:center;gap:8px;margin-top:8px}
.rp-addr svg{width:16px;height:16px;flex:none}
.rp-need{margin-top:8px}
.rp-opts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.rp-modal .modal-foot .btn.primary{min-width:168px}

/* ---------- UI fixes (Oct 28 2026): the customer's page on a phone (fix 2): one readable column under 640px; desktop keeps the paper ---------- */
.pv-m{display:none}
@media (max-width:640px){
  .doc-preview .pv-paper{display:none}
  .pv-m{display:block;background:#fff;font-size:16px;line-height:1.45;color:var(--ink)}
  .pv-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 16px 8px}
  .pv-logo{height:32px;width:auto}
  .pv-no{font-size:16px;color:var(--muted);font-variant-numeric:tabular-nums}
  .pv-cust{font-size:24px;line-height:1.25;font-weight:650;letter-spacing:-.01em;margin:0;padding:8px 16px 0}
  .pv-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 16px 16px;border-bottom:1px solid var(--line)}
  .pv-total span{font-size:16px;color:var(--muted)}
  .pv-total b{font-size:28px;font-weight:650;letter-spacing:-.02em}
  .pv-facts{margin:0;padding:8px 16px;border-bottom:1px solid var(--line)}
  .pv-facts>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:8px 0}
  .pv-facts dt{font-size:16px;color:var(--muted)}
  .pv-facts dd{margin:0;font-size:16px}
  .pv-items .zph-n b,.pv-items .zph-i > b{font-size:16px}
  .pv-items .zph-n b{white-space:normal}
  .pv-items .zph-n span{font-size:16px}
  .pv-items .zph-t{font-size:16px}
  .pv-items .zph-t.t,.pv-items .zph-t.bd{font-size:16px}
  .pv-notes{padding:16px;font-size:16px;color:var(--ink-2);white-space:pre-line;border-bottom:1px solid var(--line)}
  .doc-preview .pv-m + .doc-sheet + .paper-cta{margin-top:16px}
}

/* ---------- UI fixes (Oct 28 2026): editor on a computer (fix 3): the lines first, the customer box (history folded) under them; dates never wrap ---------- */
@media (min-width:981px){
  .ed-main > .items-panel{order:-1}
}
.bx-doc .tiny{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- UI fixes (Oct 28 2026): Zoho history (fix 5): system events folded behind one toggle ---------- */
.tl li.zsys{display:none}
.tl.show-sys li.zsys{display:grid}
.tl li.zsys b{font-weight:500;color:var(--muted)}
.zsys-tog{display:inline-flex;align-items:center;min-height:32px;margin:0 24px 16px;padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--green-2);cursor:pointer}
.zsys-none{padding-bottom:0}

/* ---------- UI fixes (Oct 28 2026): Home has one search (fix 6); Repeat an order = recent customers + search ---------- */
.app.z-home .zsearch,.app:has(.zl-search) .zsearch{visibility:hidden} /* ONE search on Home and on lists (the page's own); audit #6 */
.rpk{display:flex;flex-direction:column;gap:12px}
.rpk-h{margin-top:4px}
.rpk-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.rpk-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 0;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.rpk-row:hover{background:var(--hover)}
.rpk-row > svg{width:16px;height:16px;color:var(--muted);flex:none}
.rpk-n{flex:1;min-width:0;display:flex;flex-direction:column}
.rpk-n b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpk-t{font-weight:600;color:var(--ink-2)}
.rpk-empty{padding:16px 0}

/* ---------- UI fixes (Oct 28 2026): Home › Needs you is ONE list (fix 7): customer, number, total, status, one action ---------- */
.zd-do{gap:12px}
.zd-do > .grow{color:var(--ink);text-decoration:none}
.zd-do > .grow b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zd-amt{flex:none;min-width:80px;text-align:right;font-weight:600}
.zd-do > .btn{flex:none;min-width:72px;justify-content:center}
@media (max-width:640px){
  .zd-recv-n{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:16px}
  .zd-recv-n > div:first-child{grid-column:1/-1}
  .zd-recv-n > div:nth-child(2){padding-left:0;border-left:0}
  .zd-do > .grow .s2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ---------- UI fixes (Oct 28 2026): customer page in style A on a computer too (fix 8): hairline sections, no boxed cards ---------- */
.zcrec .panel{border:0;border-radius:0;background:none;border-top:1px solid var(--line)}
.zcrec .panel > .section{padding-left:0;padding-right:0}
.zcrec .mstats{gap:0}
.zcrec .mstat{border:0;border-left:1px solid var(--line);border-radius:0;background:none;padding:4px 16px}
.zcrec .mstat:first-child{border-left:0;padding-left:0}
.zcrec .mstat.due b{color:var(--ink)}
.zcrec .ztabs.ctabs{margin-bottom:0}

/* Google Maps (Oct 29 2026): address suggestions (the type-ahead's list, above dialogs) and the drive time row. Display only; never on the paper. */
.ta.geo{z-index:70}
.ta-g.geo-g{grid-template-columns:32px minmax(0,1fr);min-height:48px}
.geo-g .ta-im{width:32px;height:32px;color:var(--green-3)}
.gdrv{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-height:40px;font-size:var(--fs-13);line-height:20px;font-variant-numeric:tabular-nums lining-nums}
.gdrv-ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-sm);background:var(--green-tint);color:var(--green-3)}
.gdrv-ic svg{width:16px;height:16px}
.gdrv-t{flex:1 1 200px;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.gdrv-t b{font-weight:600;color:var(--ink)}
.gdrv-t i{font-style:normal;color:var(--muted)}
.gdrv-go{flex:none}
.gdrv-wrap:not(:empty){margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.zdrive:not(:empty){padding:8px 24px;border-bottom:1px solid var(--line)}
.next2 .zdrive:not(:empty){flex:0 1 auto;min-width:0;padding:0;border:0}
.next2 .gdrv{min-height:0;flex-wrap:nowrap;gap:8px}
.next2 .gdrv-ic{width:26px;height:26px}
.next2 .gdrv-t{flex:0 1 auto;white-space:nowrap}
@media (max-width:640px){
  .gdrv-go{width:100%;justify-content:center;height:44px}
}
@media (max-width:980px){
  .zdrive:not(:empty){padding:8px 16px}
}
/* Density pass (Oct 29, Soho: "no space and scrolling"): an item line is a name row plus one short row. The layout follows the width of the items column, not the screen:
   wide = name, qty, amount, buttons on one row and the price + description below; narrow (phones, the 1024 editor) = name + amount, price, then qty + buttons, and an empty description shows when the line is open or focused */
@container lines (min-width:520px){
  .line.it{grid-template-columns:40px minmax(0,1fr) 104px 84px 60px;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center}
  .line.it > .thumb{grid-column:1;grid-row:1 / span 2;width:40px;height:40px;align-self:center}
  .lbody{display:contents}
  .lbody > *{grid-column:2 / -1}
  .lbody > :first-child{grid-column:2;grid-row:1;min-width:0}
  .lbody > .v{grid-column:2;grid-row:2;min-width:0;line-height:18px}
  .lbody > .note{grid-column:3 / -1;grid-row:2;margin-top:0;min-width:0}
  .lbody > .lh{grid-row:3}
  .lbody > .ldet{grid-row:4}
  .line.it > .qty{grid-column:3;grid-row:1;height:32px}
  .line.it > .amt{grid-column:4;grid-row:1}
  .line.it > .lbtns{grid-column:5;grid-row:1;align-self:center;padding-top:0}
  .lbody .desc{min-height:26px;height:26px;padding-top:4px}
}
@container lines (max-width:519.98px){
  .lines.can-drag > .line{padding-left:32px}
  .line.it{grid-template-columns:36px minmax(0,1fr) auto;column-gap:8px;row-gap:2px;padding:8px 0}
  .line.it > .thumb{grid-column:1;grid-row:1 / span 2;width:36px;height:36px;align-self:start;margin-top:2px}
  .lbody{display:contents}
  .lbody > *{grid-column:1 / -1}
  .lbody > :first-child{grid-column:2;grid-row:1;min-width:0;align-self:center}
  .lbody > .v{grid-column:2 / -1;grid-row:2;min-width:0;line-height:18px}
  .lbody > .note{grid-row:4;margin-top:0}
  .line.it:not(.open):not(:focus-within) .lbody > .note:has(> textarea:placeholder-shown){display:none}
  .lbody > .lh{grid-row:5}
  .lbody > .ldet{grid-row:6}
  .line.it > .amt{grid-column:3;grid-row:1;margin:0;justify-self:end;align-self:center}
  .line.it > .qty{grid-column:1 / 3;grid-row:3;width:120px;justify-self:start;margin-top:4px}
  .line.it > .lbtns{grid-column:3;grid-row:3;padding-top:0;align-self:center;margin-top:4px}
}
/* Scrollbars are hidden, so a strip that scrolls sideways on a phone fades at its right edge to show there is more */
@media (max-width:640px){
  .ztabs,.ctabs,.rep-tabs,.admin-tabs{padding-right:24px!important;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
}
/* the record's paper: terms in 3 columns when the paper is wide; on a big screen the progress and history sit beside the paper */
@container (min-width:760px){
  .zp-terms{columns:3!important;column-gap:28px}
}
@media (min-width:1700px){
  .zrec.xd .canvas{display:grid;grid-template-columns:minmax(0,1040px) minmax(300px,380px);justify-content:center;align-items:start}
  .zrec.xd .canvas > *{max-width:none}
  .zrec.xd .z4{grid-template-columns:1fr;position:sticky;top:76px}
}
/* customer page: contacts and the order details in two columns when there is room */
@container (min-width:640px){
  .c-side .list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
  .c-side .list > .li:nth-child(2){border-top:0}
  .c-side .kv{grid-template-columns:110px minmax(0,1fr) 110px minmax(0,1fr)}
}
@container (min-width:1000px){
  .c-side .list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .c-side .list > .li:nth-child(3){border-top:0}
}
.zs-pane .cols-main.ctabs-wrap[data-ctab="overview"]{grid-template-columns:minmax(0,1fr)}
/* 981–1180px: the record takes the whole width (the side list would leave it too narrow); the list columns tighten */
@media (max-width:1180px){
  .zsplit{display:block}
  .zs-list{display:none}
  .zc{padding:4px 8px}
  .zc.grow{min-width:150px}
  .zc.cnum{flex-basis:136px}
  .zc.r{flex-basis:100px}
}

/* ===== UI round 2 (Soho Oct 29 2026, "All") ===== */
/* 5. customer Comments: people first; Zoho's own activity folded under one small toggle */
.cm-list{display:flex;flex-direction:column}
.cm-row{padding:8px 0;border-bottom:1px solid var(--line)}
.cm-row:last-child{border-bottom:0}
.cm-t{font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.cm-s{font-size:12px;color:var(--muted);margin-top:2px}
.cm-row.sys .cm-t{color:var(--muted);font-size:13px}
.zh-act{margin-top:8px;border-top:1px solid var(--line)}
.zh-act summary{display:flex;align-items:center;gap:8px;min-height:40px;cursor:pointer;list-style:none;font-size:13px;font-weight:500;color:var(--muted)}
.zh-act summary::-webkit-details-marker{display:none}
.zh-act summary>span:first-of-type{white-space:nowrap;flex:none}
.zh-act summary svg{transition:transform var(--t) var(--ease);flex:none;transform:rotate(-90deg)}
.zh-act[open] summary svg{transform:none}
.zh-act-h{font-size:12px;font-weight:400;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.zh-act-b .btn{margin-top:8px}
/* 7. friendly empty states: icon, one line, one action; compact inside lists and side panels */
.zempty .empty,.c-side .empty,#zhCom .empty{padding:28px 16px}
.zempty .empty .ttl,.c-side .empty .ttl,#zhCom .empty .ttl{font-family:var(--sans);font-size:16px;font-weight:600}
.c-side .empty>svg,#zhCom .empty>svg,.zempty .empty>svg{margin-bottom:12px}
/* 4. phone swipe on list rows: the row slides left over its actions (touch screens only; the computer is unchanged) */
.zswipe{position:absolute;top:0;right:0;bottom:0;display:flex;z-index:0}
.zsw{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:68px;padding:0;border:0;font:600 12px/1 var(--sans);cursor:pointer}
.zsw svg{width:18px;height:18px}
.zsw-send{background:var(--leaf);color:var(--on-leaf)}
.zsw-repeat,.zsw-newq{background:#F1F0EC;color:var(--ink)}
.zsw-call{background:#EAF1FB;color:#2F5E9E}
/* 2. quick filter chips share the tab row: no extra height; on a phone the one row scrolls sideways with the same edge fade as the tab strips */
.zstrip{display:flex;align-items:center;gap:20px;overflow-x:auto;border-bottom:1px solid var(--line)}
.zstrip .ztabs{flex:none;overflow:visible;border-bottom:0;-webkit-mask-image:none;mask-image:none;padding-right:0!important}
.qf{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none;padding-left:16px;border-left:1px solid var(--line)}
.qf-c{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:#fff;color:var(--muted);font:500 13px/1 var(--sans);white-space:nowrap;cursor:pointer}
.qf-c:hover{color:var(--ink)}
.qf-c.on{background:#EEF5E1;border-color:#CFE3A8;color:#3F6B12}
.qf-c.on .zct{color:#3F6B12}
@media (max-width:640px){
.zstrip{gap:16px;padding-right:24px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.qf{padding-left:12px;gap:6px}
.qf-c{height:30px}
.zh-act-h{display:none}
}
@media (max-width:768px){
/* 3. the phone editor's sticky total bar: total, item count and the one main step, above the iPhone home bar; hidden while the item sheet is up or a field has the keyboard */
.mobilebar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;min-height:60px;padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);align-items:center;gap:12px}
.mobilebar .t{font-family:var(--sans);font-size:20px;color:var(--ink);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.mobilebar .mb-k{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.mobilebar .btn{margin-left:auto}
.mobilebar #mbAct .btn{min-height:44px}
#editor{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
#editor.ip-on .mobilebar,#editor:has(:is(input,textarea):focus) .mobilebar{visibility:hidden}
}
@media (hover:none) and (pointer:coarse){
#zlBody .zlr{position:relative;overflow:hidden;touch-action:pan-y}
#zlBody .zr-m{position:relative;z-index:1;background:#fff;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
#zlBody .zlr.zrow-drag .zr-m{transition:none}
}

/* ===== UI round 3 (Soho, Oct 29 2026 10:12 PM "All not 1"): pins, the customer hover card, product tiles, the Calendar, Home's Today strip, the Undo bar, the phone + ===== */
.pin-btn{display:inline-grid;place-items:center;width:26px;height:26px;margin:0 2px 0 -6px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--line-in);cursor:pointer;flex:none;vertical-align:middle}
.pin-btn svg{width:15px;height:15px}
.pin-btn:hover{background:var(--hover);color:var(--ink-2)}
.pin-btn.on{color:var(--leaf-press)}
.pin-btn.on svg{fill:var(--leaf)}
.zlr .pin-btn{opacity:0}
.zlr:hover .pin-btn,.zlr .pin-btn.on,.zlr .pin-btn:focus-visible{opacity:1}
.zrec-top h1 .pin-btn{margin:0 0 0 6px;width:30px;height:30px;color:var(--muted)}
.zrec-top h1 .pin-btn.on{color:var(--leaf-press)}
.hc .pin-btn{margin:0 -4px 0 0;width:30px;height:30px}
.pin-i{width:13px;height:13px;color:var(--leaf-press);fill:var(--leaf);vertical-align:-2px;margin-right:4px}
.hc{position:fixed;z-index:90;width:360px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:12px 14px;font-size:13px;animation:pop .14s var(--ease)}
.hc.sheet{left:0;right:0;bottom:0;width:auto;max-width:none;border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));z-index:95}
.hc-scrim{z-index:94}
.hc-h{display:flex;align-items:center;gap:10px}
.hc-t{display:flex;flex-direction:column;min-width:0;flex:1}
.hc-t a{color:var(--ink);text-decoration:none;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-t a:hover{text-decoration:underline}
.hc-s{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 8px;padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hc-f > div{display:flex;flex-direction:column;min-width:0}
.hc-f .lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.hc-f b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-f b.r{color:var(--red)}
.hc-m{font-size:12px;line-height:1.35;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hc-c{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.hc-c a,.hc-c > span{display:flex;align-items:center;gap:8px;color:var(--ink-2);text-decoration:none;min-width:0}
.hc-c a:hover{color:var(--ink)}
.hc-c span span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-c svg{width:14px;height:14px;color:var(--muted);flex:none}
.hc-a{display:flex;gap:8px}
.hc-a .btn{flex:1;justify-content:center}
.hc-err{padding:8px 0}
.hc .sk{display:block}
.zlr[data-hcrow],.cal-it,.tdy-r{-webkit-touch-callout:none}
.ip-head .ipv{margin-left:auto;padding:2px}
.ipv button{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px;font-size:12px}
.ipv button svg{width:14px;height:14px}
.ip-head .ip-done{margin-left:8px}
.ip-cats{display:block}
.ip-cat{margin-bottom:14px}
.ip-ch{display:flex;align-items:baseline;gap:6px;margin:0 0 8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.ip-ch span{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.ip-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.itile.tap{cursor:pointer;user-select:none}
.itile.tap .it-b{gap:4px;padding:6px 8px 8px}
.itile.tap .it-n{font-size:13px;line-height:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pk .itile.tap .it-sizes,.itile.tap .it-sizes{flex-direction:row;flex-wrap:wrap;gap:4px}
.pk .itile.tap .sz,.itile.tap .sz{width:auto;min-height:24px;padding:0 6px;font-size:12px}
.itile.tap .sz:not(.on) span{display:none}
.itile.tap .sz.on em{display:none} /* the photo’s − n + already shows the chosen size’s count; the badge only marks the other sizes */
.itile.tap .it-qty{right:6px;bottom:6px}
.itile.tap .it-btn{width:30px;height:30px;font-size:16px}
.itile.bump{animation:ipBump .22s var(--ease)}
@keyframes ipBump{50%{transform:scale(.96)}}
.ipl-wrap{display:flex;flex-direction:column}
.ip-usual.ipl-wrap{display:flex;overflow:visible}
.itile.ipl{flex-direction:row;align-items:center;gap:10px;min-height:48px;padding:4px 4px 4px 2px;border:0;border-bottom:1px solid var(--line);border-radius:0;cursor:pointer}
.itile.ipl:hover{background:var(--hover);border-color:var(--line)}
.itile.ipl.picked{box-shadow:none;border-color:var(--line);background:var(--green-tint)}
.ipl-img{width:40px;height:40px;border-radius:6px;overflow:hidden;background:#F7F6F2;flex:none;display:grid;place-items:center}
.ipl-img img{width:100%;height:100%;object-fit:cover;display:block}
.ipl-img svg{width:18px;height:18px;color:var(--muted)}
.ipl-n{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ipl-n b{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ipl-n .it-sizes{gap:4px}
.ipl-n .sz{min-height:22px;padding:0 6px;font-size:12px;width:auto}
.ipl-p{font-size:13px;color:var(--ink-2);white-space:nowrap}
.ipl-q{font-size:12px;color:var(--green-2);font-variant-numeric:tabular-nums}
.itile.ipl .it-btn{width:32px;height:32px;font-size:16px;flex:none}
.tdy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 12px}
.tdy-c{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px 8px;min-width:0;background:var(--surface)}
.tdy-h{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;text-decoration:none}
.tdy-h svg{width:14px;height:14px;flex:none}
.tdy-h .tdy-go{margin-left:auto;color:var(--muted)}
.tdy-h:hover .tdy-go{color:var(--ink)}
.tdy-big{display:flex;align-items:baseline;gap:8px;margin:2px 0 4px;color:var(--ink);text-decoration:none;min-width:0}
.tdy-big b{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.tdy-big span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tdy-rows{display:flex;flex-direction:column}
.tdy-r{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;min-height:28px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:13px}
.tdy-r:hover{background:var(--hover)}
.tdy-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.tdy-s{font-size:12px;color:var(--muted);white-space:nowrap}
.tdy-v{font-size:13px;font-weight:600}
.tdy-none{padding:5px 0 3px;border-top:1px solid var(--line)}
.tdy-more{display:block;font-size:12px;font-weight:600;color:var(--green-2);text-decoration:none;padding-top:4px}
.tdy .sk{display:block}
.ubar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:14px;min-height:46px;padding:6px 6px 6px 16px;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow-lg);font-size:14px;color:var(--ink);overflow:hidden;max-width:calc(100vw - 24px);animation:pop .18s var(--ease)}
.ub-t{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ub-b{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid #7AA62C;border-radius:8px;background:var(--leaf);color:var(--on-leaf);font:inherit;font-weight:600;cursor:pointer;flex:none}
.ub-b:disabled{opacity:.7;cursor:default}
.ub-b svg{width:15px;height:15px}
.ub-time{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--leaf);transform-origin:left;animation:ubTime linear forwards}
@keyframes ubTime{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.fab{display:none;position:fixed;right:16px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:44;width:54px;height:54px;border-radius:50%;place-items:center;padding:0;border:1px solid #7AA62C;background:var(--leaf);color:var(--on-leaf);box-shadow:0 8px 20px -6px rgba(60,90,20,.45),0 2px 4px rgba(27,26,24,.12);-webkit-touch-callout:none;user-select:none;touch-action:manipulation;cursor:pointer;transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.fab svg{width:24px;height:24px;stroke-width:2.2}.fab.fab-away{transform:translateY(calc(100% + 96px));opacity:0;pointer-events:none}
.fab:active{transform:scale(.94)}
body:has(.zrow-open) .fab,body:has(.modal) .fab,body:has(.hc.sheet) .fab,body:has(.pmenu) .fab,body:has(.ubar) .fab{opacity:0;pointer-events:none}
.cal-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.cal-t h1{margin:0}
.cal-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.cal-nav .flip{transform:rotate(180deg)}
.cal-lbl{font-size:16px;font-weight:600;min-width:160px;margin-left:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cal-legend{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 8px}
.cal-legend span{display:inline-flex;align-items:center;gap:5px}
.cal-sum{margin-left:auto;color:var(--ink-2)}
.cdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#B9B5AC;flex:none}
.cdot.blue{background:var(--blue)}
.cdot.green{background:#5E8F22}
.cdot.amber{background:#D19A2A}
.cdot.red{background:var(--red)}
.cdot.leaf{background:var(--leaf)}
.cdot.outline{background:transparent;box-shadow:inset 0 0 0 1.5px var(--faint)}
.cal-grid{border-top:1px solid var(--line);border-left:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.cal-grid.m,.cal-grid.w{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-grid.sk-grid{padding:12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cal-wd{display:contents}
.cal-wd span{padding:5px 8px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--sunk)}
.cal-d{min-height:112px;padding:3px 3px 5px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0;display:flex;flex-direction:column;gap:1px}
.cal-d.out{background:#FBFBFA}
.cal-d.out .cal-n,.cal-d.out .cal-it{opacity:.6}
.cal-dh{display:flex;align-items:center;gap:6px;padding:0 2px 2px}
.cal-n{border:0;background:none;padding:0 5px;height:22px;min-width:22px;border-radius:11px;font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;font-variant-numeric:tabular-nums}
.cal-n:hover{background:var(--hover)}
.cal-d.today .cal-n{background:var(--leaf);color:var(--on-leaf)}
.cal-c{font-size:12px;color:var(--muted);margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.cal-it{display:flex;align-items:center;gap:5px;min-width:0;height:21px;padding:0 4px;border-radius:5px;color:var(--ink);text-decoration:none;font-size:12px;line-height:1}
.cal-it:hover{background:var(--hover)}
.cal-tm{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;flex:none}
.cal-tm.nr{font-style:italic;text-decoration:underline dotted;text-underline-offset:2px} /* delivery time standing in: no ready time (Calendar by ready time, Nov 2) */
.cal-nr{flex:none;font-size:12px;line-height:16px;padding:0 6px;border-radius:999px;border:1px dashed var(--line-2,#c9ced6);color:var(--muted);white-space:nowrap}
.cal-grid.w .cal-nr{display:none} /* a week column is too narrow for the tag (it pushed the status pill into the next day): the dotted italic time + the legend say it there */
.cal-cu{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;font-weight:500}
.cal-amt{font-size:12px;color:var(--ink-2);flex:none;font-variant-numeric:tabular-nums}
.cal-more{border:0;background:none;padding:0 5px;height:20px;text-align:left;font:inherit;font-size:12px;color:var(--green-2);cursor:pointer;font-weight:600}
.cal-more:hover{text-decoration:underline}
.cal-d [hidden]{display:none}
.cal-col{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:440px;min-width:0;padding:0 0 8px}
.cal-col.today{background:var(--green-tint)}
.cal-ch{display:flex;flex-direction:column;padding:6px 8px;border-bottom:1px solid var(--line)}
.cal-ch b{font-size:13px}
.cal-ch .cal-c{margin:0;min-height:15px}
.cal-it.full{height:auto;flex-direction:column;align-items:stretch;gap:3px;padding:6px 8px;border-bottom:1px solid var(--line);border-radius:0}
.cal-l1,.cal-l2{display:flex;align-items:center;gap:5px;min-width:0}
.cal-l2{justify-content:space-between;padding-left:13px}
.cal-meta{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cal-meta b{color:var(--ink-2);font-weight:600}
.cal-l2 .pill{flex:none}
.cal-none{padding:8px}
.cal-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:8px}
.cal-wk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;height:56px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);font:inherit;color:var(--ink);cursor:pointer}
.cal-wk span{font-size:12px;color:var(--muted)}
.cal-wk b{font-size:16px;font-variant-numeric:tabular-nums;line-height:1.2}
.cal-wk i{font-style:normal;font-size:12px;font-weight:600;color:var(--green-2);height:13px;line-height:13px}
.cal-wk.on{border-color:var(--leaf);background:#F5F9EC;box-shadow:0 0 0 1px var(--leaf)}
.cal-wk.today b{color:var(--green-2)}
.cal-dayh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.cal-list .cal-it.full{min-height:56px;justify-content:center;padding:8px 4px}
.cal-list .cal-cu{font-size:14px}
@media (max-width:1180px){
  .tdy-s{display:none}
}
@media (max-width:899px){
  .fab{display:none}
  body:has(#app.has-fab):not(:has(#zNew)) .fab{display:grid} /* a list has its own New: no floating + over its amounts */
  .app.has-fab #view{padding-bottom:84px}
  .ubar{bottom:calc(78px + env(safe-area-inset-bottom));left:12px;right:12px;transform:none;max-width:none}
  body:has(#app.no-tabbar) .ubar{bottom:calc(86px + env(safe-area-inset-bottom))}
  .app.z-home .zsearch,.app:has(.zl-search) .zsearch{visibility:visible;flex:none;width:auto;border:0;background:none;box-shadow:none}
  .app.z-home .zsearch .zs-in,.app:has(.zl-search) .zsearch .zs-in{display:none}
  .app.z-home .zsearch .zs-mod,.app:has(.zl-search) .zsearch .zs-mod{border-right:0}
}
@media (max-width:760px){
  .cal-head{gap:8px;margin-bottom:8px}
  .cal-nav{margin-left:0;width:100%}
  .cal-lbl{margin-left:auto;min-width:0;font-size:14px}
  .cal-legend{display:none}
}
@media (max-width:640px){
  .tdy{gap:8px;margin-bottom:10px}
  .tdy-c{padding:8px 10px}
  .tdy-h{font-size:12px;letter-spacing:.03em;gap:4px;align-items:flex-start}
  .tdy-h .tdy-go,.tdy-rows,.tdy-more{display:none}
  .tdy-big{flex-direction:column;align-items:flex-start;gap:0;margin:2px 0 0}
  .tdy-big b{font-size:20px}
  .tdy-big span{white-space:normal;font-size:12px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .ip-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .ip-head .ipv span{display:none}
}

/* ---------- Full screen on big monitors (Soho, Oct 30 10:01 AM: "The app doesn't cover the full screen") ---------- */
/* the page area takes focus after each page change (for screen readers); it never draws a ring around the whole page */
#view:focus{outline:none}
/* lists: the fixed columns share the extra width with the name column, so a wide table spreads out instead of leaving one huge gap */
@media (min-width:1600px){
  .zr-d .zc{flex-grow:1}
  .zr-d .zc.grow{flex-grow:3}
}
/* record header on a computer: the title keeps its own width (number + status); when the buttons don't fit beside it they move to a second row instead of sliding over the number */
@media (min-width:1401px){
  .z1-t{flex-basis:0;min-width:min-content}
  .z1-crumb{contain:inline-size} /* combined3: the crumb only — on .z1-sub it cut Total · Paid · Balance (lone "·", Balance hidden) */
  .z1-sub{display:grid;grid-auto-flow:column;grid-template-columns:minmax(0,max-content);grid-auto-columns:max-content;justify-content:start} /* combined3: the title's minimum width counts the amounts, not the customer name (its column can shrink to 0), so the buttons stay beside it and a long name gives way (…), never Balance */
  .z1-sub:not(:has(> a,> .z1-n)){grid-template-columns:none} /* combined4: no customer name (no empty span any more): the amounts are first, so no column may shrink to 0 */
}
/* calendar month: the grid fills the window down to the bottom edge (no page scroll); week: the columns reach at least the bottom edge */
@media (min-width:1100px) and (min-height:640px){
  .page.cal{display:flex;flex-direction:column;min-height:calc(100vh - 60px);padding-bottom:20px}
  .page.cal[data-view="month"]{height:calc(100vh - 60px)}
  .page.cal .cal-body{flex:1;min-height:0;display:flex;flex-direction:column}
  .page.cal .cal-grid{flex:1;min-height:0}
  .page.cal .cal-grid.m{grid-template-rows:auto;grid-auto-rows:minmax(0,1fr)}
  .page.cal .cal-d{min-height:0;overflow:hidden}
}

/* New / Edit Customer: Zoho Books' New Customer layout (Oct 30 2026) */
.cform .cf-row{display:grid;grid-template-columns:170px minmax(0,1fr);gap:14px;align-items:center;margin:0 0 12px}
.cform .cf-l{font-size:var(--fs-14);color:var(--ink-2)}
.cform .req-l,.cform .req{color:#D6141D}
.cform .req{font-weight:600;margin-left:1px}
.cform .cf-c{min-width:0;max-width:560px}
.cform .cf-pc{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1fr);gap:8px}
.cform .cf-ph{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.cform .seg-radio{display:flex;gap:22px;align-items:center;min-height:40px;padding:0 8px;border-radius:var(--r-md)}
.cform .seg-radio label{display:inline-flex;gap:6px;align-items:center;font-size:var(--fs-14);cursor:pointer}
.cform .seg-radio.err{border:1px solid var(--red)}
.cform .cf-h{margin:22px 0 12px;padding-top:16px;border-top:1px solid var(--line)}
.cform .cf-note{margin:0 0 4px}
.cform .cf-sugg{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cform .cf-sugg:empty{display:none}
.cform .chip{border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:4px 10px;font:inherit;font-size:var(--fs-12);color:var(--ink);cursor:pointer;min-height:30px}
.cform .chip:hover{background:var(--hover)}
.cform .cf-addr2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.cform .cf-sub{font-weight:600;font-size:var(--fs-14);margin:0 0 10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cform .cf-sub .linkbtn{min-height:0;padding:0}
.cform .cf-cp-h,.cform .cf-cp-row{display:grid;grid-template-columns:100px repeat(5,minmax(0,1fr));gap:6px}
.cform .cf-cp-h{font-size:var(--fs-12);color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.cform .cf-cp-row{margin-bottom:6px}
.cform .cf-err{margin-bottom:14px}
@media (max-width:720px){
  .cform .cf-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .cform .cf-pc{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cform .cf-pc select{grid-column:1/-1}
  .cform .cf-addr2{grid-template-columns:minmax(0,1fr);gap:18px}
  .cform .cf-cp-h{display:none}
  .cform .cf-cp-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-bottom:8px;border-bottom:1px solid var(--line)}
  .cform .cf-cp-row select{grid-column:1/-1}
}

/* ---------- Live app (Oct 30 2026, Soho: "bubbly, up and down … a live acting thing"). Waiting breathes (~2 s), a landing flashes green, new rows slide in,
   changed rows glow once. Reduced motion: everything above is switched off by the one prefers-reduced-motion rule. ---------- */
@keyframes lvBreath{0%,100%{box-shadow:0 0 0 1px rgba(136,183,54,.28),0 0 0 0 rgba(136,183,54,0)}50%{box-shadow:0 0 0 1px rgba(136,183,54,.85),0 0 0 4px rgba(136,183,54,.22)}}
@keyframes lvGlow{0%,100%{box-shadow:inset 0 0 0 1px rgba(136,183,54,.22);background-color:#FBFCF8}50%{box-shadow:inset 0 0 0 2px rgba(136,183,54,.8);background-color:#F2F8E6}}
@keyframes lvLand{0%{box-shadow:0 0 0 0 rgba(136,183,54,.6);background-color:#E9F4D6}100%{box-shadow:0 0 0 14px rgba(136,183,54,0);background-color:transparent}}
@keyframes lvRow{0%{background-color:#E6F2D1}100%{background-color:transparent}}
@keyframes lvSoft{0%{background-color:#F3F8EA}100%{background-color:transparent}}
@keyframes lvIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes lvPop{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.08)}100%{opacity:1;transform:none}}
.pill[data-st="sent"]:not([data-h]),.pill[data-st="unpaid"]:not([data-h]),.pill[data-st="partly_paid"]:not([data-h]),.pill[data-st="awaiting"]:not([data-h]),.pill[data-st="pending"]:not([data-h]),.pill[data-st="on_hold"]:not([data-h]){animation:lvBreath 2s ease-in-out infinite}
.zrec.lv-wait .next2,.zrec.lv-busy .next2{animation:lvGlow 2s ease-in-out infinite}
.zrec.lv-busy .z1-h h1{opacity:.75;transition:opacity .2s}
.zrec.lv-land .z1{animation:lvLand .9s var(--ease) 1}
.zrec.lv-chg .z1{animation:lvSoft 1.4s var(--ease) 1}
.lv-badge{position:absolute;top:calc(100% + 4px);z-index:6;display:inline-flex;align-items:center;height:22px;box-shadow:0 2px 8px rgba(23,33,11,.12);padding:0 10px;border-radius:999px;background:var(--leaf);color:var(--on-leaf);font-size:12px;font-weight:600;white-space:nowrap;animation:lvPop .4s var(--ease) both;transition:opacity .35s,transform .35s}
.lv-badge.lv-out{opacity:0;transform:scale(.9)}
.lv-land{animation:lvRow 1.4s var(--ease) 1}
.lv-chg{animation:lvSoft 1.4s var(--ease) 1}
.lv-in{animation:lvIn .32s var(--ease) both}
.gbtn:active{background:var(--sunk-2);transform:scale(.97)}
.gbtn.busy{pointer-events:none;opacity:.6}
.gbtn.busy::after{content:'';width:11px;height:11px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}

/* ===== Settings & Users (a20): Style A — white, hairlines, 8px grid, one green ===== */
/* Settings (simple Settings, Soho Nov 1): Settings home is the one menu (6 groups + Advanced); a page has only its way back. 8px grid: 8/16/24/32 */
.set-page{max-width:1000px}
.set-back{display:inline-flex;align-items:center;gap:4px;margin-bottom:8px;font-size:var(--fs-13);font-weight:500;color:var(--muted)}
.set-back:hover{color:var(--ink);text-decoration:none}
.set-back svg{width:16px;height:16px}
.set-ask{display:flex;align-items:center;gap:8px;margin:-8px 0 24px}
.set-ask svg{width:14px;height:14px;color:var(--muted)}
.set-q{font-size:var(--fs-12);font-weight:500;color:var(--muted)} /* "Owner only", "Fixed": quiet words beside a label, not a badge */
.set-main{min-width:0}
.set-head{margin-bottom:24px}
.set-search{display:flex;align-items:center;gap:8px;max-width:560px;position:relative}
.set-search svg{position:absolute;left:12px;color:var(--muted)}
.set-search .in{padding-left:36px;height:40px;width:100%}
.set-hits{max-width:560px;border:1px solid var(--line);border-radius:10px;margin-top:8px;overflow:hidden;background:#fff}
.set-hits a{display:flex;flex-direction:column;padding:10px 14px;border-top:1px solid var(--line);color:var(--ink)}
.set-hits a:first-child{border-top:0}
.set-hits a:hover{background:var(--hover);text-decoration:none}
.set-needs{margin:24px 0 0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.set-need{display:flex;align-items:center;gap:16px;padding:8px 16px;min-height:48px;color:var(--ink);border-top:1px solid var(--line);font-size:var(--fs-14)}
.set-need:first-child{border-top:0}
.set-need:hover{background:var(--hover);text-decoration:none}
.set-need svg{color:var(--muted);flex:none;width:16px;height:16px}
.set-need.is-alert{background:var(--amber-tint)}.set-need.is-alert>svg{color:var(--amber)}
.set-need-go{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--amber);white-space:nowrap}
.set-need-at{white-space:nowrap}
.set-need .grow{flex:1;min-width:0}
#zhSet>.set-sec:first-child{border-top:1px solid var(--line);padding-top:24px} /* Zoho history sits under the items list */
.set-need-sub{display:block;margin-top:2px} /* a second line (who, where) under an alert on Security */
.set-sec>.set-needs{margin:0;max-width:none}
.set-sec>.set-needs .set-need>.tiny:last-child{white-space:nowrap}
.dev .grow>.pill{align-self:flex-start} /* “This device”: a pill, not a bar across the row (Security and My account) */
.set-sec-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.set-sec-h>h3{font-size:var(--fs-16)}
.set-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin-top:32px;border-top:1px solid var(--line)}
.set-card{padding:24px 0;border-bottom:1px solid var(--line)}
.set-card-h{display:flex;align-items:center;gap:8px}
.set-card-h svg{color:var(--green-2);width:18px;height:18px}
.set-card h2{font-size:var(--fs-16);font-weight:600}
.set-card p{margin:8px 0}
.set-links{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:var(--fs-14)}
/* the one "Advanced" fold: on Settings home (the rarely used pages) and inside a page (rarely used or technical settings) */
.set-adv{margin-top:24px;border-top:1px solid var(--line)}
.set-adv>summary{display:flex;align-items:center;gap:16px;padding:16px 0;cursor:pointer;list-style:none}
.set-adv>summary::-webkit-details-marker{display:none}
.set-adv>summary .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.set-adv-show{color:var(--green-2);font-weight:600}
.set-adv[open] .set-adv-show{visibility:hidden}
.set-adv-links{padding:0 0 16px}
.set-adv-body>.set-sec:first-child{padding-top:8px;border-top:0}
.set-sub{margin-top:8px}.set-sub>summary{cursor:pointer;color:var(--ink)}.set-sub[open]>summary{margin-bottom:16px}
.set-formfoot{display:flex;justify-content:flex-end;margin-top:16px}
.set-act{margin-top:8px}
.set-ol{margin:0;padding-left:16px}.set-ol li{margin-bottom:8px}
.set-nohit{padding:16px}
.t-red{color:var(--red)}
.set-sec{padding:24px 0;border-top:1px solid var(--line)}
.set-sec:first-child{border-top:0;padding-top:0}
.set-sec>h3{font-size:var(--fs-16);margin-bottom:12px}
.set-rows{display:flex;flex-direction:column}
/* one row = label + one-line help, then a fixed 320px control column: every control starts on the same line (audit #3) */
.set-row{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:center;gap:24px;padding:16px 0;border-top:1px solid var(--line)}
.set-row:first-child{border-top:0}
.set-l{min-width:0}
.set-l label{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.set-l .small{margin-top:4px}
.set-c{min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px;justify-content:flex-start}
.set-c textarea.in,.set-c input.in:not(.num){width:100%}
.set-c select.in{min-width:160px}
.set-unit{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:var(--fs-14)}
.set-unit .in.num{width:96px;text-align:right}
.set-bar{position:sticky;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px 0;background:#fff;border-top:1px solid var(--line);z-index:2}
@media (max-width:980px){.app:not(.no-tabbar) .set-bar{bottom:calc(68px + env(safe-area-inset-bottom))}} /* step 3: with the phone's tab bar showing, the Save bar sticks above it, not under it (it was hidden there on every Settings page) */
.set-link{display:flex;gap:8px}.set-link .in{flex:1;font-variant-numeric:tabular-nums}
.set-tabs{margin-bottom:0}
.set-coming{display:flex;gap:16px;align-items:flex-start;padding:24px;border:1px dashed var(--line-2);border-radius:10px;max-width:560px}
.set-coming svg{color:var(--muted);width:24px;height:24px}
.set-help,.set-acct{max-width:860px}
.u-split{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--line);container:usplit / inline-size}
.u-split.has-sel{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:32px}
.u-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.u-bar .in{width:auto;height:36px;margin-bottom:8px}
.u-row{display:grid;grid-template-columns:minmax(0,1fr) 136px 176px 88px 112px;align-items:center;gap:16px;padding:12px 8px;border-bottom:1px solid var(--line);color:var(--ink)}
.u-row:hover{background:var(--hover);text-decoration:none}
.u-row.on{background:var(--sel-bg);box-shadow:inset 2px 0 0 var(--sel-bar)}
.u-row.u-head,.u-row.u-head:hover{white-space:nowrap;padding-top:8px;padding-bottom:8px;background:none;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.u-who{display:flex;align-items:center;gap:12px;min-width:0}
.u-row .grow{display:flex;flex-direction:column;min-width:0}
.u-row .grow .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-st{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.u-seen{text-align:right;font-variant-numeric:tabular-nums}
.u-list{container-type:inline-size}
@container (max-width:759px){.u-row{grid-template-columns:minmax(0,1fr) 120px 160px}.u-2s,.u-seen{display:none}}
@container (max-width:519px){.u-row{grid-template-columns:minmax(0,1fr) auto}.u-st{display:none}.u-row:has(.u-st.is-locked){grid-template-columns:minmax(0,1fr) auto auto}.u-st.is-locked{display:flex}.u-st.is-locked > :not(.u-lock){display:none}}
.u-close .u-back{display:none}
/* a person open where the list would be squeezed (review SF1: 4 px at 1024): the person fills the space, with a clear way back; phone and 1024 alike */
@container usplit (max-width:759.98px){
  .u-split.has-sel > .u-list{display:none}
  .u-split.has-sel > .u-pane{grid-column:1 / -1}
  .u-card-h{flex-wrap:wrap}
  .u-close{order:-1;flex-basis:100%;width:auto;place-items:center start;color:var(--ink-2);font-size:var(--fs-14);font-weight:500}
  .u-close:hover{background:none;color:var(--ink)}
  .u-close .u-x{display:none}
  .u-close .u-back{display:inline-flex;align-items:center;gap:6px}
}
.u-link{padding:0 0 16px;display:flex;flex-direction:column;gap:8px}
.u-all{display:inline-block;margin-top:12px}
.u-end{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.u-end h3{font-size:var(--fs-14);margin:0 0 8px}
.u-end p{margin:0 0 12px}
.u-card{padding:16px 0}
.u-card-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.u-card-h h2{font-size:var(--fs-20)}
.u-facts{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 16px;margin:0 0 16px;font-size:var(--fs-14);align-items:center}
.u-facts dt{color:var(--muted)}.u-facts dd{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.u-facts .in{height:34px}
.u-acts{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0;border-top:1px solid var(--line)}
.u-seg{margin:16px 0 8px}
.al-f{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.al-f .in{height:36px;width:auto}.al-f [name=q]{flex:1;min-width:200px}
.al-meta{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.al-row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.al-ic{width:28px;height:28px;border-radius:8px;background:var(--sunk);display:flex;align-items:center;justify-content:center;color:var(--muted);flex:none}
.al-t{font-size:var(--fs-14)}
.al-ch{margin-top:2px;overflow-wrap:anywhere}
.al-more summary{cursor:pointer;color:var(--muted);margin-top:4px}
.al-chips{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 8px}
.al-pg{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 0}
.r-wrap{container:rwrap / inline-size}
.r-split{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:start}
.r-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.r-list a{display:flex;flex-direction:column;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--ink)}
.r-list a:hover{background:var(--hover);text-decoration:none}
.r-list a.on{background:var(--sel-bg);box-shadow:inset 2px 0 0 var(--sel-bar)}
/* one rule for the phone and 1024: under 760 px of room the roles become a row of chips above the role (step 3) */
@container rwrap (max-width:759px){.r-split{grid-template-columns:minmax(0,1fr);gap:16px}.r-list{flex-direction:row;flex-wrap:wrap;gap:8px;border-top:0}.r-list a{flex:none;border:1px solid var(--line);border-radius:8px}} /* review step 3 SF3: the chips wrap, so every role is in view (no hidden sideways row) */
.r-lim{display:flex;flex-wrap:wrap;gap:8px 16px;margin:8px 0}
.r-lim-w{margin-top:12px;padding:12px 16px;border:1px solid var(--line);border-radius:8px}
.r-lim-h{display:flex;align-items:center;justify-content:space-between;gap:16px}
.r-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.r-title h2{font-size:var(--fs-20);font-weight:600;margin:0}
.r-name{max-width:320px;margin-bottom:16px}
.r-perms{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,296px),1fr));column-gap:32px}
.r-perms .set-row{padding:8px 0;align-items:flex-start;grid-template-columns:minmax(0,1fr) auto}
.r-perms .set-c{padding-top:2px}
.r-perms .set-row:nth-child(2){border-top:0}
@container rmain (max-width:623px){.r-perms .set-row:nth-child(2){border-top:1px solid var(--line)}}
.r-main{min-width:0;container:rmain / inline-size}
.r-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px 32px}
.r-sum h4{display:flex;align-items:center;gap:8px;font-size:var(--fs-14);font-weight:600;margin:0 0 8px}
.r-sum h4 svg{width:16px;height:16px;color:var(--muted)}
.r-sum ul{margin:0;padding-left:16px;font-size:var(--fs-14);line-height:1.6}
.r-people{display:flex;flex-wrap:wrap;gap:8px}
.r-people a{color:var(--ink)} /* the chip itself is the one .ar-chip */
.r-people a:hover{background:var(--hover);text-decoration:none}
.set-bar .r-who{margin-right:auto}
.dev{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.dev .grow{display:flex;flex-direction:column}
.dev-ic{width:32px;height:32px;border-radius:8px;background:var(--sunk);display:flex;align-items:center;justify-content:center;color:var(--muted)}
/* coming3: a fixed rule (no input), and 2-step login (sign-in step, set-up, backup codes) */
.set-fixed{display:inline-flex;align-items:center;min-height:40px;font-size:var(--fs-14);font-weight:500;color:var(--ink)}
.login-form form.mfa-wide{width:min(480px,100%)}
.mfa-setup{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.mfa-qrbox{padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff;line-height:0;flex:none}
.mfa-qr{width:168px;height:168px;shape-rendering:crispEdges}
.mfa-steps{flex:1 1 200px;display:flex;flex-direction:column;gap:8px;min-width:0}
.mfa-steps ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;color:var(--ink-2)}
.mfa-key{font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.06em;overflow-wrap:anywhere;font-size:var(--fs-15)}
.mfa-open{display:inline-flex;align-items:center;gap:8px}
@media (hover:hover) and (pointer:fine){.mfa-open{display:none}}
.mfa-code{font-size:var(--fs-20);letter-spacing:.24em;font-variant-numeric:tabular-nums}
.mfa-trust{display:flex;flex-direction:column}
.mfa-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--sunk);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.mfa-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.mfa-acts label.f{flex:0 1 240px;margin:0}
.mfa-inline{display:flex;flex-direction:column;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.mfa-sub{font-size:var(--fs-15);margin:16px 0 0;display:flex;align-items:baseline;gap:8px}
.mfa-st{display:inline-flex;align-items:center;gap:8px}
.welcome{padding:24px}
@media (max-width:899px){
  .set-grid{grid-template-columns:minmax(0,1fr);margin-top:24px}
  .set-row{grid-template-columns:minmax(0,1fr);gap:8px}.set-row.is-sw{grid-template-columns:minmax(0,1fr) auto}
  .set-need{gap:8px}
  .u-head{display:none}
  .u-bar{flex-direction:column;align-items:stretch;gap:8px}.u-bar .in{width:100%}
}
.tog:disabled{opacity:.45;cursor:not-allowed}
.set-tabs a{text-decoration:none!important}

/* ---- Settings step 6: Company profile, Numbering, PDF and email templates (style A: white, hairlines, 8px grid) ---- */
.co-logos{display:flex;flex-wrap:wrap;gap:16px}
.co-logo{display:flex;align-items:center;justify-content:center;width:200px;height:88px;border:1px solid var(--line);border-radius:8px;padding:16px}
.co-logo img{max-width:100%;max-height:100%;display:block}
.co-card{display:inline-flex;flex-direction:column;gap:2px;padding:16px 24px;border:1px solid var(--line);border-radius:8px;font-size:var(--fs-14);line-height:1.5}
.num-tbl{width:100%;max-width:640px}
.tpl-prev-h{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.tpl-prev-h h3{margin:0}
.tpl-paper{overflow-x:auto}
.tpl-words code{font-size:12px;background:var(--bg-2,#F6F6F4);border:1px solid var(--line);border-radius:4px;padding:1px 6px;margin:0 2px;white-space:nowrap;display:inline-block;margin-bottom:4px}
.tpl-mail{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.tpl-subj{display:flex;gap:8px;align-items:baseline;padding:12px 16px;border-bottom:1px solid var(--line)}
.tpl-mail-b{padding:8px 16px;background:#fff;overflow-x:auto}
@media (max-width:640px){.co-logo{width:100%}
  /* the phone stacking of 4-column tables keeps each value's label here (Last given / Next): a 2 × 2 grid per series */
  .set-sec .table.num-tbl tbody tr{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;padding:12px 0}
  .set-sec .table.num-tbl td{grid-column:auto;padding:0}
  .set-sec .table.num-tbl td::before{content:attr(data-col);display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
}

/* step 7 · Settings › Emails (a_email.js): the route picker (a registry 'choice'), the email list, the templates page. Scoped classes only: no other page changes. */
.set-choice{display:flex;flex-direction:column;gap:8px;width:100%}
.set-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer}
.set-opt input{margin-top:3px;accent-color:#88B736}
.set-opt .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.set-opt-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.set-opt:has(input:checked){border-color:#88B736}
.set-opt.off{cursor:not-allowed;background:#FAFAF8}
.set-opt.off b{color:var(--muted)}
.em-kv{grid-template-columns:136px 1fr}
.em-kv dd .tiny{display:block;margin-top:2px}
.set-sec .table.em-log tbody tr{cursor:default}
.set-sec .table.em-log td{height:auto;padding-top:10px;padding-bottom:10px;vertical-align:top}
.set-sec .table.em-log td .tiny{display:block}
.em-list .set-c{white-space:nowrap}
.set-row:has(.set-choice){grid-template-columns:minmax(0,1fr);gap:16px}
.set-sec .table.em-log th{position:static}
.ztabs.tpl-kind{margin-bottom:12px;flex-wrap:wrap;column-gap:20px;row-gap:0}
.set-sec[data-sec$=" email"] textarea.in{min-height:232px;line-height:20px}
.tpl-about{margin:0 0 8px}
.tpl-words{margin:16px 0 0}
.tpl-ins{background:none;border:0;padding:0;cursor:pointer}
.tpl-ins:hover code{border-color:#88B736}
.tpl-text{white-space:pre-wrap;font:inherit;font-size:var(--fs-14);line-height:21px;margin:8px 0;color:var(--ink)}
@media (max-width:720px){.em-kv{grid-template-columns:1fr;gap:2px 0}.em-kv dd{margin-bottom:8px}}

/* tab-css Nov 2: z4's Go-to-section control and searchable pickers — moved from inline styles, same values */
.ed-hr.ed-hr-jump{max-width:100%;flex:1 1 auto}
#edJump{width:auto;max-width:180px}
.psearch.pick-search,#pkCount{margin-bottom:10px}
#pkEmpty{padding:12px 0}
.modal-foot.pick-foot{justify-content:space-between}

/* the help button (Nov 4 2026): a round "?" bottom-right on staff screens; it steps up over bottom bars (a18 helpPlace); the card opens upward */
.helpfab{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:43;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;padding:0;border:0;background:#3F6B12;color:#fff;font:700 24px/1 Georgia,'Times New Roman',serif;box-shadow:0 8px 20px -6px rgba(27,40,12,.45),0 2px 4px rgba(27,26,24,.14);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:bottom .18s var(--ease),transform .12s var(--ease),background .12s}
.helpfab:hover{background:#345A0E}.helpfab:active{transform:scale(.94)}.helpfab:focus-visible{outline:3px solid #88B736;outline-offset:2px}
.helpfab[aria-expanded="true"]{background:#2E4F0D}
.helppop{position:fixed;right:20px;bottom:80px;z-index:91;width:300px;max-width:calc(100vw - 24px);box-sizing:border-box;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:14px 16px 16px;animation:fadein .14s ease}
.helppop .hp-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:16px}
.helppop .hp-x{border:0;background:none;padding:4px;margin:-4px -6px -4px 0;cursor:pointer;color:var(--muted);display:grid;place-items:center}
.helppop .hp-t{margin:8px 0 2px;color:var(--muted);font-size:13px}
.helppop .hp-mail{margin:0 0 12px;font-weight:600;font-size:14px;word-break:break-all;user-select:all}
.helppop .hp-btns{display:flex;gap:8px;flex-wrap:wrap}.helppop .hp-btns .btn{flex:1;justify-content:center;white-space:nowrap}
body:has(.modal) .helpfab,body:has(.drawer) .helpfab,body:has(#editor.ip-on) .helpfab,body:has(.palette) .helpfab,body:has(.hc.sheet) .helpfab{opacity:0;pointer-events:none}
@media print{.helpfab,.helppop{display:none!important}}

/* The customer's link page = the email's document (Nov 4 2026, Soho: "Make it the same as email, always … connected one thing").
   paperPage (shared_paper.js) draws the same cards as the email; these rules only give it the email's page and fit the live Accept / Pay boxes into its payment card. */
.pe-wrap{background:#f3f1ea;min-height:100vh;margin:0;padding:0}
.pe-page{max-width:640px;margin:0 auto;padding:20px 10px 48px;color:#302c25}
.pe-page .doc-note{margin:0 0 14px;max-width:none}
.pe-sheet{display:none}
.pe-doc img{max-width:100%}
@media (max-width:480px){.pe-doc .px{padding-left:18px!important;padding-right:18px!important}.pe-doc .h1{font-size:30px!important;line-height:34px!important}}
.pe-act .accept-box,.paper-cta .pe-act .accept-box{margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;max-width:none;width:auto}
.pe-act .accept-box + .accept-box{margin-top:18px;padding-top:18px;border-top:1px solid #e6e1d3}
.pe-act .accept-box h2{font-family:Georgia,'Times New Roman',Times,serif;font-style:italic;font-weight:normal;font-size:22px;line-height:28px;color:#302c25;margin:0 0 6px;letter-spacing:0}
.pe-act .accept-box p,.pe-act .ab-agree,.pe-act .f{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;line-height:21px;color:#77705f}
.pe-act .accept-box p b{color:#302c25}
.pe-act .accept-box .f{color:#302c25;font-weight:bold}
.pe-act .accept-box .in{width:100%;margin-top:6px;border:1px solid #d9d3c3;border-radius:8px;background:#fff;font-weight:normal}
.pe-act .ab-agree{display:flex;gap:10px;align-items:flex-start;margin:4px 0 12px;color:#302c25}
.pe-act .ab-agree input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:#58792d}
.pe-act .ab-err{color:#b3261e;font-size:14px;min-height:0;margin:0 0 8px}
.pe-act .ab-err:empty{display:none}
.pe-doc .btn.ab-go.primary,.pe-act .btn.primary{display:flex;width:100%;justify-content:center;align-items:center;gap:8px;min-height:50px;margin:0 0 10px;background:#88b736;border:0;border-radius:8px;color:#1d2610;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:bold;text-decoration:none;box-shadow:none}
.pe-doc .btn.ab-go.primary:hover,.pe-act .btn.primary:hover{background:#7ba52f;color:#1d2610}
.pe-act .accept-box.done{display:flex;gap:14px;align-items:flex-start}
.pe-act .accept-box.done .ab-ic{background:#88b736;color:#1d2610}
.pe-links .pe-link{background:none;border:0;padding:4px 2px;font:inherit;font-weight:bold;color:#58792d;text-decoration:underline;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.pe-links .pe-link svg{width:15px;height:15px}
.pe-skcard{background:#fff;border:1px solid #e6e1d3;border-radius:12px;padding:24px 28px;margin:0 0 14px}
.pe-skcard p{margin:0 0 12px}
.pe-skcard > img{display:block;height:auto;margin-bottom:14px}
.pe-skcard h1,.pe-skcard h2{margin:0 0 10px}
.pe-skline{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
@media (max-width:480px){.pe-skcard{padding:18px 16px}}
@media print{.pe-wrap{background:#fff}.pe-page{display:none!important}.pe-sheet{display:block}}

/* ===================== Zoho Books form (Nov 4 2026, Soho: "copy exactly Zoho Books" + our catalog, Google Maps and Copy link) =====================
   New / Edit Quote and Invoice = Zoho's New Estimate / New Invoice: labels on the left, Item Table, totals box bottom-right, sticky Save bar. */
#editor.zf{max-width:none;padding-bottom:0;background:#fff}
#editor.zf .zf-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0 14px;margin:0 0 4px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:58px;z-index:30;box-shadow:0 -12px 0 #fff}
#editor.zf .zf-ht{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}
#editor.zf .zf-ht h1{font-size:24px;font-weight:600;letter-spacing:-.01em;margin:0;display:flex;align-items:baseline;gap:10px}
#editor.zf .zf-ht h1 small{font-size:14px;font-weight:500;color:var(--muted)}
#editor.zf .zf-back{display:none;color:var(--ink)}
#editor.zf .zf-ht .states{display:flex;gap:6px;flex-wrap:wrap}
#editor.zf .zf-hr{display:flex;align-items:center;gap:8px;flex:none}
#editor.zf .zf-hr .savestate{margin-right:6px}
#editor.zf .zf-more{min-width:270px;max-height:70vh;overflow:auto}
#editor.zf .zf-acts{display:flex;flex-direction:column;gap:4px;padding:4px}
#editor.zf .zf-acts .btn{justify-content:flex-start;width:100%;height:40px;box-shadow:none}
#editor.zf .zf-acts .hold-note,#editor.zf .zf-acts .qshare-note{display:none}
#editor.zf .zf-banners{display:flex;flex-direction:column;gap:10px;margin:12px 0 0}
#editor.zf .zf-banners:empty{display:none}
#editor.zf .zf-body{display:block;max-width:1180px}
#editor.zf .zf-sec{padding:20px 0} /* Zoho layout (Soho, email Nov 9 6:55 PM): a grey band on top, flat label-column rows, thin rules between the groups */
#editor.zf .zf-sh{display:flex;align-items:center;gap:12px;margin:0 0 16px;flex-wrap:wrap}
#editor.zf .zf-sh h3{font-size:16px;font-weight:600;margin:0;color:var(--ink)}
#editor.zf .zf-cf{background:#fff;border:1px solid var(--line-2);border-radius:8px;margin:20px 0 4px;padding:0;max-width:1080px} /* Event & Delivery (with Kitchen & Staff inside): one box, closed to a one-line summary */
#editor.zf .zf-row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:8px 20px;align-items:start;margin:0 0 14px}
#editor.zf .zf-row.hidden{display:none}
#editor.zf .zf-l{font-size:14px;color:var(--ink-2);padding-top:9px;line-height:1.3}
#editor.zf .zf-row.req>.zf-l{color:var(--ink-2)}
#editor.zf .zf-row.req>.zf-l::after{content:'*'}
#editor.zf .zf-hint{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:3px}
#editor.zf .zf-hint.in{display:inline;margin-left:8px}
#editor.zf .zf-c{min-width:0;max-width:640px}
#editor.zf .zf-c>.in,#editor.zf .zf-c>select.in{max-width:420px;width:100%}
#editor.zf .zf-c>textarea.in{max-width:640px}
#editor.zf .zf-num{background:var(--sunk);color:var(--ink-2)}
#editor.zf .zf-body.ro .in::placeholder{color:transparent}
#editor.zf .zf-pair{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:14px;align-items:center;max-width:640px}
#editor.zf .zf-pair>.in{width:100%}
#editor.zf .zf-il{display:grid;grid-template-columns:auto minmax(0,210px);justify-content:start;align-items:center;gap:12px;font-size:14px;color:var(--ink-2);white-space:nowrap}
#editor.zf .zf-row.req .zf-il:first-letter{color:inherit}
#editor.zf .zf-custrow .zf-c{max-width:820px}
#editor.zf .zf-custrow .bx-top .fl{display:none}
#editor.zf .zf-custrow .section{padding:0}
#editor.zf .zf-custrow .bx-hist{border:1px solid var(--line-in);border-radius:8px;padding:8px 12px;background:#fff}
/* the intake, Zoho layout (Soho, email Nov 9 6:55 PM "the lay out is good ... keep the existing color"): Customer Name and the two addresses
   in Zoho's grey band (billing and shipping side by side under the field, each still its own box); then the quote/invoice rows flat, in the label column */
#editor.zf .zf-boxes{display:flex;flex-direction:column;gap:0;max-width:1180px}
#editor.zf .zf-band{background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:22px 20px 20px}
#editor.zf .zf-box{min-width:0}
#editor.zf .zf-box-cust>.zf-row{margin-bottom:0}
#editor.zf .zf-box-cust>.zf-bh,#editor.zf .zf-box-doc>.zf-bh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Zoho shows no heading here; kept for screen readers */
#editor.zf .zf-box-doc{padding:22px 20px 0}
#editor.zf .zf-rule{height:1px;background:var(--line);margin:4px -20px 18px}
#editor.zf .zf-addr.zf-box{border:1px solid var(--line-2);border-radius:8px;background:#fff;padding:12px 14px}
#editor.zf .zf-bh,#editor.zf .zf-addr .sub-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);line-height:1.2}
#editor.zf .zf-addrs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch;margin:16px 0 0 210px;max-width:820px}
#editor.zf .zf-addr.zf-box .bx-sel{background:var(--sunk);border-color:var(--line)}
#editor.zf .zf-addr .more{margin-top:6px}
#editor.zf .zf-box-cust>.zf-row.zf-cprow{margin:14px 0 0}
#editor.zf .zf-addr .bx-pick-h{min-height:32px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#editor.zf .zf-addr #bxShipCh,#editor.zf .zf-addr #bxBillCh,#editor.zf #bxCpCh{background:var(--green-tint);border-color:#D6E6BC;color:var(--green-3);font-weight:600} /* the saved-address and contact pickers, easy to see (Soho, Nov 9 7:32 PM) */
#editor.zf .bx-cp{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:36px}
#editor.zf .bx-cp-chip{display:inline-flex;align-items:baseline;gap:6px;height:30px;padding:5px 10px;border:1px solid var(--line-2);border-radius:999px;background:#fff;font-size:13px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* Event & Delivery: a <details> box; the summary line is the header (one-line summary when closed) */
#editor.zf .zf-ev>summary,#editor.zf .zf-ev>.zf-evs{list-style:none;display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 18px;cursor:pointer;border-radius:8px}
#editor.zf .zf-ev>summary::-webkit-details-marker{display:none}
#editor.zf .zf-ev>summary:hover{background:var(--hover)}
#editor.zf .zf-ev[open]>summary{border-bottom:1px solid var(--line);border-radius:8px 8px 0 0}
#editor.zf .zf-evh{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
#editor.zf .zf-evh::before{content:'\25B8';display:inline-block;margin-right:8px;color:var(--muted);transition:transform var(--t)}
#editor.zf .zf-ev[open] .zf-evh::before{transform:rotate(90deg)}
#editor.zf .zf-evsum{min-width:0;flex:1;font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#editor.zf .zf-evsum .ev-sub{color:var(--muted);margin-left:8px}
#editor.zf .zf-evsum .ev-sub::before{content:'· '}
#editor.zf .zf-ev[open] .zf-evsum{visibility:hidden}
#editor.zf .zf-evt{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--green-2);flex:none}
#editor.zf .zf-evt-c,#editor.zf .zf-ev[open] .zf-evt-o{display:none}
#editor.zf .zf-ev[open] .zf-evt-c{display:inline}
#editor.zf .zf-evb{padding:18px 18px 4px}
#editor.zf .zf-evk{border-top:1px solid var(--line);margin:6px -18px 0;padding:16px 18px 0}
#editor.zf .zf-evk .zf-sh h3{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
/* the Item Table as Zoho's box with its own header */
#editor.zf section.zf-items>.zf-sh{background:var(--sunk);border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;margin:0;padding:10px 14px}
#editor.zf section.zf-items>.zf-sh h3{font-size:14px}
#editor.zf .zf-items>.zit-h{border-radius:0;background:#fff;color:var(--muted)}
/* under each item: the website description (grey), then ★ Note for kitchen */
#editor.zf .zit-r .zit-wd{font-size:12px;line-height:17px;color:var(--muted);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#editor.zf .zit-r .zit-kn{margin-top:6px}
#editor.zf .zit-knl{display:flex;align-items:baseline;gap:6px;font-size:12px;font-weight:600;color:var(--amber);margin:0 0 3px}
#editor.zf .zit-knl span{font-weight:400;color:var(--muted)}
#editor.zf .zit-kn .pre .zit-knl{display:inline;font-size:12px}
#editor.zf .zit-r .zit-kn textarea{border-color:var(--line-2)}
/* the bar: the not-yet link reads as not-yet */
#editor.zf .zf-bar .zf-copy:disabled{opacity:.55;cursor:default}
#editor.zf #bxContact:not(:empty){margin-top:8px}
#editor.zf .rcpts{display:flex;flex-wrap:wrap;gap:8px}
/* the Item Table */
#editor.zf .zf-items .zf-sh{margin-bottom:10px}
#editor.zf .zit-h,#editor.zf .zit-r{display:grid;grid-template-columns:22px minmax(0,1fr) 112px 104px 128px 138px 104px 64px;gap:0 10px;align-items:start}
#editor.zf .zit-h{background:var(--sunk);border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;padding:9px 10px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
#editor.zf .zit-h .c-it{grid-column:1 / 3;padding-left:2px}
#editor.zf .zit-h .c-q,#editor.zf .zit-h .c-r,#editor.zf .zit-h .c-dc,#editor.zf .zit-h .c-a{text-align:right}
#editor.zf .lines.zit{border:1px solid var(--line);border-radius:0 0 8px 8px;display:block;gap:0}
#editor.zf .lines.zit>.line{margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:#fff;padding:12px 10px}
#editor.zf .lines.zit>.line:last-child{border-bottom:0;border-radius:0 0 8px 8px}
#editor.zf .zit-r>.grip{grid-column:1;grid-row:1;position:static;width:22px;margin-top:8px}
#editor.zf .zit-r>.c-it{grid-column:2;grid-row:1}
#editor.zf .zit-r>.c-q{grid-column:3;grid-row:1}
#editor.zf .zit-r>.c-r{grid-column:4;grid-row:1}
#editor.zf .zit-r>.c-dc{grid-column:5;grid-row:1}
#editor.zf .zit-r>.c-tx{grid-column:6;grid-row:1}
#editor.zf .zit-r>.c-a{grid-column:7;grid-row:1}
#editor.zf .zit-r>.c-b{grid-column:8;grid-row:1}
#editor.zf .zit-r .c-it{display:flex;gap:12px;min-width:0}
#editor.zf .zit-r .thumb{width:44px;height:44px;border-radius:6px;flex:none;object-fit:cover}
#editor.zf .zit-r .lbody{min-width:0;flex:1;display:block;grid-template-columns:none}
#editor.zf .zit-r .lbody>.cname{width:100%;height:36px;font-weight:600}
#editor.zf .zit-r .lbody>.v{display:block}
#editor.zf .zit-r .n{font-weight:600;font-size:14px}
#editor.zf .zit-r .v{font-size:12px;color:var(--muted);margin-top:2px}
#editor.zf .zit-r .zit-each{display:none}
#editor.zf .zit-r .note{margin-top:6px}
#editor.zf .zit-r .note textarea{min-height:32px;font-size:13px;background:#fff}
#editor.zf .zit-r .qty{display:flex;justify-content:flex-end;align-items:center;gap:0}
#editor.zf .zit-r .qty input{width:64px;height:36px;text-align:right;border:1px solid var(--line-in);border-radius:6px;padding:0 8px;font-size:14px;font-variant-numeric:tabular-nums}
#editor.zf .zit-r .qty button{width:22px;height:36px;border:0;background:transparent;color:var(--muted);font-size:16px;cursor:pointer;padding:0}
#editor.zf .zit-r .qty button:hover{color:var(--ink)}
#editor.zf .zit-r .c-r .in,#editor.zf .zit-r .c-dc .in{height:36px;text-align:right}
#editor.zf .zit-r .c-r,#editor.zf .zit-r .c-dc,#editor.zf .zit-r .c-a{text-align:right}
#editor.zf .zit-r .c-r>.num,#editor.zf .zit-r .c-dc>.num{display:block;padding-top:9px}
#editor.zf .zit-disc{display:grid;grid-template-columns:minmax(0,1fr) 54px;gap:4px}
#editor.zf .zit-disc select{padding:0 18px 0 8px;text-align:left;background-position:right 4px center;min-width:0}
#editor.zf .zit-r .c-tx select{height:36px;width:100%;font-size:13px;padding:0 6px}
#editor.zf .zit-r .c-tx>.small{display:block;padding-top:9px}
#editor.zf .zit-r .amt{font-weight:600;font-size:14px;padding-top:9px;font-variant-numeric:tabular-nums}
#editor.zf .zit-r .lbtns{display:flex;justify-content:flex-end;align-self:start;margin:0;gap:2px;padding-top:2px}
#editor.zf .zit-r .ldet{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;padding:10px;background:var(--sunk);border-radius:8px}
#editor.zf .zit-r .ldet .f{width:150px}
#editor.zf .lines.zit>.line.hdr,#editor.zf .lines.zit>.line.nt{display:flex;align-items:flex-start;gap:10px;background:var(--sunk)}
#editor.zf .lines.zit>.line.hdr .grow,#editor.zf .lines.zit>.line.nt .grow{flex:1}
#editor.zf .lines.zit .empty{border:0}
#editor.zf.ro .zit-h,#editor.zf.ro .zit-r{grid-template-columns:0 minmax(0,1fr) 90px 104px 110px 120px 104px 0}
#editor.zf .zf-itfoot{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
#editor.zf .zf-add{height:34px;background:var(--green-tint);border-color:#D6E6BC;color:var(--green-3);font-weight:600}
#editor.zf .zf-add .ip-open-i{display:inline-grid;place-items:center;width:auto;height:auto;background:none;color:inherit}
#editor.zf .zf-add .ip-open-i svg{width:16px;height:16px}
#editor.zf .zf-add .ip-open-s{font-weight:500;color:var(--muted);font-size:12px;margin-left:4px}
#editor.zf .zf-sumrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:32px;margin-top:22px;align-items:start}
#editor.zf .zf-notes textarea{max-width:520px}
#editor.zf .zf-notes>.f{display:flex;flex-direction:column;align-items:stretch;gap:8px;font-size:14px;color:var(--ink-2)} /* Zoho: the label above the box */
#editor.zf .zf-tot{background:var(--sunk);border-radius:10px;padding:16px 18px}
#editor.zf .ztot{display:flex;flex-direction:column;gap:10px}
#editor.zf .zt-r{display:grid;grid-template-columns:minmax(0,1fr) 150px 110px;gap:10px;align-items:center;font-size:14px}
#editor.zf .zt-c .in{height:34px}
#editor.zf .zt-c .inline-in{display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:4px}
#editor.zf .zt-v{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
#editor.zf .zt-x:empty{display:none}
#editor.zf .zt-x{margin-top:-4px}
#editor.zf .zt-x .vchips{margin:4px 0 0}
#editor.zf .zt-x .inline-in{display:flex;gap:6px}
#editor.zf .zt-ov{margin-top:6px;align-items:center}
#editor.zf .zt-more{margin-top:6px}
#editor.zf .zt-more>summary{font-size:12px;color:var(--muted);cursor:pointer}
#editor.zf .zt-adjl{height:32px;border-style:dashed;background:#fff;max-width:160px}
#editor.zf .zt-total{border-top:1px solid var(--line-2);padding-top:12px;margin-top:2px;font-size:16px;font-weight:700}
#editor.zf .zt-total .zt-v{font-weight:700}
#editor.zf #totVals{margin-top:10px}
#editor.zf #totVals:empty{display:none}
#editor.zf .zf-terms{display:block} /* Terms & Conditions is off the editor (Nov 9): only Attach File(s) is left here */
#editor.zf .zf-terms .zf-att{max-width:640px}
#editor.zf .zf-l2{font-size:14px;color:var(--ink-2);margin-bottom:8px}
#editor.zf .zf-hist{padding:14px 0}
#editor.zf .zf-hist>summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--ink-2)}
#editor.zf .zf-hist>.panel{margin-top:12px}
/* the sticky Zoho bar: Save as Draft · Save and Send · Copy Link · Close, total on the right */
#editor.zf .mobilebar.zf-bar{display:flex;position:sticky;bottom:0;left:auto;right:auto;z-index:40;align-items:center;gap:10px;min-height:60px;margin:0 -24px;padding:10px 24px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 14px rgba(27,26,24,.06)}
#editor.zf .zf-bar .btn{margin-left:0;height:40px}
#editor.zf .zf-bar .zf-bs{display:none}
#editor.zf .zf-bar .zf-bt{margin-left:auto;text-align:right;display:flex;align-items:baseline;gap:10px}
#editor.zf .zf-bar .zf-bt .t{font-size:16px}
#editor.zf .zf-bar #mbAct .btn{margin:0}
/* editfix-nov10: the optional reason when a finalized invoice is edited (one tap on Edit, no dialog) */
#editor.zf .zf-reason{margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;max-width:640px}
#editor.zf .zf-reason .f{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
#editor.zf .zf-reason .f .hint{font-weight:400;color:var(--muted);margin-left:4px}
#editor.zf .zf-reason .in{width:100%}
@media (min-width:981px){
  #editor.zf:has(:is(input,textarea):focus) .mobilebar.zf-bar{visibility:visible}
  #editor.zf .pk.ip{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(600px,92vw);height:auto;max-height:none;z-index:90;border:0;border-radius:0;box-shadow:-12px 0 40px rgba(27,26,24,.18);transform:translateX(104%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s}
  #editor.zf.ip-on .pk.ip{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s}
  #editor.zf .ip-scrim{display:block;position:fixed;inset:0;z-index:89;background:rgba(27,26,24,.36);opacity:0;pointer-events:none;transition:opacity .2s}
  #editor.zf.ip-on .ip-scrim{opacity:1;pointer-events:auto}
  #editor.zf .ip-done{display:inline-flex;margin-left:auto}
  #editor.zf .zf-add.ip-open{display:inline-flex;width:auto;min-height:0}
}
@media (max-width:1180px){
  #editor.zf .zit-h,#editor.zf .zit-r{grid-template-columns:22px minmax(0,1fr) 100px 96px 116px 120px 96px 60px}
}
@media (max-width:980px){
  #editor.zf .zf-head{position:static;padding:10px 0;flex-wrap:wrap}
  #editor.zf .zf-back{display:inline-grid}
  #editor.zf .zf-ht h1{font-size:24px} /* go-live 9 sizing: the same title size as the record pages (was 19px) */
  #editor.zf .zf-hr .savestate{order:9;width:100%}
  #editor.zf .zf-hr .zclose{display:none}
  #editor.zf .zf-cf{margin:4px 0 12px;padding:12px 14px 2px}
  #editor.zf .zf-row{grid-template-columns:1fr;gap:6px;margin-bottom:12px}
  #editor.zf .zf-l{padding-top:0;font-weight:500}
  #editor.zf .zf-addrs{grid-template-columns:minmax(0,1fr);gap:12px;margin:12px 0 0;max-width:none}
  #editor.zf .zf-boxes{gap:12px}
  #editor.zf .zf-box{padding:12px 14px}
  #editor.zf .zf-bh{margin-bottom:12px}
  #editor.zf .zf-box .zf-pair>*,#editor.zf .zf-box .zf-il,#editor.zf .zf-box .zf-il>.in{min-width:0;max-width:100%} /* the two dates fit side by side inside the box on a phone */
  #editor.zf .zf-pair{grid-template-columns:1fr 1fr;gap:10px;align-items:end}
  #editor.zf .zf-il{grid-template-columns:1fr;gap:4px;white-space:normal;font-size:13px}
  #editor.zf .zit-h{display:none}
  #editor.zf .lines.zit{border-radius:8px}
  #editor.zf .zit-r{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"it it b" "q r a" "dc tx tx";gap:10px 10px}
  #editor.zf .zit-r>.grip{display:none}
  #editor.zf .zit-r>.c-it{grid-area:it}
  #editor.zf .zit-r>.c-q{grid-area:q;justify-content:flex-start}
  #editor.zf .zit-r>.c-r{grid-area:r;width:96px}
  #editor.zf .zit-r>.c-dc{grid-area:dc}
  #editor.zf .zit-r>.c-tx{grid-area:tx}
  #editor.zf .zit-r>.c-a{grid-area:a;min-width:80px}
  #editor.zf .zit-r>.c-b{grid-area:b}
  #editor.zf .zit-r .qty button{width:36px;height:40px;border:1px solid var(--line-in);border-radius:6px;background:#fff;color:var(--ink)}
  #editor.zf .zit-r .qty input{width:52px;height:40px;text-align:center;margin:0 4px}
  #editor.zf .zit-r .c-dc:has(input:disabled){opacity:.85}
  #editor.zf.ro .zit-r{grid-template-columns:minmax(0,1fr) auto auto}
  #editor.zf .zf-itfoot{flex-direction:column;align-items:stretch}
  #editor.zf .zf-itfoot .btn{justify-content:flex-start;height:44px}
  #editor.zf .zf-sumrow,#editor.zf .zf-terms{grid-template-columns:1fr;gap:18px}
  #editor.zf .zt-r{grid-template-columns:minmax(0,1fr) 120px 90px;gap:8px}
  #editor.zf .mobilebar.zf-bar{margin:0 -16px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:8px}
  #editor.zf .zf-bar .zf-bl,#editor.zf .zf-bar .zf-copy,#editor.zf .zf-bar .zf-close{display:none}
  #editor.zf .zf-bar .zf-bs{display:inline}
  #editor.zf .zf-bar .zf-bt{order:-1;margin-left:0;margin-right:auto;flex-direction:column;align-items:flex-start;gap:0}
  #editor.zf .zf-bar .btn{height:44px;padding:0 16px}
}
@media (max-width:980px){ /* Zoho layout on a phone: the band and the rows stack; the addresses sit under the field, full width */
  #editor.zf .zf-band{padding:14px 14px 14px;border-radius:8px}
  #editor.zf .zf-cf.zf-ev{padding:0;margin:14px 0 4px}
  #editor.zf .zf-box-doc{padding:16px 0 0}
  #editor.zf .zf-rule{margin:2px 0 14px}
  #editor.zf .zf-box-cust,#editor.zf .zf-box-doc{padding-left:0;padding-right:0}
  #editor.zf .zf-band .zf-box-cust{padding:0}
  #editor.zf .zf-ev>summary{flex-wrap:wrap;gap:4px 10px;padding:10px 14px}
  #editor.zf .zf-evsum{order:3;flex-basis:100%;white-space:normal}
  #editor.zf .zf-evt{margin-left:auto}
  #editor.zf .zf-evb{padding:14px 14px 2px}
  #editor.zf .zf-evk{margin:6px -14px 0;padding:14px 14px 0}
  #editor.zf section.zf-items>.zf-sh{border-radius:8px;border-bottom:1px solid var(--line);margin-bottom:10px}
}

/* Zoho record (Nov 4): the "WHAT'S NEXT?" box with its one or two buttons; an invoice's Payments Received sits above the paper */
.zrec .next2.znx{margin:10px 24px 6px;padding:12px 16px;border:1px solid #DDEBC6;border-radius:8px;background:var(--green-tint);gap:8px 16px}
.zrec .next2.znx .znx-t{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:2px}
.zrec .next2.znx .znx-h{font-size:12px;letter-spacing:.08em;color:var(--green-3);font-weight:700}
.zrec .next2.znx .nx{flex:none}
.zrec .next2.znx .znx-b{display:flex;gap:8px;flex-wrap:wrap}
.zrec .next2.znx .znx-b .btn{height:32px}
.zrec .ztop{padding:6px 24px 0}
.zrec .ztop .zpay-top{border:1px solid var(--line);border-radius:10px;background:#fff}
.zrec .ztop .zpay-top .box-h{padding:12px 16px 0}
.zrec .ztop .zpay-top .box-b{padding:0 16px 12px}
@media (max-width:980px){
  .zrec .next2.znx{margin:8px 12px 4px}
  .zrec .ztop{padding:6px 12px 0}
}

@media (min-width:981px){
  .zrec.xd .z1{position:relative;flex-direction:column;align-items:stretch;row-gap:10px;padding-top:10px;padding-bottom:12px}
  .zrec.xd .z1-r{margin-left:0;flex-wrap:wrap;row-gap:8px}
  .zrec.xd .z1-r .zclose{position:absolute;top:12px;right:16px}
}

.zrec .ztop .zpay-top>summary{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;list-style:none;font-size:14px}
.zrec .ztop .zpay-top>summary::-webkit-details-marker{display:none}
.zrec .ztop .zpay-top .zpt-h{font-weight:600}
.zrec .ztop .zpay-top .zpt-s{color:var(--ink-2);font-size:13px}
.zrec .ztop .zpay-top>summary .chev{margin-left:auto;width:16px;height:16px;transition:transform .15s}
.zrec .ztop .zpay-top[open]>summary .chev{transform:rotate(180deg)}
.zrec .zmore-menu .zactions .btn,#editor.zf .zf-acts .btn{border-color:transparent;background:transparent;box-shadow:none;justify-content:flex-start;font-weight:500;color:var(--ink)}
.zrec .zmore-menu .zactions .btn:hover,#editor.zf .zf-acts .btn:hover{background:var(--sunk)}
.zrec .zmore-menu .zactions .btn.danger,#editor.zf .zf-acts .btn.danger{color:var(--red,#B42318)}

/* Zoho's Record Payment form (Nov 4) */
.zpay{display:flex;flex-direction:column;gap:12px}
.zpr{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 16px;align-items:start}
.zpr-l{font-size:14px;color:var(--ink-2);padding-top:9px}
.zpr.req .zpr-l{color:#C4321F}
.zpr.req .zpr-l::after{content:'*'}
.zpr-ro{padding-top:9px;font-weight:600}
.zpr-amt{display:flex;align-items:stretch;max-width:260px}
.zpr-cur{display:inline-grid;place-items:center;padding:0 10px;border:1px solid var(--line-in);border-right:0;border-radius:8px 0 0 8px;background:var(--sunk);font-size:12px;color:var(--ink-2)}
.zpr-amt .in{border-radius:0 8px 8px 0}
.zpr-c>.in,.zpr-c>select.in{max-width:320px;width:100%}
@media (max-width:640px){.zpr{grid-template-columns:1fr}.zpr-l{padding-top:0}.zpr-ro{padding-top:0}}
/* Money validation is explicit and stays beside the value that needs correction. */
.money-input-error { display: block; color: var(--red); line-height: 1.4; }

/* Settings › Automatic emails (Nov 6 2026) */
.ae-card .ae-prev{margin-top:12px}.ae-card .tpl-mail{max-width:600px}.ae-kinds{margin-bottom:8px}.ae-rows{display:flex;flex-direction:column}.ae-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line,#e6e1d3)}.ae-row:last-child{border-bottom:0}.ae-last{margin-top:16px}

/* ---- Edit your quote: the green loader's sorry / try-again screens (Nov 6 2026). Same white screen and Soho green as the loader; no red alarm. ---- */
.eq-load.sorry{justify-content:flex-start;overflow-y:auto;padding:28px 18px 32px}
.eq-card{box-sizing:border-box;min-width:0;width:100%;max-width:420px;margin:auto;display:flex;flex-direction:column;align-items:stretch;gap:10px;text-align:center;animation:eqIn .35s ease-out both}
.eq-mini{width:132px;aspect-ratio:930/522;margin:0 auto 6px;position:relative}
.eq-mini i{position:absolute;inset:0;background:var(--soho-green);-webkit-mask:url(/brand/soho-logo.svg) center/contain no-repeat;mask:url(/brand/soho-logo.svg) center/contain no-repeat}
.eq-card h2{margin:0;font-size:24px;line-height:32px;font-weight:600;color:var(--soho-ink);letter-spacing:-.02em}
.eq-lead{margin:0;font-size:16px;line-height:23px;color:var(--soho-ink)}
.eq-why{margin:2px 0;padding:10px 14px;border-radius:12px;background:#F3F7EA;color:#3E5A12;font-size:16px;line-height:21px}
.eq-ways{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:6px;width:100%}
.eq-way,.eq-way *{text-decoration:none!important}
.eq-way{box-sizing:border-box;min-width:0;display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 12px;border-radius:14px;border:1.5px solid #E2E5DA;background:#fff;color:var(--soho-ink);text-decoration:none;text-align:left}
.eq-way svg{width:24px;height:24px;flex:none;color:var(--soho-green)}
.eq-way span{display:flex;flex-direction:column;min-width:0}
.eq-way b{font-size:16px;line-height:19px}
.eq-way small{font-size:13px;line-height:16px;color:#6B6F64;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq-way.eq-call{grid-column:1/-1;background:var(--soho-green);border-color:var(--soho-green);color:#fff;justify-content:center;min-height:58px}
.eq-way.eq-call svg,.eq-way.eq-call small{color:#fff}
.eq-way.eq-call b{font-size:16px}
.eq-way:active{transform:scale(.98)}
.eq-card .eq-again{width:100%;justify-content:center;background:var(--soho-green);border-color:var(--soho-green)}
.eq-card .eq-back{align-self:center;margin-top:4px}
/* staff: the red History line, the "Call customer" tag, the Website check box */
.tl .dot.r{border-color:#C8372D;background:#C8372D}
.tl li.eqb b{color:#B42318}
.eq-calltag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:#FDECEA;color:#B42318;font-size:12px;font-weight:600;line-height:18px;white-space:nowrap;vertical-align:middle}
.eq-chk{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:19px;margin-bottom:6px}
.eq-chk svg{width:16px;height:16px;flex:none;margin-top:1px}
.eq-chk.ok svg{color:var(--leaf)}.eq-chk.bad{color:#B42318}.eq-chk.warn{color:#8A5A00}
.eq-chk-list{margin:0 0 8px;padding-left:20px;font-size:13px;line-height:19px;color:#B42318}

/* CRM in the side menu (Soho, Nov 8 2026 10:16 AM): right after Reports, opening like Sales; inside, the CRM's sections, each opening to its screens */
.app.z .nav .nsec-h{display:flex;align-items:center;gap:10px;width:100%;min-height:32px;padding:6px 10px 6px 37px;border:0;border-radius:8px;background:none;cursor:pointer;text-align:left;font-family:var(--sans);font-size:13px;font-weight:500;color:#5F5B55}
.app.z .nav .nsec-h:hover{background:#F2F1ED;color:var(--ink)}
.app.z .nav .nsec-h .chev{margin-left:auto;width:14px;height:14px;transform:rotate(-90deg);transition:transform var(--t) var(--ease)}
.nsec.open > .nsec-h{color:var(--ink)!important;font-weight:600!important}
.nsec.open > .nsec-h .chev{transform:rotate(0)!important}
.nsec-b{display:none;flex-direction:column;gap:1px;padding:1px 0 4px}
.nsec.open > .nsec-b{display:flex}
.app.z .nav a.nscr{min-height:30px;padding:5px 10px 5px 51px;font-size:13px}
.app.z .nav a.nscr .extic{margin-left:auto;width:12px;height:12px;opacity:.7}
.nsec-org{display:flex;align-items:center;gap:8px;width:100%;min-height:30px;padding:5px 10px 5px 37px;border:0;border-radius:8px;background:none;cursor:pointer;font-family:var(--sans);font-size:12px;color:var(--muted);text-align:left}
.app.z .nav .nsec-org svg,.nsec-org svg{width:13px;height:13px;color:var(--muted)}
.nsec-org:hover{background:#F2F1ED;color:var(--ink)}
.crm-empty{padding:6px 10px 6px 37px}
/* the phone: the same inside the More sheet */
.pm-crm-h .chev{margin-left:auto;width:16px!important;height:16px!important;transition:transform var(--t) var(--ease)}
.pm-crm.open .pm-crm-h .chev{transform:rotate(180deg)}
.pm-crm-b{display:none;padding:0 0 6px}
.pm-crm.open .pm-crm-b{display:block}
.nsec.pm .nsec-h{display:flex;align-items:center;width:100%;min-height:44px;padding:8px 10px 8px 40px;border:0;border-radius:10px;background:none;cursor:pointer;text-align:left;font-family:var(--sans);font-size:16px;font-weight:500;color:var(--ink)}
.nsec.pm .nsec-h:hover{background:var(--hover)}
.nsec.pm .nsec-h .chev{margin-left:auto;width:15px;height:15px;color:var(--muted);transform:rotate(-90deg);transition:transform var(--t) var(--ease)}
.nsec.pm .nscr{min-height:42px;padding:6px 10px 6px 56px;font-size:14px}
.nsec.pm .nscr .extic{margin-left:auto;width:13px;height:13px}
.pm-crm .nsec-org{min-height:40px;padding-left:40px;font-size:13px;color:var(--muted)}
.pm-crm .crm-empty{padding-left:40px}
/* Organize your CRM menu */
.crm-grp{margin:14px 0 6px;font-size:var(--fs-12,12px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.crm-grp:first-child{margin-top:0}
.crm-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r)}
.crm-row{display:flex;align-items:center;gap:8px;padding:4px 6px 4px 10px;border-top:1px solid var(--line)}
.crm-row:first-child{border-top:0}
.crm-chk{display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:40px;cursor:pointer}
.crm-chk span{display:flex;align-items:center;gap:8px}
.crm-chk svg{width:16px;height:16px;color:var(--muted);flex:none}
.crm-mv{display:flex;gap:2px}
.crm-mv .icon-btn{font-size:16px}
.crm-mv .icon-btn:disabled{opacity:.3;cursor:default}

/* ---------- Kitchen inside Sales (Nov 8 2026) ---------- */
.kpage .ktabs{margin-bottom:14px}
.kbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.kbar .in[type=date]{width:auto;min-width:150px}
.kbar .rot{transform:rotate(-90deg)}
.kbar .btn.on{background:var(--green-tint-2);border-color:#cfe0b0;color:var(--green-3);font-weight:600}
.kbar-l{font-weight:600;color:var(--ink);margin-left:4px}
.kwired{margin-bottom:14px}
.kchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.kchips .grow{flex:1}
.kchips .chip{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--ink);font-size:13px;text-decoration:none;white-space:nowrap}
.kchips .chip.on{background:var(--leaf);border-color:var(--leaf);color:var(--on-leaf);font-weight:600} /* the lime fill with a dark label, like every other selected chip (light theme) */
.kchips .in{max-width:220px;height:32px}
.klist{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
.kcard{padding:14px 16px;display:flex;flex-direction:column;gap:8px;scroll-margin-top:80px}
.kcard.is-chg{border-color:#E9C98B;box-shadow:0 0 0 2px #FBF2DF}
.kcard.kfocus{box-shadow:0 0 0 3px #b9d48a}
.kcard-h{display:flex;gap:12px;align-items:flex-start}
.ktime{display:flex;flex-direction:column;min-width:74px;line-height:1.15}
.ktime b{font-family:var(--serif);font-size:24px;font-weight:400;color:var(--ink)}
.ktime small{font-size:12px;color:var(--muted)}
.kwho{flex:1;min-width:0}
.kwho>b{font-size:16px}
.kbadges{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.pill.kstar{color:#7a5a00;background:#FFF4CC}
.kwhere{display:flex;gap:6px;align-items:flex-start;color:var(--muted)}
.kwhere svg{flex:none;margin-top:2px}
.kitems{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.kitems li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--line)}
.kitems li>b{min-width:34px;font-variant-numeric:tabular-nums}
.kitems li>div{flex:1;min-width:0;display:flex;flex-direction:column}
.kitems li em{font-size:13px;color:#7a4b00;font-style:normal;background:#FFF8E1;border-radius:4px;padding:1px 6px;margin-top:3px;align-self:flex-start}
.kitems li.kskip{color:var(--muted)}
.kli-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.kli-r small{font-size:12px;color:var(--muted)}
.kst{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font-size:12px;font-weight:600;background:#EEF5E1;color:#3F6B12;white-space:nowrap}
.kst[data-no="2"]{background:#EAF1FB;color:#2F5E9E}.kst[data-no="3"]{background:#FBEDE9;color:#A93A2A}.kst[data-no="4"]{background:#F3EAFB;color:#6A3A9E}.kst[data-no="5"]{background:#FBF2DF;color:#8A5A12}
.kst.none{background:#FBEDE9;color:#A93A2A}
.knote{display:flex;gap:8px;font-size:14px;line-height:1.4;padding:6px 10px;border-radius:8px;background:#F7F7F5}
.knote b{flex:none;min-width:96px;color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding-top:1px}
.knote.hot{background:#FFF4CC}.knote.hot b{color:#7a5a00}
.knote.staff{background:#EAF1FB}.knote.staff b{color:#2F5E9E}
.kchg ul.kdiff,.kdiff{margin:4px 0 0;padding-left:18px;font-size:13px}
.kfoot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}
.ksticker{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.ksticker svg{width:14px;height:14px}
.ksticker.done{color:var(--green-3)}.ksticker.stale{color:var(--amber);font-weight:600}
.kdrop,.kdrafts{margin-bottom:14px}
.kdrafts{padding:12px 16px;margin-top:14px}
.kdrafts summary{cursor:pointer}
.kdrop-r{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line)}
.kdrop-r>span:first-of-type{flex:1;min-width:120px}
.kstations{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
.kstation{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.kstation.off{opacity:.6}
.kstation-h{display:flex;gap:10px;align-items:center}
.kstation-h>div{flex:1}
.kstation-h .kst{height:28px;min-width:28px;justify-content:center;font-size:14px}
.kcap{display:flex;flex-direction:column;align-items:flex-end;min-width:90px;position:relative}
.kcap b{font-family:var(--serif);font-size:20px;font-weight:400}
.kcap small{font-size:12px;color:var(--muted)}
.kcap i{display:block;width:90px;height:5px;border-radius:3px;background:#EEEDE8;margin-top:4px;position:relative;overflow:hidden}
.kcap i::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--p);background:#88B736}
.kcap.over b{color:var(--red)}.kcap.over i::after{background:var(--red)}
.kmake{list-style:none;margin:0;padding:0}
.kmake li{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.kmake li>b{min-width:36px;font-size:16px}
.kmake li>div{flex:1;display:flex;flex-direction:column;gap:2px}
.kmake small{font-size:12px;color:var(--muted)}
.kmake em{color:#7a4b00;font-style:normal}
.kgrid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kgrid2 .f{display:flex;flex-direction:column;gap:4px;font-size:13px}
.kgrid2 .f>span{color:var(--muted);font-size:12px}
.kform{display:flex;flex-direction:column;gap:10px}
.kform .f{display:flex;flex-direction:column;gap:4px}
.kform .f>span{font-size:13px;color:var(--muted)}
.kdow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.kdow label{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted)}
.kdow .in{padding:0 4px;text-align:center}
.ktable-w{overflow-x:auto;margin-bottom:14px}
.ktable{width:100%;border-collapse:collapse;font-size:14px}
.ktable th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.ktable td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.ktable tr.off td{opacity:.55}
.ktable .in.sm{height:32px;font-size:13px}
.ktable td.kover{color:var(--red);font-weight:600}
.kwarn{color:var(--red)}
.kprod-list{display:flex;flex-wrap:wrap;gap:8px}
.kdays{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));gap:8px;margin-bottom:14px;overflow-x:auto}
.kd{display:flex;flex-direction:column;gap:4px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.kd small{color:var(--muted);font-size:12px}
.kd.lk{background:#F7FAF1;border-color:#D3E4B6}
.kbars{display:flex;gap:10px;align-items:flex-end;height:160px;padding-top:10px}
.kbars>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.kbars i{display:block;width:100%;max-width:46px;height:var(--h);min-height:2px;background:#88B736;border-radius:6px 6px 2px 2px}
.kbars small{text-transform:capitalize;color:var(--muted)}
.kclock{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:14px;align-items:start}
.kpad{padding:18px;display:flex;flex-direction:column;gap:12px}
.kpad-now{font-family:var(--serif);font-size:30px;display:flex;flex-direction:column;align-items:center}
.kpad-now small{font-family:var(--sans);font-size:13px;color:var(--muted)}
.kpin{font-size:34px;letter-spacing:.35em;text-align:center;height:48px;line-height:48px;color:var(--ink)}
.kkeys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kkey{height:58px;border-radius:12px;border:1px solid var(--line-2);background:#fff;font-size:24px;font-weight:600;cursor:pointer;font-family:var(--sans)}
.kkey:active{background:#EEF5E1}
.kclock-b{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kclock-b .btn{height:52px;font-size:16px;justify-content:center}
.kpad .f{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.kmail{width:100%;height:60vh;border:1px solid var(--line);border-radius:8px;margin-top:10px;background:#f6f3ee}
.pm-it.kpm{padding-left:40px}
/* stickers: the kitchen app's Print Labels sheets. US Letter 8.5" × 11", 2 across × 10 down = 20 labels per page.
   Per order: 4" × 1" stickers (0.5" top/bottom, 0.15625" sides, 0.1875" between columns). By station: 4" × 1.05" (0.25" around). */
@page klabels{size:letter;margin:0}
.ksheets{display:flex;flex-direction:column;align-items:center;gap:16px}
.ksheet{page:klabels;width:8.5in;height:11in;background:#fff;color:#000;box-sizing:border-box;overflow:hidden;display:grid;grid-template-columns:4in 4in;grid-auto-rows:1in;column-gap:.1875in;row-gap:0;padding:calc(.5in + var(--oy,0in)) .15625in .5in calc(.15625in + var(--ox,0in));break-after:page;page-break-after:always;font-family:Arial,'Liberation Sans',Helvetica,sans-serif}
.ksheet:last-child{break-after:auto;page-break-after:auto}
.kl-cell{width:4in;height:1in;box-sizing:border-box;padding:.05in .1in .06in .1in;overflow:hidden;break-inside:avoid;page-break-inside:avoid}
.ksheet.guides .kl-cell{border:1px dashed #bbb}
.kl-in{position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;background:#fff;color:#000;padding:1px 10px;display:grid;grid-template-rows:25px 8px 22px 1px 12px 15px;row-gap:0;text-align:center;align-items:center;align-content:space-between}
.kl-name{font-size:9pt;font-weight:700;line-height:12.5px;max-height:25px;letter-spacing:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;color:#000;min-width:0;align-self:end;padding:0 .55in}
.kl-count{position:absolute;top:1px;left:2px;font-size:13pt;font-weight:900;line-height:1;color:#000;white-space:nowrap;font-variant-numeric:tabular-nums}
.kl-count span{font-size:7pt;font-weight:700}
.kl-star{position:absolute;top:0;right:3px;font-size:16pt;font-weight:900;line-height:1;color:#000}
.kl-rb{font-size:6pt;font-weight:700;letter-spacing:.22em;color:#222;line-height:1;text-transform:uppercase;align-self:end}
.kl-time{font-size:16pt;font-weight:800;line-height:1;letter-spacing:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#000;align-self:center}
.kl-div{height:0;width:auto;border-top:.5pt solid #000;margin:.002in .08in 0;align-self:center}
.kl-co{font-size:8pt;font-weight:600;line-height:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#000;align-self:center;min-width:0}
.kl-meta{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;column-gap:5px;font-size:6pt;font-weight:500;line-height:1;color:#333;white-space:nowrap;overflow:visible;align-self:end}
.kl-d{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:700;color:#000}
.kl-c{text-align:center;color:#555;font-variant-numeric:tabular-nums;white-space:nowrap}
.kl-qty{font-size:9pt;font-weight:900;color:#000;letter-spacing:.04em}
.kl-i{text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:600;color:#000}
.kl-inv2{font-size:11pt;font-weight:900;line-height:1;letter-spacing:.02em}
.ksheet.kss{grid-template-columns:repeat(2,4in);grid-auto-rows:1.05in;column-gap:0;row-gap:0;padding:calc(.25in + var(--oy,0in)) .25in .25in calc(.25in + var(--ox,0in));font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif}
.kss .kl-cell{width:4in;height:1.05in;padding:.12in .18in;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.kss-name{font-size:15pt;font-weight:800;line-height:1.1;letter-spacing:-.01em;max-height:.62in;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;color:#000}
.kss-foot{font-size:7.5pt;font-weight:600;letter-spacing:.04em;color:#555;margin-top:.06in;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kl-prev{display:grid;grid-template-columns:4in 4in;column-gap:.1875in;row-gap:6px;width:max-content;background:#fff;padding:0}
.kl-prev.kss{column-gap:0}
.kl-prev .kl-cell{border:1px dashed #bbb;background:#fff}
.kl-prevw{margin-top:12px}
.kfit{width:100%;overflow:hidden}
.kopts{padding:12px 14px;display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.kopts .f,.kprint-opts .f{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);max-width:320px}
.kpickbar{padding:10px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.kpick-tools{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.kpick-tools .btn.disabled{opacity:.5;pointer-events:none}
.kprint-opts{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:0 0 14px}
.kprint-opts .f input{width:120px}
.kprint-opts .tiny{flex-basis:100%}
.kprint-none{padding:30px;text-align:center;color:var(--muted)}
.kday-box{border:2px solid var(--green-3,#557a1f);background:#F7FAF1;border-radius:12px;padding:14px;text-align:center;display:flex;flex-direction:column;gap:2px}
.kday-box b{font-size:12px;letter-spacing:.2em;color:var(--green-3,#557a1f)}
.kday-box strong{font-size:28px;line-height:1.15}
.kday-box span{font-size:16px;font-weight:600}
.kday-box.past{border-color:#C0392B;background:#FDECEA}.kday-box.past b{color:#C0392B}
.kday-n{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;text-align:center}
.kday-n>div{background:#F3F1ED;border-radius:8px;padding:8px}
.kday-n b{display:block;font-size:16px}.kday-n small{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
@media screen{.kfit>*{zoom:var(--kz,1)}.ksheets .ksheet{box-shadow:0 2px 14px rgba(0,0,0,.18)}}
/* printouts */
.kprint{max-width:900px;margin:0 auto;padding:12px}
.kprint-bar{display:flex;gap:10px;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;padding:10px 0;z-index:2;border-bottom:1px solid var(--line);margin-bottom:12px}
.kprint-wait{padding:40px;text-align:center;color:var(--muted)}
.kps{padding:22px 26px;margin-bottom:16px}
.kps-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.kps-h b{font-size:20px;margin-left:6px}
.kps-t{width:100%;border-collapse:collapse;font-size:14px}
.kps-t th{text-align:left;font-size:12px;text-transform:uppercase;color:#5F5B55;border-bottom:2px solid #1B1A18;padding:6px}
.kps-t td{border-bottom:1px solid #DDD;padding:7px 6px;vertical-align:top}
.kps-t td:first-child b{font-size:16px}
.kps-t em{display:block;font-size:12px;color:#7a4b00;font-style:normal}
.kps-t i.box{display:inline-block;width:16px;height:16px;border:1.5px solid #1B1A18;border-radius:3px}
.kps-f{font-size:12px;color:#5F5B55;margin-top:10px}
.kps-n{padding:8px 0;border-top:1px solid #DDD;display:flex;flex-direction:column;gap:4px}
@media (max-width:640px){
  .klist,.kstations{grid-template-columns:1fr}
  .kclock{grid-template-columns:1fr}
  .kgrid2{grid-template-columns:1fr}
  .kbar-l{width:100%;margin:2px 0 0}
  .knote{flex-direction:column;gap:2px}.knote b{min-width:0}
  .kcard{padding:12px 13px}
  .ktable th,.ktable td{padding:8px 8px}
  .kchips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .kchips .grow{display:none}
}
@media print{
  .noprint,.kprint-bar{display:none!important}
  .kprint{max-width:none;padding:0}
  .kps{box-shadow:none;border:0;border-top:4px solid #000;page-break-after:always}
  body:has(.ksheets),html:has(.ksheets){margin:0!important;padding:0!important;background:#fff!important}
  .kprint:has(.ksheets){margin:0;padding:0;max-width:none}
  .ksheets{display:block;gap:0}
  .kfit{overflow:visible}
}

/* Kitchen: the kitchen app's stat cards (Worker Emails, Reports) */
.kgrid3{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin:0 0 14px}
.kstat{padding:14px 16px;display:flex;flex-direction:column;gap:2px;color:var(--ink);text-decoration:none}
a.kstat:hover{text-decoration:none;border-color:var(--leaf)}
.kstat>b{font-size:24px;line-height:1.1}
.kstat>b svg{width:22px;height:22px;color:var(--green-3)}
.kstat>span{font-weight:600}
.kstat>small{color:var(--muted);font-size:12px}
.kib+.kib{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

/* ===== Settings › Templates (Nov 9): every message the app sends + its full preview. List left, preview right on a laptop; on a phone the preview
   takes the screen with "‹ All templates". The preview frame is 390px (Phone) or up to 760px (Desktop), centred on a soft backdrop. */
.set-page.tpl-page{max-width:1500px}
.tpl-mode{margin:0 0 12px}
.tpl-sum{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0 0 20px}
.tpl-sum>span{display:inline-flex;align-items:center;gap:6px}
.tpl-sum-w{color:var(--muted)}
.tpl-split{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.tpl-grp{margin:0 0 20px}
.tpl-grp>h3{display:flex;align-items:center;gap:8px;font-size:var(--fs-13);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.tpl-n{font-size:12px;font-weight:600;color:var(--muted);background:var(--hover);border-radius:999px;padding:1px 7px;letter-spacing:0}
.tpl-rows{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff}
.tpl-cust>h3{color:var(--ink)}
.tpl-cust-sub{margin:-4px 0 8px}
.tpl-more{margin:0 0 20px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.tpl-more>summary{display:flex;align-items:center;gap:10px;padding:12px 14px;min-height:56px;cursor:pointer;list-style:none;user-select:none}
.tpl-more>summary::-webkit-details-marker{display:none}
.tpl-more>summary .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tpl-more>summary b{font-weight:600;font-size:var(--fs-14)}
.tpl-more>summary:hover{background:var(--hover);border-radius:var(--r-md)}
.tpl-chev{flex:none;color:var(--muted);transition:transform .15s}
.tpl-more[open]>summary .tpl-chev{transform:rotate(180deg)}
.tpl-more[open]>summary{border-bottom:1px solid var(--line);border-radius:var(--r-md) var(--r-md) 0 0}
.tpl-more>.tpl-grp{margin:14px 12px 16px}
.tpl-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 14px;min-height:56px;border:0;border-top:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;font:inherit}
.tpl-row:first-child{border-top:0}
.tpl-row:hover{background:var(--hover)}
.tpl-row.on{background:var(--green-tint,#EEF5E1);box-shadow:inset 3px 0 0 var(--soho-green,#88b736)}
.tpl-row .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tpl-row b{font-weight:600;font-size:var(--fs-14)}
.tpl-when,.tpl-to{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tpl-r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none;text-align:right;max-width:110px}
.tpl-badge{white-space:nowrap}
.tpl-pane{min-width:0}
.tpl-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;min-height:320px;border:1px dashed var(--line);border-radius:var(--r-md);padding:24px;color:var(--muted)}
.tpl-empty svg{width:28px;height:28px;color:var(--muted)}
.tpl-ph{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.tpl-back{align-self:flex-start}
.tpl-ttl h2{font-size:var(--fs-20,20px);margin:0 0 4px}
.tpl-st{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tpl-facts,.tpl-meta,.tpl-info{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0 0 12px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden}
.tpl-facts>div,.tpl-meta>div,.tpl-info>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:7px 12px;border-top:1px solid var(--line);font-size:var(--fs-13)}
.tpl-facts>div:first-child,.tpl-meta>div:first-child,.tpl-info>div:first-child{border-top:0}
.tpl-facts dt,.tpl-meta dt,.tpl-info dt{color:var(--muted);font-weight:500}
.tpl-facts dd,.tpl-meta dd,.tpl-info dd{margin:0;overflow-wrap:anywhere}
.tpx-subj{font-weight:600}
.tpl-ctl{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px;margin:0 0 12px}
.tpl-pick{flex:1 1 240px;max-width:420px;margin:0}
.tpl-pick select{width:100%}
.tpl-pick-s{padding:9px 0}
.tpl-w{border-bottom:0;gap:16px}
.tpl-w button svg{width:15px;height:15px}
.tpl-w button.on{color:var(--ink);border-bottom-color:var(--ink)}
.tpl-note{margin:0 0 10px}
.tpl-samp{margin:0 0 8px}
.tpl-wait{padding:40px 0;text-align:center}
.tpl-stage{background:#E9E6DC;border-radius:var(--r-md);padding:16px 10px;display:flex;justify-content:center;overflow:hidden}
.tpl-stage .tpl-frame{display:block;border:0;background:#fff;width:100%;max-width:760px;min-height:240px;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.tpl-stage[data-w="phone"] .tpl-frame,.tpl-stage[data-w="phone"] .tpl-screen,.tpl-stage[data-w="phone"] .tpl-pdf{max-width:390px}
.tpl-screen{width:100%;max-width:760px}
.tpl-stage .eq-load.tpl-eq{position:relative;inset:auto;z-index:auto;min-height:560px;border-radius:8px}
.tpl-pdf{width:100%;max-width:760px;display:flex;flex-direction:column;gap:12px}
.tpl-pdfpg{display:block;width:100%;height:auto;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18);border-radius:2px}
.tpl-pdfbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.tpx-text{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.55 var(--mono,ui-monospace,Menlo,monospace);background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px;margin:0;max-height:620px;overflow:auto}
.tpl-foot{display:flex;align-items:center;gap:6px;margin-top:12px}
.tpl-foot svg{width:13px;height:13px}
@media (max-width:999px){
  .tpl-split.has-sel .tpl-list{display:none}
  .tpl-split:not(.has-sel) .tpl-pane{display:none}
  .tpl-page.tpl-sel .tpl-mode,.tpl-page.tpl-sel .tpl-sum,.tpl-page.tpl-sel .set-head .sub{display:none} /* a phone showing one preview: the preview first */
  .tpl-stage{padding:10px 6px;margin:0 -6px}
}
@media (min-width:1000px){
  .tpl-split{grid-template-columns:minmax(320px,420px) minmax(0,1fr)}
  .tpl-back{display:none}
  .tpl-pane{position:sticky;top:12px}
  .tpl-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tpl-facts>div{grid-template-columns:minmax(0,1fr);gap:2px;border-top:0;border-left:1px solid var(--line)}
  .tpl-facts>div:first-child{border-left:0}
}

/* Go-live 8 screen-size review (Soho, SMS Nov 9 9:51 PM "review on all screen sizes"). 360 px phones: the bottom bar's buttons share the width
   (the More button ran 22 px off the screen); labels drop one pixel on the narrowest phones. 981-1080 px (menu showing): Quotes/Invoices list
   columns were 48 px wider than the list (Amount cut off, page scrolled sideways at 1024), so Reference # steps out there, as on phones. */
.tabbar a,.tabbar button{min-width:0;padding-left:0;padding-right:0}
@media (max-width:374px){.tabbar a,.tabbar button{font-size:11px;letter-spacing:-.01em}}
@media (min-width:981px) and (max-width:1080px){.zlist .zc.hide-sm{display:none}}
/* the record's "What's next" strip: when the drive time cannot be read, its message ("Address suggestions are not connected…") was kept on one
   line and pushed the invoice/quote page ~300 px wider than the screen (1024–1440 px, sideways scroll). The message now wraps; a drive time stays on one line. */
.next2 .gdrv-t.muted{white-space:normal}
/* Go-live 9 sizing review (Soho, SMS Nov 9 11:10 PM: "does the sizing of the whole app make sense every screen"). Measured on every main screen at
   360-1920 px. Phones and tablets (the bottom-bar layout, up to 980 px): every tap target is at least 44 px (Apple/Google minimum; it was 30-38 px on
   the top bar, list tabs and chips, search boxes, record actions and form boxes), inputs and buttons share one height (44 px), the bottom bar keeps
   six equal buttons on record pages too (it shrank to the words there: Home was 34 px wide, More 27 px), the Home tiles' small capitals read 11.5 px
   (10.5 px was the smallest text in the app), and the editor's title matches the other pages' titles. Existing colours only. */
@media (max-width:980px){
  .top-actions .zplus,.top-actions .avatar.me-sm,.zsearch .zs-mod{min-width:44px;min-height:44px}
  .zsearch .zs-in{min-height:44px}
  .ztabs button,.qf .qf-c{min-height:44px}
  .ztabs button{min-width:44px}
  .btn,summary.btn{min-height:44px}
  summary.btn.icon,.btn.icon{min-width:44px}
  input.in:not([type=checkbox]):not([type=radio]):not([type=range]),select.in,.zl-search .in,.zsel .in{min-height:44px}
  .qty button{min-width:44px;min-height:44px}
  .qty input{min-height:44px}
  .pin-btn{min-width:44px;min-height:44px;margin:-7px}
  .tdy-h{font-size:12px}
}
/* the round help button (bottom right) sat on top of the last row's button (Home "Finish", a customer's "Add"): pages end with room for it */
@media (min-width:981px){#view{padding-bottom:max(84px,var(--view-pb,0px))}}
/* ===== uifix-nov10 (Soho, SMS Nov 10 7:26 AM "Yes all on a preview": the Google-quality audit's 10 fixes + lists that load as you scroll).
   Existing colours only (no new hex value): text greys are var(--muted) #6F6B65; #8A867F stays for icons and lines. ===== */
/* 8. Skip to content: the first Tab on every staff page; hidden until focused */
.skip-link{position:fixed;left:12px;top:-60px;z-index:200;display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:8px;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);box-shadow:var(--shadow-md);font-size:14px;font-weight:600;text-decoration:none}
.skip-link:focus,.skip-link:focus-visible{top:12px;outline:2px solid var(--soho-dark);outline-offset:2px}
/* 6. Messages (snackbar): one at a time, at the bottom, one short line, Close (and Retry when there is one), gone after 4 s */
.toast > svg{width:18px;height:18px;flex:none}
.toast .tst-t{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:981px){.toast .tst-t{-webkit-line-clamp:1;white-space:nowrap;text-overflow:ellipsis;display:block}}
.toast .tst-a{flex:none;display:flex;align-items:center;gap:2px}
.toast .tst-b{height:36px;min-width:36px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--green-2);font:inherit;font-weight:600;cursor:pointer}
.toast .tst-b:hover{background:var(--hover)}
.toast .tst-x{padding:0;display:grid;place-items:center;color:var(--muted)}
.toast .tst-x svg{width:18px;height:18px}
.toast.err .tst-b:not(.tst-x){color:var(--red)}
@media (max-width:980px){.toast .tst-b{height:44px;min-width:44px}}
/* 5. Phones and tablets: Help lives in "More" (one round button on screen, the +); the round ? stays on computers */
@media (max-width:980px){.helpfab{display:none!important}.helppop.hp-sheet{left:12px;right:12px!important;width:auto;max-width:none;bottom:calc(76px + env(safe-area-inset-bottom))!important}}
.pm-it.pm-help small,.dd-item.pm-help small{display:block}
@media (min-width:981px){.phone-only{display:none!important}}
/* 7. Required labels: ink like every other label; red only once that box really has an error */
#editor.zf .zf-row.req:has(.err)>.zf-l{color:var(--red)}
/* 10. One status pill: filled tint, one height everywhere (lists, record header, editor) */
.pill,.zlr .pill,.z1-h .pill,.ed-head .states .pill,.ed-top .bx-st .pill{height:22px;padding:0 8px;gap:5px;font-size:12px}
/* 10. One phone top bar: the search icon (opens search) + quick create + your menu, on every screen */
@media (max-width:899px){
  .app .zsearch{visibility:visible;flex:none;width:auto;border:0;background:none;box-shadow:none}
  .app .top-actions{margin-left:auto}
  .app .zsearch .zs-in{display:none}
  .app .zsearch .zs-mod{border-right:0}
}
/* 4. the editor's customer line while the history loads: the height the real line takes (two lines on a phone) */
.bx-sub-sk{display:flex;align-items:center;min-height:20px}
@media (max-width:640px){.bx-sub-sk{min-height:40px}.bx-sel .s.bx-pre{min-height:39px}}
/* B. lists that load as you scroll: the grey row while the next ones come in */
.zl-auto{display:block}
/* long lists stay smooth on phones: rows far off screen are not drawn until they come near (the browser keeps their height) */
.zl-panel .zlr,.zs-rows .zlr{content-visibility:auto;contain-intrinsic-size:auto 56px}
@media (min-width:981px){.zl-panel .zlr{contain-intrinsic-size:auto 41px}} /* QA Nov 10: a computer row is 41 px; the estimate matches it (the way back also goes by row) */
.zl-auto .zlr-sk{display:flex;align-items:center;gap:12px;height:56px;padding:0 16px}
.zl-auto .zlr-sk .sk{height:12px;border-radius:6px}
.zl-auto .zl-fallback[hidden]{display:none}
.zl-more .zl-end{display:block;padding:12px 0;color:var(--muted);font-size:13px}
/* 3. one button set: primary 40 px (44 px on phones and tablets), secondary outline, text button */
/* $0 note lines (Soho, Nov 10): a NEW text-only $0 line is not saved; one short line on that row says where notes go */
.nl-msg{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0 2px;font-size:var(--fs-13);color:var(--ink-2)}
.nl-msg svg{width:14px;height:14px;color:var(--muted);flex:none}
@media (max-width:980px){.nl-msg .linkbtn{min-height:44px}}

/* QA Nov 10 (uifix re-check): every tap on a phone or tablet is at least 44 px (no new colours, nothing moves on a computer) */
@media (max-width:980px){
  .pw-eye{height:44px}
  .lk-link{min-height:44px;padding:0}
  .pe-links .pe-link{min-height:44px;padding:0 4px}
  #zPdfDl,#zPrint{min-width:44px;min-height:44px}
  .ed-head a.btn[href^="#/preview/"],a.btn[href^="#/preview/"]{min-width:44px}
  .zd-search .bigsearch{height:46px}
  .tpl-ins{min-height:44px;padding:0 6px}
  #editor.zf .zit-r .zit-kn textarea.in,.zit-kn textarea.in{min-height:44px}
}

/* ===== Big screens (Nov 9, Soho: "I don't like the app on my 27 inch screen"). On a 27" 2560×1440 screen the app was drawn at laptop size:
   14px text, 248px menu, lists stretched across 2,300px, record pages and forms crowded into the top-left corner.
   From 1800px wide the whole app (menu + page) is drawn larger, the way a laptop shows it, so text, buttons and tables are comfortable
   to read and use. Phones and laptops (under 1800px) are not touched. --vz is the scale; 100vh inside the scaled app is divided by it. */
@media (min-width:1800px){html{--vz:1.12}}
@media (min-width:2200px){html{--vz:1.25}}
@media (min-width:2450px){html{--vz:1.33}}
@media (min-width:1800px){
  .app > .side, .app > .main{zoom:var(--vz)}
  .app,.app.z{grid-template-columns:calc(248px * var(--vz)) minmax(0,1fr)}
  .app.side-min,.app.z.side-min{grid-template-columns:calc(68px * var(--vz)) minmax(0,1fr)}
  .side{height:calc(100vh / var(--vz))}
  .zsplit{min-height:calc(100vh / var(--vz) - 60px)}
  .zs-list{height:calc(100vh / var(--vz) - 60px)}
  .pk{max-height:calc(100vh / var(--vz) - 92px)}
  .page.cal{min-height:calc(100vh / var(--vz) - 60px)}
  .page.cal[data-view="month"]{height:calc(100vh / var(--vz) - 60px)}
  #editor.zf .zf-more{max-height:calc(70vh / var(--vz))}
  .zmore-menu,.zpdf-pop{max-height:calc(100vh / var(--vz) - 140px)}
  .kmail{height:calc(60vh / var(--vz))}
  /* the quote / invoice form uses more of the wide page instead of stopping at the left half */
  #editor.zf .zf-body{max-width:1400px}
  /* the floating windows live outside the app, so they get the same scale on their own */
  .modal{zoom:var(--vz);top:calc(9vh / var(--vz));max-height:calc(84vh / var(--vz));width:min(620px,calc(100vw / var(--vz) - 24px))}
  .palette{zoom:var(--vz);top:calc(12vh / var(--vz));width:min(640px,calc(100vw / var(--vz) - 24px))}
  .drawer{zoom:var(--vz);width:min(760px,calc(100vw / var(--vz)))}
  .toasts,.ubar{zoom:var(--vz)}
  /* the printed paper (Print preview / customer page) is drawn larger too; Print and Download PDF copy the paper itself, unscaled */
  .doc-preview,.pe-wrap{zoom:var(--vz);min-height:calc(100vh / var(--vz))}
}