/* ============================================================
   NuCedar Quote / Order — app.css  (v5.48)
   Palette lifted from NuCedar Field Intelligence: sand, leather,
   cedar. Masthead is the same near-black gradient with a gold
   hairline. Login sits on the Field Intelligence hero photo.
   ============================================================ */
/* v3.20: gold gradient Save with centred label + drop shadow; colour dd
   fills the whole box (no chip); delete confirm modal (.danger); saved pill
   in the header + green check at the foot; override inputs centred/bigger;
   Sell header + per-price unit tag; Extended centred and off the eye icon;
   coverage tag; shingle note removed; dashboard toolbar goes dark (search,
   salesman select, grey unselected pills); quote list headers + salesman
   column + address subline.
   v3.9: ledger polish — split SKU/Description header, fixed sku column +44px
   gap, length+sell centred, colour select painted with the colour, drawer
   narrowed to stop before Length, iOS transform fix for sell override, dup
   no longer opens the length wheel. SQL: sql/2026-08-28_catalog_ord.sql.
   v3.8: black drop shadow extended to line-items card; masthead gold glow
   softened (.45->.30). Strip keeps gold glow.
   v3.7: crisp gold border on the cream cards (fuzzy-glow fix); strip keeps
   its clean navy edge (white inset excluded).
   v3.6: qty+unit inline centred; roomier SKU column; picker pc/sq pill;
   tight gold glow on the quote cards; navy ledger header.
   v3.5: masthead black again; gold rule under it on the quote screen only.
   v3.4: one live/fallback truth, big-SKU rows, picker length grid.
   v3.3: metrics strip goes deep blue (riffs on the dashboard's blue-charcoal wash) */
:root{
  --navy:#182838; --navy-2:#111e2b; --navy-3:#22374d; --navy-line:rgba(255,255,255,.10);
  --on-navy:#F2E8CE; --on-navy-2:#C9BFA7; --on-navy-3:#8E9BAA;
  --cream:#EDE4D1; --cream-2:#FAF3E2; --cream-3:#DDD0B4;
  --ink:#2A1F12; --ink-2:#5B4A33; --ink-3:#3a2e1d;
  --gold:#6E4A22; --gold-2:#553818; --gold-3:#F2E8CE;
  --hi:#C19B5E; --sage:#5C6B4E; --danger:#a4392b;
  --muted:#9C8967; --muted-2:#B8A684; --line:#C9B98F; --line-2:#9C8456;
  --black:#161310; --black-2:#0d0b09;
  --shadow:0 6px 28px rgba(60,30,10,.12); --shadow-hi:0 16px 48px rgba(60,30,10,.20);
  --serif:'DM Serif Display',Georgia,serif;
  --sans:'Manrope',system-ui,-apple-system,sans-serif;
  --mono:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --script:'Pinyon Script',cursive;
  --r:6px;
  --charcoal:#2b2622;
  --dash-bg:url('../assets/dash-bg.jpg');
  --hero:url('https://www.gardenstatelumber.com/wp-content/uploads/nucedar-40-01.jpg');
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;scrollbar-gutter:stable;background:var(--cream);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;line-height:1.5}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid var(--hi);outline-offset:2px}
.app{min-height:100%;display:flex;flex-direction:column}
[hidden]{display:none!important}
em{font-style:italic}

/* ---------- boot ---------- */
.boot{flex:1;display:grid;place-items:center;background:linear-gradient(180deg,var(--black),var(--black-2))}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid rgba(255,255,255,.14);border-top-color:var(--hi);animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- login: Field Intelligence hero as the backdrop ---------- */
.login{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px;background:#2a2520;overflow:hidden;min-height:100vh}
.login-hero{position:absolute;inset:0;z-index:0;background:var(--hero) 50% 73% no-repeat;background-size:117% auto;image-rendering:-webkit-optimize-contrast}
.login-hero::after{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 62% 78% at 50% 42%,rgba(20,15,8,.86) 0%,rgba(20,15,8,.70) 45%,rgba(20,15,8,.34) 75%,rgba(20,15,8,.12) 100%),
  linear-gradient(180deg,rgba(20,15,8,.30) 0%,rgba(20,15,8,.05) 35%,rgba(20,15,8,.45) 100%)}
.login-card{position:relative;z-index:1;width:min(460px,100%);margin:0 auto;color:#fff;text-align:center;transform:translateY(-4vh)}
.login-card img.logo{width:min(320px,78%);height:auto;margin:0 auto 26px;display:block;position:relative;left:-5px}
.login-card .sub{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--hi);font-weight:700;margin-bottom:14px}
.login-card h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,50px);line-height:1.02;letter-spacing:-.015em;margin:0 0 30px}
.login-card h1 em{color:#E8D6B4}
.btn-ms{display:inline-flex;align-items:center;gap:12px;width:100%;justify-content:center;padding:15px 20px;border-radius:4px;border:1px solid rgba(255,255,255,.18);background:var(--cream-2);color:var(--ink);font-weight:700;font-size:15px;transition:transform .15s,box-shadow .15s}
.btn-ms:hover{transform:translateY(-1px);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.btn-ms:disabled{opacity:.6;cursor:default;transform:none}
.btn-ms svg{width:20px;height:20px}
.login-foot{margin-top:42px;display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:20px;border-top:1px solid rgba(193,155,94,.3);text-align:center}
.login-foot .ver{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#E8D6B4;padding:4px 10px;border:1px solid rgba(232,214,180,.45)}
.login-err{margin:18px 0 0;padding:12px 14px;border-radius:4px;background:rgba(164,57,43,.28);border:1px solid rgba(164,57,43,.6);color:#ffd9d3;font-size:13.5px;line-height:1.45}
.login-err strong{display:block;margin-bottom:2px;color:#fff}

/* ---------- "Distributed by Garden State Lumber" lockup ---------- */
.distrib{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;color:var(--hi)}
.distrib .distrib-txt{display:flex;flex-direction:column;align-items:center;line-height:1}
.distrib .by{font-family:var(--script);font-style:normal;font-size:22px;color:var(--hi);letter-spacing:.01em;margin-bottom:2px}
.distrib em{font-family:var(--sans);font-style:normal;font-weight:800;font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;color:#E8D6B4}
.distrib img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1px solid rgba(193,155,94,.55)}
.topbar .distrib em{display:none} /* v3.26: nav space — text lockup lives on in the login footer */
.login-foot .distrib{flex-direction:column;gap:8px}
.login-foot .distrib img{width:57px;height:57px;order:-1}
.login-foot .distrib .distrib-txt{align-items:center}

/* ---------- masthead: near-black gradient + gold hairline ---------- */
.topbar{background:linear-gradient(180deg,var(--black-2) 0%,var(--black) 45%,var(--charcoal) 100%);color:#fff;display:flex;align-items:center;gap:18px;padding:14px 28px;padding-top:max(14px,env(safe-area-inset-top));position:sticky;top:0;z-index:5;border-bottom:.5px solid rgba(193,155,94,.3)}
.topbar .brand{display:flex;align-items:center;gap:14px;background:none;border:0;color:inherit;padding:0}
.topbar .brand img{height:48px;width:auto}
.topbar .brand .kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--hi);font-weight:700}
.topbar .grow{flex:1}
.topbar:has(.topnav):not(.page-home) .grow{display:none}.topbar.page-home .topnav{display:none} /* spacer stands down when the nav is centering itself */
.topnav{display:flex;align-items:center;gap:6px;margin:0 auto} /* v3.27: centered between brand and Distributed by */
.topnav .tn{display:flex;align-items:center;gap:7px;padding:8px 12px;border:0;border-radius:5px;background:transparent;color:var(--on-navy-2);cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.topnav .tn svg{width:15px;height:15px;color:var(--nav-c,var(--on-navy-2))}
.topnav .tn.create{--nav-c:#C19B5E}.topnav .tn.create span{line-height:1.15;text-align:left}.topnav .tn.search{--nav-c:#9CBFDE}.topnav .tn.products{--nav-c:#DBA06C}.topnav .tn.analytics{--nav-c:#A9CB92}.topnav .tn.admin{--nav-c:#AC99C8}
@media(hover:hover){.topnav .tn:hover{color:var(--on-navy);background:rgba(255,255,255,.06)}}
.topnav .tn.on{color:var(--nav-c,var(--hi));box-shadow:inset 0 -2px 0 var(--nav-c,var(--hi));border-radius:5px 5px 0 0}
@media (max-width:900px){.topnav .tn span{display:none}.topnav .tn{padding:8px 9px}}
.who{display:flex;align-items:center;gap:12px;font-size:13px;padding-left:18px;border-left:1px solid rgba(255,255,255,.12)}
.who .name{font-weight:600;color:rgba(255,255,255,.9)}
.pill{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.8)}
.pill.admin{background:rgba(193,155,94,.18);border-color:rgba(193,155,94,.55);color:#F2E8CE}
.topbar .who .stack{align-items:stretch}
.topbar .who .stack .pill{display:inline-flex;justify-content:center;text-align:center}
.topbar:has(+.shell.dark){border-bottom:3px solid var(--hi);box-shadow:0 5px 16px rgba(193,155,94,.30)}
.pill.sales_manager{background:rgba(92,107,78,.35);border-color:rgba(140,160,120,.5);color:#DDE8D3}
.pill.stat{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#E8D6B4}
.pill.stat .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 0 rgba(0,0,0,0);flex:none}
.pill.stat.on .dot{background:#4ADE80;box-shadow:0 0 8px rgba(74,222,128,.85)}
.pill.stat.off .dot{background:#EF4444;box-shadow:0 0 8px rgba(239,68,68,.85)}
.who .stack{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.85);padding:8px 14px;border-radius:0;font-size:13px;font-weight:600}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:var(--hi)}

/* ---------- page frame: house photo knocked back to ~20% under the cream ---------- */
.shell{flex:1;display:flex;flex-direction:column;position:relative;isolation:isolate}
.shell::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(237,228,209,.84) 0%,rgba(237,228,209,.80) 55%,rgba(237,228,209,.88) 100%),var(--dash-bg) center 30%/cover no-repeat}
.shell.dark::before{background:linear-gradient(180deg,rgba(24,29,37,.93) 0%,rgba(19,23,30,.92) 50%,rgba(15,18,24,.95) 100%),var(--dash-bg) center 30%/cover no-repeat}
.shell.dark .btn-back{border-color:#5A4D38}
.shell.dark .btn-back:hover{border-color:var(--gold)}
.shell.dark .qtitle .eyebrow{color:var(--hi)}
.shell.dark .qtitle h2{color:#FAF3E2}
.shell.dark .card:not(.strip){border-color:rgba(193,155,94,.70);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 0 10px rgba(193,155,94,.38)}
.shell.dark .q-cards .card,.shell.dark .card.lines{border-color:rgba(193,155,94,.55);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 8px 20px rgba(0,0,0,.30),0 2px 6px rgba(0,0,0,.18)}
.shell.dark .qtitle h2 em{color:var(--hi)}
.shell.dark .qo-toggle{border-color:rgba(232,214,180,.45);background:rgba(0,0,0,.25)}
.shell.dark .qo-toggle button{color:rgba(232,214,180,.75)}
.shell.dark .qo-toggle button.on{background:var(--hi);color:var(--black-2)}
.shell.dark .btn-quiet{border-color:transparent;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.page{flex:1;width:min(1120px,100%);margin:0 auto;padding:36px 22px 64px}
.page:has(.adm-tabs),.page:has(.pr-wrap){width:min(1340px,100%)}
.greet{margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.greet-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:10px}
.greet h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.6vw,46px);line-height:1.02;letter-spacing:-.015em;margin:0}
.greet h2 em{color:var(--ink-2)}
.btn-primary{background:var(--gold);color:var(--cream-2);border:0;padding:14px 22px;border-radius:4px;font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:10px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s,background .15s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-hi);background:var(--gold-2)}
.btn-primary.sm{padding:10px 16px;font-size:13.5px;margin-left:auto}
.btn-primary .plus{font-family:var(--mono);font-size:18px;line-height:1}

/* ---------- doorways ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.tile{position:relative;text-align:left;background:linear-gradient(160deg,#2b2622 0%,#161310 55%,#0d0b09 100%);border:1px solid rgba(193,155,94,.28);border-radius:var(--r);padding:22px 22px 20px;min-height:176px;display:grid;grid-template-columns:52px 1fr;grid-template-rows:1fr auto;column-gap:16px;color:#F2E8CE;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 8px 24px rgba(20,12,4,.35);transition:transform .18s,box-shadow .18s,border-color .18s;overflow:hidden}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--tile-c,var(--gold))}
.tile::after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--tile-c,var(--gold)) 0%,transparent 70%);opacity:.22;pointer-events:none;transition:opacity .18s}
.tile:hover{transform:translateY(-3px);box-shadow:0 20px 48px rgba(20,12,4,.5);border-color:var(--tile-c,var(--hi))}
.tile:hover::after{opacity:.40}
.tile-ic{grid-row:1/3;width:52px;height:52px;border-radius:4px;display:grid;place-items:center;background:var(--tile-c,var(--hi));color:#0d0b09;box-shadow:0 6px 16px rgba(0,0,0,.45)}
.tile-ic svg{width:28px;height:28px}
.tile-body{min-width:0}
.tile .eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--tile-c,var(--gold));font-weight:700}
.tile .title{font-family:var(--serif);font-size:30px;line-height:1.1;margin:8px 0 0;letter-spacing:-.01em}
.tile .title em{color:var(--tile-c,var(--hi));white-space:nowrap}
.tile .foot{grid-column:2;display:flex;justify-content:flex-end;margin-top:18px}
.tile .arrow{width:32px;height:32px;border-radius:0;display:grid;place-items:center;border:1px solid rgba(242,232,206,.3);color:#F2E8CE;transition:background .18s,color .18s,border-color .18s}
.tile:hover .arrow{background:var(--tile-c,var(--hi));color:#0d0b09;border-color:transparent}
.tile.create{--tile-c:#C19B5E}
.tile.search{--tile-c:#7FA3C4}
.tile.products{--tile-c:#C4834F}
.tile.analytics{--tile-c:#8FAF7A}
.tile.admin{--tile-c:#8C7AA6}

/* ---------- inner pages ---------- */
.sec-head{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:32px;margin:0;letter-spacing:-.01em}
.btn-back{background:linear-gradient(180deg,#332C22,#191510);border:1px solid #443A2C;color:#E3B85C;padding:8px 13px;border-radius:4px;font-size:13px;font-weight:600;box-shadow:0 1px 3px rgba(20,15,8,.3)}
.btn-back:hover{background:linear-gradient(180deg,#3E362A,#221C14);border-color:var(--gold);color:#F0CC78}
.panel{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.panel p{margin:0;color:var(--ink-2);line-height:1.5}
.panel .step{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:8px}
.adm-tabs{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid #D5A941;box-shadow:0 12px 18px -12px rgba(213,169,65,.65)}
.adm-tabs button{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r);padding:11px 20px;font-weight:700;font-size:15px;color:var(--ink-2);letter-spacing:.01em}
@media(hover:hover){.adm-tabs button:hover{border-color:var(--gold);color:var(--ink)}}
.adm-tabs button.on{background:linear-gradient(180deg,var(--navy),var(--navy-2));border-color:var(--navy-2);color:var(--on-navy);box-shadow:0 2px 8px rgba(0,0,0,.22)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 16px;border-radius:4px;font-size:13.5px;box-shadow:var(--shadow-hi);z-index:50;max-width:min(520px,92vw)}
.toast.err{background:var(--danger)}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .topbar .distrib .distrib-txt{display:none}
}
@media (max-width:640px){
  .topbar{padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));gap:10px}
  .topbar .brand img{height:39px}
  .topbar .brand .kicker,.who .name{display:none}
  .who{padding-left:10px}
  .page{padding:22px 14px 48px}
  .login{padding:36px 20px;align-items:flex-end}
  .login-hero{background-position:center 30%;background-size:cover}
  .login-hero::after{background:linear-gradient(180deg,rgba(20,15,8,.25) 0%,rgba(20,15,8,.6) 40%,rgba(20,15,8,.92) 100%)}
  .login-card{transform:none}
  .login-card img.logo{width:200px}
  .tile{min-height:160px;grid-template-columns:44px 1fr}
  .tile-ic{width:44px;height:44px}
  .tile .title{font-size:26px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================
   QUOTE SCREEN (v3.1, Step 3.1)
   Cream cards on a dark blue-charcoal ground. The house photo sits
   under the dark wash so the paper lifts off it. Metrics strip
   (totals + overrides) rides between the header cards and the
   ledger, as in v19. Internal figures live in a per-line reveal.
   ============================================================ */
.page.wide{width:min(1400px,100%)}
.spinner.dark{border-color:rgba(42,31,18,.15);border-top-color:var(--gold);width:18px;height:18px;vertical-align:-4px;margin-right:8px}
.qload{color:var(--ink-2)}
.quote .sec-head{align-items:flex-end;gap:18px}
.quote .sec-head .btn-back{align-self:center}
.qtitle{margin-right:auto}
.q-actions button[disabled]{opacity:.45;cursor:not-allowed}
.qtitle .eyebrow,.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700}
.qtitle h2{margin:4px 0 0;font-size:38px;line-height:1}
.qtitle h2 em{color:var(--ink-2)}
.qo-toggle{display:inline-flex;border:1px solid var(--ink);border-radius:4px;overflow:hidden;align-self:center}
.qo-toggle button{background:transparent;border:0;padding:9px 18px;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.qo-toggle button.on{background:var(--ink);color:var(--cream-2)}
.q-actions{display:flex;gap:8px;align-self:center}
.btn-quiet{display:inline-flex;align-items:center;gap:8px;background:var(--cream-2);border:1px solid var(--line);color:var(--ink);padding:10px 14px;border-radius:4px;font-weight:700;font-size:13px}
.btn-quiet svg{width:16px;height:16px}
.btn-quiet:hover{border-color:var(--gold);background:#fff}
.q-actions .btn-primary{margin-left:4px}
.q-actions .btn-primary svg{width:16px;height:16px}

/* cards */
.card{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px 20px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
.card h3{font-family:var(--serif);font-weight:400;font-size:20px;margin:0 0 14px;letter-spacing:-.01em;color:var(--ink)}
.q-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 14px}
.f{display:flex;flex-direction:column;gap:5px;min-width:0}
.f.span2{grid-column:span 2}
.f>span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f .hint{font-family:var(--mono);font-size:10px;color:var(--gold);letter-spacing:.08em;line-height:1.3;margin-top:-1px}
.f input,.f select,.f textarea,.qnotes textarea,.strip .ov input,.irow .ov input{font:inherit;font-size:14px;padding:9px 10px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);min-width:0;width:100%}
.f input:focus,.f select:focus,.f textarea:focus,.ledger input:focus,.ledger select:focus,.qnotes textarea:focus,.strip input:focus,.irow input:focus,.ledger .sku-in:focus{outline:2px solid var(--hi);outline-offset:0;border-color:var(--hi)}
.f select{-webkit-appearance:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B4A33' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 8px center/14px no-repeat;padding-right:28px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff}
.seg button{flex:1;background:transparent;border:0;padding:9px 10px;font-weight:700;font-size:13px;color:var(--muted);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.seg button.on{background:var(--gold-3);color:var(--gold-2);box-shadow:inset 0 0 0 1px var(--hi)}
.oshead{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px}
.oshead h3{margin:0}
.payseg{display:flex;align-items:center;gap:8px}
.ctpill{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:6px;padding:3px 10px;background:rgba(255,255,255,.55);border:1.5px solid}
.ctpill.yard{color:#1a5c38;border-color:#1a5c38}
.ctpill.retail{color:#15508f;border-color:#15508f}
.payseg>span{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.seg.sm button{padding:4px 12px;font-size:12px;min-width:44px}

/* main split */
.q-main{display:block}
.card.lines{padding:0;overflow:hidden}
.lines-foot{display:flex;align-items:center;gap:16px;padding:10px 12px 12px}
.lines-hint{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted-2)}
.btn-quiet.sm{padding:7px 12px;font-size:12.5px}
/* in-cell SKU entry: the blank last row IS the next line */
.ledger .sku-in{font:inherit;font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.02em;width:100%;padding:8px 10px;border:1px dashed var(--line-2);border-radius:4px;background:rgba(255,255,255,.75);color:var(--ink)}
.ledger .sku-in:focus{border-style:solid;background:#fff}
.ledger .sku-in::placeholder{font-family:var(--sans);font-weight:500;letter-spacing:0;color:var(--muted-2)}
.ledger tr.new td{background:rgba(250,243,226,.55);vertical-align:middle}
.ledger tr.new input:disabled,.ledger tr.new select:disabled{opacity:.45;background:transparent;border-style:dashed;color:var(--muted)}
.ledger tr.new .c-qty input{width:54px}

/* floating picker menu */
.sku-menu{position:absolute;z-index:60;background:#fff;border:1px solid var(--line-2);border-radius:4px;box-shadow:0 18px 48px rgba(20,12,4,.28);overflow:auto;-webkit-overflow-scrolling:touch}
.sku-menu .sku-cat{position:sticky;top:0;background:var(--cream);font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700;padding:6px 12px;border-bottom:1px solid var(--line)}
.sku-menu .opt{display:grid;grid-template-columns:76px 118px minmax(0,300px) auto minmax(28px,1fr);gap:8px;align-items:center;padding:11px 16px;cursor:pointer;border-bottom:1px solid rgba(201,185,143,.35);font-size:13px}
.sku-menu .opt.hi,.sku-menu .opt:hover{background:var(--gold-3)}
.sku-menu .opt .s{font-family:var(--mono);font-weight:600;color:var(--ink);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sku-menu .opt .d{color:var(--ink-2);min-width:0}
.sku-menu .opt .d small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.sku-menu .opt .d small.sq{font-family:var(--mono);font-size:10px;color:var(--gold);letter-spacing:.06em}
.sku-menu .opt.off{opacity:.45;cursor:default}
.sku-menu .opt.off.hi,.sku-menu .opt.off:hover{background:none}
.sku-menu .opt .fitcell{display:flex;align-items:center;justify-content:flex-end;padding-right:8px}
.sku-menu .opt .pkfit{display:block;width:54px;height:54px;border-radius:50%;object-fit:cover;background:#fff;border:1px solid var(--gold-2);box-shadow:var(--shadow);pointer-events:none}
.sku-menu .opt .pkfit.pkmld{border:0;border-radius:0;background:none;box-shadow:none;object-fit:contain;width:56px;height:52px}
.sku-menu .opt .d .un{display:block;font-size:10.5px;font-weight:600;color:var(--danger);letter-spacing:.04em;margin-top:2px}
.sku-menu .opt .lk .lc.off,.sku-menu .opt .lk .lc.off:hover{opacity:.35;background:var(--cream-2);border-color:var(--line);color:var(--ink);cursor:default}
.sku-menu .opt .lk{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.sku-menu .opt .lk .lrow{display:grid;column-gap:5px;row-gap:2px}
.sku-menu .opt .lk .lc{font:inherit;font-family:var(--mono);font-size:12px;font-weight:700;min-width:38px;min-height:32px;padding:2px 5px;background:var(--cream-2);border:1px solid var(--line);border-radius:6px;color:var(--ink);cursor:pointer;line-height:1.15}
.sku-menu .opt .lk .lc:hover,.sku-menu .opt .lk .lc:active{background:var(--gold);border-color:var(--gold);color:#fff}
.sku-menu .opt .lk .lrow i{font-style:italic;font-family:var(--mono);font-size:10.5px;color:var(--gold);text-align:center;line-height:1.3}
.sku-menu .opt .lk .cap{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:700;text-align:center;align-self:stretch;margin-top:0}
.sku-menu .opt .u{font-family:var(--mono);font-size:10px;color:var(--muted);text-align:right;letter-spacing:.08em;justify-self:end}
.sku-menu .opt.special .s{color:var(--gold)}
.sku-menu .sku-empty{padding:16px;color:var(--muted);font-size:13px}

/* the ledger */
.ledger-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ledger{width:100%;border-collapse:collapse;table-layout:fixed;min-width:1090px;font-size:13px}
.ledger .c-tools{width:34px;padding:8px 2px 8px 6px;vertical-align:middle}
.ledger tr.ln td{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ledger tr.ln td input,.ledger tr.ln td textarea{-webkit-user-select:text;user-select:text}
.ledger tr.pressing td{background:var(--cream-2)!important;transition:background .45s}
.ledger tr.dragging{position:relative;z-index:8}
.ledger tr.dragging td{background:var(--cream-2)!important;box-shadow:0 -1px 0 var(--hi),0 1px 0 var(--hi)}
.ledger tr.dragging td,body.dragging-line{cursor:grabbing}
body.dragging-line{user-select:none;-webkit-user-select:none}
.ledger .c-tools .ib{display:grid;width:26px;height:26px;margin:5px 0}
.ledger .c-tools .ib svg{width:15px;height:15px}
.ledger th{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#EAD8AC;font-weight:600;text-align:left;padding:10px 10px;border-bottom:1px solid var(--navy-2);background:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ledger th.num,.ledger td.num{text-align:right}
.ledger td{padding:16px 10px;border-bottom:1px solid rgba(201,185,143,.5);vertical-align:middle}
.ledger tr.ln:hover td{background:rgba(250,243,226,.6)}
.ledger input,.ledger select{font:inherit;font-size:13px;padding:7px 8px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);width:100%;min-width:0}
.ledger select{-webkit-appearance:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B4A33' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 6px center/12px no-repeat;padding-right:22px}
.ledger .c-qty{width:104px}
.ledger .c-qty .qw{display:flex;align-items:center;justify-content:center;gap:7px}
.ledger .c-qty input{width:54px;text-align:center;font-family:var(--mono);font-weight:600;-moz-appearance:textfield;padding-left:4px;padding-right:4px}
.ledger .c-qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.ledger .c-qty .um{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ledger .itm{display:flex;align-items:center;gap:44px;min-width:0}
.ledger .sku{min-width:132px;text-align:left}
.ledger th.c-item .th2{display:flex;gap:44px}
.ledger th.c-item .th2 b{font-weight:inherit}
.ledger th.c-item .th2 b:first-child{width:132px}
.ledger .itx{min-width:0}
.ledger .sku{font-family:var(--mono);font-weight:700;font-size:16.5px;color:var(--ink);letter-spacing:.02em;background:transparent;border:1px solid transparent;border-radius:3px;padding:2px 5px;margin-left:-5px;cursor:text}
.ledger .sku:hover{border-color:var(--line);background:#fff}
.ledger .c-item{min-width:270px;padding-left:24px;position:relative}
.ledger .c-len{width:100px}
.ledger .c-tex{width:140px}
.ledger .c-len select,.ledger .c-len input,.ledger .c-tex select{padding-top:7px;padding-bottom:7px}
.ledger .c-len select{text-align:center;text-align-last:center}
.ledger .c-len .dd .dd-lb{text-align:center}
.ledger .na{display:block;text-align:center;color:var(--muted-2);padding-top:8px}
.ledger .sku.special{color:var(--gold)}
.ledger .dsc{font-weight:600;color:var(--ink);font-size:13.5px;line-height:1.25}
.ledger .sz{position:relative;font-size:11px;color:var(--muted);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ledger .pq{font-family:var(--mono);font-size:10px;color:var(--gold);letter-spacing:.06em}
.ledger .fast{font-size:10px;color:var(--sage);font-style:italic}
.ledger .fixed{display:block;padding:7px 8px;text-align:center;border:1px solid transparent;border-radius:4px;background:var(--cream);color:var(--ink-2);font-weight:600;font-size:12.5px}
.tb{background:transparent;border:1px dashed var(--line-2);color:var(--muted);border-radius:4px;padding:6px 9px;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;gap:5px}
.tb svg{width:13px;height:13px}
.tb:hover{color:var(--gold-2);border-color:var(--gold);border-style:solid;background:#fff}
.ledger .cdesc{flex:1;min-width:0;font:inherit;font-weight:600;font-size:13.5px;line-height:1.3;padding:7px 8px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);resize:none;overflow:hidden;display:block}
.ledger tr.custom .itm{gap:14px}
.ledger tr.custom .cdesc{min-height:36px}
.ledger tr.custom .lenfree,.ledger tr.custom .c-tex .dd,.ledger tr.custom .c-col .dd,.ledger tr.custom .c-sell input{height:36px;padding-top:0;padding-bottom:0}
.ledger .sz .pat{font-weight:700;color:var(--gold);font-size:12px}
.ledger tr.needcost .c-act>.ib[data-act=int]{color:var(--gold-2);border-color:var(--hi);background:var(--gold-3);animation:beat 2.3s ease-in-out infinite}
.ledger tr.needcost.int .c-act>.ib[data-act=int]{animation:none}
.ledger tr.needcost.int .irow input[data-f=ccost]{border-color:var(--hi);animation:breathe 2.3s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(193,155,94,.7)}50%{box-shadow:0 0 0 6px rgba(193,155,94,0)}}
@keyframes beat{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(193,155,94,.55)}50%{transform:scale(1.16);box-shadow:0 0 0 7px rgba(193,155,94,0)}}
.ledger tr.incomplete.needcost .c-ext::before{display:inline;white-space:nowrap}
.ledger tr.needcost .c-ext::after{content:"\276F";display:inline-block;margin-left:6px;color:var(--gold);font-weight:800;font-size:12px;vertical-align:-1px;animation:nudge 2.3s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.ledger tr.needcost .c-act>.ib[data-act=int],.ledger tr.needcost .c-ext::after,.ledger tr.needcost.int .irow input[data-f=ccost]{animation:none}}
.ledger .c-col .ccname{margin-top:5px;font-weight:600}
.ledger tr.custom .c-sell{white-space:nowrap}
.ledger tr.custom .c-sell input{display:inline-block;width:calc(100% - 26px);font-family:var(--mono);font-weight:700;font-size:13.5px;color:var(--navy);text-align:right;padding:7px 8px;vertical-align:middle}
.ledger tr.custom .c-sell input::placeholder{font-weight:500;color:var(--muted-2)}
.ledger tr.custom .c-sell .pu{vertical-align:middle}
.irow .ov input[data-f=ccost]{width:88px}
.ledger .c-col{width:220px;position:relative}
.ledger .c-col select{padding-left:12px}
.ledger .sw{display:none}
.ledger .sw.none{background:transparent!important;border-style:dashed}
.ledger .c-sell{width:108px}
.ledger th.c-sell,.ledger td.c-sell{text-align:center}
.ledger td.num[data-k]{font-family:var(--mono);font-weight:600;white-space:nowrap}
.ledger tr.ov-dn td.c-sell{color:var(--danger)}
.ledger tr.ov-up td.c-sell{color:#1E7A3F}
.ledger .c-ext{width:112px}
.ledger th.c-ext,.ledger td.c-ext{text-align:center;padding-right:14px}
.ledger .c-sell .pu{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--muted);margin-left:4px}
.ledger .itx{position:relative}
.ledger .dsc[data-act=cov]{cursor:pointer}
.ledger .fast{position:relative}
.ledger .covpop{position:absolute;left:-3px;top:calc(50% + 3px);transform:translateY(-50%);z-index:6;background:var(--navy);color:#EAD8AC;
  font-size:11px;font-weight:600;letter-spacing:.02em;padding:5px 11px;border-radius:4px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.3)}
@media(hover:hover){.ledger .itx:hover .covpop{display:block}}
.ledger td.c-ext{color:var(--ink)}
.ledger tr.incomplete .c-ext{text-align:center}
.ledger tr.incomplete .c-ext::before{content:attr(data-needs);font-family:var(--sans);font-weight:500;font-size:10.5px;color:var(--muted);white-space:normal;display:block;text-align:right;line-height:1.2}
.ledger .c-act{width:92px;white-space:nowrap;text-align:right;padding-left:4px;padding-right:8px;position:relative;vertical-align:middle}
.ib{background:transparent;border:1px solid transparent;border-radius:4px;width:28px;height:28px;padding:0;display:inline-grid;place-items:center;color:var(--muted);vertical-align:middle}
.ib svg{width:16px;height:16px}
@media(hover:hover){.ib:hover{color:var(--ink);border-color:var(--line);background:#fff}
.ib.del:hover{color:var(--danger);border-color:var(--danger)}}
.ib.on{color:var(--gold-2);background:var(--gold-3);border-color:var(--hi)}
/* per-line reveal: override + internal figures */
/* internal figures: a drawer that slides in from the right over the row, eye toggles it */
.ledger .irw{position:absolute;top:0;bottom:0;right:100%;width:min(420px,38vw);overflow:hidden;pointer-events:none;z-index:3}
.ledger .irow{position:absolute;inset:0;display:flex;gap:10px;align-items:center;justify-content:space-evenly;padding:0 10px 0 34px;background:var(--navy);color:var(--on-navy);transform:translateX(102%);transition:transform .28s cubic-bezier(.2,.7,.2,1);box-shadow:-12px 0 24px rgba(0,0,0,.18)}
.ledger tr.int .irw{pointer-events:auto}
.ledger tr.int .irow{transform:translateX(0)}
.irow .chv{position:absolute;left:2px;top:50%;transform:translateY(-50%);background:transparent;border:0;cursor:pointer;padding:8px 5px;color:rgba(232,214,180,.6)}
.irow .chv:hover{color:var(--hi)}
.irow .chv svg{width:18px;height:18px;display:block}
.irow .m span,.irow .ov span{display:block;text-align:center;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-navy-3);font-weight:600;margin-bottom:3px;white-space:nowrap}
.irow .m b{font-family:var(--mono);font-weight:600;font-size:14px;color:var(--on-navy);display:block;white-space:nowrap;text-align:center}
.irow .ov{display:block}
.irow .ov input{width:104px;font-family:var(--mono);text-align:center;font-weight:600;padding:6px 8px;background:var(--navy-2);border-color:var(--navy-3);color:var(--on-navy)}
.irow .ov input::placeholder{color:var(--on-navy-3)}
.irow .ov input.up{color:#8FE3A5;border-color:rgba(143,227,165,.55)}
.irow .ov input.down{color:#FFAF9F;border-color:rgba(255,175,159,.55)}
.ledger tr.mg-ok .irow .m:last-child b{color:#9fc58a}
.ledger tr.mg-lo .irow .m:last-child b{color:#e6b062}
.ledger tr.mg-neg .irow .m:last-child b{color:#ff8a7a}
.lnote{display:flex;align-items:center;justify-content:flex-start;gap:6px;margin:0;position:absolute;left:24px;right:8px;bottom:2px}
.lnote[hidden]{display:none}
.lnote .nlb{font-size:11px;font-weight:700;color:#8A6420;white-space:nowrap}
.lnote input{flex:0 0 auto;max-width:min(440px,100%);font-size:13px;font-style:italic;font-weight:600;color:#8A6420;text-align:left;background:transparent;border:0;border-radius:0;padding:1px 4px}
.lnote input::placeholder{color:rgba(138,100,32,.5);font-weight:500;font-style:italic}
.lnote input:focus{outline:0;border-bottom:1px dashed rgba(138,100,32,.6)}

/* metrics strip: six figures on one row (v19 order), overrides on a slim bar beneath */
.card.strip{position:sticky;top:var(--strip-top,72px);z-index:9;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch;gap:0;padding:0;margin-bottom:30px;overflow:hidden;background:var(--navy);border-color:var(--navy-2);box-shadow:0 0 0 1px rgba(193,155,94,.45),0 0 16px rgba(193,155,94,.55),0 3px 10px rgba(20,12,4,.28)}
.strip .offband{grid-column:1/-1;background:#6b1f14;color:#FFD9CF;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;padding:7px 12px;text-align:center}
.strip .offband[hidden]{display:none}
.strip .m{min-width:0;padding:14px 12px 14px;border-right:1px solid var(--navy-line);display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;gap:5px}
.strip .m.go{cursor:pointer;transition:background .15s}
.strip .m.go:hover{background:rgba(255,255,255,.05)}
.strip .m>span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-navy-3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px;margin-bottom:2px;padding-left:.16em}
.strip .m>span small{font-size:9px;color:var(--hi);letter-spacing:.06em;text-transform:none}
.strip .m>b{font-family:var(--mono);font-weight:600;font-size:18px;color:var(--on-navy);white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.1}
.strip .m.tax>span{overflow:visible}
.strip .m.tax>span input{border:0;background:transparent;padding:0;margin:0;width:1.3ch;font-family:var(--mono);font-size:9.5px;font-weight:600;color:var(--on-navy-3);text-align:left;border-radius:4px;transition:font-size .15s,padding .15s,background .15s,box-shadow .15s,min-width .15s}
.strip .m.tax>span input:focus{outline:0;color:var(--on-navy);font-size:15px;padding:3px 6px;min-width:4.3ch;background:var(--navy-2);box-shadow:0 0 0 1px var(--hi);box-sizing:content-box}
.strip .m.tax>span i{font-style:normal;font-size:9.5px;letter-spacing:.16em;color:var(--on-navy-3);margin-left:-4px}
.strip .m.tax.quiet>b{color:var(--navy-3)}
.strip .m>span small:empty{display:none}
.strip .m.frt{position:relative}
.strip .m.frt>small{position:absolute;left:6px;right:6px;bottom:7px;font-family:var(--mono);font-size:9px;line-height:1.15;letter-spacing:.04em;color:var(--hi);text-align:center}
.strip .m.frt>small:empty{display:none}
.strip .m.total{background:var(--navy-2);border-right:0;box-shadow:inset 4px 0 0 var(--hi)}
.strip .m.total>span{color:var(--gold-3)}
.strip .m.total>b{font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:-.02em;color:var(--hi)}
.strip .m.total.glow{animation:totglow 1.1s ease-out}
.strip .m.total.glow>b{animation:totglow-b 1.1s ease-out}
@keyframes totglow{0%{box-shadow:inset 4px 0 0 var(--hi)}25%{box-shadow:inset 4px 0 0 var(--hi),inset 0 0 0 1px var(--hi),inset 0 0 34px rgba(193,155,94,.6)}100%{box-shadow:inset 4px 0 0 var(--hi)}}
@keyframes totglow-b{0%{color:var(--hi)}25%{color:#FFF3DA;text-shadow:0 0 14px rgba(255,220,160,.9)}100%{color:var(--hi);text-shadow:none}}
.strip b.ok{color:#9fc58a}.strip b.lo{color:#e6b062}.strip b.neg{color:#ff8a7a}
.strip .ctl{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;gap:0;padding:9px 0;border-top:1px solid var(--navy-line);background:var(--cream-2)}
.strip .ctl .qn{grid-column:1/4;min-width:0;gap:10px;padding:0 24px 0 12px}
.strip .ctl .ovs{grid-column:4/6;display:flex;align-items:center;justify-content:space-evenly;gap:8px;min-width:0}
.strip .ctl .ovs label{flex-direction:column;gap:3px}
.strip .ctl .ovs label.st>span,.strip .ctl .ovs label.vd>span{width:auto;white-space:nowrap;line-height:1}
.strip .ctl .ovs input{width:74px}
.strip .ctl .ovs label.vd>b{font-size:14.5px;line-height:29px}
.strip .ctl .qn input{flex:1;width:auto;min-width:0;text-align:left;font-family:var(--sans);font-weight:500;font-size:13px;background:#fff}
.strip .ctl .qn input:not(:placeholder-shown){color:var(--ink);border-color:var(--line);background:#fff}
.strip .ctl .stamp{grid-column:6;justify-self:center;margin:0}
.strip .ctl label{display:flex;align-items:center;gap:8px}
.strip .ctl label>span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:600;white-space:nowrap}
.strip .ctl label>b{font-family:var(--mono);font-weight:600;font-size:13px}
.strip .ctl label.st>span,.strip .ctl label.vd>span{white-space:normal;width:min-content;text-align:center;line-height:1.3}
.f input[data-q=salesman],.f input[data-q=gslPo],.f input[data-q=custPo],.f input[data-q=lead]{text-align:center}
.strip .ctl label.st input{text-align:center;font-size:14.5px}
.strip .ctl input{width:86px;font:inherit;font-family:var(--mono);font-size:13px;font-weight:600;text-align:right;padding:5px 8px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink)}
.strip .ctl input::placeholder{color:var(--muted-2);font-weight:500}
.strip .ctl input.set{color:var(--danger);border-color:var(--danger);background:#fff6f4}
.strip .stamp{margin:0;padding:4.5px 11px;font-size:10.5px;letter-spacing:.2em;border-width:1.5px;transform:rotate(-1.5deg)}
.strip .sh-note[hidden]{display:none}
.stamp{display:inline-block;border:2px solid #5C6B4E;color:#5C6B4E;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;transform:rotate(-2deg);border-radius:3px}
.stamp.direct{border-color:var(--danger);color:var(--danger)}
/* v4.95 — the on-screen badge is tappable and gently alive; print stamps stay still */
.strip .stamp{cursor:pointer;position:relative;overflow:hidden;user-select:none;-webkit-user-select:none}
.strip .stamp::after{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-100%);animation:shimmer 4.5s ease-in-out infinite}
.qmodal-btns:has(.stamp-btn){justify-content:center}
.stamp-btn{border:2px solid #5C6B4E;color:#5C6B4E;background:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.1em;white-space:nowrap;text-transform:uppercase;font-weight:700;border-radius:3px;padding:9px 10px;cursor:pointer}
.stamp-btn.direct{border-color:var(--danger);color:var(--danger)}
.stamp-btn:hover{background:var(--cream-2)}
.strip .stamp.ov{box-shadow:0 0 10px 2px rgba(92,107,78,.45)}
.strip .stamp.ov.direct{box-shadow:0 0 10px 2px rgba(164,57,43,.5)}
@keyframes shimmer{0%,55%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
/* territory / state picker */
.ter-pick{display:flex;align-items:center;justify-content:space-between;gap:8px;font:inherit;font-size:14px;padding:9px 10px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);width:100%;text-align:left;cursor:pointer}
.ter-pick b{font-weight:700}.ter-pick i{font-style:normal;color:var(--muted);font-size:12px}
.ter-pick.empty b{color:var(--muted);font-weight:500}
.ter-pick.empty{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.qmodal-card.wide{max-width:760px;width:calc(100% - 32px);max-height:calc(100vh - 48px);overflow:auto}
.qmodal-card.wide.sp-card{margin:auto;max-width:800px;max-height:calc(100dvh - 32px);overflow:auto;padding:18px 20px}
.sp-card>p{margin-bottom:10px}
.sp-row{display:grid;grid-template-columns:66px 1fr;gap:10px;align-items:start;padding:9px 0;border-top:1px solid var(--line)}
.sp-row h5{margin:0;padding-top:4px;font-family:var(--mono);font-size:17px;font-weight:800;letter-spacing:.04em;color:var(--gold);line-height:1}
.sp-row h5 small{display:block;font-size:10px;font-weight:600;letter-spacing:.02em;color:var(--muted);margin-top:4px;line-height:1.15}
.sp-tiles{display:flex;flex-wrap:wrap;gap:5px}
.sp-tile{width:62px;height:52px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);padding:0 3px;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;overflow:hidden}
.sp-tile b{font-size:15px;font-weight:800;line-height:1;letter-spacing:.02em}
.sp-tile span{font-size:7.5px;letter-spacing:-.01em;line-height:1.05;color:var(--muted);text-align:center;font-weight:600;max-height:16px;overflow:hidden}
.sp-tile:hover{border-color:var(--gold)}
.sp-tile.on{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.sp-tile.on span{color:var(--on-navy);opacity:.75}
.tm-pills{display:flex;flex-wrap:wrap;gap:5px}
.tm-pill{width:62px;height:52px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);padding:0 3px;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;overflow:hidden}
.tm-pill b{font-size:15px;font-weight:800;line-height:1;letter-spacing:.02em}
.tm-pill span{font-size:7.5px;letter-spacing:-.01em;line-height:1.05;color:var(--muted);text-align:center;font-weight:600;max-height:16px;overflow:hidden;font-family:inherit}
.tm-pill.on span{color:var(--on-navy);opacity:.75}
.tm-pill:hover{border-color:var(--gold)}
.tm-pill.on{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
/* admin → settings: territory map */
.tm-wrap{display:grid;gap:12px}
.tm-hint{font-size:13px;color:var(--ink-2)}
.tm-cols{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tm-col{border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.5);padding:12px 14px;min-height:96px}
.tm-col h4{margin:0 0 10px;font-size:13px;color:var(--ink)}
.tm-col h4 small{color:var(--muted);font-weight:600;margin-left:6px}
.tm-col.armed{cursor:pointer;border-style:dashed;border-color:var(--gold)}
.tm-col.armed:hover{background:rgba(193,155,94,.12)}
.tm-pill b{font-family:var(--mono)}
.tm-pill.fixed{cursor:default;color:var(--muted);background:transparent}
.strip .m.ov input{width:100%;font-size:14px;padding:6px 8px;font-weight:600}
.strip .m.ov input::placeholder{color:var(--muted-2)}
.strip .m.ov input:not(:placeholder-shown){color:var(--danger);border-color:var(--danger);background:#fff6f4}
.strip .sh-note{grid-column:1/-1;padding:7px 14px 8px;font-size:11px;line-height:1.4;font-style:italic;color:var(--ink-2);border-top:1px solid var(--line);background:rgba(221,208,180,.35)}

/* responsive */
@media (max-width:1100px){
  .fgrid{grid-template-columns:repeat(3,1fr)}
  .quote .sec-head .btn-back{order:-1}
  .qtitle{flex-basis:calc(100% - 140px)}
  .qo-toggle{margin-left:auto}
}
@media (max-width:820px){
  .card.strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .strip .m{border-top:1px solid var(--navy-line)}
  .strip .m.total{grid-column:1/-1;border-top:0}
  .strip .ctl{display:flex;flex-wrap:wrap;gap:14px 20px;padding:9px 14px 9px 12px}
  .strip .ctl .qn{flex:1 1 260px;padding:0}
  .strip .ctl .ovs{flex:1 1 auto;justify-content:flex-start;gap:18px}
  .strip .ctl .stamp{margin-left:4px}
  .q-cards{grid-template-columns:1fr}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .quote .sec-head{gap:12px}
  .q-actions{margin-left:auto}
}

/* The printed sheet. These rules live outside @media print so the same
   document can also be shown on screen in the PDF view — one source of
   truth for both. .printdoc stays hidden until something asks for it. */
.printdoc{display:none;font-family:var(--sans);font-size:11.5px;color:#111;line-height:1.35}
.printdoc header{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid #111;padding-bottom:10px;margin-bottom:20px}
.printdoc .nclogo{height:44px;display:block}
.printdoc .brand{display:flex;align-items:center}
.printdoc .by{font-size:10.5px;color:#444;display:flex;align-items:center;gap:8px;margin-left:auto;margin-right:36px}
.printdoc .gslmed{height:38px;display:block}
.printdoc .dby{font-family:var(--serif);font-style:italic;font-size:12px;color:#333}
.printdoc .meta{text-align:right;font-size:11px;color:#333}
.printdoc .kind{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#111;margin-bottom:2px}
.printdoc .parties{display:grid;grid-template-columns:1fr 250px;gap:40px;margin-bottom:20px;align-items:start}
.printdoc.po .parties{grid-template-columns:1fr 340px}
.printdoc .parties .cline{margin-top:7px}
.printdoc .nb{white-space:nowrap}
/* lead time sits under the header rule, on its own, where the eye lands */
.printdoc .meta .lead{margin-top:4px}
.printdoc .meta .lead b{font-size:12.5px;color:#111}
.printdoc .parties b{display:block;font-size:12.5px}
/* PO numbers carry the sheet — they read at arm's length on a desk */
.printdoc .ponum{font-family:var(--mono);font-weight:700;font-size:13.5px;color:#111;margin-top:6px;letter-spacing:-.01em}
.printdoc.cust .ponum.gpo,.printdoc.po .ponum.cpo{color:#b08a3c;font-weight:600}
.printdoc .meta .ponum{font-size:15px;margin-top:6px}
/* where the material goes, said once and unmistakably */
.printdoc .shiptag{display:inline-block;margin-top:6px;padding:3px 8px;border:1px solid #1a5c38;color:#1a5c38;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.printdoc .shiptag.direct{border-color:#a4392b;color:#a4392b}
.printdoc a{text-decoration:none}
.printdoc .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#666;margin-bottom:3px}
.printdoc table{width:100%;border-collapse:collapse}
.printdoc th{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#f7f2e6;background:#1a5c38;text-align:left;padding:7px 6px}
.printdoc.direct th{background:#15508f}
.printdoc.po th,.printdoc.po.direct th{background:#a4660c}
.printdoc thead tr{background:#1a5c38}
.printdoc.direct thead tr{background:#15508f}
.printdoc.po thead tr,.printdoc.po.direct thead tr{background:#a4660c}
.printdoc td{padding:7px 6px;border-bottom:1px solid #ddd;vertical-align:middle}
.printdoc td b{font-family:var(--mono);font-size:10.5px}
.printdoc .items td b{font-size:12.5px;font-weight:700}
.printdoc .items td:first-child{font-size:14px;font-weight:700}
.printdoc .items td:first-child small{font-size:9px}
.printdoc .items td:first-child{padding-left:0}
.printdoc .items th:first-child{padding-left:8px}
.printdoc .items td:first-child{padding-right:18px}
.printdoc .items th:nth-child(3),.printdoc .items td:nth-child(3){text-align:center;padding-right:34px}
.printdoc .items th:nth-child(4),.printdoc .items td:nth-child(4){padding-left:0;padding-right:10px}
.printdoc .items th:nth-child(5),.printdoc .items td:nth-child(5){padding-left:8px}
.printdoc .items td:nth-child(6){padding-right:16px}
.printdoc .items th:nth-child(6){padding-right:44px}
.printdoc td small{display:block;color:#666;font-size:10px}
.printdoc .szrow{display:flex;align-items:baseline;gap:8px}
.printdoc .szrow small{display:inline}
.printdoc td.n,.printdoc th.n{text-align:right;font-family:var(--mono);white-space:nowrap}
.printdoc td.n small{text-transform:uppercase;letter-spacing:.1em;font-size:8.5px}
.printdoc .pf{font-size:9.5px;color:#3d6b34;font-style:italic;white-space:nowrap}
.printdoc .items td.n i{font-style:normal;color:#b3af9f;font-size:10px;margin-left:2px}
.printdoc tr.hasnote td{border-bottom:none;padding-bottom:2px}
.printdoc .pnrow td{padding-top:0;padding-bottom:8px;border-bottom:1px solid #ddd}
.printdoc .pnrow td:nth-child(2){text-align:center}
.printdoc .pn{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:700;color:#a4823c}
.printdoc .pn:before,.printdoc .pn:after{content:"";flex:1;border-top:1px solid #d8d2c2}
.printdoc .totrow{display:flex;justify-content:flex-end;align-items:flex-end;gap:28px}
.printdoc .vstamp{margin-right:auto;align-self:center;transform:rotate(-4deg);border:2px solid #c2a469;border-radius:7px;padding:9px 15px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#b59a5c;white-space:nowrap}
.printdoc .paywrap{text-align:center;padding-bottom:6px}
.printdoc .paybtn{display:inline-block;background:#151515;color:#d5a941;font-weight:700;font-size:15px;padding:9px 28px;border-radius:4px;text-decoration:none;letter-spacing:.02em;box-shadow:0 3px 10px rgba(0,0,0,.22)}
.printdoc .paynote{font-size:9px;color:#8a8a8a;margin-top:4px}
.printdoc .totrow .totals{margin-left:0}
.printdoc .vstamp.po{border-color:#4f7a4a;color:#4f7a4a;margin-left:72px}
.printdoc .totals{margin:12px 0 0 auto;width:260px}
.printdoc .totals div{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid #ddd}
.printdoc .totals b{font-family:var(--mono)}
.printdoc .totals .grand{border-bottom:0;border-top:2px solid #111;margin-top:4px;padding-top:8px;font-size:14px}
.printdoc .totals .grand b{font-family:var(--serif);font-size:20px}
.printdoc .notes{margin-top:16px;padding:10px 12px;border:1px solid #ccc}
/* Visual quote cards */
.printdoc .vq{margin-top:18px}
.printdoc .vqhead{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.printdoc .vqhead:before,.printdoc .vqhead:after{content:"";flex:1;border-top:1px solid #d8d2c2}
.printdoc .vqhead span{font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:#a4823c}
.printdoc .vqcard{position:relative;display:flex;gap:18px;border:1px solid #e5e0d4;border-radius:12px;padding:16px;margin-bottom:14px;background:#fff;align-items:flex-start;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.printdoc .vqimg{flex:0 0 172px;height:172px;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid #e0e0e0;box-sizing:border-box}
.printdoc .vqimg b{font-family:var(--serif);font-size:24px;font-weight:400;letter-spacing:.02em;color:#1d1d1d}
.printdoc .vqimg span{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(0,0,0,.55)}
.printdoc .vqimg.dk b{color:#fff}.printdoc .vqimg.dk span{color:rgba(255,255,255,.75)}
.printdoc .vqimg.none{background:#f4f1e9}
.printdoc .vqimg img{width:100%;height:100%;object-fit:contain;border-radius:9px;background:#fff}
.printdoc .vqimg.ph{overflow:hidden}
.printdoc .vqimg.ph img{object-fit:cover}
.printdoc .vqimg.ph img.fit{object-fit:contain;flex:none;width:112%;height:112%}
.printdoc .vqimg.ph img.fit.s4s{position:relative;left:-8px}
.printdoc .vqimg.ph img.fit.sht{width:123%;height:123%}
.printdoc .vqimg.ph img.fit.fbd{width:123%;height:123%}
.printdoc .vqimg.ph img.fit.acc{width:84%;height:84%;background:none}
.printdoc .vqimg.ph img.fit.acc.tall{height:96%}
.printdoc .vqimg.ph b,.printdoc .vqimg.ph span{display:none}
.printdoc .vqimg img.vqmld{width:auto;height:auto;max-width:82%;max-height:82%;object-fit:unset;background:none;border-radius:0}
.printdoc .vqfit{position:absolute;top:10px;right:16px;max-width:74px;max-height:74px;width:auto;height:auto}
.printdoc .vqcorner{position:absolute;top:10px;right:22px;width:67px;height:67px;opacity:.4}
.printdoc .vqbody{flex:1;min-width:0}
.printdoc .vqname{font-family:var(--serif);font-size:19px;line-height:1.1;color:#111;padding-left:10px}
.printdoc .vqdesc{font-size:11.5px;color:#555;margin:3px 0 9px;padding-left:10px}.printdoc .vqdesc small{color:#999}
.printdoc .vqpills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px;padding-left:10px}
.pdfcap .printdoc .vqpill{padding-bottom:3px}
.printdoc .vqimg.mld{box-shadow:inset 0 0 34px rgba(0,0,0,.10)}
.printdoc .vqimg.cc{position:relative}
.printdoc .vqimg.cc img{opacity:.3}
.printdoc .vqimg.cc .vqcc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0 12px;text-align:center;font-style:normal}
.printdoc .vqimg.cc .vqcc b,.printdoc .vqimg.cc .vqcc span{display:block}
.printdoc .vqimg.cc .vqcc b{font-family:var(--serif);font-size:19px;font-weight:400;letter-spacing:.02em;color:#1d1d1d}
.printdoc .vqimg.cc .vqcc span{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:none;color:#3a2e1d;word-break:break-word}
.pdfcap .printdoc .vqimg{box-shadow:none;border:1px solid #e0e0e0;box-sizing:border-box}
.printdoc .vqimg.bare{box-shadow:none;border:none;border-radius:0;overflow:visible}
.printdoc .vqimg.bare.ph img{object-fit:contain;border-radius:0;background:none}
.pdfcap .printdoc .vqimg.bare{border:none}
.printdoc .vqpill{display:inline-flex;align-items:center;height:21px;line-height:1;font-size:10px;font-weight:600;padding:0 11px;border-radius:5px;border:1px solid rgba(0,0,0,.14)}
.printdoc .vqt{width:100%;border-collapse:collapse;font-size:13.8px;table-layout:fixed}
.printdoc .vqt th{width:29.3%}
.printdoc .vqt th:first-child{width:10%}
.printdoc .vq .vqt thead tr,.printdoc.po .vq .vqt thead tr{background:none}
.printdoc .vq .vqt th,.printdoc.po.direct .vq .vqt th{background:none;color:#8a8778;padding:4px 8px}
.printdoc .vqt th{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8a8778;text-align:left;padding:4px 8px;border-bottom:1.5px solid #e5e0d4}
.printdoc .vq .vqt th:first-child,.printdoc.po .vq .vqt th:first-child{padding-right:15px}
.printdoc .vqt th.n{text-align:right}
.printdoc .vqt td{padding:5px 8px;border-bottom:1px solid #f0ece1}
.printdoc .vqt td.q{font-weight:700}
.printdoc .vqt td.q small{display:inline;color:#999;font-weight:400;font-size:12px;margin-left:4px}
.printdoc .vqt td.n i{font-style:normal;color:#b3af9f;font-size:11.5px;margin-left:2px}
.printdoc .vqt td.n{text-align:right;font-family:var(--mono);font-size:13.2px}
.printdoc .vqt td.x{font-weight:700}
.printdoc .vqt th:first-child,.printdoc .vqt td:first-child{text-align:right}
.printdoc .vqt th:nth-child(2),.printdoc .vqt td:nth-child(2){text-align:center;padding-left:48px}
.printdoc .vqt th:nth-child(3),.printdoc .vqt td:nth-child(3){text-align:center;padding-left:48px}
.printdoc .vqt tr:last-child td{border-bottom:0}
.printdoc .vqsub{display:flex;justify-content:flex-end;align-items:baseline;gap:10px;margin-top:6px;padding-top:6px;border-top:1.5px solid #e5e0d4}
.printdoc .vqsub span{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#8a8778}
.printdoc .vqsub .vqnote{margin-right:auto;margin-left:8px;font-style:italic;font-size:8.5px;letter-spacing:.12em;color:#b59a5c}
.printdoc .vqt td.cov{font-size:11px;color:#6f6a5c;white-space:nowrap}
.printdoc .vqsub b{font-family:var(--serif);font-size:17.3px;font-weight:400}
.printdoc .vqsub b .ds{padding-right:3px;font:inherit;letter-spacing:0;text-transform:none;color:inherit}
.printdoc .pfoot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:26px;padding-top:9px;border-top:1px solid #e0ddd6;font-size:8.5px;line-height:1;color:#8a857c;white-space:nowrap}
.printdoc .pfoot b{font-family:var(--serif);font-weight:400;font-size:11px;color:#4a463f}
.printdoc .valid{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px;color:#555}
.printdoc .valid::before,.printdoc .valid::after{content:"";width:56px;height:1px;background:#bbb}
.printdoc .valid span{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
@media print{
  @page{margin:14mm 12mm}
  html,body{background:#fff;color:#000}
  #app,.toast,.sku-menu{display:none!important}
  .printdoc{display:block}
  .printdoc tr{break-inside:avoid}
}

.ledger .c-act .ib.del{margin-left:16px}

/* ============================================================
   Step 4 (v3.17) — saved-quotes list + backward-conversion modal
   ============================================================ */
.qlist{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.08)}
.qhead{display:grid;grid-template-columns:.85fr 1.1fr 1.5fr 1fr .9fr .75fr;gap:14px;padding:11px 18px;align-items:center;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  background:var(--navy);color:#EAD8AC;text-align:center}
.qrow .qman{font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qrow{display:grid;grid-template-columns:.85fr 1.1fr 1.5fr 1fr .9fr .75fr;gap:14px;align-items:center;text-align:center;
  background:rgba(250,243,226,.95);border:0;border-top:1px solid var(--line);border-radius:0;padding:14px 18px;
  cursor:pointer;font:inherit;color:var(--ink);transition:background .15s}
.qlist button.qrow:nth-of-type(even){background:#F1E7CC}
.qrow:hover{background:#ECDFBC}
.qrow .qno{font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.04em;color:var(--gold)}
.qrow .qno.ord{color:#3E5E33}
.qrow .qwho{display:flex;flex-direction:column;min-width:0;align-items:center}
.qrow .qwho b{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qrow .qwho small{color:var(--ink-2);font-size:12px}
.qrow .qtot{font-family:var(--mono);font-weight:700;font-size:14px}
.qrow .qstat{justify-self:center;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 10px;border-radius:99px;border:1px solid var(--line);color:var(--ink-2);background:var(--cream-2)}
.qrow .qstat.ordered{background:#E4EDDD;border-color:#B9CCA9;color:#3E5E33}
.qrow .qstat.cancelled{opacity:.55;text-decoration:line-through}
.qrow .qwhen{color:var(--ink-2);font-size:12px}
@media(max-width:640px){.qrow{grid-template-columns:78px 1fr auto;padding:12px 14px}.qrow .qstat,.qrow .qwhen,.qrow .qman{display:none}}

.qmodal{position:fixed;inset:0;background:rgba(32,26,16,.55);display:flex;align-items:center;justify-content:center;z-index:60}
.qmodal-card{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;max-width:380px;
  box-shadow:0 18px 50px rgba(0,0,0,.35)}
.qmodal-card h4{margin:0 0 8px;font-size:16px;color:var(--ink)}
.qmodal-card p{margin:0 0 18px;color:var(--ink-2);line-height:1.5;font-size:14px}
.qmodal-btns{display:flex;gap:10px;justify-content:flex-end}
.qmodal-card ul.miss{margin:0 0 18px;padding-left:18px;color:var(--ink-2);font-size:14px;line-height:1.65}
.qmodal-card ul.miss b{color:var(--ink);font-weight:600}

/* ── v3.18 · address field ─────────────────────────────────────── */
.f textarea{resize:none;overflow:hidden;line-height:1.4;min-height:38px;display:block}

/* ── v3.19 · save in the lines footer + autosave readout ─────────── */
.lines-foot #save{margin-left:0;padding:7px 18px;font-size:12.5px;justify-content:center;min-width:92px;
  background:linear-gradient(180deg,#C1913E,#7E551C);color:#FFF6E3;border:1px solid rgba(0,0,0,.25);
  box-shadow:0 2px 10px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.28);text-shadow:0 1px 0 rgba(0,0,0,.2)}
.lines-foot #save:hover{background:linear-gradient(180deg,#CD9C46,#8A5E20);box-shadow:0 4px 14px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.3)}
.save-pill{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;vertical-align:3px;margin-left:12px;
  color:#8FD8A2;border:1px solid rgba(143,216,162,.4);background:rgba(26,74,40,.35);padding:3px 10px;border-radius:5px;white-space:nowrap}
.btn-primary.danger{background:linear-gradient(180deg,#9A4433,#5E2419);color:#FFEFE8}
.btn-primary.danger:hover{background:linear-gradient(180deg,#A84B38,#6B2A1D)}
.save-state{font-size:12px;color:#1E7A3F;font-weight:650}

/* ── v3.19 · custom dropdowns (length · texture · color) ─────────── */
.dd{display:inline-flex;align-items:center;gap:6px;width:100%;font:inherit;font-size:13px;padding:7px 8px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);text-align:left;cursor:pointer;min-width:0}
.dd:hover:not(:disabled){border-color:var(--gold)}
.dd.open,.dd:focus-visible{outline:2px solid var(--hi);outline-offset:0;border-color:var(--hi)}
.dd:disabled{cursor:default;background:#FBF8F2;color:var(--ink-2)}
.dd .dd-lb{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd .dd-lb.mut,.dd-opt.mut{color:var(--ink-2)}
.dd .dd-ch{flex:none;width:12px;height:12px;opacity:.55;display:inline-flex}
.dd .dd-ch svg{width:12px;height:12px}
.dd-sw{flex:none;width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.22)}
.dd-sw.none{border-style:dashed;border-color:rgba(0,0,0,.25)}
.dd-can{flex:none;color:var(--navy)}
.dd.custom .dd-lb{font-size:12px;letter-spacing:.01em}
.dd-native{display:none!important}
.dd-menu{position:fixed;z-index:400;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 14px 38px rgba(32,26,16,.22);overflow-y:auto;padding:4px;overscroll-behavior:contain}
.dd-opt{display:flex;align-items:center;gap:8px;width:100%;padding:9px 11px;border:0;background:none;font:inherit;font-size:13px;color:var(--ink);border-radius:5px;text-align:left;cursor:pointer;white-space:nowrap}
.dd-opt:hover{background:var(--cream-2)}
.dd-opt.sel{background:#F3E8CF;font-weight:650}
.ledger .c-col .dd{font-weight:600}

/* ── v3.19 · quotes search toolbar ───────────────────────────────── */
.qtools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.qtools .qsearch{flex:1;min-width:180px;font:inherit;font-size:14px;padding:9px 12px 9px 35px;border:1px solid rgba(227,184,92,.28);border-radius:4px;
  background-color:#191510;color:#F2E8CE;box-shadow:0 2px 10px rgba(0,0,0,.3);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C927D' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>"),linear-gradient(180deg,#332C22,#191510);
  background-repeat:no-repeat,no-repeat;background-position:12px center,0 0;background-size:15px,100% 100%}
.qtools .qsearch::placeholder{color:#9C927D}
.qtools .qsearch:focus{outline:2px solid rgba(227,184,92,.55);outline-offset:0;border-color:rgba(227,184,92,.55)}
.qtools #q-man{font:inherit;font-size:13px;font-weight:700;padding:9px 34px 9px 13px;border-radius:4px;cursor:pointer;
  -webkit-appearance:none;appearance:none;color:#E3B85C;border:1px solid rgba(227,184,92,.28);
  background-color:#191510;box-shadow:0 2px 10px rgba(0,0,0,.3);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3B85C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"),linear-gradient(180deg,#332C22,#191510);
  background-repeat:no-repeat,no-repeat;background-position:right 11px center,0 0;background-size:14px,100% 100%}
.qtools select{font:inherit;font-size:13.5px;padding:9px 28px 9px 10px;border:1px solid var(--line);border-radius:4px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B4A33' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 8px center/14px no-repeat;color:var(--ink);-webkit-appearance:none;appearance:none;max-width:220px}
.qpills{display:flex;border:1px solid rgba(0,0,0,.3);border-radius:4px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.qpills button{font:inherit;font-size:12.5px;font-weight:700;padding:9px 13px;border:0;cursor:pointer;
  background:linear-gradient(180deg,#57503F,#3B362B);color:#D8D2C2}
.qpills button+button{border-left:1px solid rgba(0,0,0,.35)}
.qpills button.on{background:linear-gradient(180deg,#332C22,#191510);color:#E3B85C}
@media(max-width:640px){.qtools select{max-width:150px}}

/* ── v3.22 · nav home + page accents · stone search page · gold New quote ── */
.topnav .tn.home{--nav-c:#DEC386}
.topbar.page-quotes{border-bottom:3px solid #7FA3C4;box-shadow:0 5px 16px rgba(127,163,196,.35)}
.topbar.page-products{border-bottom:3px solid #C4834F;box-shadow:0 5px 16px rgba(196,131,79,.35)}
.topbar.page-analytics{border-bottom:3px solid #8FAF7A;box-shadow:0 5px 16px rgba(143,175,122,.35)}
.topbar.page-admin{border-bottom:3px solid #8C7AA6;box-shadow:0 5px 16px rgba(140,122,166,.35)}
.shell.stone .qlist{box-shadow:0 10px 28px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.14)}
#pr-add,.sec-head .btn-primary.sm{background:linear-gradient(180deg,#DFB554,#A97F2B);color:#1A1206;border:1px solid rgba(0,0,0,.25);box-shadow:0 2px 10px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.35);text-shadow:0 1px 0 rgba(255,255,255,.18)}
#pr-add:hover,.sec-head .btn-primary.sm:hover{background:linear-gradient(180deg,#E9C161,#B78A30);box-shadow:0 4px 14px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.38)}
.strip .ctl .qn input,.strip .ctl .qn input:not(:placeholder-shown){background:#E7DEC9;border-color:#CDC0A4}

/* ── v3.24 · top-aligned ledger · pinned line note · blue-slate search page ── */
.ledger tr.noted td{padding-bottom:24px}
.shell.stone::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,rgba(44,51,63,.94) 0%,rgba(38,44,55,.93) 55%,rgba(33,38,48,.95) 100%),var(--dash-bg) center 30%/cover no-repeat}
.shell.stone .sec-head h2{color:#F0E7D3}
.shell.tint-admin::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,rgba(108,108,112,.94) 0%,rgba(98,98,103,.93) 55%,rgba(88,88,93,.95) 100%),var(--dash-bg) center 30%/cover no-repeat}
.shell.tint-admin .sec-head h2{color:#F0E7D3}

/* ============ Admin → Settings (v3.29) ============ */
.set-cards{display:grid;gap:16px}
.set-row{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.set-cards>*,.set-row>*{min-width:0}
.set-row:has(.g-multipliers){grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
@media(max-width:860px){.set-row{grid-template-columns:1fr}}
.sf-money{display:flex;align-items:center;gap:4px;color:var(--muted);font-weight:700}
.sf-note-edit{border:0!important;background:transparent!important;box-shadow:none!important;-webkit-appearance:none!important;appearance:none!important;padding:1px 0!important;font-size:11.5px!important;font-style:italic;color:var(--muted)!important;border-radius:0!important}
.sf-note-edit:focus{outline:none!important;border-bottom:1px dashed var(--gold)!important}
.sf-note-edit::placeholder{color:var(--muted);opacity:.45}
.set-card{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.set-card h3{margin:0 0 14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700}
.set-body{display:grid;gap:14px;grid-template-columns:1fr}
.set-field{display:grid;grid-template-columns:var(--lblw,11em) max-content;align-items:center;gap:2px 12px;justify-content:start}
.set-field.long{grid-column:1/-1}
.sf-label{font-size:13px;font-weight:700;color:var(--ink)}
.sf-label b{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.set-field input,.set-field textarea,.vt-row input,.rb-in input{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:7px 8px;font:inherit;font-size:14px;color:var(--ink);box-sizing:border-box}
.set-field>input:not(.sf-note-edit){width:4.8em;text-align:center}
.set-field.wide>input:not(.sf-note-edit){width:13em;text-align:left}
.sf-money input{width:6em;text-align:center}
.sf-note-edit{grid-column:1/-1;width:100%;resize:none;overflow:hidden;line-height:1.4;font-family:inherit;display:block}
.set-field textarea:not(.sf-note-edit){resize:vertical;font-size:13px}
.set-field input:focus,.set-field textarea:focus,.vt-row input:focus,.rb-in input:focus{outline:2px solid var(--gold-3);border-color:var(--gold)}
/* fixed label columns so every box lands on the same vertical line */
.g-multipliers{--lblw:184px}
.g-freight{--lblw:270px}
.g-lead-time{--lblw:214px}
.g-payments{--lblw:112px}
.g-shingles{--lblw:186px}
/* Multipliers: two fields per row with a vertical rule between */
.g-multipliers .set-body{grid-template-columns:1fr 1fr;column-gap:0;row-gap:14px}
.g-multipliers .set-field{padding-right:14px}
.g-multipliers .set-field:nth-child(even){border-left:1px solid var(--line);padding-left:14px;padding-right:0}
@media(max-width:700px){.g-multipliers .set-body{grid-template-columns:1fr}.g-multipliers .set-field:nth-child(even){border-left:0;padding-left:0}}
/* Shingles: three across */
.g-shingles .set-body{grid-template-columns:repeat(3,max-content);column-gap:24px}
.g-shingles .set-field.wide>input:not(.sf-note-edit){width:11em}
@media(max-width:980px){.g-shingles .set-body{grid-template-columns:1fr}}
.sf-note{font-size:11.5px;color:var(--muted);line-height:1.4}
/* volume tiers */
.vol-table{grid-column:1/-1;display:grid;gap:6px}
.vt-head,.vt-row{display:grid;grid-template-columns:150px 100px 90px;gap:14px;align-items:center;justify-content:center}
.vt-head span{font-size:11px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.vt-min{display:flex;align-items:center;gap:4px;font-weight:700;color:var(--ink-2)}
.vt-min.base{font-weight:400;color:var(--muted);font-size:13px}
.vt-row input{width:100%;text-align:center}
.vt-pct{font-family:var(--mono);font-size:12.5px;color:var(--gold);font-weight:700}
/* freight grid */
.fg-del{border:0;background:none;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;padding:4px}
.fg-del:hover:not(:disabled){color:#8a2020}
.fg-del:disabled{opacity:.3;cursor:default}
.fg-add{font-size:12.5px;padding:6px 10px}
/* manufacturer reference */
.ref-details{grid-column:1/-1;border-top:1px dashed var(--line);padding-top:12px}
.ref-details summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--ink-2)}
.ref-details summary em{font-weight:400;font-style:normal;color:var(--muted);font-size:12px}
.ref-grid .rg{background:var(--gold-3)}
.ref-grid .rg .ref-title{margin:0;flex:1;width:auto;text-align:center}
.ref-grid .rg-add{flex:0 0 auto;font-size:10px;padding:3px 7px}
.ref-grid .gs{box-shadow:inset 3px 0 0 var(--gold)}
.ref-grid{margin-top:8px}
.ship-rules{grid-column:1/-1;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.5);margin-bottom:12px;overflow:hidden}
.sr-title{padding:9px 12px 7px;font-weight:700;font-size:13.5px;color:var(--ink)}
.sr-head,.sr-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:center;padding:7px 14px}
.sr-head span{text-align:center}
.sr-head{background:var(--gold-3);align-items:end;font-size:10.5px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.sr-head b{margin-right:5px}
.sr-row{border-top:1px solid var(--line);font-size:13px}
.sr-min{display:flex;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-weight:700}
.sr-min input{width:100%;min-width:0;text-align:center;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:5px 8px;font:inherit;font-size:13px;color:var(--ink)}
.sr-min input:focus{outline:2px solid var(--gold-3);border-color:var(--gold)}
.sr-note{padding:8px 12px 10px;border-top:1px solid var(--line)}
.strip .m b.warn{color:#ff8a7a}
.ref-title{border:0;background:none;padding:0;font-size:12px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700;width:100%}
.ref-title:focus{outline:none;border-bottom:1px dashed var(--gold)}
.ref-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:12.5px;margin-bottom:8px}
.ref-grid>span{background:rgba(255,255,255,.75);padding:6px 8px;display:flex;align-items:center;gap:3px}
.ref-grid .rh{background:var(--gold-3);font-weight:700;font-size:11px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);justify-content:center}
.ref-grid .rh:first-child{justify-content:flex-start}
.ref-grid .rh input{border:0;background:none;padding:2px 0;font:inherit;color:inherit;text-align:center;flex:1;width:auto;min-width:0}
.ref-grid .rc{justify-content:center;color:var(--muted)}
.ref-grid .rc input{border:0;background:none;padding:2px 0;font:inherit;color:var(--ink);text-align:left;width:4.6em;flex:0 0 auto;min-width:0}
.ref-grid .rh.rc input{flex:1;width:auto;text-align:center;color:inherit}
.ref-grid .rc i{font-style:normal;font-weight:700}
.ref-grid .rt{flex-direction:column;align-items:stretch;gap:1px}
.ref-grid .rt input{border:0;background:none;padding:1px 0;font:inherit;min-width:0}
.ref-grid .rt-ter{font-weight:700;color:var(--ink)}
.ref-grid .rt-states{color:var(--muted);font-size:10.5px}
.ref-grid input:focus{outline:none;border-bottom:1px dashed var(--gold)}
.ref-grid .rh.rb{flex-direction:row;justify-content:center;gap:2px;padding:5px 6px}
.ref-grid .rb-lbl{white-space:nowrap;border:0;background:none;font:inherit;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--ink);cursor:pointer;padding:6px 4px;border-radius:var(--r)}
.ref-grid .rb-lbl:hover{background:rgba(255,255,255,.6)}
.ref-grid .rb .rb-in{display:flex;align-items:center;gap:2px;text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted)}
.ref-grid .rb .rb-in i{font-style:normal;font-size:10px}
.ref-grid .rh.rb .rb-in input{width:5em;flex:0 0 auto;padding:3px 5px;font-size:12px;text-align:right;color:var(--ink)}
.ref-grid .rm{gap:2px}.ref-grid .rm input{text-align:right;width:3em;flex:0 0 auto;padding:2px 3px}
.rc-del{border:0;background:none;color:var(--muted);font-size:13px;line-height:1;cursor:pointer;padding:0 2px}
.rc-del:hover:not(:disabled){color:#8a2020}
.rc-del:disabled{opacity:.3;cursor:default}
.ref-btns{display:flex;gap:8px;margin:4px 0 6px}
.ref-noteblock{margin-top:12px;display:grid;gap:5px;justify-items:start}
.ref-noterow{display:flex;align-items:center;gap:4px;width:100%}
.ref-noterow input{border:0;background:none;padding:2px 0;font-size:12px;color:var(--ink-2);flex:1;min-width:0}
.ref-noterow input:focus{outline:none;border-bottom:1px dashed var(--gold)}
.set-card .btn-ghost{color:var(--ink-2);border-color:var(--line);border-radius:var(--r)}
.set-card .btn-ghost:hover{background:rgba(0,0,0,.05);border-color:var(--gold)}
/* colors swatch grid */
.cw-wrap{grid-column:1/-1;display:grid;gap:18px}
.cw-tile>input{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:var(--r);background:#fff;font:inherit;color:var(--ink)}
.cw-sec h4{margin:0 0 10px;font-size:12px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.cw-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-bottom:10px}
.cw-tile{position:relative;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.6);padding:10px;display:grid;gap:6px}
.cw-sw{-webkit-appearance:none;appearance:none;border:1px solid var(--line);border-radius:calc(var(--r) - 2px);padding:0;width:100%;height:52px;cursor:pointer}
/* shade tuner popover */
.cw-tune{position:absolute;left:50%;transform:translateX(-50%);top:66px;z-index:40;width:210px;max-width:92vw;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 10px 26px rgba(0,0,0,.24);padding:12px;display:grid;gap:10px}
.cw-tune label{display:grid;gap:5px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--ink-2)}
.cw-tune-row{display:flex;align-items:center;gap:8px}
.cw-was{width:28px;height:28px;border-radius:6px;border:1px solid var(--line);cursor:pointer;padding:0}
.cw-hexlab{font-family:var(--mono);font-size:11px;color:var(--muted)}
.cw-tune input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:14px;border-radius:7px;background:var(--tr,#ddd);border:1px solid var(--line);margin:0;padding:0}
.cw-tune input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.cw-tune input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.cw-full input[type=color]{width:100%;height:32px;border:1px solid var(--line);border-radius:var(--r);padding:2px;background:#fff;-webkit-appearance:none}
.cw-tile input.cw-code{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.04em;padding:5px 8px;text-align:center}
.cw-tile input.cw-name{font-size:12.5px;padding:5px 8px;text-align:center}
.cw-del{position:absolute;top:4px;right:4px;border:0;background:rgba(255,255,255,.85);border-radius:50%;width:20px;height:20px;line-height:1;font-size:13px;color:var(--muted);cursor:pointer}
.cw-del:hover{color:#8a2020}
/* save bar */
.savebar{position:sticky;bottom:14px;margin-top:16px;display:flex;align-items:center;gap:12px;justify-content:flex-end;background:var(--ink);color:#f5edd8;border-radius:var(--r);padding:10px 14px;box-shadow:0 6px 22px rgba(0,0,0,.25)}
.sb-count{font-family:var(--mono);font-size:12px;letter-spacing:.08em;font-weight:700;margin-right:auto}
.savebar .btn-ghost{color:#d8cba8;border-color:rgba(255,255,255,.25)}

/* ============================================================
   Admin → Products (v3.32) — the price book as a ledger.
   Cells read as a printed sheet; touch one and it becomes an
   input. Navy sticky header, gold rule on edited rows, sage for
   the smooth price pair, dashes where a column doesn't apply.
   ============================================================ */
.pr-wrap{display:grid;gap:14px}
/* ---- Admin → Activity log ---- */
.al-list .qhead,.al-row{grid-template-columns:.7fr .9fr .6fr 1.3fr 2fr}
.al-list .qhead{text-align:left}
.al-row{text-align:left;cursor:default;padding:11px 18px}
.al-list .al-row:nth-of-type(odd){background:#F1E7CC}
.al-when{font-family:var(--mono);font-size:12px;color:var(--ink-2);white-space:nowrap}
.al-who{font-weight:650;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-fam i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:99px;border:1px solid var(--line);background:var(--cream-2);color:var(--ink-2);white-space:nowrap}
.al-row.price .al-fam i{border-color:var(--hi);color:var(--gold)}
.al-row.line .al-fam i,.al-row.qty .al-fam i{border-color:#8FA07E;color:var(--sage)}
.al-what{font-size:13.5px;min-width:0;overflow-wrap:anywhere}
.al-old{color:var(--ink-2)}.al-arr{color:var(--hi);font-weight:700}.al-new{font-weight:700}
.al-q{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.al-cust{font-size:12.5px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding-left:8px}
.al-open.gone{color:var(--ink-2);text-decoration:line-through;cursor:default}
.al-open{font:inherit;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--gold);background:none;border:1px solid transparent;border-radius:4px;padding:3px 8px;cursor:pointer}
.al-open:hover{border-color:var(--hi);background:var(--cream-2)}
.al-more{font:inherit;font-weight:700;font-size:13px;padding:12px;border:0;border-top:1px solid var(--line);background:var(--cream-2);color:var(--gold);cursor:pointer}
.al-more:disabled{color:var(--ink-2);cursor:default}
@media(max-width:760px){.al-list .qhead{display:none}.al-row{grid-template-columns:1fr auto;row-gap:4px}.al-q,.al-what{grid-column:1/-1}}
/* ---- Admin → Users / Roles ---- */
.au-list .qhead,.au-row{grid-template-columns:2fr 1.1fr .7fr .9fr .9fr;text-align:left}
.au-row{cursor:default;padding:10px 18px}
.au-list .au-row:nth-of-type(odd){background:#F1E7CC}
.au-row.off .au-who{opacity:.55}
.au-who{display:flex;flex-direction:column;gap:1px;min-width:0}
.au-name{font:inherit;font-size:14px;font-weight:650;color:var(--ink);background:transparent;border:1px solid transparent;border-radius:4px;padding:3px 6px;margin-left:-7px;width:100%;max-width:260px}
.au-name::placeholder{color:var(--muted);font-weight:500}
.au-name:hover{border-color:var(--line)}.au-name:focus{outline:none;border-color:var(--hi);background:#fff}
.au-name:disabled{opacity:.6}.au-who i{font-style:normal;font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-role{font:inherit;font-size:13.5px;font-weight:650;padding:7px 28px 7px 10px;border:1px solid var(--line);border-radius:4px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B4A33' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 8px center/14px no-repeat;-webkit-appearance:none;appearance:none;color:var(--ink);width:100%;max-width:170px}
.au-role:disabled{opacity:.6;cursor:not-allowed}
.au-act{font:inherit;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:99px;border:1px solid var(--line);background:var(--cream-2);color:var(--ink-2);cursor:pointer;min-width:74px}
.au-act.on{border-color:var(--sage);background:var(--sage);color:var(--cream-2)}
.au-act:disabled{opacity:.6;cursor:not-allowed}
.au-when{font-family:var(--mono);font-size:12px;color:var(--ink-2);white-space:nowrap}
.ar-list .qhead,.ar-row{grid-template-columns:2fr repeat(3,1fr)}
.ar-list .qhead{text-align:left}.ar-list .qhead span+span{text-align:center}
.ar-row{cursor:default;padding:9px 18px}.ar-row span+span{text-align:center}
.ar-list .ar-row:nth-of-type(odd){background:#F1E7CC}
.ar-sec{text-align:left;font-weight:650;font-size:14px}
.ar-chk{width:26px;height:26px;border-radius:6px;border:1.5px solid var(--ink-2);background:#fff;cursor:pointer;position:relative;vertical-align:middle}
.ar-chk.on{background:var(--sage);border-color:var(--sage)}
.ar-chk.on::after{content:"";position:absolute;left:8px;top:3px;width:7px;height:13px;border:solid var(--cream-2);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.ar-chk:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:760px){.au-list .qhead{display:none}.au-row{grid-template-columns:1fr auto auto}.au-when{display:none}}
.pr-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pr-actions{display:flex;flex-direction:column;gap:6px;margin-left:auto;align-items:stretch}
.pr-actions .btn-primary.sm{margin-left:0;justify-content:center}
.pr-actions .btn-ghost,#pr-export{color:var(--ink-2);border-color:var(--line);border-radius:var(--r);padding:6px 12px;font-size:12px;font-weight:700}
.pr-actions .btn-ghost:hover,#pr-export:hover{background:rgba(0,0,0,.05);border-color:var(--gold)}
.pr-set{display:flex;gap:20px;align-items:center;background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r);padding:9px 16px}
.pr-set label{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);font-weight:700;white-space:nowrap}
.pr-set .m{display:flex;align-items:center;gap:3px;font-family:var(--sans);font-size:14px;color:var(--muted);font-weight:700}
.pr-set input{width:4.4em;text-align:center;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:6px 4px;font:inherit;font-size:14px;color:var(--ink)}
.pr-set input:focus{outline:2px solid var(--gold-3);border-color:var(--gold)}
.pr-find{flex:0 1 280px;min-width:170px;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:9px 12px;font:inherit;font-size:14px;color:var(--ink)}
.pr-find:focus{outline:2px solid var(--gold-3);border-color:var(--gold)}

.pr-tabs{display:flex;gap:6px;flex-wrap:wrap}
.pr-tabs button{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;background:var(--cream-2);color:var(--ink-2);font-weight:700;font-size:13px;padding:7px 13px}
.pr-tabs button .ct{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--muted);background:rgba(0,0,0,.05);border-radius:999px;padding:2px 7px}
.pr-tabs button:hover{border-color:var(--gold)}
.pr-tabs button.on{background:linear-gradient(180deg,var(--navy),var(--navy-2));border-color:var(--navy-2);color:var(--on-navy)}
.pr-tabs button.on .ct{background:rgba(255,255,255,.14);color:var(--on-navy-2)}
.pr-tabs button.empty{opacity:.45}

.pr-card{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.pr-scroll{max-height:64vh;overflow:auto;-webkit-overflow-scrolling:touch}
.pr-tb{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:12.5px}
.pr-tb thead th{position:sticky;top:0;z-index:2;background:linear-gradient(180deg,var(--navy),var(--navy-2));color:var(--on-navy-2);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:10px 8px;text-align:left;border-bottom:1px solid var(--hi);white-space:nowrap;overflow:hidden}
.pr-tb th.c{text-align:center}.pr-tb th.r{text-align:right}
.pr-tb th.th-sm{color:#a8c09a}
.pr-tb .w-sku{width:112px}.pr-tb .w-size{width:88px}.pr-tb .w-xs{width:44px}.pr-tb .w-um{width:52px}
.pr-tb .w-tx{width:84px}.pr-tb .w-cost{width:72px}.pr-tb .w-mk{width:56px}.pr-tb .w-sell{width:64px}
.pr-tb .w-act{width:48px}.pr-tb .w-del{width:30px}
.pr-tb.cat-molding .w-size{width:48px}
.pr-tb.cat-beadboard .w-size{width:132px}
.pr-tb td{padding:2px 5px;border-bottom:1px solid rgba(201,185,143,.45);vertical-align:middle}
.pr-tb tbody tr:hover td{background:rgba(255,255,255,.45)}
.pr-tb tr.dirty td:first-child{box-shadow:inset 3px 0 0 var(--hi)}
.pr-tb tr.fresh td{background:rgba(193,155,94,.10)}
.pr-tb textarea{width:100%;display:block;border:1px solid transparent;background:transparent;border-radius:4px;padding:6px 4px;font:inherit;font-size:12.5px;line-height:1.35;color:var(--ink);resize:none;overflow:hidden;min-width:0}
.pr-tb textarea:hover{border-color:rgba(201,185,143,.7)}
.pr-tb textarea:focus{outline:none;border-color:var(--gold);background:#fff}
.pr-tb input,.pr-tb select{width:100%;border:1px solid transparent;background:transparent;border-radius:4px;padding:6px 4px;font:inherit;font-size:12.5px;color:var(--ink);min-width:0}
.pr-tb input:hover{border-color:rgba(201,185,143,.7)}
.pr-tb input:focus{outline:none;border-color:var(--gold);background:#fff}
.pr-tb select{appearance:none;-webkit-appearance:none;text-align:center;text-align-last:center;color:var(--ink-2);font-size:11.5px}
.pr-sku input{font-family:var(--mono);font-weight:600;font-size:11px}
.pr-size input{font-size:11px;color:var(--ink-2)}
.c-mid{text-align:center}.c-mid input{text-align:center}
.c-num input{text-align:right;font-family:var(--mono);font-size:12px}
.c-num.sm input{color:var(--sage);font-weight:600}
.c-sell{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--navy);text-align:right;white-space:nowrap;padding-right:8px}
.c-sell.c-sm{color:var(--sage)}
.c-dim{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right;padding-right:8px}
.c-dash{color:var(--muted-2);text-align:center}
.c-act{font-size:9.5px;color:var(--muted);font-style:italic;text-align:right;white-space:nowrap;padding-right:6px}
.tx-pills{display:flex;gap:3px;justify-content:center}
.tx-pills button{width:23px;height:23px;border-radius:5px;border:1px solid var(--line);background:transparent;color:var(--muted-2);font-size:10px;font-weight:700;font-family:var(--mono);padding:0;line-height:1}
.tx-pills button.on{background:var(--gold);border-color:var(--gold-2);color:var(--gold-3)}
.pr-del{border:0;background:none;color:var(--muted-2);font-size:16px;line-height:1;padding:5px;cursor:pointer}
.pr-del:hover{color:var(--danger)}
.terr-chip{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line-2);border-radius:999px;padding:3px 8px;white-space:nowrap}
.pr-none td{padding:22px 14px;color:var(--muted);text-align:center;font-size:13.5px}
/* read-only Products doorway: admin ledger with plain-text cells */
.pr-ro .pr-tb td{padding:12px 14px;font-size:14px;color:var(--ink)}
.pr-ro .pr-tb thead th{padding:13px 14px}
.pr-ro .pr-tb .w-sku{width:17%}.pr-ro .pr-tb .w-size{width:16%}.pr-ro .pr-tb .w-xs{width:8%}.pr-ro .pr-tb .w-um{width:7%}.pr-ro .pr-tb .w-tx{width:11%}
.pr-ro .pr-size{white-space:nowrap}
.pr-ro .pr-sku{font-family:var(--mono);font-weight:600;font-size:13px}
.pr-ro .pr-size{font-size:13px;color:var(--ink-2)}
.pr-ro .tx-pills span{width:23px;height:23px;border-radius:5px;border:1px solid var(--line);color:var(--muted-2);font-size:10px;font-weight:700;font-family:var(--mono);display:grid;place-items:center}
.pr-ro .tx-pills span.on{background:var(--gold);border-color:var(--gold-2);color:var(--gold-3)}
.pr-ro span.cw-sw{display:block;cursor:default}
.pr-ro span.cw-code{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.04em;text-align:center}
.pr-ro span.cw-name{font-size:12.5px;text-align:center}

/* shingle territory pricing under the grid */
.shp-card{padding:18px 20px}
.shp-body{display:grid;gap:20px}
.shp-block h4{margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700}
.shp-block h4 em{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:500;font-style:italic;margin-top:2px}
.shp-grid{display:grid;gap:5px 10px;align-items:center;max-width:640px}
.sh-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.sh-h.r{text-align:right}
.sh-t{font-size:12.5px;font-weight:700;color:var(--ink)}
.sh-t i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-left:6px}
.sh-p{display:flex;align-items:center;gap:2px;justify-content:flex-end;color:var(--muted);font-weight:700}
.sh-p input{width:100%;min-width:0;text-align:right;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:6px 7px;font:inherit;font-size:13px;font-family:var(--mono);color:var(--ink)}
.sh-p input:focus{outline:2px solid var(--gold-3);border-color:var(--gold)}
.shp-note{color:var(--muted);font-size:13px}

@media(max-width:1080px){
  .pr-tb .w-size{width:76px}.pr-tb .w-cost{width:66px}.pr-tb .w-sell{width:60px}.pr-tb .w-tx{width:78px}
  .pr-tb{font-size:12px}
}
.pr-tb .w-size-lg{width:150px}.pr-tb .w-sell-lg{width:112px}

/* ============================================================
   Admin → Products (v3.33) — the wide-ledger pass.
   The page breaks out to 1340px for this screen only; rows grow
   taller; one page-level scroll (no inner box for iPad to fight),
   with column headers sticking just under the masthead. Category
   tabs square off; costs wear $, markups wear %; a drag handle
   opens every row to reordering and the ⋯ menu duplicates, moves
   between categories, or removes. Colors joins as a tab.
   ============================================================ */

/* top band: multiplier alone at left; search right edge meets the Colors tab (JS-measured) */
.pr-top{flex-wrap:nowrap}
.pr-find{flex:0 1 auto;width:340px}

/* tabs: rectangles, rounded corners */
.pr-tabs button{border-radius:8px;padding:8px 15px}
.pr-tabs button .ct{border-radius:5px}

/* one scroll surface: the card opens up, headers stick under the masthead */
.pr-card.pr-main{overflow:visible;background:#FAF3E2}
.pr-tb thead th{top:var(--mast,64px);z-index:3}
.pr-tb thead th:first-child{border-top-left-radius:var(--r)}
.pr-tb thead th:last-child{border-top-right-radius:var(--r)}

/* taller, roomier rows */
.pr-tb{font-size:13px}
.pr-tb thead th{font-size:10px;padding:12px 9px}
.pr-tb td{padding:6px 6px}
.pr-tb textarea{width:100%;display:block;border:1px solid transparent;background:transparent;border-radius:4px;padding:6px 4px;font:inherit;font-size:12.5px;line-height:1.35;color:var(--ink);resize:none;overflow:hidden;min-width:0}
.pr-tb textarea:hover{border-color:rgba(201,185,143,.7)}
.pr-tb textarea:focus{outline:none;border-color:var(--gold);background:#fff}
.pr-tb input,.pr-tb select{padding:9px 5px;font-size:13px}
.pr-sku input{font-size:12px}
.pr-size input{font-size:12px}
.c-num input{font-size:12.5px}
.c-sell{font-size:13.5px}
.c-act{font-size:10px}
.tx-pills button{width:25px;height:25px;font-size:10.5px}

/* column plan per tab shape — description gives its slack back */
.pr-tb .w-grab{width:34px}.pr-tb .w-menu{width:40px}
.pr-tb .w-sku{width:118px}.pr-tb .w-xs{width:48px}.pr-tb .w-um{width:56px}.pr-tb .w-tx{width:92px}
.pr-tb.cat-moulding .w-sku{width:130px}
.pr-tb.cat-siding .w-sku{width:162px}
.pr-tb th.th-rs,.pr-tb th.th-sm{text-align:center}
.pr-tb.t-dual td.c-num .cash{justify-content:center}
.pr-tb.t-dual td.c-num .cash input{text-align:center}
.pr-tb.t-dual td.c-sell{text-align:center;padding-right:0}
.pr-tb.t-dual td.c-mid .pct{justify-content:center}
.pr-tb th .th-sub{display:block;font-size:9px;letter-spacing:.09em;color:var(--muted);margin-top:2px;white-space:nowrap}
.pr-tb th .th-tm{display:flex;justify-content:center;align-items:center;gap:3px;margin-top:5px;font-family:var(--sans);font-size:12px;color:var(--muted);font-weight:700;text-transform:none;letter-spacing:0}
.pr-tb th .th-tm input{width:3.6em;text-align:center;border:1px solid var(--line);border-radius:6px;background:#fff;padding:3px 2px;font:inherit;font-size:12.5px;color:var(--ink)}
.pr-tb th .th-tm input:focus{outline:2px solid var(--gold-3);border-color:var(--gold)}
.pr-tb td.ov .cash input{color:#c0392b;font-weight:700}
.ov-list{font-family:var(--mono);font-size:12px}
#pr-export{color:var(--gold-3);padding:9px 22px;font-size:12.5px;align-self:stretch}
.t-dual .w-size{width:96px}.t-dual .w-cost{width:88px}.t-dual .w-mk{width:64px}.t-dual .w-sell{width:78px}.t-dual .w-act{width:56px}
.t-single .w-size{width:230px}.t-single .w-cost{width:112px}.t-single .w-mk{width:72px}.t-single .w-sell{width:104px}.t-single .w-act{width:64px}
.t-shingle .w-size{width:150px}.t-shingle .w-cost{width:112px}.t-shingle .w-sell{width:130px}
.pr-tb th .hs{color:#a8c09a}

/* $ and % framing the raw numbers */
.cash{display:flex;align-items:center;gap:1px;justify-content:flex-end;font-family:var(--mono);font-size:12px;color:var(--muted)}
.cash input{text-align:right;font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.c-num.sm .cash input{color:var(--sage);font-weight:600}
.pct{display:flex;align-items:center;gap:1px;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--muted)}
.pct input{text-align:right;width:3.2em;flex:0 1 auto}

/* drag to reorder */
.pr-grab{border:0;background:none;color:var(--muted-2);font-size:15px;line-height:1;padding:7px 8px;cursor:grab;touch-action:none}
.pr-grab:active{cursor:grabbing;color:var(--gold)}
.pr-tb tr.dragging{position:relative;z-index:2}
.pr-tb tr.dragging td{background:var(--cream-2);box-shadow:0 8px 24px rgba(60,30,10,.28)}

/* the ⋯ row menu */
.pr-tb .w-av{width:30px}
.pr-av{display:inline-block;width:16px;height:28px;padding:0;border:1.5px solid var(--gold);border-radius:9px;background:var(--gold-3);position:relative;cursor:pointer;vertical-align:middle}
.pr-av i{position:absolute;left:2px;right:2px;top:2px;height:11px;border-radius:6px;background:var(--gold);transition:top .15s ease,background .15s ease}
.pr-av.off{background:#ececec;border-color:#b7b0a4}
.pr-av.off i{top:12px;background:#b7b0a4}
.pr-more{border:0;background:none;color:var(--muted-2);font-size:17px;line-height:1;padding:5px 7px;cursor:pointer;letter-spacing:.05em}
.pr-more:hover{color:var(--gold)}
.pr-menu{position:absolute;z-index:70;width:200px;background:var(--cream-2);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-hi);padding:6px;display:grid;gap:1px}
.pr-menu button{display:block;width:100%;text-align:left;border:0;background:none;border-radius:4px;padding:9px 11px;font-size:13.5px;font-weight:600;color:var(--ink)}
.pr-menu button:hover{background:rgba(193,155,94,.14)}
.pr-menu button.danger{color:var(--danger)}
.pr-menu button.newcat{color:var(--gold);font-weight:700}
.pr-menu .pm-sep{margin:5px 4px 2px;padding-top:7px;border-top:1px solid var(--line);font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* new-category modal input */
.qm-input{width:100%;margin:0 0 18px;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:11px 12px;font:inherit;font-size:15px;color:var(--ink)}
.qm-input:focus{outline:2px solid var(--gold-3);border-color:var(--gold)}
.qmodal-card h3{margin:0 0 8px;font-size:17px;color:var(--ink)}

/* shingle territory prices: centred in their boxes */
.sh-p input{text-align:center}
.sh-h.c{text-align:center}
.shp-grid{max-width:720px}

/* colors tab card */
.pr-colors{padding:22px 24px}

/* tighter screens fall back to the inner scroller so nothing clips */
@media(max-width:1080px){
  .t-single .w-size{width:170px}.t-single .w-cost{width:96px}.t-single .w-sell{width:92px}
  .t-dual .w-size{width:84px}.t-dual .w-cost{width:78px}.t-dual .w-sell{width:70px}
}
@media(max-width:900px){
  .pr-card.pr-main{overflow:auto;max-height:72vh;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .pr-tb thead th{top:0}
  .pr-top{flex-wrap:wrap}
}
/* v3.33 polish: $ hugs its number, % hugs its markup, + Color readable on cream */
.cash input{flex:0 0 4.4em;width:4.4em;padding-left:2px}
@supports (field-sizing:content){.cash input{field-sizing:content;flex:0 1 auto;width:auto;min-width:2.6em;max-width:6em}}
.pct input{width:2.7em}
.pr-colors .btn-ghost{color:var(--gold);border-color:var(--line-2);font-weight:700}
.pr-colors .btn-ghost:hover{background:rgba(193,155,94,.12);border-color:var(--gold)}

/* ── v3.34 · ledger recentred (cells share a middle line again; note still
   pinned to the divider) · Products search wears the quote-notes sand and
   ends at the Colors tab · save button says so while it works ── */
.pr-find,.pr-find:not(:placeholder-shown){background:var(--cream-2);border-color:var(--line)}
#pr-save:disabled{opacity:.75;cursor:progress}

/* ============================================================
   v3.50 · Step 5 — customer master, contacts, and the header
   lookups. The dropdown lives inside its field, so it moves with
   the card instead of floating over it.
   ============================================================ */
.ta-host{position:relative}
.ta-menu{position:absolute;z-index:50;top:100%;left:0;right:0;margin-top:3px;background:#fff;border:1px solid var(--line-2);border-radius:4px;box-shadow:0 18px 48px rgba(20,12,4,.28);max-height:320px;overflow:auto;-webkit-overflow-scrolling:touch}
.ta-opt{padding:8px 12px;cursor:pointer;border-bottom:1px solid rgba(201,185,143,.35)}
.ta-opt:last-child{border-bottom:0}
.ta-opt.hi,.ta-opt:hover{background:var(--gold-3)}
.ta-a{display:flex;align-items:baseline;gap:10px;justify-content:space-between}
.ta-a>span:first-child{font-weight:700;font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ta-code{font-family:var(--mono);font-size:10.5px;color:var(--gold);letter-spacing:.06em;white-space:nowrap}
.ta-b{font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the import dropzone */
.dropzone{border:2px dashed var(--line-2);border-radius:10px;background:var(--cream-2);padding:40px 22px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover{border-color:var(--gold)}
.dropzone.over{border-color:var(--gold);background:rgba(193,155,94,.14)}
.dz-title{font-family:var(--serif);font-size:19px;color:var(--ink)}
.dz-sub{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* the customers screen */
.cu-page{display:grid;gap:18px}
.cu-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cu-terr,.cu-find{border:1px solid var(--line);border-radius:var(--r);background:var(--cream-2);padding:9px 12px;font:inherit;font-size:14px;color:var(--ink)}
.cu-terr{width:170px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B4A33' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:14px;padding-right:28px}
.cu-find{flex:1 1 260px;min-width:180px}
.cu-terr:focus,.cu-find:focus{outline:2px solid var(--gold-3);border-color:var(--gold)}
.cu-page .cu-add{margin-left:auto}
.cu-count{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.cu-card{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:auto;-webkit-overflow-scrolling:touch}
.cu-tb{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.cu-tb thead th{position:sticky;top:0;z-index:2;background:linear-gradient(180deg,var(--navy),var(--navy-2));color:var(--on-navy-2);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:10px 9px;text-align:left;border-bottom:1px solid var(--hi);white-space:nowrap}
.cu-tb thead th i{display:block;font-style:normal;font-size:8.5px;letter-spacing:.08em;color:var(--hi);font-weight:500;margin-top:2px}
.cu-tb th.r,.cu-tb td.r{text-align:right}
.cu-tb .w-acct{width:130px}.cu-tb .w-st{width:44px}.cu-tb .w-zip{width:74px}.cu-tb .w-terr{width:62px}.cu-tb .w-act{width:104px}
.cu-tb td{padding:7px 9px;border-bottom:1px solid rgba(201,185,143,.45);vertical-align:middle}
.cu-tb tbody tr:hover td{background:rgba(255,255,255,.5)}
.cu-tb .mono{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.cu-name{font-weight:700;color:var(--ink)}
.cu-addr,.cu-agent{color:var(--ink-2)}
.cu-none{padding:24px;text-align:center;color:var(--muted);font-size:13.5px}
.acct-pill{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);padding:4px 10px;white-space:nowrap}
.acct-pill:hover{border-color:var(--gold);color:var(--gold)}
.acct-pill.has{border-color:var(--hi);background:rgba(193,155,94,.16);color:var(--gold);font-weight:700}
.cu-rowbtns{display:flex;gap:5px}
.btn-quiet.sm{padding:5px 10px;font-size:12px}
.btn-quiet.danger{color:var(--danger)}
.cu-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.cu-pager button:disabled{opacity:.45;cursor:default}
.cu-empty b{font-family:var(--serif);font-size:19px;display:block;margin-bottom:6px}
.cu-loading{padding:20px;color:var(--muted);font-size:13.5px}

/* preview + edit panels */
.cu-prev h4,.cu-edit h4{margin:0 0 14px;font-family:var(--serif);font-weight:400;font-size:19px;color:var(--ink)}
.cu-prev h4 em,.cu-edit h4 em{color:var(--gold);font-style:italic}
.cu-stats{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:16px}
.cu-stat b{display:block;font-family:var(--serif);font-size:26px;font-weight:400;color:var(--ink);line-height:1.1}
.cu-stat b.add{color:var(--sage)}.cu-stat b.chg{color:var(--gold)}.cu-stat b.mis{color:var(--danger)}
.cu-stat span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cu-diffscroll{max-height:400px;overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;-webkit-overflow-scrolling:touch}
.cu-pill{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:3px 9px}
.cu-pill.added{background:rgba(92,107,78,.16);color:var(--sage)}
.cu-pill.changed{background:rgba(193,155,94,.2);color:var(--gold)}
.cu-pill.missing{background:rgba(164,57,43,.13);color:var(--danger)}
.cu-more{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.cu-nodiff{margin:0;color:var(--muted);font-size:13.5px}
.cu-acts{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}
.cu-note{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cu-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px 14px}

/* contacts */
.qmodal-card.wide{max-width:660px;width:calc(100% - 32px)}
.ct-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.ct-head h4{margin:0;font-family:var(--serif);font-weight:400;font-size:20px}
.ct-head h4 em{color:var(--gold);font-style:italic}
.ct-sub{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:4px 0 16px}
.ct-rows{display:grid;gap:2px}
.ct-row{display:grid;grid-template-columns:1fr 1.3fr .8fr auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(201,185,143,.5);font-size:13px}
.ct-row .mono{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
.ct-btns{display:flex;gap:5px}
.ct-empty{margin:0;padding:14px 0;color:var(--ink-2);font-size:13px;line-height:1.5}
.ct-draft{margin-top:16px}
@media(max-width:760px){
  .ct-row{grid-template-columns:1fr auto;row-gap:2px}
  .ct-row .ct-btns{grid-row:1/3;align-self:center}
  .cu-tb .w-act{width:88px}
}

/* ---------- sales analytics (v4.88) ---------- */
.ana{display:flex;flex-direction:column;gap:18px}
.ana-ctl{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ana-ctl .ana-tabs{margin-left:auto}
.ana-period{font:inherit;font-size:12.5px;font-weight:700;padding:9px 34px 9px 13px;border:1px solid rgba(0,0,0,.3);border-radius:4px;cursor:pointer;color:#E3B85C;background:linear-gradient(180deg,#332C22,#191510);box-shadow:0 2px 10px rgba(0,0,0,.3);-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23E3B85C' stroke-width='1.6'/%3E%3C/svg%3E"),linear-gradient(180deg,#332C22,#191510);background-repeat:no-repeat;background-position:right 12px center,0 0}
.ana-tabs button.on{background:linear-gradient(180deg,#E3B85C,#C19B5E);border-color:#B58A3E;color:#1B140B;box-shadow:0 0 0 1px rgba(227,184,92,.35),0 4px 14px rgba(227,184,92,.35)}
.ana-grid3>*{min-width:0}
.ana-grid3 .ana-tb{table-layout:fixed}
.ana-grid3 .ana-tb td{overflow:hidden;text-overflow:ellipsis}
.ana-grid3 .ana-tb td.n{width:42%;white-space:normal}
.ana-host{display:flex;flex-direction:column;gap:18px}
.ana-host>div{display:flex;flex-direction:column;gap:18px}
.ana-card{background:var(--cream-2);border:1px solid var(--line);border-top:4px solid var(--acc,var(--gold));border-radius:var(--r);padding:20px 24px;box-shadow:0 10px 28px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.14);min-width:0}
.ana-card.acc-q{--acc:#7FA3C4}.ana-card.acc-o{--acc:#8FAF7A}.ana-card.acc-m{--acc:#C19B5E}.ana-card.acc-p{--acc:#C4834F}
.ana-card .k{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.ana-card .v{font-family:var(--serif);font-size:44px;line-height:1.1;margin:8px 0 6px;color:var(--ink);letter-spacing:-.01em}
.ana-card .f{font-size:13px;color:var(--ink-2)}
.ana-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-family:var(--serif);font-size:22px;color:var(--ink);margin-bottom:14px}
.ana-h small{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:600}
.ana-funnel{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch}
.ana-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#F0E7D3;min-width:130px;text-align:center;font-size:13px}
.ana-arrow b{font-family:var(--serif);font-size:34px;color:#E3B85C;line-height:1}
.ana-arrow small{font-family:var(--mono);font-size:11px;color:#B8B4AC;margin-top:4px}
.ana-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ana-bar,.ana-row{display:grid;grid-template-columns:minmax(150px,1.2fr) 3fr 110px 150px;gap:14px;align-items:center;padding:9px 0;border-top:1px solid rgba(0,0,0,.07);font-size:14px}
.ana-bar:first-of-type,.ana-row:first-of-type{border-top:0}
.ana-bar .l,.ana-row .l{font-weight:650;display:flex;align-items:center;gap:8px;min-width:0}
.ana-row .l small,.ana-tb td small{display:block;font-weight:500;font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ana-bar .t,.ana-row .t{height:10px;border-radius:99px;background:rgba(0,0,0,.08);overflow:hidden}
.ana-bar .t i,.ana-row .t i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),color-mix(in srgb,var(--acc) 60%,#fff));border-radius:99px;min-width:2px}
.ana-bar b,.ana-row b{font-family:var(--mono);font-weight:700;text-align:right}
.ana-bar .r,.ana-row .r{font-family:var(--mono);font-size:12px;color:var(--ink-2);text-align:right}
.ana-row .r small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ana-row.can{cursor:pointer}.ana-row.can:hover{background:rgba(0,0,0,.03)}
.ana-row .tw{width:0;height:0;border:5px solid transparent;border-left:7px solid var(--ink-2);margin-right:2px;transition:transform .15s}
.ana-row.open .tw{transform:rotate(90deg)}
.ana-row.d1{padding-left:22px;font-size:13px;background:rgba(0,0,0,.025)}.ana-row.d1 .t{height:7px}
.ana-row.d2{padding-left:46px;font-size:13px;background:rgba(0,0,0,.05)}.ana-row.d2 .t{height:6px}
.ana-mixbar{display:flex;align-items:center;gap:14px;color:#F0E7D3;font-size:13px}
.ana-tb{width:100%;border-collapse:collapse;font-size:14px}
.ana-tb th{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.ana-tb td{padding:8px;border-top:1px solid rgba(0,0,0,.07);vertical-align:middle}
.ana-tb tr:first-child td{border-top:0}
.ana-tb .n{text-align:right;white-space:nowrap}.ana-tb .m{font-family:var(--mono);font-weight:700}
.ana-tb .sw{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.2);vertical-align:-2px;margin-right:8px}
.ana-none{color:var(--ink-2);font-size:14px;padding:6px 0}
@media(max-width:900px){.ana-grid3{grid-template-columns:1fr}.ana-funnel{grid-template-columns:1fr}.ana-arrow{flex-direction:row;gap:10px}.ana-bar,.ana-row{grid-template-columns:1fr 2fr 90px 100px;gap:8px}.ana-row .r small{display:none}}

.ta-city{font-weight:700}
/* v5.24 samples: chips right of the longest length in the SKU menu; second select under the shingle pattern */
.sku-menu .opt .lk .lc.smp{width:52px;min-width:52px;padding-left:3px;padding-right:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-color:var(--gold);color:var(--gold);font-size:10px}
.sku-menu .opt .lk .lc:not(.smp)+.lc.smp{margin-left:6px}
.sku-menu .opt .lk .lc.smp.box{border-color:var(--ink);color:var(--ink)}
.sku-menu .opt .lk .lc.smp small{font-size:7px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;opacity:.85;margin-top:1px}
.ledger .c-len select+select,.ledger .c-len .dd+.dd,.ledger .c-len .dd+select{margin-top:4px}

/* v5.24 sample layout: lengths + their caption in one block, samples beside it so the caption centers under lengths only */
.sku-menu .opt .lk .lwrap{display:flex;align-items:flex-start;gap:6px}
.sku-menu .opt .lk .lgrid{display:flex;flex-direction:column;align-items:stretch;gap:1px}

/* v5.27 sample caption under the length box, no box resize */
.ledger .c-len .lenwrap{position:relative;display:block}
.ledger .c-len .smpcap{position:absolute;left:0;right:0;top:100%;margin-top:1px;font-size:8.5px;line-height:1.1;text-align:center;color:var(--gold);font-weight:700;letter-spacing:.04em;pointer-events:none;white-space:nowrap}

/* ============================================================
   v5.47 · THE iPHONE LAYER
   Everything below hangs off html.is-phone, which ui.js sets only
   on a narrow (portrait) or short (landscape) touch screen that is
   not an iPad. iPad and laptop never match a single rule here; the
   four neutral lines first just keep the new phone-only elements
   out of the way everywhere else.
   ============================================================ */
.me,.osum,.qdock{display:none}
.who .acct{display:contents}

html.is-phone{-webkit-tap-highlight-color:transparent;--dock-h:68px}
html.is-phone,html.is-phone body{scrollbar-gutter:auto}
html.is-phone body{overscroll-behavior-y:none}
/* 16px fields: anything smaller makes iOS Safari zoom the page on focus */
html.is-phone input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),html.is-phone select,html.is-phone textarea{font-size:16px!important}
html.is-phone button{touch-action:manipulation}

/* ---------- masthead ---------- */
html.is-phone .topbar{gap:10px;padding:8px max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left));padding-top:max(8px,env(safe-area-inset-top))}
html.is-phone .topbar .brand img{height:34px}
html.is-phone .topbar .distrib{display:none}
html.is-phone .topbar .grow{display:block!important}
html.is-phone .who{padding-left:0;border-left:0;position:relative;gap:0}
html.is-phone .me{display:grid;place-items:center;position:relative;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid rgba(193,155,94,.6);background:radial-gradient(circle at 32% 26%,#43392d 0%,#1d1915 70%);color:#EAD8AC;font:800 13px/1 var(--sans);letter-spacing:.06em;box-shadow:0 2px 10px rgba(0,0,0,.45)}
html.is-phone .me .dot{position:absolute;right:-1px;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--muted);border:2px solid #161310}
html.is-phone .me.on .dot{background:#4ADE80;box-shadow:0 0 8px rgba(74,222,128,.9)}
html.is-phone .me.off .dot{background:#EF4444;box-shadow:0 0 8px rgba(239,68,68,.9)}
html.is-phone .who .acct{display:none}
html.is-phone .who.open .acct{display:flex;flex-direction:column;align-items:stretch;gap:14px;position:absolute;right:0;top:calc(100% + 12px);width:246px;padding:18px 16px 16px;z-index:80;
  background:linear-gradient(180deg,#2d2722,#141110);border:1px solid rgba(193,155,94,.45);border-radius:16px;box-shadow:0 22px 60px rgba(0,0,0,.6);animation:acctIn .18s ease-out}
@keyframes acctIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
html.is-phone .who.open .acct .name{display:block!important;font-size:16px;font-weight:700;color:#F2E8CE;line-height:1.25}
html.is-phone .who.open .acct .stack{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px}
html.is-phone .who.open .acct .btn-ghost{width:100%;padding:12px;border-radius:10px;font-size:14px;border-color:rgba(193,155,94,.45);color:#F2E8CE}

/* nav: a bottom tab bar in portrait, an icon strip in the masthead in landscape */
html.is-phone .topnav .tn.create span{font-size:0!important}
html.is-phone .topnav .tn.create span br{display:none}
@media (orientation:portrait){
  html.is-phone .topnav{display:flex!important;position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;gap:0;justify-content:space-around;
    padding:6px max(6px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));
    background:rgba(15,12,10,.93);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);border-top:.5px solid rgba(193,155,94,.4)}
  html.is-phone .topnav .tn{flex:1 1 0;min-width:0;flex-direction:column;gap:4px;padding:7px 0 6px;border-radius:12px;color:rgba(232,214,180,.62)}
  html.is-phone .topnav .tn svg{width:23px;height:23px}
  html.is-phone .topnav .tn span{display:block!important;font-size:10.5px;letter-spacing:0;text-transform:none;font-family:var(--sans);font-weight:600;line-height:1;white-space:nowrap}
  html.is-phone .topnav .tn.create span::after{content:"New";font-size:10.5px}
  html.is-phone .topnav .tn.on{box-shadow:none;border-radius:12px;background:rgba(255,255,255,.07)}
  html.is-phone .topbar.page-quote-new .topnav,html.is-phone body:has(.qmodal) .topnav{display:none!important}
  html.is-phone .shell{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  html.is-phone .shell:has(.quote){padding-bottom:0}
  html.is-phone .savebar{bottom:calc(76px + env(safe-area-inset-bottom))}
}
@media (orientation:landscape){
  html.is-phone .topbar{padding-top:max(6px,env(safe-area-inset-top));padding-bottom:6px}
  html.is-phone .topbar .brand img{height:30px}
  html.is-phone .topbar .grow{display:none!important}
  html.is-phone .topnav{display:flex!important;margin:0 auto;gap:4px}
  html.is-phone .topnav .tn{padding:9px 14px}
  html.is-phone .topnav .tn svg{width:19px;height:19px}
  html.is-phone .topnav .tn span{display:none!important}
  html.is-phone .me{width:36px;height:36px}
}

/* ---------- page frame ---------- */
html.is-phone .page{padding:18px max(14px,env(safe-area-inset-right)) 28px max(14px,env(safe-area-inset-left))}
html.is-phone .sec-head{gap:10px;margin-bottom:16px}
html.is-phone .sec-head h2{font-size:27px;line-height:1.05}
html.is-phone .btn-back{padding:10px 13px;font-size:13px;border-radius:10px}
html.is-phone .sec-head .btn-primary.sm{padding:11px 15px;border-radius:10px}
html.is-phone .panel{padding:16px;border-radius:12px}
html.is-phone .toast{bottom:calc(86px + env(safe-area-inset-bottom));max-width:calc(100vw - 28px);border-radius:12px;padding:13px 16px;font-size:14px;text-align:center}

/* ---------- login ---------- */
html.is-phone .login{padding:28px 22px calc(28px + env(safe-area-inset-bottom));align-items:flex-end;min-height:100dvh}
html.is-phone .login-card{transform:none}
html.is-phone .login-card img.logo{width:190px;margin-bottom:20px}
html.is-phone .login-card h1{font-size:36px;margin-bottom:24px}
html.is-phone .btn-ms{padding:17px 20px;border-radius:12px;font-size:16px}
html.is-phone .login-foot{margin-top:30px}
@media (orientation:landscape){
  html.is-phone .login{align-items:center;padding:16px 24px}
  html.is-phone .login-hero::after{background:radial-gradient(ellipse 70% 90% at 50% 50%,rgba(20,15,8,.88) 0%,rgba(20,15,8,.6) 60%,rgba(20,15,8,.3) 100%)}
  html.is-phone .login-card{width:min(640px,100%);display:grid;grid-template-columns:1fr 1fr;column-gap:30px;align-items:center;text-align:left}
  html.is-phone .login-card img.logo{grid-row:1/4;width:200px;margin:0 auto;left:0}
  html.is-phone .login-card h1{font-size:32px;margin-bottom:18px}
  html.is-phone .login-card .sub{margin-bottom:8px}
  html.is-phone .login-foot{grid-column:1/-1;margin-top:18px;padding-top:12px;flex-direction:row;justify-content:center;gap:18px}
  html.is-phone .login-foot .distrib{flex-direction:row}
  html.is-phone .login-foot .distrib img{width:40px;height:40px}
}

/* ---------- dashboard ---------- */
html.is-phone .greet{margin-bottom:18px;padding-bottom:16px}
html.is-phone .greet-eyebrow{font-size:10px;letter-spacing:.22em;margin-bottom:8px}
html.is-phone .greet h2{font-size:34px}
html.is-phone .tiles{grid-template-columns:1fr 1fr;gap:12px}
html.is-phone .tile{display:flex;flex-direction:column;justify-content:space-between;min-height:148px;padding:16px 14px 14px 18px;border-radius:16px}
html.is-phone .tile:hover{transform:none}
html.is-phone .tile:active{transform:scale(.98)}
html.is-phone .tile-ic{width:44px;height:44px;border-radius:11px}
html.is-phone .tile-ic svg{width:25px;height:25px}
html.is-phone .tile .eyebrow{font-size:9.5px;letter-spacing:.18em}
html.is-phone .tile .title{font-size:22px;margin-top:4px;line-height:1.08}
html.is-phone .tile .foot{position:absolute;top:14px;right:14px;margin:0}
html.is-phone .tile .arrow{width:30px;height:30px;border-radius:50%}
html.is-phone .tile.create{grid-column:1/-1;min-height:132px;background:linear-gradient(135deg,#3a2f22 0%,#1d1814 55%,#0d0b09 100%);border-color:rgba(193,155,94,.5)}
html.is-phone .tile.create .title{font-size:30px}
html.is-phone .tile.create .tile-ic{width:52px;height:52px}
html.is-phone .tile.create .arrow{background:var(--tile-c);color:#0d0b09;border-color:transparent;width:38px;height:38px}
html.is-phone .tile.create::after{opacity:.4;width:260px;height:260px}
@media (orientation:landscape){
  html.is-phone .greet{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
  html.is-phone .greet h2{font-size:30px;order:-1}
  html.is-phone .tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  html.is-phone .tile.create{grid-column:auto}
  html.is-phone .tile,html.is-phone .tile.create{min-height:140px}
  html.is-phone .tile.create .title{font-size:22px}
  html.is-phone .tile.create .tile-ic{width:44px;height:44px}
}

/* ---------- quotes / orders list ---------- */
html.is-phone .qtools{gap:8px}
html.is-phone .qtools .qsearch{flex:1 1 100%;padding:13px 14px 13px 38px;border-radius:12px;background-position:13px center,0 0}
html.is-phone .qtools #q-man{flex:1 1 0;min-width:0;max-width:none;padding:12px 32px 12px 13px;border-radius:12px}
html.is-phone .qpills{border-radius:12px}
html.is-phone .qpills button{padding:12px 13px}
html.is-phone .qlist{border:0;border-radius:0;overflow:visible;box-shadow:none!important;gap:10px}
html.is-phone .qhead{display:none}
html.is-phone .qrow,html.is-phone .qlist button.qrow:nth-of-type(even){display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"no stat tot" "who who who" "man man when";gap:6px 10px;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--cream-2);box-shadow:0 6px 18px rgba(0,0,0,.22)}
html.is-phone .qrow:active{background:#ECDFBC}
html.is-phone .qrow .qno{grid-area:no;font-size:15px}
html.is-phone .qrow .qstat{grid-area:stat;display:inline-block!important;justify-self:start;font-size:9.5px;padding:2px 8px}
html.is-phone .qrow .qtot{grid-area:tot;justify-self:end;font-size:15px}
html.is-phone .qrow .qwho{grid-area:who;align-items:flex-start;text-align:left}
html.is-phone .qrow .qwho b{white-space:normal;font-size:15.5px;line-height:1.25}
html.is-phone .qrow .qwho small{font-size:12.5px;line-height:1.35}
html.is-phone .qrow .qman{grid-area:man;display:block!important;font-size:12px;color:var(--muted);text-align:left}
html.is-phone .qrow .qwhen{grid-area:when;display:block!important;justify-self:end;font-size:12px}
@media (orientation:landscape){
  html.is-phone .qlist{display:grid;grid-template-columns:1fr 1fr}
  html.is-phone .qtools .qsearch{flex:1 1 300px}
}

/* ---------- the quote screen ---------- */
html.is-phone .quote{padding-bottom:calc(var(--dock-h) + 30px + env(safe-area-inset-bottom))}
html.is-phone .quote .sec-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"back title del" "kind kind kind";align-items:center;gap:12px 10px;margin-bottom:16px}
html.is-phone .quote .sec-head .btn-back{grid-area:back;order:0;font-size:0;width:42px;height:42px;padding:0;display:grid;place-items:center}
html.is-phone .quote .sec-head .btn-back::before{content:"\2190";font-size:19px;line-height:1}
html.is-phone .qtitle{grid-area:title;margin:0;min-width:0}
html.is-phone .qtitle h2{font-size:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.is-phone .qtitle h2 .save-pill{display:none}
html.is-phone .qo-toggle{grid-area:kind;display:flex;margin:0;border-radius:12px}
html.is-phone .qo-toggle button{flex:1;padding:12px 10px;font-size:12.5px;letter-spacing:.14em}
html.is-phone .q-actions{grid-area:del;margin:0}
html.is-phone .q-actions #pdf-cust,html.is-phone .q-actions #pdf-po{display:none}
html.is-phone .q-actions #q-del{width:42px;height:42px;padding:0;justify-content:center;border-radius:10px;color:var(--danger)}
html.is-phone .q-actions #q-del svg{width:19px;height:19px}
html.is-phone .q-actions #q-del-lbl{display:none}

html.is-phone .card{border-radius:16px;padding:16px}
html.is-phone .q-cards{gap:14px;margin-bottom:14px}
html.is-phone .fgrid{grid-template-columns:1fr 1fr;gap:12px 10px}
html.is-phone .f>span{font-size:9.5px}
html.is-phone .f input,html.is-phone .f select,html.is-phone .f textarea,html.is-phone .ter-pick{padding:11px 12px;border-radius:10px}
html.is-phone .seg{border-radius:10px}
html.is-phone .seg button{padding:11px 8px}
html.is-phone .seg.sm button{padding:10px 11px;min-width:42px;text-overflow:clip}
html.is-phone .payseg{gap:7px}
html.is-phone .oshead{margin-bottom:14px;gap:10px}
html.is-phone .q-cards .oshead h3{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}
html.is-phone .q-cards .oshead h3::after{content:"";width:7px;height:7px;margin-top:-3px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .2s}
html.is-phone .q-cards .card.fold .oshead h3::after{transform:rotate(-45deg);margin-top:0}
html.is-phone .q-cards .card.fold .fgrid{display:none}
html.is-phone .q-cards .card.fold .oshead{margin-bottom:8px}
html.is-phone .q-cards .card.fold .osum{display:flex;flex-direction:column;gap:2px;cursor:pointer}
html.is-phone .osum b{font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.3}
html.is-phone .osum b.mut{color:var(--gold)}
html.is-phone .osum span{font-size:13px;color:var(--ink-2);line-height:1.35}
html.is-phone .payseg>span{font-size:9.5px}
html.is-phone .ctpill{font-size:9.5px;padding:3px 8px}

/* money strip: stays in the flow on a phone (the dock carries the total) */
html.is-phone .card.strip{position:relative;top:auto!important;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:18px;border-radius:16px}
html.is-phone .strip .m{padding:12px 6px;border-top:1px solid var(--navy-line)}
html.is-phone .strip .m>b{font-size:16px}
html.is-phone .strip .m.frt>small{position:static;margin-top:2px}
html.is-phone .strip .m.tax{grid-column:span 2}
html.is-phone .strip .m.total{grid-column:1/-1;border-top:0;flex-direction:row;justify-content:space-between;align-items:center;padding:14px 18px}
html.is-phone .strip .m.total>b{font-size:30px}
html.is-phone .strip .m.tax>span input{width:auto!important;max-width:3.6ch;font-size:16px!important;padding:0 2px;background:rgba(255,255,255,.06);border-radius:4px;color:var(--on-navy)}
html.is-phone .strip .ctl{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px 10px;padding:14px 14px 16px}
html.is-phone .strip .ctl .qn{grid-column:1/-1;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:0}
html.is-phone .strip .ctl .qn input{padding:11px 12px;border-radius:10px;text-align:left}
html.is-phone .strip .ctl .ovs{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;justify-content:stretch}
html.is-phone .strip .ctl .ovs label{align-items:center;min-width:0}
html.is-phone .strip .ctl .ovs label>span,html.is-phone .strip .ctl label.st>span,html.is-phone .strip .ctl label.vd>span{white-space:normal;width:auto;text-align:center;line-height:1.25;min-height:2.5em;display:flex;align-items:flex-end;justify-content:center}
html.is-phone .strip .ctl .ovs input{width:100%;padding:9px 6px;border-radius:10px;text-align:center}
html.is-phone .strip .ctl .ovs label.vd>b{line-height:40px;font-size:16px}
html.is-phone .strip .ctl .stamp{grid-column:1/-1;justify-self:center;padding:9px 18px;font-size:11px}

/* line items: the ledger table becomes a stack of cards */
html.is-phone .card.lines{padding:0;background:transparent;border:0;box-shadow:none!important;overflow:visible}
html.is-phone .ledger-wrap{overflow:visible}
html.is-phone .ledger-wrap::before{content:"Line items";display:block;margin:2px 2px 10px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--hi)}
html.is-phone .ledger,html.is-phone .ledger tbody{display:block;width:100%;min-width:0;table-layout:auto}
html.is-phone .ledger thead{display:none}
html.is-phone .ledger tr.ln{display:grid;position:relative;overflow:hidden;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.3fr);
  grid-template-areas:"item item act" "qty len tex" "col col col" "tools sell ext";
  gap:12px 8px;margin:0 0 12px;padding:14px 14px 14px 16px;background:var(--cream-2);border:1px solid rgba(193,155,94,.6);border-radius:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 24px rgba(0,0,0,.30);transition:transform .2s,box-shadow .2s}
html.is-phone .ledger tr.ln td{display:block;width:auto;min-width:0;padding:0;border:0;background:none!important;text-align:left}
html.is-phone .ledger tr.ln:hover td{background:none}
html.is-phone .ledger tr.pressing{background:#fff;transform:scale(.985)}
html.is-phone .ledger tr.dragging{z-index:8;transform:scale(1.02);box-shadow:0 0 0 2px var(--hi),0 22px 44px rgba(0,0,0,.45)}
html.is-phone .ledger tr.ln td.c-qty::before,html.is-phone .ledger tr.ln td.c-len::before,html.is-phone .ledger tr.ln td.c-tex::before,html.is-phone .ledger tr.ln td.c-col::before,html.is-phone .ledger tr.ln td.c-sell::before,html.is-phone .ledger tr.ln:not(.incomplete) td.c-ext::before{
  display:block;margin:0 0 5px;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.2;white-space:nowrap}
html.is-phone .ledger tr.ln td.c-qty::before{content:"Qty"}
html.is-phone .ledger tr.ln td.c-len::before{content:"Length"}
html.is-phone .ledger tr.ln.shingle td.c-len::before{content:"Pattern"}
html.is-phone .ledger tr.ln td.c-tex::before{content:"Texture"}
html.is-phone .ledger tr.ln td.c-col::before{content:"Color"}
html.is-phone .ledger tr.ln td.c-sell::before{content:"Sell"}
html.is-phone .ledger tr.ln:not(.incomplete) td.c-ext::before{content:"Extended"}
html.is-phone .ledger tr.ln td.c-item{grid-column:1/-1;grid-row:1;padding:0;position:relative;min-width:0}
html.is-phone .ledger tr.ln td.c-qty{grid-area:qty}
html.is-phone .ledger tr.ln td.c-len{grid-area:len}
html.is-phone .ledger tr.ln td.c-tex{grid-area:tex}
html.is-phone .ledger tr.ln td.c-col{grid-area:col}
html.is-phone .ledger tr.ln td.c-tools{grid-area:tools;display:flex;align-items:flex-end;gap:8px}
html.is-phone .ledger tr.ln td.c-sell{grid-area:sell;align-self:end;text-align:center;white-space:nowrap}
html.is-phone .ledger tr.ln td.c-ext{grid-area:ext;align-self:end;text-align:right;padding:0}
html.is-phone .ledger tr.ln td.c-act{grid-column:-2/-1;grid-row:1;justify-self:end;align-self:start;z-index:1;position:static;display:flex;justify-content:flex-end;align-items:flex-start;gap:6px;padding:0;white-space:nowrap}
html.is-phone .ledger .itm,html.is-phone .ledger tr.custom .itm{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding-right:92px}
html.is-phone .ledger tr.custom .itm .cdesc{width:calc(100% + 92px);margin-right:-92px}
html.is-phone .ledger .sku{min-width:0;font-size:18px;padding:6px 6px;margin:-4px 0 -4px -6px}
html.is-phone .ledger .dsc{font-size:14px;line-height:1.3}
html.is-phone .ledger .sz{font-size:12px;gap:6px 8px}
html.is-phone .ledger .cdesc{width:100%;min-height:44px;padding:10px 12px;border-radius:10px}
html.is-phone .ledger .lnote{position:static;margin-top:8px;padding:8px 10px;border-radius:10px;background:rgba(193,155,94,.12)}
html.is-phone .ledger .lnote input{flex:1 1 auto;width:auto!important;max-width:none;min-width:0}
html.is-phone .ledger .c-qty .qw{position:relative;display:block}
html.is-phone .ledger .c-qty input{display:block;width:100%;min-width:0;height:46px;border-radius:10px;font-size:18px!important;font-weight:700;padding:0 26px 0 8px}
html.is-phone .ledger .c-qty .um{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:9px;pointer-events:none}
html.is-phone .ledger .dd,html.is-phone .ledger select,html.is-phone .ledger .lenfree,html.is-phone .ledger .c-col .ccname,html.is-phone .ledger tr.custom .c-sell input{height:46px;padding:0 10px;border-radius:10px;font-size:15px}
html.is-phone .ledger .dd{gap:4px}
html.is-phone .ledger .c-tex .dd .dd-ch{display:none}
html.is-phone .ledger tr.custom .lenfree,html.is-phone .ledger tr.custom .c-tex .dd,html.is-phone .ledger tr.custom .c-col .dd,html.is-phone .ledger tr.custom .c-sell input{height:46px}
html.is-phone .ledger .dd .dd-ch,html.is-phone .ledger .dd .dd-ch svg{width:14px;height:14px}
html.is-phone .ledger .c-len .dd .dd-lb{text-align:left}
html.is-phone .ledger .c-col .ccname{margin-top:8px;width:100%}
html.is-phone .ledger .fixed,html.is-phone .ledger .na{display:flex;align-items:center;justify-content:center;height:46px;padding:0 10px;border-radius:10px;font-size:14px}
html.is-phone .ledger .na{background:rgba(221,208,180,.4);padding-top:0}
html.is-phone .ledger .c-len .smpcap{position:static;margin-top:4px;font-size:10px}
html.is-phone .ledger .c-len .dd+.dd,html.is-phone .ledger .c-len select+select{margin-top:6px}
html.is-phone .ledger td.num[data-k],html.is-phone .ledger .c-sell b{font-size:15px}
html.is-phone .ledger tr.ln td.c-ext{font-family:var(--mono);font-weight:800;font-size:18px;color:var(--ink);white-space:nowrap}
html.is-phone .ledger tr.incomplete td.c-ext::before{text-align:right;font-size:11.5px;line-height:1.3;color:var(--gold-2);font-weight:600;white-space:normal}
html.is-phone .ledger tr.custom .c-sell input{width:calc(100% - 26px);text-align:center}
html.is-phone .ledger .ib{width:40px;height:40px;border-radius:11px;border:1px solid rgba(156,132,86,.35);background:rgba(255,255,255,.6);color:var(--ink-2)}
html.is-phone .ledger .ib svg{width:18px;height:18px}
html.is-phone .ledger .c-tools .ib{margin:0;width:38px;height:38px}
html.is-phone .ledger tr.ln td.c-tools{gap:6px}
html.is-phone .ledger .c-act .ib{width:38px;height:38px}
html.is-phone .ledger .c-act .ib.del{margin-left:0}
html.is-phone .ledger .ib.on{color:var(--gold-2);background:var(--gold-3);border-color:var(--hi)}
html.is-phone .ledger .covpop{left:0;top:auto;bottom:calc(100% + 4px);transform:none}
/* the eye's internal-figures drawer rises from the bottom of the card */
html.is-phone .ledger tr.ln .irw{left:0;right:0;top:auto;bottom:0;width:auto;height:auto;z-index:5}
html.is-phone .ledger tr.ln .irow{position:relative;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px;align-items:end;
  padding:16px 16px 16px;border-radius:0 0 16px 16px;transform:translateY(103%);transition:transform .3s cubic-bezier(.2,.7,.2,1);box-shadow:0 -12px 26px rgba(0,0,0,.25)}
html.is-phone .ledger tr.ln.int .irow{transform:translateY(0)}
html.is-phone .ledger .irow>:nth-child(2){grid-column:1/-1}
html.is-phone .ledger .irow .chv{left:auto;right:6px;top:6px;transform:rotate(90deg);padding:11px}
html.is-phone .ledger .irow .ov span,html.is-phone .ledger .irow .m span{text-align:left;font-size:9px}
html.is-phone .ledger .irow .ov input{width:100%;height:46px;border-radius:10px;font-size:18px!important;text-align:left;padding:0 12px}
html.is-phone .ledger .irow>:nth-child(2) input{width:calc(100% - 44px)}
html.is-phone .ledger .irow .m b{text-align:left;font-size:16px}
/* the always-open add row */
html.is-phone .ledger tr.new{display:block;margin:6px 0 14px}
html.is-phone .ledger tr.new td{display:none}
html.is-phone .ledger tr.new td.c-item{display:block;padding:0;background:none}
html.is-phone .ledger .sku-in{height:54px;padding:0 16px 0 46px;border:1.5px dashed rgba(193,155,94,.85);border-radius:14px;color:var(--ink);
  background:rgba(250,243,226,.96) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E4A22' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") 15px center/20px no-repeat}
html.is-phone .ledger .sku-in:focus{border-style:solid;background-color:#fff}
html.is-phone .ledger .sku-in::placeholder{color:var(--ink-2)}
html.is-phone .ledger tr.ln .sku-in{height:46px;border-radius:10px}
html.is-phone .lines-foot{padding:4px 2px 0;gap:12px;flex-wrap:wrap}
html.is-phone .lines-foot #add-item,html.is-phone .lines-foot #save{display:none}
html.is-phone .lines-foot .save-state{color:#9fc58a}
html.is-phone .lines-hint{color:rgba(232,214,180,.6);font-size:11px}

/* the dock: total, both PDFs and save, always under the thumb */
html.is-phone .qdock{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:9px max(12px,env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  background:rgba(16,22,31,.95);-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);border-top:1px solid rgba(193,155,94,.5);box-shadow:0 -10px 30px rgba(0,0,0,.4)}
html.is-phone .qd-tot{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;padding:2px 4px;background:none;border:0;color:inherit;text-align:left}
html.is-phone .qd-tot span{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--on-navy-3)}
html.is-phone .qd-tot b{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.05;color:var(--hi);letter-spacing:-.01em;white-space:nowrap}
html.is-phone .qd-tot small{font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--on-navy-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
html.is-phone .qd-tot small.ok{color:#9fc58a}html.is-phone .qd-tot small.lo{color:#e6b062}html.is-phone .qd-tot small.neg{color:#ff8a7a}
html.is-phone .qd-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:58px;height:52px;padding:0;border-radius:13px;border:1px solid rgba(232,214,180,.22);background:rgba(255,255,255,.06);color:#EAD8AC;font-size:10.5px;font-weight:700;letter-spacing:.04em}
html.is-phone .qd-btn svg{width:20px;height:20px}
html.is-phone .qd-btn:active{background:rgba(255,255,255,.14)}
html.is-phone .qd-btn:disabled{opacity:.4}
html.is-phone .qd-btn.gold{width:66px;background:linear-gradient(180deg,#D9AE55,#9C7128);color:#1A1206;border-color:rgba(0,0,0,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 14px rgba(193,155,94,.35)}
html.is-phone .qd-btn.gold.done{background:linear-gradient(180deg,#5d7d4f,#3b5531);color:#E9F5DF;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
@media (orientation:landscape){
  html.is-phone{--dock-h:52px}
  html.is-phone .qdock{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  html.is-phone .qd-tot{flex-direction:row;align-items:baseline;gap:12px}
  html.is-phone .qd-tot b{font-size:24px}
  html.is-phone .qd-btn{flex-direction:row;width:auto;height:42px;padding:0 14px;gap:7px;font-size:12px}
  html.is-phone .qd-btn.gold{width:auto;padding:0 18px}
  html.is-phone .q-cards{grid-template-columns:1fr 1fr;align-items:start}
  html.is-phone .ledger tr.ln{grid-template-columns:minmax(0,.75fr) minmax(0,.95fr) minmax(0,1.25fr) minmax(0,1.65fr) minmax(0,1fr) minmax(0,1.1fr);
    grid-template-areas:"item item item item item act" "qty len tex col sell ext";gap:10px 10px}
  html.is-phone .ledger tr.ln td.c-act{gap:6px}
  html.is-phone .ledger tr.ln td.c-tools{position:absolute;top:14px;right:104px;z-index:2}
  html.is-phone .ledger .itm,html.is-phone .ledger tr.custom .itm{padding-right:196px}
  html.is-phone .ledger tr.custom .itm .cdesc{width:100%;margin-right:0}
  html.is-phone .ledger tr.ln .irow{grid-template-columns:2fr 1fr 1fr 1fr;padding-right:52px}
  html.is-phone .ledger .irow>:nth-child(2){grid-column:auto}
  html.is-phone .ledger .irow>:nth-child(2) input{width:100%}
  html.is-phone .ledger .irow .chv{top:50%;transform:translateY(-50%) rotate(90deg)}
  html.is-phone .card.strip{grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.6fr)}
  html.is-phone .strip .m.tax{grid-column:auto}
  html.is-phone .strip .m.total{grid-column:auto;flex-direction:column;justify-content:center;padding:10px 8px}
  html.is-phone .strip .m.total>b{font-size:24px}
  html.is-phone .strip .ctl{grid-template-columns:2fr 3fr auto;align-items:end}
  html.is-phone .strip .ctl .qn,html.is-phone .strip .ctl .ovs{grid-column:auto}
  html.is-phone .strip .ctl .stamp{grid-column:auto;align-self:center}
}


/* ---------- product picker: a full-screen search (v5.48) ---------- */
html.is-phone.pk-open,html.is-phone.pk-open body{overflow:hidden}
html.is-phone .pk-sheet{position:fixed;left:0;right:0;top:0;height:100dvh;z-index:500;display:flex;flex-direction:column;background:linear-gradient(180deg,#1b2430,#121820);animation:pkIn .2s ease-out}
@keyframes pkIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html.is-phone .pk-head{flex:none;display:flex;align-items:center;gap:10px;padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));padding-top:max(10px,env(safe-area-inset-top));border-bottom:1px solid rgba(193,155,94,.4);background:rgba(13,11,9,.6)}
html.is-phone .pk-field{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:48px;padding:0 6px 0 14px;border-radius:14px;background:var(--cream-2);border:1.5px solid var(--hi);box-shadow:0 0 0 4px rgba(193,155,94,.18)}
html.is-phone .pk-field svg{flex:none;width:18px;height:18px;color:var(--gold)}
html.is-phone .pk-in{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:inherit;font-family:var(--mono);font-weight:700;letter-spacing:.02em;color:var(--ink);padding:0;-webkit-appearance:none;appearance:none}
html.is-phone .pk-in::-webkit-search-cancel-button{display:none}
html.is-phone .pk-in::placeholder{font-family:var(--sans);font-weight:500;letter-spacing:0;color:var(--muted)}
html.is-phone .pk-clear{flex:none;width:34px;height:34px;border:0;border-radius:50%;background:rgba(91,74,51,.14);color:var(--ink-2);font-size:20px;line-height:1;display:grid;place-items:center;padding:0}
html.is-phone .pk-cancel{flex:none;height:48px;padding:0 4px;border:0;background:none;color:#E3B85C;font-size:16px;font-weight:700}
html.is-phone .pk-list.sku-menu{position:static;flex:1;min-height:0;width:auto!important;max-height:none!important;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  margin:0;border:0;border-radius:0;box-shadow:none;background:var(--cream-2);padding-bottom:env(safe-area-inset-bottom)}
html.is-phone .pk-list .sku-empty{padding:28px 20px;text-align:center;font-size:15px}
html.is-phone .pk-hint{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 24px;text-align:center;color:var(--ink-2)}
html.is-phone .pk-hint b{font-family:var(--serif);font-weight:400;font-size:22px;color:var(--ink)}
html.is-phone .pk-hint span{font-size:14px;line-height:1.45;max-width:300px}
html.is-phone .pk-custom{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 22px;border:1.5px dashed var(--gold);border-radius:14px;background:#fff;color:var(--gold);font-size:16px;font-weight:700}
html.is-phone .pk-custom small{font-size:11.5px;font-weight:500;color:var(--muted)}
html.is-phone .sku-menu{border-radius:16px;border-color:rgba(193,155,94,.6);box-shadow:0 22px 60px rgba(0,0,0,.5);overscroll-behavior:contain}
html.is-phone .sku-menu .sku-cat{padding:8px 14px;font-size:10px}
html.is-phone .sku-menu .opt{grid-template-columns:54px minmax(0,1fr) auto;grid-template-areas:"img s u" "img d d" "lk lk lk";gap:3px 12px;align-items:start;padding:13px 14px}
html.is-phone .sku-menu .opt .fitcell{grid-area:img;padding:0;justify-content:center;align-self:center}
html.is-phone .sku-menu .opt .pkfit{width:52px;height:52px}
html.is-phone .sku-menu .opt .pkfit.pkmld{width:54px;height:50px}
html.is-phone .sku-menu .opt .s{grid-area:s;font-size:15.5px}
html.is-phone .sku-menu .opt .d{grid-area:d;font-size:13.5px;line-height:1.3}
html.is-phone .sku-menu .opt .u{grid-area:u;align-self:center}
html.is-phone .sku-menu .opt .lk{grid-area:lk;align-items:flex-start;margin-top:9px}
html.is-phone .sku-menu .opt .lk:empty{display:none}
html.is-phone .sku-menu .opt .lk .lwrap{flex-wrap:wrap;gap:8px}
html.is-phone .sku-menu .opt .lk .lgrid{align-items:flex-start}
html.is-phone .sku-menu .opt .lk .lrow{column-gap:7px}
html.is-phone .sku-menu .opt .lk .lc{min-width:52px;min-height:42px;font-size:14.5px;border-radius:10px}
html.is-phone .sku-menu .opt .lk .lc.smp{width:60px;min-width:60px;font-size:11px}
html.is-phone .sku-menu .opt .lk .lc:not(.smp)+.lc.smp{margin-left:0}
html.is-phone .sku-menu .opt .lk .cap{text-align:left;margin-top:3px}
@media (orientation:landscape){
  html.is-phone .sku-menu .opt{grid-template-columns:54px minmax(0,150px) minmax(0,1fr) auto;grid-template-areas:"img s d u" "img lk lk lk"}
}

/* ---------- the custom dropdowns become bottom sheets ---------- */
html.is-phone .dd-menu{top:auto!important;bottom:0!important;left:0!important;right:0!important;min-width:0!important;width:auto;max-height:min(66dvh,560px)!important;
  padding:10px 10px calc(12px + env(safe-area-inset-bottom));border:0;border-radius:20px 20px 0 0;background:var(--cream-2);
  box-shadow:0 0 0 100vmax rgba(10,8,6,.5),0 -10px 40px rgba(0,0,0,.35);animation:sheetUp .22s cubic-bezier(.2,.7,.2,1)}
html.is-phone .dd-menu::before{content:"";display:block;width:40px;height:5px;margin:0 auto 10px;border-radius:3px;background:rgba(91,74,51,.25)}
html.is-phone .dd-opt{min-height:50px;padding:12px 14px;font-size:16px;border-radius:11px}
html.is-phone .dd-opt.sel{background:#F0E2C2}
html.is-phone .dd-sw{width:24px;height:24px;border-radius:7px}
@keyframes sheetUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (orientation:landscape){
  html.is-phone .dd-menu{left:max(10vw,env(safe-area-inset-left))!important;right:max(10vw,env(safe-area-inset-right))!important;max-height:78dvh!important}
  html.is-phone .dd-menu:has(.dd-sw){display:grid;grid-template-columns:1fr 1fr;align-content:start;column-gap:6px}
  html.is-phone .dd-menu:has(.dd-sw)::before{grid-column:1/-1}
  html.is-phone .dd-opt{min-height:44px}
}

/* ---------- modals become sheets too ---------- */
html.is-phone .qmodal{align-items:flex-end;justify-content:stretch;background:rgba(14,11,8,.6)}
html.is-phone .qmodal-card,html.is-phone .qmodal-card.wide,html.is-phone .qmodal-card.wide.sp-card{width:100%;max-width:none;margin:0;border:0;border-radius:22px 22px 0 0;max-height:92dvh;overflow:auto;
  padding:22px 18px calc(18px + env(safe-area-inset-bottom));animation:sheetUp .24s cubic-bezier(.2,.7,.2,1)}
html.is-phone .qmodal-card h4,html.is-phone .qmodal-card h3{font-size:19px;font-family:var(--serif);font-weight:400}
html.is-phone .qmodal-card p{font-size:15px}
html.is-phone .qmodal-btns{flex-direction:column-reverse;gap:10px}
html.is-phone .qmodal-btns button,html.is-phone .qmodal-btns .btn-primary.sm{width:100%;margin:0;justify-content:center;padding:15px;font-size:15px;border-radius:12px}
html.is-phone .stamp-btn{font-size:12px;white-space:normal}
html.is-phone .sp-row{grid-template-columns:52px 1fr;gap:8px;padding:10px 0}
html.is-phone .sp-tiles{gap:6px}
html.is-phone .sp-tile{width:calc((100% - 18px)/4);height:56px;border-radius:10px}
html.is-phone .sp-tile b{font-size:16px}
html.is-phone .sp-tile span{font-size:8px}
@media (orientation:landscape){
  html.is-phone .qmodal{align-items:center;justify-content:center}
  html.is-phone .qmodal-card,html.is-phone .qmodal-card.wide,html.is-phone .qmodal-card.wide.sp-card{width:min(640px,calc(100% - 40px));border-radius:20px;max-height:calc(100dvh - 24px);padding-bottom:18px}
  html.is-phone .qmodal-btns{flex-direction:row;justify-content:flex-end}
  html.is-phone .qmodal-btns button,html.is-phone .qmodal-btns .btn-primary.sm{width:auto;padding:12px 20px}
  html.is-phone .sp-tile{width:calc((100% - 42px)/8)}
}

/* ---------- products (read-only): each row is a card ---------- */
html.is-phone .pr-top{flex-wrap:wrap;gap:10px}
html.is-phone .pr-find{flex:1 1 100%;width:auto;min-width:0;padding:13px 14px;border-radius:12px}
html.is-phone .pr-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(-1 * max(14px,env(safe-area-inset-left)));padding:2px max(14px,env(safe-area-inset-left)) 4px}
html.is-phone .pr-tabs::-webkit-scrollbar{display:none}
html.is-phone .pr-tabs button{flex:none;padding:10px 14px;font-size:14px;border-radius:10px}
html.is-phone .pr-ro .pr-card.pr-main{background:transparent;border:0;box-shadow:none;overflow:visible;max-height:none}
html.is-phone .pr-ro .pr-tb,html.is-phone .pr-ro .pr-tb tbody{display:block;width:100%}
html.is-phone .pr-ro .pr-tb thead,html.is-phone .pr-ro .pr-tb colgroup{display:none}
html.is-phone .pr-ro .pr-tb tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-bottom:10px;padding:14px 16px;background:var(--cream-2);border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.22)}
html.is-phone .pr-ro .pr-tb tbody tr:hover td{background:none}
html.is-phone .pr-ro .pr-tb td{display:block;padding:0;border:0;font-size:14px}
html.is-phone .pr-ro .pr-tb td.pr-sku{flex:1 1 auto;font-size:15.5px;font-weight:700}
html.is-phone .pr-ro .pr-tb td.pr-desc{order:3;flex:1 1 100%;font-size:14px;line-height:1.35;color:var(--ink)}
html.is-phone .pr-ro .pr-tb td.pr-size{order:4;flex:1 1 100%;white-space:normal;font-size:12.5px}
html.is-phone .pr-ro .pr-tb td.pr-size:empty{display:none}
html.is-phone .pr-ro .pr-tb td[data-l]{order:5;font-family:var(--mono);font-weight:700;font-size:13px;color:var(--ink)}
html.is-phone .pr-ro .pr-tb td[data-l]::before{content:attr(data-l);margin-right:5px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
html.is-phone .pr-ro .pr-tb td[data-l]:empty{display:none}
html.is-phone .pr-ro .pr-tb td.pr-tx{order:2}
html.is-phone .pr-ro .pr-tb tr.pr-none{display:block}
html.is-phone .pr-ro .pr-tb tr.pr-none td{text-align:center}
html.is-phone .cw-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
html.is-phone .pr-colors{padding:16px}
@media (orientation:landscape){
  html.is-phone .pr-ro .pr-tb tbody{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  html.is-phone .pr-ro .pr-tb tr{margin:0}
  html.is-phone .pr-find{flex:1 1 300px}
}

/* ---------- admin ---------- */
html.is-phone .pr-wrap>*,html.is-phone .cu-page>*,html.is-phone .set-cards>*,html.is-phone .ana>*,html.is-phone .ana-host>*{min-width:0}
html.is-phone .adm-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:8px;margin:0 calc(-1 * max(14px,env(safe-area-inset-left))) 16px;padding:2px max(14px,env(safe-area-inset-left)) 14px}
html.is-phone .adm-tabs::-webkit-scrollbar{display:none}
html.is-phone .adm-tabs button{flex:none;padding:10px 16px;font-size:14px;border-radius:10px}
/* products editor: the price book scrolls sideways with the SKU column pinned */
html.is-phone .pr-top .pr-actions{flex-direction:row;margin-left:0}
html.is-phone #pr-export{padding:11px 16px}
html.is-phone .pr-card.pr-main{overflow:auto;max-height:calc(100dvh - 210px);overscroll-behavior:contain;border-radius:14px}
html.is-phone .pr-ro .pr-card.pr-main{max-height:none}
html.is-phone .pr-tb{width:max-content;min-width:100%}
html.is-phone .pr-tb thead th{top:0}
html.is-phone .pr-wrap:not(.pr-ro) .pr-tb td.pr-sku,html.is-phone .pr-wrap:not(.pr-ro) .pr-tb th.w-sku{position:sticky;left:0;z-index:2;background:#FAF3E2;box-shadow:1px 0 0 var(--line)}
html.is-phone .pr-wrap:not(.pr-ro) .pr-tb th.w-sku{z-index:4;background:linear-gradient(180deg,var(--navy),var(--navy-2))}
html.is-phone .pr-tb .w-sku{width:150px}
html.is-phone .pr-tb th:nth-child(2):not(.w-sku),html.is-phone .pr-tb th:nth-child(3):not(.w-sku){min-width:0}
html.is-phone .pr-tb col,html.is-phone .pr-tb th{white-space:nowrap}
html.is-phone .pr-wrap:not(.pr-ro) .pr-tb td.pr-desc,html.is-phone .pr-wrap:not(.pr-ro) .pr-tb th:not([class]){min-width:220px}
html.is-phone .shp-card{padding:16px;overflow-x:auto}
/* customers */
html.is-phone .cu-top{gap:8px}
html.is-phone .cu-terr{flex:1 1 0;width:auto;border-radius:12px;padding:12px 30px 12px 12px}
html.is-phone .cu-find{flex:1 1 100%;order:-1;border-radius:12px;padding:13px 14px}
html.is-phone .cu-page .cu-add{margin-left:0}
html.is-phone .cu-card{border-radius:14px;max-height:calc(100dvh - 230px);overscroll-behavior:contain}
html.is-phone .cu-tb{width:max-content;min-width:100%}
html.is-phone .cu-tb td{white-space:nowrap}
html.is-phone .cu-tb td.cu-name,html.is-phone .cu-tb thead th:nth-child(2){position:sticky;left:0;z-index:1;background:var(--cream-2);box-shadow:1px 0 0 var(--line)}
html.is-phone .cu-tb thead th:nth-child(2){z-index:3;background:linear-gradient(180deg,var(--navy),var(--navy-2))}
html.is-phone .dropzone{padding:20px 14px}
html.is-phone .dz-title{font-size:17px}
html.is-phone .cu-stats{gap:16px}
html.is-phone .ct-row{grid-template-columns:1fr auto;row-gap:2px}
html.is-phone .ct-row .ct-btns{grid-row:1/3;align-self:center}
/* settings */
html.is-phone .set-cards,html.is-phone .set-row{gap:14px}
html.is-phone .set-row{grid-template-columns:1fr!important}
html.is-phone .set-card{padding:16px;border-radius:14px;overflow-x:auto}
html.is-phone .set-field{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
html.is-phone .set-field.wide{grid-template-columns:1fr}
html.is-phone .set-field.wide>input:not(.sf-note-edit),html.is-phone .g-shingles .set-field.wide>input:not(.sf-note-edit){width:100%}
html.is-phone .g-multipliers .set-body,html.is-phone .g-shingles .set-body{grid-template-columns:1fr}
html.is-phone .g-multipliers .set-field,html.is-phone .g-multipliers .set-field:nth-child(even){border-left:0;padding:0}
html.is-phone .vt-head,html.is-phone .vt-row{grid-template-columns:1.2fr 1fr .8fr;gap:10px}
html.is-phone .sr-head,html.is-phone .sr-row{gap:8px;padding:7px 10px}
html.is-phone .tm-cols{grid-template-columns:1fr}
html.is-phone .tm-pill{width:calc((100% - 20px)/5)}
html.is-phone .cw-tune{position:fixed;left:12px;right:12px;top:auto;bottom:calc(14px + env(safe-area-inset-bottom));transform:none;width:auto;max-width:none;z-index:90;padding:16px;border-radius:16px}
html.is-phone .savebar{z-index:12;border-radius:14px;padding:10px 12px;gap:10px}
html.is-phone .savebar .btn-ghost,html.is-phone .savebar .btn-primary.sm{padding:11px 14px;border-radius:10px}
/* users, roles, activity log */
html.is-phone .au-list .qhead,html.is-phone .al-list .qhead,html.is-phone .ar-list .qhead{display:none}
html.is-phone .au-row,html.is-phone .au-list .au-row:nth-of-type(odd){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who act" "role when";gap:8px 12px;padding:14px 16px;border-radius:0}
html.is-phone .au-row>:nth-child(1){grid-area:who}
html.is-phone .au-row .au-role{max-width:none}
html.is-phone .au-row>:nth-child(2){grid-area:role}
html.is-phone .au-row>:nth-child(3){grid-area:act;align-self:start}
html.is-phone .au-row>:nth-child(4){grid-area:when;display:block!important;align-self:center;justify-self:end}
html.is-phone .au-row>:nth-child(5){display:none!important}
html.is-phone .ar-list .qhead{display:grid;font-size:8.5px;padding:10px 12px}
html.is-phone .ar-list .qhead,html.is-phone .ar-row{grid-template-columns:1.6fr repeat(3,1fr);padding-left:12px;padding-right:12px}
html.is-phone .ar-sec{font-size:13px}
html.is-phone .ar-chk{width:30px;height:30px}
html.is-phone .ar-chk.on::after{left:10px;top:4px}
html.is-phone .al-row,html.is-phone .al-list .al-row:nth-of-type(odd){grid-template-columns:auto 1fr auto;grid-template-areas:"fam who when" "q q q" "what what what";gap:6px 10px;padding:13px 14px}
html.is-phone .al-when{grid-area:when;font-size:11px}
html.is-phone .al-who{grid-area:who}
html.is-phone .al-fam{grid-area:fam}
html.is-phone .al-q{grid-area:q;flex-direction:row;align-items:center;gap:6px}
html.is-phone .al-cust{padding-left:0}
html.is-phone .al-what{grid-area:what}
html.is-phone .al-more{padding:15px}
html.is-phone .qlist.al-list,html.is-phone .qlist.au-list,html.is-phone .qlist.ar-list{border:1px solid var(--line);border-radius:14px;overflow:hidden;gap:0;display:flex}

/* ---------- analytics ---------- */
html.is-phone .ana{gap:14px}
html.is-phone .ana-ctl{gap:8px}
html.is-phone .ana-ctl .ana-tabs{margin:0;padding:2px 0 4px;flex:1 1 100%;display:flex;overflow-x:auto;scrollbar-width:none}
html.is-phone .ana-card{overflow-x:auto;-webkit-overflow-scrolling:touch}
html.is-phone .ana-card .ana-tb td,html.is-phone .ana-card .ana-tb th{white-space:nowrap}
html.is-phone .ana-ctl .ana-tabs button{flex:1 0 auto}
html.is-phone .ana-period{padding:12px 34px 12px 13px;border-radius:12px}
html.is-phone .ana-card{padding:16px;border-radius:14px}
html.is-phone .ana-card .v{font-size:34px}
html.is-phone .ana-h{font-size:19px}
html.is-phone .ana-funnel{gap:10px}
html.is-phone .ana-arrow{min-width:0;padding:6px 0}
html.is-phone .ana-bar,html.is-phone .ana-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:11px 0}
html.is-phone .ana-bar .l,html.is-phone .ana-row .l{grid-row:1;grid-column:1}
html.is-phone .ana-bar>b,html.is-phone .ana-row>b{grid-row:1;grid-column:2}
html.is-phone .ana-bar .t,html.is-phone .ana-row .t{grid-row:2;grid-column:1/-1}
html.is-phone .ana-bar .r,html.is-phone .ana-row .r{grid-row:3;grid-column:1/-1;text-align:left}
html.is-phone .ana-row.d1{padding-left:14px}html.is-phone .ana-row.d2{padding-left:28px}
html.is-phone .ana-grid3{gap:14px}
html.is-phone .ana-tb{font-size:13.5px}
@media (orientation:landscape){
  html.is-phone .ana-grid3{grid-template-columns:1fr 1fr}
  html.is-phone .ana-funnel{grid-template-columns:1fr auto 1fr}
  html.is-phone .ana-arrow{flex-direction:column}
}