/* styles.css */
/* ============================================================
   THE LIGHT GUYS — "Midnight Workshop" design system
   ============================================================ */
:root{
  --ink:#0a1020;
  --panel:#101a30;
  --panel-2:#0d1526;
  --panel-3:#0f1828;
  --gold:#f3d28a;
  --gold-soft:#ffe9bd;
  --glow:#ffcf76;
  --star:#bcd0ff;
  --paper:#f4efe4;
  --muted:#9fb0c8;
  --muted-2:#6f819b;
  --line:rgba(190,205,235,.14);
  --line-2:rgba(190,205,235,.22);
  --ok:#9dffb0;
  --r:18px;
  --r-sm:12px;
  --maxw:1240px;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"Space Mono",monospace;

  /* Light Ops surfaces (2026-09 redesign, handoff 4). Brand palette above stays the source. */
  --lo-app:#0a1020;          /* app background (--ink) */
  --lo-bar:#080d1a;          /* sidebar, top bar, phone bars */
  --lo-panel:#0f1829;        /* panels and cards */
  --lo-pop:#14213b;          /* popovers, dropdowns, menus */
  --lo-input:#0c1527;        /* input background */
  --lo-bubble:#16233f;       /* customer message bubble */
  --lo-backdrop:#060b16;     /* page outside the app */
  --lo-label:#c9d2df;        /* form labels */
  --lo-nav:#d6dbe4;          /* sidebar item text */
  --lo-on-gold:#2a1d05;      /* text on gold */
  --lo-line:rgba(190,205,235,.1);        /* panel borders, section dividers */
  --lo-line-row:rgba(190,205,235,.07);   /* row dividers inside panels */
  --lo-line-input:rgba(190,205,235,.16); /* input borders */
  --lo-line-ghost:rgba(190,205,235,.22); /* ghost buttons, popover borders */
  --lo-hover:rgba(190,205,235,.06);
  --lo-gold-tint:rgba(243,210,138,.12);  /* pill background */
  --lo-gold-row:rgba(243,210,138,.08);   /* selected or active row */
  --lo-gold-line:rgba(243,210,138,.34);  /* accent border */

  /* Status colors, palette 3a "Apple, tuned for navy" (handoff 6). Gold is brand only, never a status.
     Orange is the only color that asks the owner to act. */
  --status-action-text:#FFB340; --status-action-tint:rgba(255,159,10,.18); --status-action-solid:#FF9F0A;
  --status-wait-text:#6CB4FF;   --status-wait-tint:rgba(10,132,255,.18);  --status-wait-solid:#0A84FF;
  --status-ok-text:#4CE07A;     --status-ok-tint:rgba(48,209,88,.18);     --status-ok-solid:#30D158;
  --status-done-text:#C7C7CC;   --status-done-tint:rgba(142,142,147,.18); --status-done-solid:#8E8E93;
  --status-bad-text:#FF7A70;    --status-bad-tint:rgba(255,69,58,.18);    --status-bad-solid:#FF453A;
  --badge-bg:var(--status-action-solid); --badge-text:#000;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--ink);color:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);opacity:.85}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:-.01em}
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono)}

/* ---- placeholders + real-photo swap ----
   Drop a real photo by adding  <img src="assets/photos/NAME.jpg" alt="...">
   inside any .ph element. While the file is missing it hides itself and the
   striped placeholder shows through. See assets/PHOTOS.md for the manifest. */
.ph{position:relative;background:
    repeating-linear-gradient(45deg,rgba(190,205,235,.05) 0 12px,rgba(190,205,235,.02) 12px 24px),var(--panel-2);
  border:1px solid var(--line);overflow:hidden;border-radius:var(--r)}
.ph::after{content:attr(data-label);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);text-align:center;
  padding:6px 10px;border:1px dashed var(--line);border-radius:6px;background:rgba(10,16,32,.5);white-space:nowrap;z-index:1}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;
  z-index:2;opacity:0;transition:opacity .6s ease}
.ph img.loaded{opacity:1}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-weight:600;font-size:15px;
  padding:14px 24px;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:.25s;text-align:center;white-space:nowrap;line-height:1}
.btn-gold{background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#2a1d05;
  box-shadow:0 0 0 1px rgba(255,233,189,.4),0 14px 40px -14px rgba(255,207,118,.7)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,233,189,.6),0 20px 50px -14px rgba(255,207,118,.9)}
.btn-ghost{border-color:var(--line);color:var(--paper);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-soft)}
.btn-block{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ---- nav ---- */
header.site{position:sticky;top:0;z-index:60;backdrop-filter:blur(12px);
  background:linear-gradient(180deg,rgba(10,16,32,.94),rgba(10,16,32,.62));border-bottom:1px solid var(--line)}
nav.site{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:23px;letter-spacing:.01em}
.brand .logo{height:70px;width:auto;display:block;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
.brand .bulb{width:13px;height:13px;border-radius:50%;background:var(--glow);box-shadow:0 0 14px 3px var(--glow);flex:0 0 auto}
.brand b{font-weight:600}
footer.site .brand .logo{height:74px}
.navlinks{display:flex;gap:30px;font-size:15px;font-weight:500}
.navlinks a{color:var(--muted);transition:.2s;position:relative;white-space:nowrap}
.navlinks a:hover{color:var(--gold-soft)}
.navlinks a.active{color:var(--gold-soft)}
.navlinks a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--gold);border-radius:2px}
.navright{display:flex;align-items:center;gap:18px}
.phone{font-family:var(--mono);font-size:13px;color:var(--paper)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;width:42px;height:42px;cursor:pointer;color:var(--paper);font-size:18px}
.mobnav{display:none}
/* seven nav links: tighten spacing on small laptops so the phone number stays on one line */
@media(max-width:1180px){.navlinks{gap:16px;font-size:14px}.navright{gap:14px}}
@media(max-width:1040px){
  .navlinks{display:none}.phone{display:none}
  .burger{display:grid;place-items:center}
  .mobnav{position:fixed;inset:84px 0 auto 0;background:rgba(8,12,24,.98);border-bottom:1px solid var(--line);
    display:none;flex-direction:column;padding:18px 32px 28px;z-index:55}
  .mobnav.open{display:flex}
  .mobnav a{padding:14px 0;font-size:18px;border-bottom:1px solid var(--line);color:var(--paper)}
  .mobnav .btn{margin-top:18px}
  .mobnav a.btn-gold{color:#2a1d05}
}

/* ---- mobile action bar (sticky call / quote) ---- */
a,button{-webkit-tap-highlight-color:rgba(255,207,118,.18)}
.mbar{display:none}
@media(max-width:720px){
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:90;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(8,12,24,.93);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:14px;font-weight:600;white-space:nowrap}
  .mbar .call{border:1px solid var(--line-2);color:var(--paper);background:rgba(255,255,255,.05);font-family:var(--mono);font-size:14px}
  .mbar .quote{background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#2a1d05;font-size:15px;box-shadow:0 0 0 1px rgba(255,233,189,.4)}
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
}

/* ---- footer ---- */
footer.site{background:#05080f;border-top:1px solid var(--line);padding:64px 0 40px;margin-top:0}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
footer.site h4{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
footer.site ul{list-style:none}
footer.site li{margin:9px 0;color:var(--muted);font-size:14.5px}
footer.site a{color:var(--muted);font-size:14.5px}
footer.site a:hover{color:var(--gold-soft)}
.fblurb{color:var(--muted);font-size:14.5px;max-width:34ch;margin-top:14px}
.fbottom{display:flex;justify-content:space-between;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  color:var(--muted-2);font-family:var(--mono);font-size:11.5px;flex-wrap:wrap;gap:10px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}

/* ---- generic sections ---- */
section{padding:104px 0}
.sec-head{max-width:640px}
.sec-head.center{margin:0 auto;text-align:center}
.sec-head h2{font-size:clamp(32px,4.4vw,56px);margin-top:14px;line-height:1.06}
.sec-head p{color:var(--muted);margin-top:16px;font-size:17px}

/* ---- trust strip ---- */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel-2)}
.trust .wrap{display:flex;gap:40px;align-items:center;justify-content:center;padding:20px 32px;flex-wrap:wrap}
.trust span{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--muted)}
.trust b{color:var(--gold-soft);font-family:var(--sans);font-weight:700}

/* ---- cards ---- */
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  border-radius:var(--r);padding:30px 28px 32px;position:relative;overflow:hidden;transition:.3s}
.card:hover{transform:translateY(-4px);border-color:rgba(243,210,138,.4)}
.card .num{font-family:var(--mono);font-size:12px;color:var(--gold);letter-spacing:.15em}
.card h3{font-size:28px;margin:18px 0 10px}
.card p{color:var(--muted);font-size:15.5px}
.card .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:8px;
  background:radial-gradient(circle at 50% 30%,rgba(255,207,118,.3),transparent 70%);border:1px solid var(--line);font-size:22px}

/* ---- page hero (inner pages) ---- */
.phero{position:relative;padding:118px 0 64px;
  background:radial-gradient(120% 140% at 70% -30%,#1b2a4d 0%,#0c1426 48%,#070b16 100%);overflow:hidden}
.phero .stars{position:absolute;inset:0;pointer-events:none}
.phero .wrap{position:relative;z-index:3}
.phero h1{font-size:clamp(40px,6vw,76px);max-width:18ch;margin-top:16px;line-height:1.08;padding-bottom:.34em}
.phero h1 em{font-style:italic;color:var(--gold-soft)}
.phero p.sub{font-size:clamp(16px,1.4vw,19px);color:var(--muted);max-width:54ch;margin-top:18px}
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.crumb a:hover{color:var(--gold)}

/* ---- snowfall (heroes on all pages) ---- */
.snow{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.snow i{position:absolute;top:-24px;width:3px;height:3px;border-radius:50%;background:rgba(244,249,255,.82);
  box-shadow:0 0 12px rgba(188,208,255,.45);animation:snowfall linear infinite}
@keyframes snowfall{0%{transform:translate3d(0,-8vh,0);opacity:0}12%{opacity:.7}88%{opacity:.52}100%{transform:translate3d(var(--drift),108vh,0);opacity:0}}
.phero .snow{z-index:2}

/* ---- photo-background inner hero ---- */
.phero.has-bg{background:#070b16}
.phero-bg{position:absolute;inset:0;z-index:0;background-position:center;background-size:cover;background-repeat:no-repeat}
.phero.has-bg::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(0deg,rgba(7,11,22,.96) 0%,rgba(7,11,22,.5) 55%,rgba(7,11,22,.62) 100%),
  linear-gradient(90deg,rgba(7,11,22,.9) 0%,rgba(7,11,22,.4) 60%,rgba(7,11,22,.2) 100%)}
.phero.has-bg .stars,.phero.has-bg .snow,.phero.has-bg .fireflies{z-index:2}

.star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.6}
@keyframes tw{0%,100%{opacity:.25}50%{opacity:.9}}
@keyframes glow{0%,100%{opacity:.55;box-shadow:0 0 6px 1px currentColor}50%{opacity:1;box-shadow:0 0 16px 5px currentColor}}

@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* ops/shell.css */
/* ============================================================
   Light Ops app shell (handoff 4 redesign, status palette 3a)
   ------------------------------------------------------------
   Collapsible sidebar, top bar with breadcrumb, search and the
   notification tray; on phones the top bar, bottom tab bar, the
   More sheet and full-screen search and notifications.

   Loaded after assets/styles.css (tokens) and before ops.css.
   Every selector is scoped to .ops-app. Phones are <= 760px.
   ============================================================ */

.ops-app{
  /* Older stylesheets still read these. */
  --ops-sidebar-bg:var(--lo-bar);
  --ops-hover:var(--lo-hover);
  --ops-focus-ring:rgba(243,210,138,.22);
  --ops-accent:var(--gold);
  --ops-accent-soft:var(--lo-gold-tint);
  --ops-on-accent:var(--lo-on-gold);
  --ops-surface:var(--lo-panel);
  --ops-backdrop:rgba(3,6,14,.55);
  --ops-ease:cubic-bezier(.2,.8,.2,1);
  --ops-sidebar-w:240px;
  --ops-sidebar-rail-w:68px;
  --ops-mobile-nav-h:66px;
}

/* An action on its way (speed plan phase 2): its button answers at once and waits quietly for the server. */
.ops-app .is-busy{opacity:.55;pointer-events:none;cursor:progress;transition:opacity .08s}
.ops-app form[aria-busy="true"]{cursor:progress}

/* Share-sheet buttons show only on devices that have one (shell.js adds html.ops-can-share). */
html:not(.ops-can-share) .ops-app [data-share]{display:none!important}

/* ---------------- page frame ---------------- */
/* An app, not a page: text keeps its size when a phone turns sideways, and only the content scrolls
   (the frame itself never rubber-bands). */
html:has(> body.ops-app){-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior:none}
body.ops-app{
  /* The site's pastel accents, retuned to palette 3a inside Ops (green = ok, blue = waiting). */
  --ok:var(--status-ok-text);
  --star:var(--status-wait-text);
  overscroll-behavior:none;
  margin:0;
  padding:0; /* the public site's phone sticky-bar padding (styles.css) must not reach Ops */
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
  background:var(--lo-app);
  color:var(--paper);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
/* Slim 10px scrollbars (the prototype's); browsers without ::-webkit-scrollbar get the same colors. */
@supports not selector(::-webkit-scrollbar){
  body.ops-app{scrollbar-color:rgba(190,205,235,.14) transparent}
}
.ops-app ::-webkit-scrollbar{width:10px;height:10px}
.ops-app ::-webkit-scrollbar-thumb{background:rgba(190,205,235,.14);border-radius:10px}
.ops-app ::-webkit-scrollbar-track{background:transparent}
/* Phones scroll with overlay scrollbars, so no scrollbar takes layout width. */
@media (max-width:760px){
  body.ops-app,.ops-app *{scrollbar-width:none}
  .ops-app ::-webkit-scrollbar{width:0;height:0;display:none}
}
.ops-app .app{
  position:relative;
  display:flex;
  width:100%;
  height:100vh;
  height:100dvh;
  min-height:0;
  overflow:hidden;
  background:var(--lo-app);
}
/* The column right of the sidebar: the top bar, then the screen, which is the only thing that scrolls. */
.ops-app .main-col{
  position:relative;
  flex:1 1 0%;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  height:100vh;
  height:100dvh;
}
.ops-app .main{
  position:relative;
  flex:1 1 0%;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:auto;
}
.ops-app .content{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:28px 32px 48px;
  min-width:0;
}
.ops-app .grow{flex:1 1 0%;min-width:0}
.ops-app [hidden]{display:none!important}

/* Keyboard focus is gold everywhere in the shell. */
.ops-app :is(.sidebar,.topbar,.v3-mobile-topbar,.v3-mobile-nav,.v3-mobile-more-sheet,.search-overlay,.notification-tray) :is(a,button,input):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}
/* The field's own gold border is its focus state (ops.css gives other inputs a glow). */
.ops-app .search-box input:is(:focus,:focus-visible){outline:none;box-shadow:none}

/* ============================================================
   SIDEBAR
   ============================================================ */
.ops-app .sidebar{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  flex:0 0 240px;
  width:240px;
  height:100vh;
  height:100dvh;
  padding:16px 12px 12px;
  overflow-x:hidden;
  overflow-y:auto;
  border-right:1px solid var(--lo-line);
  background:var(--lo-bar);
  color:var(--paper);
  line-height:normal;
  scrollbar-width:thin;
  transition:width .2s var(--ops-ease),flex-basis .2s var(--ops-ease);
}
.ops-app .side-head{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  min-height:40px;
  margin-bottom:18px;
}
.ops-app .brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
  padding:0 2px;
  border-radius:9px;
  color:var(--paper);
  font:inherit;
  letter-spacing:0;
  text-decoration:none;
}
.ops-app .brand-mark{position:relative;display:block;flex:0 0 36px;width:36px;height:36px}
.ops-app .brand-mark img{
  position:absolute;
  inset:0;
  width:36px;
  height:36px;
  object-fit:contain;
  transition:opacity .15s ease,transform .15s ease;
}
.ops-app .brand-expand{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:rgba(190,205,235,.1);
  color:var(--paper);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
.ops-app .brand-copy{min-width:0;white-space:nowrap}
.ops-app .brand-copy strong{display:block;font:700 15px var(--sans);letter-spacing:-.01em}
.ops-app .brand-copy small{display:block;font-size:12px;color:var(--muted)}
.ops-app .side-collapse{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 32px;
  width:32px;
  height:32px;
  padding:0;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}
.ops-app .side-collapse:hover{background:rgba(190,205,235,.08);color:var(--paper)}

/* ---- navigation ---- */
.ops-app .nav{display:flex;flex-direction:column;gap:2px}
.ops-app .nav-item{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:11px;
  width:100%;
  height:38px;
  padding:0 10px;
  border-radius:8px;
  background:transparent;
  color:var(--lo-nav);
  font:500 14px var(--sans);
  text-align:left;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
}
.ops-app .nav-business .nav-item{color:var(--muted)}
.ops-app .nav-item:hover{background:var(--lo-hover)}
.ops-app .nav-item.active,
.ops-app .nav-item.active:hover{background:rgba(243,210,138,.1);color:var(--gold)}
/* The 3px gold bar on the sidebar's left edge. */
.ops-app .nav-item::before{
  content:"";
  position:absolute;
  left:-12px;
  top:9px;
  bottom:9px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:transparent;
}
.ops-app .nav-item.active::before{background:var(--gold)}
.ops-app .nav-ico{display:flex;flex:0 0 18px}
.ops-app .nav-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Every count is work waiting, so they all share one muted color. */
.ops-app .nav-count{font:11.5px var(--mono);color:var(--muted)}
.ops-app .nav-dot{
  position:absolute;
  top:7px;
  right:9px;
  display:none;
  width:7px;
  height:7px;
  border:1.5px solid var(--lo-bar);
  border-radius:50%;
  background:#C7C7CC;
}
.ops-app .nav-group{
  padding:22px 10px 8px;
  color:var(--muted-2);
  font:11px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.ops-app .side-spacer{flex:1;min-height:16px}

/* ---- footer: clock, season, account ---- */
.ops-app .side-clock{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  padding:0 4px 10px;
  white-space:nowrap;
}
.ops-app .side-clock [data-clock-date]{color:var(--paper);font:600 13px var(--sans)}
.ops-app .side-clock [data-clock-time]{color:var(--muted);font:600 13px var(--sans);font-variant-numeric:tabular-nums}
.ops-app .side-card{
  margin:0 0 10px;
  padding:12px 12px 11px;
  border:1px solid var(--lo-line);
  border-radius:10px;
  white-space:nowrap;
}
.ops-app .side-card-label{color:var(--muted);font-size:12px}
.ops-app .side-card-line{margin-top:6px;font:13px var(--mono)}
.ops-app .side-card-line + .side-card-line{margin-top:2px}
.ops-app .side-card-line span{color:var(--muted)}
.ops-app .side-user{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:100%;
  padding:6px 8px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--paper);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.ops-app .side-user:hover{background:var(--lo-hover)}
.ops-app .side-user-avatar{flex:0 0 32px;width:32px;height:32px;border-radius:50%;object-fit:cover}
.ops-app .side-user-initials{
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(243,210,138,.14);
  color:var(--gold);
  font:600 12px var(--sans);
}
.ops-app .side-user-copy{flex:1;min-width:0;white-space:nowrap}
.ops-app .side-user-copy strong{display:block;overflow:hidden;font-size:13.5px;font-weight:600;text-overflow:ellipsis}
.ops-app .side-user-copy small{display:block;color:var(--muted);font-size:12px}
.ops-app .side-user kbd{
  padding:2px 5px;
  border:1px solid rgba(190,205,235,.14);
  border-radius:5px;
  background:transparent;
  color:var(--muted-2);
  font:10.5px var(--mono);
}

/* ---- collapsed (68px): icons only, tooltips on hover ---- */
[data-sidebar="collapsed"] .ops-app .sidebar{flex-basis:68px;width:68px}
[data-sidebar="collapsed"] .ops-app .side-head{justify-content:center}
[data-sidebar="collapsed"] .ops-app .brand{flex:0 0 auto}
[data-sidebar="collapsed"] .ops-app .brand-copy,
[data-sidebar="collapsed"] .ops-app .side-collapse,
[data-sidebar="collapsed"] .ops-app .nav-label,
[data-sidebar="collapsed"] .ops-app .nav-count,
[data-sidebar="collapsed"] .ops-app .side-clock,
[data-sidebar="collapsed"] .ops-app .side-card,
[data-sidebar="collapsed"] .ops-app .side-user-copy,
[data-sidebar="collapsed"] .ops-app .side-user kbd{display:none}
[data-sidebar="collapsed"] .ops-app .nav-item{justify-content:center;padding:0}
[data-sidebar="collapsed"] .ops-app .nav-count:not([hidden]) + .nav-dot{display:block}
[data-sidebar="collapsed"] .ops-app .nav-group{height:1px;margin:16px 8px;padding:0;overflow:hidden;background:var(--lo-line);color:transparent;font-size:0}
[data-sidebar="collapsed"] .ops-app .side-user{justify-content:center;padding:6px 0}
/* Hovering or focusing the logo cross-fades it into the expand icon. */
[data-sidebar="collapsed"] .ops-app .brand:is(:hover,:focus-visible) .brand-mark img{opacity:0;transform:scale(.85)}
[data-sidebar="collapsed"] .ops-app .brand:is(:hover,:focus-visible) .brand-expand{opacity:1}

/* The tooltip shell.js places beside a collapsed item (paper on ink, 10px to the right). */
.ops-app .side-tip{
  position:fixed;
  z-index:400;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:7px;
  background:var(--paper);
  color:#0a1020;
  font:600 12.5px var(--sans);
  line-height:normal;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transform:translateY(-50%);
  pointer-events:none;
}
.ops-app .side-tip span{color:#5a6477;font:500 11px var(--mono)}

/* ============================================================
   TOP BAR
   ============================================================ */
/* No z-index on the bars: their panels (search, notifications) layer with the page on their own. */
.ops-app .topbar{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  flex:none;
  height:60px;
  padding:0 24px;
  border-bottom:1px solid var(--lo-line);
  background:var(--lo-app);
  color:var(--paper);
  line-height:normal;
}
.ops-app .topbar-title{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px}
.ops-app .topbar-crumb-parent{color:var(--muted);white-space:nowrap}
.ops-app .topbar-crumb-sep{color:var(--muted-2)}
.ops-app .topbar-title strong{overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap}

/* ---- search ---- */
.ops-app .search-wrap{position:relative;z-index:28;flex:0 1 360px;width:360px;max-width:44%}
.ops-app .search-box{
  display:flex;
  align-items:center;
  gap:9px;
  height:38px;
  padding:0 8px 0 12px;
  border:1px solid rgba(190,205,235,.14);
  border-radius:9px;
  background:var(--lo-input);
  color:var(--muted);
  cursor:text;
}
.ops-app .search-wrap.is-open .search-box{border-color:var(--gold)}
.ops-app .search-box svg{flex:none}
.ops-app .search-box input{
  flex:1;
  min-width:0;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  outline:none;
  background:transparent;
  color:var(--paper);
  font:14px var(--sans);
  -webkit-appearance:none;
  appearance:none;
}
.ops-app .search-box input::placeholder{color:var(--muted-2);opacity:1}
.ops-app .search-box input::-webkit-search-cancel-button,
.ops-app .search-box input::-webkit-search-decoration{display:none;-webkit-appearance:none}
.ops-app .search-box kbd{
  padding:2px 6px;
  border:1px solid rgba(190,205,235,.16);
  border-radius:5px;
  background:transparent;
  color:var(--muted);
  font:11px var(--mono);
}
.ops-app .search-panel{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  width:460px;
  max-width:calc(100vw - 32px);
  overflow:hidden;
  border:1px solid rgba(190,205,235,.2);
  border-radius:12px;
  background:var(--lo-pop);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  line-height:normal;
}
.ops-app .search-results{max-height:440px;overflow:auto;padding:4px 6px 8px}
.ops-app .search-group{padding:10px 10px 6px;color:var(--muted);font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ops-app .search-item{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:38px;
  padding:8px 10px;
  border-radius:8px;
  background:transparent;
  color:var(--paper);
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.ops-app .search-item.is-active{background:rgba(243,210,138,.1)}
.ops-app .search-ico{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:8px;
  background:rgba(190,205,235,.08);
  color:var(--muted);
}
.ops-app .search-item.is-active .search-ico{color:var(--gold)}
.ops-app .search-copy{flex:1;min-width:0}
.ops-app .search-copy strong{display:block;overflow:hidden;font:600 14px var(--sans);text-overflow:ellipsis;white-space:nowrap}
.ops-app .search-copy small{display:block;overflow:hidden;margin-top:1px;color:var(--muted);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
.ops-app .search-meta{color:var(--muted);font:12px var(--mono);white-space:nowrap}
@media (max-width:640px){.ops-app .search-overlay .search-meta{flex:0 1 34%;white-space:normal;text-align:right;font-size:11px;line-height:1.3}}
.ops-app .search-empty{margin:0;padding:22px 14px;color:var(--muted);font-size:13.5px;line-height:1.5;text-align:center}
.ops-app .search-foot{
  display:flex;
  gap:16px;
  padding:9px 14px;
  border-top:1px solid var(--lo-line);
  color:var(--muted);
  font:11.5px var(--mono);
}

/* ---- notifications ---- */
.ops-app .notification-anchor{position:relative;z-index:28;flex:none}
.ops-app .notif-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid rgba(190,205,235,.14);
  border-radius:9px;
  background:transparent;
  color:var(--paper);
  cursor:pointer;
}
.ops-app .notif-btn[aria-expanded="true"]{border-color:var(--gold);background:rgba(243,210,138,.08)}
/* Orange with black text (palette 3a), ringed in the bar color. */
.ops-app .notif-count{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border:2px solid var(--lo-app);
  border-radius:9px;
  background:var(--badge-bg);
  color:var(--badge-text);
  font:700 10px/13px var(--mono);
  text-align:center;
}
.ops-app .notification-tray{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  width:400px;
  max-width:calc(100vw - 32px);
  overflow:hidden;
  border:1px solid rgba(190,205,235,.2);
  border-radius:12px;
  background:var(--lo-pop);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  color:var(--paper);
  line-height:normal;
}
.ops-app .notification-close-row{display:none}
.ops-app .notification-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--lo-line);
}
.ops-app .notification-head strong{display:block;font:600 15px var(--sans)}
.ops-app .notification-head small{display:block;margin-top:2px;color:var(--muted);font:12px var(--mono)}
.ops-app .notification-mark{
  min-height:34px;
  padding:0 10px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--gold);
  font:600 13px var(--sans);
  cursor:pointer;
}
.ops-app .notification-mark:disabled{color:var(--muted-2);cursor:default}
.ops-app .notification-list{max-height:460px;overflow:auto}
.ops-app .notification-item{border-bottom:1px solid var(--lo-line-row)}
.ops-app .notification-item:has(> .notification-row:not(.read)){background:rgba(243,210,138,.035)}
.ops-app .notification-row{
  display:flex;
  gap:12px;
  width:100%;
  padding:13px 16px;
  color:var(--paper);
  text-align:left;
  text-decoration:none;
}
.ops-app .notification-row:hover{background:rgba(190,205,235,.05)}
.ops-app .notification-row .status-dot{margin-top:6px}
.ops-app .notification-row.read .status-dot{background:transparent}
.ops-app .notification-copy{flex:1;min-width:0}
.ops-app .notification-line{display:flex;justify-content:space-between;gap:10px}
.ops-app .notification-line strong{color:var(--paper);font:700 14px/1.35 var(--sans)}
.ops-app .notification-row.read .notification-line strong{color:var(--lo-label);font-weight:500}
.ops-app .notification-line time{color:var(--muted);font:11.5px var(--mono);white-space:nowrap}
.ops-app .notification-copy small{display:block;margin-top:3px;color:var(--muted);font-size:13px;line-height:1.45}
.ops-app .notification-cta{display:block;width:fit-content;margin-top:7px;color:var(--gold);font:600 13px var(--sans)}
/* The reminder's one-tap text link sits where a CTA would. */
.ops-app .notification-row:has(+ .notif-sms){padding-bottom:0}
.ops-app .notification-item .notif-sms{
  display:inline-block;
  gap:0;
  min-height:0;
  margin:7px 16px 13px 36px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  color:var(--gold)!important;
  font:600 13px var(--sans);
  text-decoration:none;
}
.ops-app .notification-item .notif-sms:hover{background:none;color:var(--gold-soft)!important}
.ops-app .notification-list .empty-state{padding:22px 14px;color:var(--muted);font-size:13.5px;text-align:center}

/* ============================================================
   PHONE (<= 760px): top bar, tab bar, More, full-screen search
   and notifications. Hidden on desktop.
   ============================================================ */
.ops-app .v3-mobile-topbar,
.ops-app .v3-mobile-nav{display:none}
@media (min-width:761px){
  .ops-app .v3-mobile-more-scrim,
  .ops-app .search-overlay{display:none!important}
}

@media (max-width:760px){
  .ops-app .sidebar,
  .ops-app .topbar{display:none}

  .ops-app .v3-mobile-topbar{
    position:relative;
    display:flex;
    align-items:center;
    gap:8px;
    flex:none;
    height:calc(56px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) max(6px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));
    border-bottom:1px solid var(--lo-line);
    background:var(--lo-bar);
    color:var(--paper);
    line-height:normal;
  }
  .ops-app .v3-mobile-home{display:flex;flex:none;padding:0;border:0;background:transparent}
  .ops-app .v3-mobile-logo{width:30px;height:30px;object-fit:contain}
  .ops-app .v3-mobile-page-context{flex:1;min-width:0;overflow:hidden;font:600 16px var(--sans);text-overflow:ellipsis;white-space:nowrap}
  .ops-app .v3-mobile-icon-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:44px;
    height:44px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--paper);
    cursor:pointer;
  }
  .ops-app .v3-mobile-topbar .notification-anchor{z-index:auto}
  .ops-app .v3-mobile-topbar .notif-btn,
  .ops-app .v3-mobile-topbar .notif-btn[aria-expanded="true"]{width:44px;height:44px;border:0;border-radius:0;background:transparent}
  .ops-app .v3-mobile-topbar .notif-count{top:-3px;right:-4px;border-color:var(--lo-bar)}

  /* Notifications: a full-screen sheet. */
  .ops-app .v3-mobile-topbar .notification-tray{
    position:fixed;
    inset:0;
    z-index:300;
    display:flex;
    flex-direction:column;
    width:auto;
    max-width:none;
    padding-top:env(safe-area-inset-top);
    border:0;
    border-radius:0;
    background:var(--lo-panel);
    box-shadow:none;
  }
  .ops-app .v3-mobile-topbar .notification-close-row{display:flex;justify-content:flex-end;flex:none;padding:4px 6px 0}
  .ops-app .notification-close{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
  }
  .ops-app .v3-mobile-topbar .notification-head{flex:none}
  .ops-app .v3-mobile-topbar .notification-list{flex:1;min-height:0;max-height:none;padding-bottom:env(safe-area-inset-bottom);overscroll-behavior:contain}
  .ops-app .v3-mobile-topbar .notification-mark{min-height:44px}

  /* Bottom tab bar: Home, Customers, Quotes, Invoices, More. */
  .ops-app .v3-mobile-nav{
    position:fixed;
    right:0;
    bottom:0;
    left:0;
    z-index:50;
    display:flex;
    padding:4px max(4px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));
    border-top:1px solid var(--lo-line);
    background:var(--lo-bar);
    line-height:normal;
  }
  .ops-app .v3-mobile-nav-item{
    position:relative;
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:0;
    min-height:54px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--muted);
    font:500 11.5px var(--sans);
    text-decoration:none;
    cursor:pointer;
  }
  .ops-app .v3-mobile-nav-item.active{color:var(--gold)}
  body.ops-app.more-open .v3-mobile-nav-item:not([data-more]){color:var(--muted)}
  .ops-app .v3-mobile-nav-icon{display:flex}

  /* More: a bottom sheet with a grabber. */
  .ops-app .v3-mobile-more-scrim{
    position:fixed;
    inset:0;
    z-index:250;
    display:flex;
    align-items:flex-end;
    background:rgba(3,6,14,.66);
  }
  .ops-app .v3-mobile-more-sheet{
    width:100%;
    max-height:92dvh;
    overflow-y:auto;
    padding:10px max(12px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    border-top:1px solid rgba(190,205,235,.16);
    border-radius:20px 20px 0 0;
    background:var(--lo-panel);
    color:var(--paper);
    line-height:normal;
    overscroll-behavior:contain;
  }
  .ops-app .v3-mobile-more-grab{width:40px;height:5px;margin:0 auto 14px;border-radius:5px;background:rgba(190,205,235,.28)}
  .ops-app .v3-mobile-more-head{display:flex;justify-content:space-between;align-items:center;padding:0 6px 8px}
  .ops-app .v3-mobile-more-head h2{margin:0;font:400 28px var(--serif);letter-spacing:0;line-height:normal}
  .ops-app .v3-mobile-more-close{
    width:44px;
    height:44px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--muted);
    font:22px var(--sans);
    cursor:pointer;
  }
  .ops-app .v3-mobile-more-list{display:flex;flex-direction:column}
  .ops-app .v3-mobile-more-item{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    min-height:56px;
    padding:8px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--paper);
    font:inherit;
    text-align:left;
    text-decoration:none;
    cursor:pointer;
  }
  .ops-app .v3-mobile-more-item:hover{background:rgba(190,205,235,.05)}
  .ops-app .v3-mobile-more-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 38px;
    width:38px;
    height:38px;
    border-radius:10px;
    background:rgba(190,205,235,.07);
  }
  .ops-app .v3-mobile-more-copy{flex:1;min-width:0}
  .ops-app .v3-mobile-more-copy strong{display:block;font:600 15px var(--sans)}
  .ops-app .v3-mobile-more-copy small{display:block;margin-top:2px;color:var(--muted);font-size:12.5px}
  .ops-app .v3-mobile-more-count{color:var(--muted);font:500 12px var(--mono)}
  .ops-app .v3-mobile-more-arrow{color:var(--muted-2);font-size:18px}

  /* Search: a full-screen overlay with an always-gold field and Cancel. */
  .ops-app .search-overlay{
    position:fixed;
    inset:0;
    z-index:300;
    display:flex;
    flex-direction:column;
    padding-top:env(safe-area-inset-top);
    background:var(--lo-app);
    color:var(--paper);
    line-height:normal;
  }
  .ops-app .search-overlay-head{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px max(10px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));
    border-bottom:1px solid var(--lo-line);
  }
  .ops-app .search-overlay .search-box{flex:1;height:44px;padding:0 12px;border-color:var(--gold);border-radius:10px}
  .ops-app .search-overlay .search-box input{font-size:16px}
  .ops-app .search-cancel{
    min-height:44px;
    padding:0 8px;
    border:0;
    background:transparent;
    color:var(--gold);
    font:600 15px var(--sans);
    cursor:pointer;
  }
  .ops-app .search-overlay .search-panel{
    position:static;
    flex:1;
    min-height:0;
    width:auto;
    max-width:none;
    overflow:auto;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overscroll-behavior:contain;
  }
  .ops-app .search-overlay .search-results{max-height:none;overflow:visible;padding:4px 8px calc(24px + env(safe-area-inset-bottom))}
  .ops-app .search-overlay .search-item{min-height:44px}
}

/* ============================================================
   TOAST: paper on ink, bottom center, gone after about 2.6s.
   ============================================================ */
.ops-app .toast{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:500;
  width:max-content;
  max-width:calc(100vw - 32px);
  padding:11px 16px;
  border-radius:10px;
  background:var(--paper);
  color:#0a1020;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
  font:600 13.5px/1.4 var(--sans);
  text-align:center;
  transform:translateX(-50%);
  animation:ops-toast-in .18s ease;
  transition:opacity .22s ease,transform .22s ease;
}
.ops-app .toast .toast-err{color:#a4161a}
.ops-app .toast.toast-out{opacity:0;transform:translate(-50%,8px);pointer-events:none}
@media (max-width:760px){
  .ops-app .toast{bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* ============================================================
   MOTION
   ============================================================ */
@keyframes ops-pop{from{opacity:0;transform:translateY(4px)}}
@keyframes ops-fade{from{opacity:0}to{opacity:1}}
@keyframes ops-sheet-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ops-sheet-up{from{transform:translateY(24px);opacity:.6}to{transform:translateY(0);opacity:1}}
@keyframes ops-toast-in{from{opacity:0;transform:translate(-50%,10px)}}

@media (prefers-reduced-motion:reduce){
  .ops-app .sidebar,
  .ops-app .sidebar *,
  .ops-app .toast{transition-duration:0ms!important}
  .ops-app .v3-mobile-more-sheet,
  .ops-app .toast{animation:none}
}
/* "Copy this": where a browser refuses copying (shell.js copyToClipboard) */
.ops-copy-scrim{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:16px;background:rgba(3,6,14,.62)}
.ops-copy-box{width:min(460px,100%);padding:20px;border:1px solid rgba(190,205,235,.16);border-radius:14px;background:var(--bg-2,#101a2c);color:var(--paper,#f4efe4);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.ops-copy-box h2{margin:0 0 6px;font:600 17px var(--sans,system-ui)}
.ops-copy-box p{margin:0 0 12px;color:var(--muted,#9fb0c8);font-size:13.5px;line-height:1.45}
.ops-copy-box textarea{width:100%;padding:10px 12px;border:1px solid rgba(190,205,235,.2);border-radius:9px;background:rgba(255,255,255,.04);color:inherit;font:14px/1.45 var(--sans,system-ui);resize:vertical}
.ops-copy-foot{display:flex;justify-content:flex-end;margin-top:12px}

/* Offline viewing: what shows was loaded before (decided with Brendan 2026-09-25). */
body.ops-app.is-offline::after{content:"Offline · showing what was last loaded";position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 68px);z-index:300;transform:translateX(-50%);padding:8px 14px;border:1px solid rgba(255,159,10,.45);border-radius:999px;background:#2a1d05;color:#ffcf7a;font:600 13px var(--sans);white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.4);pointer-events:none}

/* ops/ops.css */
/* Light Ops page content. The shell (sidebar, top bar, search, notifications) is in shell.css.
   Site tokens (--gold, --panel, --serif …) come from assets/styles.css. */
.ops-app h1{font-size:clamp(32px,4.4vw,46px)}
.ops-app h2{font-size:25px}
.ops-app .content a:not(.btn):not(.doc-row):not(.stat):not(.todo):not(.mini-lead):not(.pipe):not(.lead-name):not(.tab):not(.chip):not(.lead-addr){color:var(--gold-soft)}
.ops-app .btn-gold{color:#2a1d05}
.ops-app .btn-sm{padding:9px 14px;font-size:13.5px}
.ops-app .btn-quiet{background:none;border:0;color:var(--muted);font-size:13.5px;padding:10px}
.ops-app .btn-quiet:hover{color:var(--gold-soft)}
.btn-link{background:none;border:0;padding:0;color:var(--muted);font:500 13.5px var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.btn-link:hover{color:var(--gold-soft)}
.btn-link.danger:hover{color:var(--status-bad-text)}
.muted,.empty{color:var(--muted)}
.empty{padding:6px 0}
.small{font-size:13.5px}
.block{display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.error{color:var(--status-bad-text);font:12.5px var(--mono);margin-top:10px}
.label{display:block;margin:18px 0 8px;font-size:13px;font-weight:600}
.narrow{max-width:560px;margin:0 auto}

.ops-app .content section:not(.panel):not(.card){padding:0}

/* forms */
.ops-app input[type=text],.ops-app input[type=tel],.ops-app input[type=email],.ops-app input[type=number],.ops-app input[type=date],.ops-app input[type=password],.ops-app select,.ops-app textarea{
  width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;color:var(--paper);font:15px var(--sans);min-width:0}
.ops-app textarea{line-height:1.5;resize:vertical}
.ops-app input[type=date]{color-scheme:dark}
.ops-app input[type=date]:not([readonly]):not(:disabled){cursor:pointer}
.ops-app input[readonly],.ops-app textarea[readonly]{opacity:.75;border-style:dashed}
.ops-app input:focus,.ops-app select:focus,.ops-app textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(243,210,138,.14)}
/* (The builder's form, .ib3-form, lays out its own labels; see builder.css. A label styled as a button, .lo-btn,
   such as a note's Add files, keeps its button layout; :not(.design-opt, .lo-btn) keeps this rule's weight.) */
.ops-app .content label:not(.check):not(.design-opt, .lo-btn):not(.ib3-form label):not(.lo-cust-search label){display:block;font-size:12.5px;font-weight:600;color:var(--muted)}
.ops-app .content label:not(.check):not(.design-opt, .lo-btn):not(.ib3-form label):not(.lo-cust-search label)>input,.ops-app .content label:not(.check):not(.design-opt, .lo-btn):not(.ib3-form label):not(.lo-cust-search label)>select,.ops-app .content label:not(.check):not(.design-opt, .lo-btn):not(.ib3-form label):not(.lo-cust-search label)>textarea,.ops-app .content label:not(.ib3-form label):not(.lo-cust-search label)>.affix{margin-top:6px}
.check{display:flex;gap:9px;align-items:center;font-size:14px;color:var(--paper);margin:14px 0;cursor:pointer}
.check input{width:18px;height:18px;accent-color:#f3d28a}
.grid-2,.grid-3{display:grid;gap:14px;margin-bottom:14px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.grid-2,.grid-3{grid-template-columns:1fr}}
.full{margin-bottom:14px}
.affix{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);overflow:hidden}
.affix>span{padding:0 11px;color:var(--muted-2);font:13px var(--mono);white-space:nowrap}
.ops-app .affix input{border:0;border-radius:0;background:transparent;box-shadow:none!important;padding-left:13px}
.ops-app .affix>span+input{padding-left:2px}
.affix:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(243,210,138,.14)}

/* page head + panels */
.crumb{margin:0 0 8px;font-size:14px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-head h1{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.page-head h1 .pill{font-size:12px;padding:4px 11px}

/* Installation records keep the shared Quote/Invoice dimensions, with two distinct click targets. */
.ops-app .lv .inst-record-row,.ops-app .lv .inst-record-card{position:relative}
.ops-app .lv .inst-open-job{position:absolute;inset:0;z-index:1;width:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer}
.ops-app .lv .inst-open-job:focus-visible{outline:2px solid var(--lv-accent);outline-offset:-2px}
.ops-app .lv .inst-date-button{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:5px 10px;border:1px solid var(--brand-accent-border);border-radius:8px;background:var(--brand-accent-faint);color:var(--brand-accent-text);font:700 13px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer}
.ops-app .lv .inst-date-button:hover,.ops-app .lv .inst-date-button:focus-visible{border-color:var(--brand-accent);background:var(--brand-accent);color:var(--action-primary-text);outline:0}
.ops-app .lv .inst-record-card .v5-record-card-bottom{align-items:center}
.ops-app .lv .inst-record-card .inst-date-button{font-size:12px}
.page-sub{color:var(--muted);margin-top:6px}
.page-actions{display:flex;gap:10px;flex-wrap:wrap}
.panel,.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:18px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.panel-head h2{margin:0}
.panel-head a{font-size:14px}

/* dashboard */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.stat{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.025);transition:border-color .2s,transform .2s}
a.stat:hover{border-color:var(--line-2);transform:translateY(-1px)}
.stat-label{display:block;font-size:12.5px;font-weight:600;color:var(--muted)}
.stat-value{display:block;font-family:var(--sans);font-weight:700;font-size:28px;letter-spacing:-.02em;line-height:1.1;margin-top:6px;color:var(--paper);font-variant-numeric:tabular-nums}
.stat-sub{display:block;font-size:12.5px;color:var(--muted-2);margin-top:2px}
.stat-gold .stat-value{color:var(--gold-soft)}
.stat-ok .stat-value{color:var(--ok)}
.stat-star .stat-value{color:var(--star)}
.stat-coral .stat-value{color:var(--status-bad-text)}
.stats-small .stat-value{font-size:22px}
.dash-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;min-width:0;width:100%}
.dash-grid>.panel{min-width:0}
@media(max-width:1000px){.dash-grid{grid-template-columns:minmax(0,1fr)}}
.todos,.mini-leads{display:grid;gap:4px}
.todo,.mini-lead{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;color:var(--paper)}
.todo:hover,.mini-lead:hover{background:rgba(255,255,255,.04)}
.todo .notification-icon{flex:none;width:10px;height:10px;border-radius:50%;background:var(--gold)}
.todo-copy,.mini-copy{flex:1;min-width:0}
.todo-copy strong,.mini-copy strong{display:block;font-size:14.5px}
.todo-copy small,.mini-copy small{display:block;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.todo time{font:11px var(--mono);color:var(--muted-2);white-space:nowrap}
.mini-lead img,.mini-lead .thumb-empty{width:56px;height:40px;border-radius:8px;object-fit:cover;flex:none;font-size:15px}
.pipeline{display:grid;gap:8px}
.pipe{display:grid;grid-template-columns:130px 1fr 40px;align-items:center;gap:12px;color:var(--paper);font-size:14px;padding:4px 0}
.pipe-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.05);overflow:hidden}
.pipe-bar i{display:block;height:100%;border-radius:999px;background:var(--muted-2)}
.pipe-bar .pipe-new{background:var(--gold)}.pipe-bar .pipe-contacted{background:var(--star)}.pipe-bar .pipe-quoted{background:var(--status-action-solid)}.pipe-bar .pipe-booked{background:var(--ok)}
.pipe-n{font:13px var(--mono);text-align:right;color:var(--muted)}

/* tabs + chips + pills */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tab{padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--muted)!important;font-size:14px;white-space:nowrap}
.tab span{font-family:var(--mono);font-size:11px;color:var(--muted-2);margin-left:4px}
.tab.on{border-color:var(--gold);color:var(--gold-soft)!important;background:rgba(243,210,138,.07)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip{padding:7px 13px;border:1px solid var(--line);border-radius:999px;color:var(--muted)!important;font-size:13.5px}
.chip.on{border-color:var(--gold);color:var(--gold-soft)!important;background:rgba(243,210,138,.07)}
/* Status pills, palette 3a (handoff 6): tone = whose move it is. Tint background, text color, no dot, no border.
   Existing status classes map to a tone here; an explicit pill--tone class from the renderer wins. */
.pill{display:inline-flex;align-items:center;padding:4px 10px;border:0;border-radius:7px;background:var(--status-done-tint);color:var(--status-done-text);font:600 12px var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap;vertical-align:middle}
.pill-new,.pill-contacted{background:var(--status-action-tint);color:var(--status-action-text)}
.pill-quoted,.pill-sent,.pill-viewed,.pill-partial{background:var(--status-wait-tint);color:var(--status-wait-text)}
.pill-booked,.pill-approved,.pill-paid{background:var(--status-ok-tint);color:var(--status-ok-text)}
.pill-draft,.pill-lost,.pill-void{background:var(--status-done-tint);color:var(--status-done-text)}
.pill-changes,.pill-declined,.pill-overdue,.pill-expired{background:var(--status-bad-tint);color:var(--status-bad-text)}
.pill--action{background:var(--status-action-tint);color:var(--status-action-text)}
.pill--wait{background:var(--status-wait-tint);color:var(--status-wait-text)}
.pill--ok{background:var(--status-ok-tint);color:var(--status-ok-text)}
.pill--done{background:var(--status-done-tint);color:var(--status-done-text)}
.pill--bad{background:var(--status-bad-tint);color:var(--status-bad-text)}
/* Solid status dots (work queue headers, Needs attention, activity, notifications): 8px in the tone's solid
   color. A read notification's dot is a ring. Count badges are orange with black text. */
.status-dot{display:inline-block;flex:0 0 8px;width:8px;height:8px;border:1.5px solid var(--dot,var(--status-done-solid));border-radius:50%;background:var(--dot,var(--status-done-solid))}
.status-dot--read{background:transparent}
.status-dot--action{--dot:var(--status-action-solid)}
.status-dot--wait{--dot:var(--status-wait-solid)}
.status-dot--ok{--dot:var(--status-ok-solid)}
.status-dot--done{--dot:var(--status-done-solid)}
.status-dot--bad{--dot:var(--status-bad-solid)}
.count-badge{display:inline-block;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--badge-bg);color:var(--badge-text);font:700 10px/17px var(--mono);text-align:center}
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font:11px var(--mono);letter-spacing:.04em;border:1px solid var(--line);color:var(--muted)}
.badge-christmas{color:#ff9d9d;border-color:rgba(255,120,120,.35)}
.badge-permanent{color:var(--star);border-color:rgba(10,132,255,.35)}
.flag{font:11px var(--mono);color:var(--status-bad-text)}
.flag-measure{color:var(--ok)}

/* banners */
.banner{padding:14px 18px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:rgba(255,255,255,.03);margin-bottom:18px}
.banner strong{display:block}
.banner p{margin:6px 0;color:var(--paper)}
.banner small{display:block;color:var(--muted);margin-top:4px;font-size:13px}
.banner-amber{border-color:rgba(255,159,10,.5);background:rgba(255,159,10,.08)}.banner-amber strong{color:var(--status-action-text)}
.banner-ok{border-color:rgba(48,209,88,.45);background:rgba(48,209,88,.08)}.banner-ok strong{color:var(--ok)}
.banner-coral{border-color:rgba(255,69,58,.45);background:rgba(255,69,58,.08)}.banner-coral strong{color:var(--status-bad-text)}
.banner-violet{border-color:rgba(10,132,255,.4);background:rgba(10,132,255,.08)}.banner-violet strong{color:var(--star)}

/* document lists */
.doc-list{display:grid;gap:8px}
.doc-row{display:grid;grid-template-columns:110px minmax(0,1.6fr) 150px 100px 100px 120px;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.02);color:var(--paper);transition:border-color .15s,background .15s}
.doc-row:hover{border-color:var(--line-2);background:rgba(255,255,255,.04)}
.doc-num{font:600 13.5px var(--mono);color:var(--gold-soft)}
.doc-num small,.doc-date small{display:block;font:11px var(--sans);color:var(--muted-2);letter-spacing:0}
.doc-who{min-width:0}
.doc-who strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-who small{display:block;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-date{font-size:13.5px;color:var(--paper)}
.doc-amt{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.paid-mark{color:var(--ok);font:12px var(--mono)}
.doc-list.compact .doc-row{grid-template-columns:100px minmax(0,1fr) 150px 110px}
@media(max-width:900px){
  .doc-row{grid-template-columns:90px minmax(0,1fr) auto;row-gap:6px}
  .doc-row .doc-date{display:none}
  .doc-row .doc-status{grid-column:2}
  .doc-row .doc-amt{grid-row:1;grid-column:3}
  .doc-list.compact .doc-row{grid-template-columns:90px minmax(0,1fr) auto}
}

/* quote / invoice editor */
.doc-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
@media(max-width:1100px){.doc-layout{grid-template-columns:minmax(0,1fr)}.doc-side .sticky{position:static}}
.doc-side .sticky{position:sticky;top:28px}
.items{margin:6px 0 16px}
.items-head,.item-row{display:grid;grid-template-columns:minmax(0,1fr) 72px 66px 108px 96px 84px;gap:8px;align-items:center}
.items-head{font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);padding:0 2px 8px;border-bottom:1px solid var(--line-2)}
.items-head span:nth-child(5){text-align:right}
.item-row{padding:8px 0;border-bottom:1px solid var(--line)}
.ops-app .item-row input{padding:9px 10px;font-size:14.5px}
.i-price-wrap{display:flex;align-items:center;gap:4px;color:var(--muted-2)}
.i-amount{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.i-tools{display:flex;gap:2px;justify-content:flex-end}
.i-btn{width:26px;height:30px;border:1px solid transparent;border-radius:8px;background:none;color:var(--muted-2);cursor:pointer;font-size:14px}
.i-btn:hover{border-color:var(--line-2);color:var(--paper)}
.i-remove:hover{color:var(--status-bad-text)}
.items-add{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.ops-app .items-add select{flex:1 1 260px;width:auto}
@media(max-width:700px){
  .items-head{display:none}
  .item-row{grid-template-columns:1fr 1fr 1fr;padding:12px 0}
  .item-row .i-desc{grid-column:1/-1}
  .item-row .i-amount{grid-column:1/3;text-align:left}
  .i-price-wrap{grid-column:3}
  .i-tools{grid-column:3;grid-row:3}
}
.money-fields{margin-top:6px}
.design-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.design-opt{position:relative;display:block;cursor:pointer;border:2px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel-2)}
.design-opt input{position:absolute;opacity:0}
.design-opt img{width:100%;aspect-ratio:4/3;object-fit:cover}
.design-opt>span:last-child{display:block;padding:7px 9px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.design-opt:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 3px rgba(243,210,138,.15)}
.design-opt:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.none-box{display:grid;place-items:center;aspect-ratio:4/3;color:var(--muted-2);font-size:13px}
.refs{margin:0 0 14px;padding:12px 14px;border:1px dashed var(--line-2);border-radius:var(--r-sm)}
.refs summary{cursor:pointer;color:var(--gold-soft);font-size:14px}
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:12px 0 8px}
.ref small{display:block;color:var(--muted);font-size:12px}
.ref strong{font:14px var(--mono)}
.ref em{font-style:normal;color:var(--ok);font-size:11px}
.terms-edit{margin-top:14px}
.terms-edit summary{cursor:pointer;color:var(--gold-soft);font-size:14px;margin-bottom:10px}
.doc-totals{display:grid;gap:2px;margin-bottom:14px}
.tot-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:14px;color:var(--muted)}
.tot-row output{color:var(--paper);font-variant-numeric:tabular-nums}
.tot-total{border-top:1px solid var(--line-2);margin-top:4px;padding-top:10px;font-size:17px;font-weight:700;color:var(--paper)}
.tot-total output{font-family:var(--sans);font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--gold-soft);font-variant-numeric:tabular-nums}
.tot-deposit{color:var(--gold-soft)}
.side-actions{display:grid;gap:8px}
.side-actions .btn{padding:12px 16px;font-size:14px}
.side-h{font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:22px 0 10px}
.side-note{display:block;color:var(--muted);font-size:13px;margin-top:8px}
.side-doc{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;color:var(--paper)!important;font-size:14px}
.side-doc small{color:var(--muted-2)}
.timeline{list-style:none;display:grid;gap:0;margin:0;padding:0}
.timeline li{display:flex;justify-content:space-between;padding:7px 0 7px 18px;position:relative;font-size:13.5px;color:var(--muted-2)}
.timeline li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:8px;border-radius:50%;border:1px solid var(--line-2)}
.timeline li.done{color:var(--paper)}
.timeline li.done::before{background:var(--gold);border-color:var(--gold)}
.timeline time{font:12px var(--mono);color:var(--muted)}
.side-more{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.side-more summary{cursor:pointer;font-size:14px;color:var(--gold-soft)}
.side-more form{display:grid;gap:10px;margin-top:10px}
.side-inline{display:inline-block;margin:14px 14px 0 0}
.table{width:100%;border-collapse:collapse;font-size:14.5px;margin-bottom:14px}
.table th{text-align:left;font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);padding:8px;border-bottom:1px solid var(--line-2)}
.table td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.table small{color:var(--muted-2)}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.pay-form{border-top:1px solid var(--line);padding-top:16px;margin-top:6px}
.kv{display:grid;grid-template-columns:160px 1fr;gap:8px 16px;font-size:14.5px}
.kv dt{color:var(--muted)}
.sticky-save{position:sticky;bottom:16px;z-index:5;display:flex;justify-content:flex-end;margin:0 0 18px}
@media(max-width:760px){.sticky-save{bottom:calc(84px + env(safe-area-inset-bottom))}}
.settings code,.panel code{font:12.5px var(--mono);color:var(--gold-soft)}

/* leads list */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ops-app .filters input[type=search]{flex:1 1 260px;width:auto;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;color:var(--paper);font:15px var(--sans)}
.ops-app .filters select{width:auto}
.leads{display:grid;gap:12px}
.lead{display:grid;grid-template-columns:120px 1fr auto;gap:16px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02)}
.thumb img{width:120px;height:84px;object-fit:cover;border-radius:10px;background:var(--panel-2)}
.thumb-empty{display:grid;place-items:center;width:120px;height:84px;border-radius:10px;background:var(--panel-2);color:var(--gold);font-size:22px}
.lead-name{font-family:var(--serif);font-size:24px;color:var(--paper)!important;line-height:1.1}
.lead-meta{margin:6px 0 4px;color:var(--muted);font-size:13px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.lead-summary{color:var(--paper);font-size:14px;margin:2px 0 4px;opacity:.85}
.lead-addr{font-size:14px;color:var(--muted)!important}
.lead .call{padding:12px 18px;font-size:14px}
@media(max-width:640px){
  .lead{grid-template-columns:88px 1fr}
  .thumb img,.lead .thumb-empty{width:88px;height:66px}
  .lead .call{grid-column:1/-1}
}

/* lead detail */
.detail{display:grid;grid-template-columns:360px minmax(0,1fr);gap:20px;align-items:start}
@media(max-width:1000px){.detail{grid-template-columns:minmax(0,1fr)}}
.info h1{margin:4px 0 16px;font-size:clamp(30px,3.6vw,40px)}
.info dl{margin:18px 0 4px;display:grid;gap:4px}
.info dt{font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:10px}
.info dd{color:var(--paper);font-size:15px;overflow-wrap:anywhere}
.info .btn-block{margin-top:10px}
.info .save{margin-top:14px}
.info textarea{margin-bottom:12px}
.edit-contact{margin:14px 0 4px;border-top:1px solid var(--line);padding-top:12px}
.edit-contact summary{cursor:pointer;color:var(--gold-soft);font-size:14px}
.edit-contact .label{color:var(--muted)}
.statuses{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.status-btn{padding:11px;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--paper);font:600 14px var(--sans);cursor:pointer}
.status-btn:hover{border-color:var(--line-2)}
.status-btn.on{border-color:var(--gold);background:rgba(243,210,138,.1);color:var(--gold-soft)}
.small-h{font-size:22px;margin:24px 0 0}
.history{list-style:none;margin-top:14px;border-top:1px solid var(--line);padding-top:12px;font-size:13px;color:var(--muted)}
.history li{padding:4px 0}
.history span{font-family:var(--mono);font-size:11px;color:var(--muted-2);margin-right:6px}
.lead-main .block{margin-bottom:26px}
.lead-main .block h2{margin-bottom:12px}
.lead-main figure{margin:0 0 18px}
.lead-main img{width:100%;border-radius:var(--r);border:1px solid var(--line)}
.lead-main figcaption{margin-top:8px;color:var(--muted);font-size:13px}
.docs .panel-head form{margin:0}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.photo-grid .file{padding:18px;border:1px dashed var(--line-2);border-radius:var(--r-sm)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:560px){.two{grid-template-columns:1fr}}

/* measurements */
.block h2 .conf{vertical-align:middle;margin-left:8px}
table.measure{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px}
table.measure th{text-align:left;font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);padding:8px 10px;border-bottom:1px solid var(--line-2)}
table.measure td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
table.measure td small{display:block;color:var(--muted-2);font-size:12px;margin-top:2px}
table.measure .ft{white-space:nowrap;font-family:var(--mono);font-size:13.5px}
table.measure .num{font-family:var(--mono);color:var(--muted)}
.ops-app table.measure input{width:110px;padding:8px 10px}
table.totals td:first-child{font-weight:600}
.conf{display:inline-block;padding:2px 8px;border-radius:999px;font:11px var(--mono);border:1px solid var(--line-2);color:var(--muted)}
.conf-high{color:var(--ok);border-color:rgba(48,209,88,.5)}
.conf-medium{color:var(--gold-soft);border-color:rgba(243,210,138,.5)}
.conf-low{color:var(--status-bad-text);border-color:rgba(255,69,58,.45)}
.measure-detail{margin-top:10px}
.measure-detail summary{cursor:pointer;color:var(--gold-soft);font-size:14px}

/* sign in (no shell) */
.ops-bare{min-height:100vh;background:radial-gradient(120% 60% at 70% -10%,#1b2a4d 0%,#0c1426 45%,var(--ink) 100%)}
.bare-wrap{padding:12vh 16px 40px}
.login{max-width:420px;margin:0 auto;text-align:left}
.login-logo{width:84px;margin:0 auto 18px}
.login h1{margin:6px 0 4px}
.login .btn{margin-top:22px}
@media(max-width:520px){
  table.measure{font-size:13.5px}
  table.measure th,table.measure td{padding:8px 5px}
  table.measure .ft{white-space:normal}
  .ops-app table.measure input{width:70px;padding:7px 8px}
}

/* ops/lists.css */
/* ============================================================
   Light Ops list screens: Leads, Quotes, Invoices, Payments
   ------------------------------------------------------------
   Invoice Flow V5's Customers page (customers-v2) and its
   Estimates / Invoices / Payments lists (workspace-toolbar,
   v3-toolbar + v3-filter menus, v5-record rows and cards),
   with the list / card switch (workspace-view-toggle).
   Sizes are the values that win in Invoice Flow's cascade
   (v5.css + theme-components.css), measured with computed
   styles at 1440 and 390. Colors and fonts are the Light Guys
   navy and gold; all record text is var(--sans).

   Markup: ops/lists-view.php. Behavior: assets/ops/lists.js.
   Everything is scoped to .ops-app .lv. Phone: 760px.
   ============================================================ */

.ops-app .lv{
  --lv-surface:#111c33;
  --lv-surface-2:#16233f;
  --lv-input:#0c1527;
  --lv-dropdown:#13203a;
  --lv-border:rgba(190,205,235,.16);
  --lv-border-subtle:rgba(190,205,235,.09);
  --lv-border-strong:rgba(190,205,235,.34);
  --lv-control-border:rgba(190,205,235,.26);
  --lv-text:var(--paper);
  --lv-muted:var(--muted);
  --lv-subtle:var(--muted-2);
  --lv-accent:var(--gold);
  --lv-accent-soft:rgba(243,210,138,.14);
  --lv-accent-faint:rgba(243,210,138,.055);
  --lv-accent-border:rgba(243,210,138,.34);
  --lv-selected-bg:rgba(243,210,138,.15);
  --lv-selected-text:var(--gold-soft);
  --lv-hover:rgba(243,210,138,.055);
  --lv-focus:rgba(243,210,138,.22);
  --lv-on-accent:#2a1d05;
  --lv-error:var(--status-bad-text);
  --lv-shadow-xs:0 3px 10px rgba(0,0,0,.22);
  --lv-shadow-low:0 3px 10px rgba(0,0,0,.26);
  --lv-shadow-medium:0 14px 38px rgba(0,0,0,.34);
  --lv-shadow-high:0 28px 72px rgba(0,0,0,.55);
  color:var(--lv-text);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
}
.ops-app .lv *,.ops-app .lv *::before,.ops-app .lv *::after{box-sizing:border-box}
.ops-app .lv a{color:inherit;text-decoration:none}
.ops-app .lv button,.ops-app .lv input{font-family:var(--sans)}
.ops-app .lv [hidden]{display:none!important}

/* ---------------- list or cards: set on <html> before the page paints ---------------- */
.ops-app .lv .lv-when-card{display:grid!important}
.ops-app .lv .lv-when-list{display:none!important}
html[data-lv-layout="list"] .ops-app .lv .lv-when-card{display:none!important}
html[data-lv-layout="list"] .ops-app .lv .lv-when-list{display:block!important}
html[data-lv-layout="list"] .ops-app .to-order .to-list{display:grid!important}

/* ---------------- Invoice Flow's view switch ---------------- */
.ops-app .lv .workspace-view-toggle{display:flex;align-items:center;flex:0 0 auto;gap:3px;height:44px;padding:3px;border:1px solid var(--lv-border-subtle);border-radius:8px;overflow:hidden;background:var(--lv-surface);box-shadow:var(--lv-shadow-xs);color:var(--lv-text);cursor:pointer;appearance:none;margin:0}
.ops-app .lv .workspace-view-flip:focus-visible{outline:2px solid var(--lv-focus);outline-offset:2px}
.ops-app .lv .workspace-view-toggle-option{display:grid;place-items:center;width:38px;height:36px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--lv-muted);transition:background-color 120ms cubic-bezier(.4,0,.2,1),color 120ms cubic-bezier(.4,0,.2,1),box-shadow 120ms cubic-bezier(.4,0,.2,1)}
.ops-app .lv .workspace-view-toggle:hover .workspace-view-toggle-option{color:var(--lv-text)}
/* Active option follows <html data-lv-layout>, so it's right before lists.js runs. */
html[data-lv-layout="list"] .ops-app .lv .workspace-view-toggle .lv-opt-list,
html:not([data-lv-layout="list"]) .ops-app .lv .workspace-view-toggle .lv-opt-card{background:var(--lv-selected-bg);color:var(--lv-accent);box-shadow:var(--lv-shadow-low)}

/* ---------------- the shared page header (Leads, Quotes, Invoices, Payments, Settings) ----------------
   Invoice Flow's customers-v2 header without the eyebrow. Every box has a fixed size, so the title,
   the switch and the button sit in the same place on all five pages. */
.ops-app .lv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;width:100%;max-width:1120px;height:73px;margin:0 auto 25px;padding:0;border:0;background:none;box-shadow:none}
.ops-app .lv-head-copy{flex:1 1 auto;min-width:0}
.ops-app .lv-head .lv-head-title{display:block;height:44px;margin:0;overflow:hidden;color:var(--lv-text);font:600 42px/44px var(--sans);letter-spacing:-.045em;text-overflow:ellipsis;white-space:nowrap}
.ops-app .lv-head .lv-head-sub{height:21px;margin:8px 0 0;overflow:hidden;color:var(--lv-muted);font:400 14px/21px var(--sans);text-overflow:ellipsis;white-space:nowrap}
.ops-app .lv-head-actions{display:flex;align-items:center;flex:0 0 auto;gap:8px;height:46px}
.ops-app .lv-head-button-slot{display:block;flex:0 0 156px;width:156px;height:46px}
.ops-app .lv-head .v3-primary-button.lv-head-button{width:100%;height:46px;min-height:46px;padding:0 14px;font-size:14px}
.ops-app .lv-head .lv-toggle-slot{visibility:hidden;cursor:default}
.ops-app button.lv-payment-row{width:100%;border:0;text-align:left;font:inherit;cursor:pointer}

/* ---------------- Invoice Flow's primary button ---------------- */
.ops-app .lv .v3-primary-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:42px;padding:0 16px;border:1px solid var(--lv-accent);border-radius:10px;background:var(--lv-accent);color:var(--lv-on-accent);font:500 13px/1.5 var(--sans);white-space:nowrap;cursor:pointer;box-shadow:var(--lv-shadow-medium);transition:background-color 120ms ease,border-color 120ms ease}
.ops-app .lv .v3-primary-button:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--lv-on-accent)}
.ops-app .lv .v3-primary-button:focus-visible{outline:3px solid var(--lv-focus);outline-offset:2px}

/* ================================================================
   Leads = Invoice Flow's Customers page (customers-v2)
   ================================================================ */
.ops-app .customers-v2{width:100%;max-width:1120px;margin:0 auto;padding:0 0 34px}

.ops-app .customers-v2-tools{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.ops-app .customers-v2-search{display:flex;align-items:center;gap:9px;flex:0 1 280px;min-width:min(100%,280px);height:44px;margin:0;padding:0 13px;border:1px solid var(--lv-control-border);border-radius:11px;background:var(--lv-input);color:var(--lv-muted);box-shadow:var(--lv-shadow-xs);transition:border-color 120ms ease,box-shadow 120ms ease}
.ops-app .customers-v2-search:focus-within{border-color:var(--lv-accent);box-shadow:0 0 0 3px var(--lv-focus)}
.ops-app .customers-v2-search>span{font:500 23px/1 var(--sans);transform:rotate(-20deg)}
.ops-app .customers-v2-search input[type="search"]{width:100%;min-width:0;height:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--lv-text);font:400 13px/1.5 var(--sans);outline:0}
.ops-app .customers-v2-search input::placeholder{color:var(--lv-subtle);opacity:1}
.ops-app .customers-v2-filters{display:flex;align-items:center;gap:5px;max-width:100%;padding:4px;border:1px solid var(--lv-border-subtle);border-radius:11px;background:var(--lv-surface);box-shadow:var(--lv-shadow-xs);overflow-x:auto;scrollbar-width:none}
.ops-app .customers-v2-filters::-webkit-scrollbar{display:none}
.ops-app .customers-v2-filter{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 11px;border:0;border-radius:8px;background:transparent;color:var(--lv-muted);font:500 12px/1.5 var(--sans);white-space:nowrap;cursor:pointer;transition:background-color 120ms ease,color 120ms ease}
.ops-app .customers-v2-filter:hover{color:var(--lv-text);background:var(--lv-surface-2)}
.ops-app .customers-v2-filter.is-active{background:var(--lv-selected-bg);color:var(--lv-selected-text);box-shadow:var(--lv-shadow-low)}
.ops-app .customers-v2-filter:focus-visible{outline:3px solid var(--lv-focus);outline-offset:1px}
.ops-app .lv-chip-count{color:var(--lv-subtle);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.ops-app .customers-v2-filter.is-active .lv-chip-count{color:var(--lv-accent)}
.ops-app .customers-v2-count{margin-left:auto;color:var(--lv-muted);font-size:12px;font-weight:700;white-space:nowrap}
.ops-app .lv-pagination{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:16px;color:var(--lv-muted);font-size:12px;font-weight:600}
.ops-app .lv-pagination a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--lv-control-border);border-radius:9px;background:var(--lv-surface);color:var(--lv-text);text-decoration:none}
.ops-app .lv-pagination a:hover{background:var(--lv-surface-2)}
.ops-app .lv-pagination a:focus-visible{outline:3px solid var(--lv-focus);outline-offset:2px}
.ops-app .lv-leads .v3-toolbar{margin-bottom:16px}

.ops-app .customers-v2-layout{display:block}
.ops-app .customers-v2-list{overflow:hidden;border:1px solid var(--lv-border);border-radius:14px;background:var(--lv-surface);box-shadow:var(--lv-shadow-xs)}
.ops-app .customers-v2-row{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;align-items:center;gap:12px;width:100%;min-height:70px;padding:15px 18px;border:0;border-bottom:1px solid var(--lv-border-subtle);background:var(--lv-surface);color:var(--lv-text);text-align:left;font-weight:500;transition:background .15s}
.ops-app .customers-v2-row:last-child{border-bottom:0}
.ops-app .customers-v2-row:hover{background:linear-gradient(var(--lv-hover),var(--lv-hover)),var(--lv-surface)}
.ops-app .customers-v2-row:focus-within:has(.lv-open:focus-visible){outline:2px solid var(--lv-accent);outline-offset:-2px}
.ops-app .customers-v2-avatar{display:grid;place-items:center;width:42px;height:42px;overflow:hidden;border-radius:13px;background:var(--lv-accent-soft);color:var(--lv-accent);font:900 12px/1.5 var(--sans);letter-spacing:.02em}
.ops-app .customers-v2-avatar.has-image{background:var(--lv-surface-2)}
.ops-app .customers-v2-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.ops-app .customers-v2-row-copy{display:grid;gap:2px;min-width:0}
.ops-app .customers-v2-row-copy strong{overflow:hidden;font-size:14px;font-weight:700;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.ops-app .customers-v2-row-copy small{overflow:hidden;color:var(--lv-muted);font-size:12px;line-height:1.5;text-overflow:ellipsis;white-space:nowrap}
.ops-app .customers-v2-row-status{display:grid;justify-items:end;gap:3px;min-width:128px}
.ops-app .customers-v2-row-status>strong{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ops-app .customers-v2-row-status small{color:var(--lv-subtle);font-size:11px;line-height:1.5;white-space:nowrap}
.ops-app .customers-v2-row-status em,.ops-app .customers-v2-card>em{color:var(--lv-error);font-style:normal;font-variant-numeric:tabular-nums}
.ops-app .customers-v2-row-status em{font-size:10px;font-weight:800;line-height:1.5}
.ops-app .lv-money-label{margin-right:3px;color:var(--lv-subtle);font-size:11px;font-weight:600}

/* The name is the row's link; it covers the whole row. Other links and buttons sit above it. */
.ops-app .lv .lv-open{color:inherit}
.ops-app .lv .lv-open::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.ops-app .lv .lv-open:focus-visible{outline:0}
.ops-app .lv .lv-address,.ops-app .lv .lv-actions{position:relative;z-index:2}
.ops-app .lv .lv-address:hover{color:var(--lv-text);text-decoration:underline;text-underline-offset:2px}
.ops-app .lv-name-line{display:flex;align-items:center;gap:8px;min-width:0}
.ops-app .lv-name-line>strong{flex:0 1 auto;min-width:0;overflow:hidden;font-size:14px;font-weight:700;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.ops-app .lv-name-line .lv-meta{flex:none;flex-wrap:nowrap;margin:0}
.ops-app .customers-v2-row-copy .lv-note{display:flex;align-items:baseline;gap:8px;min-width:0}
.ops-app .lv-note .flag{flex:none}
.ops-app .lv-summary{min-width:0;overflow:hidden;color:var(--lv-subtle);text-overflow:ellipsis;white-space:nowrap}

/* Business / source badges and designer flags, in the sans */
.ops-app .lv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-width:0;margin-top:3px}
.ops-app .lv .badge{padding:1px 7px;border-radius:999px;font:600 10.5px/1.5 var(--sans);letter-spacing:.01em;white-space:nowrap}
.ops-app .lv .flag{font:600 11px/1.5 var(--sans)}

/* Row actions: Call, Text, Create quote (Invoice Flow's small ghost buttons) */
.ops-app .lv-actions{display:flex;align-items:center;gap:6px}
.ops-app .lv-actions form{display:contents}
.ops-app .lv-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 11px;border:1px solid var(--lv-border);border-radius:8px;background:var(--lv-surface-2);color:var(--lv-text);font:600 12px/1 var(--sans);white-space:nowrap;cursor:pointer;transition:border-color 120ms ease,background-color 120ms ease,color 120ms ease}
.ops-app .lv-action svg{flex:none;color:var(--lv-accent)}
.ops-app .lv-action:hover{border-color:var(--lv-accent-border);background:var(--lv-accent-faint);color:var(--lv-text)}
.ops-app .lv-action:focus-visible{outline:3px solid var(--lv-focus);outline-offset:1px}
.ops-app .lv-action span{display:none}
.ops-app .lv-action{width:34px;padding:0}
.ops-app .lv-action.lv-action-quote{width:auto;padding:0 11px}
.ops-app .lv-action-quote span{display:inline}

/* Status pills on list pages: the same 3a tones as ops.css (handoff 6). */
.ops-app .lv .customers-v2-health,.ops-app .lv .v5-status-pill{display:inline-flex;align-items:center;justify-content:center;width:max-content;padding:4px 10px;border:0;border-radius:7px;background:var(--status-done-tint);color:var(--status-done-text);font:600 12px/1.25 var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap}
.ops-app .lv .lv-method{background:rgba(190,205,235,.08);color:var(--lv-muted)}
.ops-app .lv .pill-new,.ops-app .lv .pill-contacted{background:var(--status-action-tint);color:var(--status-action-text)}
.ops-app .lv .pill-quoted,.ops-app .lv .pill-sent,.ops-app .lv .pill-viewed,.ops-app .lv .pill-partial{background:var(--status-wait-tint);color:var(--status-wait-text)}
.ops-app .lv .pill-booked,.ops-app .lv .pill-approved,.ops-app .lv .pill-paid{background:var(--status-ok-tint);color:var(--status-ok-text)}
.ops-app .lv .pill-lost,.ops-app .lv .pill-void,.ops-app .lv .pill-draft{background:var(--status-done-tint);color:var(--status-done-text)}
.ops-app .lv .pill-changes,.ops-app .lv .pill-declined,.ops-app .lv .pill-overdue,.ops-app .lv .pill-expired{background:var(--status-bad-tint);color:var(--status-bad-text)}
.ops-app .lv .pill--action{background:var(--status-action-tint);color:var(--status-action-text)}
.ops-app .lv .pill--wait{background:var(--status-wait-tint);color:var(--status-wait-text)}
.ops-app .lv .pill--ok{background:var(--status-ok-tint);color:var(--status-ok-text)}
.ops-app .lv .pill--done{background:var(--status-done-tint);color:var(--status-done-text)}
.ops-app .lv .pill--bad{background:var(--status-bad-tint);color:var(--status-bad-text)}

/* Lead cards */
.ops-app .customers-v2-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px}
.ops-app .customers-v2-card{position:relative;display:grid;align-content:start;gap:15px;min-width:0;min-height:206px;padding:16px;border:1px solid var(--lv-border);border-radius:14px;background:var(--lv-surface);color:var(--lv-text);text-align:left;box-shadow:var(--lv-shadow-xs);font-weight:500;transition:border-color .15s,box-shadow .15s,transform .15s}
.ops-app .customers-v2-card:hover{border-color:color-mix(in srgb,var(--lv-accent) 48%,var(--lv-border));box-shadow:var(--lv-shadow-low);transform:translateY(-1px)}
.ops-app .customers-v2-card:has(.lv-open:focus-visible){outline:2px solid var(--lv-accent);outline-offset:2px}
.ops-app .customers-v2-card-top{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ops-app .customers-v2-card-copy{display:grid;gap:4px;min-width:0}
.ops-app .customers-v2-card-copy strong{overflow:hidden;font:600 16px/1.25 var(--sans);letter-spacing:-.015em;text-overflow:ellipsis;white-space:nowrap}
.ops-app .customers-v2-card-copy small{overflow:hidden;color:var(--lv-muted);font-size:12px;line-height:1.5;text-overflow:ellipsis;white-space:nowrap}
.ops-app .customers-v2-card-bottom{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--lv-border-subtle)}
.ops-app .customers-v2-card-bottom>span{display:grid;gap:4px;min-width:0}
.ops-app .customers-v2-card-bottom small{color:var(--lv-subtle);font-size:9px;font-weight:600;letter-spacing:.08em;line-height:1.5;text-transform:uppercase}
.ops-app .customers-v2-card-bottom strong{overflow:hidden;font-size:13px;font-weight:700;line-height:1.5;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}
.ops-app .customers-v2-card>em{margin-top:-8px;font-size:13px;font-weight:600;line-height:1.5}
.ops-app .customers-v2-card .lv-actions{margin-top:-3px}
.ops-app .customers-v2-card .lv-action-quote{flex:1 1 auto}
/* A design lead's render leads the card, where Invoice Flow puts the avatar. */
.ops-app .lv-card-image{display:block;width:100%;height:132px;overflow:hidden;border-radius:10px;background:var(--lv-surface-2)}
.ops-app .lv-card-image img{display:block;width:100%;height:100%;object-fit:cover}
.ops-app .lv-card.has-thumb .customers-v2-card-top:has(.lv-card-image) .customers-v2-avatar{display:none}
.ops-app .lv-card.has-thumb .customers-v2-card-top:has(.lv-card-image) .customers-v2-health{position:absolute;top:8px;right:8px;box-shadow:0 2px 10px rgba(0,0,0,.4);background-color:#15213b}

/* Empty state (Invoice Flow's customers-v2-empty) */
.ops-app .customers-v2-empty{display:grid;gap:5px;padding:31px 20px;text-align:center}
.ops-app .customers-v2-card-grid .customers-v2-empty{grid-column:1/-1;border:1px solid var(--lv-border);border-radius:14px;background:var(--lv-surface)}
.ops-app .customers-v2-empty strong{font:700 15px/1.3 var(--sans)}
.ops-app .customers-v2-empty span{color:var(--lv-muted);font-size:13px}

/* ================================================================
   Quotes, invoices, payments = Invoice Flow's Estimates,
   Invoices and Payments lists
   ================================================================ */
.ops-app .lv-records{width:100%;max-width:1120px;margin:0 auto;padding:0 0 34px}

/* Filter menus (v3-toolbar / v3-filter-menu) */
.ops-app .lv .v3-toolbar{display:flex;align-items:flex-end;flex-wrap:wrap;gap:9px;margin:0 0 18px;padding:0;border:0;background:transparent;box-shadow:none}
.ops-app .lv .v3-filter-menu{position:relative;min-width:176px;z-index:12}
.ops-app .lv .v3-filter-menu:has(.v3-filter-popover:not([hidden])){z-index:40}
.ops-app .lv .v3-filter-trigger{display:grid;grid-template-columns:minmax(0,1fr) 20px;grid-template-rows:auto auto;column-gap:12px;width:100%;min-height:48px;padding:7px 10px 7px 12px;border:1px solid var(--lv-border-subtle);border-radius:10px;background:var(--lv-surface);box-shadow:var(--lv-shadow-xs);color:var(--lv-text);cursor:pointer;text-align:left;font-family:var(--sans);transition:border-color 150ms ease,box-shadow 150ms ease}
.ops-app .lv .v3-filter-trigger:hover{border-color:var(--lv-border-strong)}
.ops-app .lv .v3-filter-trigger:focus-visible,.ops-app .lv .v3-filter-trigger[aria-expanded="true"]{border-color:var(--lv-accent);box-shadow:0 0 0 3px var(--lv-focus),var(--lv-shadow-low);outline:0}
.ops-app .lv .v3-filter-label{grid-column:1;color:var(--lv-subtle);font-size:8.5px;font-weight:800;line-height:1.15;letter-spacing:.13em;text-transform:uppercase}
.ops-app .lv .v3-filter-value{grid-column:1;overflow:hidden;font-size:12.5px;font-weight:700;line-height:20px;text-overflow:ellipsis;white-space:nowrap}
.ops-app .lv .v3-filter-chevron{grid-column:2;grid-row:1/3;align-self:center;display:grid;place-items:center;width:20px;height:20px;color:var(--lv-muted);transition:transform 160ms ease,color 160ms ease}
.ops-app .lv .v3-filter-trigger[aria-expanded="true"] .v3-filter-chevron{color:var(--lv-accent);transform:rotate(180deg)}
.ops-app .lv .v3-filter-popover{position:absolute;left:0;top:calc(100% + 8px);min-width:224px;max-height:min(420px,70vh);overflow:auto;padding:6px;border:1px solid var(--lv-border);border-radius:11px;background:var(--lv-dropdown);box-shadow:var(--lv-shadow-high);z-index:120;transform-origin:left top;animation:lvPopIn .16s cubic-bezier(.4,0,.2,1) both}
@keyframes lvPopIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ops-app .lv .v3-filter-option{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;min-height:42px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--lv-text);font:500 13px/1.5 var(--sans);text-align:left;white-space:nowrap;cursor:pointer;transition:background-color 120ms ease,color 120ms ease}
.ops-app .lv .v3-filter-option:hover,.ops-app .lv .v3-filter-option:focus-visible{background:var(--lv-surface-2);outline:0}
.ops-app .lv .v3-filter-option.is-selected{background:var(--lv-selected-bg);color:var(--lv-selected-text);box-shadow:var(--lv-shadow-xs)}
.ops-app .lv .v3-filter-check{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;color:transparent}
.ops-app .lv .v3-filter-option.is-selected .v3-filter-check{color:var(--lv-accent)}
.ops-app .lv .lv-option-count{min-width:22px;color:var(--lv-subtle);font-size:11.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.ops-app .lv .v3-filter-option.is-selected .lv-option-count{color:var(--lv-accent)}
.ops-app .lv .v3-results-count{display:inline-flex;align-items:center;align-self:center;gap:8px;min-height:32px;margin:0 0 0 auto;padding:0;color:var(--lv-subtle);font-size:11.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.ops-app .lv .v3-results-count::before{content:"";width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:var(--lv-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--lv-accent) 18%,transparent)}

/* Rows (v5-record-list / v5-record-row) */
.ops-app .lv .v5-record-list{overflow:hidden;border:1px solid var(--lv-border);border-radius:14px;background:var(--lv-surface);box-shadow:var(--lv-shadow-xs)}
.ops-app .lv .v5-record-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-height:72px;padding:15px 18px;border-bottom:1px solid var(--lv-border-subtle);color:var(--lv-text);cursor:pointer;transition:background-color .15s}
.ops-app .lv .lv-payment-entry,.ops-app .lv .lv-payment-card-entry{position:relative;min-width:0}
.ops-app .lv .lv-payment-entry .v5-record-row{padding-right:126px}
.ops-app .lv .lv-payment-card-entry .v5-record-card{padding-bottom:47px}
.ops-app .lv .v5-record-row:last-child{border-bottom:0}
.ops-app .lv .v5-record-row:hover{background:var(--lv-accent-faint)}
.ops-app .lv .v5-record-row:focus-visible{position:relative;z-index:1;outline:2px solid var(--lv-accent);outline-offset:-2px}
.ops-app .lv .v5-record-no{display:grid;width:88px;font-size:13px;font-weight:700;line-height:1.5;font-variant-numeric:tabular-nums}
.ops-app .lv .v5-record-no small{color:var(--lv-subtle);font-size:11px;font-weight:600}
.ops-app .lv .v5-record-who{display:grid;flex:1;min-width:140px}
.ops-app .lv .v5-record-who strong{overflow:hidden;font-size:14px;font-weight:600;line-height:1.5;text-overflow:ellipsis;white-space:nowrap}
.ops-app .lv .v5-record-who small{overflow:hidden;color:var(--lv-muted);font-size:12px;line-height:1.5;text-overflow:ellipsis;white-space:nowrap}
.ops-app .lv .v5-record-date{display:grid;min-width:80px;color:var(--lv-muted);font-size:12px;line-height:1.5;white-space:nowrap}
.ops-app .lv .v5-record-date small{color:var(--lv-subtle);font-size:11px}
.ops-app .lv .v5-record-amount{display:grid;min-width:90px;font-size:14px;font-weight:700;line-height:1.5;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ops-app .lv .v5-record-amount small{color:var(--lv-subtle);font-size:11px;font-weight:400}
.ops-app .lv .v5-record-row .v5-status-pill{min-width:66px}
.ops-app .lv .lv-due.is-overdue{color:var(--lv-error)}
.ops-app .lv .lv-paid{color:var(--ok)}
.ops-app .lv .lv-accent{color:var(--lv-accent)}
.ops-app .lv .lv-go{color:var(--lv-accent);font-size:12px;font-weight:600;white-space:nowrap}
.ops-app .lv .lv-none{color:var(--lv-subtle)}
.ops-app .lv .lv-pay-date{min-width:92px;font-size:13px}
.ops-app .lv .lv-pay-ref{min-width:110px}

/* Cards (v5-record-grid / v5-record-card) */
.ops-app .lv .v5-record-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.ops-app .lv .v5-record-card{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:184px;padding:18px;border:1px solid var(--lv-border);border-radius:14px;background:var(--lv-surface);box-shadow:var(--lv-shadow-xs);color:var(--lv-text);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.ops-app .lv .v5-record-card:hover,.ops-app .lv .v5-record-card:focus-visible{border-color:color-mix(in srgb,var(--lv-accent) 42%,var(--lv-border));box-shadow:var(--lv-shadow-medium);outline:0}
.ops-app .lv .v5-record-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ops-app .lv .v5-record-card .v5-record-no{display:block;width:auto;font-weight:800}
.ops-app .lv .v5-record-card .v5-record-no small{margin-left:2px}
.ops-app .lv .v5-record-card .v5-record-who{flex:none;min-width:0}
.ops-app .lv .v5-record-card .v5-record-who strong{font-size:15px;font-weight:700}
.ops-app .lv .v5-record-card .v5-record-who small{margin-top:2px;line-height:1.5}
.ops-app .lv .v5-record-card-bottom{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--lv-border-subtle)}
.ops-app .lv .v5-record-card-bottom>span{display:grid;color:var(--lv-subtle);font-size:12px;line-height:1.5}
.ops-app .lv .v5-record-card-bottom>span small{font-size:11px}
.ops-app .lv .v5-record-card-bottom>strong{font-size:16px;font-weight:900;line-height:1.5;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Empty state (v3-empty) */
.ops-app .lv .v3-empty{display:grid;place-items:center;min-height:230px;padding:32px 20px;border:1px dashed var(--lv-accent-border);border-radius:14px;background:var(--lv-surface);box-shadow:var(--lv-shadow-medium);text-align:center}
.ops-app .lv .v3-empty-icon{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 12px;border-radius:16px;background:var(--lv-accent-soft);color:var(--lv-accent);font-size:22px;font-weight:800}
.ops-app .lv .v3-empty strong{display:block;color:var(--lv-text);font-size:15px;font-weight:700}
.ops-app .lv .v3-empty p{max-width:390px;margin:6px auto 0;color:var(--lv-muted);font-size:13px;line-height:1.5}
.ops-app .lv .lv-empty-action{margin-top:14px}

/* Pick-an-invoice banner and the season totals on Payments */
.ops-app .lv-banner{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 18px;padding:12px 14px;border:1px solid var(--lv-accent-border);border-radius:10px;background:var(--lv-accent-faint);font-size:13px}
.ops-app .lv-banner span{color:var(--lv-muted)}
.ops-app .lv-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:0 0 18px}
.ops-app .lv-stat{display:grid;gap:4px;min-width:0;padding:12px 14px;border:1px solid var(--lv-border);border-radius:12px;background:var(--lv-surface);box-shadow:var(--lv-shadow-xs)}
.ops-app .lv-stat small{overflow:hidden;color:var(--lv-subtle);font-size:9px;font-weight:700;letter-spacing:.08em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
.ops-app .lv-stat strong{font-size:16px;font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums}
.ops-app .lv-stat-main strong{color:var(--lv-accent)}

/* ---------------- 761–1080: Invoice Flow stacks the customers header ---------------- */
@media (min-width:761px) and (max-width:1080px){
  .ops-app .customers-v2-row{grid-template-columns:42px minmax(0,1fr) auto}
  .ops-app .customers-v2-row .lv-actions{grid-column:2/-1;justify-self:start}
}

/* ---------------- phone (Invoice Flow's 760 and 640 breakpoints) ---------------- */
@media (max-width:760px){
  .ops-app .customers-v2,.ops-app .lv-records{padding-bottom:18px}
  .ops-app .lv-head{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:54px 44px;gap:14px;height:112px;margin-bottom:18px}
  .ops-app .lv-head .lv-head-title{height:32px;font-size:30px;line-height:32px}
  .ops-app .lv-head .lv-head-sub{height:18px;margin-top:4px;font-size:13px;line-height:18px}
  .ops-app .lv-head-actions{gap:6px;height:44px}
  .ops-app .lv-head-button-slot{flex:1 1 0%;width:auto;min-width:0;height:42px}
  .ops-app .lv-head .v3-primary-button.lv-head-button{height:42px;min-height:42px;padding:0 12px;font-size:12.5px}
  .ops-app .customers-v2-tools{gap:8px}
  .ops-app .customers-v2-search{order:1;flex:1 1 100%;width:100%;min-width:0}
  .ops-app .customers-v2-filters{order:2}
  .ops-app .customers-v2-count{order:3;margin-left:0}
  .ops-app .customers-v2-row{grid-template-columns:38px minmax(0,1fr) auto;gap:10px}
  .ops-app .customers-v2-row-copy{grid-column:2/-1}
  .ops-app .customers-v2-avatar{width:38px;height:38px;border-radius:12px}
  .ops-app .customers-v2-row .customers-v2-avatar{align-self:start}
  .ops-app .customers-v2-row-copy .lv-note{display:none}
  .ops-app .lv-name-line{flex-wrap:wrap;gap:2px 8px}
  .ops-app .customers-v2-row-status{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;justify-items:start;gap:4px 8px;min-width:0}
  .ops-app .customers-v2-row-status .lv-money-label,.ops-app .customers-v2-row-status .lv-money-note{display:none}
  .ops-app .customers-v2-row-status>strong{font-size:12px}
  .ops-app .customers-v2-row-status small{display:none}
  .ops-app .customers-v2-row-status em{margin-left:auto}
  .ops-app .customers-v2-row .lv-actions{grid-column:3;grid-row:2;gap:4px}
  .ops-app .customers-v2-row .lv-action.lv-action-quote{width:34px;padding:0}
  .ops-app .customers-v2-row .lv-action-quote span{display:none}
  .ops-app .customers-v2-card-grid{grid-template-columns:1fr}

  .ops-app .lv .v3-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:9px}
  .ops-app .lv .v3-toolbar>.v3-filter-menu{width:auto;min-width:0}
  .ops-app .lv .v3-filter-trigger{min-height:44px}
  .ops-app .lv .v3-filter-popover{right:0;min-width:0}
  .ops-app .lv .v3-toolbar>.v3-filter-menu:nth-child(even) .v3-filter-popover{left:auto;right:0;min-width:224px}
  .ops-app .lv .v3-toolbar>.v3-results-count{grid-column:1/-1;margin:2px 0 0}
  .ops-app .lv-leads .v3-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ops-app .lv-leads .v3-toolbar>.v3-filter-menu:nth-child(even) .v3-filter-popover{left:0;right:auto}
  .ops-app .lv-leads .v3-toolbar>.v3-filter-menu:nth-child(3) .v3-filter-popover{left:auto;right:0}
  .ops-app .lv-leads .v3-filter-trigger{padding:7px 8px 7px 10px;column-gap:6px}
  .ops-app .lv .v5-record-grid{grid-template-columns:1fr}
  .ops-app .lv .v5-record-row{padding-inline:15px}
}
@media (max-width:430px){
  .ops-app .lv .v5-record-card{min-height:168px}
  .ops-app .lv .v5-record-row{gap:7px 10px}
}
@media (prefers-reduced-motion:reduce){
  .ops-app .lv .v3-filter-popover{animation:none}
  .ops-app .lv .v3-filter-chevron,.ops-app .customers-v2-card{transition:none}
}

/* ops.css tints every link in .content gold with a long :not() chain; the #id in :not() outranks it. */
.ops-app .lv a:not(#lv){color:inherit}
.ops-app .lv a.v3-primary-button:not(#lv),.ops-app .lv a.v3-primary-button:not(#lv):hover{color:var(--lv-on-accent)}
.ops-app .lv a.customers-v2-filter:not(#lv){color:var(--lv-muted)}
.ops-app .lv a.customers-v2-filter:not(#lv):hover{color:var(--lv-text)}
.ops-app .lv a.customers-v2-filter.is-active:not(#lv){color:var(--lv-selected-text)}
.ops-app .lv a.lv-action:not(#lv){color:var(--lv-text)}
.ops-app .lv a.v3-filter-option:not(#lv){color:var(--lv-text)}
.ops-app .lv a.v3-filter-option.is-selected:not(#lv){color:var(--lv-selected-text)}
.ops-app .lv a.lv-address:not(#lv):hover{color:var(--lv-text)}

/* To Order (ops/to-order.php): a to-do list of materials. Same list/card parts as the other lists. */
.ops-app .to-order .to-list{display:grid;gap:8px}
.ops-app .to-order .to-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.ops-app .to-order .to-item{position:relative;display:grid;grid-template-columns:40px 64px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.ops-app .to-order .to-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.ops-app .to-order .to-item:hover,.ops-app .to-order .to-card:hover,.ops-app .to-order .to-item:focus-within,.ops-app .to-order .to-card:focus-within{border-color:var(--line-2)}
.ops-app .to-order .to-open{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0;border-radius:inherit;background:transparent;cursor:pointer}
.ops-app .to-order .to-open:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.ops-app .to-order .to-check-form,.ops-app .to-order .to-main a{position:relative;z-index:2}
.ops-app .to-order .to-card-top,.ops-app .to-order .to-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ops-app .to-order .to-card-bottom{margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.ops-app .to-order .to-qty{font:700 16px var(--sans);color:var(--gold-soft);font-variant-numeric:tabular-nums}
.ops-app .to-order .to-main{min-width:0}
.ops-app .to-order .to-main strong{display:block;font:600 15.5px var(--sans);color:var(--paper)}
.ops-app .to-order .to-main small{display:block;margin-top:2px;color:var(--muted);font:13px var(--sans);overflow:hidden;text-overflow:ellipsis}
.ops-app .to-order .to-main small a:not(#lv){color:var(--gold-soft);text-decoration:underline;text-underline-offset:2px}
.ops-app .to-order .to-note{margin:6px 0 0;color:var(--muted);font:13px var(--sans)}
.ops-app .to-order .to-muted{color:var(--muted-2)}
.ops-app .to-order .to-date{color:var(--muted-2);font:12.5px var(--sans);white-space:nowrap}
.ops-app .to-order .to-check-form{margin:0;display:inline}
.ops-app .to-order .to-check{display:grid;place-items:center;width:34px;height:34px;border:0;background:transparent;cursor:pointer;padding:0}
.ops-app .to-order .to-box{display:grid;place-items:center;width:24px;height:24px;border:2px solid var(--muted-2);border-radius:7px;font-size:15px;line-height:1;color:#0a1020}
.ops-app .to-order .to-check:hover .to-box{border-color:var(--gold)}
.ops-app .to-order .to-check.is-on .to-box{border-color:var(--ok);background:var(--ok)}
.ops-app .to-order .is-done .to-main strong,.ops-app .to-order .is-done .to-qty{color:var(--muted-2);text-decoration:line-through}
/* An item's photo (installers add them from the crew app, decided with Brendan 2026-09-27): opens full size. */
.ops-app .to-order .to-item.has-photo{grid-template-columns:40px 64px minmax(0,1fr) 44px auto}
.ops-app .to-order .to-photo{position:relative;z-index:2;display:block;width:44px;height:44px;border-radius:9px;overflow:hidden;background:var(--line)}
.ops-app .to-order .to-card-photo{position:relative;z-index:2;display:block;height:150px;margin:-16px -16px 0;border-radius:13px 13px 0 0;overflow:hidden;background:var(--line)}
.ops-app .to-order .to-photo img,.ops-app .to-order .to-card-photo img{display:block;width:100%;height:100%;object-fit:cover}
.ops-app .to-order .is-done .to-photo,.ops-app .to-order .is-done .to-card-photo{opacity:.6}
@media(max-width:760px){
  .ops-app .to-order .to-item{grid-template-columns:34px 48px minmax(0,1fr);row-gap:4px}
  .ops-app .to-order .to-item .to-date{grid-column:3}
  .ops-app .to-order .to-item.has-photo{grid-template-columns:34px 48px minmax(0,1fr) 44px}
  .ops-app .to-order .to-item.has-photo .to-photo{grid-column:4;grid-row:1 / span 2}
}
.ops-app .to-dialog{box-sizing:border-box;position:fixed;inset:0;width:min(560px,calc(100vw - 32px));max-width:none;max-height:calc(var(--to-vv-height,100dvh) - 32px);margin:auto;padding:24px;border:1px solid var(--line-2);border-radius:18px;background:linear-gradient(180deg,var(--panel),var(--panel-2));box-shadow:0 24px 70px rgba(0,0,0,.5);color:var(--paper);font-family:var(--sans);overflow:visible}
.ops-app .to-dialog[open]{display:flex;flex-direction:column}
.ops-app .to-dialog::backdrop{background:rgba(4,8,18,.76)}
.ops-app .to-dialog h2{flex:none;font:700 22px/1.2 var(--sans);margin:0 0 20px;color:var(--paper)}
.ops-app .to-form{display:flex;flex-direction:column;min-height:0;flex:1}
.ops-app .to-form-grid{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:16px 12px;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 2px 2px 0}
.ops-app .to-form-grid label,.ops-app .to-form-grid .to-label{display:block;margin:0 0 7px;font:600 13px/1.3 var(--sans);color:var(--paper)}
.ops-app .to-form-grid label small,.ops-app .to-form-grid .to-label small{font-weight:400;color:var(--muted)}
.ops-app .to-form-grid input,.ops-app .to-form-grid .to-customer-picker{box-sizing:border-box;display:block;width:100%;min-width:0;min-height:46px;margin:0;border:1px solid var(--line-2);border-radius:10px;background:var(--panel-2);padding:11px 12px;color:var(--paper);font:15px/1.35 var(--sans)}
.ops-app .to-form-grid input::placeholder{color:var(--muted-2)}
.ops-app .to-form-grid input:focus,.ops-app .to-form-grid .to-customer-picker:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.ops-app .to-form-grid .to-customer-picker{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;cursor:pointer}
.ops-app .to-form-grid .to-customer-picker span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ops-app .to-form-grid .to-customer-picker span:last-child{flex:none;color:var(--gold-soft);font-size:20px;line-height:1}
.ops-app .to-form-grid .to-f-lead,.ops-app .to-form-grid .to-f-job,.ops-app .to-form-grid .to-f-note{grid-column:1/-1}
.ops-app .to-form-actions{display:flex;gap:10px;align-items:center;flex:none;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.ops-app .to-form-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 17px;border-radius:10px;font:600 14px var(--sans);cursor:pointer}
.ops-app .to-form-actions .to-submit{border:1px solid var(--gold);background:var(--gold);color:#201a0c}
.ops-app .to-form-actions .to-submit:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
.ops-app .to-form-actions .to-delete{margin-right:auto;border:1px solid #9b5858;background:transparent;color:#ffb5b5}
.ops-app .to-form-actions .to-delete:hover{border-color:#ffb5b5;background:rgba(155,88,88,.14)}
.ops-app .to-form-actions .to-cancel{border:1px solid var(--line-2);background:transparent;color:var(--paper)}
.ops-app .to-form-actions .to-cancel:hover{border-color:var(--gold-soft);color:var(--gold-soft)}
.ops-app .to-form-actions button:focus-visible{outline:3px solid var(--gold-soft);outline-offset:2px}
.ops-app .to-dialog .to-inline{display:none}
@media(max-width:600px){
  .ops-app .to-dialog{inset:auto 0 auto 0;top:calc(var(--to-vv-top,0px) + var(--to-vv-height,100dvh) - min(650px,var(--to-vv-height,100dvh)));width:100%;height:min(650px,var(--to-vv-height,100dvh));max-height:var(--to-vv-height,100dvh);margin:0;padding:20px 18px calc(12px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0}
  .ops-app .to-dialog h2{margin-bottom:17px}
  .ops-app .to-form-grid{grid-template-columns:minmax(0,1fr);gap:13px}
  .ops-app .to-form-grid input,.ops-app .to-form-grid .to-customer-picker{min-height:48px;font-size:16px}
  .ops-app .to-form-actions{margin-top:auto;padding-top:12px}
  .ops-app .to-form-actions .to-submit{flex:1}
  .ops-app .to-form-actions .to-cancel{min-width:90px}
  body.ops-app .to-dialog .bc-combobox-portal{top:calc(var(--to-vv-top,0px) + var(--to-vv-height,100dvh) - min(400px,var(--to-vv-height,100dvh)))!important;bottom:auto!important;height:min(400px,var(--to-vv-height,100dvh));max-height:min(400px,var(--to-vv-height,100dvh))!important;background:#151f32!important;box-shadow:0 0 0 100vmax rgba(4,8,18,.72),0 -18px 40px rgba(0,0,0,.35)!important;animation:none!important}
}

/* ops/builder.css */
/* ============================================================
   Light Ops document builder
   ------------------------------------------------------------
   Invoice Flow V5's builder ("ib3"): its inline <style> rules,
   v5.css (the mobile-native builder + density refinement),
   builder-v5-popup.css (customer popup) and the bc-combobox
   picker styles. Values are the ones that actually win in
   Invoice Flow's cascade (measured with computed styles), then
   re-themed to the Light Guys navy & gold. The sheet is a navy
   panel, inputs are dark, the accent is gold.

   Everything is scoped to .ops-app. Loaded after ops.css.
   Phone breakpoint: 760px, the same as Invoice Flow.
   ============================================================ */

/* ---------------- Invoice Flow's tokens, mapped to Light Ops ---------------- */
.ops-app{
  --surface-primary:#111c33;
  --surface-secondary:#16233f;
  --surface-elevated:#14213b;
  --surface-subtle-contrast:#081021;
  --app-bg:var(--ink);
  --input-bg:#0c1527;
  --dropdown-bg:#13203a;
  --border-default:rgba(190,205,235,.16);
  --border-subtle:rgba(190,205,235,.09);
  --border-strong:rgba(190,205,235,.34);
  --input-border:rgba(190,205,235,.24);
  --text-primary:var(--paper);
  --text-secondary:#e3dccd;
  --text-muted:var(--muted);
  --text-subtle:var(--muted-2);
  --brand-accent:var(--gold);
  --brand-accent-soft:rgba(243,210,138,.14);
  --brand-accent-faint:rgba(243,210,138,.055);
  --brand-accent-border:rgba(243,210,138,.34);
  --brand-accent-text:var(--gold);
  --brand-accent-strong:var(--gold);
  --action-primary:var(--gold);
  --action-primary-hover:var(--gold-soft);
  --action-primary-text:#2a1d05;
  --focus-ring:rgba(243,210,138,.22);
  --status-error:var(--status-bad-text);
  --status-error-bg:var(--status-bad-tint);
  --status-warning:var(--status-action-text);
  --status-success:var(--ok);
  --topbar-h:60px; /* the desktop top bar, which sits above the scroller */
  --topbar-bg:rgba(12,20,38,.82);
  --font-heading:var(--sans); /* owner's rule: quote and invoice text is always the sans, never the serif */
  --font-mono:var(--sans); /* numbers and the doc number stay in the sans too, with tabular figures */
  --font-ui:var(--sans);
  --shadow-xs:0 3px 10px rgba(0,0,0,.22);
  --shadow-low:0 3px 10px rgba(0,0,0,.26);
  --shadow-medium:0 14px 38px rgba(0,0,0,.34);
  --shadow-high:0 28px 72px rgba(0,0,0,.55);
  --backdrop-bg:rgba(3,6,14,.62);
  --dur-fast:120ms;--dur-base:160ms;--dur-slow:240ms;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.215,.61,.355,1);
}

/* ---------------- takeover surface ---------------- */
.ops-app .content.ib3-takeover{max-width:none!important;width:100%!important;padding:0!important;margin:0!important}
.ops-app .ib3-root{color:var(--text-primary);font-family:var(--font-ui);font-size:14px}
.ops-app .ib3-root button{font-family:var(--font-ui);font-weight:500}
.ops-app .ib3-root input,.ops-app .ib3-root [data-doc-no],.ops-app .ib3-root [data-t],.ops-app .ib3-root [data-amt],.ops-app .ib3-paper{font-variant-numeric:tabular-nums}

/* Form fields: Invoice Flow's global field finish (v5.css), dark. */
.ops-app .ib3-root input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.ops-app .ib3-root textarea,
.ops-app .bc-combo-trigger{
  margin:0;
  border:1px solid var(--input-border)!important;
  border-radius:8px!important;
  background:var(--input-bg)!important;
  color:var(--text-primary);
  font-family:var(--font-ui);
  font-weight:400;
  box-shadow:none;
  transition:border-color 160ms cubic-bezier(.2,.7,.2,1),background-color 160ms cubic-bezier(.2,.7,.2,1),box-shadow 160ms cubic-bezier(.2,.7,.2,1)!important;
}
.ops-app .ib3-root input:not([type=hidden]):not([type=checkbox]):not([type=radio]):hover,
.ops-app .ib3-root textarea:hover,
.ops-app .bc-combo-trigger:hover{border-color:var(--border-strong)!important}
.ops-app .ib3-root input:not([type=hidden]):not([type=checkbox]):not([type=radio]):focus,
.ops-app .ib3-root textarea:focus{border-color:var(--brand-accent)!important;background-color:var(--input-bg)!important;box-shadow:0 0 0 3px var(--focus-ring)!important;outline:none!important}
.ops-app .ib3-root input::placeholder,.ops-app .ib3-root textarea::placeholder{color:var(--text-subtle);opacity:1}
.ops-app .ib3-root input[readonly]:not([type=date]),.ops-app .ib3-root textarea[readonly]{opacity:1;border-style:solid}
.ops-app .ib3-form.is-locked input:not([type=hidden]),.ops-app .ib3-form.is-locked textarea{color:var(--text-secondary)}
.ops-app .ib3-root input[type=date]{color-scheme:dark;width:auto}
/* [hidden] must beat the phone layout's display rules below. */
html body.ops-app .content.ib3-takeover [hidden][hidden]{display:none!important}
.ops-app .content .ib3-root label>input,.ops-app .content .ib3-root label>textarea{margin-top:0}

/* ---------------- toolbar ---------------- */
.ops-app .ib3-toolbar{position:sticky;top:0;z-index:30;color:var(--text-primary)} /* the top bar sits above the scroller now */
.ops-app .ib3-toolbar button{white-space:nowrap}
.ops-app .ib3-toolbar>.ib3-toolbar-left{min-width:0;overflow:hidden}
.ops-app .ib3-topbar-title{flex:1 1 auto;min-width:0}
.ops-app .ib3-topbar-pill{flex:none}
@media (max-width:1180px){.ops-app .content.ib3-takeover .ib3-topbar-pill{display:none!important}}
@media (max-width:980px){.ops-app .content.ib3-takeover .ib3-topbar-title{display:none!important}}
.ops-app .ib3-toolbar-more{position:relative}

/* ---------------- controls (Invoice Flow's inline <style>) ---------------- */
.ops-app .ib3-field{border:1px solid transparent;border-radius:9px;background:transparent;font:inherit;transition:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.ops-app .ib3-input{border:1px solid var(--input-border);border-radius:10px;background:var(--input-bg);font:inherit;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.ops-app .ib3-input:hover{border-color:var(--border-strong)}
.ops-app .ib3-input:focus-within{border-color:var(--brand-accent);box-shadow:0 0 0 3px var(--focus-ring)}
.ops-app span.ib3-input>input{border-color:transparent!important;background:transparent!important;box-shadow:none!important;padding-right:20px!important}
.ops-app textarea.ib3-input{border-radius:8px!important}
.ops-app .ib3-step{display:grid;place-items:center;width:24px;height:28px;flex:none;padding:1px 6px;border:0;border-radius:8px;background:transparent;color:var(--text-subtle);cursor:pointer;font-size:15px;font-weight:500;opacity:0;transition:opacity var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.ops-app .ib3-item-row:hover .ib3-step,.ops-app .ib3-item-row:focus-within .ib3-step{opacity:1}
.ops-app .ib3-step:hover{background:var(--surface-secondary);color:var(--text-primary)}
.ops-app .ib3-row-x{padding:1px 6px;opacity:0;background:transparent;color:var(--text-subtle);transition:opacity var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.ops-app .ib3-item-row:hover .ib3-row-x,.ops-app .ib3-item-row:focus-within .ib3-row-x{opacity:1}
.ops-app .ib3-row-x:hover{background:var(--status-error-bg)!important;color:var(--status-error)!important}
.ops-app .ib3-item-row{position:relative;transition:background-color var(--dur-fast) var(--ease-standard)}
.ops-app .ib3-item-row:hover{background:linear-gradient(90deg,transparent,var(--surface-primary) 8%,var(--surface-primary) 92%,transparent)}
.ops-app .ib3-segwrap{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--surface-secondary)}
.ops-app .ib3-seg{border:0!important;border-radius:8px!important;background:transparent!important;padding:7px 14px!important;font-size:13px!important;font-weight:500!important;color:var(--text-muted)!important;cursor:pointer;min-height:0!important;box-shadow:none!important;transition:all var(--dur-base) var(--ease-standard)}
.ops-app .ib3-seg:hover{color:var(--text-primary)!important}
.ops-app .ib3-seg.on{background:var(--surface-primary)!important;color:var(--text-primary)!important;box-shadow:var(--shadow-low)!important}
.ops-app .ib3-minitab{border:0!important;border-radius:6px!important;background:transparent!important;padding:4px 9px!important;font-size:11.5px!important;font-weight:500!important;color:var(--text-muted)!important;cursor:pointer;min-height:0!important;box-shadow:none!important;transition:all var(--dur-base) var(--ease-standard)}
.ops-app .ib3-minitab.on{background:var(--surface-primary)!important;color:var(--text-primary)!important;box-shadow:var(--shadow-low)!important}
.ops-app .ib3-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--action-primary)!important;color:var(--action-primary-text)!important;border:1px solid var(--action-primary)!important;border-radius:10px!important;font-weight:600!important;cursor:pointer;box-shadow:var(--shadow-xs)!important;transition:background-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);text-decoration:none}
.ops-app .ib3-primary:hover{background:var(--action-primary-hover)!important;border-color:var(--action-primary-hover)!important}
.ops-app .ib3-primary:active{transform:scale(.985)}
.ops-app .ib3-primary:disabled,.ops-app .ib3-primary[aria-disabled="true"]{opacity:.4;cursor:default;transform:none}
.ops-app .ib3-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--surface-primary)!important;border:1px solid var(--input-border)!important;border-radius:10px!important;font-weight:500!important;color:var(--text-primary)!important;cursor:pointer;box-shadow:var(--shadow-xs)!important;transition:border-color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard);text-decoration:none}
.ops-app .ib3-ghost:hover{border-color:var(--border-strong)!important;background:var(--surface-secondary)!important}
.ops-app .ib3-ghost:disabled{opacity:.5;cursor:default}
.ops-app .ib3-link{display:inline-flex;align-items:center;background:none!important;border:0!important;padding:0!important;font-size:12.5px;font-weight:500!important;color:var(--brand-accent-strong)!important;cursor:pointer;box-shadow:none!important;min-height:0!important;text-decoration:none}
.ops-app .ib3-link:hover{color:var(--text-primary)!important}
.ops-app .ib3-chip-dep{font-weight:500!important;border-radius:8px!important}
.ops-app .ib3-chip-dep:hover{border-color:var(--brand-accent)!important}
.ops-app .ib3-chip-dep.on{background:var(--brand-accent-text)!important;border-color:var(--brand-accent-text)!important;color:var(--action-primary-text)!important;box-shadow:var(--shadow-xs)}
.ops-app .ib3-customer-edit{padding:1px 6px;border-radius:8px!important;border-color:var(--border-default)!important}
.ops-app .ib3-customer-edit:hover{border-color:var(--brand-accent)!important;color:var(--brand-accent-strong)!important;background:var(--brand-accent-faint)!important}
.ops-app .ib3-sheet :focus-visible{outline-color:var(--focus-ring)}

/* ---------------- sheet ---------------- */
.ops-app .ib3-sheet{color:var(--text-primary)}
.ops-app .ib3-title{font-weight:700!important;color:var(--text-primary)}
.ops-app .ib3-title::placeholder{font-weight:500}
.ops-app .ib3-customer-note{margin:8px 0 0;font-size:12px;color:var(--text-subtle);line-height:1.5}
.ops-app .ib3-customer-note a{color:var(--gold-soft);font-weight:600}
.ops-app .ib3-customer-note span{display:block;margin-top:2px}

/* Banners carried over from the old quote page, in the sheet's grammar. */
.ops-app .ib3-banner{margin-bottom:18px;padding:12px 14px;border:1px solid var(--border-default);border-radius:10px;background:var(--surface-secondary);font-size:13px}
.ops-app .ib3-banner strong{display:block;font-size:13.5px;font-weight:700}
.ops-app .ib3-banner p{margin:6px 0 0;color:var(--text-primary);font-size:14px}
.ops-app .ib3-banner small{display:block;margin-top:4px;color:var(--text-muted);font-size:12.5px}
.ops-app .ib3-banner--amber{border-color:rgba(255,159,10,.5);background:rgba(255,159,10,.08)}.ops-app .ib3-banner--amber strong{color:var(--status-action-text)}
.ops-app .ib3-banner--ok{border-color:rgba(48,209,88,.4);background:rgba(48,209,88,.08)}.ops-app .ib3-banner--ok strong{color:var(--ok)}
.ops-app .ib3-banner--coral{border-color:rgba(255,69,58,.42);background:rgba(255,69,58,.08)}.ops-app .ib3-banner--coral strong{color:var(--status-bad-text)}
.ops-app .ib3-banner--violet{border-color:rgba(10,132,255,.38);background:rgba(10,132,255,.08)}.ops-app .ib3-banner--violet strong{color:var(--star)}

/* Template menu (Invoice Flow's v3-filter-menu). */
.ops-app .v3-filter-menu{position:relative;min-width:188px;z-index:12}
.ops-app .v3-filter-menu:has(.v3-filter-popover:not([hidden])){z-index:40}
.ops-app .v3-filter-trigger{display:grid;grid-template-columns:minmax(0,1fr) 20px;grid-template-rows:auto auto;column-gap:12px;width:100%;min-height:56px;padding:8px 11px 8px 13px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--surface-primary);box-shadow:var(--shadow-xs);color:var(--text-primary);cursor:pointer;text-align:left;font-family:var(--font-ui);transition:border-color 150ms ease,background-color 150ms ease,box-shadow 150ms ease}
.ops-app .v3-filter-trigger:hover{border-color:var(--border-strong)}
.ops-app .v3-filter-trigger:focus-visible,.ops-app .v3-filter-trigger[aria-expanded="true"]{border-color:var(--brand-accent);box-shadow:0 0 0 3px var(--focus-ring),var(--shadow-low);outline:0}
.ops-app .v3-filter-label{grid-column:1;color:var(--text-subtle);font-size:9px;font-weight:800;line-height:1.15;letter-spacing:.13em;text-transform:uppercase}
.ops-app .v3-filter-value{grid-column:1;overflow:hidden;font-size:13px;font-weight:700;line-height:22px;text-overflow:ellipsis;white-space:nowrap}
.ops-app .v3-filter-chevron{grid-column:2;grid-row:1/3;align-self:center;display:grid;place-items:center;width:20px;height:20px;color:var(--text-muted);transition:transform 160ms ease,color 160ms ease}
.ops-app .v3-filter-trigger[aria-expanded="true"] .v3-filter-chevron{color:var(--brand-accent-strong);transform:rotate(180deg)}
.ops-app .v3-filter-popover{position:absolute;left:0;top:calc(100% + 8px);min-width:224px;padding:6px;border:1px solid var(--border-default);border-radius:12px;background:var(--dropdown-bg);box-shadow:var(--shadow-high);z-index:120;overflow:hidden;animation:v3FilterIn 140ms cubic-bezier(.2,.8,.2,1)}
.ops-app .v3-filter-option{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:9px;width:100%;min-height:42px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--text-primary);cursor:pointer;font-family:var(--font-ui);font-size:13px;font-weight:500;text-align:left;transition:background-color 120ms ease,color 120ms ease}
.ops-app .v3-filter-option:hover,.ops-app .v3-filter-option:focus-visible{background:var(--surface-secondary);outline:0}
.ops-app .v3-filter-empty{padding:12px 10px;color:var(--text-muted);font-size:12px;line-height:1.45}
.ops-app .v3-template-option .v3-template-icon,.ops-app .ib3-template-sheet-foot .v3-template-icon{display:grid;place-items:center;width:20px;height:20px;color:var(--brand-accent-strong);font-weight:800}
.ops-app .ib3-template-menu{min-width:210px;flex:none}
.ops-app .ib3-template-menu .v3-filter-trigger{min-height:44px;padding:6px 10px 6px 12px}
.ops-app .ib3-template-menu .v3-filter-label{font-size:8px}
.ops-app .ib3-template-menu .v3-filter-value{font-size:12.5px;line-height:19px}
.ops-app .ib3-template-menu .v3-filter-popover{right:0;left:auto;min-width:240px}
.ops-app .ib3-template-menu .v3-template-option{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:9px;min-height:42px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--text-primary);font-size:13px;font-weight:500;text-align:left}
.ops-app .ib3-template-menu .v3-template-option>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ops-app .ib3-template-sheet-scrim,.ops-app .ib3-template-sheet-head{display:none}
.ops-app .ib3-template-sheet-list{display:grid;gap:4px}
.ops-app .ib3-template-sheet-foot{margin-top:4px;padding-top:4px;border-top:1px solid var(--border-subtle)}
.ops-app .ib3-template-sheet-foot .v3-filter-option{color:var(--brand-accent-strong)}
.ops-app .ib3-tpl-short{display:none}
@keyframes v3FilterIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------------- customer + item pickers (portal is appended to <body>) ---------------- */
.ops-app .bc-combo-trigger{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:9px 11px;color:var(--text-primary);cursor:pointer;text-align:left;font-size:14px;font-weight:500}
.ops-app .bc-combo-trigger:focus-visible{border-color:var(--brand-accent)!important;outline:2px solid var(--focus-ring);outline-offset:-1px}
.ops-app .bc-combo-trigger:disabled{cursor:default}
.ops-app .bc-combo-trigger strong,.ops-app .bc-combo-trigger small{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ops-app .bc-combo-trigger strong{font-size:13px;font-weight:700}
.ops-app .bc-combo-trigger small{margin-top:2px;color:var(--text-muted);font-size:11px}
.ops-app .bc-combo-chev{display:grid;place-items:center;flex:none;color:var(--text-muted)}
.ops-app .bc-combo-chev svg{display:block}
.ops-app .bc-empty-combo-trigger,.ops-app .bc-line-combo-trigger{justify-content:flex-start;width:auto;min-height:40px;padding:9px 13px;border:1px solid var(--action-primary)!important;border-radius:8px!important;background:var(--action-primary)!important;color:var(--action-primary-text)!important;box-shadow:var(--shadow-xs)!important;font-size:13px;font-weight:600}
.ops-app .bc-empty-combo-trigger:hover,.ops-app .bc-line-combo-trigger:hover{border-color:var(--action-primary-hover)!important;background:var(--action-primary-hover)!important;color:var(--action-primary-text)!important;box-shadow:var(--shadow-medium)!important}
.ops-app .bc-empty-combo-trigger:focus-visible,.ops-app .bc-line-combo-trigger:focus-visible{outline:3px solid var(--focus-ring)!important;outline-offset:2px!important}
.ops-app .bc-empty-combo-trigger .bc-combo-chev,.ops-app .bc-line-combo-trigger .bc-combo-chev{margin-left:2px;color:currentColor}

body.ops-app .bc-combobox-portal{z-index:100000!important;display:flex;flex-direction:column;gap:8px;padding:8px;border:1px solid var(--border-default);border-radius:14px!important;background:var(--dropdown-bg);box-shadow:var(--shadow-high)!important;overflow:hidden;color:var(--text-primary);font-family:var(--font-ui)}
body.ops-app .bc-combobox-search{display:flex;align-items:center;gap:8px;flex:none;min-height:38px;padding:0 10px;border:1px solid var(--input-border);border-radius:8px;background:var(--input-bg)}
body.ops-app .bc-combobox-search:focus-within{border-color:var(--brand-accent)}
body.ops-app .bc-combobox-search svg{flex:none;color:var(--text-subtle)}
body.ops-app .bc-combobox-search input{min-width:0;flex:1;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;outline:none;color:var(--text-primary);font:500 13px var(--font-ui)}
body.ops-app .bc-combobox-search input::placeholder{color:var(--text-subtle)}
body.ops-app .bc-combobox-search kbd{flex:none;padding:2px 5px;border:1px solid var(--border-default);border-radius:2px;color:var(--text-subtle);background:transparent;font:700 10px/1 var(--font-mono)}
body.ops-app .bc-combobox-menu{display:grid;gap:6px;min-height:0;flex:1 1 auto;overflow-x:hidden!important;overflow-y:auto;overscroll-behavior:contain}
body.ops-app .bc-combobox-footer{flex:none;padding-top:8px;margin-top:2px;border-top:1px solid var(--border-subtle)}
body.ops-app .bc-combobox-option{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;margin:0;padding:9px 11px;border:1px solid transparent;border-radius:10px!important;background:transparent;color:var(--text-primary);cursor:pointer;text-align:left;font-family:var(--font-ui);font-size:14px}
body.ops-app .bc-combobox-option:hover,body.ops-app .bc-combobox-option.is-active{border-color:var(--brand-accent);background:var(--brand-accent-faint)!important;outline:2px solid var(--focus-ring);outline-offset:-1px}
body.ops-app .bc-combobox-custom{border-color:var(--border-strong);border-style:dashed;color:var(--brand-accent-strong);font-size:13px;font-weight:700}
body.ops-app .bc-combobox-custom:hover,body.ops-app .bc-combobox-custom.is-active{background:var(--brand-accent-soft)!important}
body.ops-app .bc-combobox-plus{display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:999px;background:var(--brand-accent-soft);color:var(--brand-accent);font-weight:800}
body.ops-app .bc-combobox-empty{padding:18px 12px;color:var(--text-muted);font-size:13px;text-align:center}
body.ops-app .bc-combobox-option mark{background:var(--brand-accent-soft);color:var(--gold-soft);padding:0 1px}

/* ---------------- line items ---------------- */
.ops-app .ib3-line-grid{display:grid;grid-template-columns:minmax(110px,190px) minmax(120px,1fr) 104px minmax(76px,92px) minmax(80px,96px) 32px;gap:8px}
.ops-app .ib3-line-grid>*{min-width:0}
.ops-app .ib3-price-wrap{display:block;min-width:0}
.ops-app .ib3-price-wrap .ib3-price{display:block;width:100%;max-width:100%}
.ops-app .ib3-item-row .ib3-desc{width:auto;color:var(--text-primary)}
/* Product/Service cell: Invoice Flow's field geometry (44px, 11px 12px, 13px) as a picker trigger. */
.ops-app .ib3-cat-cell{display:grid;min-width:0}
.ops-app .ib3-cat-trigger{min-height:44px;padding:11px 10px 11px 12px!important;gap:6px!important;font-size:13px!important}
.ops-app .ib3-cat-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ops-app .ib3-cat-name[data-empty]{color:var(--text-subtle);font-weight:400}
.ops-app .ib3-cat-input{width:100%;min-height:44px;padding:11px 12px!important;font-size:13px!important;font-weight:600!important}
.ops-app .ib3-cat-static{display:block;padding:12px 0;font-size:13px;font-weight:600}
.ops-app .ib3-qty input{height:44px;min-height:44px;border-radius:8px!important;color:var(--text-primary)}
.ops-app .ib3-amt{color:var(--text-primary)}
.ops-app .ib3-add-actions{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0 0;border-top:1px solid var(--border-subtle)}
.ops-app .ib3-add-subject{min-height:40px;padding:8px 13px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface-primary);color:var(--brand-accent-strong);font:700 13px var(--font-ui);cursor:pointer}
.ops-app .ib3-add-subject:hover{background:var(--brand-accent-soft)}
.ops-app .ib3-add-subject:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.ops-app .ib3-subject-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 36px;align-items:end;gap:8px;margin:8px 0;padding:10px 10px 10px 14px;border:1px solid var(--brand-accent-border);border-left:3px solid var(--brand-accent);border-radius:10px;background:var(--brand-accent-faint)}
.ops-app .ib3-subject-field{display:grid;gap:4px;min-width:0;color:var(--brand-accent-strong);font:800 10px var(--font-ui);letter-spacing:.06em;text-transform:uppercase}
.ops-app .ib3-subject-field input{width:100%;min-height:38px;padding:7px 9px;border:1px solid var(--input-border);border-radius:8px;background:var(--input-bg);color:var(--text-primary);font:700 14px var(--font-ui);letter-spacing:normal;text-transform:none}
.ops-app .ib3-subject-field input:focus{outline:2px solid var(--brand-accent);outline-offset:1px}
.ops-app .ib3-subject-remove{display:grid;place-items:center;width:36px;height:38px;border:0;border-radius:8px;cursor:pointer}
.ops-app .ib3-subject-row:hover .ib3-row-x,.ops-app .ib3-subject-row:focus-within .ib3-row-x{opacity:1}
.ops-app .ib3-subject-row:hover .ib3-grip{opacity:1;color:var(--text-muted)}
/* Drag handle (Wave-style), in the sheet's left gutter so the grid matches Invoice Flow. */
.ops-app .ib3-grip{position:absolute;left:-40px;top:12px;display:grid;place-items:center;width:22px;height:30px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-subtle);cursor:grab;touch-action:none;opacity:.55;transition:opacity var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.ops-app .ib3-item-row:hover .ib3-grip,.ops-app .ib3-grip:focus-visible{opacity:1;color:var(--text-muted)}
.ops-app .ib3-grip:hover{background:var(--surface-secondary);color:var(--text-primary)}
.ops-app .ib3-grip:focus-visible{outline:2px solid var(--brand-accent);outline-offset:1px}
.ops-app .ib3-lines.is-sorting{cursor:grabbing;user-select:none}
.ops-app .ib3-lines.is-sorting .ib3-grip{cursor:grabbing}
.ops-app .ib3-item-row.is-dragging{z-index:2;background:var(--surface-secondary)!important;box-shadow:var(--shadow-medium);border-radius:10px}
.ops-app .ib3-subject-row.is-dragging{z-index:2;box-shadow:var(--shadow-medium)}
.ops-app .ib3-refs{margin:22px 0 0;background:transparent}
.ops-app .ib3-refs summary{font-size:13px;font-weight:600}
@media (max-width:1240px){
  .ops-app .content.ib3-takeover .ib3-line-grid{grid-template-columns:minmax(0,1fr) 104px minmax(76px,92px) minmax(80px,96px) 32px}
  .ops-app .content.ib3-takeover .ib3-line-grid>.ib3-cat{grid-column:1/-1}
  .ops-app .content.ib3-takeover .ib3-line-head>.ib3-cat{display:none}
}
@media (max-width:860px){
  .ops-app .content.ib3-takeover .ib3-line-head{display:none!important}
  .ops-app .content.ib3-takeover .ib3-line-grid{grid-template-columns:1fr 104px 96px;grid-auto-flow:row dense}
  .ops-app .content.ib3-takeover .ib3-line-grid>.ib3-desc{grid-column:1/-1}
  .ops-app .content.ib3-takeover .ib3-line-grid>.ib3-amt{padding-top:11px!important;text-align:right}
  .ops-app .content.ib3-takeover .ib3-line-grid>.ib3-del{justify-self:end}
  .ops-app .content.ib3-takeover .ib3-step,.ops-app .content.ib3-takeover .ib3-row-x{opacity:1}
}

/* ---------------- totals + message ---------------- */
.ops-app .ib3-totals{color:var(--text-primary)}
.ops-app .ib3-total-amt{color:var(--gold-soft)}
.ops-app .ib3-dep-box{color:var(--brand-accent-text)}
.ops-app .ib3-bal-row{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:12.5px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums}
.ops-app .ib3-terms summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px}
.ops-app .ib3-terms summary::-webkit-details-marker{display:none}
.ops-app .ib3-terms summary:before{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform var(--dur-fast) var(--ease-standard);margin-right:2px}
.ops-app .ib3-terms[open] summary:before{transform:rotate(45deg)}
.ops-app .ib3-terms summary span{font-weight:600;letter-spacing:0;color:var(--text-subtle)}
.ops-app .ib3-pay-note{margin:0;color:var(--text-muted);font-size:12.5px}
.ops-app .ib3-mark-sent{margin-left:auto;font-size:12.5px!important;color:var(--text-muted)!important}
.ops-app .ib3-mark-sent:hover{color:var(--gold-soft)!important}

/* ---------------- design picker (quotes) ---------------- */
.ops-app .content section.ib3-design-section{padding:22px 0 26px;border-bottom:1px solid var(--border-default)}
.ops-app .ib3-section-label{margin-bottom:10px;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--text-muted)}
.ops-app .ib3-design-section .design-picker{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.ops-app .ib3-design-section .design-opt{border-color:var(--border-default);background:var(--input-bg)}

/* ---------------- toolbar menu (phone ⋯, desktop overflow) ---------------- */
.ops-app .ib3-mobile-steps,.ops-app .ib3-mobile-actions,.ops-app .ib3-mobile-field-label,.ops-app .ib3-mobile-control-label,.ops-app .ib3-mobile-top-title,.ops-app .ib3-mobile-menu-trigger{display:none}
.ops-app .ib3-project-panel-mobile{display:none}
.ops-app .ib3-mobile-menu-scrim{position:fixed;inset:0;z-index:70;background:transparent}
.ops-app .ib3-mobile-menu{position:absolute;top:54px;right:24px;z-index:80;display:grid;width:min(236px,calc(100vw - 16px));padding:6px;border:1px solid var(--border-default);border-radius:15px;background:var(--dropdown-bg);box-shadow:var(--shadow-high)}
.ops-app .ib3-mobile-menu button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--text-primary);font-size:13px;font-weight:700;text-align:left;cursor:pointer}
.ops-app .ib3-mobile-menu button:hover,.ops-app .ib3-mobile-menu button:focus-visible{background:var(--brand-accent-faint);outline:0}
.ops-app .ib3-mobile-menu button small{margin-top:2px;color:var(--text-muted);font-size:10.5px;font-weight:600}
.ops-app .ib3-mobile-menu-label{padding:8px 10px 4px;color:var(--text-subtle);font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
@media (min-width:761px){.ops-app .ib3-menu-mobile-only{display:none!important}}

/* ---------------- share / payments / status under the sheet ---------------- */
.ops-app .ib3-extras-canvas{display:flex;justify-content:center;padding:0 24px 100px!important}
.ops-app .ib3-form:has(+ .ib3-extras-canvas) .ib3-canvas{padding-bottom:24px!important}
.ops-app .ib3-extras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:1040px;max-width:100%}
.ops-app .content .ib3-extras section.ib3-card{padding:20px}
.ops-app .ib3-card{padding:20px;border:1px solid var(--border-subtle);border-radius:16px;background:var(--surface-primary);box-shadow:var(--shadow-xs);min-width:0}
.ops-app .ib3-card--wide{grid-column:1/-1}
.ops-app .ib3-card-h{margin:0 0 12px;font:800 11px/1.2 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.ops-app .ib3-card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ops-app .ib3-card-btn{height:40px;padding:0 14px;font-size:13px;width:100%}
.ops-app .ib3-card-pdf .btn{height:40px;padding:0 14px;border:1px solid var(--input-border)!important;border-radius:10px!important;background:var(--surface-primary)!important;color:var(--text-primary)!important;font:500 13px var(--font-ui);box-shadow:var(--shadow-xs)}
.ops-app .ib3-card-pdf .btn:hover{border-color:var(--border-strong)!important;background:var(--surface-secondary)!important}
.ops-app .ib3-card .side-doc{border-color:var(--border-default)}
.ops-app .ib3-card .side-more{margin-top:0;border-top:0;padding-top:0}
.ops-app .ib3-card .side-more form{margin-top:12px}
.ops-app .ib3-card .side-more label:not(.check){display:grid!important;gap:6px}
.ops-app .ib3-card-links{display:flex;flex-wrap:wrap;gap:0 18px}
.ops-app .ib3-card .table th{color:var(--gold)}
.ops-app .ib3-card .pay-form{margin-top:10px}
.ops-app .ib3-card .pay-form .ib3-card-btn{width:auto;padding:0 20px}
.ops-app .ib3-card .pay-form label:not(.check){display:block!important}
.ops-app .ib3-card .pay-form input,.ops-app .ib3-card .pay-form select,.ops-app .ib3-card .side-more input[type=text]{border-radius:8px}
@media (max-width:900px){.ops-app .ib3-extras{grid-template-columns:minmax(0,1fr)}}

/* ---------------- customer popup (builder-v5-popup.css) ---------------- */
.ops-app .v3-customer-scrim[data-cm-root]{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--backdrop-bg);backdrop-filter:blur(4px);font-family:var(--font-ui);color:var(--text-primary);-webkit-font-smoothing:antialiased;animation:v3scrim .16s ease}
@keyframes v3scrim{from{opacity:0}to{opacity:1}}
@keyframes v3pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ops-app [data-cm-root] > .v3-customer-popup{width:540px;max-width:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--surface-primary);border:1px solid var(--border-default);border-radius:18px;box-shadow:var(--shadow-high);animation:v3pop .18s var(--ease-out)}
.ops-app [data-cm-root] > .v3-customer-popup input,.ops-app [data-cm-root] > .v3-customer-popup button{font:inherit;color:inherit}
.ops-app [data-cm-root] > .v3-customer-popup input::placeholder{color:var(--text-subtle);font-weight:500}
.ops-app [data-cm-root] > .v3-customer-popup .head{padding:20px 24px 0;background:var(--surface-primary)}
.ops-app [data-cm-root] > .v3-customer-popup .popup-brand{display:flex;align-items:center;gap:7px;color:var(--text-muted);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.ops-app [data-cm-root] > .v3-customer-popup .popup-brand img{width:22px;height:auto}
.ops-app [data-cm-root] > .v3-customer-popup .head-row{display:flex;align-items:center;gap:12px;margin-top:10px}
.ops-app [data-cm-root] > .v3-customer-popup .title{font-family:var(--font-heading);font-size:20px;font-weight:700;letter-spacing:-.01em}
.ops-app [data-cm-root] > .v3-customer-popup .step-label{flex:none;padding:4px 10px;border:1px solid var(--border-default);border-radius:999px;background:var(--surface-primary);font-size:10.5px;font-weight:800;letter-spacing:.07em;color:var(--text-muted)}
.ops-app [data-cm-root] > .v3-customer-popup .close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex:none;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text-muted);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.ops-app [data-cm-root] > .v3-customer-popup .close:hover{background:var(--surface-secondary);color:var(--text-primary)}
.ops-app [data-cm-root] > .v3-customer-popup .tabs{display:flex;gap:2px;margin-top:16px;padding:3px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--surface-secondary)}
.ops-app [data-cm-root] > .v3-customer-popup .tab{flex:1;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;text-align:center;font-size:12.5px;font-weight:700;transition:all var(--dur-base) var(--ease-standard)}
.ops-app [data-cm-root] > .v3-customer-popup .tab:hover{color:var(--text-primary)}
.ops-app [data-cm-root] > .v3-customer-popup .tab.active{background:var(--surface-primary);color:var(--text-primary);box-shadow:var(--shadow-low)}
.ops-app [data-cm-root] > .v3-customer-popup .bar{display:flex;gap:4px;height:3px;margin-top:14px;border-radius:99px;overflow:hidden}
.ops-app [data-cm-root] > .v3-customer-popup .bar span{flex:1;border-radius:99px;background:var(--border-subtle);transition:background-color var(--dur-slow) var(--ease-standard)}
.ops-app [data-cm-root] > .v3-customer-popup .bar span.done{background:var(--brand-accent)}
.ops-app [data-cm-root] > .v3-customer-popup .body{height:346px;padding:20px 24px;overflow:auto;background:var(--surface-primary)}
.ops-app [data-cm-root] > .v3-customer-popup .stack{display:flex;flex-direction:column;gap:14px}
.ops-app [data-cm-root] > .v3-customer-popup .row{display:flex;gap:10px}
.ops-app [data-cm-root] > .v3-customer-popup .row>*{flex:1;min-width:0}
.ops-app [data-cm-root] > .v3-customer-popup .row .w2{flex:2}
.ops-app [data-cm-root] > .v3-customer-popup .label{margin:0 0 6px;color:var(--text-muted);font-size:11px;font-weight:800;letter-spacing:.04em}
.ops-app [data-cm-root] > .v3-customer-popup .label .req{color:var(--status-error)}
.ops-app [data-cm-root] > .v3-customer-popup .field{width:100%;min-height:44px;margin:0;padding:10px 13px;border:1px solid var(--input-border);border-radius:10px;background:var(--input-bg);font-weight:600;font-size:14px;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.ops-app [data-cm-root] > .v3-customer-popup .field:hover{border-color:var(--border-strong)}
.ops-app [data-cm-root] > .v3-customer-popup .field:focus{outline:none;border-color:var(--brand-accent);box-shadow:0 0 0 4px var(--focus-ring)}
.ops-app [data-cm-root] > .v3-customer-popup .field.invalid{border-color:var(--status-error);box-shadow:0 0 0 4px color-mix(in srgb,var(--status-error) 16%,transparent)}
.ops-app [data-cm-root] > .v3-customer-popup .check{display:flex;align-items:center;gap:9px;margin:0;padding-top:2px;font-size:13px;font-weight:600;cursor:pointer}
.ops-app [data-cm-root] > .v3-customer-popup .check input{width:16px;height:16px;min-height:16px;margin:0;padding:0;border-radius:4px;accent-color:var(--gold)}
.ops-app [data-cm-root] > .v3-customer-popup .foot{display:flex;align-items:center;gap:8px;padding:14px 24px;border-top:1px solid var(--border-subtle);background:var(--surface-primary)}
.ops-app [data-cm-root] > .v3-customer-popup .back{min-height:0;padding:0;border:0;background:none;color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:700;transition:color var(--dur-fast) var(--ease-standard)}
.ops-app [data-cm-root] > .v3-customer-popup .back:hover{color:var(--text-primary)}
.ops-app [data-cm-root] > .v3-customer-popup .grow{flex:1}
.ops-app [data-cm-root] > .v3-customer-popup .btn{min-height:42px;padding:10px 16px;border:1px solid var(--input-border);border-radius:10px;background:var(--surface-primary);box-shadow:var(--shadow-xs);color:var(--text-primary);cursor:pointer;font-size:13px;font-weight:600;transition:border-color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard)}
.ops-app [data-cm-root] > .v3-customer-popup .btn:hover{border-color:var(--border-strong);background:var(--surface-secondary)}
.ops-app [data-cm-root] > .v3-customer-popup .btn-primary{min-height:42px;padding:10px 18px;border:1px solid var(--action-primary);border-radius:10px;background:var(--action-primary);box-shadow:var(--shadow-xs);color:var(--action-primary-text);cursor:pointer;font-size:13px;font-weight:700;transition:background-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.ops-app [data-cm-root] > .v3-customer-popup .btn-primary:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover)}
.ops-app [data-cm-root] > .v3-customer-popup .btn-primary.is-danger{border-color:var(--status-bad-solid);background:var(--status-bad-solid);color:#fff}
.ops-app [data-cm-root] > .v3-customer-popup .btn-primary:active{transform:scale(.985)}
.ops-app [data-cm-root] > .v3-customer-popup .btn-primary:focus-visible,.ops-app [data-cm-root] > .v3-customer-popup .btn:focus-visible,.ops-app [data-cm-root] > .v3-customer-popup .tab:focus-visible,.ops-app [data-cm-root] > .v3-customer-popup .close:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.ops-app .ib3-cm-note{margin:0;color:var(--text-subtle);font-size:12px;line-height:1.5}
@media(max-width:560px){
  .ops-app .v3-customer-scrim[data-cm-root]{align-items:flex-end;padding:8px}
  .ops-app [data-cm-root] > .v3-customer-popup{border-radius:16px}
  .ops-app [data-cm-root] > .v3-customer-popup .head,.ops-app [data-cm-root] > .v3-customer-popup .body,.ops-app [data-cm-root] > .v3-customer-popup .foot{padding-left:18px;padding-right:18px}
  .ops-app [data-cm-root] > .v3-customer-popup .body{height:min(58vh,346px)}
  .ops-app [data-cm-root] > .v3-customer-popup .row{flex-direction:column;gap:14px}
}

/* ---------------- preview: a white Letter sheet, like the PDF ---------------- */
.ops-app .ib3-preview-backdrop{padding:clamp(20px,4vw,48px)!important;overflow-x:auto!important;overflow-y:auto!important;overscroll-behavior:contain;background:rgba(3,6,14,.78)!important}
.ops-app .ib3-preview-frame{width:min(8.5in,100%)!important;max-width:8.5in!important;flex:none;background:transparent!important;box-shadow:none!important;color:var(--text-primary);font-family:var(--font-ui)}
.ops-app .ib3-preview-bar{margin-bottom:12px;border:1px solid var(--border-default)!important;border-radius:12px!important;box-shadow:var(--shadow-medium)}
.ops-app .ib3-preview-bar button{color:var(--text-primary);font-family:var(--font-ui)}
.ops-app .ib3-paper{
  --surface-primary:#ffffff;--text-primary:#0a1020;--text-muted:#5a6477;--border-default:#d8dde6;--border-subtle:#e8ecf2;
  --brand-accent-strong:#a8781f;--brand-accent-soft:#f7efdc;
  width:100%!important;height:auto!important;min-height:11in!important;box-sizing:border-box;overflow:visible!important;
  background:#fff!important;color:#0a1020;border-radius:2px!important;box-shadow:var(--shadow-high)!important;font-family:var(--font-ui)
}
.ops-app .ib3-paper .v3-document-totals{font-variant-numeric:tabular-nums}

/* ============================================================
   Phone (<= 760px): Invoice Flow's mobile-native builder
   ============================================================ */
@media (max-width:760px){
  /* The v5 builder (screens.css .lo-bld) keeps the app's phone top bar and tab bar. */
  .ops-app .content.ib3-takeover{padding:0!important;overflow:visible}
  .ops-app .content.ib3-takeover .ib3-root{min-height:100dvh!important;background:var(--app-bg)!important}

  .ops-app .content.ib3-takeover .ib3-toolbar{
    position:sticky!important;top:0!important;z-index:60!important;
    display:grid!important;grid-template-columns:auto minmax(0,1fr) 42px!important;
    height:52px!important;min-height:52px!important;padding:4px 8px!important;gap:3px!important;
    border-bottom:1px solid var(--border-default)!important;
    background:color-mix(in srgb,var(--surface-primary) 94%,transparent)!important;box-shadow:var(--shadow-low)!important;
    backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important
  }
  .ops-app .content.ib3-takeover .ib3-toolbar-left{height:44px!important;min-width:0!important;overflow:visible!important}
  .ops-app .content.ib3-takeover .ib3-toolbar-left .ib3-link{
    min-width:0;max-width:112px;min-height:44px;padding:0 7px!important;border-radius:10px;overflow:hidden;text-overflow:ellipsis;
    color:var(--brand-accent-strong);font-size:13px!important;font-weight:800!important
  }
  .ops-app .content.ib3-takeover .ib3-toolbar-divider,
  .ops-app .content.ib3-takeover .ib3-topbar-title,
  .ops-app .content.ib3-takeover .ib3-topbar-pill,
  .ops-app .content.ib3-takeover .ib3-toolbar-spacer,
  .ops-app .content.ib3-takeover .ib3-toolbar-actions{display:none!important}
  .ops-app .content.ib3-takeover .ib3-toolbar>.ib3-segwrap{display:none!important}
  .ops-app .ib3-mobile-top-title{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary);font-size:13px;font-weight:800;text-align:center}
  .ops-app .ib3-mobile-menu-trigger{display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--text-primary);font-size:24px;font-weight:800;line-height:1;cursor:pointer}
  .ops-app .ib3-mobile-menu-trigger:active{background:var(--surface-secondary);transform:scale(.97)}
  .ops-app .ib3-mobile-menu-scrim{display:block;background:var(--backdrop-bg)}
  .ops-app .ib3-mobile-menu-scrim[hidden]{display:none!important}
  .ops-app .ib3-mobile-menu{position:fixed;top:48px;right:8px;background:color-mix(in srgb,var(--dropdown-bg) 98%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
  .ops-app .ib3-mobile-menu button{font-weight:750}

  .ops-app .content.ib3-takeover .ib3-canvas{display:block!important;padding:0 0 calc(68px + env(safe-area-inset-bottom))!important;background:var(--app-bg)!important}
  .ops-app .content.ib3-takeover .ib3-sheet{
    width:100%!important;max-width:none!important;min-height:calc(100dvh - 52px)!important;
    padding:12px 12px 30px!important;border:0!important;border-radius:0!important;background:var(--app-bg)!important;box-shadow:none!important
  }
  .ops-app .content.ib3-takeover .ib3-sheet>[role="alert"]{margin-bottom:9px!important;padding:9px 11px!important;font-size:12px!important}
  .ops-app #ib3-mobile-details,.ops-app #ib3-mobile-items,.ops-app #ib3-mobile-pricing,.ops-app #ib3-mobile-message,.ops-app #ib3-design,.ops-app #ib3-extras{scroll-margin-top:62px!important}

  /* Compact metadata: the doc chip and number live in the header title. */
  .ops-app .content.ib3-takeover .ib3-meta{display:grid!important;align-items:end!important;gap:7px 8px!important;margin:0!important}
  .ops-app .content.ib3-takeover .ib3-meta>span{display:none!important}
  .ops-app .content.ib3-takeover .ib3-meta--estimate{grid-template-columns:minmax(0,1fr) 132px!important}
  .ops-app .content.ib3-takeover .ib3-meta--invoice{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .ops-app .content.ib3-takeover .ib3-meta--estimate>.v3-filter-menu{grid-column:1!important;width:100%;margin:0}
  .ops-app .content.ib3-takeover .ib3-meta--invoice>.v3-filter-menu{grid-column:1/-1!important;width:100%;margin:0}
  .ops-app .content.ib3-takeover .ib3-meta>.v3-filter-menu .v3-filter-trigger{grid-template-rows:1fr!important;align-items:center;width:100%;min-height:44px;height:44px;padding:0 11px!important;border-radius:11px!important;background:var(--surface-primary)!important}
  .ops-app .content.ib3-takeover .ib3-template-menu .v3-filter-label{display:none}
  .ops-app .content.ib3-takeover .ib3-template-menu .v3-filter-value{grid-row:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px!important}
  .ops-app .ib3-tpl-long{display:none}.ops-app .ib3-tpl-short{display:inline}
  .ops-app .content.ib3-takeover .ib3-template-menu .v3-filter-chevron{grid-row:1;align-self:center}
  .ops-app .content.ib3-takeover .ib3-template-sheet-scrim{display:block;position:fixed;inset:0;z-index:119;background:var(--backdrop-bg);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
  .ops-app .content.ib3-takeover .ib3-template-sheet-scrim[hidden]{display:none!important}
  .ops-app .content.ib3-takeover .ib3-template-sheet{
    position:fixed!important;top:auto!important;right:0!important;bottom:0!important;left:0!important;z-index:120!important;
    display:flex;flex-direction:column;width:100%!important;min-width:0!important;max-height:72dvh;margin:0!important;padding:0 10px calc(10px + env(safe-area-inset-bottom))!important;
    overflow:hidden;border-width:1px 0 0!important;border-radius:22px 22px 0 0!important;background:var(--surface-primary)!important;
    box-shadow:var(--shadow-high)!important;animation:ib3SheetUp .22s var(--ease-standard) both!important;transform-origin:bottom
  }
  .ops-app .content.ib3-takeover .ib3-template-sheet-head{display:flex;align-items:center;gap:8px;min-height:54px;padding:6px 2px 6px 6px;border-bottom:1px solid var(--border-subtle)}
  .ops-app .content.ib3-takeover .ib3-template-sheet-head strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 18px/1.2 var(--font-heading)}
  .ops-app .content.ib3-takeover .ib3-template-sheet-head button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:11px;background:transparent;color:var(--text-muted);font-size:24px;line-height:1;cursor:pointer}
  .ops-app .content.ib3-takeover .ib3-template-sheet-list{display:grid;gap:7px;min-height:0;padding:9px 0;overflow:auto;overscroll-behavior:contain}
  .ops-app .content.ib3-takeover .ib3-template-sheet .v3-template-option{
    display:grid!important;grid-template-columns:38px minmax(0,1fr) auto!important;align-items:center;gap:10px;width:100%;min-height:56px!important;
    padding:8px 10px!important;border:1px solid var(--border-default)!important;border-radius:12px!important;background:var(--surface-primary)!important;box-shadow:none!important;
    color:var(--text-primary);font-size:13.5px;font-weight:700;transform:none!important
  }
  .ops-app .content.ib3-takeover .ib3-template-sheet .v3-template-option:after{content:"Apply";color:var(--brand-accent-strong);font-size:11px;font-weight:800}
  .ops-app .content.ib3-takeover .ib3-template-sheet .v3-template-icon{width:36px;height:36px;border-radius:10px;background:var(--brand-accent-soft)}
  .ops-app .content.ib3-takeover .ib3-template-sheet-foot .v3-filter-option{min-height:48px}
  .ops-app .content.ib3-takeover .ib3-meta>label{display:grid!important;grid-column:auto;gap:3px!important;align-items:stretch!important;min-width:0;font-size:9.5px!important;font-weight:800!important;letter-spacing:.07em!important;text-transform:uppercase}
  .ops-app .content.ib3-takeover .ib3-meta>label .ib3-field{width:100%!important;min-width:0!important;min-height:44px!important;height:44px!important;padding:8px!important;border-radius:11px!important;font-size:14px!important;box-shadow:var(--shadow-xs)}

  .ops-app .ib3-mobile-field-label,.ops-app .ib3-mobile-control-label{display:block;color:var(--text-muted);font-size:10.5px;font-weight:800;letter-spacing:.075em;text-transform:uppercase}
  .ops-app .ib3-mobile-field-label{margin:14px 0 5px;font-size:9.5px}
  .ops-app .content.ib3-takeover .ib3-title{
    width:100%!important;min-height:48px!important;height:48px;margin:0!important;padding:9px 11px!important;
    border-radius:12px!important;font-size:19px!important;line-height:1.24!important;box-shadow:var(--shadow-xs)
  }
  .ops-app .content.ib3-takeover .ib3-title::placeholder{font-size:15px}
  .ops-app .content.ib3-takeover .ib3-details-section{display:flex!important;flex-direction:column!important;gap:15px!important;margin-top:14px!important;padding:0 0 20px!important;border-bottom:1px solid var(--border-default)!important}
  .ops-app .content.ib3-takeover .ib3-customer-panel,.ops-app .content.ib3-takeover .ib3-project-panel{width:100%;min-width:0!important}
  .ops-app .content.ib3-takeover .ib3-project-panel--desktop{display:none!important}
  .ops-app .content.ib3-takeover .ib3-customer-panel>div[style*="letter-spacing"]{display:none!important}
  .ops-app .content.ib3-takeover .bc-combo-trigger{min-height:50px}
  .ops-app .content.ib3-takeover .bc-empty-combo-trigger{width:100%;justify-content:center;min-height:48px!important;margin-top:0!important;border-radius:12px!important}
  .ops-app .content.ib3-takeover .ib3-customer-row{display:grid!important;grid-template-columns:minmax(0,1fr) 52px;align-items:stretch!important;gap:8px!important;height:52px;margin-top:0!important}
  .ops-app .content.ib3-takeover .ib3-customer-row[hidden]{display:none!important}
  .ops-app .content.ib3-takeover .ib3-customer-row .bc-combo-trigger{width:100%;height:52px!important;min-height:52px!important;margin:0!important;padding:7px 9px!important}
  .ops-app .content.ib3-takeover .ib3-customer-row .ib3-customer-edit{width:52px!important;height:52px!important;min-height:52px!important;margin:0!important;align-self:stretch}
  .ops-app .content.ib3-takeover input.ib3-field,.ops-app .content.ib3-takeover textarea.ib3-field{
    width:100%!important;min-height:44px;margin-left:0!important;padding:10px!important;
    border-radius:11px!important;font-size:16px!important;box-shadow:var(--shadow-xs)
  }
  .ops-app .content.ib3-takeover textarea.ib3-field{min-height:64px;resize:vertical!important}

  /* Line items are true mobile cards. */
  .ops-app .content.ib3-takeover section.ib3-items-section{padding-top:20px}
  .ops-app .ib3-items-section:before,.ops-app .ib3-totals-wrap:before{display:block;margin-bottom:9px;color:var(--text-primary);font:700 19px/1.2 var(--font-heading);letter-spacing:-.02em}
  .ops-app .ib3-items-section:before{content:"Line items"}
  .ops-app .content.ib3-takeover .ib3-line-head{display:none!important}
  .ops-app .content.ib3-takeover .ib3-item-row{
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:9px!important;margin-bottom:10px;padding:12px!important;border:1px solid var(--border-default)!important;
    border-radius:14px;background:var(--surface-primary)!important;box-shadow:var(--shadow-xs)
  }
  .ops-app .content.ib3-takeover .ib3-item-row>.ib3-cat,.ops-app .content.ib3-takeover .ib3-item-row>.ib3-desc{grid-column:1/-1!important;margin:0!important}
  .ops-app .content.ib3-takeover .ib3-item-row>.ib3-cat{min-height:44px!important}
  .ops-app .content.ib3-takeover .ib3-cat-trigger,.ops-app .content.ib3-takeover .ib3-cat-input{min-height:46px;border-radius:11px!important;font-size:16px!important;box-shadow:var(--shadow-xs)}
  .ops-app .content.ib3-takeover .ib3-item-row>.ib3-desc{min-height:56px!important}
  .ops-app .content.ib3-takeover .ib3-qty{
    position:relative;display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important;
    align-items:center;min-height:62px!important;padding:17px 1px 1px!important;border:1px solid var(--input-border)!important;
    border-radius:11px!important;background:var(--input-bg)!important
  }
  .ops-app .content.ib3-takeover .ib3-qty>.ib3-mobile-control-label{position:absolute;top:6px;left:9px}
  .ops-app .content.ib3-takeover .ib3-qty input{height:46px;min-height:46px;font-size:16px!important}
  .ops-app .content.ib3-takeover .ib3-step{width:42px;height:42px;opacity:1!important;color:var(--text-primary);font-size:20px}
  .ops-app .content.ib3-takeover .ib3-price-wrap{position:relative;padding-top:18px}
  .ops-app .content.ib3-takeover .ib3-price-wrap>.ib3-mobile-control-label{position:absolute;top:1px;left:2px}
  .ops-app .content.ib3-takeover .ib3-price{height:44px!important;min-height:44px!important;text-align:left!important}
  .ops-app .content.ib3-takeover .ib3-amt{grid-column:1;display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:42px;padding:0!important;text-align:left!important;font-size:15px!important}
  .ops-app .content.ib3-takeover .ib3-del{
    grid-column:2;justify-self:end;align-self:end;width:42px!important;height:42px!important;margin:0!important;
    opacity:1!important;background:var(--status-error-bg)!important;color:var(--status-error)!important;border-radius:12px!important
  }
  /* The handle sits on the card's bottom row, next to the delete button. */
  .ops-app .content.ib3-takeover .ib3-grip{left:auto;top:auto;right:62px;bottom:12px;width:40px;height:42px;opacity:1;color:var(--text-muted);background:var(--surface-secondary);border-radius:12px}
  .ops-app .content.ib3-takeover .ib3-subject-row{grid-template-columns:minmax(0,1fr) 40px 40px;align-items:end;gap:6px;margin:10px 0;padding:12px}
  .ops-app .content.ib3-takeover .ib3-subject-field{grid-column:1}
  .ops-app .content.ib3-takeover .ib3-subject-field input{min-height:46px;font-size:16px}
  .ops-app .content.ib3-takeover .ib3-subject-row .ib3-grip{position:static;grid-column:2;width:40px;height:46px}
  .ops-app .content.ib3-takeover .ib3-subject-remove{grid-column:3;width:40px;height:46px;opacity:1}
  .ops-app .content.ib3-takeover .ib3-add-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding-top:0;border-top:0}
  .ops-app .content.ib3-takeover .ib3-add-subject{min-height:46px;border-radius:12px;font-size:13px}
  .ops-app .content.ib3-takeover .bc-line-combo-trigger{width:100%;justify-content:center;min-height:46px!important;border-radius:12px!important}

  .ops-app .content.ib3-takeover .ib3-totals-wrap{display:block!important;margin-top:24px!important}
  .ops-app .ib3-totals-wrap:before{content:"Pricing & deposit"}
  .ops-app .ib3-form:has([data-do][value^="invoice"]) .ib3-totals-wrap:before{content:"Pricing"}
  .ops-app .content.ib3-takeover .ib3-totals{width:100%!important;padding:14px;border:1px solid var(--border-default);border-radius:14px;background:var(--surface-primary);box-shadow:var(--shadow-xs)}
  .ops-app .content.ib3-takeover .ib3-totals .ib3-input{min-height:42px}
  .ops-app .content.ib3-takeover .ib3-totals>div[style*="min-height:34px"]{min-height:30px!important}
  .ops-app .content.ib3-takeover .ib3-totals>div[style*="border-top:2px"]{margin-top:6px!important;padding:10px 0!important}
  .ops-app .content.ib3-takeover .ib3-discount-row{align-items:flex-start!important;gap:10px;padding:7px 0}
  .ops-app .content.ib3-takeover .ib3-discount-row[hidden]{display:none!important}
  .ops-app .content.ib3-takeover .ib3-discount-controls{justify-content:flex-end;flex-wrap:wrap}
  .ops-app .content.ib3-takeover .ib3-deposit-controls{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px!important}
  .ops-app .content.ib3-takeover .ib3-deposit-controls .ib3-input{display:none!important}
  .ops-app .content.ib3-takeover .ib3-chip-dep{min-height:40px!important}

  .ops-app .content.ib3-takeover .ib3-message-heading{margin:27px 0 9px!important}
  .ops-app .content.ib3-takeover .ib3-message-heading span:first-child,.ops-app .content.ib3-takeover .ib3-message-heading span:last-child{display:none}
  .ops-app .content.ib3-takeover .ib3-message-heading span:nth-child(2){font:700 19px/1.2 var(--font-heading)!important;letter-spacing:-.02em!important;color:var(--text-primary)!important}
  .ops-app .content.ib3-takeover .ib3-message-panel{gap:11px!important;margin:0!important;padding:13px!important;border-radius:14px!important;background:var(--surface-primary)!important;box-shadow:var(--shadow-xs)}
  .ops-app .content.ib3-takeover .ib3-message-panel textarea{min-height:76px;padding:10px!important;border-radius:8px;font-size:16px!important}
  .ops-app .content.ib3-takeover .ib3-sheet-actions{display:none!important}
  .ops-app .content.ib3-takeover section.ib3-project-panel-mobile{display:grid;gap:12px;margin-top:24px;padding:14px;border:1px solid var(--border-default);border-radius:14px;background:var(--surface-primary);box-shadow:var(--shadow-xs)}
  .ops-app .content.ib3-takeover .ib3-project-panel-mobile h2{margin:0;color:var(--text-primary);font:700 19px/1.2 var(--font-heading);letter-spacing:-.02em}
  .ops-app .content.ib3-takeover .ib3-project-panel-mobile label{display:grid!important;gap:5px;color:var(--text-muted);font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
  .ops-app .content.ib3-takeover .ib3-project-panel-mobile label small{color:var(--text-subtle);font-size:10px;font-weight:600;letter-spacing:0;text-transform:none}
  .ops-app .content.ib3-takeover .ib3-project-panel-mobile input{min-height:44px!important}
  .ops-app .content.ib3-takeover .ib3-project-panel-mobile textarea{min-height:64px!important;resize:vertical}
  .ops-app .content.ib3-takeover section.ib3-design-section{padding:18px 0 20px}

  /* Thumb-friendly Save and Send stay reachable while scrolling. */
  .ops-app .ib3-mobile-actions{
    position:fixed;right:0;bottom:0;left:0;z-index:50;display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:7px;
    padding:7px 10px calc(7px + env(safe-area-inset-bottom));border-top:1px solid var(--border-default);
    background:color-mix(in srgb,var(--surface-elevated) 94%,transparent);box-shadow:var(--shadow-high);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)
  }
  .ops-app .ib3-mobile-actions button{min-width:0;min-height:48px;border-radius:12px;font-family:var(--font-ui);font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap}
  .ops-app .ib3-mobile-save{border:1px solid var(--input-border);background:var(--surface-primary);color:var(--text-primary)}
  .ops-app .ib3-mobile-send{border:1px solid var(--action-primary);background:var(--action-primary);color:var(--action-primary-text);box-shadow:var(--shadow-medium)}
  .ops-app .ib3-mobile-send[aria-disabled="true"]{opacity:.45}
  .ops-app .ib3-mobile-actions button:active{transform:scale(.98)}
  .ops-app .ib3-mobile-actions button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

  .ops-app .ib3-extras-canvas{padding:0 12px calc(84px + env(safe-area-inset-bottom))!important;background:var(--app-bg)}
  .ops-app .ib3-form:has(+ .ib3-extras-canvas) .ib3-canvas{padding-bottom:0!important}
  .ops-app .content .ib3-extras section.ib3-card{padding:14px;border-radius:14px}
  .ops-app .ib3-card-actions{grid-template-columns:minmax(0,1fr)}
  .ops-app .ib3-card-btn,.ops-app .ib3-card-pdf .btn{height:46px}

  /* Preview: the whole Letter sheet, scaled to the phone. */
  .ops-app .ib3-preview-backdrop{padding:12px!important;align-items:flex-start!important}
  .ops-app .ib3-preview-frame{width:100%!important;max-width:8.5in!important;min-height:0!important}
  .ops-app .ib3-preview-bar{padding:10px 12px!important;min-height:60px}
  .ops-app .ib3-preview-bar span{display:block;margin:2px 0 0!important;font-size:10.5px!important}
  .ops-app .ib3-paper{min-height:calc((100vw - 24px) * 1.294117647)!important;padding:20px 16px 40px!important;box-shadow:none!important}
  .ops-app .ib3-paper .v3-document-header{align-items:flex-start;gap:12px!important}
  .ops-app .ib3-paper .v3-document-type{min-width:76px}
  .ops-app .ib3-paper .v3-document-details>div{min-width:0!important;flex:1 1 140px}
  .ops-app .ib3-paper .v3-doc-line-head,.ops-app .ib3-paper .v3-doc-line{grid-template-columns:minmax(0,1fr) 32px 58px 68px!important;gap:5px!important;font-size:11px!important}

  /* Builder dialogs are bottom sheets on a phone. */
  .ops-app .v3-customer-scrim[data-cm-root]{align-items:flex-end!important;padding:0!important}
  .ops-app [data-cm-root] > .v3-customer-popup{width:100%!important;max-width:none!important;max-height:96dvh!important;border-width:1px 0 0!important;border-radius:24px 24px 0 0!important;animation:ib3SheetUp .24s var(--ease-standard) both!important}
  .ops-app [data-cm-root] > .v3-customer-popup .head{padding:11px 14px 0!important}
  .ops-app [data-cm-root] > .v3-customer-popup .popup-brand,.ops-app [data-cm-root] > .v3-customer-popup .step-label,.ops-app [data-cm-root] > .v3-customer-popup .bar{display:none!important}
  .ops-app [data-cm-root] > .v3-customer-popup .head-row{min-height:42px;margin:0!important;gap:8px}
  .ops-app [data-cm-root] > .v3-customer-popup .title{font-size:18px}
  .ops-app [data-cm-root] > .v3-customer-popup .close{width:40px!important;height:40px!important}
  .ops-app [data-cm-root] > .v3-customer-popup .tabs{min-height:38px;margin-top:8px!important;padding:2px}
  .ops-app [data-cm-root] > .v3-customer-popup .tab{padding:7px 8px;font-size:12px}
  .ops-app [data-cm-root] > .v3-customer-popup .body{height:auto!important;min-height:0;flex:1;padding:13px 14px!important;overscroll-behavior:contain}
  .ops-app [data-cm-root] > .v3-customer-popup .stack{gap:12px}
  .ops-app [data-cm-root] > .v3-customer-popup .row{display:grid!important;gap:12px!important}
  .ops-app [data-cm-root] > .v3-customer-popup .customer-channel-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ops-app [data-cm-root] > .v3-customer-popup .customer-address-row{grid-template-columns:minmax(0,1.6fr) minmax(58px,.7fr) minmax(64px,.8fr)!important;gap:8px!important}
  .ops-app [data-cm-root] > .v3-customer-popup .label{margin-bottom:5px;font-size:10.5px}
  .ops-app [data-cm-root] > .v3-customer-popup .field{min-height:44px;padding:9px 11px;font-size:16px!important}
  .ops-app [data-cm-root] > .v3-customer-popup .foot{flex-wrap:nowrap;gap:6px;padding:8px 14px calc(8px + env(safe-area-inset-bottom))!important}
  .ops-app [data-cm-root] > .v3-customer-popup .btn,.ops-app [data-cm-root] > .v3-customer-popup .btn-primary{min-height:44px!important;padding:8px 12px}
  .ops-app [data-cm-root] > .v3-customer-popup .back{display:grid;place-items:center;width:40px;height:40px;overflow:hidden;font-size:0}
  .ops-app [data-cm-root] > .v3-customer-popup .back[hidden]{display:none}
  .ops-app [data-cm-root] > .v3-customer-popup .back:before{content:"←";font-size:18px}

  body.ops-app .bc-combobox-portal{
    position:fixed!important;top:auto!important;right:0!important;bottom:0!important;left:0!important;
    width:100%!important;max-width:none!important;max-height:76dvh!important;padding:10px 10px calc(10px + env(safe-area-inset-bottom))!important;
    border-width:1px 0 0!important;border-radius:22px 22px 0 0!important;box-shadow:var(--shadow-high),0 -100vh 0 100vh var(--backdrop-bg)!important;
    animation:ib3SheetUp .22s var(--ease-standard) both
  }
  body.ops-app .bc-combobox-search{min-height:48px}
  body.ops-app .bc-combobox-search input{font-size:16px!important}
  body.ops-app .bc-combobox-search kbd{display:none}
  body.ops-app .bc-combobox-option{min-height:52px}
}
@media (max-width:370px){
  .ops-app .content.ib3-takeover .ib3-meta--estimate{grid-template-columns:minmax(0,1fr) 122px!important}
  .ops-app .ib3-mobile-actions{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);padding-inline:8px}
  .ops-app .ib3-mobile-actions button{font-size:12px}
  .ops-app .content.ib3-takeover .ib3-sheet{padding-inline:13px!important}
  .ops-app .content.ib3-takeover .ib3-totals{padding:14px}
}
@keyframes ib3SheetUp{from{opacity:.65;transform:translateY(28px)}to{opacity:1;transform:none}}
/* Narrow desktop: the toolbar wraps to two deliberate rows before the phone layout. */
@media (min-width:761px) and (max-width:1080px){
  .ops-app .content.ib3-takeover .ib3-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;height:auto!important;min-height:0!important;padding:8px 14px!important;gap:8px 12px!important}
  .ops-app .content.ib3-takeover .ib3-toolbar-left{grid-column:1;grid-row:1;min-width:0}
  .ops-app .content.ib3-takeover .ib3-toolbar-spacer{display:none!important}
  .ops-app .content.ib3-takeover .ib3-toolbar>.ib3-segwrap{grid-column:2;grid-row:1}
  .ops-app .content.ib3-takeover .ib3-toolbar-actions{grid-column:1/-1;grid-row:2;justify-content:flex-end}
  .ops-app .content.ib3-takeover .ib3-toolbar--single .ib3-toolbar-actions{grid-column:2;grid-row:1}
}
@media (prefers-reduced-motion:reduce){
  .ops-app .v3-filter-popover,.ops-app .v3-customer-popup,.ops-app .v3-customer-scrim,body.ops-app .bc-combobox-portal{animation:none!important}
}

/* ---------------- Settings: products + templates tables ---------------- */
.ops-app .ib3-ptable{display:grid;gap:0}
.ops-app .ib3-prow{display:grid;grid-template-columns:40px minmax(0,1fr) 150px 150px 32px;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.ops-app .ib3-pimg{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;overflow:hidden;border:1px solid var(--line-2);background:rgba(243,210,138,.12)}
.ops-app .ib3-pimg img{width:100%;height:100%;object-fit:cover;display:block}
.ops-app .ib3-pimg-badge{color:var(--gold);font-size:10px;font-weight:900}
.ops-app .ib3-pimg-up{position:absolute;inset:0;cursor:pointer;margin:0!important}
.ops-app .ib3-pimg-up input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.ops-app .ib3-pimg:hover{border-color:var(--gold)}
.ops-app .ib3-pimg-x{position:absolute;top:0;right:0;z-index:2;display:grid;place-items:center;width:16px;height:16px;padding:0;border:0;border-radius:0 0 0 6px;background:rgba(3,6,14,.8);color:var(--paper);font-size:12px;line-height:1;cursor:pointer}
.ops-app .ib3-prow-head{padding:0 0 8px;border-top:0;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--muted)}
.ops-app .ib3-prow .affix{margin:0}
.ops-app .ib3-prow .ib3-del{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:9px;cursor:pointer;opacity:1}
.ops-app .ib3-prow.ib3-trow{grid-template-columns:minmax(0,1fr) 180px 32px}
.ops-app .ib3-trow-sub{color:var(--muted);font:12.5px var(--sans);font-variant-numeric:tabular-nums;text-align:right}
.ops-app .ib3-ptable-foot{padding-top:12px;border-top:1px solid var(--line)}
@media (max-width:640px){
  .ops-app .ib3-prow{grid-template-columns:40px minmax(0,1fr) minmax(0,1fr) 32px}
  .ops-app .ib3-prow>input[name="product_name[]"]{grid-column:2/-1}
  .ops-app .ib3-prow>.affix:nth-child(3){grid-column:1/3}
  .ops-app .ib3-prow-head{display:none}
  .ops-app .ib3-prow.ib3-trow{grid-template-columns:minmax(0,1fr) 32px}
  .ops-app .ib3-trow-sub{display:none}
}

/* Geometry matched to Invoice Flow's computed sizes (1440): customer trigger 58px, deposit chips 37px. */
@media (min-width:761px){
  .ops-app .ib3-customer-row .bc-combo-trigger{min-height:58px}
  .ops-app .ib3-chip-dep{min-height:37px}
}

/* ops/customer-page.css */
/* Light Ops customer page (?lead=ID): Invoice Flow V5's customer workspace (customer-v2), its v5.css rules
   extracted as they are (every rule whose selector names .customer-v2), scoped to .ops-app and re-themed by the
   Invoice Flow tokens builder.css maps to Light Ops navy and gold. Light Ops additions are in extras.css. */
.ops-app .customer-v2{--card-bg:var(--surface-primary);--table-bg:var(--surface-primary);--body-medium-weight:500;--button-weight:700;--heading-strong-weight:700;--label-weight:700;--table-heading-weight:800;--hover-bg:rgba(243,210,138,.055);--selected-bg:rgba(243,210,138,.15);--selected-text:var(--gold-soft)}
.ops-app .customer-v2{width:100%;max-width:none;margin:0;padding:4px 0 34px;color:var(--text-primary)}
.ops-app .customer-v2-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}
.ops-app .customer-v2 h1{margin:0;font:700 clamp(30px,3.3vw,42px)/1.04 var(--font-heading);letter-spacing:-.045em}
.ops-app .customer-v2-head p{margin:8px 0 0;color:var(--text-muted);font-size:14px;line-height:1.5}
.ops-app .customer-v2-segmented button{min-height:34px;padding:0 11px;border:0;border-radius:8px!important;background:transparent;color:var(--text-muted);font-size:12px;font-weight:750;cursor:pointer;white-space:nowrap}
.ops-app .customer-v2-segmented button:hover{color:var(--text-primary);background:var(--surface-primary)}
.ops-app .customer-v2-segmented button.is-active{background:var(--selected-bg);color:var(--selected-text);box-shadow:var(--shadow-low)}
.ops-app .customer-v2-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--brand-accent-soft);color:var(--brand-accent-strong);font-size:12px;font-weight:900;letter-spacing:.02em}
.ops-app .customer-v2-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 18px;padding:0;border:0;background:transparent;color:var(--text-muted);font-size:12px;font-weight:800;cursor:pointer}
.ops-app .customer-v2-back:hover{color:var(--brand-accent-strong)}
.ops-app .customer-v2-identity{display:flex;align-items:center;gap:13px;min-width:0}
.ops-app .customer-v2-identity .customer-v2-avatar{width:52px;height:52px;border-radius:16px;font-size:14px}
.ops-app .customer-v2-identity h1{font-size:clamp(27px,3vw,38px)}
.ops-app .customer-v2-identity p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ops-app .customer-v2-actions{position:relative;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ops-app .customer-v2-more{position:relative}
.ops-app .customer-v2-menu{position:absolute;z-index:20;top:calc(100% + 7px);right:0;display:grid;min-width:176px;padding:5px;border:1px solid var(--border-default);border-radius:12px;background:var(--dropdown-bg);box-shadow:var(--shadow-high)}
.ops-app .customer-v2-menu button{padding:10px;border:0;border-radius:8px!important;background:transparent;color:var(--text-primary);font-size:12px;font-weight:var(--button-weight);text-align:left;cursor:pointer}
.ops-app .customer-v2-menu button:hover{background:var(--hover-bg)}
.ops-app .customer-v2-menu button.is-danger{color:var(--status-error)}
.ops-app .customer-v2-menu button.is-danger:hover{background:var(--status-error-bg)}
.ops-app .customer-v2-contact{display:flex;gap:24px;flex-wrap:wrap;padding:14px 0 22px}
.ops-app .customer-v2-contact>div{display:grid;gap:3px;max-width:300px}
.ops-app .customer-v2-contact span,.ops-app .customer-v2-metrics span{color:var(--text-subtle);font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.ops-app .customer-v2-contact strong{font-size:12.5px;font-weight:650;line-height:1.45;white-space:pre-line}
.ops-app .customer-v2-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:28px}
.ops-app .customer-v2-metrics>div{display:grid;gap:10px;min-height:132px;padding:20px;border:1px solid var(--border-default);border-radius:15px;background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-low)}
.ops-app .customer-v2-metrics>div.is-urgent{border:1px solid color-mix(in srgb,var(--status-error) 24%,var(--border-default));background:color-mix(in srgb,var(--status-error-bg) 72%,var(--card-bg));box-shadow:var(--shadow-low)}
.ops-app .customer-v2-metrics span{color:var(--text-primary);font-size:11px;font-weight:var(--label-weight);letter-spacing:.1em}
.ops-app .customer-v2-metric-value{color:var(--text-primary)!important;font-family:var(--font-heading)!important;font-size:37px!important;font-weight:var(--heading-strong-weight)!important;line-height:1.05!important;font-variant-numeric:tabular-nums;letter-spacing:-.045em}
.ops-app .customer-v2-metrics small{align-self:end;color:var(--text-primary);font-size:12.5px;font-weight:var(--body-medium-weight)}
.ops-app .customer-v2-tabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--border-default)}
.ops-app .customer-v2-tabs button{position:relative;min-height:42px;padding:0 14px;border:0;border-radius:0!important;background:transparent;color:var(--text-muted);font-size:13px;font-weight:800;cursor:pointer}
.ops-app .customer-v2-tabs button:after{position:absolute;right:10px;bottom:-1px;left:10px;height:2px;background:var(--brand-accent);content:"";opacity:0}
.ops-app .customer-v2-tabs button.is-active{color:var(--text-primary)}
.ops-app .customer-v2-tabs button.is-active:after{opacity:1}
.ops-app .customer-v2-pane{border:1px solid var(--border-default);border-radius:16px;background:var(--surface-primary);box-shadow:var(--shadow-xs)}
.ops-app .customer-v2-section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 20px 15px}
.ops-app .customer-v2-section-head h2{margin:0;font:700 19px/1.15 var(--font-heading);letter-spacing:-.02em}
.ops-app .customer-v2-section-head p{margin:4px 0 0;color:var(--text-muted);font-size:12px}
.ops-app .customer-v2-text-action{padding:6px 0;border:0;background:transparent;color:var(--brand-accent-strong);font-size:12px;font-weight:850;cursor:pointer}
.ops-app .customer-v2-text-action:hover{text-decoration:underline}
.ops-app .customer-v2-open-items{border-top:1px solid var(--border-subtle)}
.ops-app .customer-v2-open-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:20px;width:100%;padding:14px 20px;border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background .15s ease}
.ops-app .customer-v2-open-row:last-child{border-bottom:0}
.ops-app .customer-v2-open-row:hover{background:var(--hover-bg)}
.ops-app .customer-v2-open-row:focus-visible{position:relative;z-index:1;outline:2px solid var(--brand-accent);outline-offset:-2px}
.ops-app .customer-v2-open-main{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:10px}
.ops-app .customer-v2-open-main>strong{color:var(--text-primary);font-size:13px;font-weight:var(--body-medium-weight)}
.ops-app .customer-v2-open-row:hover .customer-v2-open-main>strong{color:var(--brand-accent-strong)}
.ops-app .customer-v2-open-main small{overflow:hidden;color:var(--text-muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.ops-app .customer-v2-open-row>strong{font-size:13px;font-variant-numeric:tabular-nums}
.ops-app .customer-v2-subsection{margin-top:18px;border-top:1px solid var(--border-default)}
.ops-app .customer-v2-estimates{border-top:1px solid var(--border-subtle)}
.ops-app .customer-v2-estimates>button,.ops-app .customer-v2-estimates>a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:16px;width:100%;padding:13px 20px;border:0;border-bottom:1px solid var(--border-subtle);border-radius:0!important;background:var(--surface-primary);color:var(--text-primary);text-align:left;cursor:pointer}
.ops-app .customer-v2-estimates>button:hover,.ops-app .customer-v2-estimates>a:hover{background:var(--surface-primary)}
.ops-app .customer-v2-estimates>button>span:first-child,.ops-app .customer-v2-estimates>a>span:first-child{display:grid;gap:3px}
.ops-app .customer-v2-estimates small{color:var(--text-muted);font-size:11px}
.ops-app .customer-v2-estimates>button>strong,.ops-app .customer-v2-estimates>a>strong{font-size:13px;font-variant-numeric:tabular-nums}
.ops-app .customer-v2-payment-list{border-top:1px solid var(--border-subtle);overflow-x:auto}
.ops-app .customer-v2-payment-list-head,.ops-app .customer-v2-payment-row{display:grid;grid-template-columns:minmax(175px,1.5fr) minmax(130px,1fr) 120px 110px 22px;align-items:center;gap:14px;min-width:660px;padding:13px 20px}
.ops-app .customer-v2-payment-list-head{background:var(--surface-primary);color:var(--text-subtle);font-size:10px;font-weight:var(--table-heading-weight);letter-spacing:.08em;text-transform:uppercase}
.ops-app .customer-v2-payment-row{appearance:none;width:100%;border:0;border-top:1px solid var(--border-subtle);border-radius:0!important;background:var(--table-bg);color:var(--text-primary);font:inherit;font-size:12px;text-align:left;cursor:pointer;transition:background .15s ease}
.ops-app .customer-v2-payment-row:hover{background:var(--hover-bg)}
.ops-app .customer-v2-payment-row:focus-visible{position:relative;z-index:1;outline:2px solid var(--brand-accent);outline-offset:-2px}
.ops-app .customer-v2-payment-row>span:first-child{display:grid;gap:3px;min-width:0}
.ops-app .customer-v2-payment-row>span:first-child strong{font-size:13px}
.ops-app .customer-v2-payment-row small{overflow:hidden;color:var(--text-muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.ops-app .customer-v2-payment-row>strong{font-size:13px;font-variant-numeric:tabular-nums}
.ops-app .customer-v2-payment-entry{position:relative;min-width:660px}
.ops-app .customer-v2-payment-entry .customer-v2-payment-row{grid-template-columns:minmax(175px,1.5fr) minmax(130px,1fr) 120px 110px 22px;padding-right:100px}
.ops-app .customer-v2-payment-tools{position:absolute;top:50%;right:18px;z-index:3;transform:translateY(-50%)}
.ops-app .customer-v2-more-actions{position:relative;flex:0 0 auto}
.ops-app .customer-v2-more-actions>summary{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 13px;border:1px solid var(--border-default);border-radius:10px;background:var(--surface-primary);color:var(--text-primary);font-size:13px;font-weight:700;cursor:pointer;list-style:none}
.ops-app .customer-v2-more-actions>summary::-webkit-details-marker{display:none}
.ops-app .customer-v2-more-actions>div{position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:180px;padding:8px;border:1px solid var(--border-default);border-radius:11px;background:var(--surface-primary);box-shadow:var(--shadow-medium)}
.ops-app .customer-v2-more-actions .btn-link{width:100%;padding:10px;text-align:left}
.ops-app .customer-v2-payment-arrow{color:var(--brand-accent-strong);font-size:17px;font-weight:800;text-align:right}
.ops-app .customer-v2-activity-search{min-width:220px;height:38px}
.ops-app .customer-v2-timeline{position:relative;padding:0 20px 14px;border-top:1px solid var(--border-subtle)}
.ops-app .customer-v2-timeline:before{position:absolute;top:23px;bottom:23px;left:31px;width:1px;background:var(--border-default);content:""}
.ops-app .customer-v2-timeline>button,.ops-app .customer-v2-timeline>a{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;width:100%;padding:16px 0;border:0;border-bottom:1px solid var(--border-subtle);background:transparent;color:var(--text-primary);text-align:left;cursor:pointer}
.ops-app .customer-v2-timeline>button:hover strong,.ops-app .customer-v2-timeline>a:hover strong{color:var(--brand-accent-strong)}
.ops-app .customer-v2-timeline>button:last-child,.ops-app .customer-v2-timeline>a:last-child{border-bottom:0}
.ops-app .customer-v2-timeline-dot{z-index:1;display:block;width:10px;height:10px;margin:5px 0 0 6px;border:2px solid var(--card-bg);border-radius:50%;background:var(--brand-accent);box-shadow:0 0 0 1px var(--brand-accent)}
.ops-app .customer-v2-timeline>button>span:last-child,.ops-app .customer-v2-timeline>a>span:last-child{display:grid;gap:3px}
.ops-app .customer-v2-timeline small{color:var(--text-subtle);font-size:10px;font-weight:var(--label-weight);text-transform:uppercase}
.ops-app .customer-v2-timeline strong{font-size:13px}
.ops-app .customer-v2-timeline em{color:var(--text-muted);font-size:12px;font-style:normal;line-height:1.45}
@media (max-width:920px){.ops-app .customer-v2-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-app .customer-v2-metrics>div:last-child{grid-column:1/-1}}
@media (max-width:640px){.ops-app .customer-v2{padding-bottom:18px}.ops-app .customer-v2-head{gap:14px;margin-bottom:18px}.ops-app .customer-v2-head{display:grid}.ops-app .customer-v2-actions{width:100%}.ops-app .customer-v2-actions>.btn:not(.icon-btn){flex:1}.ops-app .customer-v2-contact{gap:13px;padding-bottom:18px}.ops-app .customer-v2-contact>div{flex-basis:100%}.ops-app .customer-v2-metrics{grid-template-columns:1fr;gap:8px;margin-bottom:19px}.ops-app .customer-v2-metrics>div,.ops-app .customer-v2-metrics>div:last-child{grid-column:auto;min-height:92px}.ops-app .customer-v2-tabs{justify-content:space-between}.ops-app .customer-v2-tabs button{flex:1;padding:0 4px;font-size:12px}.ops-app .customer-v2-section-head{align-items:flex-start;padding:16px}.ops-app .customer-v2-section-head .btn{flex:none}.ops-app .customer-v2-open-row{grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:13px 16px}.ops-app .customer-v2-open-row>.customer-v2-text-action{grid-column:1/-1;justify-self:start}.ops-app .customer-v2-open-main{grid-template-columns:auto minmax(0,1fr)}.ops-app .customer-v2-open-main small{grid-column:1/-1}.ops-app .customer-v2-estimates>button,.ops-app .customer-v2-estimates>a{gap:8px;padding:13px 16px}.ops-app .customer-v2-estimates .customers-v2-health{display:none}.ops-app .customer-v2-payment-list-head,.ops-app .customer-v2-payment-row{padding-inline:16px}.ops-app .customer-v2-activity-search{width:100%;min-width:0}.ops-app .customer-v2-timeline{padding-inline:16px}.ops-app .customer-v2-timeline:before{left:27px}}
.ops-app .customer-v2-details{overflow:hidden;margin-bottom:25px;border:1px solid var(--border-default);border-radius:16px;background:var(--surface-primary);box-shadow:var(--shadow-xs)}
.ops-app .customer-v2-contact-links{display:flex;align-items:center;gap:6px}
.ops-app .customer-v2-contact-links>button{max-width:100%;padding:2px 0;border:0;border-bottom:1px solid color-mix(in srgb,var(--brand-accent-strong) 42%,transparent);border-radius:0;background:transparent;color:var(--brand-accent-strong);font:inherit;cursor:pointer}
.ops-app .customer-v2-contact-links>button:hover{border-bottom-color:var(--brand-accent-strong);color:var(--text-primary)}
.ops-app .customer-v2-contact-links>button:focus-visible{outline:2px solid var(--brand-accent);outline-offset:3px;border-radius:2px}
.ops-app .customer-v2-contact-links>.is-missing{color:var(--text-subtle)}
.ops-app .customer-v2-details-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 20px 17px;border-bottom:1px solid var(--border-subtle)}
.ops-app .customer-v2-details-head>div{min-width:0}
.ops-app .customer-v2-details-head span,.ops-app .customer-v2-summary>header span{display:block;margin-bottom:5px;color:var(--brand-accent-strong);font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.ops-app .customer-v2-details-head h2,.ops-app .customer-v2-summary>header h2{margin:0;font:700 18px/1.2 var(--font-heading);letter-spacing:-.02em}
.ops-app .customer-v2-details-head p{margin:4px 0 0;color:var(--text-muted);font-size:11.5px;line-height:1.45}
.ops-app .customer-v2-details-head>.btn{flex:none}
.ops-app .customer-v2-details-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(270px,.82fr);align-items:stretch;background:var(--surface-primary)}
.ops-app .customer-v2-detail-group{min-width:0;padding:18px 20px 20px}
.ops-app .customer-v2-notes-group{border-left:1px solid var(--border-subtle);background:var(--surface-primary)}
.ops-app .customer-v2-detail-group-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:11px}
.ops-app .customer-v2-detail-group-head strong{font-size:12.5px}
.ops-app .customer-v2-detail-group-head small{color:var(--text-subtle);font-size:9.5px;line-height:1.35;text-align:right}
.ops-app .customer-v2-location-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ops-app .customer-v2-detail-item{position:relative;display:grid;align-content:start;gap:5px;min-height:112px;padding:14px 14px 13px 17px;overflow:hidden;border:1px solid var(--border-default);border-radius:11px;background:var(--surface-primary)}
.ops-app .customer-v2-detail-item:before{position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--brand-accent);content:""}
.ops-app .customer-v2-detail-item>span{color:var(--text-subtle);font-size:8.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.ops-app .customer-v2-detail-item>strong{font-size:12.5px;font-weight:700;line-height:1.48;white-space:pre-line}
.ops-app .customer-v2-detail-item>small{margin-top:auto;color:var(--text-muted);font-size:9px;line-height:1.4}
.ops-app .customer-v2-detail-item.is-empty{border-style:dashed;background:color-mix(in srgb,var(--surface-primary) 56%,transparent)}
.ops-app .customer-v2-detail-item.is-empty:before{background:var(--border-strong)}
.ops-app .customer-v2-detail-item button,.ops-app .customer-v2-notes-empty button{justify-self:start;margin-top:auto;padding:4px 0;border:0;background:transparent;color:var(--brand-accent-strong);font-size:10px;font-weight:850;cursor:pointer}
.ops-app .customer-v2-detail-item button:hover,.ops-app .customer-v2-notes-empty button:hover{text-decoration:underline}
.ops-app .customer-v2-notes-group>p{min-height:112px;margin:0;padding:14px;border:1px solid var(--border-subtle);border-radius:11px;background:var(--surface-primary);color:var(--text-primary);font-size:12px;line-height:1.6;white-space:pre-line}
.ops-app .customer-v2-notes-empty{display:grid;align-content:start;gap:5px;min-height:112px;padding:14px;border:1px dashed var(--border-default);border-radius:11px;background:var(--surface-primary)}
.ops-app .customer-v2-notes-empty>strong{font-size:12px}
.ops-app .customer-v2-notes-empty>span{color:var(--text-muted);font-size:10px;line-height:1.45}
.ops-app .customer-v2-summary{margin-bottom:25px}
.ops-app .customer-v2-summary>header{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:11px;padding:0 2px}
.ops-app .customer-v2-summary>header>p{max-width:390px;margin:0;color:var(--text-muted);font-size:10.5px;line-height:1.45;text-align:right}
.ops-app .customer-v2-summary .customer-v2-metrics{margin-bottom:0}
.ops-app .customer-v2-summary .customer-v2-metrics>div{border-color:var(--border-default);box-shadow:var(--shadow-xs)}
@media(max-width:920px){.ops-app .customer-v2-details-grid{grid-template-columns:1fr}.ops-app .customer-v2-notes-group{border-top:1px solid var(--border-subtle);border-left:0}.ops-app .customer-v2-summary>header{align-items:flex-start}.ops-app .customer-v2-summary>header>p{max-width:330px}}
@media(max-width:640px){.ops-app .customer-v2-details{margin-bottom:20px;border-radius:14px}.ops-app .customer-v2-details-head{align-items:flex-start;padding:16px}.ops-app .customer-v2-details-head p{display:none}.ops-app .customer-v2-details-head>.btn{min-height:36px!important;padding-inline:10px!important}.ops-app .customer-v2-detail-group{padding:16px}.ops-app .customer-v2-detail-group-head{align-items:flex-start;flex-direction:column;gap:2px}.ops-app .customer-v2-detail-group-head small{text-align:left}.ops-app .customer-v2-location-list{grid-template-columns:1fr}.ops-app .customer-v2-detail-item,.ops-app .customer-v2-notes-group>p,.ops-app .customer-v2-notes-empty{min-height:102px}.ops-app .customer-v2-summary{margin-bottom:20px}.ops-app .customer-v2-summary>header{display:block;padding:0}.ops-app .customer-v2-summary>header>p{margin-top:4px;text-align:left}.ops-app .customer-v2-summary .customer-v2-metrics{margin-bottom:0}}
.ops-app .customer-v2{max-width:1120px;margin:0 auto;padding-top:6px}
.ops-app .customer-v2-back{margin-bottom:25px;color:var(--brand-accent-strong);font-size:12.5px}
.ops-app .customer-v2-back:hover{color:var(--text-primary)}
.ops-app .customer-v2-head{align-items:flex-start;margin-bottom:30px}
.ops-app .customer-v2-identity{align-items:center;gap:18px}
.ops-app .customer-v2-identity .customer-v2-avatar{width:70px;height:70px;border-radius:18px;background:var(--brand-accent-soft);color:var(--brand-accent-strong);font-size:20px}
.ops-app .customer-v2-identity h1{font-size:clamp(32px,3.4vw,43px);line-height:1.04}
.ops-app .customer-v2-identity .customers-v2-eyebrow{margin-bottom:6px;font-size:9.5px}
.ops-app .customer-v2-contact-links{display:flex;align-items:center;flex-wrap:wrap;gap:7px 18px;margin-top:9px!important;overflow:visible!important;color:var(--text-secondary);white-space:normal!important}
.ops-app .customer-v2-contact-links>button,.ops-app .customer-v2-contact-links>.is-missing{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:2px 0;border:0!important;background:transparent;color:var(--text-secondary);font-size:12.5px;line-height:1.35;text-decoration:none;cursor:pointer}
.ops-app .customer-v2-contact-links>button:hover{color:var(--brand-accent-strong)}
.ops-app .customer-v2-contact-icon{display:grid;place-items:center;flex:none;width:20px;height:20px;color:var(--brand-accent-strong);font-size:14px;font-weight:800}
.ops-app .customer-v2-contact-links>.is-missing{color:var(--text-subtle);cursor:default}
.ops-app .customer-v2-actions{margin-top:7px}
.ops-app .customer-v2-actions>.btn{border-color:var(--border-default);background:var(--surface-primary);box-shadow:var(--shadow-xs)}
.ops-app .customer-v2-actions>.btn.primary{border:0;background:var(--action-primary)!important;color:var(--action-primary-text)!important;box-shadow:var(--shadow-medium)}
.ops-app .customer-v2-actions>.btn.primary:hover{background:var(--action-primary-hover)!important}
.ops-app .customer-v2-actions .icon-btn{background:var(--surface-primary)}
.ops-app .customer-v2-info-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:30px;padding:3px 0}
.ops-app .customer-v2-info-item{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:12px;min-width:0;padding:7px 26px}
.ops-app .customer-v2-info-item:first-child{padding-left:0}
.ops-app .customer-v2-info-item+ .customer-v2-info-item{border-left:1px solid var(--border-default)}
.ops-app .customer-v2-info-item:last-child{padding-right:0}
.ops-app .customer-v2-info-icon{display:grid;place-items:center;width:32px;height:32px;color:var(--text-muted);font-size:21px;font-weight:700;line-height:1}
.ops-app .customer-v2-info-item>div{min-width:0}
.ops-app .customer-v2-info-item>div>span{display:block;margin-bottom:7px;color:var(--text-subtle);font-size:9.5px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.ops-app .customer-v2-info-item strong{display:block;color:var(--text-secondary);font-size:12px;font-weight:600;line-height:1.65;white-space:pre-line}
.ops-app .customer-v2-info-item strong.is-missing{color:var(--text-subtle);font-style:normal}
.ops-app .customer-v2-summary{margin:0 0 24px}
.ops-app .customer-v2-summary .customer-v2-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0}
.ops-app .customer-v2-summary .customer-v2-metrics>div{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:start;gap:15px;min-height:145px;padding:21px;border:1px solid var(--border-default);border-radius:14px;background:var(--surface-primary);box-shadow:var(--shadow-xs)}
.ops-app .customer-v2-summary .customer-v2-metrics>div.is-urgent{border:1px solid color-mix(in srgb,var(--status-error) 24%,var(--border-default));background:color-mix(in srgb,var(--status-error-bg) 72%,var(--card-bg));box-shadow:var(--shadow-low)}
.ops-app .customer-v2-metric-icon{display:grid!important;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--surface-secondary);color:var(--text-primary)!important;font-size:19px!important;font-weight:850!important;letter-spacing:0!important;line-height:1!important;text-transform:none!important}
.ops-app .customer-v2-metrics .is-paid .customer-v2-metric-icon{background:var(--brand-accent-soft);color:var(--brand-accent-strong)!important}
.ops-app .customer-v2-metrics .is-urgent .customer-v2-metric-icon{background:var(--status-error-bg);color:var(--status-error)!important}
.ops-app .customer-v2-metrics>div>div{display:grid;align-content:start;gap:5px;min-width:0}
.ops-app .customer-v2-metrics>div>div>span{color:var(--text-muted)!important;font-size:10px!important;font-weight:850!important;letter-spacing:.07em!important}
.ops-app .customer-v2-summary .customer-v2-metric-value{overflow:hidden;color:var(--text-primary)!important;font-size:27px!important;line-height:1.16!important;text-overflow:ellipsis;white-space:nowrap}
.ops-app .customer-v2-summary .is-paid .customer-v2-metric-value{color:var(--brand-accent-strong)!important}
.ops-app .customer-v2-summary .is-urgent .customer-v2-metric-value,.ops-app .customer-v2-summary .is-urgent small{color:var(--status-error)!important}
.ops-app .customer-v2-summary .is-last .customer-v2-metric-value{font-size:18px!important;letter-spacing:-.015em}
.ops-app .customer-v2-metrics em{color:var(--text-muted);font-size:11px;font-style:normal;line-height:1.35}
.ops-app .customer-v2-summary .customer-v2-metrics small{align-self:auto;margin-top:6px;color:var(--text-muted);font-size:11px;font-weight:600;line-height:1.4}
.ops-app .customer-v2-tabs{gap:13px;margin:0 0 20px;border-bottom-color:var(--border-default)}
.ops-app .customer-v2-tabs button{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 12px;color:var(--text-muted);font-size:12.5px}
.ops-app .customer-v2-tabs button>span{display:grid;place-items:center;width:19px;height:19px;color:currentColor;font-size:16px;font-weight:700}
.ops-app .customer-v2-tabs button:after{right:8px;left:8px;height:2px;background:var(--brand-accent-strong)}
.ops-app .customer-v2-tabs button.is-active{color:var(--brand-accent-strong)}
.ops-app .customer-v2-overview{display:grid;gap:16px}
.ops-app .customer-v2-section-card{overflow:hidden;border:1px solid var(--border-default);border-radius:14px;background:var(--surface-primary);box-shadow:var(--shadow-xs)}
.ops-app .customer-v2-card-head{padding:18px 20px;border-bottom:1px solid var(--border-subtle)}
.ops-app .customer-v2-section-title{display:flex;align-items:center;gap:12px;min-width:0}
.ops-app .customer-v2-section-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--brand-accent-soft);color:var(--brand-accent-strong);font-size:17px;font-weight:850}
.ops-app .customer-v2-section-title>div{min-width:0}
.ops-app .customer-v2-section-title h2{font-size:18px}
.ops-app .customer-v2-section-title p{font-size:11px}
.ops-app .customer-v2-card-head>.btn{border-color:color-mix(in srgb,var(--brand-accent) 48%,var(--border-default));background:var(--surface-primary);color:var(--brand-accent-strong);box-shadow:none}
.ops-app .customer-v2-card-head>.btn:hover{background:var(--brand-accent-faint)}
.ops-app .customer-v2-section-card .customer-v2-open-items,.ops-app .customer-v2-section-card .customer-v2-estimates{border-top:0}
.ops-app .customer-v2-section-card .customer-v2-open-row{grid-template-columns:minmax(0,1fr) auto;gap:20px;padding:16px 20px;border-bottom:1px solid var(--border-subtle);background:var(--surface-primary)}
.ops-app .customer-v2-section-card .customer-v2-open-row:last-child{border-bottom:0}
.ops-app .customer-v2-section-card .customer-v2-open-main{display:flex;align-items:center;gap:9px;min-width:0}
.ops-app .customer-v2-open-main>strong:before,.ops-app .customer-v2-open-main>small:before{margin-right:9px;color:var(--border-strong);content:"·"}
.ops-app .customer-v2-open-main small{min-width:0}
.ops-app .customer-v2-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:17px}
.ops-app .customer-v2-row-actions>strong{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ops-app .customer-v2-row-actions .customer-v2-text-action{white-space:nowrap}
.ops-app .customer-v2-chevron{display:grid;place-items:center;width:18px;color:var(--text-muted);font-size:23px;font-weight:500;line-height:1}
.ops-app .customer-v2-section-card .customer-v2-estimates>button,.ops-app .customer-v2-section-card .customer-v2-estimates>a{grid-template-columns:minmax(0,1fr) auto;gap:18px;padding:16px 20px;border-bottom:1px solid var(--border-subtle)}
.ops-app .customer-v2-section-card .customer-v2-estimates>button:last-child,.ops-app .customer-v2-section-card .customer-v2-estimates>a:last-child{border-bottom:0}
.ops-app .customer-v2-estimate-actions{display:flex!important;align-items:center;justify-content:flex-end;gap:16px}
.ops-app .customer-v2-estimate-actions>strong{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ops-app .customer-v2-estimate-actions .customers-v2-health{display:inline-flex}
.ops-app .customer-v2-doc-row{display:flex;align-items:center;position:relative;border-bottom:1px solid var(--border-subtle)}
.ops-app .customer-v2-doc-row:last-child{border-bottom:0}
.ops-app .customer-v2-doc-row>a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;flex:1;min-width:0;padding:16px 10px 16px 20px;color:var(--text-primary);text-decoration:none}
.ops-app .customer-v2-doc-row>a:hover{background:var(--hover-bg)}
.ops-app .customer-v2-doc-row>a>span:first-child{display:grid;gap:3px;min-width:0}
.ops-app .customer-v2-doc-row>a>span:first-child small{color:var(--text-muted);font-size:11px}
.ops-app .customer-v2-doc-actions{position:relative;flex:none;margin-right:20px}
.ops-app .customer-v2-doc-actions[open]{z-index:20}
.ops-app .customer-v2-doc-actions>summary{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--border-default);border-radius:9px;background:var(--surface-secondary);color:var(--text-primary);cursor:pointer;list-style:none}
.ops-app .customer-v2-doc-actions>summary::-webkit-details-marker{display:none}
.ops-app .customer-v2-doc-actions>summary:hover,.ops-app .customer-v2-doc-actions[open]>summary{border-color:var(--brand-accent-border);background:var(--hover-bg)}
.ops-app .customer-v2-doc-actions>summary span{font-size:22px;line-height:1;transform:translateY(-1px)}
.ops-app .customer-v2-doc-menu{position:absolute;top:calc(100% + 6px);right:0;display:grid;min-width:220px;padding:6px;border:1px solid var(--border-default);border-radius:11px;background:var(--surface-primary);box-shadow:var(--shadow-medium)}
.ops-app .customer-v2-doc-menu>a,.ops-app .customer-v2-doc-menu>button{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:8px 10px;border:0;border-radius:7px;background:transparent;color:var(--text-primary);font:700 12px var(--font-ui);text-align:left;text-decoration:none;cursor:pointer;white-space:nowrap}
.ops-app .customer-v2-doc-menu>a:hover,.ops-app .customer-v2-doc-menu>button:hover{background:var(--hover-bg)}
.ops-app .customer-v2-menu-icon{display:grid;place-items:center;width:18px;color:var(--text-muted);font-size:17px}
@media(max-width:640px){.ops-app .customer-v2-doc-row>a{gap:8px;padding:13px 8px 13px 16px}.ops-app .customer-v2-doc-actions{margin-right:16px}.ops-app .customer-v2-doc-row .customer-v2-estimate-actions{gap:8px}}
@media(max-width:960px){.ops-app .customer-v2-info-item{padding-inline:18px}.ops-app .customer-v2-summary .customer-v2-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-app .customer-v2-summary .customer-v2-metrics>div:last-child{grid-column:1/-1}.ops-app .customer-v2-summary .is-last{grid-template-columns:48px minmax(0,1fr)}}
@media(max-width:760px){.ops-app .customer-v2-head{display:grid;gap:18px}.ops-app .customer-v2-actions{width:100%;margin-top:0}.ops-app .customer-v2-actions>.btn:not(.icon-btn){flex:1}.ops-app .customer-v2-info-row{grid-template-columns:1fr;margin-bottom:24px}.ops-app .customer-v2-info-item,.ops-app .customer-v2-info-item:first-child,.ops-app .customer-v2-info-item:last-child{padding:14px 0}.ops-app .customer-v2-info-item+ .customer-v2-info-item{border-top:1px solid var(--border-subtle);border-left:0}.ops-app .customer-v2-summary .customer-v2-metrics{grid-template-columns:1fr}.ops-app .customer-v2-summary .customer-v2-metrics>div,.ops-app .customer-v2-summary .customer-v2-metrics>div:last-child{grid-column:auto;min-height:118px}.ops-app .customer-v2-tabs{overflow-x:auto}.ops-app .customer-v2-section-card .customer-v2-open-row{grid-template-columns:1fr;gap:12px}.ops-app .customer-v2-row-actions{justify-content:flex-start}.ops-app .customer-v2-card-head{padding:16px}.ops-app .customer-v2-section-card .customer-v2-estimates>button,.ops-app .customer-v2-section-card .customer-v2-estimates>a{padding:15px 16px}}
@media(max-width:520px){.ops-app .customer-v2{padding-top:1px}.ops-app .customer-v2-back{margin-bottom:19px}.ops-app .customer-v2-identity{align-items:flex-start;gap:12px}.ops-app .customer-v2-identity .customer-v2-avatar{width:56px;height:56px;border-radius:15px;font-size:16px}.ops-app .customer-v2-identity h1{font-size:29px}.ops-app .customer-v2-contact-links{align-items:flex-start;flex-direction:column;gap:5px}.ops-app .customer-v2-actions{display:grid;grid-template-columns:1fr 1fr auto}.ops-app .customer-v2-actions>.btn:not(.icon-btn){width:100%;padding-inline:10px}.ops-app .customer-v2-summary .customer-v2-metrics>div{grid-template-columns:42px minmax(0,1fr);gap:12px;padding:17px}.ops-app .customer-v2-metric-icon{width:42px;height:42px}.ops-app .customer-v2-summary .customer-v2-metric-value{font-size:24px!important}.ops-app .customer-v2-tabs{justify-content:initial}.ops-app .customer-v2-tabs button{flex:0 0 auto;min-width:96px}.ops-app .customer-v2-card-head{align-items:flex-start}.ops-app .customer-v2-card-head>.btn{flex:none}.ops-app .customer-v2-section-icon{width:34px;height:34px}.ops-app .customer-v2-section-title{gap:10px}.ops-app .customer-v2-section-card .customer-v2-open-main{align-items:flex-start;flex-wrap:wrap}.ops-app .customer-v2-open-main>strong:before{display:none}.ops-app .customer-v2-open-main>small{flex-basis:100%}.ops-app .customer-v2-open-main>small:before{display:none}.ops-app .customer-v2-row-actions{display:grid;grid-template-columns:1fr auto auto;width:100%;gap:12px}.ops-app .customer-v2-estimate-actions{gap:10px}.ops-app .customer-v2-estimate-actions .customers-v2-health{display:none}.ops-app .customer-v2-section-card .customer-v2-estimates>button,.ops-app .customer-v2-section-card .customer-v2-estimates>a{gap:10px}}
.ops-app .customer-v2{width:100%;max-width:1120px;margin-inline:auto}
.ops-app .customer-v2-pane,.ops-app .customer-v2-section-card{border-radius:14px!important;border-color:var(--border-default)!important;box-shadow:var(--shadow-xs)}
@media (min-width:761px) and (max-width:1080px){.ops-app .customer-v2-head{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important}.ops-app .customer-v2-actions{justify-self:end;flex-wrap:nowrap!important}}
@media (max-width:760px){.ops-app .customer-v2-actions{flex-wrap:nowrap!important}}
@media(max-width:430px){.ops-app .customer-v2-actions{min-width:0}}
.ops-app .customer-v2-tabs .customer-v2-tab-icon{position:relative;display:block;width:19px;height:19px;flex:none;color:currentColor;font-size:0}
.ops-app .customer-v2-tab-icon.is-overview:before{position:absolute;inset:2px 1px 2px 2px;border-bottom:1.7px solid currentColor;border-left:1.7px solid currentColor;border-radius:0 0 0 2px;content:""}
.ops-app .customer-v2-tab-icon.is-overview:after{position:absolute;top:5px;left:6px;width:11px;height:7px;border-top:1.8px solid currentColor;border-right:1.8px solid currentColor;content:"";transform:skewY(-28deg) rotate(-7deg);transform-origin:center}
.ops-app .customer-v2-tab-icon.is-payments{height:15px;margin-block:2px;border:1.7px solid currentColor;border-radius:3px}
.ops-app .customer-v2-tab-icon.is-payments:before{position:absolute;top:4px;right:0;left:0;height:1.7px;background:currentColor;content:""}
.ops-app .customer-v2-tab-icon.is-payments:after{position:absolute;bottom:2px;left:3px;width:5px;height:1.7px;border-radius:2px;background:currentColor;content:""}
.ops-app .customer-v2-tab-icon.is-activity{width:18px;height:18px;margin:.5px;border:1.7px solid currentColor;border-radius:50%}
.ops-app .customer-v2-tab-icon.is-activity:before{position:absolute;top:3px;left:7px;width:1.7px;height:5px;border-radius:2px;background:currentColor;content:""}
.ops-app .customer-v2-tab-icon.is-activity:after{position:absolute;top:7px;left:7px;width:5px;height:1.7px;border-radius:2px;background:currentColor;content:"";transform:rotate(28deg);transform-origin:left center}
.ops-app .customer-v2-info-icon{position:relative;display:block;width:32px;height:32px;color:var(--text-muted);font-size:0}
.ops-app .customer-v2-info-icon.is-billing:before{position:absolute;top:5px;left:9px;width:13px;height:13px;border:1.7px solid currentColor;border-radius:50% 50% 50% 0;content:"";transform:rotate(-45deg)}
.ops-app .customer-v2-info-icon.is-billing:after{position:absolute;top:9px;left:13px;width:5px;height:5px;border:1.5px solid currentColor;border-radius:50%;content:""}
.ops-app .customer-v2-info-icon.is-project:before{position:absolute;top:5px;left:7px;width:17px;height:20px;border:1.7px solid currentColor;border-radius:2px;background:linear-gradient(currentColor,currentColor) center bottom/5px 6px no-repeat;content:""}
.ops-app .customer-v2-info-icon.is-project:after{position:absolute;top:9px;left:11px;width:2.5px;height:2.5px;border-radius:.5px;background:currentColor;box-shadow:6px 0 currentColor,0 5px currentColor,6px 5px currentColor;content:""}
.ops-app .customer-v2-info-icon.is-notes:before{position:absolute;top:5px;left:7px;width:17px;height:21px;border:1.7px solid currentColor;border-radius:3px;background:linear-gradient(currentColor,currentColor) center 3px/7px 1.7px no-repeat;content:""}
.ops-app .customer-v2-info-icon.is-notes:after{position:absolute;top:12px;left:11px;width:9px;height:1.7px;border-radius:2px;background:currentColor;box-shadow:0 4px currentColor,0 8px currentColor;content:""}
.ops-app .customer-v2-summary .customer-v2-metrics>div.is-paid .customer-v2-metric-value,.ops-app .customer-v2-summary .customer-v2-metrics>div.is-urgent .customer-v2-metric-value{display:block;
  overflow:visible;
  font-size:22px!important;
  line-height:1!important;
  letter-spacing:-.055em;
  text-overflow:clip}
.ops-app .customer-v2-summary .customer-v2-metric-value>.sc-interp{color:inherit!important;
  font-family:inherit!important;
  font-size:inherit!important;
  font-weight:inherit!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;
  text-transform:none!important}

/* ops/extras.css */
/* Light Ops additions from the Node app (2026-09-23), in the same navy and gold as the rest:
   popups ("sheets"), Text it / Copy text, the Record payment popup, To Order items, and Settings cards.
   Loaded after shell.css, ops.css, lists.css and builder.css. */

/* ---------------------------------------------------------------- dashboard: seven stats fit one row */
@media (min-width:1180px){.ops-app .stats.stats-dash{grid-template-columns:repeat(7,minmax(0,1fr))}.ops-app .stats-dash .stat{padding:14px 14px}.ops-app .stats-dash .stat-value{font-size:23px}}

/* ---------------------------------------------------------------- lead page: two actions in the panel head */
.ops-app .panel-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.ops-app .panel-actions form{margin:0}

/* ---------------------------------------------------------------- Text it / Copy text */
.ops-app .ib3-card-actions .ib3-text-it{text-decoration:none}
.ops-app .ib3-card-actions .ib3-text-note{margin:2px 0 6px;font-size:12px;line-height:1.5;color:var(--text-subtle);overflow-wrap:anywhere}
.ops-app .notif-sms{display:flex;align-items:center;justify-content:center;gap:7px;margin:-2px 12px 8px 34px;min-height:36px;padding:0 12px;border:1px solid var(--brand-accent-border,rgba(243,210,138,.35));border-radius:10px;background:var(--brand-accent-faint,rgba(243,210,138,.06));color:var(--gold-soft)!important;font:700 13px/1 var(--sans);text-decoration:none}
.ops-app .notif-sms:hover{background:rgba(243,210,138,.12)}
.ops-app .notif-sms svg{flex:none}
.ops-app .todos .todo-sms{margin:-2px 10px 6px 32px}

/* Keep long customer/work summaries inside their dashboard card. */
.ops-app .mini-lead{min-width:0;max-width:100%}
.ops-app .mini-copy{min-width:0;max-width:100%;overflow:hidden}
.ops-app .mini-copy small{display:-webkit-box;overflow:hidden;white-space:normal;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.ops-app .mini-lead>.pill{flex:none;max-width:100%;white-space:nowrap}

/* ---------------------------------------------------------------- popups (sheets) */
/* The popup frame, fields, date popup and confirmation dialog live in popups.css. */

/* ---------------------------------------------------------------- owner account */
.ops-app .ops-account-identity{display:flex;align-items:center;gap:16px;padding:4px 0 20px;border-bottom:1px solid var(--border-subtle)}
.ops-app .ops-account-identity>img{width:76px;height:76px;flex:none;object-fit:cover;border:1px solid var(--border-default);border-radius:16px;background:var(--surface-secondary)}
.ops-app .ops-account-identity>div{min-width:0}
.ops-app .ops-account-identity strong{display:block;font-size:17px;line-height:1.3;overflow-wrap:anywhere}
.ops-app .ops-account-identity span{display:block;margin-top:3px;color:var(--text-muted);font-size:12px}
.ops-app .ops-account-photo-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px}
.ops-app .ops-account-photo-actions [data-account-choose-photo]{display:inline-flex;align-items:center;min-height:34px;margin:0;padding:6px 11px;border:1px solid var(--input-border);border-radius:9px;background:var(--surface-primary);color:var(--text-primary);font-size:12px;font-weight:700;cursor:pointer}
.ops-app .ops-account-photo-actions [data-account-choose-photo]:hover{border-color:var(--brand-accent)}
.ops-app .ops-account-photo-actions .back{min-height:34px;padding:5px;color:var(--status-error)}
.ops-app .ops-account-fields{display:grid;gap:16px;padding:20px 0 0}
.ops-app .ops-account-fields .field{width:100%;min-height:46px}
.ops-app .ops-account-hint{display:block;margin-top:6px;color:var(--text-subtle);font-size:11.5px;line-height:1.4}
.ops-app .ops-account-security{margin-top:22px;padding-top:17px;border-top:1px solid var(--border-subtle)}
.ops-app .ops-account-security summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;color:var(--text-primary);font-size:13px;font-weight:750;list-style:none}
.ops-app .ops-account-security summary::-webkit-details-marker{display:none}
.ops-app .ops-account-security summary:after{content:"⌄";font-size:20px;color:var(--text-muted);line-height:1}
.ops-app .ops-account-security[open] summary:after{transform:rotate(180deg)}
.ops-app .ops-account-security summary span{flex:1;color:var(--text-subtle);font-size:11.5px;font-weight:500}
.ops-app .ops-account-security .ops-account-fields{padding-top:16px}
.ops-app .ops-account-saved{margin:16px 0 0;padding:10px 12px;border:1px solid var(--status-success);border-radius:10px;background:color-mix(in srgb,var(--status-success) 12%,var(--surface-primary));color:var(--status-success);font-size:13px;font-weight:700}
.ops-app .ops-account-signout{color:var(--status-error)!important}
.ops-app .ops-account-local{color:var(--text-subtle);font-size:11px}
@media(max-width:760px){
  .ops-app .ops-account-identity{gap:12px}
  .ops-app .ops-account-identity>img{width:64px;height:64px;border-radius:14px}
  .ops-app .ops-account-security summary{display:grid;grid-template-columns:1fr auto}
  .ops-app .ops-account-security summary span{grid-row:2;grid-column:1}
  .ops-app .ops-account-security summary:after{grid-row:1/3;grid-column:2}
  .ops-app .ops-account-fields .field{font-size:16px!important}
}

/* The picker trigger inside a popup (customer, job) */
.ops-app .ops-pick{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;text-align:left}
.ops-app .ops-pick--compact{min-height:44px}
.ops-app .ops-pick-avatar{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;background:var(--brand-accent-soft);color:var(--brand-accent-text);font-size:12px;font-weight:800}
.ops-app .ops-pick.is-chosen .ops-pick-avatar{background:var(--brand-accent);color:var(--action-primary-text)}
.ops-app .ops-pick-copy{flex:1;min-width:0}
.ops-app .ops-pick-copy strong{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ops-app .ops-pick-copy small{display:block;color:var(--text-muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ops-app .ops-pick:not(.is-chosen) .ops-pick-copy strong{color:var(--text-muted)}

/* ---------------------------------------------------------------- Record payment */
.ops-app .ops-step+.ops-step{margin-top:20px;padding-top:18px;border-top:1px solid var(--border-subtle)}
.ops-app .ops-step-label{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:var(--text-muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ops-app .ops-step-label span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--brand-accent-soft);color:var(--brand-accent-text);font-size:11px;letter-spacing:0}
.ops-app .ops-step .row+.row,.ops-app .ops-step .row+.ops-pay-hint+.row,.ops-app .ops-step .ops-pay-note{margin-top:12px}
.ops-app .ops-step .check{margin-top:14px}
.ops-app .ops-pay-invoices{display:grid;gap:6px}
.ops-app .ops-pay-inv{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border:1px solid var(--border-default);border-radius:12px;background:var(--surface-primary);cursor:pointer;transition:border-color .12s,background-color .12s}
.ops-app .ops-pay-inv:hover{border-color:var(--border-strong)}
.ops-app .ops-pay-inv:has(input:checked){border-color:var(--brand-accent);background:var(--brand-accent-faint)}
.ops-app .ops-pay-inv input{width:16px;height:16px;margin:0;accent-color:var(--gold)}
.ops-app .ops-pay-inv-no{font-weight:700;font-size:13.5px;white-space:nowrap}
.ops-app .ops-pay-inv-no small{color:var(--text-muted);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ops-app .ops-pay-inv-title{min-width:0;color:var(--text-muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ops-app .ops-pay-inv-amt{font-variant-numeric:tabular-nums;font-size:14px}
.ops-app .ops-pay-none .ops-pay-inv-no{color:var(--text-secondary)}
.ops-app .ops-pay-empty{margin:0 0 4px;color:var(--text-muted);font-size:13px}
.ops-app .ops-pay-hint{margin:10px 0 0;padding:9px 12px;border-radius:10px;background:var(--brand-accent-faint);color:var(--brand-accent-text);font-size:12.5px;font-weight:600;line-height:1.45}
.ops-app .ops-pay-note.is-prominent .field{border-color:var(--brand-accent-border);background:var(--brand-accent-faint)}
.ops-app .ops-pay-launch{display:grid;gap:8px;margin-top:6px}
@media (max-width:760px){.ops-app .ops-pay-inv{grid-template-columns:auto minmax(0,1fr) auto}.ops-app .ops-pay-inv-title{grid-column:2/4;grid-row:2;white-space:normal}}

/* ---------------------------------------------------------------- Payments: custom dates in the Date menu, no-invoice rows */
.ops-app .lv-date-form{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 0;padding:10px 8px 4px;border-top:1px solid var(--lv-border-subtle)}
.ops-app .lv-date-form-title{grid-column:1/-1;color:var(--lv-subtle);font:700 10px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.ops-app .lv-date-form label{display:grid;gap:4px;color:var(--lv-muted);font:600 12px var(--sans)}
.ops-app .lv-date-form input{min-height:36px;padding:6px 8px;border:1px solid var(--lv-control-border);border-radius:8px;background:var(--lv-input);color:var(--lv-text);font:500 13px var(--sans);color-scheme:dark}
.ops-app .lv-date-form .v3-primary-button{grid-column:1/-1;min-height:38px}
.ops-app .lv div.v5-record-row{cursor:default}

/* ---------------------------------------------------------------- To Order: an item fades out when checked off (no reload) */
.ops-app .to-order [data-order-item]{transition:opacity .25s,transform .25s}
.ops-app .to-order [data-order-item].is-leaving{opacity:0;transform:translateX(12px)}
.ops-app .ops-sheet .foot .to-popup-delete{border-color:#9b5858;color:#ffb5b5}
.ops-app .ops-sheet .foot .to-popup-delete:hover{border-color:#ffb5b5;background:rgba(155,88,88,.14)}

/* ---------------------------------------------------------------- Settings: cards that open popups */
.ops-app .ops-settings{max-width:1120px;margin:0 auto}
.ops-app .ops-set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.ops-app .ops-set-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:88px;padding:18px 18px;border:1px solid var(--line);border-radius:var(--r-sm,14px);background:rgba(255,255,255,.025);color:var(--paper);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,transform .2s,background-color .2s}
.ops-app .ops-set-card:hover{border-color:rgba(243,210,138,.45);background:rgba(243,210,138,.04);transform:translateY(-1px)}
.ops-app .ops-set-card:focus-visible{outline:3px solid var(--ops-focus-ring,rgba(243,210,138,.5));outline-offset:2px}
.ops-app .ops-set-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(243,210,138,.1);color:var(--gold-soft)}
.ops-app .ops-set-copy{min-width:0}
.ops-app .ops-set-copy strong{display:block;font:700 15.5px/1.3 var(--sans)}
.ops-app .ops-set-copy small{display:block;margin-top:4px;color:var(--muted);font:13px/1.45 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ops-app .ops-set-edit{padding:6px 11px;border:1px solid var(--line-2);border-radius:999px;color:var(--gold-soft);font:700 12px/1 var(--sans)}
.ops-app .ops-set-card:hover .ops-set-edit{border-color:rgba(243,210,138,.5)}
.ops-app .ops-sheet .ops-set-textarea{width:100%;min-height:120px;padding:12px 14px;border:1px solid var(--input-border);border-radius:10px;background:var(--input-bg);color:var(--text-primary);font:14px/1.6 var(--sans);resize:vertical}
.ops-app .ops-sheet textarea[name=terms].ops-set-textarea{min-height:360px}
.ops-app .ops-sheet .ops-set-numbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ops-app .ops-sheet .ops-set-numbers label{display:grid;gap:6px;color:var(--text-muted);font-size:12.5px;font-weight:700}
.ops-app .ops-sheet .kv{margin:0 0 14px}
.ops-app .ops-pm-list{display:grid;gap:8px}
.ops-app .ops-pm-row{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center;gap:12px;padding:8px 10px 8px 12px;border:1px solid var(--border-default);border-radius:12px;background:var(--surface-primary);transition:border-color .12s,background-color .12s}
.ops-app .ops-pm-row.is-on{border-color:var(--brand-accent-border);background:var(--brand-accent-faint)}
.ops-app .ops-pm-toggle{display:flex;align-items:center;gap:10px;margin:0;cursor:pointer}
.ops-app .ops-pm-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.ops-app .ops-pm-box{display:grid;place-items:center;flex:none;width:20px;height:20px;border:1.5px solid var(--border-strong);border-radius:6px;background:transparent}
.ops-app .ops-pm-toggle input:checked+.ops-pm-box{border-color:var(--gold);background:var(--gold)}
.ops-app .ops-pm-toggle input:checked+.ops-pm-box::after{content:"";width:9px;height:5px;margin-top:-2px;border-left:2px solid #0a1020;border-bottom:2px solid #0a1020;transform:rotate(-45deg)}
.ops-app .ops-pm-toggle input:focus-visible+.ops-pm-box{outline:3px solid var(--focus-ring);outline-offset:2px}
.ops-app .ops-pm-toggle strong{font-size:14px}
.ops-app .ops-pm-row:not(.is-on) .ops-pm-toggle strong{color:var(--text-muted)}
.ops-app .ops-pm-detail{width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--input-border);border-radius:10px;background:var(--input-bg);color:var(--text-primary);font:500 13.5px var(--sans)}
.ops-app .ops-pm-row:not(.is-on) .ops-pm-detail{opacity:.55}
@media (max-width:760px){
  .ops-app .ops-set-grid{grid-template-columns:1fr;gap:10px}
  .ops-app .ops-set-card{min-height:76px;padding:14px}
  .ops-app .ops-sheet .ops-set-numbers{grid-template-columns:1fr 1fr}
  .ops-app .ops-pm-row{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------- Customers list (customers-v2) additions */
.ops-app .lv-customers .customers-v2-row-status{align-items:flex-end}
.ops-app .lv-seasons{display:inline-flex;flex-wrap:wrap;gap:4px}
.ops-app .lv-season{display:inline-flex;align-items:center;min-height:20px;padding:1px 8px;border-radius:999px;background:var(--lv-accent-soft,rgba(243,210,138,.14));color:var(--gold-soft);font:800 10.5px/1.4 var(--sans);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.ops-app .lv-money-parts{font-weight:600;font-variant-numeric:tabular-nums;color:var(--lv-text)}
.ops-app .lv-money-parts.is-none{color:var(--lv-subtle);font-weight:500}
.ops-app .lv .lv-owes{font-style:normal;font-weight:800;color:var(--status-action-text)}
.ops-app .lv-customers .customers-v2-row-status strong{font-size:13px}
.ops-app .lv-customer-card .customers-v2-card-top{align-items:center}

/* ---------------------------------------------------------------- Customer page (customer-v2) additions */
.ops-app .customer-v2{width:100%;max-width:1120px;margin:0 auto;padding:6px 0 40px}
.ops-app .customer-v2 h1{margin:0;color:var(--text-primary);font-family:var(--sans);font-weight:600;letter-spacing:-.04em}
.ops-app .customer-v2 .customer-v2-back{text-decoration:none}
.ops-app .customer-v2-avatar.has-image{overflow:hidden;padding:0}
.ops-app .customer-v2-avatar.has-image img{width:100%;height:100%;object-fit:cover;display:block}
.ops-app .customer-v2-badges{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 0!important}
.ops-app .customer-v2-contact-links a{display:inline-flex;align-items:center;gap:7px;color:var(--gold-soft)!important;font-size:13.5px;font-weight:600}
.ops-app .customer-v2-contact-links a:hover{text-decoration:underline}
.ops-app .customer-v2-contact-links .is-missing{color:var(--text-subtle)}
.ops-app .customer-v2-actions{flex-wrap:wrap;justify-content:flex-end}
.ops-app .customer-v2-actions>.btn{min-height:42px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.ops-app .customer-v2-actions>.btn.icon-btn{width:42px;padding:0;color:var(--gold-soft)}
.ops-app .customer-v2-info-item strong a{color:var(--gold-soft)}
.ops-app .customer-v2-summary .customer-v2-metrics.customer-v2-metrics--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.ops-app .customer-v2-metrics--four>div.is-urgent .customer-v2-metric-value{color:var(--status-action-text)}
.ops-app .customer-v2-metrics--four>div.is-paid .customer-v2-metric-value{color:var(--ok)}
.ops-app .customer-v2-metric-value{font-family:var(--sans)!important;font-variant-numeric:tabular-nums}
.ops-app .customer-v2-tabs{overflow-x:auto;scrollbar-width:none}
.ops-app .customer-v2-tabs::-webkit-scrollbar{display:none}
.ops-app .customer-v2-tabs a{position:relative;display:inline-flex;align-items:center;gap:8px;flex:none;min-height:50px;padding:0 12px;color:var(--text-muted);font-size:12.5px;font-weight:800;text-decoration:none;white-space:nowrap}
.ops-app .customer-v2-tabs a:hover{color:var(--text-primary)}
.ops-app .customer-v2-tabs a.is-active{color:var(--text-primary)}
.ops-app .customer-v2-tabs a.is-active::after{position:absolute;right:10px;bottom:-1px;left:10px;height:2px;border-radius:2px;background:var(--gold);content:""}
.ops-app .customer-v2-tab-count{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--brand-accent-soft);color:var(--gold-soft);font-size:10.5px;font-weight:800}
.ops-app .customer-v2-tab-icon.is-quotes,.ops-app .customer-v2-tab-icon.is-invoices,.ops-app .customer-v2-tab-icon.is-designs{width:15px;height:18px;margin:0 2px;border:1.7px solid currentColor;border-radius:3px}
.ops-app .customer-v2-tab-icon.is-quotes::before,.ops-app .customer-v2-tab-icon.is-invoices::before{position:absolute;top:4px;left:3px;width:6px;height:1.7px;border-radius:2px;background:currentColor;box-shadow:0 4px 0 currentColor,0 8px 0 currentColor;content:""}
.ops-app .customer-v2-tab-icon.is-designs{width:19px;height:15px;margin:2px 0}
.ops-app .customer-v2-tab-icon.is-designs::before{position:absolute;right:3px;bottom:2px;left:3px;height:6px;border-top:1.7px solid currentColor;border-radius:2px 2px 0 0;transform:skewX(-20deg);content:""}
.ops-app .customer-v2-tabpane[hidden]{display:none!important}
.ops-app .customer-v2-pane-actions{display:flex;align-items:center;gap:14px}
.ops-app .customer-v2-inline{margin:0}
.ops-app .customer-v2 .btn.sm{min-height:36px;padding:0 13px;font-size:12.5px}
.ops-app .customer-v2-text-action{color:var(--gold-soft)!important;font-size:12.5px;font-weight:800;text-decoration:none;white-space:nowrap}
.ops-app .customer-v2-estimates>a,.ops-app .customer-v2-open-row{color:var(--text-primary);text-decoration:none}
.ops-app .customer-v2-estimates>a small{color:var(--text-muted)}
.ops-app .customer-v2-kind{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-subtle)}
.ops-app .customer-v2-estimate-actions strong small{font-size:11px;font-weight:600;color:var(--text-muted)}
.ops-app div.customer-v2-payment-row{cursor:default}
.ops-app a.customer-v2-payment-row{text-decoration:none}
.ops-app .customer-v2-stage-form{padding:16px 20px 18px}
.ops-app .customer-v2-stage-form .statuses{margin:0}
.ops-app .customer-v2-asked{padding:4px 20px 18px}
.ops-app .customer-v2-asked dl{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:8px 18px;margin:0;font-size:13.5px}
.ops-app .customer-v2-asked dt{color:var(--text-muted);font-weight:700}
.ops-app .customer-v2-asked dd{margin:0}
.ops-app .customer-v2-timeline{padding-top:6px}
.ops-app .payment-detail-context{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:20px;padding:14px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--surface-secondary, var(--surface-primary))}
.ops-app .payment-detail-context span{display:block;margin-bottom:4px;color:var(--text-muted);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ops-app .payment-detail-context strong{display:block;overflow-wrap:anywhere;color:var(--text-primary);font-size:13px}
.ops-app .job-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ops-app .job-detail-grid>div{min-width:0;padding:12px 14px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--surface-secondary,var(--surface-primary))}
.ops-app .job-detail-grid span{display:block;margin-bottom:4px;color:var(--text-muted);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ops-app .job-detail-grid strong{display:block;overflow-wrap:anywhere;color:var(--text-primary);font-size:13px;line-height:1.45}
.ops-app .job-detail-grid .job-detail-scope{grid-column:1/-1}
.ops-app .payment-detail-trigger{padding:0;border:0;background:transparent;color:var(--gold-soft);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ops-app .payment-detail-trigger:focus-visible{outline:2px solid var(--brand-accent);outline-offset:3px}
.ops-app .customer-v2-timeline-row{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:10px 0}
.ops-app .customer-v2-timeline-row small{display:block;color:var(--text-subtle);font-size:11px;font-weight:700}
.ops-app .customer-v2-timeline-row strong{display:block;margin-top:2px;font-size:13px;font-weight:600;line-height:1.45}
.ops-app .customer-v2-timeline-dot{position:relative;z-index:1;width:9px;height:9px;margin:5px 0 0 7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--surface-primary)}
.ops-app .customer-v2-notes-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;align-items:start}
.ops-app .customer-v2-form{display:grid;gap:8px;padding:0 20px 18px}
.ops-app .customer-v2-form textarea,.ops-app .customer-v2-form select,.ops-app .customer-v2-notes-card .edit-contact input{width:100%}
.ops-app .customer-v2-form .save{justify-self:start;margin-top:6px}
.ops-app .customer-v2-notes-card .edit-contact{margin:0 20px 18px}
.ops-app .customer-v2-designs{padding:6px 20px 20px}
.ops-app .customer-v2-designs .lead-main{display:grid;gap:18px}
.ops-app .ops-customer-attachments{padding:18px 20px 20px}
.ops-app .ops-attachment-heading{display:flex;align-items:start;justify-content:space-between;margin-bottom:12px}
.ops-app .ops-attachment-heading h2{margin:0;font-size:16px}
.ops-app .ops-attachment-heading p{margin:4px 0 0;color:var(--text-muted);font-size:12.5px}
.ops-app .ops-attachments{display:grid;align-content:start;grid-auto-rows:max-content;gap:18px;min-width:0}
.ops-app .ops-attachments-preview-note{margin:0;padding:9px 12px;border:1px solid var(--border-subtle);border-radius:9px;background:var(--surface-secondary);color:var(--text-muted);font-size:12px}
.ops-app .ops-attachment-upload{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 14px;border:1px dashed var(--border-default);border-radius:10px;background:var(--surface-secondary);cursor:pointer}
.ops-app .ops-attachment-upload:hover{border-color:var(--brand-accent)}
.ops-app .ops-attachment-upload input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ops-app .ops-attachment-upload>span:first-of-type{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--surface-primary);color:var(--gold);font-size:22px}
.ops-app .ops-attachment-upload strong,.ops-app .ops-attachment-upload small{display:block}
.ops-app .ops-attachment-upload strong{font-size:13px}.ops-app .ops-attachment-upload small{margin-top:3px;color:var(--text-muted);font-size:11.5px}
.ops-app .ops-attachment-section{min-width:0}.ops-app .ops-attachment-section h3{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:13px}
.ops-app .ops-attachments>.ops-attachment-section{padding:0!important}
.ops-app .ops-attachment-section h3 span{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--surface-secondary);color:var(--text-muted);font-size:10px}
.ops-app .ops-attachment-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ops-app .ops-attachment-photo{overflow:hidden;min-width:0;margin:0;border:1px solid var(--border-subtle);border-radius:10px;background:var(--surface-secondary)}
.ops-app .ops-attachment-photo>a{display:block;aspect-ratio:4/3;background:var(--surface-primary)}
.ops-app .ops-attachment-photo img{display:block;width:100%;height:100%;object-fit:cover}
.ops-app .ops-attachment-caption{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px}
.ops-app .ops-attachment-caption span,.ops-app .ops-attachment-file-copy{display:grid;min-width:0;gap:3px}
.ops-app .ops-attachment-caption strong,.ops-app .ops-attachment-file-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}
.ops-app .ops-attachment-caption small,.ops-app .ops-attachment-file-copy small{color:var(--text-muted);font-size:10.5px}
.ops-app .ops-attachment-files{display:grid;border-top:1px solid var(--border-subtle)}
.ops-app .ops-attachment-file{position:relative;display:flex;align-items:center;gap:10px;min-width:0;padding:10px 4px;border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background .14s,border-color .14s}
.ops-app .ops-attachment-file:hover{background:var(--surface-secondary)}
.ops-app .ops-attachment-card-open{position:absolute;z-index:1;inset:0;border-radius:8px}
.ops-app .ops-attachment-card-open:focus-visible{outline:2px solid var(--brand-accent);outline-offset:-2px}
.ops-app .ops-attachment-file-icon,.ops-app .ops-attachment-file-copy{position:relative;z-index:2;pointer-events:none}
.ops-app .ops-attachment-action{position:relative;z-index:2}
.ops-app .ops-attachment-file-icon{display:grid;place-items:center;width:34px;height:38px;flex:none;border:1px solid var(--border-subtle);border-radius:7px;background:var(--surface-secondary);color:var(--text-muted);font-size:9px;font-weight:800}
.ops-app .ops-attachment-file-copy{flex:1}
.ops-app .ops-attachment-file .btn-link{white-space:nowrap;font-size:11.5px}
.ops-app .ops-attachment-empty{margin:0;color:var(--text-muted);font-size:12px}

.ops-app .doc-message-attach:focus-visible,.ops-app .doc-message-remove-file:focus-visible{outline:2px solid var(--brand-accent);outline-offset:2px}
.ops-app .doc-message-file-input{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%);border:0}
.ops-app .doc-message-pending{display:flex;flex-wrap:wrap;gap:7px;min-width:0}
.ops-app .doc-message-pending-file{display:flex;align-items:center;gap:8px;min-width:0;max-width:230px;padding:5px 8px 5px 5px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--surface-secondary)}
.ops-app .doc-message-pending-thumb,.ops-app .doc-message-pending-icon{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:7px;background:var(--surface-primary);object-fit:cover}
.ops-app .doc-message-pending-icon{color:var(--text-muted);font-size:8px;font-weight:800}
.ops-app .doc-message-pending-copy{display:grid;min-width:0;gap:2px}
.ops-app .doc-message-pending-copy strong{overflow:hidden;font-size:10.5px;text-overflow:ellipsis;white-space:nowrap}
.ops-app .doc-message-pending-copy small{color:var(--text-subtle);font-size:9.5px}
.ops-app .doc-message-remove-file{display:grid;place-items:center;width:24px;height:24px;flex:none;border:0;border-radius:50%;background:transparent;color:var(--text-muted);font-size:18px;line-height:1;cursor:pointer}
.ops-app .doc-message-remove-file:hover{background:var(--surface-primary);color:var(--text-primary)}
@media (max-width:960px){.ops-app .customer-v2-summary .customer-v2-metrics.customer-v2-metrics--four{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-app .customer-v2-summary .customer-v2-metrics--four>div:last-child{grid-column:auto}.ops-app .customer-v2-notes-grid{grid-template-columns:1fr}}
@media (max-width:760px){
  .ops-app .customer-v2{padding-top:0}
  .ops-app .customer-v2-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .ops-app .customer-v2-actions>.btn.icon-btn{width:auto}
  .ops-app .customer-v2-asked dl{grid-template-columns:1fr;gap:2px}
  .ops-app .customer-v2-asked dd{margin-bottom:8px}
  .ops-app .customer-v2-designs{padding:4px 14px 16px}
  .ops-app .ops-customer-attachments{padding:14px}
  .ops-app .ops-attachment-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ops-app .ops-attachment-file{flex-wrap:wrap;gap:8px}
  .ops-app .ops-attachment-file-copy{flex-basis:calc(100% - 52px)}
  .ops-app .ops-attachment-file .btn-link:first-of-type{margin-left:42px}
}
.ops-app .lv-customers .customers-v2-row-status strong em.lv-owes{font-size:inherit;line-height:inherit;color:var(--status-action-text)}
.ops-app .lv-customers .lv-money-parts{font-weight:500;color:var(--lv-muted)}
.ops-app .lv-customers .lv-money-parts.is-none{color:var(--lv-subtle)}
@media (max-width:760px){.ops-app .customer-v2-actions>[data-record-payment]{grid-column:1/-1}}

/* Installation popup (quote, invoice and customer pages): the date field with its calendar and chevron icons.
   Restored after the v5 cleanup removed these rules while the popup still used them. */
.ops-app .ops-install-date-picker{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 13px;border:1px solid var(--input-border);border-radius:10px;background:var(--input-bg);cursor:pointer}
.ops-app .ops-install-date-picker:focus-within{border-color:var(--brand-accent);box-shadow:0 0 0 3px var(--focus-ring)}
.ops-app .ops-install-date-picker svg{width:18px;height:18px;flex:none;color:var(--text-muted)}
.ops-app .ops-install-date-picker .ops-install-calendar{color:var(--text-primary)}
.ops-app .ops-install-date-picker .ops-install-chevron{margin-left:auto}
.ops-app .ops-install-date-value{overflow:hidden;color:var(--text-subtle);font-size:14px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.ops-app [data-sheet^="install-date"].has-date .ops-install-date-value{color:var(--text-primary)}
.ops-app .ops-install-date-picker input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ops-app [data-sheet^="install-date"] .foot{justify-content:flex-end}

/* ---------------- On/off switch (decided with Brendan 2026-09-25): gold track when on, dark when off ---------------- */
.ops-app .ops-toggle{display:inline-flex;align-items:center;gap:12px;margin:0;color:var(--paper);font:600 14.5px/1.3 var(--sans);cursor:pointer;-webkit-user-select:none;user-select:none}
.ops-app .ops-toggle input{position:absolute;width:1px;height:1px;opacity:0}
.ops-app .ops-toggle-track{position:relative;flex:none;width:48px;height:28px;border:1px solid rgba(190,205,235,.28);border-radius:999px;background:rgba(190,205,235,.12);transition:background-color .18s ease,border-color .18s ease}
.ops-app .ops-toggle-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#dfe6f3;box-shadow:0 1px 3px rgba(0,0,0,.45);transition:transform .18s ease,background-color .18s ease}
.ops-app .ops-toggle input:checked+.ops-toggle-track{border-color:var(--gold);background:var(--gold)}
.ops-app .ops-toggle input:checked+.ops-toggle-track .ops-toggle-thumb{background:#0a1020;transform:translateX(20px)}
.ops-app .ops-toggle input:focus-visible+.ops-toggle-track{outline:3px solid var(--ops-focus-ring,rgba(243,210,138,.5));outline-offset:2px}
.ops-app .ops-toggle:hover .ops-toggle-track{border-color:rgba(243,210,138,.6)}
@media (prefers-reduced-motion:reduce){.ops-app .ops-toggle-track,.ops-app .ops-toggle-thumb{transition:none}}

/* A settings card with its own switch: the card opens the popup, the switch saves right away. */
.ops-app .ops-set-card.ops-set-card--switch{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:0 18px 0 0;cursor:default}
.ops-app .ops-set-card--switch:hover{transform:none}
.ops-app .ops-set-card-open{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;min-width:0;min-height:88px;padding:18px 0 18px 18px;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ops-app .ops-set-card-open:focus-visible{outline:3px solid var(--ops-focus-ring,rgba(243,210,138,.5));outline-offset:-3px;border-radius:12px}
.ops-app .ops-set-state{color:var(--muted);font-weight:700}
.ops-app .ops-set-card--switch.is-on .ops-set-state{color:var(--gold)}
.ops-app .ops-set-switch{display:flex;align-items:center;margin:0}
.ops-app .ops-set-switch .ops-toggle{padding:8px 0}

/* Settings -> Website banner: the switch, a preview of the bar, and the "needs words" note. */
.ops-app .ops-banner-switch{margin:4px 0 14px}
.ops-app .ops-banner-preview{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;margin:0 0 16px;padding:10px 14px;border-radius:10px;background:linear-gradient(90deg,#f3d28a,#ffcf76,#f3d28a);color:#0a1020;font:600 14px/1.35 var(--sans);text-align:center}
.ops-app .ops-banner-preview-cta{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;background:#0a1020;color:#ffe9bd;font-size:13px;font-weight:700;white-space:nowrap}
.ops-app .ops-banner-preview-cta[hidden]{display:none}
.ops-app .ops-banner-error{margin:10px 0 0;color:#ff9b9b;font-size:13.5px}

/* ops/popups.css */
/* ============================================================
   Light Ops popups (handoff 4 §6, v3 §6a, v4/v5): the one frame
   every popup shares, from sheet() in _ui/popups.ts and the
   confirmation dialog in shell.js. A centered dialog on desktop,
   a bottom sheet with a grabber on phones (<= 760px).

   Loaded after extras.css and before mobile.css. The builder's
   own customer modal ([data-cm-root]) keeps builder.css.
   ============================================================ */

body.ops-sheet-open,
body.ops-confirm-open{overflow:hidden}

/* ---------------- backdrop + dialog ---------------- */
.ops-app .ops-sheet-scrim,
.ops-app .ops-confirm-scrim{
  position:fixed;
  inset:0;
  z-index:220;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  overflow-y:auto;
  background:rgba(3,6,14,.66);
  overscroll-behavior:contain;
}
.ops-app .ops-confirm-scrim{z-index:400}
.ops-app .ops-sheet-scrim[hidden],
.ops-app .ops-confirm-scrim[hidden]{display:none!important}
.ops-app .v3-customer-popup.ops-sheet,
.ops-app .v3-customer-popup.ops-confirm{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:560px;
  max-height:calc(100dvh - 64px);
  margin:auto;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(190,205,235,.18);
  border-radius:16px;
  background:var(--lo-panel);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  color:var(--paper);
  font-family:var(--sans);
  line-height:normal;
  text-align:left;
  overscroll-behavior:contain;
}
.ops-app .v3-customer-popup.ops-sheet--wide{max-width:880px}
.ops-app .v3-customer-popup.ops-sheet--medium{max-width:460px}
.ops-app .v3-customer-popup.ops-sheet--picker{max-width:440px}
.ops-app .v3-customer-popup.ops-sheet--date,
.ops-app .v3-customer-popup.ops-confirm{max-width:420px}
.ops-app .ops-sheet-form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.ops-app .ops-sheet-grab{display:none}

/* ---------------- header: context line, title, close ---------------- */
.ops-app .ops-sheet .head,
.ops-app .ops-confirm .head{
  flex:none;
  padding:20px 24px 16px;
  border-bottom:1px solid rgba(190,205,235,.08);
  background:transparent;
}
.ops-app .ops-sheet .head-row,
.ops-app .ops-confirm .head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0}
.ops-app .ops-sheet .head-copy,
.ops-app .ops-confirm .head-copy{flex:1;min-width:0}
.ops-app .ops-sheet-eyebrow{overflow:hidden;color:var(--muted);font:12px var(--mono);text-overflow:ellipsis;white-space:nowrap}
.ops-app .ops-sheet .title,
.ops-app .ops-confirm .title{margin:0;color:var(--paper);font:500 30px/1.1 var(--serif);letter-spacing:0}
.ops-app .ops-sheet-eyebrow + .title{margin-top:6px}
.ops-app .ops-sheet-sub{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.45}
.ops-app .ops-sheet .close{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 40px;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}
.ops-app .ops-sheet .close:hover{background:rgba(190,205,235,.07);color:var(--paper)}
.ops-app .ops-sheet .close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* A ··· menu by the × (headExtra, e.g. Job details): the same button as the ×, 8px from it, on the same line.
   Both get a faint fill so they read as a pair of buttons. */
.ops-app .ops-sheet .head-row > details[data-menu]{display:flex;flex:none}
.ops-app .ops-sheet .head-row > details[data-menu][hidden]{display:none}
.ops-app .ops-sheet .head-row > details[data-menu] + .close{margin-left:-8px}
.ops-app .ops-sheet .head-row > details[data-menu] > summary,
.ops-app .ops-sheet .head-row:has(> details[data-menu]:not([hidden])) > .close{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid rgba(190,205,235,.12);
  border-radius:10px;
  background:rgba(190,205,235,.04);
  color:var(--muted);
  list-style:none;
  cursor:pointer;
  transition:background-color .12s,color .12s,border-color .12s;
}
.ops-app .ops-sheet .head-row > details[data-menu] > summary::-webkit-details-marker{display:none}
.ops-app .ops-sheet .head-row > details[data-menu] > summary svg{width:20px;height:20px}
.ops-app .ops-sheet .head-row > details[data-menu] > summary:hover,
.ops-app .ops-sheet .head-row > details[data-menu][open] > summary,
.ops-app .ops-sheet .head-row:has(> details[data-menu]:not([hidden])) > .close:hover{border-color:rgba(190,205,235,.2);background:rgba(190,205,235,.09);color:var(--paper)}
.ops-app .ops-sheet .head-row > details[data-menu] > summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------------- body ---------------- */
.ops-app .v3-customer-popup.ops-sheet .body{
  flex:1 1 auto;
  height:auto;
  min-height:0;
  max-height:none;
  padding:20px 24px 22px;
  overflow:auto;
  overscroll-behavior:contain;
  background:transparent;
}
.ops-app .ops-sheet-lede{margin:0 0 16px;color:var(--muted);font-size:13.5px;line-height:1.5}
.ops-app .ops-form{display:flex;flex-direction:column;gap:18px}
.ops-app .ops-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px 14px}
.ops-app .ops-form-grid > *{min-width:0}
.ops-app .ops-form-grid .ops-span{grid-column:1/-1}

/* Labels sit 7px above the field; "optional" follows in 400. */
.ops-app .ops-sheet .label,
.ops-app .ops-confirm .label{
  display:block;
  margin:0 0 7px;
  color:var(--lo-label);
  font:600 13px var(--sans);
  letter-spacing:0;
  text-transform:none;
}
.ops-app .ops-sheet .label small,
.ops-app .ops-optional{color:var(--muted-2);font-size:inherit;font-weight:400;letter-spacing:0}
.ops-app .ops-sheet .field{
  width:100%;
  height:46px;
  min-height:46px;
  margin:0;
  padding:0 12px;
  border:1px solid rgba(190,205,235,.16);
  border-radius:10px;
  background:var(--lo-input);
  color:var(--paper);
  font:14px var(--sans);
  outline:none;
  box-shadow:none;
  transition:border-color .12s ease;
}
.ops-app .ops-sheet textarea.field{height:auto;min-height:0;padding:11px 12px;line-height:1.5;resize:vertical}
.ops-app .ops-sheet select.field{appearance:auto}
.ops-app .ops-sheet .field::placeholder{color:var(--muted-2);font-weight:400}
.ops-app .ops-sheet .field:hover{border-color:rgba(190,205,235,.24)}
.ops-app .ops-sheet .field:focus{border-color:var(--gold);box-shadow:none}
.ops-app .ops-sheet input[type="date"].field{color-scheme:dark;cursor:pointer}
.ops-app .ops-sheet .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px 14px}
.ops-app .ops-sheet .row + .row{margin-top:18px}
.ops-app .ops-sheet-error{margin:14px 0 0;padding:10px 13px;border:1px solid rgba(255,69,58,.35);border-radius:10px;background:var(--status-bad-tint);color:var(--status-bad-text);font-size:13px;font-weight:600}
.ops-app .ops-sheet .muted.small{margin:0 0 14px;color:var(--muted);font-size:13.5px;line-height:1.5}

/* ---------------- pill chips (single-select buttons, or checkbox labels) ---------------- */
.ops-app .ops-chips{display:flex;flex-wrap:wrap;gap:6px}
.ops-app .ops-chip{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 14px;
  border:1px solid rgba(190,205,235,.2);
  border-radius:999px;
  background:transparent;
  color:var(--lo-label);
  font:600 13px var(--sans);
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
}
.ops-app .ops-chip:hover{border-color:rgba(190,205,235,.34)}
.ops-app .ops-chip[aria-pressed="true"],
.ops-app .ops-chip--check:has(input:checked){border-color:var(--gold);background:rgba(243,210,138,.12);color:var(--gold)}
.ops-app .ops-chip:focus-visible,
.ops-app .ops-chip--check:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.ops-app .ops-chip--check input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;opacity:0}

/* ---------------- notices ---------------- */
.ops-app .ops-dupe{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border:1px solid rgba(255,159,10,.35);
  border-radius:10px;
  background:rgba(255,159,10,.12);
}
.ops-app .ops-dupe[hidden]{display:none!important}
.ops-app .ops-dupe > span{flex:1;font-size:13.5px;line-height:1.45}
.ops-app .ops-dupe strong{font-weight:700}
.ops-app .ops-dupe-open{
  display:inline-block;
  min-height:36px;
  padding:0 12px;
  line-height:36px;
  border-radius:8px;
  background:var(--gold);
  color:var(--lo-on-gold);
  font:600 13px var(--sans);
  text-decoration:none;
  white-space:nowrap;
}
.ops-app .ops-dupe-open:hover{background:var(--gold-soft);color:var(--lo-on-gold)}
.ops-app .ops-notice{margin:12px 0 0;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.45}
.ops-app .ops-notice--gold{background:rgba(243,210,138,.08);color:var(--gold)}
.ops-app .ops-notice--bad{background:var(--status-bad-tint);color:var(--status-bad-text)}

/* ---------------- footer ---------------- */
.ops-app .v3-customer-popup.ops-sheet .foot,
.ops-app .v3-customer-popup.ops-confirm .foot{
  flex:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:14px 24px 18px;
  border-top:1px solid var(--lo-line);
  background:transparent;
}
.ops-app .ops-foot-normal{display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%}
.ops-app .ops-foot-normal[hidden]{display:none!important}
.ops-app .ops-foot-hint{color:var(--muted);font-size:12.5px}
/* A hint on its own line above the buttons (Add account: what's still missing), so the buttons stay together. */
.ops-app .ops-foot-hint--line{flex:1 0 100%;order:-1}
.ops-app .ops-foot-hint--line[hidden]{display:none}
.ops-app .ops-foot-count{flex:1;color:var(--muted);font:12px var(--mono);text-align:right}
/* Every footer button is 44px, on one baseline. */
.ops-app :is(.ops-sheet,.ops-confirm) .foot :is(.btn,.btn-primary,.btn-danger,.btn-quiet,.btn-quiet-danger,.btn-text){min-height:44px;box-shadow:none;transform:none}
.ops-app :is(.ops-sheet,.ops-confirm) .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border:1px solid rgba(190,205,235,.22);
  border-radius:9px;
  background:transparent;
  color:var(--paper);
  font:600 14px var(--sans);
  cursor:pointer;
}
.ops-app :is(.ops-sheet,.ops-confirm) .btn:hover{background:rgba(190,205,235,.06);border-color:rgba(190,205,235,.22)}
.ops-app :is(.ops-sheet,.ops-confirm) .btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  border:0;
  border-radius:9px;
  background:var(--gold);
  color:var(--lo-on-gold);
  font:600 14px var(--sans);
  cursor:pointer;
}
.ops-app :is(.ops-sheet,.ops-confirm) .btn-primary:hover{background:var(--gold-soft)}
.ops-app :is(.ops-sheet,.ops-confirm) .btn-primary:disabled,
.ops-app :is(.ops-sheet,.ops-confirm) .btn-primary:disabled:hover{background:var(--gold);opacity:.4;cursor:not-allowed}
/* Destructive: a quiet red text button far left, and a red fill only in the confirmation step. */
.ops-app .btn-quiet-danger,
.ops-app .btn-quiet{padding:0 4px;border:0;background:transparent;font:600 14px var(--sans);cursor:pointer}
.ops-app .btn-quiet-danger{color:var(--status-bad-text)}
.ops-app .btn-quiet-danger:hover{color:#FF9A92}
.ops-app .btn-quiet{color:var(--muted)}
.ops-app .btn-quiet:hover{color:var(--paper)}
.ops-app .btn-danger,
.ops-app :is(.ops-sheet,.ops-confirm) .btn-primary.is-danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border:0;
  border-radius:9px;
  background:var(--status-bad-solid);
  color:#fff;
  font:600 14px var(--sans);
  cursor:pointer;
}
.ops-app .btn-danger:hover,
.ops-app :is(.ops-sheet,.ops-confirm) .btn-primary.is-danger:hover{background:#ff5e55}
.ops-app .btn-text{display:inline-flex;align-items:center;padding:0;border:0;background:transparent;color:var(--gold);font:600 13.5px var(--sans);text-decoration:none;cursor:pointer}
.ops-app .btn-text:hover{color:var(--gold-soft)}
.ops-app .ops-confirm-strip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  width:calc(100% + 48px);
  margin:-14px -24px -18px;
  padding:14px 24px 18px;
  border-top:1px solid rgba(255,69,58,.35);
  background:rgba(255,69,58,.1);
}
.ops-app .ops-confirm-strip[hidden]{display:none!important}
.ops-app .ops-confirm-copy{flex:1 1 220px;font-size:13.5px;line-height:1.45}
.ops-app .ops-confirm-copy strong{font-weight:700}
.ops-app .ops-confirm-copy span{color:var(--lo-label)}
/* The strip replaces the footer's top border. */
.ops-app .foot:has(> .ops-confirm-strip:not([hidden])){border-top-color:transparent}
/* Medium popups (installer) have 22px footer sides. */
@media (min-width:761px){
  .ops-app .ops-sheet--medium .ops-confirm-strip{width:calc(100% + 44px);margin:-14px -22px -18px;padding:14px 22px 18px}
}

/* ---------------- the confirmation dialog (shell.js) ---------------- */
.ops-app .ops-confirm .head{border-bottom:0;padding-bottom:0}
.ops-app .ops-confirm .title{font-size:28px}
.ops-app .ops-confirm .ops-confirm-message{height:auto;min-height:0;margin:0;padding:10px 24px 22px;color:var(--muted);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.ops-app .ops-confirm .ops-confirm-message[hidden] + .foot{margin-top:18px}

/* ---------------- installation date popup: one padded card, no dividers ---------------- */
.ops-app .v3-customer-popup.ops-sheet--date{border-color:rgba(190,205,235,.2);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.ops-app .ops-sheet--date .head{padding:22px 22px 0;border-bottom:0}
.ops-app .ops-sheet--date .head-row{gap:12px}
.ops-app .ops-sheet--date .close{flex-basis:36px;width:36px;height:36px}
.ops-app .ops-sheet--date .ops-sheet-eyebrow{font-weight:500}
.ops-app .ops-sheet--date .title{font-size:28px;font-weight:400}
.ops-app .v3-customer-popup.ops-sheet--date .body{padding:0 22px}
.ops-app .ops-date-who{margin:8px 0 0;color:var(--muted);font-size:14px}
.ops-app .ops-date-label{margin:18px 0 6px!important;color:var(--muted)!important;font-size:12.5px!important}
.ops-app .ops-date-label.ops-date-label--crew{margin:16px 0 7px!important}
.ops-app .ops-sheet .ops-date-input{min-height:46px;border-color:rgba(190,205,235,.2);border-radius:8px;font:15px var(--mono)}
.ops-app .ops-date-input::-webkit-calendar-picker-indicator{filter:invert(.8);cursor:pointer}
.ops-app .ops-date-none{margin:0;color:var(--muted);font-size:13px}
.ops-app .ops-date-none a{color:var(--gold)}
.ops-app .ops-date-note{margin:12px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.ops-app .ops-date-note:empty{display:none}
.ops-app .v3-customer-popup.ops-sheet--date .foot{padding:20px 22px 22px;border-top:0;gap:8px}
.ops-app .ops-sheet--date .foot .btn,
.ops-app .ops-sheet--date .foot .btn-primary{border-radius:8px}
.ops-app .ops-sheet--date .foot .btn{padding:0 16px}
.ops-app .ops-sheet--date .foot .btn-primary{padding:0 18px}

/* ---------------- installers picker ---------------- */
.ops-app .ops-sheet--picker .head{padding:20px 22px 14px}
.ops-app .v3-customer-popup.ops-sheet--picker .body{padding:8px 10px}
.ops-app .ops-pick-list{display:flex;flex-direction:column}
.ops-app .ops-pick-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:56px;
  padding:8px 12px;
  border-radius:10px;
  color:var(--paper);
  cursor:pointer;
}
.ops-app .ops-pick-row:hover{background:rgba(190,205,235,.06)}
.ops-app .ops-pick-row:has(input:checked){background:rgba(243,210,138,.06)}
.ops-app .ops-check-input{position:absolute;width:1px;height:1px;opacity:0}
.ops-app .ops-check-box{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 22px;
  width:22px;
  height:22px;
  border:1.5px solid rgba(190,205,235,.3);
  border-radius:6px;
  background:transparent;
  color:var(--lo-on-gold);
  font:700 13px var(--sans);
}
.ops-app .ops-pick-row:has(input:checked) .ops-check-box{border-color:var(--gold);background:var(--gold)}
.ops-app .ops-pick-row:has(input:checked) .ops-check-box::after{content:"✓"}
.ops-app .ops-pick-row:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:-2px}
.ops-app .ops-pick-avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 36px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(190,205,235,.08);
  font:600 12.5px var(--sans);
}
.ops-app .ops-pick-copy{flex:1;min-width:0}
.ops-app .ops-pick-copy strong{display:block;font:600 14.5px var(--sans)}
.ops-app .ops-pick-copy small{display:block;margin-top:1px;color:var(--muted);font-size:12.5px}
.ops-app .ops-pick-empty{margin:0;padding:18px 12px;color:var(--muted);font-size:13.5px}
.ops-app .v3-customer-popup.ops-sheet--picker .foot{padding:14px 22px 18px;gap:8px}
.ops-app .ops-sheet--picker .foot .btn-text{min-height:40px}

/* ---------------- Not finished ---------------- */
.ops-app .ops-sheet--lede .head{padding:20px 22px 6px;border-bottom:0}
.ops-app .v3-customer-popup.ops-sheet--lede .body{padding:10px 22px 20px}
.ops-app .ops-sheet--lede .ops-sheet-lede{margin-bottom:16px}
.ops-app .ops-sheet--lede .ops-form{gap:16px}
.ops-app .v3-customer-popup.ops-sheet--medium .foot{padding:14px 22px 18px}
.ops-app .v3-customer-popup.ops-sheet--lede .foot{gap:8px}
.ops-app .ops-sheet--lede .foot .btn-primary{padding:0 18px}
.ops-app .ops-sheet--medium:not(.ops-sheet--lede) .head{padding:20px 22px 14px}
.ops-app .v3-customer-popup.ops-sheet--medium:not(.ops-sheet--lede) .body{padding:20px 22px}

/* ---------------- payments (Popup Design.dc.html) ---------------- */
.ops-app .ops-pay-popup .head{padding:22px 24px 18px;border-bottom:0}
.ops-app .v3-customer-popup.ops-pay-popup .body{padding:0 24px 6px}
.ops-app .v3-customer-popup.ops-pay-popup .foot{margin-top:14px;padding:16px 24px 20px}
.ops-app .ops-pay-context{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0 0 22px;
  border:1px solid var(--lo-line);
  border-radius:12px;
  background:var(--lo-input);
}
.ops-app .ops-pay-context > div{min-width:0;padding:12px 14px;border-right:1px solid rgba(190,205,235,.08)}
.ops-app .ops-pay-context > div:last-child{border-right:0}
.ops-app .ops-pay-context span{display:block;color:var(--muted);font-size:12px}
.ops-app .ops-pay-context strong{display:block;margin-top:4px;overflow:hidden;font:600 14.5px var(--sans);text-overflow:ellipsis;white-space:nowrap}
.ops-app .ops-pay-context .ops-pay-after{margin-top:5px;font:400 14px var(--mono)}
.ops-app .ops-pay-context .ops-pay-after.is-paid{color:var(--status-ok-text)}
.ops-app .ops-amount-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.ops-app .ops-amount-head .label{margin:0}
.ops-app .ops-amount-full{font-size:12.5px}
.ops-app .ops-amount{
  display:flex;
  align-items:center;
  gap:6px;
  height:56px;
  padding:0 14px;
  border:1px solid var(--gold);
  border-radius:10px;
  background:var(--lo-input);
  cursor:text;
}
.ops-app .ops-amount.is-over{border-color:var(--status-bad-text)}
.ops-app .ops-amount-cur{color:var(--muted);font:400 30px/1 var(--serif)}
.ops-app .ops-amount input{
  flex:1;
  min-width:0;
  height:100%;
  padding:0;
  border:0;
  outline:none;
  background:transparent;
  box-shadow:none;
  color:var(--paper);
  font:400 22px var(--mono);
}
.ops-app .ops-amount input:focus{box-shadow:none}
.ops-app .ops-amount-over{margin:6px 0 0;color:var(--status-bad-text);font-size:12.5px}
.ops-app .ops-chip--method{min-height:40px;padding:0 16px;font-size:13.5px}
.ops-app .ops-pay-receipt{margin:0;color:var(--muted);font-size:12.5px;line-height:1.45}
/* Record payment's steps: pick the customer, then the invoice. */
.ops-app .ops-pay-popup .ops-step + .ops-step{margin-top:20px;padding-top:18px;border-top:1px solid var(--lo-line-row)}
.ops-app .ops-pay-popup .ops-step-label{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:var(--muted);font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ops-app .ops-pay-popup .ops-step-label span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(243,210,138,.12);color:var(--gold);font:700 11px var(--mono);letter-spacing:0}
.ops-app .ops-pay-popup .ops-pick{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:52px;
  padding:0 12px;
  border:1px solid rgba(190,205,235,.16);
  border-radius:10px;
  background:var(--lo-input);
  color:var(--paper);
  text-align:left;
  cursor:pointer;
}
.ops-app .ops-pay-popup .ops-pick:hover{border-color:rgba(243,210,138,.4)}
.ops-app .ops-pay-popup .ops-pick-avatar{flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:rgba(190,205,235,.08);color:var(--paper);font:600 12.5px var(--sans)}
.ops-app .ops-pay-popup .ops-pick-copy strong{font:600 15px var(--sans)}
.ops-app .ops-pay-popup .ops-pick-copy small{color:var(--muted);font-size:12.5px}
.ops-app .ops-pay-popup .ops-pay-inv{min-height:48px;border-color:rgba(190,205,235,.16);border-radius:10px;background:transparent}
.ops-app .ops-pay-popup .ops-pay-inv:has(input:checked){border-color:var(--gold);background:rgba(243,210,138,.06)}
.ops-app .ops-pay-popup .ops-pay-inv-amt{font:500 13.5px var(--mono)}
.ops-app .ops-pay-popup .ops-pay-hint{margin:0;padding:9px 12px;border-radius:10px;background:rgba(243,210,138,.06);color:var(--gold);font-size:12.5px}

/* ---------------- the toast's Undo ---------------- */
.ops-app .toast:has(.toast-undo){display:flex;align-items:center;gap:14px;padding:10px 12px 10px 16px}
.ops-app .toast-undo{display:inline-flex;margin:0}
.ops-app .toast-undo button{
  min-height:30px;
  padding:0 10px;
  border:0;
  border-radius:6px;
  background:#0a1020;
  color:var(--gold);
  font:700 13px var(--sans);
  cursor:pointer;
}
.ops-app .toast-undo button:hover{color:var(--gold-soft)}

/* ============================================================
   PHONE: bottom sheets with a grabber; 44px chips, 16px inputs
   ============================================================ */
@media (max-width:760px){
  .ops-app .ops-sheet-scrim,
  .ops-app .ops-confirm-scrim{align-items:flex-end;padding:0;overflow:hidden}
  .ops-app .v3-customer-popup.ops-sheet,
  .ops-app .v3-customer-popup.ops-confirm{
    max-width:none!important;
    max-height:92dvh;
    margin:0;
    border-width:1px 0 0;
    border-radius:20px 20px 0 0;
  }
  /* v6 (handoff 11): the grabber is 40×5, 8px from the top; shell.js slides the sheet and handles the swipe. */
  .ops-app .ops-sheet-grab{display:block;flex:none;width:40px;height:5px;margin:8px auto 0;border-radius:5px;background:rgba(190,205,235,.28)}
  .ops-app .ops-sheet .head,
  .ops-app .ops-confirm .head{padding:12px 16px 12px 18px}
  .ops-app .ops-sheet-eyebrow{font-size:11.5px}
  .ops-app .ops-sheet .title,
  .ops-app .ops-confirm .title{font-size:27px}
  .ops-app .ops-sheet-eyebrow + .title{margin-top:4px}
  .ops-app .ops-sheet .close{width:44px;height:44px;flex-basis:44px}
  .ops-app .ops-sheet .head-row > details[data-menu] > summary,
  .ops-app .ops-sheet .head-row:has(> details[data-menu]:not([hidden])) > .close{width:44px;height:44px}
  .ops-app .v3-customer-popup.ops-sheet .body{padding:16px 18px}
  .ops-app .v3-customer-popup.ops-sheet .foot,
  .ops-app .v3-customer-popup.ops-confirm .foot{padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
  .ops-app .ops-confirm-strip{width:calc(100% + 32px);margin:-12px -16px calc(-16px - env(safe-area-inset-bottom));padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
  .ops-app .ops-sheet .field{height:48px;min-height:48px;font-size:16px}
  .ops-app .ops-sheet textarea.field{height:auto;min-height:0}
  .ops-app .ops-chip{min-height:44px;padding:0 15px;font-size:14px}
  .ops-app :is(.ops-sheet,.ops-confirm) .foot :is(.btn,.btn-primary,.btn-danger){min-height:48px}
  /* The date popup keeps its card padding on a phone. */
  .ops-app .ops-sheet--date .head{padding:12px 18px 0}
  .ops-app .v3-customer-popup.ops-sheet--date .body{padding:0 18px}
  .ops-app .v3-customer-popup.ops-sheet--date .foot{padding:18px 16px calc(16px + env(safe-area-inset-bottom))}
  .ops-app .v3-customer-popup.ops-sheet--picker .body{padding:4px 8px}
  .ops-app .ops-pay-popup .head{padding:12px 16px 12px 18px}
  .ops-app .v3-customer-popup.ops-pay-popup .body{padding:4px 18px 12px}
  .ops-app .v3-customer-popup.ops-pay-popup .foot{margin-top:0;padding:12px 16px calc(26px + env(safe-area-inset-bottom))}
  .ops-app .ops-pay-context{grid-template-columns:1fr 1fr}
  .ops-app .ops-pay-context > div:nth-child(2){border-right:0}
  .ops-app .ops-pay-context > div:last-child{grid-column:1/-1;border-top:1px solid rgba(190,205,235,.08)}
  .ops-app .ops-amount-cur{font-size:28px}
  .ops-app .ops-amount input{font-size:21px}
  .ops-app .ops-chip--method{min-height:44px;padding:0 15px;font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .ops-app .ops-sheet-scrim,
  .ops-app .ops-confirm-scrim,
  .ops-app .v3-customer-popup.ops-sheet,
  .ops-app .v3-customer-popup.ops-confirm{animation:none}
}

/* v6 (handoff 11): the popups' motion runs in shell.js (LightOpsMotion); these finish the feel on touch screens. */
.ops-app .ops-sheet-body,.ops-app .v3-customer-popup .body{overscroll-behavior:contain}
html.ops-dragging,html.ops-dragging *{-webkit-user-select:none;user-select:none}
.ops-app,.ops-app *{-webkit-tap-highlight-color:transparent}
@media (hover:none){.ops-app button:active,.ops-app .lo-btn:active{opacity:.72}}
/* Touch screens: the phone's own menu (decided with Brendan 2026-09-25). shell.js lays an invisible <select> over each
   menu button; tapping it opens the system menu. */
.ops-app summary:has(> .ops-native-menu),.ops-app .lo-bld-menuwrap:has(> .ops-native-menu){position:relative}
.ops-app .ops-native-menu{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;font-size:16px;background:transparent;color:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
/* Phones: the confirm box is an iOS action sheet (decided with Brendan 2026-09-25): the question and what happens in
   one rounded group with the action under them (red when it deletes), and Cancel on its own below. */
@media (max-width:760px){
  .ops-app .v3-customer-popup.ops-confirm{display:flex;flex-direction:column;gap:0;padding:0 10px max(10px,env(safe-area-inset-bottom));border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
  .ops-app .v3-customer-popup.ops-confirm .head{padding:16px 18px 4px;border:1px solid rgba(190,205,235,.16);border-bottom:0;border-radius:16px 16px 0 0;background:var(--lo-panel);text-align:center}
  .ops-app .v3-customer-popup.ops-confirm .title{font:600 15px/1.35 var(--sans);letter-spacing:0}
  .ops-app .v3-customer-popup.ops-confirm .ops-confirm-message{margin:0;padding:2px 18px 14px;border:1px solid rgba(190,205,235,.16);border-block:0;background:var(--lo-panel);color:var(--muted);font-size:13.5px;line-height:1.45;text-align:center}
  .ops-app .v3-customer-popup.ops-confirm .foot{display:flex;flex-direction:column-reverse;gap:8px;margin:0;padding:0;border:0;background:transparent}
  .ops-app .v3-customer-popup.ops-confirm .foot .grow{display:none}
  .ops-app .v3-customer-popup.ops-confirm .foot .btn-primary{width:100%;min-height:56px;margin:0;border:1px solid rgba(190,205,235,.16);border-top-color:rgba(190,205,235,.09);border-radius:0 0 16px 16px;background:var(--lo-panel);color:var(--gold);font:600 17px var(--sans)}
  .ops-app .v3-customer-popup.ops-confirm .foot .btn-primary.is-danger{background:var(--lo-panel);color:#ff7a70}
  .ops-app .v3-customer-popup.ops-confirm .foot .btn{width:100%;min-height:52px;margin:0;border:1px solid rgba(190,205,235,.16);border-radius:16px;background:var(--lo-panel);color:var(--paper);font:700 17px var(--sans)}
}

/* Phone menus as Light Ops sheets (Settings → Phone menus = "Light Ops sheets"; v6, handoff 11): built by shell.js. */
.ops-app .ops-menu-sheet-scrim{position:fixed;inset:0;z-index:390;display:flex;align-items:flex-end;justify-content:center;background:rgba(3,6,14,.66);overscroll-behavior:contain}
.ops-app .ops-menu-sheet-scrim[hidden]{display:none!important}
.ops-app .ops-menu-sheet{position:relative;width:100%;max-width:560px;max-height:90dvh;display:flex;flex-direction:column;color:var(--paper);font-family:var(--sans);overscroll-behavior:contain}
.ops-app .ops-menu-sheet--list{border-top:1px solid rgba(190,205,235,.16);border-radius:20px 20px 0 0;background:var(--lo-panel);padding-bottom:max(14px,env(safe-area-inset-bottom))}
.ops-app .ops-ms-grab{position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:5px;background:rgba(190,205,235,.28)}
.ops-app .ops-ms-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:22px 12px 8px 18px}
.ops-app .ops-ms-head h3{margin:0;font:700 17px var(--sans);color:var(--paper)}
.ops-app .ops-ms-x{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:22px;background:rgba(190,205,235,.08);color:var(--paper);font-size:15px;cursor:pointer}
.ops-app .ops-ms-body{flex:1;min-height:0;overflow:auto;padding:4px 10px 6px;overscroll-behavior:contain}
.ops-app .ops-ms-opt{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--paper);font:500 16px var(--sans);text-align:left;cursor:pointer}
.ops-app .ops-ms-opt.is-on{color:var(--gold)}
.ops-app .ops-ms-opt.is-danger{color:#ff7a70}
.ops-app .ops-ms-sep{height:1px;margin:6px 12px;background:rgba(190,205,235,.09)}
.ops-app .ops-menu-sheet--actions{gap:8px;padding:0 10px max(10px,env(safe-area-inset-bottom))}
.ops-app .ops-ms-group{flex:none;overflow:hidden;border:1px solid rgba(190,205,235,.16);border-radius:16px;background:var(--lo-panel)}
.ops-app .ops-menu-sheet--actions .ops-ms-group:first-child{flex:0 1 auto;overflow-y:auto}
.ops-app .ops-ms-group-head{padding:12px 16px 10px;border-bottom:1px solid rgba(190,205,235,.09);color:var(--muted);font-size:13px;text-align:center}
.ops-app .ops-ms-row{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 16px;border:0;border-bottom:1px solid rgba(190,205,235,.09);background:transparent;color:var(--paper);text-align:left;cursor:pointer}
.ops-app .ops-ms-row:last-child{border-bottom:0}
.ops-app .ops-ms-row > span{display:grid;min-width:0}
.ops-app .ops-ms-row strong{font:500 16px var(--sans)}
.ops-app .ops-ms-row small{color:var(--muted);font-size:13px}
.ops-app .ops-ms-row.is-danger,.ops-app .ops-ms-row.is-danger small{color:#ff7a70}
.ops-app .ops-ms-row.is-on{color:var(--gold)}
.ops-app .ops-ms-check{color:var(--gold)}
.ops-app .ops-ms-cancel{flex:none;width:100%;min-height:52px;border:1px solid rgba(190,205,235,.16);border-radius:16px;background:var(--lo-panel);color:var(--paper);font:700 17px var(--sans);cursor:pointer}
.ops-app .ops-radio-box{border-radius:50%}

/* Keyboard shortcuts (the ? popup) */
.ops-app .ops-keys{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0;align-items:center}
.ops-app .ops-keys dt{color:var(--muted);font-size:13px;white-space:nowrap}
.ops-app .ops-keys dd{margin:0;color:var(--paper);font-size:14px}
.ops-app .ops-keys kbd{display:inline-block;min-width:22px;padding:2px 7px;border:1px solid rgba(190,205,235,.25);border-bottom-width:2px;border-radius:6px;background:rgba(190,205,235,.06);color:var(--paper);font:600 12px var(--mono);text-align:center}

/* ops/screens.css */
/* ============================================================
   Light Ops screens (handoffs 4–8): the list kit (header,
   Cards / List switch, tabs, toolbar, rows, cards) and the
   screens built on it. Markup: _ui/kit.ts and the screen
   renderers. Loaded after popups.css, before mobile.css.
   Phones are <= 760px.
   ============================================================ */

.ops-app .lo-page{color:var(--paper);font-size:14px;line-height:normal}
.ops-app .lo-page a{text-decoration:none}
/* lists.css resets every link inside .lv with an ID-weight selector (color:inherit); the kit's links keep
   their own colors. */
.ops-app .lv a.lo-tab:not(#lv){color:var(--muted)}
.ops-app .lv a.lo-tab:not(#lv):hover,
.ops-app .lv a.lo-tab.is-active:not(#lv){color:var(--paper)}
.ops-app .lv a.lo-btn--primary:not(#lv),
.ops-app .lv a.lo-btn--primary:not(#lv):hover{color:var(--lo-on-gold)}
.ops-app .lv a.lo-btn--ghost:not(#lv){color:var(--paper)}
.ops-app .lv a.lo-attn-cta:not(#lv){color:var(--gold)}
.ops-app .lv a.lo-attn-cta:not(#lv):hover{color:var(--gold-soft)}

/* ---------------- page header ---------------- */
.ops-app .lo-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.ops-app .lo-h1{margin:0;color:var(--paper);font:700 34px/1.15 var(--sans);letter-spacing:-.02em}
.ops-app .lo-h1-count{color:var(--muted);font:500 14px var(--mono);vertical-align:middle}
.ops-app .lo-head-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* ---------------- Cards / List switch ---------------- */
.ops-app .lo-switch{display:flex;gap:2px;padding:3px;border:1px solid rgba(190,205,235,.14);border-radius:9px}
.ops-app .lo-switch-btn{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:0 12px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--muted);
  font:500 13px var(--sans);
  cursor:pointer;
}
.ops-app .lo-switch-btn:hover{color:var(--paper)}
html:not([data-lv-layout="list"]) .ops-app .lo-switch-cards,
html[data-lv-layout="list"] .ops-app .lo-switch-list{background:rgba(190,205,235,.1);color:var(--paper)}

/* ---------------- buttons ---------------- */
.ops-app .lo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:0 16px;
  border-radius:8px;
  font:600 14px var(--sans);
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
}
.ops-app .lo-btn--primary{border:0;background:var(--gold);color:var(--lo-on-gold)}
.ops-app .lo-btn--primary:hover{background:var(--gold-soft);color:var(--lo-on-gold)}
.ops-app .lo-btn--ghost{border:1px solid rgba(190,205,235,.22);background:transparent;color:var(--paper)}
.ops-app .lo-btn--ghost:hover{background:rgba(190,205,235,.06);color:var(--paper)}
.ops-app .lo-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ops-app .lo-job-form{display:contents}

/* ---------------- filter tabs (no negative margins: that made a stray scrollbar) ---------------- */
.ops-app .lo-tabs{
  display:flex;
  gap:2px;
  margin-bottom:16px;
  overflow-x:auto;
  overflow-y:hidden;
  border-bottom:1px solid var(--lo-line);
  scrollbar-width:none;
}
.ops-app .lo-tabs::-webkit-scrollbar{display:none}
.ops-app .lo-tab{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:0 12px;
  border-bottom:2px solid transparent;
  color:var(--muted);
  font:500 14px var(--sans);
  white-space:nowrap;
}
.ops-app .lo-tab:hover{color:var(--paper)}
.ops-app .lo-tab.is-active{border-bottom-color:var(--gold);color:var(--paper)}
.ops-app .lo-tab-count{color:var(--muted);font:11.5px var(--mono)}

/* ---------------- the slim toolbar (search, filters, sort) ---------------- */
.ops-app .lo-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px}
.ops-app .lo-search{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 220px;
  max-width:340px;
  height:36px;
  padding:0 10px;
  border:1px solid rgba(190,205,235,.14);
  border-radius:9px;
  background:var(--lo-input);
  color:var(--muted);
}
.ops-app .lo-search:focus-within{border-color:var(--gold)}
.ops-app .lo-search svg{flex:none}
.ops-app .lo-search input{
  flex:1;
  min-width:0;
  height:100%;
  padding:0;
  border:0;
  outline:none;
  background:transparent;
  color:var(--paper);
  font:13.5px var(--sans);
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
}
.ops-app .lo-search input:focus{box-shadow:none}
.ops-app .lo-search input::placeholder{color:var(--muted-2)}
.ops-app .lo-toolbar .v3-filter-menu{position:relative;min-width:0;z-index:12}
.ops-app .lo-toolbar .v3-filter-menu:has(.v3-filter-popover:not([hidden])){z-index:40}
.ops-app .lo-toolbar .v3-filter-trigger{
  display:flex;
  align-items:center;
  gap:6px;
  width:auto;
  height:36px;
  min-height:36px;
  padding:0 8px 0 12px;
  border:1px solid rgba(190,205,235,.14);
  border-radius:9px;
  background:transparent;
  box-shadow:none;
  color:var(--paper);
  cursor:pointer;
}
.ops-app .lo-toolbar .v3-filter-trigger:hover{border-color:rgba(190,205,235,.28)}
.ops-app .lo-toolbar .v3-filter-trigger[aria-expanded="true"],
.ops-app .lo-toolbar .v3-filter-trigger:focus-visible{border-color:var(--gold);box-shadow:none;outline:0}
.ops-app .lo-toolbar .v3-filter-label{color:var(--muted);font:500 13px var(--sans);letter-spacing:0;text-transform:none;line-height:normal}
.ops-app .lo-toolbar .v3-filter-label::after{content:":"}
.ops-app .lo-toolbar .v3-filter-value{font:600 13px var(--sans);line-height:normal}
.ops-app .lo-toolbar .v3-filter-chevron{width:18px;height:18px;color:var(--muted)}
.ops-app .lo-toolbar .v3-filter-popover{
  top:calc(100% + 6px);
  min-width:220px;
  padding:6px;
  border:1px solid rgba(190,205,235,.2);
  border-radius:12px;
  background:var(--lo-pop);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.ops-app .lo-toolbar .v3-filter-option{min-height:38px;padding:8px 10px;border-radius:8px;color:var(--paper);font:500 13.5px var(--sans)}
.ops-app .lo-toolbar .v3-filter-option:hover,
.ops-app .lo-toolbar .v3-filter-option:focus-visible{background:rgba(190,205,235,.06)}
.ops-app .lo-toolbar .v3-filter-option.is-selected{background:rgba(243,210,138,.1);box-shadow:none;color:var(--gold)}
.ops-app .lo-toolbar .v3-filter-check{color:transparent}
.ops-app .lo-toolbar .v3-filter-option.is-selected .v3-filter-check{color:var(--gold)}
.ops-app .lo-toolbar-count{margin-left:auto;color:var(--muted);font:12px var(--mono);white-space:nowrap}

/* ---------------- list or cards (set on <html> before the page paints) ---------------- */
.ops-app .lo-when-list{display:none}
html[data-lv-layout="list"] .ops-app .lo-when-list{display:block}
html[data-lv-layout="list"] .ops-app .lo-when-cards{display:none}

/* ---------------- list panel + rows ---------------- */
.ops-app .lo-list{overflow:hidden;border:1px solid var(--lo-line);border-radius:12px;background:var(--lo-panel)}
.ops-app .lo-list-head{
  display:flex;
  gap:16px;
  padding:10px 16px;
  border-bottom:1px solid var(--lo-line);
  color:var(--muted);
  font:500 11px var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.ops-app .lo-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  width:100%;
  min-height:60px;
  padding:12px 16px;
  border-bottom:1px solid var(--lo-line-row);
  background:transparent;
  color:var(--paper);
  text-align:left;
}
.ops-app a.lo-row:hover{background:rgba(190,205,235,.04);color:var(--paper)}
.ops-app .lo-row--doc{gap:6px 16px;min-height:0;padding:13px 16px}
.ops-app .lo-cell{min-width:0}
.ops-app .lo-who{display:flex;align-items:center;gap:12px;min-width:0}
.ops-app .lo-name{display:block;font:600 14.5px var(--sans)}
.ops-app .lo-sub{display:block;margin-top:2px;overflow:hidden;color:var(--muted);font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.ops-app .lo-mono{font:13px var(--mono);color:var(--muted)}
.ops-app .lo-num{font:500 12.5px var(--mono);color:var(--muted)}
.ops-app .lo-amt{font:500 13.5px var(--mono);text-align:right}
.ops-app .lo-amt--ok{color:var(--status-ok-text)}
.ops-app .lo-dim{color:var(--muted)}
.ops-app .lo-empty{margin:0;padding:18px 16px;color:var(--muted);font-size:13.5px}
.ops-app .lo-cards + .lo-empty,
.ops-app .lo-empty--panel{border:1px solid var(--lo-line);border-radius:12px;background:var(--lo-panel)}

/* ---------------- avatars ---------------- */
.ops-app .lo-avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  border-radius:50%;
  background:rgba(190,205,235,.08);
  color:var(--paper);
  font:600 12.5px var(--sans);
}
.ops-app .lo-avatar--36{width:36px;height:36px}
.ops-app .lo-avatar--40{width:40px;height:40px;font-size:13px}
.ops-app .lo-avatar--44{width:44px;height:44px;font-size:14px}
.ops-app .lo-avatar--60{width:60px;height:60px;font-size:20px}
/* A customer's design photo, when they have one, over their initials. */
.ops-app .lo-avatar--photo{position:relative;overflow:hidden}
.ops-app .lo-avatar--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------------- cards ---------------- */
.ops-app .lo-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.ops-app .lo-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:190px;
  padding:16px;
  border:1px solid var(--lo-line);
  border-radius:12px;
  background:var(--lo-panel);
  color:var(--paper);
  text-align:left;
}
.ops-app .lo-card--doc{min-height:170px}
.ops-app a.lo-card:hover{border-color:rgba(243,210,138,.4);color:var(--paper)}
.ops-app .lo-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.ops-app .lo-card-name{display:block;font:700 18px/1.25 var(--sans)}
.ops-app .lo-card-sub{display:block;margin-top:6px;color:var(--muted);font-size:13px}
.ops-app .lo-card-spacer{flex:1}
.ops-app .lo-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding-top:12px;border-top:1px solid rgba(190,205,235,.08)}
.ops-app .lo-card-foot .lo-mono{font-size:12.5px}
.ops-app .lo-card-amt{font:13.5px var(--mono)}
/* Every card in a grid is exactly the same height, whatever its text (decided with Brendan 2026-09-25): the rows are
   equal, a card fills its cell (through its swipe wrapper too), text that varies keeps a fixed number of lines (the
   rest ends in "…"), and the bottom row or buttons stay anchored at the bottom. */
.ops-app .lo-cards{grid-auto-rows:1fr}
.ops-app .lo-cards > .lo-swipe,.ops-app .lo-cards > .lo-swipe > .lo-swipe-item{display:flex;flex-direction:column;min-width:0}
.ops-app .lo-cards > .lo-swipe > .lo-swipe-item{flex:1 1 auto}
.ops-app .lo-cards .lo-swipe-item > .lo-card{flex:1 1 auto}
.ops-app .lo-cards .lo-card{min-width:0}
.ops-app .lo-cards .lo-card-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ops-app .lo-cards .lo-card-sub{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:18px;min-height:36px}
.ops-app .lo-cards .lo-payline{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* A job card keeps its Start job slot even before it has the button, so Installers, the date and Start job sit at
   the same heights on every card of the grid. */
.ops-app .lo-cards .lo-job-card :is(.lo-crew--card,.lo-datebtn--card,.lo-start--card){box-sizing:border-box;min-height:0;height:var(--lo-job-btn,38px)}
.ops-app .lo-cards:has(.lo-start--card) .lo-job-card:not(:has(.lo-start--card))::after{content:"";flex:0 0 var(--lo-job-btn,38px)}
.ops-app .lo-pager{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:16px;color:var(--muted);font:12px var(--mono)}
.ops-app .lo-pager a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid rgba(190,205,235,.22);border-radius:8px;color:var(--paper);font:600 13px var(--sans)}
.ops-app .lo-pager a:hover{background:rgba(190,205,235,.06)}

/* Rows and cards that open a popup are buttons. */
.ops-app button.lo-row{border:0;border-bottom:1px solid var(--lo-line-row);font:inherit;cursor:pointer}
.ops-app button.lo-row:hover{background:rgba(190,205,235,.04)}
.ops-app button.lo-card{font:inherit;cursor:pointer}
.ops-app button.lo-card:hover{border-color:rgba(243,210,138,.4)}
.ops-app .lo-card-amt--doc{font:500 14px var(--mono)}
.ops-app .lo-method{color:var(--muted);font-size:13px}
.ops-app .lo-card-top .lo-method{font-size:12.5px}
.ops-app .lo-pay-amount{display:block;color:var(--status-ok-text);font:500 32px/1 var(--serif)}
.ops-app .lo-pay-who{display:block;margin-top:10px;font:600 14.5px var(--sans)}
.ops-app .lo-card-sub.lo-pay-kind{margin-top:3px}
.ops-app .lo-banner{margin:0 0 14px;padding:11px 14px;border:1px solid rgba(243,210,138,.34);border-radius:10px;background:rgba(243,210,138,.06);color:var(--paper);font-size:13.5px}
.ops-app .lo-banner strong{font-weight:600}

/* ---------------- Installations ---------------- */
.ops-app .lo-job-row{gap:10px 16px}
.ops-app .lo-job-open{display:flex;align-items:center;gap:14px;flex:1 1 280px;min-width:0;padding:0;border:0;background:transparent;color:var(--paper);font:inherit;text-align:left;cursor:pointer}
.ops-app .lo-job-open:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px}
.ops-app .lo-dateblock{flex:none;border:1px solid rgba(190,205,235,.12);border-radius:8px;text-align:center}
.ops-app .lo-dateblock--row{width:44px;padding:5px 0 6px}
.ops-app .lo-dateblock--card{width:52px;padding:6px 0 7px}
.ops-app .lo-dateblock-mon{display:block;color:var(--muted);font:500 10.5px var(--mono);letter-spacing:.06em}
.ops-app .lo-dateblock--card .lo-dateblock-mon{font-weight:400}
.ops-app .lo-dateblock-day{display:block;margin-top:2px;color:var(--paper);font:400 22px/1 var(--serif)}
.ops-app .lo-dateblock--card .lo-dateblock-day{font:500 26px/1 var(--serif)}
.ops-app .lo-dateblock-day.is-open{color:var(--status-action-text)}
/* Installers: a dashed button with first names, or an orange "Assign". */
.ops-app .lo-crew{
  min-width:0;
  border:1px dashed rgba(190,205,235,.22);
  background:transparent;
  color:var(--paper);
  font:600 12.5px var(--sans);
  text-align:left;
  white-space:nowrap;
  cursor:pointer;
}
.ops-app .lo-crew:hover{border-color:var(--gold)}
.ops-app .lo-crew.is-empty{color:var(--status-action-text)}
.ops-app .lo-crew--row{flex:0 0 120px;min-height:32px;padding:0 8px;overflow:hidden;border-radius:7px;text-overflow:ellipsis}
.ops-app .lo-crew--card,
.ops-app .lo-crew--compact{display:flex;align-items:center;gap:8px;width:100%;border-radius:8px;font-size:13px}
.ops-app .lo-crew--card{min-height:38px;padding:0 12px}
.ops-app .lo-crew--compact{min-height:36px;padding:0 10px}
.ops-app .lo-crew-label{color:var(--muted);font:11px var(--mono);letter-spacing:.02em;text-transform:uppercase}
.ops-app .lo-crew-names{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ops-app .lo-payline{color:var(--muted);font-size:13px}
.ops-app .lo-job-row .lo-payline{flex:0 0 170px}
.ops-app .lo-job-pill{flex:0 0 120px}
.ops-app button.lo-datebtn{
  min-height:38px;
  padding:0 10px;
  border:1px solid rgba(243,210,138,.34);
  border-radius:8px;
  background:rgba(243,210,138,.06);
  color:var(--gold);
  font:500 12.5px var(--mono);
  white-space:nowrap;
  cursor:pointer;
}
.ops-app button.lo-datebtn:hover{background:var(--gold);color:var(--lo-on-gold)}
.ops-app .lo-datebtn--row{flex:0 0 132px}
.ops-app button.lo-datebtn--card{width:100%;font-weight:400}
/* The date menu (decided with Brendan 2026-09-27): Change date / Unschedule from any install date. */
.lo-date-menu{position:fixed;inset:0;z-index:300;pointer-events:none}
.lo-date-menu-pop{position:fixed;display:flex;flex-direction:column;min-width:236px;padding:6px;border:1px solid rgba(190,205,235,.2);border-radius:12px;background:var(--lo-pop,#141c2e);box-shadow:0 18px 50px rgba(0,0,0,.5);pointer-events:auto;opacity:0;transform:translateY(-4px);transition:opacity .14s ease,transform .14s ease}
.lo-date-menu.is-open .lo-date-menu-pop{opacity:1;transform:none}
.lo-date-menu-pop button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:9px 12px;border:0;border-radius:8px;background:transparent;color:var(--paper,#f4efe4);font:600 14.5px var(--sans);text-align:left;cursor:pointer}
.lo-date-menu-pop button:hover,.lo-date-menu-pop button:focus-visible{background:rgba(243,210,138,.1);outline:0}
.lo-date-menu-pop button svg{flex:none;color:var(--gold,#f3d28a)}
.lo-date-menu-pop button span{display:flex;flex-direction:column;gap:2px}
.lo-date-menu-pop button small{color:var(--muted,#9fb0c8);font:400 12.5px var(--sans)}
.lo-date-menu-pop button.is-danger svg{color:#ff8a80}
/* Phones: a sheet from the bottom, with big targets. */
.lo-date-menu.is-sheet{pointer-events:auto}
.lo-date-menu-scrim{position:absolute;inset:0;background:rgba(4,8,18,.6);opacity:0;transition:opacity .16s ease}
.lo-date-menu.is-sheet.is-open .lo-date-menu-scrim{opacity:1}
.lo-date-menu.is-sheet .lo-date-menu-pop{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:calc(8px + env(safe-area-inset-bottom));padding:8px;border-radius:16px;transform:translateY(12px)}
.lo-date-menu.is-sheet .lo-date-menu-pop button{min-height:56px;font-size:16px}
/* The job popup's date line is a button (it opens the menu). */
.ops-app .lo-jd-datebtn{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(243,210,138,.45);text-underline-offset:3px}
.ops-app .lo-jd-datebtn:disabled{cursor:default;text-decoration:none}
.ops-app .ops-unschedule[hidden]{display:none}
}
.ops-app .lo-btn.lo-start--row{flex:0 0 96px;padding:0 14px;font-size:13.5px}
.ops-app .lo-start-spacer{flex:0 0 96px}
.ops-app .lo-btn.lo-start--card{width:100%;font-size:13.5px}
.ops-app .lo-job-card{min-height:200px}
.ops-app .lo-job-open--card{flex-direction:column;align-items:stretch;gap:14px;flex:1}
.ops-app .lo-card-top--start{align-items:flex-start}
.ops-app .lo-banner-blue{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  padding:11px 14px;
  border:1px solid rgba(10,132,255,.35);
  border-radius:10px;
  background:rgba(10,132,255,.08);
  color:var(--paper);
  font:600 13.5px var(--sans);
}
.ops-app .lo-banner-blue:hover{border-color:var(--status-wait-solid);color:var(--paper)}
.ops-app .lo-banner-text{flex:1}
.ops-app .lo-banner-link{color:var(--status-wait-text)}
.ops-app .lo-job-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.ops-app .lo-job-detail span{display:block;color:var(--muted);font-size:12px}
.ops-app .lo-job-detail strong{display:block;margin-top:3px;font:600 14px/1.35 var(--sans);overflow-wrap:anywhere}
.ops-app .lo-job-detail-scope{grid-column:1/-1}
/* Job total with its Edit link (a hand-made job's total is typed in): the amount reads like the other values. */
.ops-app .lo-job-detail strong > [data-jd="total"]{display:inline;color:inherit;font:inherit}
.ops-app .lo-job-detail .lo-jd-total-edit{margin-left:8px;font:600 13px var(--sans)}

/* ---------------- the calendar (views and assigns dates only) ---------------- */
.ops-app .lo-cal-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ops-app .lo-cal-title{flex:1;margin:0;font:700 18px var(--sans);letter-spacing:0}
.ops-app .lo-cal-head .lo-btn{padding:0 14px;font-size:13.5px}
.ops-app .lo-iconbtn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(190,205,235,.22);border-radius:8px;color:var(--paper);font-size:16px}
.ops-app .lo-iconbtn:hover{background:rgba(190,205,235,.06);color:var(--paper)}
.ops-app .lo-cal-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:4px;color:var(--muted);font:11px var(--mono);letter-spacing:.06em;text-align:center;text-transform:uppercase}
.ops-app .lo-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.ops-app .lo-cal-cell{display:flex;flex-direction:column;gap:3px;min-width:0;min-height:108px;padding:6px;border:1px solid rgba(190,205,235,.08);border-radius:8px;background:var(--lo-panel)}
.ops-app .lo-cal-cell.is-blank{border-color:transparent;background:transparent}
.ops-app .lo-cal-cell.is-today{border-color:rgba(243,210,138,.45);background:rgba(243,210,138,.06)}
.ops-app .lo-cal-day{color:var(--lo-label);font:600 12.5px var(--sans)}
.ops-app .lo-cal-cell.is-today .lo-cal-day{color:var(--gold)}
/* Order of stops (decided with Brendan 2026-09-27): a day with two or more stops opens its order from the day number. */
.ops-app .lo-cal-day--order{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;margin:-2px 0 0 -4px;padding:2px 6px;border:0;border-radius:6px;background:rgba(243,210,138,.12);color:var(--gold);font:700 12.5px var(--sans);cursor:pointer}
.ops-app .lo-cal-day--order::after{content:"⇅";font-size:11px;opacity:.85}
.ops-app .lo-cal-day--order:hover{background:rgba(243,210,138,.22)}
.ops-app .ops-order-list{display:grid;gap:6px;margin:4px 0 0;padding:0;list-style:none}
.ops-app .ops-order-item{display:grid;grid-template-columns:28px 26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 10px 10px 6px;border:1px solid rgba(190,205,235,.14);border-radius:10px;background:var(--lo-panel)}
.ops-app .ops-order-item.is-drag{border-color:var(--gold);box-shadow:0 10px 26px rgba(0,0,0,.35);background:rgba(243,210,138,.08)}
.ops-app .ops-order-grip{display:grid;place-items:center;height:36px;color:var(--muted);cursor:grab;touch-action:none}
.ops-app .ops-order-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--gold);color:#2a1d05;font:700 12.5px var(--mono)}
.ops-app .ops-order-copy{display:grid;gap:2px;min-width:0}
.ops-app .ops-order-copy strong{color:var(--paper);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ops-app .ops-order-copy small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ops-app .ops-order-move{display:flex;gap:4px}
.ops-app .ops-order-move button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgba(190,205,235,.18);border-radius:8px;background:transparent;color:var(--paper);font:600 15px/1 var(--sans);cursor:pointer}
.ops-app .ops-order-move button:hover{border-color:var(--gold);color:var(--gold)}
/* The day on a map (decided with Brendan 2026-09-27): pins numbered in the list's order, repairs red, the shop a house. */
.ops-order-map{margin:4px 0 12px}
.ops-order-map-in{position:relative;height:240px;overflow:hidden;border:1px solid rgba(190,205,235,.14);border-radius:12px;background:#0b1324}
.ops-order-map-note{margin:8px 2px 0;color:var(--muted);font-size:12.5px}
.ops-pin{display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:var(--gold);color:#2a1d05;font:700 12.5px/1 var(--mono);box-shadow:0 0 0 2px #0b1324,0 3px 10px rgba(0,0,0,.45);cursor:pointer}
.ops-pin.is-repair{background:#e5534b;color:#fff}
.ops-pin:hover{transform:scale(1.12)}
.ops-pin-shop{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#f4efe4;color:#0b1324;box-shadow:0 0 0 2px #0b1324,0 3px 10px rgba(0,0,0,.45)}
.ops-order-map-frame{position:relative}
.ops-map-credit{position:absolute;right:6px;bottom:6px;z-index:2;padding:2px 7px;border-radius:9px;background:rgba(11,19,36,.78);color:var(--muted);font:500 10.5px/1.45 var(--sans);white-space:nowrap}
.ops-map-credit a{color:inherit;text-decoration:none}
.ops-map-credit a:hover{color:var(--paper);text-decoration:underline}
/* Installations → Map (decided with Brendan 2026-09-28): the map, and beside it the crew (last seen) and today's stops. */
.ops-crewmap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;margin-top:14px}
.ops-crewmap-frame{position:relative;height:clamp(420px,68vh,720px);overflow:hidden;border:1px solid rgba(190,205,235,.14);border-radius:14px;background:#0b1324}
.ops-crewmap-in{width:100%;height:100%}
.ops-crewmap-msg{position:absolute;left:12px;right:12px;top:12px;z-index:3;margin:0;padding:10px 12px;border-radius:10px;background:rgba(11,19,36,.92);color:var(--paper);font-size:13px}
.ops-crewmap-side{display:grid;align-content:start;gap:8px;min-width:0}
.ops-crewmap-h{margin:6px 2px 2px;font:700 11.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.ops-crewmap-crew,.ops-crewmap-stops{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.ops-crewmap-person,.ops-crewmap-stop{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;padding:8px 10px;border:1px solid rgba(190,205,235,.14);border-radius:10px;background:var(--lo-panel)}
.ops-crewmap-person strong,.ops-crewmap-stop strong{display:block;color:var(--paper);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ops-crewmap-person small,.ops-crewmap-stop small{display:block;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ops-crewmap-av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(190,205,235,.14);color:var(--muted);font:700 11px var(--sans)}
.ops-crewmap-person.has-spot .ops-crewmap-av{background:#1c3a66;color:#cfe2ff}
.ops-crewmap-person.is-fresh .ops-crewmap-av{background:#0a84ff;color:#fff;box-shadow:0 0 0 3px rgba(10,132,255,.25)}
.ops-crewmap-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--gold);color:#2a1d05;font:700 12px var(--mono)}
.ops-crewmap-stop{cursor:pointer}
.ops-crewmap-stop.k-repair .ops-crewmap-n{background:#e5534b;color:#fff}
.ops-crewmap-stop.is-done .ops-crewmap-n{background:#23a468;color:#fff}
.ops-crewmap-stop.is-picked{border-color:var(--gold);background:rgba(243,210,138,.1)}
.ops-crewmap-empty{padding:10px 2px;color:var(--muted);font-size:13px;list-style:none}
.ops-crewmap-note{margin:6px 2px 0;color:var(--muted);font-size:12px}
.ops-pin.is-done{background:#23a468;color:#fff}
.ops-pin.is-live{box-shadow:0 0 0 2px #0b1324,0 0 0 5px rgba(35,164,104,.55),0 3px 10px rgba(0,0,0,.45)}
.ops-crew-dot{position:relative;display:block;width:30px;height:30px}
.ops-crew-dot b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#0a84ff;color:#fff;font:700 11px var(--sans);box-shadow:0 0 0 3px #fff,0 3px 10px rgba(0,0,0,.45)}
.ops-crew-dot i{position:absolute;top:36px;left:50%;transform:translateX(-50%);padding:1px 6px;border-radius:8px;background:rgba(11,19,36,.85);color:#fff;font:600 11px/1.4 var(--sans);font-style:normal;white-space:nowrap}
.ops-crew-dot.is-stale b{background:#5b6b86;box-shadow:0 0 0 3px rgba(255,255,255,.6),0 3px 10px rgba(0,0,0,.45)}
@media (max-width:900px){.ops-crewmap{grid-template-columns:1fr}.ops-crewmap-frame{height:56vh}}
.ops-app .ops-order-item.is-flash{animation:opsflash 1.4s ease}
@keyframes opsflash{0%,40%{border-color:var(--gold);background:rgba(243,210,138,.14)}}
.ops-app .lo-cal .lo-cal-chip{display:block;width:100%;padding:3px 6px;overflow:hidden;border:0;border-radius:5px;font:600 11.5px var(--sans);text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.ops-app .lo-cal .lo-cal-chip--ok{--chip-c:var(--status-ok-text);background:var(--status-ok-tint);color:var(--chip-c)}
.ops-app .lo-cal .lo-cal-chip--wait{--chip-c:var(--status-wait-text);background:var(--status-wait-tint);color:var(--chip-c)}
.ops-app .lo-cal .lo-cal-chip--action{--chip-c:var(--status-action-text);background:var(--status-action-tint);color:var(--chip-c)}
.ops-app .lo-cal .lo-cal-chip--done{--chip-c:var(--status-done-text);background:var(--status-done-tint);color:var(--chip-c)}
/* lists.css resets list links with an ID-weight selector; chips that link to the customer keep their tone. */
.ops-app .lv a.lo-cal-chip:not(#lv){color:var(--chip-c)}
.ops-app .lo-cal-unsched{margin-top:16px;padding:12px 14px;border:1px solid var(--lo-line);border-radius:10px;background:var(--lo-panel)}
.ops-app .lo-cal-unsched-title{margin-bottom:8px;font:600 13.5px var(--sans)}
.ops-app .lo-cal-unsched-chips{display:flex;flex-wrap:wrap;gap:6px}
.ops-app .lo-cal-choose{min-height:34px;padding:0 12px;border:1px solid rgba(255,159,10,.35);border-radius:8px;background:rgba(255,159,10,.1);color:var(--status-action-text);font:600 12.5px var(--sans);cursor:pointer}

/* ---------------- In Progress ---------------- */
.ops-app .lo-in-progress .lo-head{margin-bottom:24px}
.ops-app .lo-ip-section{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ops-app .lo-ip-h2{margin:0;font:600 16px var(--sans);letter-spacing:0}
.ops-app .lo-ip-count{color:var(--muted);font:12px var(--mono)}
.ops-app .lo-ip-list,
.ops-app .lo-ip-cards,
.ops-app .lo-ip-empty{margin-bottom:32px}
/* The prototype's empty Cards panel sits 24px under its heading. */
.ops-app .lo-ip-empty{margin-top:24px}
.ops-app .lo-ip-list.lo-ip-last,
.ops-app .lo-ip-cards.lo-ip-last,
.ops-app .lo-empty.lo-ip-last{margin-bottom:0}
.ops-app .lo-ip-none{margin:0;padding:18px 16px;color:var(--muted);font-size:13.5px}
.ops-app .lo-ip-list--waiting{border-color:rgba(255,159,10,.3)}
.ops-app .lo-ip-row{gap:8px 16px}
.ops-app .lo-ip-who{flex:1 1 220px;color:var(--paper)}
.ops-app .lo-ip-who:hover{color:var(--gold-soft)}
.ops-app .lo-ip-address{flex:0 0 190px;font-size:13px;line-height:1.4}
.ops-app .lo-ip-started{flex:0 0 150px;color:var(--lo-label);font:12.5px var(--mono)}
.ops-app .lo-ip-when-cell{flex:0 0 150px;font-size:13px;line-height:1.4}
.ops-app .lo-ip-date{color:var(--lo-label);font:12.5px var(--mono)}
.ops-app .lo-ip-visits{color:var(--muted)}
.ops-app .lo-ip-actions{display:flex;flex:0 0 230px;justify-content:flex-end;gap:8px}
.ops-app .lo-ip-actions .lo-btn,
.ops-app .lo-ip-resume .lo-btn,
.ops-app .lo-ip-card .lo-btn{padding:0 14px;font-size:13.5px}
.ops-app .lo-ip-left{font-size:13px;line-height:1.45}
.ops-app .lo-ip-row .lo-ip-left{flex:1 1 220px;min-width:0}
.ops-app .lo-ip-reason{display:block;color:var(--status-action-text);font-weight:600}
.ops-app .lo-ip-notes{display:block;color:var(--lo-label)}
.ops-app .lo-ip-resume{display:flex;flex:0 0 120px;justify-content:flex-end}
.ops-app .lo-ip-list .lo-list-head{display:none}
@media (min-width:1240px){.ops-app .lo-ip-list .lo-list-head{display:flex}}
@media (min-width:1080px){[data-sidebar="collapsed"] .ops-app .lo-ip-list .lo-list-head{display:flex}}
.ops-app .lo-ip-card{gap:12px;min-height:200px;border-color:rgba(10,132,255,.3)}
.ops-app .lo-ip-card--waiting{border-color:rgba(255,159,10,.4)}
.ops-app .lo-ip-open{display:flex;flex:1;flex-direction:column;gap:10px;color:var(--paper)}
.ops-app .lo-ip-open:hover{color:var(--paper)}
.ops-app .lo-ip-open .lo-card-sub.lo-ip-title{margin-top:4px}
.ops-app .lo-ip-place{font-size:13px;line-height:1.4}
.ops-app .lo-ip-when{color:var(--muted);font:12px var(--mono)}
.ops-app .lo-ip-crew{color:var(--muted);font-size:12.5px}
.ops-app .lo-ip-card-actions{display:flex;gap:8px}
.ops-app .lo-btn.lo-grow{flex:1}
.ops-app .lo-btn.lo-block{width:100%}

/* ---------------- Settings → Installers (the rest of Settings wasn't redesigned) ---------------- */
.ops-app .lo-h1.lo-set-h1{margin-bottom:24px}
.ops-app .lo-set-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ops-app .lo-set-title{display:flex;align-items:baseline;gap:10px}
.ops-app .lo-set-h2{margin:0;color:var(--paper);font:600 16px var(--sans);letter-spacing:0}
.ops-app .lo-set-count{color:var(--muted);font:12px var(--mono)}
.ops-app .lo-set-head--business{margin:32px 0 12px}
.ops-app .lo-inst-who{flex:1 1 200px}
.ops-app .lo-inst-phone{color:var(--lo-label);font:13px var(--mono)}
.ops-app .lo-inst-vehicle{color:var(--lo-label);font-size:13px}
.ops-app .lo-inst-row .lo-inst-phone{flex:0 0 140px}
.ops-app .lo-inst-row .lo-inst-vehicle{flex:1 1 200px}
.ops-app .lo-inst-jobs{flex:0 0 110px;color:var(--muted);font-size:12.5px;text-align:right}
.ops-app .lo-inst-cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.ops-app .lo-inst-card{gap:12px;min-height:170px}
.ops-app .lo-inst-card .lo-inst-phone,
.ops-app .lo-inst-card .lo-inst-vehicle{display:block}
.ops-app .lo-inst-foot{width:100%;padding-top:10px;border-top:1px solid rgba(190,205,235,.08);color:var(--muted);font-size:12.5px}
/* The crew app (decided with Brendan 2026-09-27): each installer's line, and the switch and invite in their popup. */
.ops-app .lo-inst-crew{display:block;margin-top:2px;color:var(--lo-label);font:500 12px/1.3 var(--sans)}
.ops-app .lo-inst-crew.is-used{color:var(--status-ok-text)}
.ops-app .lo-inst-card .lo-inst-crew{margin-top:-6px}
.ops-app .ops-crew-box{display:grid;gap:10px;padding:14px;border:1px solid rgba(190,205,235,.14);border-radius:12px;background:rgba(190,205,235,.04)}
.ops-app .ops-crew-switch{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%}
.ops-app .ops-crew-copy{display:grid;gap:3px}
.ops-app .ops-crew-copy strong{color:var(--paper);font-size:14.5px}
.ops-app .ops-crew-copy small{color:var(--muted);font:400 12.5px/1.4 var(--sans)}
.ops-app .ops-crew-status{margin:0;color:var(--lo-label);font-size:12.5px}
.ops-app .ops-crew-actions{display:flex;flex-wrap:wrap;gap:8px}
.ops-app .ops-crew-note{margin:0;color:var(--gold);font-size:12.5px}
.ops-app .ops-crew-langs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ops-app .lo-avatar--photo{overflow:hidden;padding:0}
.ops-app .lo-avatar--photo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.ops-app .ops-inst-photo{display:flex;align-items:center;gap:14px}
.ops-app .ops-inst-photo-av{position:relative;display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;background:#2f3237;color:var(--gold);font:600 20px/1 var(--sans)}
.ops-app .ops-inst-photo-av img{width:100%;height:100%;object-fit:cover}
.ops-app .ops-inst-photo-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ops-app .ops-inst-photo-pick{position:relative;overflow:hidden;cursor:pointer}
.ops-app .ops-inst-photo-pick input{position:absolute;inset:0;opacity:0;cursor:pointer}
/* The job popup's Lines (decided with Brendan 2026-09-27): what the crew has checked off in their app. */
.ops-app .lo-job-lines{margin-top:18px}
.ops-app .lo-jl-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ops-app .lo-jl-count{color:var(--muted);font:600 13px var(--sans)}
.ops-app .lo-jl-track{height:6px;margin:8px 0 10px;border-radius:3px;background:var(--line);overflow:hidden}
.ops-app .lo-jl-track span{display:block;height:100%;width:0;border-radius:3px;background:var(--ok);transition:width .3s ease}
.ops-app .lo-jl-list{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.ops-app .lo-jl-list li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:start;padding:7px 0;border-bottom:1px solid var(--line);font:14px/1.35 var(--sans);color:var(--paper)}
.ops-app .lo-jl-list li.is-h{display:block;padding:12px 0 4px;border:0;color:var(--muted);font:700 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.ops-app .lo-jl-box{display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border:2px solid var(--muted-2);border-radius:6px;font-size:12px;line-height:1;color:#0a1020}
.ops-app .lo-jl-list li.is-done .lo-jl-box{border-color:var(--ok);background:var(--ok)}
.ops-app .lo-jl-list li.is-done .lo-jl-main{color:var(--muted)}
.ops-app .lo-jl-main small{display:block;margin-top:2px;color:var(--ok);font:12.5px var(--sans)}
.ops-app .lo-jl-qty{color:var(--muted);font:600 13px var(--sans);white-space:nowrap}
/* To Order popup: the item's photo (decided with Brendan 2026-09-27) and who added it. */
.ops-app .ops-order-photo{display:flex;align-items:center;gap:14px}
.ops-app .ops-order-photo-img{flex:none;display:block;width:64px;height:64px;border-radius:12px;overflow:hidden;background:#2f3237}
.ops-app .ops-order-photo-img[hidden]{display:none}
.ops-app .ops-order-photo-img img{display:block;width:100%;height:100%;object-fit:cover}
.ops-app .ops-order-by{margin:0;color:var(--muted);font:13px/1.4 var(--sans)}
/* The other settings keep their cards, on the redesign's panels. */
.ops-app .ops-settings{max-width:none;margin:0}
.ops-app .ops-set-grid{gap:12px}
.ops-app .ops-set-card{border-color:var(--lo-line);border-radius:12px;background:var(--lo-panel)}
.ops-app .ops-set-card:hover{border-color:rgba(243,210,138,.4);background:var(--lo-panel);transform:none}

/* ---------------- Dashboard ---------------- */
.ops-app .lo-dash-head{margin-bottom:26px}
.ops-app .lo-h1.lo-dash-h1{margin-top:8px;letter-spacing:-.01em}
.ops-app .lo-sec-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.ops-app .lo-sec-h2{margin:0;color:var(--paper);font:600 15px var(--sans);letter-spacing:0}
.ops-app .lo-sec-sub{color:var(--muted);font:12px var(--mono)}
/* Do next */
.ops-app .lo-next-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-bottom:32px}
.ops-app .lo-next-none{margin-bottom:32px}
.ops-app .lo-next{display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid var(--lo-line);border-radius:12px;background:var(--lo-panel)}
.ops-app .lo-next.is-first{border-color:rgba(243,210,138,.34);background:rgba(243,210,138,.06)}
.ops-app .lo-next-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ops-app .lo-next-age{color:var(--muted);font:12px var(--mono)}
.ops-app .lo-next-title{margin:0;color:var(--paper);font:600 17px/1.3 var(--sans);letter-spacing:0;text-wrap:pretty}
.ops-app .lo-next-detail{margin:6px 0 0;color:var(--muted);font-size:13.5px;line-height:1.45;text-wrap:pretty}
.ops-app .lo-next-spacer{flex:1}
.ops-app .lo-next-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ops-app .lo-next-amt{color:var(--paper);font:500 15px var(--mono)}
.ops-app .lo-btn.lo-next-cta{padding:0 14px;font-size:13.5px}
.ops-app .lo-btn--primary.lo-next-cta{border:1px solid var(--gold)}
.ops-app .lo-btn.lo-next-cta--ghost{border:1px solid rgba(190,205,235,.22);background:transparent;color:var(--paper)}
.ops-app .lo-btn.lo-next-cta--ghost:hover{background:rgba(190,205,235,.06);color:var(--paper)}
/* Closing a Do next card (decided with Brendan 2026-09-25): the × beside its age (a 44px tap area), the Hidden (N)
   link in the section heading, and the Hidden from Do next list with Restore. */
.ops-app .lo-next-top-side{display:flex;flex:none;align-items:center;gap:6px}
.ops-app .lo-next-close-form{display:flex;margin:0}
.ops-app .lo-next-close{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-6px -8px -6px 0;padding:0;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}
.ops-app .lo-next-close::after{position:absolute;inset:-8px;content:""}
.ops-app .lo-next-close:hover{background:rgba(190,205,235,.08);color:var(--paper)}
.ops-app .lo-next-close:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.ops-app .lo-sec-more{margin-left:auto}
.ops-app .lo-hidden-note{margin:0}
.ops-app .lo-hidden-list{display:flex;flex-direction:column;margin:12px 0 0;padding:0;list-style:none}
.ops-app .lo-hidden-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--lo-line)}
.ops-app .lo-hidden-copy{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.ops-app .lo-hidden-copy strong{overflow:hidden;color:var(--paper);font:600 14px var(--sans);text-overflow:ellipsis;white-space:nowrap}
.ops-app .lo-hidden-copy small{color:var(--muted);font:11.5px var(--mono)}
.ops-app .lo-hidden-row form{display:flex;flex:none;margin:0}
.ops-app .lo-btn.lo-hidden-restore{min-height:34px;padding:0 14px;font-size:13px}
@media (max-width:760px){.ops-app .lo-btn.lo-hidden-restore{min-height:44px}}
/* Work queue */
.ops-app .lo-queue-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:32px}
.ops-app .lo-queue{display:flex;flex-direction:column;min-width:0;border:1px solid var(--lo-line);border-radius:12px;background:var(--lo-panel)}
.ops-app .lo-queue-head{display:flex;align-items:center;gap:10px;padding:14px 16px 12px;border-bottom:1px solid rgba(190,205,235,.08);color:var(--paper)}
.ops-app .lo-queue-head:hover{color:var(--paper)}
.ops-app .lo-queue-title{flex:1;font:600 14px var(--sans)}
.ops-app .lo-queue-count{font:500 13px var(--mono)}
.ops-app .lo-queue-body{display:flex;flex:1;flex-direction:column;padding:6px}
.ops-app .lo-queue-empty{margin:0;padding:10px;color:var(--muted);font-size:13.5px}
.ops-app .lo-queue-foot{padding:10px 16px;border-top:1px solid rgba(190,205,235,.08);color:var(--muted);font:12px var(--mono)}
/* A row's name, detail and date take the whole first line; its actions wrap under it (v5 §2). */
.ops-app .lo-qrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.ops-app .lo-qrow-main{display:flex;flex:1 1 100%;align-items:center;gap:10px;min-width:0;min-height:38px;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--paper);font:inherit;text-align:left;cursor:pointer}
.ops-app .lo-qrow-main:hover{background:rgba(190,205,235,.05);color:var(--paper)}
.ops-app .lo-qrow-copy{flex:1;min-width:0}
.ops-app .lo-qrow-name{display:block;overflow:hidden;font:600 14px var(--sans);text-overflow:ellipsis;white-space:nowrap}
.ops-app .lo-qrow-detail{display:block;margin-top:2px;overflow:hidden;color:var(--muted);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
.ops-app .lo-qrow-meta{color:var(--paper);font:500 12.5px var(--mono);white-space:nowrap}
.ops-app .lo-qrow-meta--dim{color:var(--muted)}
.ops-app .lo-qrow-meta--action{color:var(--status-action-text)}
.ops-app .lo-qrow-meta--ok{color:var(--status-ok-text)}
.ops-app .lo-qrow-meta--wait{color:var(--status-wait-text)}
.ops-app .lo-qrow-acts{display:flex;gap:6px;margin:-6px 10px 6px auto}
.ops-app .lo-crew--queue{max-width:140px;min-height:32px;padding:0 8px;overflow:hidden;border-color:rgba(190,205,235,.25);border-radius:7px;color:var(--lo-label);font-size:12px;text-overflow:ellipsis}
.ops-app .lo-crew--queue.is-empty{color:var(--status-action-text)}
.ops-app .lo-btn.lo-qrow-start{min-height:32px;padding:0 10px;border:1px solid rgba(243,210,138,.4);border-radius:7px;background:rgba(243,210,138,.08);color:var(--gold);font-size:12.5px}
.ops-app .lo-btn.lo-qrow-start:hover{background:var(--gold);color:var(--lo-on-gold)}
/* Needs attention */
.ops-app .lo-attn{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));border:1px solid var(--lo-line);border-radius:12px;background:var(--lo-panel)}
.ops-app .lo-attn-item{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid var(--lo-line-row)}
.ops-app .lo-attn-item > .status-dot{flex:0 0 8px;margin-top:6px}
.ops-app .lo-attn-copy{flex:1;min-width:0}
.ops-app .lo-attn-title{font:600 14px var(--sans)}
.ops-app .lo-attn-body{margin-top:3px;color:var(--muted);font-size:13px;line-height:1.45}
.ops-app .lo-attn-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ops-app .lo-attn-at{color:var(--muted);font:11.5px var(--mono);white-space:nowrap}
.ops-app .lo-attn-cta{padding:4px 0;color:var(--gold);font:600 13px var(--sans);white-space:nowrap}
/* Phones: the text gets the full width and the time and buttons sit on their own line under it. */
@media (max-width:640px){
  .ops-app .lo-attn-item{flex-wrap:wrap;row-gap:8px}
  .ops-app .lo-attn-copy{flex:1 1 calc(100% - 20px)}
  .ops-app .lo-attn-side{flex:1 1 100%;flex-direction:row-reverse;justify-content:space-between;align-items:center;padding-left:20px}
}
/* a customer email waiting for you: Skip / Send */
.ops-app .lo-attn-choice{display:flex;align-items:center;gap:14px}
.ops-app .lo-attn-choice button{border:0;background:transparent;cursor:pointer}
.ops-app .lo-attn-skip{padding:4px 0;color:var(--muted);font:600 13px var(--sans);white-space:nowrap}
.ops-app .lo-attn-skip:hover{color:var(--paper)}
.ops-app .lo-attn-send:hover{color:var(--gold-soft)}
/* Today's jobs (phone only) */
.ops-app .lo-today{display:none;overflow:hidden;margin-bottom:24px;border:1px solid rgba(10,132,255,.35);border-radius:12px;background:rgba(10,132,255,.07)}
.ops-app .lo-today-title{padding:12px 14px 8px;font:600 14px var(--sans)}
.ops-app .lo-today-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid rgba(190,205,235,.08)}
.ops-app .lo-today-copy{flex:1;min-width:0}
.ops-app .lo-today-name{font:700 14.5px var(--sans)}
.ops-app .lo-today-detail{margin-top:2px;overflow:hidden;color:var(--muted);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
.ops-app .lo-today-pill{margin-top:6px}
.ops-app .lo-btn.lo-today-cta{min-height:44px;padding:0 14px;font-size:13.5px}

/* ---------------- Customer page (v5 §4.6) ---------------- */
/* The prototype's back button sits on a 16px line box, 2.5px below the content top. */
.ops-app .lo-rec-back{display:table;margin:2.5px 0 14px;color:var(--muted);font:500 13.5px var(--sans)}
.ops-app .lv a.lo-rec-back:not(#lv){color:var(--muted)}
.ops-app .lv a.lo-rec-back:not(#lv):hover{color:var(--gold)}
.ops-app .lo-rec-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}
.ops-app .lo-rec-id{display:flex;align-items:center;gap:16px;min-width:0}
.ops-app .lo-rec-avatar{position:relative;display:flex;flex:0 0 60px;align-items:center;justify-content:center;width:60px;height:60px;overflow:hidden;border-radius:50%;background:rgba(243,210,138,.12);color:var(--gold);font:600 19px var(--sans)}
.ops-app .lo-rec-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ops-app .lo-rec-id-copy{min-width:0}
.ops-app .lo-rec-title{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ops-app .lo-rec-name{margin:0;color:var(--paper);font:700 30px/1.15 var(--sans);letter-spacing:-.01em;overflow-wrap:anywhere}
.ops-app .lo-rec-contact{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;color:var(--muted);font-size:13.5px}
.ops-app .lo-rec-contact .lo-rec-phone{font:13px var(--mono)}
.ops-app .lo-rec-contact .is-missing{color:var(--muted-2)}
.ops-app .lv .lo-rec-contact a:not(#lv){color:var(--muted)}
.ops-app .lv .lo-rec-contact a:not(#lv):hover{color:var(--gold)}
.ops-app .lo-rec-actions{display:flex;flex-wrap:wrap;gap:8px}
.ops-app .lo-rec-actions .lo-btn--ghost{padding:0 14px}
/* The work track: done steps gold at 55%, the current one solid, the rest faint. */
.ops-app .lo-rec-track{display:flex;gap:4px;margin-bottom:20px;padding-bottom:4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.ops-app .lo-rec-track::-webkit-scrollbar{display:none}
.ops-app .lo-rec-step{flex:1 0 104px;min-width:104px}
/* Each step is a button that sets it by hand (the current one is the green one, owner's call 2026-09-24). */
.ops-app button.lo-rec-step{display:block;margin:0;padding:0 0 4px;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ops-app button.lo-rec-step:disabled{cursor:default;opacity:1}
.ops-app button.lo-rec-step:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ops-app .lo-rec-bar{display:block;height:3px;border-radius:3px;background:rgba(190,205,235,.12);transition:background-color .12s}
.ops-app .lo-rec-step.is-done .lo-rec-bar{background:rgba(243,210,138,.55)}
.ops-app .lo-rec-step.is-current .lo-rec-bar{background:var(--status-ok-solid)}
.ops-app .lo-rec-step.is-current.is-waiting .lo-rec-bar{background:var(--status-action-solid)}
.ops-app .lo-rec-step-label{display:block;margin-top:8px;padding-right:6px;color:var(--muted-2);font:500 12px/1.35 var(--sans);transition:color .12s}
.ops-app .lo-rec-step.is-done .lo-rec-step-label{color:var(--muted)}
.ops-app .lo-rec-step.is-current .lo-rec-step-label{color:var(--status-ok-text);font-weight:600}
.ops-app .lo-rec-step.is-current.is-waiting .lo-rec-step-label{color:var(--status-action-text)}
.ops-app button.lo-rec-step:not(:disabled):hover .lo-rec-bar{background:rgba(190,205,235,.34)}
.ops-app button.lo-rec-step.is-done:not(:disabled):hover .lo-rec-bar{background:rgba(243,210,138,.85)}
.ops-app button.lo-rec-step:not(:disabled):hover .lo-rec-step-label{color:var(--paper)}
.ops-app .lo-rec-track-note{margin:-14px 0 18px;color:var(--muted);font-size:12.5px}
/* The status pill as the step menu (customer page and Customers list) */
.ops-app .lo-step-menu{display:inline-flex;max-width:100%}
.ops-app .lo-step-trigger{display:inline-flex;align-items:center;gap:4px;max-width:100%;border-radius:999px;list-style:none;cursor:pointer}
.ops-app .lo-step-trigger::-webkit-details-marker{display:none}
.ops-app .lo-step-trigger:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ops-app .lo-step-chev{flex:none;color:var(--muted);opacity:.55;transition:opacity .12s,color .12s}
.ops-app .lo-step-trigger:hover .lo-step-chev,.ops-app .lo-step-menu[open] .lo-step-chev{opacity:1;color:var(--paper)}
.ops-app .lo-step-pop{z-index:120;min-width:236px;max-height:min(70vh,480px);overflow:auto;overscroll-behavior:contain}
.ops-app .lo-step-pop-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 10px 8px;color:var(--muted);font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ops-app .lo-step-pop-head span{color:var(--muted-2);font:500 12px var(--sans);letter-spacing:0;text-transform:none}
.ops-app .lo-step-pop > button[aria-checked="true"]{color:var(--status-ok-text)}
.ops-app .lo-step-pop > button[aria-checked="true"]::after{margin-left:auto;padding-left:12px;content:"✓"}
.ops-app .lo-step-pop > button.lo-step-auto{color:var(--gold)}
.ops-app .lo-step-pop .lo-bld-menu-sep{height:1px;margin:6px 4px;background:var(--lo-line)}
/* Rows and cards opened by a cover link underneath, so a control on top (the step menu) can be its own button */
.ops-app .lo-row--cover,.ops-app .lo-card--cover{position:relative}
.ops-app .lo-cover{position:absolute;inset:0;z-index:0;border-radius:inherit}
.ops-app .lo-row--cover > :not(.lo-cover),.ops-app .lo-card--cover > :not(.lo-cover){position:relative;z-index:1;pointer-events:none}
/* An open step menu sits above the rows and cards after it (each row's parts share layer 1). */
.ops-app .lo-row--cover > :has(.lo-step-menu[open]),.ops-app .lo-card--cover > :has(.lo-step-menu[open]){z-index:31}
.ops-app .lo-row--cover .lo-step-menu,.ops-app .lo-card--cover .lo-step-menu{pointer-events:auto}
.ops-app .lo-row--cover:hover{background:rgba(190,205,235,.04)}
.ops-app .lo-card--cover:hover{border-color:rgba(243,210,138,.4)}
.ops-app .lo-cover:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
/* Figures: Quoted, Paid, Balance, the Payment pill and the installation date (a button). */
.ops-app .lo-rec-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:24px;overflow:hidden;border:1px solid var(--lo-line);border-radius:12px;background:var(--lo-panel)}
.ops-app .lo-rec-fig{display:block;padding:14px 18px;border-right:1px solid rgba(190,205,235,.08)}
.ops-app .lo-rec-fig-label{display:block;color:var(--muted);font-size:12.5px}
.ops-app .lo-rec-fig-value{display:block;margin-top:6px;color:var(--paper);font:500 20px var(--mono)}
.ops-app .lo-rec-fig-value.is-due{color:var(--status-action-text)}
.ops-app .lo-rec-fig-value.is-dim{color:var(--muted)}
.ops-app .lo-rec-fig-pill{display:block;margin-top:8px}
.ops-app .lo-rec-date{border:0;border-right:0;background:rgba(243,210,138,.05);color:var(--paper);font:inherit;text-align:left;cursor:pointer}
.ops-app button.lo-rec-date:hover{background:rgba(243,210,138,.1)}
.ops-app .lo-rec-date.is-static{cursor:default}
.ops-app .lo-rec-date-value{display:block;margin-top:7px;color:var(--gold);font:500 17px var(--mono)}
.ops-app .lo-rec-date-value.is-none{color:var(--muted)}
.ops-app .lo-tabs.lo-rec-tabs{margin-bottom:18px}
/* Overview: Next step, Notes and what they told us on the left; Activity on the right. */
.ops-app .lo-rec-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));align-items:start;gap:16px}
.ops-app .lo-rec-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.ops-app .lo-rec-next{padding:18px;border:1px solid rgba(243,210,138,.3);border-radius:12px;background:rgba(243,210,138,.06)}
.ops-app .lo-rec-next.is-waiting{border-color:rgba(255,159,10,.45);background:rgba(255,159,10,.08)}
.ops-app .lo-rec-eyebrow{color:var(--gold);font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ops-app .lo-rec-next.is-waiting .lo-rec-eyebrow{color:var(--status-action-text)}
.ops-app .lo-rec-next-title{margin:8px 0 0;color:var(--paper);font:600 18px/1.3 var(--sans);letter-spacing:0}
.ops-app .lo-rec-next-detail{margin:6px 0 0;color:var(--muted);font-size:13.5px;line-height:1.5}
.ops-app .lo-rec-next-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ops-app .lo-btn.lo-rec-cta{padding:0 14px;font-size:13.5px}
.ops-app .lo-btn.lo-rec-pick{padding:0 14px;border:1px dashed rgba(190,205,235,.3);background:transparent;color:var(--paper);font-size:13.5px}
.ops-app .lo-btn.lo-rec-pick:hover{border-color:var(--gold)}
.ops-app .lo-btn.lo-rec-pick.is-empty{color:var(--status-action-text)}
.ops-app .lo-rec-panel{min-width:0;padding:16px 18px;border:1px solid var(--lo-line);border-radius:12px;background:var(--lo-panel)}
.ops-app .lo-rec-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ops-app .lo-rec-panel-title{margin:0;color:var(--paper);font:600 14px var(--sans);letter-spacing:0}
.ops-app .lo-rec-activity-title{margin-bottom:14px}
.ops-app .lo-rec-link{padding:0;border:0;background:transparent;color:var(--gold);font:600 13px var(--sans);cursor:pointer}
.ops-app .lo-rec-link:hover{color:var(--gold-soft)}
.ops-app .lv a.lo-rec-link:not(#lv){color:var(--gold)}
.ops-app .lv a.lo-rec-link:not(#lv):hover{color:var(--gold-soft)}
.ops-app .lo-rec-all{display:inline-block;margin-top:2px}
.ops-app .lo-rec-note{margin:10px 0 0;color:var(--paper);font-size:14px;line-height:1.55;text-wrap:pretty;overflow-wrap:anywhere}
.ops-app .lo-rec-note.is-empty{color:var(--muted)}
.ops-app .lo-rec-asked dl{display:grid;grid-template-columns:minmax(90px,max-content) 1fr;gap:8px 14px;margin:12px 0 0;font-size:13.5px;line-height:1.45}
.ops-app .lo-rec-asked dt{color:var(--muted)}
.ops-app .lo-rec-asked dd{margin:0;overflow-wrap:anywhere}
/* The activity timeline: a dot and a rail per event. */
.ops-app .lo-tl-row{display:flex;gap:12px;padding-bottom:14px}
.ops-app .lo-tl-rail{display:flex;flex-direction:column;align-items:center;padding-top:5px}
.ops-app .lo-tl-line{flex:1;width:1px;margin-top:6px;background:rgba(190,205,235,.12)}
.ops-app .lo-tl-row:last-child .lo-tl-line{display:none}
.ops-app .lo-tl-copy{flex:1;min-width:0}
.ops-app .lo-tl-top{display:flex;justify-content:space-between;gap:10px}
.ops-app .lo-tl-title{font:600 13.5px var(--sans);overflow-wrap:anywhere}
.ops-app .lo-tl-at{color:var(--muted);font:11.5px var(--mono);white-space:nowrap}
/* Settings → Accounts: a turned-off account is dimmed; the account type line in its popup. */
.ops-app .lo-acct-off{opacity:.6}
.ops-app .ops-acct-type{margin:4px 0 0;color:var(--muted);font-size:13.5px;line-height:1.45}
.ops-app .ops-acct-type strong{color:var(--paper)}
/* Full Access / No Pricing */
.ops-app .ops-acct-choice{display:flex;align-items:flex-start;gap:10px;margin-top:8px;padding:10px 12px;border:1px solid rgba(190,205,235,.14);border-radius:9px;cursor:pointer}
.ops-app .ops-acct-choice:has(input:checked){border-color:var(--gold);background:rgba(243,210,138,.06)}
.ops-app .ops-acct-choice input{margin-top:3px;accent-color:var(--gold)}
.ops-app .ops-acct-choice strong{display:block;color:var(--paper);font:600 14px var(--sans)}
.ops-app .ops-acct-choice small{display:block;margin-top:2px;color:var(--muted);font-size:12.5px;line-height:1.45}
/* the work, without prices (No Pricing's quotes and invoices) */
.ops-app .lo-ws{display:flex;flex-direction:column;gap:14px;max-width:880px}
.ops-app .lo-ws-eyebrow{display:flex;align-items:center;gap:8px;color:var(--muted);font:600 12px var(--sans);letter-spacing:.04em;text-transform:uppercase}
.ops-app .lo-ws-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.ops-app .lo-ws-card{display:flex;flex-direction:column;gap:4px;padding:16px}
.ops-app .lo-ws-card span,.ops-app .lo-ws-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.ops-app .lo-ws-label{margin-bottom:4px;color:var(--lo-label);font:600 12px var(--sans);letter-spacing:.04em;text-transform:uppercase}
.ops-app .lo-ws-lines{width:100%;border-collapse:collapse;font-size:14px}
.ops-app .lo-ws-lines th{padding:6px 0;color:var(--muted);font:600 11.5px var(--sans);letter-spacing:.06em;text-align:left;text-transform:uppercase}
.ops-app .lo-ws-lines td{padding:10px 0;border-top:1px solid rgba(190,205,235,.08);vertical-align:top}
.ops-app .lo-ws-lines td strong{display:block;color:var(--paper);font-weight:600}
.ops-app .lo-ws-lines td span{display:block;margin-top:2px;color:var(--muted);font-size:13px}
.ops-app .lo-ws-lines .lo-ws-qty{width:110px;text-align:right;white-space:nowrap}
.ops-app .lo-ws-subject th{padding-top:14px;color:var(--gold);font-size:12px}
.ops-app .lo-ws-foot{margin:0;color:var(--muted-2);font-size:12.5px}
/* Who did it, after the time (accounts): same quiet type as the time. */
.ops-app .lo-tl-when{display:inline-flex;align-items:baseline;white-space:nowrap}
.ops-app .lo-tl-by{color:var(--muted);font:11.5px var(--mono)}
.ops-app .lo-tl-sub{margin-top:2px;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
/* Quotes & invoices: one list; each row opens its document and has a ⋯ menu. */
.ops-app .lo-rec-docs{overflow:visible;border:1px solid var(--lo-line);border-radius:12px;background:var(--lo-panel)}
.ops-app .lo-rec-doc{display:flex;align-items:center;border-bottom:1px solid var(--lo-line-row)}
.ops-app .lo-rec-doc-main{display:flex;flex:1;flex-wrap:wrap;align-items:center;gap:8px 16px;min-width:0;padding:13px 16px;color:var(--paper)}
.ops-app .lo-rec-doc-main:hover{background:rgba(190,205,235,.04)}
.ops-app .lo-rec-doc:first-child .lo-rec-doc-main{border-top-left-radius:11px}
.ops-app .lo-rec-doc:last-child .lo-rec-doc-main{border-bottom-left-radius:11px}
.ops-app .lo-rec-doc-num{flex:0 0 76px;color:var(--muted);font:500 12.5px var(--mono)}
.ops-app .lo-rec-doc-what{flex:1 1 200px;min-width:0}
.ops-app .lo-rec-doc-kind{display:block;font:600 14px var(--sans)}
.ops-app .lo-rec-doc-sub{display:block;margin-top:2px;overflow:hidden;color:var(--muted);font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.ops-app .lo-rec-doc-pill{flex:0 0 150px}
.ops-app .lo-rec-doc-total{flex:0 0 90px;font:500 13.5px var(--mono);text-align:right}
.ops-app .lo-rec-doc-menu{flex:none;margin:0 12px 0 4px}
/* Payments tab */
.ops-app .lo-rec-pane-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ops-app .lo-rec-pane-sum{color:var(--muted);font:12px var(--mono)}
/* Notes & activity tab */
.ops-app .lo-rec-hint{margin:4px 0 14px;color:var(--muted);font-size:13px}
.ops-app .lo-rec-form{display:flex;flex-direction:column}
.ops-app .lo-rec-form .label{display:block;margin:0 0 7px;color:var(--lo-label);font:600 13px var(--sans);letter-spacing:0;text-transform:none}
.ops-app .lo-rec-form .field{width:100%;min-height:44px;margin-bottom:16px;padding:11px 12px;border:1px solid rgba(190,205,235,.16);border-radius:10px;background:var(--lo-input);color:var(--paper);font:14px/1.5 var(--sans);box-shadow:none}
.ops-app .lo-rec-form .field:focus{border-color:var(--gold);outline:0;box-shadow:none}
.ops-app .lo-rec-form textarea.field{resize:vertical}
.ops-app .lo-rec-form-foot{display:flex;align-items:center;gap:10px}
.ops-app .lo-rec-form-foot .grow{flex:1}
/* Screen menus: <details data-menu> (shell.js closes them on an outside click or Esc). */
.ops-app .lo-menu{position:relative}
.ops-app .lo-menu > summary{list-style:none;cursor:pointer}
.ops-app .lo-menu > summary::-webkit-details-marker{display:none}
.ops-app .lo-btn.lo-menu-trigger{padding:0 11px}
.ops-app .lo-menu[open] > .lo-menu-trigger{background:rgba(190,205,235,.06)}
.ops-app .lo-menu-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:30;display:flex;flex-direction:column;min-width:210px;padding:6px;border:1px solid rgba(190,205,235,.2);border-radius:12px;background:var(--lo-pop);box-shadow:0 18px 50px rgba(0,0,0,.5)}
.ops-app .lo-menu-pop > a,
.ops-app .lo-menu-pop > button,
.ops-app .lo-menu-pop form > button{display:flex;align-items:center;width:100%;min-height:38px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--paper);font:500 13.5px var(--sans);text-align:left;white-space:nowrap;cursor:pointer}
.ops-app .lv .lo-menu-pop > a:not(#lv){color:var(--paper)}
.ops-app .lo-menu-pop > a:hover,
.ops-app .lo-menu-pop > button:hover{background:rgba(190,205,235,.06)}

/* ---------------- Quote builder (v5 §7) ---------------- */
/* One grid: the header and notices across, the main column, and the rail with the saved document's cards under
   it. The form is display:contents so its parts and those cards (outside it: they post their own forms) share it. */
.ops-app .lo-bld-wrap{container-type:inline-size}
.ops-app .lo-bld{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);grid-template-areas:"head head" "notes notes" "main rail" "main extras";grid-template-rows:auto auto auto 1fr;column-gap:16px;align-items:start}
.ops-app .lo-bld-form{display:contents}
.ops-app .lo-bld-head{grid-area:head;min-width:0}
.ops-app .lo-bld-notices{grid-area:notes;display:flex;flex-direction:column;gap:10px;min-width:0}
.ops-app .lo-bld-notices:has(> :not([hidden])){margin-bottom:16px}
.ops-app .lo-bld-main{grid-area:main;display:flex;flex-direction:column;gap:16px;min-width:0}
.ops-app .lo-bld-rail{grid-area:rail;display:flex;flex-direction:column;gap:12px;min-width:0}
.ops-app .lo-bld #ib3-extras{grid-area:extras;min-width:0;margin-top:12px}
/* One column: the rail's totals come straight after the lines (v5 §7), then the details and message cards. */
@container (max-width:855px){
  .ops-app .lo-bld{display:flex;flex-direction:column;align-items:stretch}
  .ops-app .lo-bld-main,.ops-app .lo-bld-rail{display:contents}
  .ops-app .lo-bld-notices{order:1}
  .ops-app .lo-bld-billwrap{order:2}
  .ops-app .lo-bld-lines{order:3;margin-top:16px}
  .ops-app .lo-bld-totals{order:4;margin-top:16px}
  .ops-app .lo-bld-info{order:5;margin-top:12px}
  .ops-app .lo-bld-details{order:6;margin-top:16px}
  .ops-app .lo-bld-online{order:5;margin-top:12px}
  .ops-app .lo-bld-design-box,.ops-app .lo-bld-asked{order:5;margin-top:12px}
  .ops-app .lo-bld-message{order:8;margin-top:16px}
  .ops-app .lo-bld #ib3-extras{order:9}
}
/* header */
.ops-app .lo-bld-headrow{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.ops-app .lo-bld-headline{flex:1 1 420px;min-width:0}
.ops-app .lo-bld-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--muted);font:500 12.5px var(--mono)}
.ops-app .lo-bld-save{display:inline-flex;align-items:center;gap:6px}
.ops-app .lo-bld-save-dot{width:6px;height:6px;border-radius:50%}
.ops-app .lo-bld-kind{display:inline-flex;gap:2px;margin-right:6px;padding:2px;border:1px solid rgba(190,205,235,.14);border-radius:8px}
.ops-app .lo-bld-kind button{min-height:26px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--muted);font:600 12.5px var(--sans);cursor:pointer}
.ops-app .lo-bld-kind button.on{background:rgba(190,205,235,.1);color:var(--paper)}
/* The job name is an input set like the page heading; its 1px border is taken out of the line box (39px tall). */
.ops-app .lo-bld-title{display:block;width:100%;margin:8px 0 0 -7px;padding:0 6px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--paper);font:700 34px/37.1px var(--sans);letter-spacing:-.02em;box-shadow:none}
.ops-app .lo-bld-title::placeholder{color:var(--muted-2)}
.ops-app .lo-bld-title:hover{border-color:rgba(190,205,235,.14)}
.ops-app .lo-bld-title:focus{border-color:var(--gold);outline:0;box-shadow:none}
.ops-app .lo-bld-title[readonly]{border-color:transparent;color:var(--paper)}
.ops-app .lo-bld-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ops-app .lo-bld-actions .lo-btn--ghost{padding:0 14px}
.ops-app .lo-bld-actions .lo-btn--primary{padding:0 18px}
.ops-app .lo-bld-menuwrap{position:relative}
.ops-app .lo-btn.lo-bld-more{width:38px;padding:0;font:700 16px var(--sans);letter-spacing:1px}
.ops-app .lo-bld-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:30;width:230px;padding:6px;border:1px solid rgba(190,205,235,.2);border-radius:10px;background:var(--lo-pop);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.ops-app .lo-bld-menu > :is(button,a){display:block;box-sizing:border-box;text-decoration:none;width:100%;padding:10px;border:0;border-radius:6px;background:transparent;color:var(--paper);font:500 14px var(--sans);text-align:left;cursor:pointer}
.ops-app .lo-bld-menu > :is(button,a):hover,
.ops-app .lo-bld-menu > :is(button,a):focus-visible{background:rgba(190,205,235,.07);outline:0}
.ops-app .lo-bld-menu > button.is-danger,.ops-app .lo-menu-pop button.is-danger{color:#ff7a70}
.ops-app .lo-bld-menu-sep{height:1px;margin:6px 4px;background:rgba(190,205,235,.1)}
.ops-app .lo-bld-scrim{display:none}
/* notices */
.ops-app .lo-bld-note{padding:11px 14px;border:1px solid rgba(10,132,255,.35);border-radius:10px;background:rgba(10,132,255,.08);font-size:13.5px;line-height:1.45}
.ops-app .lo-bld-note strong{display:block;color:var(--paper);font-weight:600}
.ops-app .lo-bld-note p{margin:4px 0 0;color:var(--paper)}
.ops-app .lo-bld-note small{display:block;margin-top:4px;color:var(--muted);font-size:13px}
.ops-app .lo-bld-note--action{border-color:rgba(255,159,10,.35);background:rgba(255,159,10,.08)}
.ops-app .lo-bld-note--ok{border-color:rgba(48,209,88,.35);background:rgba(48,209,88,.08)}
.ops-app .lo-bld-note--bad{border-color:rgba(255,69,58,.4);background:rgba(255,69,58,.08)}
.ops-app .lo-bld-note--done{border-color:rgba(142,142,147,.35);background:rgba(142,142,147,.08)}
/* Send / Skip for a customer email waiting for you */
.ops-app .lo-bld-note-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:10px}
.ops-app .lo-bld-note-actions .lo-btn{min-height:34px;padding:0 14px;font-size:13px}
.ops-app .lo-bld-errors{padding:11px 14px;border:1px solid rgba(255,69,58,.4);border-radius:10px;background:rgba(255,69,58,.1);color:#ff9a92;font:600 13.5px/1.45 var(--sans)}
/* cards */
.ops-app .lo-bld-card{min-width:0;padding:14px 18px 16px;border:1px solid var(--lo-line);border-radius:12px;background:var(--lo-panel)}
.ops-app .lo-bld-card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:8px}
.ops-app .lo-bld-eyebrow{color:var(--muted);font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase}
/* Bill to: the whole card opens the picker. */
.ops-app .lo-bld-billwrap{position:relative}
.ops-app .lo-bld-billwrap:has(.lo-cust-pop){z-index:25}
.ops-app .lo-bld-billto{cursor:pointer;transition:border-color .12s}
.ops-app .lo-bld-billto:hover,
.ops-app .lo-bld-billto.is-open{border-color:rgba(243,210,138,.35)}
.ops-app .lo-bld-billto.is-locked{cursor:default}
.ops-app .lo-bld-billto.is-locked:hover{border-color:var(--lo-line)}
.ops-app .lo-bld-billto-links{display:flex;align-items:center;gap:14px}
.ops-app .lo-bld-cust{display:flex;align-items:center;gap:12px;width:100%;max-width:440px;min-height:52px;padding:6px 12px 6px 8px;border:1px solid rgba(190,205,235,.16);border-radius:10px;background:var(--lo-input);color:var(--paper);text-align:left;cursor:pointer}
.ops-app .lo-bld-cust:hover,
.ops-app .lo-bld-billto.is-open .lo-bld-cust{border-color:var(--gold)}
.ops-app .lo-bld-cust:disabled{cursor:default}
.ops-app .lo-bld-cust:disabled:hover{border-color:rgba(190,205,235,.16)}
.ops-app .lo-bld-cust > svg{flex:0 0 16px;color:var(--muted)}
.ops-app .lo-bld-cust-av{display:flex;flex:0 0 36px;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(243,210,138,.12);color:var(--gold);font:600 13px var(--sans)}
.ops-app .lo-bld-cust-name{flex:1;min-width:0;overflow:hidden;font:700 16px var(--sans);text-overflow:ellipsis;white-space:nowrap}
.ops-app .lo-bld-cust.is-empty .lo-bld-cust-name{color:var(--muted);font-weight:600}
.ops-app .lo-bld-cust-sub{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.ops-app .lo-bld-cust-sub:empty{display:none}
.ops-app .lo-bld-cust-note{margin:8px 0 0;color:var(--muted-2);font-size:12.5px}
/* the customer picker */
.ops-app .lo-cust-pop{position:absolute;top:94px;left:0;z-index:30;width:440px;max-width:calc(100% - 36px);margin-left:18px;overflow:hidden;border:1px solid rgba(190,205,235,.2);border-radius:12px;background:var(--lo-pop);box-shadow:0 18px 50px rgba(0,0,0,.5);cursor:default}
.ops-app .lo-cust-search{padding:10px;border-bottom:1px solid rgba(190,205,235,.1)}
.ops-app .lo-cust-search label{display:flex;align-items:center;gap:9px;height:42px;padding:0 12px;border:1px solid var(--gold);border-radius:9px;background:var(--lo-input);color:var(--muted)}
.ops-app .lo-cust-search input{flex:1;min-width:0;padding:0;border:0;outline:0;background:transparent;color:var(--paper);font:14px var(--sans);box-shadow:none}
.ops-app .lo-cust-list{max-height:300px;overflow:auto;padding:6px}
.ops-app .lo-cust-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:38px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--paper);text-align:left;cursor:pointer}
.ops-app .lo-cust-opt:hover,
.ops-app .lo-cust-opt.is-active{background:rgba(190,205,235,.07)}
.ops-app .lo-cust-opt.is-current{background:rgba(243,210,138,.06)}
.ops-app .lo-cust-av{display:flex;flex:0 0 32px;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(190,205,235,.08);font:600 11.5px var(--sans)}
.ops-app .lo-cust-copy{flex:1;min-width:0}
.ops-app .lo-cust-name{display:block;font:600 14px var(--sans)}
.ops-app .lo-cust-sub{display:block;margin-top:1px;overflow:hidden;color:var(--muted);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
.ops-app .lo-cust-stage{font:500 12px var(--sans);white-space:nowrap}
.ops-app .lo-cust-stage--action{color:var(--status-action-text)}
.ops-app .lo-cust-stage--wait{color:var(--status-wait-text)}
.ops-app .lo-cust-stage--ok{color:var(--status-ok-text)}
.ops-app .lo-cust-stage--done{color:var(--status-done-text)}
.ops-app .lo-cust-stage--bad{color:var(--status-bad-text)}
.ops-app .lo-cust-check{width:16px;color:var(--gold);font-size:14px}
.ops-app .lo-cust-none{margin:0;padding:16px 12px;color:var(--muted);font-size:13.5px;text-align:center}
.ops-app .lo-cust-new{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 16px;border:0;border-top:1px solid rgba(190,205,235,.1);background:transparent;color:var(--gold);font:600 14px var(--sans);text-align:left;cursor:pointer}
.ops-app .lo-cust-new:hover{background:rgba(243,210,138,.06)}
.ops-app .lo-cust-form-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid rgba(190,205,235,.1);font:600 14.5px var(--sans)}
.ops-app .lo-cust-back{width:34px;height:34px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:17px;cursor:pointer}
.ops-app .lo-cust-back:hover{background:rgba(190,205,235,.07)}
.ops-app .lo-cust-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:14px 16px}
.ops-app .lo-cust-fld.is-wide{grid-column:1/-1}
.ops-app .lo-cust-fld label{display:block;margin-bottom:6px;color:var(--lo-label);font:600 12.5px var(--sans)}
.ops-app .lo-cust-fld input{width:100%;height:42px;padding:0 12px;border:1px solid rgba(190,205,235,.16);border-radius:9px;background:var(--lo-input);color:var(--paper);font:14px var(--sans);outline:0;box-shadow:none}
.ops-app .lo-cust-fld input:focus{border-color:var(--gold)}
.ops-app .lo-cust-dupe{display:flex;align-items:center;gap:10px;margin:0 16px 12px;padding:10px 12px;border:1px solid rgba(243,210,138,.28);border-radius:9px;background:rgba(243,210,138,.08)}
.ops-app .lo-cust-dupe[hidden]{display:none}
.ops-app .lo-cust-dupe span{flex:1;font-size:13px;line-height:1.4}
.ops-app .lo-cust-dupe strong{font-weight:600}
.ops-app .lo-cust-dupe button{min-height:34px;padding:0 12px;border:0;border-radius:7px;background:var(--gold);color:var(--lo-on-gold);font:600 12.5px var(--sans);white-space:nowrap;cursor:pointer}
.ops-app .lo-cust-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px 14px;border-top:1px solid rgba(190,205,235,.1)}
.ops-app .lo-cust-foot .lo-btn{min-height:40px;padding:0 14px;font-size:13.5px}
.ops-app .lo-cust-foot .lo-btn--primary:disabled{opacity:.4;cursor:not-allowed}
/* details */
.ops-app .lo-bld-template{position:relative}
.ops-app .lo-btn.lo-bld-template-trigger{min-height:32px;padding:0 10px;font-size:13px}
.ops-app .lo-bld-template-trigger svg{color:var(--muted)}
.ops-app .lo-bld-template-pop{top:calc(100% + 6px);right:0;left:auto;z-index:30;min-width:280px;padding:6px;border:1px solid rgba(190,205,235,.2);border-radius:12px;background:var(--lo-pop);box-shadow:0 18px 50px rgba(0,0,0,.5)}
.ops-app .lo-bld-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 14px}
.ops-app .lo-fld{display:block;min-width:0;margin:0}
.ops-app .lo-fld--wide{grid-column:1/-1}
.ops-app .lo-fld-label{display:block;margin-bottom:6px;color:var(--lo-label);font:600 12.5px var(--sans)}
.ops-app .lo-fld-label em{color:var(--muted-2);font-style:normal;font-weight:400}
.ops-app .lo-input{display:block;width:100%;min-height:40px;padding:9px 11px;border:1px solid rgba(190,205,235,.14);border-radius:8px;background:var(--lo-input);color:var(--paper);font:14px/1.45 var(--sans);box-shadow:none;color-scheme:dark}
.ops-app .lo-input:focus{border-color:var(--gold);outline:0;box-shadow:none}
.ops-app .lo-input[readonly]{color:var(--lo-label)}
.ops-app textarea.lo-input{resize:vertical}
.ops-app .lo-fld-note{margin:0;align-self:end;color:var(--muted);font-size:13px}
.ops-app .lo-bld-design .design-picker{margin:0}
/* lines */
.ops-app .lo-bld-lines{padding:6px 18px 16px}
.ops-app .lo-lines-head{display:flex;gap:8px;padding:10px 0 8px;color:var(--muted);font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.ops-app .lo-lh-item{flex:1 1 160px}
.ops-app .lo-lh-qty{flex:0 0 96px;text-align:center}
.ops-app .lo-lh-rate{flex:0 0 100px;text-align:right}
.ops-app .lo-lh-amt{flex:0 0 96px;text-align:right}
.ops-app .lo-lh-x{flex:0 0 32px}
.ops-app .lo-line{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;padding:10px 0;border-top:1px solid rgba(190,205,235,.08)}
.ops-app .lo-line.is-dragging{z-index:2;border-radius:8px;background:rgba(190,205,235,.06)}
.ops-app .lo-lines.is-sorting .lo-line{transition:none}
.ops-app .lo-line-grip{position:absolute;top:18px;left:-17px;display:grid;place-items:center;width:16px;height:24px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--muted-2);opacity:0;cursor:grab;touch-action:none}
.ops-app .lo-line:hover .lo-line-grip,
.ops-app .lo-line-grip:focus-visible{opacity:1}
.ops-app .lo-line-grip svg{width:12px;height:12px}
.ops-app .lo-line-item{display:flex;flex:1 1 160px;flex-direction:column;gap:4px;min-width:0}
.ops-app .lo-line-name,
.ops-app .lo-line-name-input{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:0 11px;border:1px solid rgba(190,205,235,.14);border-radius:8px;background:var(--lo-input);color:var(--paper);font:14px var(--sans);text-align:left;box-shadow:none}
.ops-app .lo-line-name{cursor:pointer}
.ops-app .lo-line-name:hover,
.ops-app .lo-line-name-input:focus{border-color:var(--gold);outline:0}
.ops-app .lo-line-name > svg{flex:0 0 14px;color:var(--muted)}
.ops-app .lo-line-name-text{flex:1;min-width:0;overflow:hidden;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.ops-app .lo-line-name-text[data-empty]{color:var(--muted-2);font-weight:400}
.ops-app .lo-line-name.is-static{display:block;padding:10px 11px;border-color:transparent;background:transparent;font-weight:500;cursor:default}
.ops-app .lo-line-desc{display:block;width:100%;min-height:32px;padding:6px 11px;overflow:hidden;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--lo-label);font:13px/1.45 var(--sans);resize:none;box-shadow:none}
.ops-app .lo-line-desc::placeholder{color:var(--muted-2)}
.ops-app .lo-line-desc:hover{border-color:rgba(190,205,235,.1)}
.ops-app .lo-line-desc:focus{border-color:var(--gold);outline:0;background:var(--lo-input)}
.ops-app .lo-line-desc[readonly]:hover{border-color:transparent}
.ops-app .lo-qty{display:flex;flex:0 0 96px;align-items:stretch;width:96px;height:40px;overflow:hidden;border:1px solid rgba(190,205,235,.14);border-radius:8px;background:var(--lo-input)}
.ops-app .lo-qty:focus-within{border-color:var(--gold)}
.ops-app .lo-qty-btn{display:flex;flex:0 0 26px;align-items:center;justify-content:center;width:26px;height:100%;padding:0;border:0;background:transparent;color:var(--muted);font:500 16px/1 var(--sans);cursor:pointer}
.ops-app .lo-qty-btn:hover{background:rgba(243,210,138,.08);color:var(--gold)}
.ops-app .lo-qty-input{flex:1;width:100%;min-width:0;padding:0 2px;border:0;border-right:1px solid rgba(190,205,235,.1);border-left:1px solid rgba(190,205,235,.1);background:transparent;color:var(--paper);font:600 14.5px var(--sans);font-variant-numeric:tabular-nums;text-align:center;outline:0;box-shadow:none}
.ops-app .lo-qty-input[readonly]{border:0}
.ops-app .lo-line-rate{flex:0 0 100px;width:100px;min-height:40px;padding:0 10px;border:1px solid rgba(190,205,235,.14);border-radius:8px;background:var(--lo-input);color:var(--paper);font:500 14.5px var(--sans);font-variant-numeric:tabular-nums;text-align:right;outline:0;box-shadow:none}
.ops-app .lo-line-rate:focus{border-color:var(--gold)}
.ops-app .lo-line-amt{flex:0 0 96px;color:var(--paper);font:600 15px/40px var(--sans);font-variant-numeric:tabular-nums;text-align:right}
.ops-app .lo-line-x{flex:0 0 32px;height:32px;margin-top:4px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:18px;cursor:pointer}
.ops-app button.lo-line-x:hover{background:rgba(255,69,58,.18);color:#ff7a70}
.ops-app .lo-line--subject{align-items:center}
/* Add-ons (quotes): two boxes under the description; an unticked add-on's amount is muted (it isn't in the total). */
.ops-app .lo-addon{display:flex;flex-wrap:wrap;gap:4px 16px;padding:0 11px}
.ops-app .lo-addon-check{display:inline-flex;align-items:center;gap:7px;min-height:32px;margin:0;color:var(--muted);font:500 12.5px var(--sans);cursor:pointer}
.ops-app .lo-addon-check input{width:16px;height:16px;margin:0;accent-color:#f3d28a;cursor:pointer}
.ops-app .lo-addon-check:hover{color:var(--paper)}
.ops-app .lo-line.is-addon .lo-addon-check:first-child{color:var(--gold)}
.ops-app .lo-addon-tag{align-self:flex-start;margin:2px 11px 0;padding:3px 9px;border-radius:999px;background:rgba(190,205,235,.08);color:var(--muted);font:600 11.5px var(--sans)}
.ops-app .lo-addon-tag.is-on{background:rgba(243,210,138,.12);color:var(--gold)}
.ops-app .lo-line-amt[data-off]{color:var(--muted-2);font-weight:500}
.ops-app .lo-addon-note{color:var(--gold)}
.ops-app .lo-subject-input{flex:1;min-width:0;min-height:40px;padding:0 11px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--gold);font:600 14px var(--sans);letter-spacing:.01em;outline:0;box-shadow:none}
.ops-app .lo-subject-input::placeholder{color:var(--muted-2);font-weight:500}
.ops-app .lo-subject-input:hover{border-color:rgba(190,205,235,.14)}
.ops-app .lo-subject-input:focus{border-color:var(--gold);background:var(--lo-input)}
.ops-app .lo-lines-add{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:12px;border-top:1px solid rgba(190,205,235,.08)}
.ops-app .lo-add-line{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border:1px dashed rgba(190,205,235,.3);border-radius:8px;background:transparent;color:var(--paper);font:600 13.5px var(--sans);cursor:pointer}
.ops-app .lo-add-line:hover,
.ops-app .lo-add-line[aria-expanded="true"]{border-color:var(--gold);color:var(--gold)}
.ops-app .lo-add-subject{padding:0;border:0;background:transparent;color:var(--muted);font:600 13px var(--sans);cursor:pointer}
.ops-app .lo-add-subject:hover{color:var(--paper)}
.ops-app .lo-lines-add-grow{flex:1}
.ops-app .lo-lines-add .lo-bld-template-pop{top:auto;bottom:calc(100% + 6px)}
.ops-app .lo-bld-refs{margin:8px 0 4px;color:var(--muted);font-size:13px}
.ops-app .lo-bld-refs summary{color:var(--lo-label);font-weight:600;cursor:pointer}
.ops-app .lo-bld-ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:10px 0}
.ops-app .lo-bld-ref-grid .ref{padding:8px 10px;border:1px solid rgba(190,205,235,.1);border-radius:8px}
.ops-app .lo-bld-ref-grid small{display:block;color:var(--muted);font-size:11.5px}
.ops-app .lo-bld-ref-grid strong{font:600 13.5px var(--sans)}
.ops-app .lo-bld-ref-grid em{color:var(--gold);font-style:normal;font-size:12px}
/* the note to the customer and terms */
.ops-app .lo-bld-message{display:flex;flex-direction:column;gap:12px}
.ops-app .lo-bld-terms summary{color:var(--lo-label);font:600 12.5px var(--sans);cursor:pointer}
.ops-app .lo-bld-terms summary span{color:var(--muted-2);font-weight:400}
.ops-app .lo-bld-terms textarea{margin-top:8px}
/* the rail */
.ops-app .lo-bld-totals{padding:18px}
.ops-app .lo-tot-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0;color:var(--muted);font-size:14px}
.ops-app .lo-tot-row[hidden],
.ops-app .lo-tot-add[hidden]{display:none}
.ops-app .lo-tot-val{color:var(--paper);font:600 15px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.ops-app .lo-tot-less span:last-child{font-variant-numeric:tabular-nums}
.ops-app .lo-tot-add{padding:2px 0 4px}
.ops-app .lo-disc-ctrl{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.ops-app .lo-disc-seg{display:inline-flex;gap:2px;padding:2px;border:1px solid rgba(190,205,235,.14);border-radius:7px}
.ops-app .lo-disc-seg button{min-width:24px;min-height:24px;padding:0 6px;border:0;border-radius:5px;background:transparent;color:var(--muted);font:600 12px var(--sans);cursor:pointer}
.ops-app .lo-disc-seg button.on{background:rgba(190,205,235,.1);color:var(--paper)}
.ops-app .lo-tot-input{position:relative;display:inline-flex;align-items:center}
.ops-app .lo-tot-input input{width:72px;height:26px;padding:0 20px 0 8px;border:1px solid rgba(190,205,235,.14);border-radius:7px;background:var(--lo-input);color:var(--paper);font:500 13px var(--sans);font-variant-numeric:tabular-nums;text-align:right;outline:0;box-shadow:none}
.ops-app .lo-tot-input input:focus{border-color:var(--gold)}
.ops-app .lo-tot-input span{position:absolute;right:8px;color:var(--muted-2);font-size:12px;pointer-events:none}
.ops-app .lo-tot-input--tax input{width:60px}
.ops-app .lo-tax-label{display:inline-flex;align-items:center;gap:8px}
.ops-app .lo-disc-x{padding:0 4px;border:0;background:transparent;color:var(--muted-2);font-size:15px;cursor:pointer}
.ops-app .lo-disc-x:hover{color:var(--paper)}
/* the discount's optional name, and Save discount on an approved quote */
.ops-app .lo-disc-name{padding:2px 0 6px}
.ops-app .lo-disc-name[hidden],.ops-app .lo-disc-save[hidden]{display:none}
.ops-app .lo-disc-name input{width:100%;height:30px;padding:0 10px;border:1px solid rgba(190,205,235,.14);border-radius:7px;background:var(--lo-input);color:var(--paper);font:500 13px var(--sans);outline:0;box-shadow:none}
.ops-app .lo-disc-name input::placeholder{color:var(--muted-2)}
.ops-app .lo-disc-name input:focus{border-color:var(--gold)}
.ops-app .lo-disc-save{display:flex;justify-content:flex-end;padding:2px 0 8px}
.ops-app .lo-disc-save .lo-btn{min-height:32px;padding:0 14px;font-size:13px}
.ops-app .lo-tot-total{display:flex;align-items:baseline;justify-content:space-between;margin-top:8px;padding:14px 0 4px;border-top:1px solid rgba(190,205,235,.1);font:600 14px var(--sans)}
.ops-app .lo-tot-big{font:700 30px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ops-app .lo-dep{margin-top:14px;padding:12px;border:1px solid rgba(243,210,138,.24);border-radius:9px;background:rgba(243,210,138,.07)}
.ops-app .lo-dep[hidden]{display:none}
.ops-app .lo-dep .lo-tot-row{padding:2px 0 6px;font-size:13px}
.ops-app .lo-dep-top{display:flex;justify-content:space-between;gap:10px;font:600 14px var(--sans)}
.ops-app .lo-dep-amt{color:var(--gold);font:700 15px var(--sans);font-variant-numeric:tabular-nums}
.ops-app .lo-dep-note{margin:6px 0 0;color:var(--muted);font-size:12.5px;line-height:1.45}
.ops-app .lo-btn.lo-bld-send{width:100%;min-height:44px;margin-top:16px;font-size:14.5px}
.ops-app .lo-bld-send[aria-disabled="true"]{opacity:.55}
.ops-app .lo-bld-marksent{display:block;margin:12px auto 0}
.ops-app .lo-bld-info{padding:14px 18px;color:var(--muted);font-size:13.5px;line-height:1.55}
.ops-app .lo-info-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
/* The design box under Terms / Payment (decided with Brendan 2026-09-26): the picture on the quote, tap for big. */
.ops-app .lo-design-pic{display:block;width:100%;padding:0;border:1px solid var(--lo-line);border-radius:10px;overflow:hidden;background:#05080f;cursor:zoom-in}
.ops-app .lo-design-pic[hidden],.ops-app .lo-design-empty[hidden]{display:none}
.ops-app .lo-design-pic img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.ops-app .lo-design-pic:hover{border-color:var(--gold)}
.ops-app .lo-design-empty{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;border:1px dashed var(--lo-line);border-radius:10px;color:var(--muted);font-size:13px}
.ops-app .lo-design-meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:8px;font-size:13px}
.ops-app .lo-design-cap{min-width:0;overflow:hidden;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
.ops-app .lo-design-meta .lo-rec-link{flex:none;color:var(--gold)}
.ops-app .lo-design-sheet .ops-sheet-body{padding:0}
.ops-app .lo-design-stage{display:flex;align-items:center;justify-content:center;height:min(70vh,760px);background:#05080f}
.ops-app .lo-design-stage img{max-width:100%;max-height:100%;object-fit:contain}
.ops-app .lo-design-sheet .foot .lo-design-cap{flex:1 1 auto}
.ops-app .lo-design-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.ops-app .lo-design-opt{display:block;padding:0;border:2px solid var(--lo-line);border-radius:12px;overflow:hidden;background:var(--lo-panel);color:var(--muted);text-align:left;cursor:pointer}
.ops-app .lo-design-opt.is-on{border-color:var(--gold)}
.ops-app .lo-design-opt img,.ops-app .lo-design-none-box{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;object-fit:cover}
.ops-app .lo-design-opt>span:last-child{display:block;padding:7px 9px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){.ops-app .lo-design-stage{height:calc(100dvh - 190px)}}
/* The customer's photos (form uploads and ones we add) and quote-form answers (decided with Brendan 2026-09-27): under Terms, only for us. */
.ops-app .lo-bld-leadparts{display:contents}
.ops-app .lo-photo-del{margin:0 12px 0 auto;align-self:center}
.ops-app .lo-bld-photos .lo-bld-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ops-app .lo-photo-add{color:var(--gold);font-size:13px;font-weight:500}
.ops-app .lo-photo-add-wrap{cursor:pointer}
.ops-app .lo-photo-stage{position:relative}
.ops-app .lo-photo-arrow{position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-top:-18px;padding:0 0 3px;border:0;border-radius:50%;background:rgba(5,8,15,.62);color:#fff;font:400 26px/1 var(--sans);cursor:pointer}
.ops-app .lo-photo-arrow:hover{background:rgba(5,8,15,.85)}
.ops-app .lo-photo-arrow--prev{left:8px}
.ops-app .lo-photo-arrow--next{right:8px}
.ops-app .lo-photo-arrow[hidden],.ops-app .lo-photo-count[hidden],.ops-app .lo-photo-sheet .foot [hidden]{display:none}
.ops-app .lo-photo-count{position:absolute;left:50%;bottom:8px;z-index:1;transform:translateX(-50%);padding:3px 9px;border-radius:999px;background:rgba(5,8,15,.62);color:#fff;font-size:12px;font-variant-numeric:tabular-nums;pointer-events:none}
.ops-app .lo-photo-trash{position:absolute;top:8px;right:8px;z-index:1;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:rgba(5,8,15,.62);color:#fff;cursor:pointer}
.ops-app .lo-photo-trash:hover{background:#b3261e}
.ops-app .lo-photo-drop{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;margin:0;padding:0;border:1px dashed var(--lo-line);border-radius:10px;background:none;cursor:pointer;color:var(--gold);font:600 14px var(--sans)}
.ops-app .lo-photo-drop small{color:var(--muted);font-size:12px;font-weight:400}
.ops-app .lo-photo-drop:hover{border-color:var(--gold)}
.ops-app .lo-bld-photos.is-drop{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset}
.ops-app .lo-bld-photos.is-uploading [data-photo-body]{opacity:.55;pointer-events:none}
.ops-app .lo-bld-photos .lo-design-meta .lo-rec-link{flex:none;color:var(--gold)}
.ops-app .lo-bld-photos .lo-design-meta [hidden]{display:none}
.ops-app .lo-photo-broken{flex-direction:column;gap:6px;text-align:center}
.ops-app .lo-photo-removed{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.ops-app .lo-photo-removed[hidden]{display:none}
.ops-app .lo-photo-removed-item{display:flex;flex-direction:column;gap:4px;align-items:center;font-size:12.5px}
.ops-app .lo-photo-removed-item img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--lo-line);border-radius:8px;opacity:.6}
.ops-app .lo-photo-sheet .lo-photo-arrow{width:44px;height:44px;margin-top:-22px;font-size:32px}
.ops-app .lo-bld-asked{padding:14px 18px;font-size:13.5px;line-height:1.5}
.ops-app .lo-bld-asked .lo-bld-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ops-app .lo-bld-asked dl{margin:8px 0 0}
.ops-app .lo-bld-asked dt{margin-top:8px;color:var(--muted);font-size:12px}
.ops-app .lo-bld-asked dd{margin:1px 0 0;overflow-wrap:anywhere}
.ops-app .lo-info-row[hidden]{display:none}
/* Online payments switch (decided with Brendan 2026-09-26): its row in the Terms / Payment card, and a short note. */
.ops-app .lo-bld-online{padding:12px 18px 14px}
.ops-app .lo-online-row{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--paper);font-size:14px;font-weight:600}
.ops-app .lo-online-row .ops-toggle{padding:2px 0;margin:0 0 0 auto}
.ops-app .lo-online-note{margin:4px 0 0;color:var(--muted);font-size:12.5px;line-height:1.45}
.ops-app .lo-info-row > span:last-child,
.ops-app .lo-info-row > .lo-rec-link{color:var(--paper);text-align:right}
.ops-app .lo-info-row > .lo-rec-link{color:var(--gold)}
/* the saved document's cards (share, progress, invoices / payments, more) */
.ops-app .lo-bld .ib3-extras{display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
/* builder.css pads the old canvas with !important and its cards through .content .ib3-extras section.ib3-card. */
.ops-app .lo-bld .ib3-extras-canvas{display:block;margin:0;padding:0!important;background:none}
.ops-app .lo-bld .ib3-extras section.ib3-card{margin:0;padding:14px 18px 16px;border:1px solid var(--lo-line);border-radius:12px;background:var(--lo-panel);box-shadow:none}
.ops-app .lo-bld .ib3-card-h{margin:0 0 10px;color:var(--paper);font:600 14px var(--sans);letter-spacing:0;text-transform:none}
.ops-app .lo-bld .ib3-card-actions{display:flex;flex-direction:column;gap:8px}
.ops-app .lo-bld .ib3-card-btn,
.ops-app .lo-bld .ib3-card-pdf .btn{display:inline-flex;align-items:center;justify-content:center;width:100%;height:auto;min-height:38px;padding:0 14px;border:1px solid rgba(190,205,235,.22);border-radius:8px;background:transparent;color:var(--paper);font:600 13.5px var(--sans);text-decoration:none;box-shadow:none;cursor:pointer}
.ops-app .lo-bld .ib3-card-btn:hover,
.ops-app .lo-bld .ib3-card-pdf .btn:hover{background:rgba(190,205,235,.06)}
.ops-app .lo-bld .ib3-card-btn.ib3-primary{border:0;background:var(--gold);color:var(--lo-on-gold)}
.ops-app .lv .lo-bld a.ib3-card-btn.ib3-primary:not(#lv){color:var(--lo-on-gold)}
.ops-app .lo-bld .ib3-card-btn.ib3-primary:hover{background:var(--gold-soft)}
.ops-app .lo-bld .ib3-card-btn:disabled{opacity:.45;cursor:not-allowed}
.ops-app .lo-bld .side-note{margin:8px 0 0;color:var(--muted);font-size:12.5px;line-height:1.45}
/* Share (redesigned with Brendan 2026-09-26): grouped by what's shared, three small actions each, then View and PDF. */
.ops-app .lo-bld .lo-share-group{padding:12px 0 14px;border-top:1px solid var(--lo-line-row)}
.ops-app .lo-bld .lo-share .ib3-card-h + .lo-share-group{padding-top:0;border-top:0}
.ops-app .lo-bld .lo-share-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.ops-app .lo-bld .lo-share-title{color:var(--paper);font:600 13.5px var(--sans)}
.ops-app .lo-bld .lo-share-sub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font:11.5px var(--mono)}
.ops-app .lo-bld a.lo-share-sub--link,.ops-app .lv .lo-bld a.lo-share-sub--link:not(#lv){color:var(--muted);text-decoration:none}
.ops-app .lo-bld a.lo-share-sub--link:hover{color:var(--gold)}
.ops-app .lo-bld .lo-share-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ops-app .lo-bld .lo-share-act,
.ops-app .lv .lo-bld a.lo-share-act:not(#lv){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:56px;padding:8px 4px;border:1px solid rgba(190,205,235,.14);border-radius:10px;background:rgba(190,205,235,.03);color:var(--paper);font:500 12px/1.2 var(--sans);text-align:center;text-decoration:none;cursor:pointer;transition:background-color .12s,border-color .12s,transform .12s}
.ops-app .lo-bld .lo-share-act svg{color:var(--gold);flex:none}
.ops-app .lo-bld .lo-share-act:hover{background:rgba(190,205,235,.07);border-color:rgba(190,205,235,.26)}
.ops-app .lo-bld .lo-share-act:active{transform:scale(.97)}
.ops-app .lo-bld .lo-share-act:focus-visible,.ops-app .lo-bld .lo-share-more:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ops-app .lo-bld .lo-share-act.is-copied,.ops-app .lo-bld .lo-share-act.is-copied svg{color:var(--status-ok-solid)}
/* Email without an email address (or on an approved quote): shown, not clickable, with the reason as its tooltip. */
.ops-app .lo-bld .lo-share-act:disabled{opacity:.4;cursor:not-allowed}
.ops-app .lo-bld .lo-share-form{display:contents}
.ops-app .lo-bld .lo-share-foot{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-top:12px;border-top:1px solid var(--lo-line-row)}
.ops-app .lo-bld .lo-share-more,
.ops-app .lv .lo-bld a.lo-share-more:not(#lv){display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 10px;border:1px solid rgba(190,205,235,.14);border-radius:9px;background:transparent;color:var(--paper);font:500 12.5px var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap}
.ops-app .lo-bld .lo-share-more svg{color:var(--muted);flex:none}
.ops-app .lo-bld .lo-share-more:hover{background:rgba(190,205,235,.06)}
@media (max-width:760px){.ops-app .lo-bld .lo-share-act,.ops-app .lv .lo-bld a.lo-share-act:not(#lv){min-height:64px;font-size:12.5px}.ops-app .lo-bld .lo-share-more,.ops-app .lv .lo-bld a.lo-share-more:not(#lv){min-height:44px}}
.ops-app .lo-bld .ib3-card .timeline{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.ops-app .lo-bld .ib3-card .timeline li{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted-2);font-size:13.5px}
.ops-app .lo-bld .ib3-card .timeline li.done{color:var(--paper)}
.ops-app .lo-bld .ib3-card .timeline li::before{content:"";flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:rgba(190,205,235,.2)}
.ops-app .lo-bld .ib3-card .timeline li.done::before{background:var(--status-ok-solid)}
.ops-app .lo-bld .ib3-card .timeline li span{flex:1}
.ops-app .lo-bld .ib3-card .timeline time{color:var(--muted);font:12px var(--mono)}
.ops-app .lo-bld .side-doc{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--lo-line-row);color:var(--paper)}
.ops-app .lo-bld .side-doc:first-of-type{border-top:0}
.ops-app .lo-bld .side-doc span{flex:1;font:600 13.5px var(--sans)}
.ops-app .lo-bld .side-doc small{color:var(--muted);font-weight:500}
.ops-app .lo-bld .side-doc strong{font:500 13px var(--mono)}
.ops-app .lo-bld .ib3-card-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px}
.ops-app .lo-bld .side-more summary{color:var(--lo-label);font:600 13px var(--sans);cursor:pointer}
.ops-app .lo-bld .side-more form{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.ops-app .lo-bld .side-more label{display:flex;flex-direction:column;gap:6px;color:var(--lo-label);font:600 12.5px var(--sans)}
.ops-app .lo-bld .side-more label.check{flex-direction:row;align-items:center;font-weight:500}
.ops-app .lo-bld .side-more input[type=text]{min-height:40px;padding:0 11px;border:1px solid rgba(190,205,235,.14);border-radius:8px;background:var(--lo-input);color:var(--paper);font:14px var(--sans)}
.ops-app .lo-bld .ib3-card .table{width:100%;border-collapse:collapse;font-size:13px}
.ops-app .lo-bld .ib3-card .table th{padding:0 0 6px;color:var(--muted);font:500 11px var(--mono);letter-spacing:.06em;text-align:left;text-transform:uppercase}
.ops-app .lo-bld .ib3-card .table td{padding:8px 0;border-top:1px solid var(--lo-line-row);vertical-align:top}
.ops-app .lo-bld .ib3-card .table .num{text-align:right}
.ops-app .lo-bld .ib3-text-note{display:none}
/* the Add line list and other builder pickers (SearchableCombobox with className lo-combo) */
.bc-combobox-portal.lo-combo{overflow:hidden;display:flex;flex-direction:column;padding:0;border:1px solid rgba(190,205,235,.2);border-radius:12px;background:#14213b;box-shadow:0 18px 50px rgba(0,0,0,.5);color:#f4efe4;font-family:"Hanken Grotesk",system-ui,sans-serif}
.bc-combobox-portal.lo-combo .bc-combobox-search{display:flex;align-items:center;gap:9px;height:42px;margin:10px;padding:0 12px;border:1px solid #f3d28a;border-radius:9px;background:#0c1527;color:#9fb0c8}
.bc-combobox-portal.lo-combo .bc-combobox-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#f4efe4;font:14px "Hanken Grotesk",system-ui,sans-serif;box-shadow:none}
.bc-combobox-portal.lo-combo .bc-combobox-search kbd{display:none}
.bc-combobox-portal.lo-combo .bc-combobox-menu{flex:1;min-height:0;overflow:auto;padding:4px 6px 8px;border-top:1px solid rgba(190,205,235,.1)}
.bc-combobox-portal.lo-combo .bc-combobox-option{display:flex;align-items:center;gap:12px;width:100%;min-height:38px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:#f4efe4;text-align:left;cursor:pointer}
.bc-combobox-portal.lo-combo .bc-combobox-option.is-active{background:rgba(243,210,138,.08)}
.bc-combobox-portal.lo-combo .lo-combo-copy{flex:1;min-width:0}
.bc-combobox-portal.lo-combo .lo-combo-name{display:block;overflow:hidden;font:600 14px "Hanken Grotesk",system-ui,sans-serif;text-overflow:ellipsis;white-space:nowrap}
.bc-combobox-portal.lo-combo .lo-combo-sub{display:block;margin-top:1px;overflow:hidden;color:#9fb0c8;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.bc-combobox-portal.lo-combo .lo-combo-price{font:600 14px "Hanken Grotesk",system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.bc-combobox-portal.lo-combo .lo-combo-price small{color:#6f819b;font-size:11px;font-weight:500}
.bc-combobox-portal.lo-combo .bc-combobox-empty{padding:16px 12px;color:#9fb0c8;font-size:13.5px;text-align:center}
.bc-combobox-portal.lo-combo .bc-combobox-footer{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid rgba(190,205,235,.1);background:transparent}
.bc-combobox-portal.lo-combo .bc-combobox-custom{flex:1;min-height:38px;padding:0 12px;border-radius:7px;color:#f3d28a;font:600 13.5px "Hanken Grotesk",system-ui,sans-serif}
.bc-combobox-portal.lo-combo .bc-combobox-custom.is-active,
.bc-combobox-portal.lo-combo .bc-combobox-custom:hover{background:rgba(243,210,138,.08)}
.bc-combobox-portal.lo-combo .bc-combobox-plus{color:#f3d28a}
.bc-combobox-portal.lo-combo .lo-combo-manage{flex:none;min-height:38px;padding:0 10px;color:#9fb0c8;font:500 13px/38px "Hanken Grotesk",system-ui,sans-serif;text-decoration:none}
.bc-combobox-portal.lo-combo .lo-combo-manage:hover{color:#f4efe4}

/* ============================================================
   PHONE
   ============================================================ */
@media (max-width:760px){
  .ops-app .lo-h1{font-size:28px}
  .ops-app .lo-tab{min-height:44px}
  .ops-app .lo-btn{min-height:44px}
  .ops-app .lo-search{max-width:none;height:44px}
  .ops-app .lo-search input{font-size:16px}
  .ops-app .lo-toolbar .v3-filter-trigger{height:44px;min-height:44px}
  .ops-app .lo-list-head{display:none}
  .ops-app .lo-iconbtn{width:44px;height:44px}
  .ops-app .lo-cal-cell{min-height:66px}
  .ops-app .lo-crew--card{min-height:44px}
  .ops-app button.lo-datebtn{min-height:44px}
  .ops-app .lo-job-detail{grid-template-columns:1fr}
  .ops-app .lo-today{display:block}
  .ops-app .lo-qrow-main{min-height:44px}
  .ops-app .lo-btn.lo-next-cta{min-height:44px}
  .ops-app .lo-rec-actions .lo-btn{min-height:44px}
  .ops-app .lo-rec-doc-pill{flex-basis:auto}
  .ops-app .lo-rec-doc-total{flex-basis:auto;margin-left:auto}
  .ops-app .lo-menu-pop > a,
  .ops-app .lo-menu-pop > button{min-height:44px}
  .ops-app .lo-rec-form .field{font-size:16px}
  .ops-app .lo-bld-title{font-size:28px;line-height:30.2px}
  .ops-app .lo-bld-actions .lo-btn{min-height:44px}
  .ops-app .lo-btn.lo-bld-more{width:44px}
  .ops-app .lo-bld-scrim:not([hidden]){display:block;position:fixed;inset:0;z-index:90;background:rgba(3,6,14,.55)}
  .ops-app .lo-bld-menu{position:fixed;top:auto;right:0;bottom:0;left:0;z-index:91;width:auto;padding:8px 8px calc(12px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0}
  .ops-app .lo-bld-menu > button{min-height:48px;font-size:15px}
  .ops-app .lo-hide-phone{display:none}
  /* A line on a phone: the product and its description with × beside it, then grip, quantity, rate, amount. */
  .ops-app .lo-lines-head{display:none}
  .ops-app .lo-line-item{flex-basis:calc(100% - 52px);order:1}
  .ops-app .lo-line-x{order:2;flex-basis:44px;height:44px;margin-top:0}
  .ops-app .lo-line-grip{position:static;order:3;flex:0 0 28px;height:44px;opacity:1}
  .ops-app .lo-qty{order:4;flex-basis:108px;width:108px;height:44px}
  .ops-app .lo-qty-btn{flex-basis:34px;width:34px}
  .ops-app .lo-line-rate{order:5;flex:1 1 70px;width:auto;min-width:0;min-height:44px}
  .ops-app .lo-line-amt{order:6;flex:0 0 auto;min-width:72px;line-height:44px}
  .ops-app .lo-line--subject .lo-line-grip{order:0}
  .ops-app .lo-line-name,
  .ops-app .lo-line-name-input{min-height:44px}
  .ops-app :is(.lo-bld,.lo-cust-pop) :is(input:not([type=hidden]),textarea,select){font-size:16px}
  .ops-app .lo-bld input.lo-bld-title{font-size:28px;line-height:30.2px}
  .ops-app .lo-cust-pop{left:0;right:0;width:auto;max-width:none;margin:0 8px}
  .ops-app .lo-add-line{min-height:44px}
  .ops-app .lo-btn.lo-bld-send{min-height:48px}
  .ops-app .lo-bld .ib3-card-btn,
  .ops-app .lo-bld .ib3-card-pdf .btn{min-height:44px}
}

/* ---------------- Messages (v5 §8) ---------------- */
/* Two panes in one 640px panel: conversations (320px) and the open thread. Phones show one at a time. */
.ops-app .lo-msgs .lo-head{margin-bottom:18px}
.ops-app .lo-msg-panel{display:flex;height:640px;min-width:0;overflow:hidden;border:1px solid var(--lo-line);border-radius:12px;background:var(--lo-panel)}
/* On computers the panel fills the screen below the header (no page scroll on a 768px-tall laptop). */
@media (min-width:761px){.ops-app .lo-msg-panel{height:max(420px,calc(100dvh - 195px))}}
.ops-app .lo-msg-listpane{display:flex;flex:0 0 320px;flex-direction:column;min-width:0;border-right:1px solid var(--lo-line)}
.ops-app .lo-msg-tools{display:flex;gap:8px;padding:12px;border-bottom:1px solid rgba(190,205,235,.08)}
.ops-app .lo-msgs input.lo-msg-search{flex:1;width:100%;min-width:0;height:auto;min-height:40px;margin:0;padding:0 12px;border:1px solid rgba(190,205,235,.14);border-radius:8px;background:var(--lo-input);box-shadow:none;color:var(--paper);font:14px var(--sans);outline:0}
.ops-app .lo-msgs input.lo-msg-search:focus{border-color:var(--gold)}
.ops-app .lo-msgs input.lo-msg-search::placeholder{color:var(--muted-2)}
.ops-app .lo-msg-filter{flex:none}
.ops-app .lo-msg-filter-btn{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(190,205,235,.14);border-radius:8px;color:var(--muted)}
.ops-app .lo-msg-filter-btn:hover,.ops-app .lo-msg-filter[open] > .lo-msg-filter-btn{background:rgba(190,205,235,.06);color:var(--paper)}
.ops-app .lo-msg-filter-dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.ops-app .lo-msg-filter-dot[hidden]{display:none}
.ops-app .lo-msg-filter .lo-menu-pop{min-width:200px}
.ops-app .lo-msg-filter .lo-menu-pop > button{gap:8px}
.ops-app .lo-msg-filter .lo-menu-pop > button.is-active{color:var(--gold)}
.ops-app .lo-msg-filter .lo-menu-pop > button.is-active::after{margin-left:auto;content:"✓"}
.ops-app .lo-msg-filter-count{color:var(--muted);font:500 12px var(--mono)}
.ops-app .lo-msg-list{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.ops-app .lo-msg-row{display:flex;gap:12px;width:100%;margin:0;padding:14px;border:0;border-bottom:1px solid rgba(190,205,235,.07);border-left:2px solid transparent;border-radius:0;background:transparent;color:var(--paper);font-family:var(--sans);text-align:left;cursor:pointer}
.ops-app .lo-msg-row:hover{background:rgba(190,205,235,.04)}
.ops-app .lo-msg-row.is-selected{border-left-color:var(--gold);background:rgba(243,210,138,.06)}
.ops-app .lo-msg-row[hidden]{display:none}
.ops-app .lo-msg-row:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.ops-app .lo-msg-row-main{flex:1;min-width:0}
.ops-app .lo-msg-row-top{display:flex;justify-content:space-between;gap:8px}
.ops-app .lo-msg-row-name{overflow:hidden;font:600 14px var(--sans);text-overflow:ellipsis;white-space:nowrap}
.ops-app .lo-msg-row.is-unread .lo-msg-row-name{font-weight:700}
.ops-app .lo-msg-row-time{color:var(--muted);font:11.5px var(--mono);white-space:nowrap}
.ops-app .lo-msg-row-doc{display:block;margin-top:2px;color:var(--muted);font:11.5px var(--mono)}
.ops-app .lo-msg-row-bottom{display:flex;align-items:center;gap:8px;margin-top:4px}
.ops-app .lo-msg-row-preview{flex:1;min-width:0;overflow:hidden;color:var(--muted);font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.ops-app .lo-msg-row.is-unread .lo-msg-row-preview{color:var(--paper)}
.ops-app .lo-msg-badge{flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--badge-bg);color:var(--badge-text);font:600 11px/18px var(--mono);text-align:center}
.ops-app .lo-msg-badge[hidden]{display:none}
.ops-app .lo-msg-noresults{margin:0;padding:16px 14px;color:var(--muted);font-size:13.5px}
.ops-app .lo-msg-noresults[hidden]{display:none}
/* thread */
.ops-app .lo-msg-threadpane{display:flex;flex:1;flex-direction:column;min-width:0}
.ops-app .lo-msg-thread{display:flex;flex:1;flex-direction:column;min-height:0}
.ops-app .lo-msg-thread[hidden]{display:none}
.ops-app .lo-msg-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(190,205,235,.08)}
.ops-app .lo-msg-back{display:none;flex:none;align-items:center;justify-content:center;width:36px;height:44px;margin:0;padding:0;border:0;background:transparent;color:var(--paper);font-size:20px;cursor:pointer}
.ops-app .lo-msg-who{flex:1;min-width:0}
.ops-app .lo-msg-who strong{display:block;overflow:hidden;font:600 15px var(--sans);text-overflow:ellipsis;white-space:nowrap}
.ops-app .lv a.lo-msg-docline:not(#lv){display:block;margin-top:2px;color:var(--muted);font:12px var(--mono)}
.ops-app .lv a.lo-msg-docline:not(#lv):hover{color:var(--gold)}
.ops-app .lo-btn.lo-msg-cust{min-height:36px;padding:0 12px;font-size:13px;white-space:nowrap}
.ops-app .lo-msg-cust[hidden]{display:none}
.ops-app .lo-msg-body{display:flex;flex:1;flex-direction:column;min-height:0}
.ops-app .lo-msg-log{display:flex;flex:1;flex-direction:column;gap:12px;min-height:0;overflow:auto;padding:18px 16px;overscroll-behavior:contain}
.ops-app .lo-msg-none{margin:auto;color:var(--muted);font-size:13.5px}
.ops-app .lo-msg-none[hidden]{display:none}
.ops-app .lo-msg{display:flex;flex-direction:column;align-items:flex-start}
.ops-app .lo-msg.is-mine{align-items:flex-end}
.ops-app .lo-msg-stack{display:flex;flex-direction:column;align-items:inherit;gap:8px;max-width:78%;min-width:0}
.ops-app .lo-msg-bubble{padding:10px 13px;border:1px solid rgba(190,205,235,.1);border-radius:12px;background:var(--lo-bubble);color:var(--paper);font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;text-wrap:pretty}
.ops-app .lo-msg.is-mine .lo-msg-bubble,
.ops-app .lo-msg.is-mine .lo-msg-file{border-color:rgba(243,210,138,.28);background:rgba(243,210,138,.1)}
.ops-app .lo-msg-photo{display:block;width:240px;height:180px;overflow:hidden;border:1px solid rgba(190,205,235,.1);border-radius:10px;background:var(--lo-bubble)}
.ops-app .lo-msg.is-mine .lo-msg-photo{border-color:rgba(243,210,138,.28)}
.ops-app .lo-msg-photo img{display:block;width:100%;height:100%;object-fit:cover}
.ops-app .lv a.lo-msg-file:not(#lv){display:flex;align-items:center;gap:10px;min-width:200px;max-width:100%;padding:9px 12px;border:1px solid rgba(190,205,235,.1);border-radius:10px;background:var(--lo-bubble);color:var(--paper)}
.ops-app .lo-msg-file-icon{display:flex;flex:0 0 32px;align-items:center;justify-content:center;width:32px;height:32px;border-radius:7px;background:rgba(190,205,235,.1);color:var(--gold)}
.ops-app .lo-msg-file-copy{min-width:0}
.ops-app .lo-msg-file-name{display:block;max-width:180px;overflow:hidden;font:600 13.5px var(--sans);text-overflow:ellipsis;white-space:nowrap}
.ops-app .lo-msg-file-size{display:block;color:var(--muted);font:11.5px var(--mono)}
.ops-app .lo-msg-time{display:flex;align-items:center;gap:4px;margin-top:5px;color:var(--muted);font:11px var(--mono)}
/* A message still sending (instant, 2026-09-26). */
.ops-app .lo-msg.is-pending{opacity:.72}
/* A material, payment or other change still saving (instant, 2026-09-26). */
.ops-app .to-item.is-pending,.ops-app .to-card.is-pending{opacity:.72}
.ops-app .lo-pay-row.is-pending,.ops-app .lo-pay-card.is-pending,.ops-app tr.is-pending,.ops-app .lo-tot-less.is-pending{opacity:.72}
.ops-app .lo-msg-sending-files{font-size:13px;color:var(--muted)}
.ops-app .lo-msg-del{display:flex;align-items:center;justify-content:center;width:22px;height:22px;margin:-4px 0;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);opacity:0;cursor:pointer;transition:opacity .12s}
.ops-app .lo-msg-del svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ops-app .lo-msg:hover .lo-msg-del,.ops-app .lo-msg-del:focus-visible{opacity:1}
.ops-app .lo-msg-del:hover{background:var(--status-bad-tint);color:var(--status-bad-text)}
.ops-app .lo-msg-del:disabled{opacity:.5;cursor:wait}
@media (hover:none){
  .ops-app .lo-msg-del{visibility:hidden;width:32px;height:32px;margin:-9px -4px}
  .ops-app .lo-msg.is-picked .lo-msg-del{visibility:visible;opacity:1}
}
/* attachments waiting to send, then the composer */
.ops-app .lo-msg-pending{display:flex;flex-wrap:wrap;gap:8px;padding:12px 12px 0;border-top:1px solid rgba(190,205,235,.08)}
.ops-app .lo-msg-pending[hidden]{display:none}
.ops-app .lo-msgs .doc-message-pending-file{display:flex;align-items:center;gap:8px;min-width:0;max-width:240px;padding:5px 6px 5px 5px;border:1px solid rgba(190,205,235,.14);border-radius:9px;background:var(--lo-bubble)}
.ops-app .lo-msgs .doc-message-pending-thumb,
.ops-app .lo-msgs .doc-message-pending-icon{display:flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:6px;background:rgba(190,205,235,.1);color:var(--gold);object-fit:cover}
.ops-app .lo-msgs .doc-message-pending-copy{display:block;min-width:0}
.ops-app .lo-msgs .doc-message-pending-copy strong{display:block;max-width:140px;overflow:hidden;font:600 12.5px var(--sans);text-overflow:ellipsis;white-space:nowrap}
.ops-app .lo-msgs .doc-message-pending-copy small{display:block;color:var(--muted);font:11px var(--mono)}
.ops-app .lo-msgs .doc-message-remove-file{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:16px;cursor:pointer}
.ops-app .lo-msgs .doc-message-remove-file:hover{background:transparent;color:var(--status-bad-text)}
.ops-app .lo-msg-error{margin:12px 12px 0;padding:8px 10px;border:1px solid rgba(255,69,58,.3);border-radius:8px;background:var(--status-bad-tint);color:var(--status-bad-text);font-size:13px}
.ops-app .lo-msg-error[hidden]{display:none}
.ops-app .lo-msg-compose{display:flex;align-items:flex-end;gap:8px;padding:12px;border-top:1px solid rgba(190,205,235,.08)}
.ops-app .lo-msg-form:has(> .lo-msg-pending:not([hidden])) .lo-msg-compose,
.ops-app .lo-msg-form:has(> .lo-msg-error:not([hidden])) .lo-msg-compose{border-top:0}
.ops-app .lo-msg-attach{display:flex;flex:0 0 44px;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:1px solid rgba(190,205,235,.18);border-radius:8px;background:transparent;color:var(--paper);cursor:pointer}
.ops-app .lo-msg-attach:hover{border-color:var(--gold);color:var(--gold)}
.ops-app .lo-msgs textarea[data-message-input]{flex:1;min-width:0;height:auto;min-height:0;margin:0;padding:10px 12px;border:1px solid rgba(190,205,235,.14);border-radius:8px;background:var(--lo-input);box-shadow:none;color:var(--paper);font:14px/1.45 var(--sans);resize:none;outline:0}
.ops-app .lo-msgs textarea[data-message-input]:focus{border-color:var(--gold)}
.ops-app .lo-msgs textarea[data-message-input]::placeholder{color:var(--muted-2)}
.ops-app .lo-btn.lo-msg-send{min-height:44px;padding:0 16px;font-size:14px}
.ops-app .lo-btn.lo-msg-send:disabled{opacity:.5;cursor:default}
@media (max-width:760px){
  /* The panel fills the screen between the heading and the tab bar; one pane at a time. */
  .ops-app .content.lo-msgs-page{display:flex;flex-direction:column;min-height:100%}
  .ops-app .lo-msgs{display:flex;flex:1;flex-direction:column;min-height:0}
  .ops-app .lo-msg-panel{flex:1;height:auto;min-height:420px}
  .ops-app .lo-msg-listpane{flex:1 1 auto;border-right:0}
  .ops-app .lo-msg-threadpane,
  .ops-app .lo-msg-panel.has-selection .lo-msg-listpane{display:none}
  .ops-app .lo-msg-panel.has-selection .lo-msg-threadpane{display:flex}
  .ops-app .lo-msg-panel:not(.has-selection) .lo-msg-row.is-selected{border-left-color:transparent;background:transparent}
  .ops-app .lo-msg-head{gap:8px;padding:0 12px 0 4px;min-height:60px}
  .ops-app .lo-msg-back{display:flex}
  .ops-app .lo-btn.lo-msg-cust{min-height:44px}
  .ops-app .lo-msg-filter-btn{width:44px;height:44px}
  .ops-app .lo-msgs input.lo-msg-search{min-height:44px;font-size:16px}
  .ops-app .lo-msgs textarea[data-message-input]{font-size:16px}
  .ops-app .lo-msg-log{padding:16px 12px}
  .ops-app .lo-msg-photo{width:min(240px,100%);height:auto;aspect-ratio:4/3}
}

/* Team notes and files (decided with Brendan 2026-09-24): a customer's Notes tab and a job's popup. */
.ops-app .lo-notes{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.ops-app .lo-note-form{display:flex;flex-direction:column;gap:8px}
.ops-app .lo-note-text{min-height:64px;resize:vertical}
.ops-app .lo-note-form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ops-app .lo-note-form-foot .grow{flex:1}
.ops-app .lo-note-attach{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.ops-app .lo-note-attach svg{width:16px;height:16px;flex:none}
.ops-app .lo-note-chosen{min-width:0;overflow:hidden;color:var(--muted);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
.ops-app .lo-note-list{display:flex;flex-direction:column}
.ops-app .lo-note{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-top:1px solid var(--lo-line)}
.ops-app .lo-note:first-child{border-top:0;padding-top:4px}
.ops-app .lo-note-head{display:flex;align-items:center;gap:10px;min-width:0}
.ops-app .lo-note-who{display:flex;flex-direction:column;flex:1;min-width:0}
.ops-app .lo-note-who strong{color:var(--paper);font:600 13.5px var(--sans)}
.ops-app .lo-note-meta{overflow:hidden;color:var(--muted);font:11.5px var(--mono);text-overflow:ellipsis;white-space:nowrap}
.ops-app .lo-note-on{color:var(--gold-soft)}
.ops-app .lo-note-actions{display:flex;gap:2px;flex:none}
.ops-app .lo-note-act{padding:4px 8px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:500 12.5px var(--sans);cursor:pointer}
.ops-app .lo-note-act:hover{background:rgba(190,205,235,.08);color:var(--paper)}
.ops-app .lo-note-act--danger:hover{background:var(--status-bad-bg,rgba(240,110,110,.12));color:var(--status-bad-text,#f08c8c)}
.ops-app .lo-note-body{color:var(--paper);font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
/* A note still saving (instant, 2026-09-26): shown at once, a little quieter until the server has it. */
.ops-app .lo-note.is-pending{opacity:.72}
.ops-app .lo-note-uploading{margin-top:6px;font-size:13px;color:var(--muted)}
.ops-app .lo-note-editor{display:flex;flex-direction:column;gap:8px}
.ops-app .lo-note-files{display:flex;flex-wrap:wrap;gap:8px}
.ops-app .lo-note-photo{display:block;width:120px;height:90px;overflow:hidden;border:1px solid rgba(190,205,235,.1);border-radius:10px;background:var(--lo-bubble)}
.ops-app .lo-note-photo img{display:block;width:100%;height:100%;object-fit:cover}
.ops-app a.lo-note-doc{display:flex;align-items:center;gap:10px;min-width:180px;max-width:100%;padding:8px 12px;border:1px solid rgba(190,205,235,.1);border-radius:10px;background:var(--lo-bubble);color:var(--paper);text-decoration:none}
.ops-app .lo-note-doc-ext{display:flex;flex:0 0 36px;align-items:center;justify-content:center;height:32px;border-radius:7px;background:rgba(190,205,235,.1);color:var(--gold);font:600 10.5px var(--mono)}
.ops-app .lo-note-doc-copy{display:flex;flex-direction:column;min-width:0}
.ops-app .lo-note-doc-copy strong{max-width:200px;overflow:hidden;font:600 13px var(--sans);text-overflow:ellipsis;white-space:nowrap}
.ops-app .lo-note-doc-copy small{color:var(--muted);font:11.5px var(--mono)}
.ops-app .lo-note-empty,.ops-app .lo-note-loading{margin:4px 0;padding:0}
.ops-app .lo-note-allfiles{display:flex;flex-direction:column;gap:10px;margin-top:12px}
/* A job's popup: its notes and files under the details. */
.ops-app .lo-job-notes{margin-top:18px;padding-top:14px;border-top:1px solid var(--lo-line)}
.ops-app .lo-job-notes-title{margin:0;color:var(--paper);font:600 14px var(--sans)}
/* In Progress jobs open the job popup: the tap area is a button that looks like the text it was. */
.ops-app button.lo-ip-btn{padding:0;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer}
@media (max-width:760px){.ops-app .lo-note-photo{width:calc(33.33% - 6px);height:auto;aspect-ratio:4/3}}
/* A customer's notes and messages (decided with Brendan 2026-09-25). Overview: the write box, the 3 newest notes
   and "All notes (N)". Notes & activity: Notes and Files on the left, Messages and Activity on the right; on a
   narrow screen one column in the order Notes, Messages, Files, Activity. */
.ops-app .lo-rec-notes-card .lo-notes{margin-top:10px}
.ops-app .lo-note-more{align-self:flex-start}
.ops-app .lo-note-more[hidden]{display:none}
.ops-app .lo-note-files-empty{margin:12px 0 0;padding:0}
.ops-app .lo-note-files-empty[hidden]{display:none}
.ops-app .lo-rec-notes-wrap{container-type:inline-size}
.ops-app .lo-rec-notes-tab{display:flex;flex-direction:column;gap:16px}
.ops-app .lo-rec-notes-tab > .lo-rec-col{display:contents}
.ops-app .lo-rec-n-notes{order:1}
.ops-app .lo-rec-n-msgs{order:2}
.ops-app .lo-rec-n-files{order:3}
.ops-app .lo-rec-n-activity{order:4}
@container (min-width:720px){
  .ops-app .lo-rec-notes-tab{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .ops-app .lo-rec-notes-tab > .lo-rec-col{display:flex}
}
.ops-app .lo-rec-conv-count{padding:0 8px;border-radius:9px;background:var(--badge-bg);color:var(--badge-text);font:600 11px/18px var(--mono);white-space:nowrap}
.ops-app .lo-rec-conv-count[hidden]{display:none}
.ops-app .lo-rec-convs{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.ops-app .lo-rec-convs-empty{margin:10px 0 0;padding:0}
.ops-app .lo-rec-conv{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid rgba(190,205,235,.1);border-radius:10px}
.ops-app .lo-rec-conv-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 12px;border-bottom:1px solid rgba(190,205,235,.08)}
.ops-app .lo-rec-conv-head .grow{flex:1}
.ops-app .lv a.lo-rec-conv-doc:not(#lv){color:var(--gold);font:600 13px var(--sans);text-decoration:none}
.ops-app .lv a.lo-rec-conv-doc:not(#lv):hover{color:var(--gold-soft)}
.ops-app .lo-rec-conv-title{min-width:0;overflow:hidden;color:var(--muted);font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.ops-app .lo-rec-conv .lo-msg-body{flex:none}
.ops-app .lo-rec-conv .lo-msg-log{flex:none;max-height:360px;padding:14px 12px}
.ops-app .lo-rec-conv .lo-msg-none{margin:14px 12px}
.ops-app .lo-rec-conv .lo-msg-photo{width:200px;height:150px}
@media (max-width:760px){.ops-app .lo-rec-conv .lo-msg-photo{width:160px;height:120px}}
/* An open service request on the customer page (decided with Brendan 2026-09-25). */
.ops-app .lo-rec-service{margin:12px 0 4px}
.ops-app .lo-rec-service p{margin:6px 0 0;white-space:normal}
/* Photos sent with a request from their Light Guys page (decided with Brendan 2026-09-25). */
.ops-app .lo-rec-work-photos{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ops-app .lo-rec-work-photos img{width:72px;height:72px;border-radius:8px;object-fit:cover;border:1px solid var(--lo-line)}
/* The customer's gate code and referrals on their contact line (decided with Brendan 2026-09-25). */
.ops-app .lo-rec-contact .lo-rec-gate{color:var(--paper)}
.ops-app .lv .lo-rec-contact a.lo-rec-ref:not(#lv),.ops-app .lo-rec-contact span.lo-rec-ref{color:var(--gold)}
/* Dates in the app's clear sans, Hanken Grotesk (decided with Brendan 2026-09-25): wherever Light Ops shows a date or
   a time (the date tiles and date buttons, list and card dates, ages, activity, notes, messages, notifications, the
   calendar and the date popup), with even-width lining figures. Labels, numbers and money keep their own fonts. */
.ops-app .lo-dateblock-mon{font:600 10.5px var(--sans);letter-spacing:.08em}
.ops-app .lo-dateblock-day{font:600 21px/1 var(--sans);font-variant-numeric:lining-nums tabular-nums}
.ops-app .lo-dateblock--card .lo-dateblock-day{font:600 24px/1 var(--sans);font-variant-numeric:lining-nums tabular-nums}
.ops-app button.lo-datebtn{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:0}
.ops-app button.lo-datebtn--card{font-weight:600}
.ops-app .lo-num.lo-date,
.ops-app .lo-card--doc .lo-card-foot .lo-mono,
.ops-app .lo-next-age,
.ops-app .lo-qrow-meta--dim,
.ops-app .lo-qrow-meta--ok,
.ops-app .lo-queue-foot,
.ops-app .lo-attn-at,
.ops-app .lo-tl-at,
.ops-app .lo-note-meta,
.ops-app .lo-msg-row-time,
.ops-app .lo-msg-time,
.ops-app .notification-line time,
.ops-app .lo-hidden-copy small,
.ops-app .lo-ip-date,
.ops-app .lo-ip-when,
.ops-app .timeline time,
.ops-app .lo-bld .ib3-card .timeline time{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:0}
.ops-app .lo-cal-week{font-family:var(--sans);font-weight:600}
.ops-app .lo-rec-date-value{font:600 17px var(--sans);font-variant-numeric:tabular-nums}
.ops-app .ops-sheet .ops-date-input{font-family:var(--sans)}
.ops-app .ops-sheet-eyebrow,.ops-app .lo-ip-started,.ops-app .todo time,.ops-app .lo-msgs .doc-message-pending-copy small{font-family:var(--sans);font-variant-numeric:tabular-nums}
.ops-app .lo-amt--ok,.ops-app .lo-pay-amount{font-family:var(--sans);font-variant-numeric:lining-nums tabular-nums}
/* Completed jobs (decided with Brendan 2026-09-25): green when paid in full, orange while money is owed. */
.ops-app .lo-payline--ok{color:var(--status-ok-text)}
.ops-app .lo-payline--due{color:var(--status-action-text)}
.ops-app .lo-start--quiet{background:transparent;border:1px solid var(--lo-line-ghost);color:var(--paper)}
/* Merging duplicate customers (decided with Brendan 2026-09-25): the side-by-side compare and the duplicates list. */
.ops-app .lo-merge-intro{margin:6px 0 20px;color:var(--muted);font-size:14px;max-width:62ch}
.ops-app .lo-merge-table-wrap{overflow-x:auto;border:1px solid var(--lo-line);border-radius:12px;background:var(--lo-panel)}
.ops-app .lo-merge-table{width:100%;border-collapse:collapse;font-size:14px}
.ops-app .lo-merge-table th,.ops-app .lo-merge-table td{padding:12px 16px;border-top:1px solid var(--lo-line-row);text-align:left;vertical-align:middle}
.ops-app .lo-merge-table thead th{border-top:0;font-weight:600}
.ops-app .lo-merge-table tbody th{width:120px;color:var(--muted);font-weight:500;white-space:nowrap}
.ops-app .lo-merge-who{display:flex;align-items:center;gap:10px}
.ops-app .lo-merge-who>span{display:flex;flex-direction:column;gap:1px;min-width:0}
.ops-app .lo-merge-who a{color:var(--paper);font-weight:600}
.ops-app .lo-merge-who small{color:var(--muted);font-size:12px;font-weight:400}
.ops-app .lo-merge-same small{margin-left:8px;color:var(--muted);font-size:12px}
.ops-app .lo-merge-pick{display:flex;align-items:center;gap:10px;min-height:38px;padding:6px 10px;border:1px solid var(--lo-line);border-radius:8px;cursor:pointer}
.ops-app .lo-merge-pick:has(input:checked){border-color:var(--lo-gold-line);background:var(--lo-gold-row)}
.ops-app .lo-merge-pick input{accent-color:var(--gold);width:16px;height:16px;flex:none}
.ops-app .lo-dim{color:var(--muted)}
.ops-app .lo-merge-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.ops-app .lo-dupe-list{list-style:none;margin:0;padding:0;border:1px solid var(--lo-line);border-radius:12px;background:var(--lo-panel)}
.ops-app .lo-dupe-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--lo-line-row)}
.ops-app .lo-dupe-row:first-child{border-top:0}
.ops-app .lo-dupe-names{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.ops-app .lo-dupe-names a{color:var(--paper);font-weight:600}
.ops-app .lo-dupe-names small{color:var(--muted);font-size:12.5px}
.ops-app .lo-dupe-actions{display:flex;gap:8px;align-items:center}
.ops-app .lo-dupe-actions form{margin:0}
.ops-app .lo-rec-dupe{margin:12px 0 4px}

/* ---- QA pass 2026-09-25 ---- */
/* Builder pickers: one column that fits the menu, so prices aren't cut off. */
.bc-combobox-portal.lo-combo .bc-combobox-menu{grid-template-columns:minmax(0,1fr)}
/* The builder's Edit details popup isn't a page section (the website's section padding doesn't apply). */
.ops-app [data-cm-root]>.v3-customer-popup{padding:0}
/* Settings: the same space above each section's heading. */
.ops-app .lo-set-section+.lo-set-section{margin-top:32px}
.ops-app .ops-sheet .ops-set-textarea:focus{border-color:var(--gold);outline:none}
/* A customer's banners (possible duplicate, request, yard sign) keep their distance from the work track. */
.ops-app .lo-bld-note+.lo-rec-track,.ops-app .lo-rec-dupe-more+.lo-rec-track{margin-top:18px}
/* In Progress, List view: the headings share the rows' column widths; while they show, a row stays on one line, and
   below 1500px the Started column steps out (its date is on the job) so everything fits. */
.ops-app .lo-ip-h-who{flex:1 1 160px;min-width:0}
.ops-app .lo-ip-h-address,.ops-app .lo-ip-list .lo-ip-address{flex:0 0 170px}
.ops-app .lo-ip-h-started{flex:0 0 150px}
.ops-app .lo-ip-h-crew{flex:0 0 120px}
.ops-app .lo-ip-h-status,.ops-app .lo-ip-row .lo-ip-status{flex:0 0 170px}
.ops-app .lo-ip-h-actions{flex:0 0 220px;text-align:right}
.ops-app .lo-ip-row .lo-ip-actions{flex:0 0 220px}
.ops-app .lo-ip-h-left{flex:1 1 160px;min-width:0}
.ops-app .lo-ip-h-resume{flex:0 0 120px;text-align:right}
.ops-app .lo-ip-row .lo-ip-who{flex:1 1 160px;min-width:0}
.ops-app .lo-ip-row .lo-ip-who .lo-name,.ops-app .lo-ip-row .lo-ip-who .lo-sub{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ops-app .lo-ip-row .lo-ip-left{flex:1 1 160px}
@media (min-width:1240px){.ops-app .lo-ip-list .lo-ip-row{flex-wrap:nowrap}}
@media (min-width:1080px){[data-sidebar="collapsed"] .ops-app .lo-ip-list .lo-ip-row{flex-wrap:nowrap}}
@media (min-width:1240px) and (max-width:1499px){.ops-app .lo-ip-list .lo-ip-started,.ops-app .lo-ip-list .lo-ip-when-cell,.ops-app .lo-ip-list .lo-ip-h-started{display:none}}
@media (min-width:1080px) and (max-width:1499px){[data-sidebar="collapsed"] .ops-app .lo-ip-list .lo-ip-started,[data-sidebar="collapsed"] .ops-app .lo-ip-list .lo-ip-when-cell,[data-sidebar="collapsed"] .ops-app .lo-ip-list .lo-ip-h-started{display:none}}
.ops-app .lo-cust-fld select{width:100%;height:42px;padding:0 34px 0 12px;border:1px solid rgba(190,205,235,.16);border-radius:9px;background:var(--lo-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239fb0c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--paper);font:14px var(--sans);outline:0;-webkit-appearance:none;appearance:none}
.ops-app .lo-cust-fld select:focus{border-color:var(--gold)}
/* A declined quote's last step is red, not the gold (or green) of a done step. */
.ops-app .timeline li.is-bad::before,.ops-app .lo-bld .ib3-card .timeline li.is-bad::before{background:var(--status-bad-text);border-color:var(--status-bad-text)}
/* "They said yes by phone?" opens like the other expanders: it gets an arrow. */
.ops-app .lo-bld details.side-more>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none}
.ops-app .lo-bld details.side-more>summary::-webkit-details-marker{display:none}
.ops-app .lo-bld details.side-more>summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-right:4px;transition:transform .15s;opacity:.7}
.ops-app .lo-bld details.side-more[open]>summary::after{transform:rotate(225deg)}
/* Needs attention to-dos can be hidden with × like Do next cards (decided with Brendan 2026-09-25). */
.ops-app .lo-attn-close{flex:none;align-self:flex-start;margin:-2px -4px 0 4px}
.ops-app .lo-attn-close .lo-next-close{margin:0}
/* "Show all (N)" under Do next and Needs attention: the rest open below. */
.ops-app .lo-show-all{margin-top:10px}
.ops-app .lo-show-all>summary{display:inline-flex;align-items:center;gap:6px;padding:8px 2px;color:var(--gold);font:600 13.5px var(--sans);cursor:pointer;list-style:none}
.ops-app .lo-show-all>summary::-webkit-details-marker{display:none}
.ops-app .lo-show-all>summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.ops-app .lo-show-all[open]>summary::after{transform:rotate(225deg) translate(-2px,0)}
.ops-app .lo-show-all[open]>summary{margin-bottom:10px}
/* The dashboard grid (decided with Brendan 2026-09-25): 3 columns × 2 rows, Needs attention is the sixth box. */
.ops-app .lo-queue-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.ops-app .lo-queue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ops-app .lo-queue-grid{grid-template-columns:minmax(0,1fr)}.ops-app .lo-queue--attn{order:-1}}
.ops-app .lo-queue--attn .lo-queue-head{cursor:default}
.ops-app .lo-attn-qrow{flex-wrap:wrap;align-items:flex-start;gap:2px 8px;padding:4px 0 8px;border-bottom:1px solid var(--lo-line-row)}
.ops-app .lo-attn-qrow:last-child{border-bottom:0}
.ops-app .lo-attn-qrow>.status-dot{flex:0 0 8px;margin:15px 0 0 8px}
.ops-app .lo-attn-qrow .lo-qrow-main{flex:1 1 0;min-width:0}
.ops-app .lo-attn-qrow .lo-qrow-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ops-app .lo-attn-qrow .lo-attn-close{margin:6px 4px 0 0}
.ops-app .lo-attn-acts{flex:1 1 100%;display:flex;justify-content:flex-end;padding:0 10px 0 24px}
.ops-app .lo-attn-acts .lo-attn-choice{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px 14px}
.ops-app .lo-attn--sheet{grid-template-columns:minmax(0,1fr);border:0;background:none}
/* A dashboard row is one card (decided with Brendan 2026-09-25): the hover covers its name, date and its buttons,
   and a click on its empty space opens it like its name does (shell.js). */
.ops-app .lo-qrow{border-radius:8px;cursor:pointer}
.ops-app .lo-qrow:hover{background:rgba(190,205,235,.05)}
.ops-app .lo-qrow .lo-qrow-main:hover{background:transparent}
/* The job details popup's Edit job form. */
.ops-app .lo-job-edit{margin-bottom:18px}
.ops-app .lo-job-edit-foot{display:flex;justify-content:flex-end;gap:10px}
/* Installations → Deleted: the Deleted pill and Restore. */
.ops-app .lo-job-deleted{display:inline-flex}
.ops-app .lo-restore-form{margin:0}
.ops-app .lo-restore-form .lo-btn{width:100%}

/* A job's ··· on its card and row (Edit job, Move to, Delete job; decided with Brendan 2026-09-25). */
.ops-app .lo-job-top-acts{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.ops-app .lo-job-pill,.ops-app .lo-ip-status{display:flex;align-items:center;gap:6px}
.ops-app .lo-card-top:has(> .lo-step-menu + .lo-job-more){display:flex;align-items:center;gap:6px}
.ops-app .lo-card-top > .lo-job-more{margin-left:auto}
.ops-app .lo-job-more-btn{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid rgba(190,205,235,.16);border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;list-style:none}
.ops-app .lo-job-more-btn::-webkit-details-marker{display:none}
.ops-app .lo-job-more-btn:hover{color:var(--paper);background:rgba(190,205,235,.06)}

/* To-dos (decided with Brendan 2026-09-25) */
.ops-app .lo-todo-quick{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin:14px 0 6px;padding:8px 8px 8px 14px;border:1px solid rgba(190,205,235,.16);border-radius:12px;background:var(--lo-panel)}
.ops-app .lo-todo-quick:focus-within{border-color:rgba(243,210,138,.5)}
.ops-app .lo-todo-quick-plus{color:var(--gold);font-size:20px;line-height:1}
.ops-app .lo-todo-quick-input{min-width:0;height:40px;border:0;background:transparent;color:var(--paper);font:500 15px var(--sans);outline:none}
.ops-app .lo-todo-quick-input::placeholder{color:var(--muted)}
.ops-app .lo-todo-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.ops-app .lo-todo-chips:empty{display:none}
.ops-app .lo-todo-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border-radius:999px;background:rgba(243,210,138,.12);color:var(--gold);font:600 12.5px var(--sans)}
.ops-app .lo-todo-chip-x{width:20px;height:20px;border:0;border-radius:10px;background:transparent;color:inherit;font-size:14px;line-height:1;cursor:pointer}
.ops-app .lo-todo-chip-x:hover{background:rgba(243,210,138,.2)}
.ops-app .lo-todo-list{display:grid;gap:18px;margin-top:10px}
.ops-app .lo-todo-group{display:grid;gap:2px;padding:6px;border:1px solid rgba(190,205,235,.12);border-radius:12px;background:var(--lo-panel)}
.ops-app .lo-todo-group-title{margin:4px 8px 6px;color:var(--muted);font:600 12px var(--sans);letter-spacing:.06em;text-transform:uppercase}
.ops-app .lo-todo-group-title span{margin-left:4px;color:var(--muted);font-family:var(--mono)}
.ops-app .lo-todo-group.is-overdue .lo-todo-group-title{color:#ff7a70}
.ops-app .lo-todo-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;min-height:52px;padding:4px 6px;border-radius:10px}
.ops-app .lo-todo-row:hover{background:rgba(190,205,235,.04)}
.ops-app .lo-todo-check-form{display:contents}
.ops-app .lo-todo-check{display:grid;place-items:center;width:24px;height:24px;margin:0 4px;border:2px solid rgba(190,205,235,.35);border-radius:50%;background:transparent;color:#0b1220;font:700 13px var(--sans);cursor:pointer}
.ops-app .lo-todo-row.is-high .lo-todo-check{border-color:#ff9f0a}
.ops-app .lo-todo-check:hover{border-color:var(--gold);background:rgba(243,210,138,.12)}
.ops-app .lo-todo-check.is-on{border-color:#30d158;background:#30d158}
.ops-app .lo-todo-open{display:grid;gap:3px;min-width:0;padding:6px 0;border:0;background:transparent;color:var(--paper);text-align:left;cursor:pointer}
.ops-app .lo-todo-title{overflow-wrap:anywhere;font:500 15px/1.35 var(--sans)}
.ops-app .lo-todo-row.is-done .lo-todo-title{color:var(--muted);text-decoration:line-through}
.ops-app .lo-todo-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--muted);font-size:12.5px}
.ops-app .lo-todo-due.is-today{color:var(--gold)}
.ops-app .lo-todo-due.is-overdue{color:#ff7a70}
.ops-app .lo-todo-flag{color:#ff9f0a;font-weight:600}
.ops-app .lo-todo-person{display:inline-flex;align-items:center;gap:5px}
.ops-app .lo-todo-avatar{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(190,205,235,.14);color:var(--paper);font:700 9px var(--sans)}
.ops-app .lo-todo-del-form{display:contents}
.ops-app .lo-todo-files{display:grid;gap:6px;margin:6px 0}
.ops-app .lo-todo-file{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px}
.ops-app .lo-todo-file a{overflow:hidden;color:var(--paper);text-overflow:ellipsis;white-space:nowrap}
.ops-app .lo-todo-attach{cursor:pointer}
@media (max-width:760px){
  .ops-app .lo-todo-quick{grid-template-columns:1fr auto;padding-left:12px}
  .ops-app .lo-todo-quick-plus{display:none}
  .ops-app .lo-todo-quick-input{font-size:16px}
  .ops-app .lo-todo-row{min-height:56px}
}
/* Needs attention: Snooze (clock) and × side by side (decided with Brendan 2026-09-25). */
.ops-app .lo-attn-tools{flex:none;align-self:flex-start;display:flex;align-items:center;gap:2px;margin:-2px -4px 0 4px}
.ops-app .lo-attn-tools .lo-attn-close{margin:0}
.ops-app .lo-attn-qrow .lo-attn-tools{margin:6px 4px 0 0}
.ops-app .lo-attn-snooze{position:relative}
.ops-app .lo-attn-snooze > summary{list-style:none}
.ops-app .lo-attn-snooze > summary::-webkit-details-marker{display:none}
.ops-app .lo-attn-snooze .lo-next-close{margin:0}
.ops-app .lo-attn-snooze > .lo-menu-pop{right:0;left:auto;min-width:190px}
/* "On my way" in the job popup's footer (decided with Brendan 2026-09-25). */
.ops-app .lo-jd-omw{position:relative}
.ops-app .lo-jd-omw > summary{list-style:none}
.ops-app .lo-jd-omw > summary::-webkit-details-marker{display:none}
.ops-app .lo-jd-omw > .lo-menu-pop{bottom:calc(100% + 6px);top:auto;left:0;min-width:180px}
.ops-app .lo-jd-omw [data-jd-omw-list]{display:grid}
.ops-app .lo-jd-omw [data-jd-omw-list] a{padding:10px 12px;border-radius:8px;color:var(--paper)}
.ops-app .lo-jd-omw [data-jd-omw-list] a:hover{background:rgba(190,205,235,.06)}

/* Season report (decided with Brendan 2026-09-25) */
.ops-app .lo-rpt-lede{margin:12px 0 16px;color:var(--muted);font-size:13.5px}
.ops-app .lo-rpt-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ops-app .lo-rpt-tile{display:grid;gap:4px;padding:16px;border:1px solid rgba(190,205,235,.12);border-radius:12px;background:var(--lo-panel)}
.ops-app .lo-rpt-label{color:var(--muted);font:600 12px var(--sans);letter-spacing:.05em;text-transform:uppercase}
.ops-app .lo-rpt-value{color:var(--paper);font:600 26px/1.15 var(--mono);font-variant-numeric:tabular-nums}
.ops-app .lo-rpt-vs{color:var(--muted);font-size:12.5px}
.ops-app .lo-rpt-note{color:var(--muted);font-size:12px}
.ops-app .lo-rpt-change{font-weight:700}
.ops-app .lo-rpt-change.is-up{color:#30d158}
.ops-app .lo-rpt-change.is-down{color:#ff7a70}
.ops-app .lo-rpt-change.is-new{color:var(--gold)}
.ops-app .lo-rpt-card{margin-top:16px;padding:16px;border:1px solid rgba(190,205,235,.12);border-radius:12px;background:var(--lo-panel)}
.ops-app .lo-rpt-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ops-app .lo-rpt-card-head h2{margin:0;font:600 15px var(--sans)}
.ops-app .lo-rpt-legend{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px}
.ops-app .lo-rpt-legend i{display:inline-block;width:10px;height:10px;margin-left:8px;border-radius:2px;background:var(--gold)}
.ops-app .lo-rpt-legend i.is-prev{background:rgba(190,205,235,.28)}
.ops-app .lo-rpt-chart{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;height:180px;align-items:end}
.ops-app .lo-rpt-col{display:grid;grid-template-rows:1fr auto;gap:6px;height:100%}
.ops-app .lo-rpt-bars{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:100%;border-bottom:1px solid rgba(190,205,235,.12)}
.ops-app .lo-rpt-bar{width:40%;max-width:18px;min-height:1px;border-radius:3px 3px 0 0;background:var(--gold)}
.ops-app .lo-rpt-bar.is-prev{background:rgba(190,205,235,.28)}
.ops-app .lo-rpt-month{color:var(--muted);font-size:11.5px;text-align:center}
.ops-app .lo-rpt-table-wrap{overflow-x:auto}
.ops-app .lo-rpt-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ops-app .lo-rpt-table th,.ops-app .lo-rpt-table td{padding:9px 10px;border-bottom:1px solid rgba(190,205,235,.08);text-align:right;font-size:13.5px}
.ops-app .lo-rpt-table th:first-child{text-align:left}
.ops-app .lo-rpt-table thead th{color:var(--muted);font-weight:600;font-size:12px}
.ops-app .lo-rpt-table tfoot th,.ops-app .lo-rpt-table tfoot td{border-bottom:0;font-weight:700}
.ops-app .lo-rpt-prev{display:block;color:var(--muted);font-size:11.5px;font-weight:400}
@media (max-width:1100px){.ops-app .lo-rpt-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .ops-app .lo-rpt-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ops-app .lo-rpt-value{font-size:21px}
  .ops-app .lo-rpt-chart{gap:4px;height:150px}
}
.ops-app .lo-rpt-value{overflow-wrap:anywhere}
@media (max-width:760px){.ops-app .lo-rpt-tile:last-child{grid-column:1/-1}}

/* Select many (decided with Brendan 2026-09-25): tap rows and cards to pick them; a bar shows the actions. */
.ops-app .lo-bulk-toggle[aria-pressed="true"]{border-color:rgba(243,210,138,.5);color:var(--gold)}
.ops-app .content.lo-selecting [data-bulk-id]{position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}
.ops-app .content.lo-selecting [data-bulk-id] *{pointer-events:none}
.ops-app .content.lo-selecting [data-bulk-id]::before{content:"✓";position:absolute;z-index:5;display:grid;place-items:center;width:22px;height:22px;border:2px solid rgba(190,205,235,.45);border-radius:50%;background:var(--lo-panel);color:transparent;font:800 12px/1 var(--sans)}
.ops-app .content.lo-selecting .lo-row[data-bulk-id],.ops-app .content.lo-selecting .lo-todo-row[data-bulk-id]{padding-left:46px}
.ops-app .content.lo-selecting .lo-row[data-bulk-id]::before,.ops-app .content.lo-selecting .lo-todo-row[data-bulk-id]::before{left:14px;top:50%;margin-top:-11px}
.ops-app .content.lo-selecting .lo-card[data-bulk-id]::before{left:-8px;top:-8px}
.ops-app .content.lo-selecting [data-bulk-id].is-picked::before{border-color:var(--gold);background:var(--gold);color:#2a1d05}
.ops-app .content.lo-selecting [data-bulk-id].is-picked{outline:2px solid rgba(243,210,138,.55);outline-offset:-2px;background:rgba(243,210,138,.06)}
.ops-app .lo-bulk-bar{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:240;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px)}
.ops-app .lo-bulk-bar[hidden]{display:none}
.ops-app .lo-bulk-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 10px 10px 16px;border:1px solid rgba(243,210,138,.35);border-radius:14px;background:var(--lo-panel);box-shadow:0 18px 50px rgba(0,0,0,.55)}
.ops-app .lo-bulk-count{min-width:90px;color:var(--paper);font:600 14px var(--sans);font-variant-numeric:tabular-nums}
.ops-app .lo-bulk-link{border:0;background:none;color:var(--gold);font:600 13px var(--sans);cursor:pointer}
.ops-app .lo-bulk-actions{display:flex;flex-wrap:wrap;gap:6px}
.ops-app .lo-bulk-actions .is-off{opacity:.4;pointer-events:none}
.ops-app .lo-bulk-danger{color:#ff7a70}
.ops-app .lo-bulk-menu{position:relative}
.ops-app .lo-bulk-menu > summary{list-style:none}
.ops-app .lo-bulk-menu > summary::-webkit-details-marker{display:none}
.ops-app .lo-bulk-menu > .lo-menu-pop{bottom:calc(100% + 8px);top:auto;left:0;min-width:220px;max-height:60vh;overflow:auto}
@media (max-width:760px){
  .ops-app .lo-bulk-bar{bottom:calc(76px + env(safe-area-inset-bottom));width:calc(100% - 16px)}
  .ops-app .lo-bulk-form{padding:10px}
  .ops-app .lo-bulk-actions{width:100%}
  .ops-app .lo-bulk-actions > *{flex:1 1 auto}
}
@media (max-width:760px){
  .ops-app .lo-bulk-form{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px}
  .ops-app .lo-bulk-count{grid-column:1;grid-row:1;min-width:0}
  .ops-app .lo-bulk-link{grid-column:2;grid-row:1}
  .ops-app .lo-bulk-done{grid-column:3;grid-row:1}
  .ops-app .lo-bulk-actions{grid-column:1/-1;grid-row:2;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;width:auto}
  .ops-app .lo-bulk-actions > details > summary{display:flex;justify-content:center;width:100%}
  .ops-app .lo-bulk-actions > *{min-width:0}
}

/* Phone swipes on rows and cards (decided with Brendan 2026-09-25) */
.ops-app .lo-swipe{position:relative}
.ops-app .lo-swipe-acts{display:none}
.ops-app .lo-swipe-item{position:relative;z-index:1}
/* shell.js lifts the wrappers around an open menu so no neighbor paints over it (all popups on top). */
.ops-app .lo-lifted{z-index:300!important}
@media (max-width:760px){
  .ops-app .lo-swipe{overflow:hidden}
  .ops-app .lo-swipe--card{border-radius:12px}
  .ops-app .lo-swipe-acts{position:absolute;top:0;bottom:0;z-index:0;align-items:stretch}
  .ops-app .lo-swipe-acts.is-left{left:0}
  .ops-app .lo-swipe-acts.is-right{right:0}
  .ops-app .lo-swipe.is-show-left > .lo-swipe-acts.is-left,.ops-app .lo-swipe.is-show-right > .lo-swipe-acts.is-right{display:flex}
  .ops-app .lo-swipe.is-show-left > .lo-swipe-item,.ops-app .lo-swipe.is-show-right > .lo-swipe-item{background:var(--lo-panel)}
  .ops-app .lo-swipe-form{display:flex;margin:0}
  .ops-app .lo-swipe-acts .lo-swipe-btn{display:flex;align-items:center;justify-content:center;min-width:84px;height:100%;min-height:0;margin:0;padding:0 16px;border:0;border-radius:0;background:#3a4a66;color:#fff;font:700 15px var(--sans);text-decoration:none;box-shadow:none}
  .ops-app .lo-swipe-acts .lo-swipe-btn.is-go{background:#30a14e}
  .ops-app .lo-swipe-acts .lo-swipe-btn.is-info{background:#0a84ff}
  .ops-app .lo-swipe-acts .lo-swipe-btn.is-wait{background:#d98a14}
  .ops-app .lo-swipe-acts .lo-swipe-btn.is-muted{background:#5b6475}
  .ops-app .lo-swipe-acts .lo-job-form{display:flex;margin:0}
  .ops-app .content.lo-selecting .lo-swipe .lo-card[data-bulk-id]::before{left:8px;top:8px}
}

/* Instant to-dos: a row leaving, and one still saving */
.ops-app .lo-vanish{opacity:0;transform:translateX(12px);transition:opacity .2s ease,transform .2s ease}
.ops-app .lo-todo-row.is-pending{opacity:.75}
.ops-app .lo-todo-check.is-on{border-color:#30d158;background:#30d158}

/* ---------------- Recently Deleted (a list panel: type, name, when, Restore / Delete forever) ---------------- */
.ops-app .lo-trash-list{margin-top:14px}
.ops-app .lo-trash-list .lo-trash-kind{flex:0 0 96px}
.ops-app .lo-trash-list .lo-trash-main{flex:1 1 260px;min-width:0}
.ops-app .lo-trash-list .lo-trash-when{flex:0 0 170px;color:var(--muted);font-size:13px}
.ops-app .lo-trash-list .lo-trash-acts{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:236px}
.ops-app .lo-trash-row{align-items:center}
.ops-app .lo-trash-row a.lo-trash-title{color:var(--paper);text-decoration:none}
.ops-app .lo-trash-row a.lo-trash-title:hover{color:var(--gold)}
.ops-app .lo-trash-row .lo-trash-main .lo-sub,.ops-app .lo-trash-row .lo-trash-when .lo-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ops-app .lo-trash-form{margin:0}
.ops-app .lo-trash-acts .lo-btn{min-height:36px;padding:0 14px;font-size:13.5px}
.ops-app .lo-trash-acts .lo-trash-purge{color:#ff7a70;border-color:rgba(255,122,112,.35)}
.ops-app .lo-trash-acts .lo-trash-purge:hover{background:rgba(255,122,112,.08)}
.ops-app .lo-trash-empty-form{margin:0}
@media (max-width:760px){
  .ops-app .lo-trash-list .lo-list-head{display:none}
  .ops-app .lo-trash-list .lo-trash-row{display:flex;flex-wrap:wrap;gap:8px 12px;padding:14px 16px}
  .ops-app .lo-trash-list .lo-trash-row > .lo-trash-kind{flex:0 0 auto;order:0}
  .ops-app .lo-trash-list .lo-trash-row > .lo-trash-when{flex:1 1 auto;text-align:right;order:1}
  .ops-app .lo-trash-list .lo-trash-row > .lo-trash-main{flex:1 1 100%;order:2}
  .ops-app .lo-trash-list .lo-trash-row > .lo-trash-acts{flex:1 1 100%;min-width:0;order:3;justify-content:stretch}
  .ops-app .lo-trash-list .lo-trash-row > .lo-trash-acts > .lo-trash-form{flex:1 1 0;min-width:0}
  .ops-app .lo-trash-list .lo-trash-row > .lo-trash-acts .lo-btn{width:100%;min-height:44px}
}

/* ---------------- Invoice cards: the install date pill under the status pill (decided with Brendan 2026-09-25) ------ */
/* The top-right holds both pills, stacked; the name starts below them at full width. Every card has both, so they
   stay one height. Scheduled reads gold (unlike the status colors); Not Scheduled is a quiet dashed outline. */
.ops-app .lo-card--doc .lo-card-top:has(.lo-card-pills){align-items:flex-start}
.ops-app .lo-card-pills{display:flex;flex:0 0 auto;flex-direction:column;align-items:flex-end;gap:6px}
.ops-app .lo-install-pill{background:rgba(243,210,138,.14);color:var(--gold)}
.ops-app .lo-install-pill.is-none{padding:3px 9px;border:1px dashed rgba(190,205,235,.3);background:transparent;color:var(--muted);font-weight:500}

/* Refund on a Stripe payment (decided with Brendan 2026-09-26): the amount beside the strip's buttons. */
.ops-app .ops-refund-strip{flex-wrap:wrap;gap:10px}
.ops-app .ops-refund-amount{display:flex;align-items:center;gap:6px;margin:0;color:var(--muted);font-weight:600}
.ops-app .ops-refund-amount .field{width:120px;margin:0}

/* ops/mobile.css */
/* Light Ops phone experience. Kept after the desktop styles so each screen can
   use its own phone layout without changing the desktop workspace. */
.ops-app .mobile-filter-head{display:none}
@media (max-width:760px){
  /* Job card buttons are 44px tall on phones; the reserved Start job slot matches (screens.css). */
  .ops-app .lo-cards{--lo-job-btn:44px}
  html,body.ops-app{width:100%;max-width:100%;overflow-x:hidden}
  .ops-app,.ops-app *{box-sizing:border-box}
  .ops-app .app,.ops-app .main,.ops-app .content{min-width:0;max-width:100%}
  .ops-app .main{overflow-x:clip;overscroll-behavior-y:contain;scroll-behavior:auto}
  .ops-app .content:not(.ib3-takeover){padding:18px max(16px,env(safe-area-inset-right)) calc(94px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
  .ops-app .content :is(h1,h2,h3,p,strong,small){overflow-wrap:break-word}
  .ops-app :is(input:not([type=hidden]),textarea,select){font-size:16px}
  .ops-app :is(.btn,.btn-primary,.btn-ghost,.btn-gold,.btn-quiet,.btn-link,.back,.save,.tab,.chip){min-height:44px}
  .ops-app :is(button,a,input,select,textarea,summary){touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .ops-app :is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .ops-app .page-head{align-items:stretch;gap:14px;margin-bottom:18px}
  .ops-app .page-head>div:first-child{width:100%;min-width:0}
  .ops-app .page-head h1{font-size:clamp(27px,8vw,34px);line-height:1.12}
  .ops-app .page-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px}
  .ops-app .page-actions>*{min-width:0;justify-content:center;text-align:center}
  .ops-app .panel,.ops-app .card{padding:16px;margin-bottom:12px}
  .ops-app .panel-head{align-items:flex-start}
  .ops-app .panel-head h2{font-size:19px}

  /* The same per-page list or card choice is available on phones. */
  .ops-app .lv .workspace-view-toggle{display:none}
  .ops-app .lv [data-lv-toggle]{display:flex}
  .ops-app .lv-head{display:flex;flex-direction:column;gap:12px;height:auto;min-height:0;margin-bottom:16px}
  .ops-app .lv-head-actions{display:flex;justify-content:flex-end;width:100%;height:auto}
  .ops-app .lv-head-button-slot{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:calc(65px + env(safe-area-inset-bottom));left:max(12px,env(safe-area-inset-left));z-index:70;display:block;width:auto;height:auto;padding:8px 0;background:linear-gradient(180deg,transparent,var(--ink) 24%)}
  .ops-app .lv-head .v3-primary-button.lv-head-button{display:flex;width:100%;min-height:48px;height:auto;font-size:14px}
  .ops-app section.lv{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
  .ops-app .customers-v2-tools{display:flex;flex-wrap:wrap}
  .ops-app .customers-v2-search{height:48px}
  .ops-app .customers-v2-search input[type="search"]{font-size:16px}
  .ops-app .customers-v2-filters{width:100%;min-height:48px;overflow-x:auto;overscroll-behavior-x:contain}
  .ops-app .customers-v2-filter{min-height:44px}
  .ops-app .lv .v3-toolbar,.ops-app .lv-leads .v3-toolbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ops-app .lv .v3-toolbar>.v3-filter-menu{min-width:0;width:100%}
  .ops-app .lv .v3-filter-trigger{min-height:48px}
  .ops-app .lv .v3-filter-popover{position:fixed;inset:0!important;z-index:250;display:flex;flex-direction:column;min-width:0!important;width:100%;max-width:none;max-height:100dvh;height:100dvh;margin:0;padding:env(safe-area-inset-top) 12px calc(12px + env(safe-area-inset-bottom));overflow-y:auto;border:0;border-radius:0;background:var(--ops-sidebar-bg);box-shadow:none;animation:none}
  .ops-app .mobile-filter-head{display:flex;align-items:center;gap:10px;min-height:62px;padding:0 4px 8px;border-bottom:1px solid var(--lv-border);color:var(--paper)}
  .ops-app .mobile-filter-head strong{flex:1;font-size:18px}
  .ops-app .mobile-filter-close{min-width:44px;min-height:44px;border:1px solid var(--lv-border);border-radius:10px;background:var(--lv-surface);color:var(--paper);font-size:25px}
  .ops-app .lv .v3-filter-option{min-height:54px;padding:12px;font-size:15px;white-space:normal}
  .ops-app .lv .v3-results-count{margin:2px 0}
  .ops-app .lv .v5-record-grid,.ops-app .customers-v2-card-grid{gap:10px}
  .ops-app .lv .v5-record-card{min-height:0;padding:16px}
  .ops-app .customers-v2-card{min-height:0}
  .ops-app .lv-action,.ops-app .lv-action.lv-action-quote{min-width:44px;width:auto;min-height:44px;padding:0 11px}
  .ops-app .lv-action-quote span{display:inline}

  /* Forms and record details use the available width. */
  .ops-app .row,.ops-app .two,.ops-app .grid-2,.ops-app .grid-3{min-width:0}
  .ops-app .customer-v2-head{display:block;margin-bottom:18px}
  .ops-app .customer-v2-back,.ops-app .customer-v2-contact-links a,.ops-app .customer-v2-contact-links button,.ops-app .customer-v2-segmented button,.ops-app .customer-v2-detail-item button{min-height:44px}
  .ops-app .customer-v2-identity{gap:12px}
  .ops-app .customer-v2-identity .customer-v2-avatar{width:52px;height:52px;flex:none}
  .ops-app .customer-v2-identity h1{font-size:27px;overflow-wrap:anywhere}
  .ops-app .customer-v2-actions{justify-content:stretch;gap:8px;margin-top:16px}
  .ops-app .customer-v2-actions>.btn{min-width:0;min-height:48px}
  .ops-app .customer-v2-summary .customer-v2-metrics.customer-v2-metrics--four{gap:8px}
  .ops-app .customer-v2-summary .customer-v2-metrics.customer-v2-metrics--four>div{display:block;min-height:0;padding:12px}
  .ops-app .customer-v2-metric-icon{display:none!important}
  .ops-app .customer-v2-tabs{position:sticky;top:0;z-index:20;display:flex;overflow-x:auto;background:var(--ink);scrollbar-width:none}
  .ops-app .customer-v2-tabs a{min-height:48px}
  .ops-app .customer-v2-info-row{grid-template-columns:1fr;gap:0}
  .ops-app .customer-v2-info-item,.ops-app .customer-v2-info-item:first-child,.ops-app .customer-v2-info-item:last-child{padding:12px 0;border-left:0;border-bottom:1px solid var(--border-subtle)}
  .ops-app .customer-v2-pane-actions{flex-wrap:wrap}
  .ops-app .customer-v2 .btn.sm,.ops-app .customer-v2-text-action{min-height:44px;display:inline-flex;align-items:center}
  .ops-app .to-order .to-check{width:44px;height:44px}
  .ops-app .to-order .to-card{min-height:0}

  /* Measurement and payment tables become readable stacked rows. */
  .ops-app table.measure,.ops-app .ib3-extras-canvas table.table{display:block;width:100%;border:0}
  .ops-app table.measure thead,.ops-app .ib3-extras-canvas table.table thead{display:none}
  .ops-app table.measure tbody,.ops-app .ib3-extras-canvas table.table tbody{display:grid;gap:10px}
  .ops-app table.measure tr,.ops-app .ib3-extras-canvas table.table tr{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
  .ops-app table.measure td,.ops-app .ib3-extras-canvas table.table td{display:block;min-width:0;padding:0;border:0;white-space:normal;text-align:left;overflow-wrap:anywhere}
  .ops-app table.measure td:first-child,.ops-app .ib3-extras-canvas table.table td:first-child{grid-column:1/-1;font-weight:700}
  .ops-app table.measure td:nth-child(2)::before,.ops-app .ib3-extras-canvas table.table td:nth-child(2)::before{display:block;margin-bottom:3px;color:var(--muted);font:700 10px var(--sans);letter-spacing:.08em;text-transform:uppercase;content:"Estimate"}
  .ops-app table.measure.totals td:nth-child(3)::before{display:block;margin-bottom:3px;color:var(--muted);font:700 10px var(--sans);letter-spacing:.08em;text-transform:uppercase;content:"Your number"}
  .ops-app table.measure:not(.totals) td:nth-child(2)::before{content:"What"}
  .ops-app table.measure:not(.totals) td:nth-child(3)::before{display:block;margin-bottom:3px;color:var(--muted);font:700 10px var(--sans);letter-spacing:.08em;text-transform:uppercase;content:"Estimate"}
  .ops-app table.measure:not(.totals) td:nth-child(4)::before{display:block;margin-bottom:3px;color:var(--muted);font:700 10px var(--sans);letter-spacing:.08em;text-transform:uppercase;content:"Confidence"}
  .ops-app table.measure.totals input{width:100%;max-width:130px;min-height:44px;font-size:16px}
  .ops-app .ib3-extras-canvas table.table td:nth-child(2)::before{content:"Method"}
  .ops-app .ib3-extras-canvas table.table td:nth-child(3)::before{display:block;margin-bottom:3px;color:var(--muted);font:700 10px var(--sans);letter-spacing:.08em;text-transform:uppercase;content:"Amount"}

  /* Full-height material editor and builder controls. */
  .ops-app .to-dialog{inset:0!important;top:0!important;width:100%;height:100dvh;max-height:100dvh;margin:0;padding:calc(18px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom));border:0;border-radius:0;overflow:hidden}
  .ops-app .to-form-grid{grid-template-columns:1fr}
  .ops-app .content.ib3-takeover .ib3-toolbar{height:calc(52px + env(safe-area-inset-top))!important;min-height:calc(52px + env(safe-area-inset-top))!important;padding-top:calc(4px + env(safe-area-inset-top))!important}
  .ops-app .content.ib3-takeover .ib3-sheet{min-height:calc(100dvh - 52px - env(safe-area-inset-top))!important}
  .ops-app .content.ib3-takeover .ib3-step,.ops-app .content.ib3-takeover .ib3-del,.ops-app .content.ib3-takeover .ib3-grip{min-width:44px;min-height:44px}
  .ops-app .content.ib3-takeover .ib3-sheet :is(input:not([type=hidden]),textarea,select){font-size:16px!important}
  .ops-app .bc-combobox-portal{max-width:100vw!important}
}

@media (max-width:380px){
  .ops-app .stats.stats-dash{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ops-app .stats-dash .stat-value{font-size:21px}
  .ops-app .page-actions{grid-template-columns:1fr 1fr}
  .ops-app .content.ib3-takeover .ib3-meta--estimate{grid-template-columns:minmax(0,1fr)!important}
  .ops-app .content.ib3-takeover .ib3-meta--estimate>label{grid-column:1!important}
}
@media (min-width:381px) and (max-width:760px){
  .ops-app .stats.stats-dash{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ops-app .stats-dash .stat-value{font-size:23px}
}
@media (max-width:760px){
  .ops-app .stats.stats-dash{gap:8px;margin-bottom:14px}
  .ops-app .stats-dash .stat{min-width:0;min-height:116px;padding:13px 12px;transition:none}
  .ops-app .stats-dash .stat:last-child{grid-column:1/-1;min-height:86px}
  .ops-app .stats-dash .stat-value{overflow-wrap:anywhere}
  .ops-app .stats-dash .stat-sub{line-height:1.3}
  .ops-app .todo,.ops-app .mini-lead{min-height:58px}
  .ops-app .todos,.ops-app .mini-leads{grid-template-columns:minmax(0,1fr)}
  .ops-app .todo{display:grid;grid-template-columns:10px minmax(0,1fr);gap:2px 10px;width:100%;min-width:0}
  .ops-app .todo .notification-icon{grid-row:1/3}
  .ops-app .todo time{grid-column:2;grid-row:2}
  .ops-app .mini-lead{display:grid;grid-template-columns:44px minmax(0,1fr);gap:3px 10px;width:100%;min-width:0}
  .ops-app .mini-lead img,.ops-app .mini-lead .thumb-empty{grid-row:1/3;width:44px;height:44px}
  .ops-app .mini-lead .pill{grid-column:2;justify-self:start}
  .ops-app .todo-copy,.ops-app .mini-copy{min-width:0}
  .ops-app .todo time,.ops-app .mini-lead .pill{flex:none}
  .ops-app .pipe{grid-template-columns:82px minmax(0,1fr) 28px;gap:8px;min-height:44px}
  .ops-app .pipeline{gap:3px}
}
@media (prefers-reduced-motion:reduce){.ops-app *{scroll-behavior:auto!important;animation-duration:0s!important;transition-duration:0s!important}}

/* ---------------- Phone touch (v5 phone pass) ----------------
   Every tap target is at least 44px. Small text links and the view switch keep their look and get an
   invisible ::after that extends the tappable area; controls that are only a few pixels short grow to 44px.
   Inputs stay at 16px so iOS never zooms. Buttons answer the touch at once, like a native app. */
@media (max-width:760px){
  .ops-app :is(.v3-mobile-home,.lo-switch-btn,.lo-attn-cta,.lo-attn-skip,.lo-rec-back,.lo-rec-link,.lo-add-subject){position:relative}
  .ops-app .v3-mobile-home::after{position:absolute;inset:-7px;content:""}
  .ops-app .lo-switch-btn::after{position:absolute;inset:-5px 0;content:""}
  .ops-app :is(.lo-attn-cta,.lo-attn-skip,.lo-rec-back,.lo-rec-link,.lo-add-subject)::after{position:absolute;inset:-14px -6px;content:""}
  .ops-app button.lo-rec-link:only-child::after{inset:-14px -10px}
  .ops-app .lo-rec-contact a{position:relative;display:inline-block}
  .ops-app .lo-rec-contact a::after{position:absolute;inset:-6px -4px;content:""}
  .ops-app :is(.lo-bld-terms,.ib3-card .side-more) > summary{display:flex;align-items:center;min-height:44px}
  .ops-app .ib3-card .side-more input[type=text]{min-height:44px}
  .ops-app .lo-search input,
  .ops-app .lo-input,
  .ops-app .lv .v3-primary-button,
  .ops-app .lo-bld .side-doc,
  .ops-app .lo-cal-choose,
  .ops-app .lo-crew--compact,
  .ops-app .lo-bld .lo-btn{min-height:44px}
  .ops-app .lo-rec-head .lo-menu-trigger{min-width:44px}
  .ops-app .lo-line-desc{min-height:44px}
  .ops-app .lo-addon-check{min-height:44px;font-size:14px}
  .ops-app .lo-addon-check input{width:20px;height:20px}
  .ops-app .lo-tot-input input,
  .ops-app .lo-disc-name input{height:40px}
  /* 16px text in every field (iOS zooms the page into anything smaller). */
  .ops-app .ib3-card .side-more input[type=text],
  .ops-app .ops-sheet .ops-set-textarea{font-size:16px}
  /* Native-feeling taps: no gray flash, no double-tap zoom delay, and a quick press state. */
  .ops-app{-webkit-tap-highlight-color:transparent}
  .ops-app :is(a,button,summary,label,[role=button]){touch-action:manipulation}
  .ops-app :is(.lo-btn,.lo-row,.lo-card,.lo-msg-row,.v3-mobile-nav-item,.v3-mobile-more-item,.lo-next,.lo-qrow):active{opacity:.72;transition:opacity 0s}
  /* The step menu opens as a sheet at the bottom; the work track's steps are full-height targets. */
  .ops-app .lo-step-menu[open] > .lo-step-pop{position:fixed;top:auto;right:max(8px,env(safe-area-inset-right));bottom:calc(8px + env(safe-area-inset-bottom));left:max(8px,env(safe-area-inset-left));z-index:260;min-width:0;max-height:72vh;padding:8px;border-radius:16px;box-shadow:0 -12px 40px rgba(0,0,0,.55)}
  .ops-app .lo-step-pop > button{min-height:46px;font-size:15px}
  .ops-app button.lo-rec-step{min-height:44px}
  /* Typing (shell.js adds html.ops-typing): the tab bar steps aside for the keyboard. */
  html.ops-typing .ops-app .v3-mobile-nav{display:none}
  /* Sheet grabbers and headers take the swipe-down gesture (shell.js) instead of panning the page. */
  .ops-app :is(.ops-sheet-grab,.ops-sheet .head,.v3-mobile-more-grab,.v3-mobile-more-head){touch-action:none}
  /* The app chrome isn't text to select or long-press. */
  .ops-app :is(.v3-mobile-topbar,.v3-mobile-nav,.lo-tabs,.lo-switch){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
}

/* ---- QA pass 2026-09-25: phones ---- */
@media (max-width:760px){
  /* A card's open status menu sits over the bottom bar, so its last choices can be tapped. */
  .ops-app .lo-row--cover > :has(.lo-step-menu[open]),.ops-app .lo-card--cover > :has(.lo-step-menu[open]){z-index:270}
  /* Merge: each field's two choices side by side under its name, no sideways scrolling. */
  .ops-app .lo-merge-table-wrap{overflow-x:visible}
  .ops-app .lo-merge-table,.ops-app .lo-merge-table tbody,.ops-app .lo-merge-table thead{display:block}
  .ops-app .lo-merge-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:12px 16px;border-top:1px solid var(--lo-line-row)}
  .ops-app .lo-merge-table thead tr{border-top:0}
  .ops-app .lo-merge-table th,.ops-app .lo-merge-table td{padding:0;border:0;width:auto}
  .ops-app .lo-merge-table thead th:first-child{display:none}
  .ops-app .lo-merge-table tbody th{grid-column:1/-1}
  .ops-app .lo-merge-table td[colspan]{grid-column:1/-1}
  .ops-app .lo-merge-pick span{overflow-wrap:anywhere}
  .ops-app .lo-dupe-row{flex-wrap:wrap}
  .ops-app .lo-dupe-actions{width:100%}
  .ops-app .lo-dupe-actions>*,.ops-app .lo-dupe-actions button{flex:1;width:100%}
  /* A customer's money figures: an odd last one takes the whole row. */
  .ops-app .lo-rec-figs>.lo-rec-fig:last-child:nth-child(odd){grid-column:1/-1}
}
/* Quote and invoice rows on phones (List view): number and status, then name and amount, then the date. Payment
   rows: date and amount, then name and method. */
@media (max-width:640px){
  .ops-app .lo-row--doc{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px}
  .ops-app .lo-row--doc:not(.lo-pay-row)>:nth-child(1){grid-column:1;grid-row:1}
  .ops-app .lo-row--doc:not(.lo-pay-row)>:nth-child(2){grid-column:1;grid-row:2}
  .ops-app .lo-row--doc:not(.lo-pay-row)>:nth-child(3){grid-column:2;grid-row:1;justify-self:end}
  .ops-app .lo-row--doc:not(.lo-pay-row)>:nth-child(4){grid-column:1;grid-row:3}
  .ops-app .lo-row--doc:not(.lo-pay-row)>:nth-child(5){grid-column:2;grid-row:2;justify-self:end;white-space:nowrap}
  .ops-app .lo-pay-row>:nth-child(1){grid-column:1;grid-row:1}
  .ops-app .lo-pay-row>:nth-child(2){grid-column:1;grid-row:2}
  .ops-app .lo-pay-row>:nth-child(3){grid-column:2;grid-row:2;justify-self:end}
  .ops-app .lo-pay-row>:nth-child(4){grid-column:2;grid-row:1;justify-self:end;white-space:nowrap}
  .ops-app .lo-bld-headline input{text-overflow:ellipsis}
}
/* Needs attention's Skip / Send are easy to tap on phones. */
@media (max-width:760px){.ops-app .lo-attn-skip,.ops-app .lo-attn-send{min-height:40px;padding:0 12px}}
@media (max-width:640px){
  .ops-app .lo-attn-item{position:relative;padding-right:44px}
  .ops-app .lo-attn-item .lo-attn-tools{position:absolute;top:10px;right:10px;margin:0}
  .ops-app .lo-attn-item .lo-attn-tools .lo-attn-close{position:static}
}

/* ---- Phone menus as app sheets (decided with Brendan 2026-09-25) ----
   Every dropdown (a status's Move to / Step menu, filters, the builder's ··· menu) opens as a bottom sheet: full
   width, above the tab bar (which steps aside while it's open), the page dimmed and frozen behind it, its own
   scroll when it's long, and a grab bar. It closes on a choice, a tap on the dimmed page, or a swipe down. */
@media (max-width:760px){
  .ops-app details[data-menu][open] > .lo-menu-pop,
  .ops-app .lo-bld-menu:not([hidden]){
    position:fixed!important;top:auto!important;right:0!important;bottom:0!important;left:0!important;z-index:400;
    width:auto!important;min-width:0!important;max-width:none!important;max-height:min(86dvh,680px)!important;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    margin:0!important;padding:26px 10px calc(14px + env(safe-area-inset-bottom))!important;border-radius:20px 20px 0 0!important;border-bottom:0!important;
    box-shadow:0 0 0 100vmax rgba(4,8,18,.62),0 -14px 40px rgba(0,0,0,.5)!important;animation:ops-sheet-up .18s cubic-bezier(.2,.8,.2,1)}
  .ops-app details[data-menu][open] > .lo-menu-pop::before,
  .ops-app .lo-bld-menu:not([hidden])::before{content:"";position:absolute;top:9px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:rgba(190,205,235,.35)}
  .ops-app details[data-menu][open] > .lo-menu-pop > :is(a,button,label),
  .ops-app .lo-bld-menu > :is(button,a){min-height:50px;font-size:16px}
  /* While a sheet is open the tab bar steps aside and the page behind it doesn't scroll. */
  .ops-app:has(details[data-menu][open] > .lo-menu-pop) .v3-mobile-nav,
  .ops-app:has(.lo-bld-menu:not([hidden])) .v3-mobile-nav{visibility:hidden}
  .ops-app:has(details[data-menu][open] > .lo-menu-pop) .main,
  .ops-app:has(.lo-bld-menu:not([hidden])) .main{overflow:hidden!important}
}
@keyframes ops-sheet-up{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
/* Phone field focus (decided with Brendan 2026-09-27): tapping a field turns its own border gold. One border: no
   outline, ring or glow on the field or around it (Safari's own focus ring included), and nothing moves or resizes.
   Fields drawn by a wrapper (the $ box, searches, the date picker) turn the wrapper's border gold instead.
   The desktop keeps its focus styles. */
@media (max-width:760px){
  .ops-app :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]),textarea,select):is(:focus,:focus-visible){outline:none!important;box-shadow:none!important;border-color:var(--gold)!important}
  .ops-app :is(.affix,.ib3-input,.customers-v2-search,.ops-install-date-picker,.bc-combobox-search):focus-within{outline:none!important;box-shadow:none!important;border-color:var(--gold)!important}
  .ops-app :is(.affix,span.ib3-input,.customers-v2-search,.ops-install-date-picker,.bc-combobox-search) :is(input,textarea,select):is(:focus,:focus-visible){border-color:transparent!important}
}