/* Makki Demolition — private company data portal (MOCK demo).
   Wears Makki's own brand: real logo, brand gold #F3A400 on deep-black neutrals,
   Roboto + Inter type. Fonts bundled locally in brand/ — no external CDNs
   (client-data privacy). Premium executive dark theme:
   full-height rail, circular gold KPI badges, big bold hero numbers, elevated
   glass cards. Fully responsive — desktop dashboard + premium phone app. */
@font-face{font-family:"Roboto";src:url("brand/font1.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url("brand/font2.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bg:#08080a; --bg-elev:#0d0d10; --panel:#151519; --panel-2:#101014; --panel-hd:#191920;
  --line:#242429; --line-2:#31313a;
  --ink:#f6f6f8; --ink-2:#cdcdd4; --mut:#8c8c96; --mut-2:#5b5b64;
  --gold:#F3A400; --gold-2:#ffca55; --gold-d:#c9820a; --gold-soft:rgba(243,164,0,.12);
  --silver:#c7ccd6;
  --good:#3ecf7a; --warn:#ffb020; --bad:#ff5c5c; --court:#ff4d5e; --hold:#c08bff; --steel:#4aa8e6;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;
  --head:"Roboto","Inter","Segoe UI",system-ui,sans-serif;
  --sans:"Inter","Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  --r:18px; --r-sm:12px;
  --sh:0 30px 70px -34px rgba(0,0,0,.92);
  --sh-card:0 1px 0 rgba(255,255,255,.03) inset, 0 24px 48px -34px rgba(0,0,0,.9);
  --sh-gold:0 10px 30px -12px rgba(243,164,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;max-width:100vw}
html{overflow-x:hidden}   /* root backstop — no page can ever scroll sideways */
body{
  font-family:var(--sans); color:var(--ink); background:var(--bg);
  background-image:
    radial-gradient(1300px 680px at 96% -12%, rgba(243,164,0,.08), transparent 56%),
    radial-gradient(1000px 560px at -6% 108%, rgba(243,164,0,.035), transparent 60%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow:hidden; letter-spacing:.005em;
}
h1,h2,h3,.wordmark{font-family:var(--head)}
.hide{display:none !important}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
button{font-family:inherit}
::selection{background:rgba(243,164,0,.28);color:#fff}
.dot{width:6px;height:6px;border-radius:50%;background:var(--gold);display:inline-block;flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(243,164,0,.16)}
/* slim premium scrollbars */
*{scrollbar-width:thin;scrollbar-color:#2b2b33 transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:#2b2b33;border-radius:9px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#3a3a45;background-clip:content-box}

/* ---------- LOGIN ----------
   SAFE CENTRING (2026-09-16 phone fix). This box used to be
   `align-items:center` with `overflow:auto`. When the card stack is taller than
   the box — which it always is on a phone — flex centring pushes the top of the
   content ABOVE the box's top padding edge, into a strip that scrollTop can
   never reach (scrollTop cannot go negative). At 390x844 that buried the logo,
   the tagline, the "Sign in to your dashboard" heading and the top half of the
   owner card: 670px of the page, unreachable, with the page already looking
   "scrolled down" the moment it opened. Omar hit exactly this.
   The fix is `align-items:flex-start` + `margin:auto` on the child: an auto
   margin only ever absorbs POSITIVE free space, so it still centres on a tall
   desktop window and collapses to zero the moment the content overflows —
   the top always stays reachable. Nothing about the look changes. */
#login{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;
  padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
  background:radial-gradient(1100px 760px at 50% -22%, rgba(243,164,0,.11), transparent 62%), linear-gradient(180deg,#0a0a0c,#070708);}
.login-glow{position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(620px 320px at 50% 6%, rgba(243,164,0,.07), transparent 70%)}
.login-wrap{width:min(1040px,100%);position:relative;z-index:1;margin:auto}
.brand-lg{display:flex;align-items:center;gap:16px;justify-content:center;margin-bottom:2px}
.logo{flex:0 0 auto;display:grid;place-items:center}
.logo img{display:block}
#loginLogo img{width:min(330px,76vw);height:auto;filter:drop-shadow(0 12px 30px rgba(0,0,0,.62))}
.tagline{text-align:center;color:var(--mut);letter-spacing:.34em;font-size:11px;
  text-transform:uppercase;margin:16px 0 4px}
.portal-chip{display:inline-flex;align-items:center;gap:9px;margin:16px auto 0;
  padding:7px 15px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink-2);
  font-size:12px;letter-spacing:.02em;background:rgba(255,255,255,.02);backdrop-filter:blur(4px)}
.login-head{text-align:center;margin:30px 0 20px}
.login-head h1{font-size:22px;margin:0 0 7px;font-weight:800;letter-spacing:.01em}
.login-head p{margin:0;color:var(--mut);font-size:13.5px}
.role-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin-top:8px}
.rc{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  border-radius:var(--r);padding:22px;cursor:pointer;transition:.22s cubic-bezier(.2,.7,.3,1);position:relative;overflow:hidden}
.rc::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)}
.rc:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:var(--sh)}
.rc.sel{border-color:rgba(243,164,0,.6);box-shadow:0 0 0 1px rgba(243,164,0,.45),0 20px 44px -22px rgba(243,164,0,.34)}
.rc .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  border:1px solid var(--line-2)}
.rc .ic svg{width:24px;height:24px}
.rc h3{margin:0 0 3px;font-size:16px;letter-spacing:.01em;font-weight:800}
.rc .who{color:var(--mut);font-size:12.5px;margin-bottom:13px}
.rc .sees{font-size:12.5px;line-height:1.6;color:var(--mut)}
.rc .sees .y{color:var(--ink-2)} .rc .sees .n{color:var(--mut-2);text-decoration:line-through}
.rc .cred{margin-top:15px;padding-top:13px;border-top:1px dashed var(--line-2);
  font-family:var(--mono);font-size:11.5px;color:var(--mut-2)}
.rc.owner .ic{background:rgba(243,164,0,.13);color:var(--gold)}
.rc.lead .ic,.rc.pm .ic{background:rgba(74,168,230,.13);color:var(--steel)}
.rc.book .ic{background:rgba(62,207,122,.13);color:var(--good)}
.rc.est .ic{background:rgba(192,139,255,.13);color:var(--hold)}
.rc.crew .ic{background:rgba(199,204,214,.12);color:var(--silver)}
.login-form{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.login-form input{background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;
  color:var(--ink);padding:12px 15px;font-size:14px;min-width:184px;font-family:var(--mono);transition:.15s}
.login-form input:focus{outline:none;border-color:rgba(243,164,0,.55);box-shadow:0 0 0 3px rgba(243,164,0,.12)}
.btn{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1a1206;border:none;border-radius:12px;
  padding:12px 24px;font-weight:800;font-size:14px;cursor:pointer;letter-spacing:.01em;transition:.16s;
  box-shadow:var(--sh-gold)}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line-2);box-shadow:none}
.btn.ghost:hover{border-color:rgba(243,164,0,.55);color:var(--gold);filter:none;transform:translateY(-1px)}
.login-note{text-align:center;color:var(--mut-2);font-size:12px;margin-top:24px;line-height:1.7}
.err{color:var(--bad);text-align:center;font-size:13px;margin-top:10px;min-height:16px}

/* ---------- APP SHELL (full-height rail + top bar over content) ---------- */
#app{display:grid;grid-template-columns:248px 1fr;grid-template-rows:auto auto 1fr;
  grid-template-areas:"side top" "side demo" "side main";height:100vh}
.topbar{grid-area:top;display:flex;align-items:center;gap:14px;padding:0 26px;height:70px;
  background:linear-gradient(180deg,rgba(16,16,20,.86),rgba(10,10,13,.7));backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);position:relative;z-index:5}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(243,164,0,.28),transparent)}
.tb-logo{display:none}
.tb-logo img{height:30px;width:auto}
.topsearch{display:flex;align-items:center;gap:10px;flex:0 1 380px;min-width:0;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;
  padding:0 14px;height:42px;transition:.16s}
.topsearch:focus-within{border-color:rgba(243,164,0,.45);background:rgba(255,255,255,.045);
  box-shadow:0 0 0 3px rgba(243,164,0,.08)}
.topsearch svg{width:17px;height:17px;color:var(--mut);flex:0 0 auto}
.topsearch input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--ink);
  font-size:13.5px;font-family:var(--sans)}
.topsearch input::placeholder{color:var(--mut-2)}
.mockpill{font-size:10px;letter-spacing:.14em;color:var(--gold);
  border:1px solid rgba(243,164,0,.4);border-radius:7px;padding:4px 9px;background:rgba(243,164,0,.08);font-weight:700}
.spacer{flex:1}
.bell{position:relative}
.bell::after{content:"";position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 2px var(--bg-elev)}
.userbox{display:flex;align-items:center;gap:12px}
.userbox .u-name{font-weight:700;font-size:14px;line-height:1.15}
.userbox .u-role{font-size:11.5px;color:var(--mut);letter-spacing:.03em}
.rolebadge{padding:5px 12px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase}
.rolebadge.owner{background:rgba(243,164,0,.16);color:var(--gold)}
.rolebadge.pm,.rolebadge.lead{background:rgba(74,168,230,.16);color:var(--steel)}
.rolebadge.book{background:rgba(62,207,122,.16);color:var(--good)}
.rolebadge.est{background:rgba(192,139,255,.16);color:var(--hold)}
.rolebadge.crew{background:rgba(199,204,214,.15);color:var(--silver)}
.avatar{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;
  font-size:14px;color:#0e0e11;box-shadow:0 6px 16px -8px rgba(0,0,0,.7)}

/* ---------- standing demo marker (own grid row, directly under the header) ----------
   Every screen in here carries a dollar figure or a percentage, so every screen carries
   this line above it. Deliberate and permanent: it has no dismiss control, and it lives
   OUTSIDE #main so render() can never wipe it. Opaque base (not just a gold tint) because
   on phone the page scrolls underneath it. */
.demoband{grid-area:demo;display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:34px;padding:7px 20px;position:relative;
  /* above .topbar (z-index 5), which is deliberate: the bar is translucent with a
     backdrop blur, and a bright band painted BEHIND it gets smeared upward into the
     blur as a ghost. Painting above the bar keeps the band out of its backdrop.
     The two never overlap, so nothing is hidden. Still below modals/bell (60/70). */
  z-index:6;
  background:linear-gradient(90deg,rgba(243,164,0,.05),rgba(243,164,0,.14) 50%,rgba(243,164,0,.05)),
             var(--bg-elev);
  border-bottom:1px solid rgba(243,164,0,.26)}
.demoband::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(243,164,0,.32),transparent)}
.db-tag{flex:0 0 auto;font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#0e0e11;background:linear-gradient(180deg,var(--gold-2),var(--gold));
  border-radius:6px;padding:3px 9px;white-space:nowrap;
  box-shadow:0 5px 14px -7px rgba(243,164,0,.85)}
.db-txt{min-width:0;color:var(--gold-2);font-size:11.5px;font-weight:600;letter-spacing:.045em;
  text-align:center;line-height:1.35}
.db-txt b{color:var(--gold);font-weight:800}

/* sidebar / rail */
.sidebar{grid-area:side;background:linear-gradient(180deg,#0c0c0f,#08080a);border-right:1px solid var(--line);
  padding:20px 15px 16px;display:flex;flex-direction:column;gap:3px;overflow:auto;position:relative}
.sidebar::after{content:"";position:absolute;top:0;right:-1px;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,rgba(243,164,0,.22) 32%,transparent 78%)}
.side-brand{padding:4px 8px 18px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.side-brand .logo{justify-items:start;place-items:start}
.side-brand .logo img{height:30px;width:auto;opacity:.98}
.side-wordmark{font-family:var(--head);font-weight:800;font-size:19px;letter-spacing:.01em;margin-top:14px;
  background:linear-gradient(92deg,var(--gold-2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.side-tag{color:var(--mut);font-size:11px;letter-spacing:.03em;margin-top:3px}
.nav-sec{color:var(--mut-2);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  padding:18px 12px 8px;font-weight:700}
.nav{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;color:var(--mut);
  cursor:pointer;font-size:13.5px;font-weight:600;transition:.14s;border:1px solid transparent;position:relative}
.nav svg{width:19px;height:19px;flex:0 0 auto;opacity:.82;transition:.14s}
.nav .nav-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav:hover{background:rgba(255,255,255,.035);color:var(--ink-2)}
.nav:hover svg{opacity:1}
.nav.active{background:linear-gradient(90deg,rgba(243,164,0,.16),rgba(243,164,0,.02));
  color:var(--ink);border-color:rgba(243,164,0,.3)}
.nav.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 0 14px rgba(243,164,0,.55)}
.nav.active svg{color:var(--gold);opacity:1}
.side-skyline{margin:auto 0 0;padding:18px 8px 0;opacity:.5}
.side-skyline svg{width:100%;height:auto;display:block}
.sidebar .foot{padding:14px 12px 6px;border-top:1px solid var(--line);line-height:1.7}
.sidebar .foot .foot-co{color:var(--ink-2);font-size:12.5px;font-weight:700;letter-spacing:.01em}
.sidebar .foot .foot-loc{color:var(--mut);font-size:11.5px}
.sidebar .foot .foot-slogan{color:var(--gold-d);font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin-top:6px}
.sidebar .foot .foot-priv{display:flex;align-items:center;gap:7px;color:var(--mut-2);font-size:10.5px;
  letter-spacing:.04em;margin-top:8px}

.main{grid-area:main;overflow:auto;padding:30px 36px 52px;scroll-behavior:smooth}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.page-head .eyebrow{color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;margin-bottom:9px}
.page-head h2{margin:0;font-size:27px;font-weight:800;letter-spacing:-.01em;line-height:1.05}
.page-head .sub{color:var(--mut);font-size:13.5px;margin-top:8px}
.scope-note{background:rgba(74,168,230,.08);border:1px solid rgba(74,168,230,.26);color:#bfe0f4;
  border-radius:12px;padding:9px 15px;font-size:12.5px;display:flex;align-items:center;gap:9px}
.gate-note{background:rgba(62,207,122,.07);border:1px solid rgba(62,207,122,.28);color:#bff3d0;
  border-radius:12px;padding:9px 15px;font-size:12.5px;display:flex;align-items:center;gap:9px}
.gate-note svg,.scope-note svg{width:16px;height:16px;flex:0 0 auto}

/* ---------- filter / scope bar (concept chip row) ---------- */
.filterbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.fchip{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:11px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  color:var(--ink-2);font-size:12.5px;font-weight:600;letter-spacing:.01em;transition:.16s;cursor:default;
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset}
.fchip:hover{border-color:var(--line-2)}
.fchip svg{width:15px;height:15px;color:var(--gold);flex:0 0 auto;opacity:.9}
.fchip .fx{width:13px;color:var(--mut-2);margin-left:2px;transition:.16s}
.fchip.primary{border-color:rgba(243,164,0,.32);background:linear-gradient(180deg,rgba(243,164,0,.1),rgba(243,164,0,.03));color:#ffdca6}

/* ---------- HERO KPI CARDS ---------- */
.hero-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:22px}
@media(max-width:1240px){.hero-kpis{grid-template-columns:repeat(2,1fr)}}
.hcard{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  border-radius:var(--r);padding:22px 22px 20px;position:relative;overflow:hidden;box-shadow:var(--sh-card);
  transition:.22s cubic-bezier(.2,.7,.3,1)}
.hcard::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(243,164,0,.55),transparent);opacity:.7}
.hcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0,rgba(243,164,0,.06),transparent 42%)}
.hcard:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 56px -34px rgba(0,0,0,.95)}
.h-top{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.h-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(243,164,0,.08);border:1.5px solid rgba(243,164,0,.5);color:var(--gold);
  box-shadow:0 6px 16px -10px rgba(243,164,0,.6), inset 0 0 12px rgba(243,164,0,.06)}
.h-icon svg{width:18px;height:18px}
.h-label{color:var(--mut);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700}
.hcard.blue .h-icon{background:rgba(74,168,230,.08);border-color:rgba(74,168,230,.5);color:var(--steel);box-shadow:0 6px 16px -10px rgba(74,168,230,.55)}
.hcard.green .h-icon{background:rgba(62,207,122,.08);border-color:rgba(62,207,122,.5);color:var(--good);box-shadow:0 6px 16px -10px rgba(62,207,122,.55)}
.hcard.red .h-icon{background:rgba(255,92,92,.08);border-color:rgba(255,92,92,.5);color:var(--bad);box-shadow:0 6px 16px -10px rgba(255,92,92,.55)}
.hcard.purple .h-icon{background:rgba(192,139,255,.08);border-color:rgba(192,139,255,.5);color:var(--hold);box-shadow:0 6px 16px -10px rgba(192,139,255,.55)}
.h-mid{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.h-val{font-size:clamp(30px,2.5vw,42px);font-weight:800;font-family:var(--head);letter-spacing:-.02em;line-height:.98;
  font-variant-numeric:tabular-nums;color:#fff}
.h-mid .spark{flex:0 0 auto;margin-bottom:4px;opacity:.95}
.h-foot{margin-top:15px}
.delta{font-size:12px;display:flex;align-items:center;gap:6px;color:var(--mut);flex-wrap:wrap}
.delta b{font-variant-numeric:tabular-nums;font-weight:800}
.delta .up{color:var(--good)} .delta .down{color:var(--bad)}
.delta .up,.delta .down{font-size:11px}
.spark{flex:0 0 auto}

/* legacy compact KPI row (secondary metrics) */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:16px;margin-bottom:22px}
.kpi{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  border-radius:var(--r);padding:18px 19px;position:relative;overflow:hidden;box-shadow:var(--sh-card)}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.kpi.blue::before{background:var(--steel)} .kpi.green::before{background:var(--good)}
.kpi.red::before{background:var(--bad)} .kpi.purple::before{background:var(--hold)}
.kpi .k-label{color:var(--mut);font-size:11.5px;letter-spacing:.04em;margin-bottom:9px;
  display:flex;align-items:center;gap:7px;font-weight:600}
.kpi .k-label svg{width:15px;height:15px;opacity:.8}
.kpi .k-val{font-size:25px;font-weight:800;font-family:var(--head);letter-spacing:-.01em;line-height:1;
  font-variant-numeric:tabular-nums}
.kpi .k-sub{color:var(--mut-2);font-size:12px;margin-top:9px}
.kpi .k-sub .up{color:var(--good)} .kpi .k-sub .down{color:var(--bad)}

/* ---------- panels + grid ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1.85fr 1fr}
@media(max-width:1160px){.g2,.g3{grid-template-columns:1fr}}
.panel{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  border-radius:var(--r);padding:24px;margin-bottom:20px;box-shadow:var(--sh-card);position:relative}
.panel h3{margin:0 0 4px;font-size:15.5px;font-weight:800;letter-spacing:.01em}
.panel .ph-sub{color:var(--mut);font-size:12.5px;margin-bottom:18px}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px}
.panel-head h3{margin:0}
.panel-head .ph-sub{margin:0}
.ph-tools{display:flex;align-items:center;gap:8px}
.ph-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:9px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--ink-2);font-size:11.5px;font-weight:600;cursor:default}
.ph-chip svg{width:12px;height:12px;color:var(--mut)}
.viewall{color:var(--gold);font-size:12.5px;font-weight:700;cursor:pointer;letter-spacing:.01em;
  border:1px solid rgba(243,164,0,.28);background:rgba(243,164,0,.06);padding:7px 13px;border-radius:9px;transition:.14s}
.viewall:hover{color:#1a1206;background:linear-gradient(180deg,var(--gold-2),var(--gold));border-color:transparent}

/* ---------- area chart + stat strip ---------- */
.area-wrap{position:relative;width:100%}
.chart{width:100%;display:block}
.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}
.legend span{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:12.5px}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.statstrip{display:flex;flex-wrap:wrap;gap:8px 0;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.stat{flex:1 1 0;min-width:110px;padding:0 18px;border-left:1px solid var(--line)}
.stat:first-child{padding-left:0;border-left:none}
.stat .s-l{color:var(--mut);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px;font-weight:700}
.stat .s-v{font-size:19px;font-weight:800;font-family:var(--head);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat .s-v.pos{color:var(--good)} .stat .s-v.gold{color:var(--gold)}

/* ---------- recent jobs list ---------- */
.recent{display:flex;flex-direction:column}
.rj{display:flex;align-items:center;gap:12px;padding:13px 6px;border-bottom:1px solid var(--line);cursor:pointer;
  transition:.14s;border-radius:10px}
.rj:last-child{border-bottom:none}
.rj:hover{background:rgba(255,255,255,.03);padding-left:12px}
.rj-main{flex:1;min-width:0}
.rj-name{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rj-sub{font-size:11.5px;color:var(--mut-2);margin-top:3px;font-family:var(--mono)}
.rj-right{text-align:right;flex:0 0 auto}
.rj-amt{font-size:13.5px;font-weight:700;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.rj-right .pill{margin-top:6px}

/* ---------- tables ---------- */
.tbl-wrap{overflow:auto;border-radius:13px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:var(--panel-hd);color:var(--mut);text-align:left;padding:12px 15px;font-weight:700;
  letter-spacing:.05em;font-size:10.5px;text-transform:uppercase;position:sticky;top:0;white-space:nowrap;
  border-bottom:1px solid var(--line);z-index:1}
td{padding:12px 15px;border-bottom:1px solid var(--line);white-space:nowrap}
tr:last-child td{border-bottom:none}
tbody tr{transition:.1s}
tbody tr:hover{background:rgba(255,255,255,.025)}
tr.clickable{cursor:pointer}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.addr{max-width:230px;white-space:normal;color:var(--ink);font-weight:600}
.muted{color:var(--mut)}

/* ---------- table filter toolbar (search + column dropdowns · desktop + phone) ---------- */
.tbl-tools{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.tt-search{display:flex;align-items:center;gap:9px;flex:1 1 240px;min-width:0;height:40px;padding:0 13px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:11px;transition:.16s}
.tt-search:focus-within{border-color:rgba(243,164,0,.45);background:rgba(255,255,255,.045);box-shadow:0 0 0 3px rgba(243,164,0,.08)}
.tt-search svg{width:16px;height:16px;color:var(--mut);flex:0 0 auto}
.tt-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--ink);font-size:13.5px;font-family:var(--sans)}
.tt-search input::placeholder{color:var(--mut-2)}
.tt-sels{display:flex;gap:8px;flex-wrap:wrap}
.tbl-tools .selwrap{position:relative}
.tbl-tools select{height:40px;font-family:var(--sans);font-size:13px;border-radius:11px;padding:8px 13px;
  color:var(--ink-2);letter-spacing:.005em;max-width:190px}
.tt-count{color:var(--mut-2);font-size:12px;font-family:var(--mono);white-space:nowrap;margin-left:auto;font-variant-numeric:tabular-nums}
.tt-count b{color:var(--ink-2);font-weight:700}
.tbl-empty{text-align:center;color:var(--mut);padding:34px 20px;font-size:13.5px;border:1px dashed var(--line-2);
  border-radius:13px;margin-top:2px}

/* ---------- status pills ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.02em}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.paid{background:rgba(62,207,122,.13);color:#5fe08a}
.pill.outstanding{background:rgba(255,176,32,.14);color:#ffc35a}
.pill.holdback{background:rgba(192,139,255,.14);color:#d3aaff}
.pill.court{background:rgba(255,77,94,.15);color:#ff8792}
.pill.open{background:rgba(74,168,230,.14);color:#77c3ee}
.pill.not_started,.pill.other,.pill.unknown{background:rgba(150,160,172,.13);color:#aab4c0}
.pill.partial{background:rgba(255,194,26,.14);color:#ffd873}
.pill.toinv{background:rgba(243,164,0,.14);color:#ffab5c}

/* ---------- bars ---------- */
.barrow{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.barrow .bl{width:120px;color:var(--mut);font-size:13px;flex:0 0 auto}
.barrow .bt{flex:1;height:11px;background:var(--bg);border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.barrow .bf{height:100%;border-radius:6px;transition:width .6s cubic-bezier(.2,.7,.3,1);
  box-shadow:0 0 12px -2px currentColor}
.barrow .bv{width:150px;text-align:right;font-family:var(--mono);font-size:12.5px;flex:0 0 auto;color:var(--ink-2);font-variant-numeric:tabular-nums}
.barrow .bp{width:52px;text-align:right;font-family:var(--mono);font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}

/* ---------- drill-down modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(5,5,7,.76);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:24px;z-index:50;animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:linear-gradient(180deg,#17171c,#111114);border:1px solid var(--line-2);
  border-radius:20px;width:min(760px,100%);max-height:88vh;overflow:auto;box-shadow:var(--sh);
  animation:pop .24s cubic-bezier(.2,.8,.3,1)}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}
.modal .m-head{padding:22px 26px;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:flex-start;gap:16px}
.modal .m-head h3{margin:0 0 5px;font-size:18px;font-weight:800}
.modal .m-head .x{background:var(--panel-hd);border:1px solid var(--line-2);color:var(--mut);
  width:34px;height:34px;border-radius:11px;cursor:pointer;font-size:18px;flex:0 0 auto;transition:.14s}
.modal .m-head .x:hover{color:var(--ink);border-color:rgba(243,164,0,.5)}
.modal .m-body{padding:24px 26px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 28px;margin-bottom:8px}
.dfield{display:flex;flex-direction:column;gap:4px}
.dfield .dl{color:var(--mut);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.dfield .dv{font-size:15px;font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums}
.cost-split{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}

.empty{text-align:center;color:var(--mut);padding:46px 20px;font-size:14px}
.tag{display:inline-block;font-size:11px;padding:2px 9px;border-radius:7px;background:var(--panel-hd);
  color:var(--mut);border:1px solid var(--line);font-family:var(--mono)}

/* year filter select */
select{background:var(--bg-elev);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:8px 11px;font-family:var(--mono);font-size:13px;cursor:pointer}
select:focus{outline:none;border-color:rgba(243,164,0,.5)}

/* ---------- install (PWA) buttons ---------- */
.install-row{display:flex;justify-content:center;margin-top:16px}
.btn-install{padding:9px 16px;font-size:12.5px;display:inline-flex;align-items:center;gap:8px}
.btn-install .ic-dl{font-size:15px;line-height:1;transform:translateY(1px)}
.topbar-install{padding:8px 13px;font-size:12.5px}
.btn.is-disabled{opacity:.6;cursor:default;filter:none;transform:none;box-shadow:none}
@media(max-width:900px){.topbar-install{display:none !important}}

/* generic icon button (bell, etc.) */
.iconbtn{background:var(--panel-hd);border:1px solid var(--line-2);color:var(--mut);width:42px;height:42px;
  border-radius:12px;cursor:pointer;display:inline-grid;place-items:center;transition:.14s}
.iconbtn svg{width:18px;height:18px}
.iconbtn:hover{color:var(--gold);border-color:rgba(243,164,0,.5)}

/* ---------- Team & Access page ---------- */
.owner-note{background:rgba(243,164,0,.08);border-color:rgba(243,164,0,.30);color:#ffd9a1}
.grid.tg2{grid-template-columns:0.94fr 1.18fr;align-items:start}
@media(max-width:1160px){.grid.tg2{grid-template-columns:1fr}}
.add-panel{position:relative}
.addform{display:flex;flex-direction:column;gap:14px}
.addform label{display:flex;flex-direction:column;gap:7px;font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--mut);font-weight:700}
.addform input{background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;color:var(--ink);
  padding:12px 14px;font-size:14px;font-family:var(--sans);text-transform:none;letter-spacing:normal;
  font-weight:500;transition:.15s}
.addform input:focus{outline:none;border-color:rgba(243,164,0,.5);box-shadow:0 0 0 3px rgba(243,164,0,.1)}
.addform input:disabled{opacity:.55;cursor:not-allowed}
.addform .selwrap{position:relative}
.addform .selwrap select{width:100%;padding:12px 14px;font-family:var(--sans);font-size:14px;
  border-radius:12px;text-transform:none;letter-spacing:normal;font-weight:500}
.addform .btn{margin-top:4px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.addform .btn svg{width:17px;height:17px;stroke:#1a1206}
.role-legend{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;
  flex-direction:column;gap:10px}
.rl-item{display:flex;align-items:center;gap:11px;font-size:12px}
.rl-item .rolebadge{flex:0 0 auto}
.live-note{margin-top:16px;background:rgba(62,207,122,.06);border:1px solid rgba(62,207,122,.24);
  border-radius:13px;padding:13px 15px;display:flex;gap:11px;font-size:12px;line-height:1.65;color:var(--ink-2)}
.live-note svg{width:17px;height:17px;flex:0 0 auto;color:var(--good);margin-top:2px}
.live-note b{color:var(--ink)}
.team-table td{vertical-align:middle}
.tm-person{display:flex;align-items:center;gap:12px}
.tm-av{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:800;
  font-size:12.5px;color:#0e0e11;flex:0 0 auto;box-shadow:0 5px 14px -8px rgba(0,0,0,.7)}
.tm-name{font-weight:700;font-size:13.5px;color:var(--ink)}
.tm-mail{font-size:11.5px;color:var(--mut);display:flex;align-items:center;gap:6px;margin-top:2px}
.tm-mail svg{width:13px;height:13px;opacity:.7}
.tm-access{max-width:230px;white-space:normal;font-size:12px;line-height:1.5}
.tm-login{font-size:12px;color:var(--ink-2)}
.tm-login .tm-dot{color:var(--mut-2)}
.tm-actions{white-space:nowrap;text-align:right}
.tm-actions .iconbtn{width:32px;height:32px;border-radius:9px;background:var(--panel-hd);margin-left:6px;vertical-align:middle}
.tm-actions .iconbtn svg{width:15px;height:15px}
.tm-actions .iconbtn.danger:hover{color:var(--bad);border-color:rgba(255,92,92,.5)}
.tm-seed{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut-2);
  border:1px dashed var(--line-2);border-radius:8px;padding:4px 9px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:80;
  background:linear-gradient(180deg,#1a1a20,#131317);border:1px solid var(--line-2);border-radius:14px;
  padding:13px 17px;display:flex;gap:11px;align-items:flex-start;max-width:min(520px,92vw);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.8);opacity:0;transition:.3s cubic-bezier(.2,.8,.3,1);
  font-size:13px;line-height:1.5;color:var(--ink-2)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast b{color:var(--ink);font-weight:700}
.toast-ic{flex:0 0 auto;color:var(--gold);margin-top:1px}
.toast-ic svg{width:18px;height:18px}

/* ---------- install sheet ---------- */
.sheet-bg{position:fixed;inset:0;background:rgba(5,5,7,.74);backdrop-filter:blur(6px);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .18s ease}
.sheet{position:relative;width:min(420px,100%);background:linear-gradient(180deg,#17171c,#0f0f12);
  border:1px solid var(--line-2);border-radius:22px;padding:26px 24px 20px;box-shadow:var(--sh);
  animation:pop .26s cubic-bezier(.2,.8,.3,1)}
.sheet-grab{display:none}
.sheet-x{position:absolute;top:16px;right:16px;background:var(--panel-hd);border:1px solid var(--line-2);
  color:var(--mut);width:32px;height:32px;border-radius:10px;cursor:pointer;font-size:15px;transition:.14s}
.sheet-x:hover{color:var(--ink);border-color:rgba(243,164,0,.5)}
.sheet-app{display:flex;align-items:center;gap:15px;margin-bottom:16px}
.sheet-icon{width:62px;height:62px;border-radius:16px;flex:0 0 auto;
  box-shadow:0 12px 28px -12px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.05) inset}
.sheet-title{font-family:var(--head);font-size:19px;font-weight:800;letter-spacing:.005em}
.sheet-sub{color:var(--mut);font-size:12.5px;margin-top:3px;letter-spacing:.02em}
.sheet-blurb{color:var(--ink-2);font-size:13px;line-height:1.6;margin-bottom:18px}
.sheet-blurb b{color:var(--ink)}
.sheet-install{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px;font-size:14.5px}
.sheet-install .ic-dl{font-size:16px;transform:translateY(1px)}
.sheet-steps{margin-top:13px;color:var(--mut);font-size:12px;line-height:1.6;text-align:center}
.sheet-steps b{color:var(--ink-2)}
.sheet-ok{background:rgba(62,207,122,.08);border:1px solid rgba(62,207,122,.26);color:#bff3d0;
  border-radius:13px;padding:12px 14px;font-size:12.5px;display:flex;align-items:center;gap:9px}
.sheet-ok svg{width:16px;height:16px;flex:0 0 auto}
.sheet-demo{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);color:var(--mut-2);
  font-size:11.5px;line-height:1.6;display:flex;gap:9px;align-items:flex-start}
.sheet-demo svg{width:14px;height:14px;flex:0 0 auto;margin-top:1px;color:var(--gold-d)}

/* ---------- hero delta: gold descriptive value ---------- */
.delta b.gold{color:var(--gold-2)}

/* ---------- chart legend inline in panel head (concept framing) ---------- */
.ph-tools .legend{margin-top:0;gap:16px;align-items:center}
.ph-tools .legend span{font-size:12px;color:var(--mut)}
.ph-tools .legend i{width:9px;height:9px;border-radius:2px}

/* ---------- Recent Jobs table (concept: Job · Client · Status · Type · Value) ---------- */
.rjt-wrap{border:none;border-radius:0;overflow-x:auto}
table.rjt{font-size:13px}
.rjt th{background:transparent;border-bottom:1px solid var(--line);padding:8px 10px 10px;
  font-size:10px;letter-spacing:.09em;color:var(--mut-2)}
.rjt td{padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.05);white-space:nowrap;vertical-align:middle}
.rjt tbody tr:last-child td{border-bottom:none}
.rjt tbody tr{cursor:pointer;transition:.12s}
.rjt tbody tr:hover{background:rgba(243,164,0,.045)}
.rjt th:first-child,.rjt td:first-child{padding-left:2px}
.rjt th:last-child,.rjt td:last-child{padding-right:2px}
.rjt-id{color:var(--gold);font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.01em}
.rjt-client{font-weight:600;color:var(--ink);max-width:190px;overflow:hidden;text-overflow:ellipsis}
.rjt-type{color:var(--mut);font-size:12.5px}
.rjt-val{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ops{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;white-space:nowrap}
.ops .ops-ic{width:15px;height:15px;flex:0 0 auto;stroke-width:2}
.ops.done{color:#54d886}
.ops.prog{color:var(--gold-2)}
.ops.pend{color:#98a1ad}

/* ==========================================================================
   RESPONSIVE — tablet
   ========================================================================== */
@media(max-width:1024px){
  #app{grid-template-columns:210px 1fr}
  .main{padding:26px 24px 48px}
  .topsearch{flex:0 1 260px}
}

/* ==========================================================================
   RESPONSIVE — PHONE / installed app (premium mobile app shell)
   Rail becomes a fixed bottom tab bar; big hero numbers; touch targets.
   ========================================================================== */
@media(max-width:720px){
  /* THE PAGE ITSELF SCROLLS, not a box inside it (2026-09-16 phone fix).
     `html,body{height:100%}` + `body{overflow-y:auto}` made <body> a fixed 844px
     scroll container that swallowed the whole app. Consequences on a real phone:
     window.scrollTo() did nothing, scroll restoration never fired, the browser's
     URL bar could not collapse, and render()'s "go back to the top" reset was
     aimed at an element that was not the scroller — so tapping a new tab left you
     3000px down the previous page with its heading at -2844px. Letting the
     document scroll fixes all four at once. The root still clips sideways. */
  html,body{height:auto;min-height:100%;max-width:100%}
  /* `overflow-x:hidden` here would force overflow-y to compute to `auto` and make
     <body> a scroll container all over again. The sideways backstop is the root
     rule `html{overflow-x:hidden}` at the top of this file, which clips the
     viewport itself — body does not need to repeat it. */
  body{overflow:visible}
  /* the login joins the normal page flow too, so it scrolls natively like any page */
  #login{position:static;min-height:100vh;overflow:visible;
    padding:calc(20px + env(safe-area-inset-top)) 15px calc(28px + env(safe-area-inset-bottom))}
  #loginLogo img{width:min(250px,72vw)}
  .role-cards{grid-template-columns:1fr;gap:12px}

  #app{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;
    grid-template-areas:"top" "demo" "main";height:auto;min-height:100vh}

  /* top brand bar */
  .topbar{height:58px;padding:0 15px;gap:10px;position:sticky;top:0;
    padding-top:max(0px,env(safe-area-inset-top))}

  /* the demo band pins immediately under the bar and stays there for the whole scroll.
     58px is exact — box-sizing is border-box, so the safe-area padding is INSIDE the
     bar's declared height and must not be added again here. Sits at the top of the
     screen, so it never touches the bottom tab bar (z-index 40). */
  .demoband{position:sticky;top:58px;min-height:30px;padding:6px 12px;gap:8px}
  .db-tag{font-size:9px;letter-spacing:.13em;padding:3px 7px}
  .db-txt{font-size:10.5px;letter-spacing:.02em}
  .tb-logo{display:grid}
  .topsearch{display:none}                 /* search collapses on phone */
  .mockpill{display:none}
  .bell{width:36px;height:36px;border-radius:11px}
  .userbox{gap:8px}
  .userbox>div:first-child{display:none}   /* drop the 2-line-wrapping "Ali Makki" — AM avatar + OWNER badge carry identity, keeps the bar one clean line */
  .userbox .u-name{font-size:12.5px}
  .userbox .u-role{display:none}
  .rolebadge{padding:4px 9px;font-size:9.5px;letter-spacing:.06em}
  .avatar{width:34px;height:34px;border-radius:10px;font-size:12.5px}
  #btnSignout{padding:7px 11px !important;font-size:11.5px;white-space:nowrap}   /* no more "Sign / out" wrap */

  /* rail → bottom tab bar */
  .sidebar{grid-area:unset;position:fixed;left:0;right:0;bottom:0;top:auto;z-index:40;
    flex-direction:row;gap:2px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    border-right:none;border-top:1px solid var(--line);background:rgba(10,10,13,.96);
    backdrop-filter:blur(14px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    box-shadow:0 -18px 40px -24px rgba(0,0,0,.9)}
  .sidebar::-webkit-scrollbar{display:none}
  .sidebar::after{display:none}
  #navList{display:flex;flex-direction:row;gap:2px;flex:1;min-width:0}   /* nav wrapper → horizontal tab row */
  .side-brand,.sidebar .foot,.nav-sec,.side-skyline{display:none}
  .nav{flex:1 1 0;flex-direction:column;gap:5px;padding:7px 6px;min-width:0;overflow:hidden;
    border:none;border-radius:12px;font-size:10px;font-weight:700;letter-spacing:.01em;
    color:var(--mut-2);text-align:center;justify-content:center}   /* tabs SHARE the bar — all fit, no sideways scroll */
  .nav svg{width:21px;height:21px;opacity:.9}
  .nav .nav-lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .nav:hover{background:none}
  .nav.active{background:rgba(243,164,0,.1);color:var(--gold);border:none}
  .nav.active svg{color:var(--gold)}
  .nav.active::before{display:none}

  /* `overflow-x:hidden` here made .main a scroll container, and a scroll container
     is what `position:sticky` sticks to — so the sub-tab row, which lives inside
     .main, was sticking to a box that never scrolls, i.e. never sticking at all
     (it rode 1394px off the top of the screen). .main is a plain block on phone
     now; the sideways backstop is `html{overflow-x:hidden}` at the top of this
     file. Bottom padding clears the 68px tab bar. (2026-09-16 phone fix) */
  .main{padding:18px 15px 96px;overflow:visible;min-width:0}
  .page-head{margin-bottom:18px}
  .page-head .eyebrow{font-size:10px;margin-bottom:6px}
  .page-head h2{font-size:22px}
  .page-head .sub{font-size:12.5px}
  .scope-note,.gate-note{width:100%}

  .filterbar{gap:8px;margin-bottom:18px;flex-wrap:wrap}   /* chips WRAP — never a sideways scroll strip */
  .fchip{flex:0 1 auto;min-width:0}

  .hero-kpis{grid-template-columns:1fr 1fr;gap:12px}
  .hcard{padding:16px 16px 15px;border-radius:16px}
  .hcard::before{left:16px;right:16px}
  .h-top{gap:9px;margin-bottom:12px}
  .h-icon{width:32px;height:32px}
  .h-icon svg{width:15px;height:15px}
  .h-label{font-size:10px;letter-spacing:.08em}
  .h-val{font-size:clamp(24px,7.5vw,32px)}
  .h-mid .spark{display:none}               /* keep the big number the hero on phone */
  .h-foot{margin-top:11px}

  .g2,.g3,.grid.tg2{grid-template-columns:1fr}
  .grid,.panel,.hero-kpis,.kpis{min-width:0}   /* 1fr tracks may shrink — no wide child can blow a column past the screen */
  .panel{padding:18px;border-radius:16px;min-width:0}
  .stat{min-width:calc(50% - 9px);flex:0 0 calc(50% - 9px);padding:12px 0 0;border-left:none;
    border-top:1px solid var(--line)}
  .stat:first-child{padding-left:0}
  .stat:nth-child(-n+2){border-top:none}
  .statstrip{gap:0;margin-top:16px;padding-top:0;border-top:none}

  .kpis{grid-template-columns:1fr 1fr;gap:12px}
  .kpi .k-val{font-size:22px}

  .viewall{padding:6px 11px}

  /* ==== BAR ROWS ("Where the money goes", cost mix, pipeline, outstanding-by-type) ====
     ROOT CAUSE of the phone side-scroll: desktop .barrow uses fixed widths
     (bl 120 + bv 150 + bp 52 + gaps ≈ 361px) that never shrink, so its min-content
     blew out the 1fr grid track → panel rendered 401px → main scrolled 26px.
     Phone reflow: label + value + % on one wrapping line, bar drops to its own
     full-width line. No fixed px anywhere → min-content ≈ 0 → nothing overflows. */
  .barrow{flex-wrap:wrap;gap:5px 10px;margin-bottom:15px}
  .barrow .bl{width:auto;flex:1 1 auto;min-width:0;font-size:12.5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .barrow .bv{width:auto;flex:0 0 auto;margin-left:auto;font-size:12.5px}
  .barrow .bp{width:auto;flex:0 0 auto;min-width:32px;text-align:right}
  .barrow .bt{order:5;flex:1 1 100%;width:100%}   /* bar → full-width line under label/value */
  .barrow .bt[style*="hidden"]{display:none}       /* the book "Total" row has no bar */

  /* ---- filter toolbar on phone: full-width search, dropdowns share a row ---- */
  .tbl-tools{gap:8px}
  .tt-search{flex:1 1 100%;height:38px}
  .tt-sels{width:100%;gap:8px}
  .tbl-tools .selwrap{flex:1 1 calc(50% - 4px);min-width:0}
  .tbl-tools select{width:100%;max-width:none}
  .tt-count{display:none}

  /* ==== DATA TABLES → premium stacked cards (ZERO horizontal scroll) ====
     Every row becomes a self-contained card of label:value pairs, so nothing
     ever scrolls left/right on a phone. Scoped entirely to this ≤720px query —
     desktop tables are untouched. Labels come from each table's own <thead>
     (added at render time as data-label, inert on desktop). */
  .tbl-wrap,.rjt-wrap{overflow:visible;border:none;border-radius:0;background:none}
  table,table tbody,table tr,table td{display:block;width:100%}
  table thead{display:none}
  table tr{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
    border-radius:14px;padding:2px 15px 4px;margin-bottom:12px;box-shadow:var(--sh-card)}
  table tr:last-child{margin-bottom:0}
  table tbody tr:hover{background:linear-gradient(180deg,var(--panel),var(--panel-2))}
  table td{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;
    white-space:normal;text-align:right;font-size:13px;padding:10px 0;border-bottom:1px solid var(--line)}
  table tr td:last-child{border-bottom:none}
  table td::before{content:attr(data-label);flex:0 0 auto;max-width:46%;text-align:left;
    color:var(--mut);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;white-space:nowrap}
  table td:not([data-label])::before{content:""}
  table td:empty{display:none}
  td.num,th.num{text-align:right}
  table td .pill,table td .ops{margin-left:auto}
  table td .bt{flex:1 1 auto;min-width:90px;margin-left:auto}
  /* card header = the row's title (project / person / client) */
  table td.m-title{justify-content:flex-start;text-align:left;padding:12px 0 11px;
    border-bottom:1px solid var(--line-2);margin-bottom:2px;font-size:14.5px;font-weight:800;
    color:var(--ink);white-space:normal;max-width:none}
  table td.m-title::before{display:none}
  table td.m-title .tm-person{width:100%}
  .addr,.rjt-client,.rjt-type{max-width:none;white-space:normal}
  /* summary / total rows */
  table tr.m-sum{background:var(--panel-hd)}
  table tr.m-sum td{border-bottom:none;padding:7px 0}
  table tr.m-sum td:not([data-label]){justify-content:flex-start;font-weight:800;color:var(--ink)}
  .ops{font-size:12.5px;gap:6px}

  /* install sheet becomes a bottom sheet */
  .sheet-bg{align-items:flex-end;padding:0}
  .sheet{width:100%;border-radius:24px 24px 0 0;padding-top:14px;
    padding-bottom:calc(20px + env(safe-area-inset-bottom));
    animation:sheetUp .3s cubic-bezier(.2,.8,.3,1)}
  .sheet-grab{display:block;width:40px;height:4px;border-radius:3px;background:var(--line-2);margin:0 auto 16px}
  .sheet-x{top:12px}

  .modal-bg{align-items:flex-end;padding:0}
  .modal{border-radius:22px 22px 0 0;max-height:92vh;animation:sheetUp .3s cubic-bezier(.2,.8,.3,1)}
  .detail-grid{grid-template-columns:1fr 1fr;gap:13px 18px}
  .modal .m-body{padding-bottom:calc(24px + env(safe-area-inset-bottom))}

  /* ==== 2026-09-16 phone pass: the rest of the "cut off / can't reach it" family ==== */

  /* (a) CHIP CELLS. On phone a table row is a card and each <td> is a flex line:
     label on the left, value on the right, `flex-wrap:nowrap`. A cell holding
     several certificate/permit chips (.cchip on Tickets, My Crew and Safety;
     .cpill on the Project Book) therefore laid its chips out in one unbreakable
     line 420px wide inside a 290px cell — and .main clips sideways, so the tail
     was simply gone: Project Book ran to 494px, Safety 475px, Tickets and My
     Crew 433px, none of it reachable. Give the chips their own lines under the
     label; nothing is cut and nothing scrolls sideways. */
  table td{flex-wrap:wrap}
  table td:has(.cchip),table td:has(.cpill){display:block;text-align:left}
  table td:has(.cchip)::before,table td:has(.cpill)::before{display:block;max-width:none;margin-bottom:7px}
  .cchip,.cpill{max-width:100%;white-space:normal}
  .cpill{margin:2px 4px 2px 0}

  /* (b) TAP TARGETS. Measured before the fix: select 14px, input 18px,
     .mp-chip 26px, .btn.ghost 28px, .viewall 29px, .subtab 30px, bell 36px,
     .btn 40px — all under the 44px minimum for a thumb. */
  .btn,.viewall,.subtab,select,.selwrap select,.tt-search,.mp-chip,.fchip,.iconbtn,
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]){min-height:44px}
  .btn,.viewall,.subtab{display:inline-flex;align-items:center;justify-content:center}
  select,input{padding-block:10px}
  .iconbtn.bell{width:44px;height:44px}
  .mp-chip{display:inline-flex;align-items:center}
  #btnSignout,.topbar .btn{min-height:44px}    /* fits the 58px bar with 7px to spare */

  /* (d) SCROLL CHAINING. The schedule board and the timeline scroll sideways
     inside their panel (this is deliberate — a 4-week board does not fit a
     390px screen). Contain the gesture so swiping the board does not drag the
     page, and so scrolling to the end of a modal does not scroll the page
     behind it. */
  .board-panel{overscroll-behavior-x:contain}
  .modal,.sheet{overscroll-behavior:contain}
  .sidebar{overscroll-behavior-x:contain}
}
@media(max-width:400px){
  .hero-kpis{grid-template-columns:1fr}
  .h-val{font-size:34px}
  .h-mid .spark{display:block}               /* single-column: room for the spark again */
}
@keyframes sheetUp{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}

/* ultrawide comfort */
@media(min-width:2000px){.main{padding:38px 64px 64px}.hero-kpis{gap:22px}#app{grid-template-columns:280px 1fr}}

@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

/* ==========================================================================
   OWNER-OVERHAUL ADDITIONS (clickable KPIs · working period filter · chart
   hover tooltip · uniform panel row + internal scroll · job switcher ·
   real notifications · real top-search)
   ========================================================================== */

/* --- clickable hero KPI cards (navigate) --- */
.hcard.clickable{cursor:pointer}
.hcard.clickable:focus-visible{outline:none;border-color:rgba(243,164,0,.6);
  box-shadow:0 0 0 3px rgba(243,164,0,.16),var(--sh-card)}
.h-go{position:absolute;top:16px;right:16px;color:var(--mut-2);transform:rotate(-90deg);
  transition:.18s;pointer-events:none}
.h-go-ic{width:15px;height:15px}
.hcard.clickable:hover .h-go{color:var(--gold);right:12px}

/* --- working period filter (real <select> styled like the old chip) --- */
.period-sel{position:relative;display:inline-flex;align-items:center;gap:5px;padding:6px 9px 6px 11px;
  border-radius:9px;background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--ink-2);
  font-weight:600;cursor:pointer;transition:.14s}
.period-sel:hover{border-color:rgba(243,164,0,.4);color:var(--ink)}
.period-sel>svg{width:12px;height:12px;color:var(--mut);flex:0 0 auto}
.period-sel .period-chev{margin-left:-1px}
.period-sel select{appearance:none;-webkit-appearance:none;background:none;border:none;color:inherit;
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.02em;cursor:pointer;padding:0 2px;outline:none}
.period-sel select:focus-visible{outline:2px solid rgba(243,164,0,.55);outline-offset:2px;border-radius:4px}
.period-sel option{background:#17171c;color:var(--ink)}

/* --- chart hover tooltip --- */
.chart-hover{opacity:0;transition:opacity .12s;pointer-events:none}
.chart-hover.on{opacity:1}
.ch-guide{stroke:rgba(255,255,255,.34);stroke-width:1;stroke-dasharray:3 4}
.ch-dot{stroke:#0c0c0f;stroke-width:2}
.chart-tip{position:absolute;left:0;top:0;z-index:7;pointer-events:none;opacity:0;transform:translateY(3px);
  transition:opacity .12s,transform .12s;min-width:134px;
  background:linear-gradient(180deg,#1b1b21,#141418);border:1px solid var(--line-2);border-radius:11px;
  padding:10px 12px;box-shadow:0 18px 38px -18px rgba(0,0,0,.92)}
.chart-tip.on{opacity:1;transform:translateY(0)}
.ct-date{color:var(--mut);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;margin-bottom:7px}
.ct-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:4px}
.ct-row span{display:flex;align-items:center;gap:7px;color:var(--ink-2);font-size:12px}
.ct-row i{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.ct-row b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:#fff;font-size:12.5px}

/* --- uniform panel row under the trend chart (kills the dead space) --- */
.scope-mini{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:12px;margin:-4px 0 18px}
.scope-mini svg{width:14px;height:14px;color:var(--mut-2);flex:0 0 auto}
.eqrow{grid-template-columns:1fr}
.panel.eqp{display:flex;flex-direction:column;margin-bottom:0;overflow:hidden}
.eqp .panel-head{flex:0 0 auto;margin-bottom:14px}
.eqp-tools{flex:0 0 auto}
.eqp-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.eqp-body.center{display:flex;align-items:center;justify-content:center;overflow:hidden}
.eqp-body.spread{display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;gap:6px}
/* compact, never-overflow cost bars (label + value + % on one line, bar full-width below)
   so "Where the money goes" fits a narrow 3-up panel without blowing its column. */
.eqp-body.spread .barrow{flex-wrap:wrap;gap:4px 10px;margin-bottom:0;align-items:baseline}
.eqp-body.spread .barrow .bl{width:auto;flex:1 1 auto;min-width:0;font-size:12.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eqp-body.spread .barrow .bv{width:auto;flex:0 0 auto;margin-left:auto;font-size:12px}
.eqp-body.spread .barrow .bp{width:auto;flex:0 0 auto;min-width:34px;text-align:right}
.eqp-body.spread .barrow .bt{order:5;flex:1 1 100%;width:100%;margin-top:2px}
.eqp-scroll{max-height:min(58vh,520px);overflow:auto;overscroll-behavior:contain}
.eqp-scroll .rjt th{position:sticky;top:0;background:#14141a;z-index:2}
@media(min-width:1400px){
  .eqrow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .panel.eqp{height:430px}
  .eqp-scroll{max-height:none}
  .eqp .col-type{display:none}          /* keep the mini table readable in the narrower 3-up panel */
  .eqp .rjt-client{max-width:140px}
}

/* --- owner overview: 2-col split — LEFT stack (trend chart at normal size + Where the
   money goes + Payment status) · RIGHT one tall Recent Jobs panel spanning the full
   height of the left stack. Chart is column-width (not full-bleed) so it never dominates. --- */
.owner-split{grid-template-columns:1fr;align-items:stretch}
.owner-col{display:flex;flex-direction:column;gap:20px;min-width:0}
.owner-split>.owner-col>.panel{margin-bottom:0}
.owner-left .panel.eqp.owner-mini{height:auto;overflow:visible}   /* natural height in the stack, not the 3-up 430px */
.owner-left .panel.eqp.owner-mini .eqp-body{overflow:visible}
@media(min-width:1100px){
  .owner-split{grid-template-columns:minmax(0,1.4fr) minmax(360px,1fr)}
  .owner-right>.panel.eqp{height:100%}                              /* fill the full row height = left stack */
  .owner-right>.panel.eqp .eqp-body.eqp-scroll{max-height:none}     /* table scroll fills the tall panel */
}
/* keep the revenue-vs-profit line chart at a normal size — never let it dominate
   the page regardless of column width (cap its width, center it) */
.owner-left .trend-panel .area-wrap{max-width:760px;margin:0 auto}

/* --- internal scroll: long list tables scroll inside their panel, not the page --- */
@media(min-width:721px){
  .tbl-wrap:not(.rjt-wrap){max-height:min(64vh,660px);overscroll-behavior:contain}
  .modal{overscroll-behavior:contain}
}

/* --- per-job P&L job switcher (change the job number) --- */
.m-switch{display:flex;align-items:center;gap:10px;padding:12px 26px;border-bottom:1px solid var(--line);
  background:var(--panel-2)}
.m-switch .ms-label{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);font-weight:800}
.ms-arrow{width:32px;height:32px;border-radius:9px;background:var(--panel-hd);border:1px solid var(--line-2);
  color:var(--ink-2);cursor:pointer;display:inline-grid;place-items:center;transition:.14s;flex:0 0 auto}
.ms-arrow:hover:not(:disabled){color:var(--gold);border-color:rgba(243,164,0,.5)}
.ms-arrow:disabled{opacity:.35;cursor:not-allowed}
.ms-arrow svg{width:16px;height:16px}
.ms-prev{transform:rotate(90deg)}
.ms-next{transform:rotate(-90deg)}
.ms-selwrap{position:relative;flex:1 1 auto;min-width:0}
.ms-selwrap select{width:100%;background:var(--bg-elev);border:1px solid var(--line);border-radius:10px;
  color:var(--ink);font-family:var(--sans);font-size:13px;font-weight:600;padding:9px 12px;cursor:pointer;
  text-overflow:ellipsis}
.ms-selwrap select:focus{outline:none;border-color:rgba(243,164,0,.5);box-shadow:0 0 0 3px rgba(243,164,0,.1)}
.ms-count{font-family:var(--mono);font-size:11.5px;color:var(--mut-2);white-space:nowrap;flex:0 0 auto}

/* --- real notifications popover (bell) --- */
.bellpop{position:fixed;z-index:70;width:300px;background:linear-gradient(180deg,#17171c,#111114);
  border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--sh);overflow:hidden;
  animation:pop .2s cubic-bezier(.2,.8,.3,1)}
.bp-head{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;border-bottom:1px solid var(--line)}
.bp-head b{font-size:13.5px}
.bp-clear{font-size:11.5px;color:var(--gold);cursor:pointer;font-weight:600}
.bp-clear:hover{text-decoration:underline}
.bp-list{max-height:320px;overflow:auto;overscroll-behavior:contain}
.bp-item{display:flex;gap:11px;padding:12px 15px;border-bottom:1px solid var(--line);align-items:flex-start}
.bp-item:last-child{border-bottom:none}
.bp-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(243,164,0,.1);border:1px solid rgba(243,164,0,.3);color:var(--gold)}
.bp-ic svg{width:15px;height:15px}
.bp-ic.red{background:rgba(255,92,92,.1);border-color:rgba(255,92,92,.35);color:var(--bad)}
.bp-ic.green{background:rgba(62,207,122,.1);border-color:rgba(62,207,122,.35);color:var(--good)}
.bp-ic.blue{background:rgba(74,168,230,.1);border-color:rgba(74,168,230,.35);color:var(--steel)}
.bp-t{font-size:12.5px;color:var(--ink-2);font-weight:600;line-height:1.4}
.bp-time{font-size:11px;color:var(--mut-2);margin-top:3px}
.bp-foot{padding:9px 15px;font-size:11px;color:var(--mut-2);text-align:center;border-top:1px solid var(--line);
  background:var(--panel-2);display:flex;align-items:center;justify-content:center;gap:7px}
.bp-foot svg{width:12px;height:12px}
.bell.read::after{display:none}

/* --- real top-search: dim when the current page has nothing to filter --- */
.topsearch.is-off{opacity:.5}
.topsearch input:disabled{cursor:not-allowed}

/* --- phone overrides for the new pieces --- */
@media(max-width:720px){
  .trend-panel .panel-head{flex-wrap:wrap;gap:10px}
  .trend-panel .ph-tools{flex-wrap:wrap}
  .eqrow{grid-template-columns:1fr}
  .panel.eqp{height:auto;overflow:visible}
  .eqp-body,.eqp-body.center,.eqp-body.spread{overflow:visible;display:block}
  .eqp-scroll{max-height:none;overflow:visible}
  .eqp .col-type{display:none}
  .m-switch{flex-wrap:wrap;padding:12px 16px}
  .ms-selwrap{flex:1 1 100%;order:3}
  .ms-count{margin-left:auto}
  .bellpop{width:calc(100vw - 20px);right:10px !important}
  .h-go{top:14px;right:14px}
}


/* ================= TICKETS & CERTIFICATES ================= */
/* ticket state, one colour language everywhere: ok / soon / warn / bad / archived */
.cpill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;border:1px solid transparent}
.cpill.ok{background:rgba(62,207,122,.13);color:#5fe08a;border-color:rgba(62,207,122,.3)}
.cpill.soon{background:rgba(255,176,32,.11);color:#ffc86a;border-color:rgba(255,176,32,.3)}
.cpill.warn{background:rgba(255,140,32,.14);color:#ffab54;border-color:rgba(255,140,32,.42)}
.cpill.bad{background:rgba(255,77,94,.14);color:#ff8792;border-color:rgba(255,77,94,.42)}
.cpill.arch{background:rgba(140,140,150,.12);color:var(--mut);border-color:var(--line-2)}
.cchip{display:inline-block;padding:3px 8px;margin:2px 4px 2px 0;border-radius:7px;font-family:var(--mono);
  font-size:10.5px;font-weight:700;letter-spacing:.03em;border:1px solid transparent}
.cchip.ok{background:rgba(62,207,122,.12);color:#5fe08a;border-color:rgba(62,207,122,.26)}
.cchip.soon{background:rgba(255,176,32,.1);color:#ffc86a;border-color:rgba(255,176,32,.26)}
.cchip.warn{background:rgba(255,140,32,.13);color:#ffab54;border-color:rgba(255,140,32,.38)}
.cchip.bad{background:rgba(255,77,94,.13);color:#ff8792;border-color:rgba(255,77,94,.38)}
.cchip.arch{background:rgba(140,140,150,.1);color:var(--mut-2);border-color:var(--line)}
.cchip.need{background:rgba(243,164,0,.1);color:var(--gold-2);border-color:rgba(243,164,0,.34)}
.chipcell{max-width:260px}
.crewbadge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;
  background:rgba(74,168,230,.14);color:#8fd0f5;border:1px solid rgba(74,168,230,.28)}
tr.cert-row.bad td{background:rgba(255,77,94,.045)}
tr.cert-row.warn td{background:rgba(255,140,32,.04)}
tr.cert-row.arch td{opacity:.72}

/* a panel that is shouting at you */
.panel.warnpanel{border-color:rgba(255,140,32,.3);box-shadow:0 0 0 1px rgba(255,140,32,.12),var(--sh-card)}
/* an icon inside a panel heading is a bullet, not a hero image — pin the size */
.panel.warnpanel h3 svg,.panel.assignpanel h3 svg,.panel.hatpanel h3 svg{
  width:17px;height:17px;flex:0 0 auto;vertical-align:-3px;margin-right:6px}
.panel.warnpanel h3 svg{color:#ffab54}
.panel.assignpanel h3 svg{color:var(--gold)}
.panel.hatpanel h3 svg{color:var(--gold)}
.wrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.wrow:last-of-type{border-bottom:none}
.wrow .wl{font-weight:600;font-size:13.5px}

/* crew "Today" job card */
.panel.jobcard{background:linear-gradient(150deg,rgba(243,164,0,.09),var(--panel) 46%);
  border-color:rgba(243,164,0,.26)}
.jc-tag{display:flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:800}
.jc-tag svg{width:15px;height:15px}
.jc-addr{font-family:var(--head);font-size:30px;font-weight:800;line-height:1.12;margin:10px 0 20px;
  letter-spacing:-.01em}
.jc-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.jc-l{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut-2);margin-bottom:6px}
.jc-v{font-size:15px;font-weight:700}
.jc-note{display:flex;align-items:flex-start;gap:10px;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--line);color:var(--mut);font-size:12.5px;line-height:1.55}
.jc-note svg{width:16px;height:16px;flex:0 0 auto;color:var(--gold);margin-top:1px}

/* the code on the hard hat */
.hat-wrap{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.hat-qr{background:#fff;padding:10px;border-radius:14px;flex:0 0 auto;line-height:0;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.9)}
.hat-qr svg.qr,.pq-code svg.qr{width:168px;height:168px;display:block}
.hat-side{flex:1;min-width:210px;display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.hat-name{font-family:var(--head);font-size:20px;font-weight:800}
.hat-trade{color:var(--mut);font-size:13px}
.hat-code{font-size:13px;color:var(--gold-2);letter-spacing:.06em;padding:5px 10px;border-radius:8px;
  background:rgba(243,164,0,.08);border:1px solid rgba(243,164,0,.24)}
.hat-side .btn{margin-top:6px}
/* any icon sitting inside a button is a 16px glyph, never a hero graphic */
.hat-side .btn svg,.pq-side .btn svg,.warnpanel .btn svg,.scan-back svg{
  width:16px;height:16px;flex:0 0 auto;vertical-align:-3px;margin-right:7px}
.hat-side .btn,.pq-side .btn{display:inline-flex;align-items:center;justify-content:center}
.sr-exp{white-space:nowrap}
.hat-note{color:var(--mut);font-size:12px;line-height:1.55;margin-top:4px}
.person-qr{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:16px;border-radius:14px;
  background:var(--panel-2);border:1px solid var(--line)}
.pq-code{background:#fff;padding:8px;border-radius:12px;line-height:0;flex:0 0 auto}
.pq-code svg.qr{width:120px;height:120px}
.pq-side{flex:1;min-width:190px;display:flex;flex-direction:column;gap:7px;align-items:flex-start;font-size:13.5px}

/* the block — put a man on a crew */
.assign-form{display:grid;grid-template-columns:1.4fr 1.4fr auto;gap:14px;align-items:end}
.assign-form label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--mut);
  letter-spacing:.03em}
.assign-req{margin:16px 0 4px;font-size:12.5px;color:var(--mut)}
.assign-req .ar-lbl{margin-right:6px}
.ar-sub{color:var(--mut);font-size:12.5px;line-height:1.55;margin-top:3px;font-weight:400}
.assign-ok{display:flex;gap:13px;align-items:flex-start;margin-top:16px;padding:16px 18px;border-radius:14px;
  background:rgba(62,207,122,.08);border:1px solid rgba(62,207,122,.3)}
.assign-ok svg{width:22px;height:22px;flex:0 0 auto;color:#5fe08a}
.assign-block{margin-top:16px;border-radius:14px;overflow:hidden;
  background:rgba(255,77,94,.06);border:1px solid rgba(255,77,94,.36)}
.ab-head{display:flex;gap:13px;align-items:flex-start;padding:17px 18px;
  background:rgba(255,77,94,.09);border-bottom:1px solid rgba(255,77,94,.24)}
.ab-head svg{width:23px;height:23px;flex:0 0 auto;color:#ff8792}
.ab-list{padding:6px 18px}
.ab-item{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.ab-item:last-child{border-bottom:none}
.ab-item .cchip{margin-top:2px}
.ab-foot{display:flex;align-items:center;gap:9px;padding:13px 18px;color:var(--mut);font-size:12.5px;
  border-top:1px solid rgba(255,77,94,.2)}
.ab-foot svg{width:16px;height:16px;flex:0 0 auto}

/* ---- the scan: what the inspector gets ---- */
.scanpage{min-height:100vh;overflow:auto;padding:26px 16px 40px;display:flex;flex-direction:column;
  align-items:center;gap:16px;
  background:radial-gradient(900px 520px at 50% -10%, rgba(243,164,0,.10), transparent 62%),linear-gradient(180deg,#0a0a0c,#070708)}
.scan-card{width:min(560px,100%);background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh)}
.scan-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}
.scan-logo img{height:30px;width:auto}
.scan-who{display:flex;align-items:center;gap:15px;margin-bottom:16px}
.scan-av{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-weight:800;
  font-size:19px;color:#0e0e11;background:var(--silver);flex:0 0 auto}
.scan-name{font-family:var(--head);font-size:23px;font-weight:800;line-height:1.15}
.scan-trade{color:var(--mut);font-size:13px;margin-top:2px}
.scan-code{color:var(--gold-2);font-size:12px;letter-spacing:.07em;margin-top:5px}
.scan-verdict{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:13px;
  font-weight:800;font-size:14.5px;margin-bottom:20px;border:1px solid transparent}
.scan-verdict svg{width:20px;height:20px;flex:0 0 auto}
.scan-verdict.ok{background:rgba(62,207,122,.1);color:#5fe08a;border-color:rgba(62,207,122,.32)}
.scan-verdict.warn{background:rgba(255,140,32,.11);color:#ffab54;border-color:rgba(255,140,32,.36)}
.scan-verdict.bad{background:rgba(255,77,94,.11);color:#ff8792;border-color:rgba(255,77,94,.4)}
.scan-sec{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--mut-2);
  margin:20px 0 10px;font-weight:800}
.scan-list{display:flex;flex-direction:column;gap:9px}
.scan-list.dim{opacity:.72}
.scan-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;
  border-radius:12px;background:var(--panel-2);border:1px solid var(--line)}
.scan-row.bad{border-color:rgba(255,77,94,.36);background:rgba(255,77,94,.05)}
.scan-row.warn{border-color:rgba(255,140,32,.32);background:rgba(255,140,32,.04)}
.sr-name{font-weight:700;font-size:14px}
.sr-sub{color:var(--mut-2);font-size:11px;margin-top:3px}
.sr-right{text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:0 0 auto}
.sr-exp{font-size:11.5px;color:var(--mut)}
.scan-note{display:flex;align-items:flex-start;gap:10px;margin-top:22px;padding-top:16px;
  border-top:1px solid var(--line);color:var(--mut);font-size:12px;line-height:1.55}
.scan-note svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px}
.scan-back{margin-top:16px;display:inline-block;text-decoration:none;text-align:center}
.scan-bad{display:flex;align-items:center;gap:10px;color:#ff8792;font-weight:700}
.scan-bad svg{width:20px;height:20px}
.scan-foot{color:var(--mut-2);font-size:11.5px;letter-spacing:.04em}
.modal.scanmodal{width:min(520px,100%)}
.modal.scanmodal .scan-who{margin-bottom:14px}

/* ---- phone: everything above, at 390px ---- */
@media(max-width:720px){
  .role-cards{grid-template-columns:1fr;gap:12px}
  .jc-row{grid-template-columns:repeat(2,1fr);gap:14px}
  .jc-addr{font-size:23px}
  .assign-form{grid-template-columns:1fr}
  .assign-form .btn{width:100%}
  .hat-wrap{flex-direction:column;align-items:stretch}
  .hat-qr{align-self:center}
  .hat-qr svg.qr{width:200px;height:200px}
  .hat-side{align-items:flex-start}
  .hat-side .btn{width:100%;text-align:center;justify-content:center}
  .person-qr{flex-direction:column;align-items:stretch}
  .pq-code{align-self:center}
  .chipcell{max-width:none}
  .scan-card{padding:18px}
  .scan-av{width:48px;height:48px;font-size:17px}
  .scan-name{font-size:20px}
  .scan-row{flex-direction:column;align-items:flex-start;gap:8px}
  .sr-right{align-items:flex-start;text-align:left;flex-direction:row;gap:10px}
}

/* ================= FIELD OPS SCREENS (Fieldflo build, 2026-09-10) ================= */
/* per-screen demo note — sits under the page, says the numbers are invented */
.demo-note{margin-top:18px;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;
  background:rgba(243,164,0,.06);border:1px dashed rgba(243,164,0,.35);color:var(--mut);font-size:12.5px;line-height:1.5}
.demo-note svg{width:16px;height:16px;flex:0 0 auto;color:var(--gold);margin-top:2px}
.demo-note b{color:var(--gold-2)}
.dl{color:var(--mut);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}

/* --- 1. access switches (Team & Access) --- */
.acc-panel{margin-top:18px}
.acc-list{display:flex;flex-direction:column;gap:10px}
.acc-row{display:grid;grid-template-columns:260px 1fr;gap:14px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2)}
.acc-who{display:flex;gap:10px;align-items:center}
.acc-sw{display:flex;flex-wrap:wrap;gap:8px 14px}
.acc-lock{grid-column:1/-1;font-size:12px;display:flex;gap:6px;align-items:center}
.acc-lock svg{width:14px;height:14px}
.sw{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;color:var(--ink-2);user-select:none}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw-track{width:34px;height:20px;border-radius:999px;background:#2a2a32;border:1px solid var(--line-2);position:relative;transition:.15s;flex:0 0 auto}
.sw-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#8c8c96;transition:.15s}
.sw input:checked+.sw-track{background:rgba(243,164,0,.28);border-color:rgba(243,164,0,.6)}
.sw input:checked+.sw-track .sw-knob{left:16px;background:var(--gold)}
.sw input:focus-visible+.sw-track{outline:2px solid var(--gold);outline-offset:2px}
.sw.locked{opacity:.55;cursor:not-allowed}
@media(max-width:900px){.acc-row{grid-template-columns:1fr}}

/* --- 2. Start Day --- */
.sd-start{text-align:center;padding:38px 24px}
.sd-big{width:72px;height:72px;border-radius:22px;margin:0 auto 14px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:var(--sh-gold)}
.sd-big svg{width:36px;height:36px;color:#1a1206}
.sd-start .assign-form{justify-content:center}
.ts-table input.ts-h{width:76px;padding:8px 10px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg-elev);color:var(--ink);font:inherit;font-variant-numeric:tabular-nums}
.fld{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--mut);font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
.chklist{display:flex;flex-direction:column;gap:8px}
.chk{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);cursor:pointer;font-size:13.5px;color:var(--ink-2);line-height:1.4}
.chk input{margin-top:3px;accent-color:var(--gold);width:16px;height:16px;flex:0 0 auto}
.chk:has(input:checked){border-color:rgba(62,207,122,.4);background:rgba(62,207,122,.06)}
.note-form textarea,.addform textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg-elev);color:var(--ink);font:inherit;resize:vertical;min-height:70px}
.note-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}
.note-tools .btn{display:inline-flex;align-items:center;gap:8px}
.note-tools .btn svg{width:16px;height:16px}
.btn.rec{border-color:var(--bad);color:var(--bad);animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,92,92,.35)}50%{box-shadow:0 0 0 8px rgba(255,92,92,0)}}
.notes{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.note{padding:10px 12px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);font-size:13.5px;line-height:1.45}
.note-meta{color:var(--mut);font-size:11px;margin-bottom:3px}
.msg-preview{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.msg{padding:10px 12px;border-radius:14px 14px 14px 4px;background:rgba(74,168,230,.1);border:1px solid rgba(74,168,230,.3);font-size:13px;line-height:1.45}
.msg b{display:block;font-size:11.5px;color:var(--mut);margin-bottom:3px}

/* --- 3. End of Day (crew) --- */
.eod .eod-q{font-size:26px;font-weight:800;margin-top:10px;font-family:var(--head)}
.eod .eod-q2{font-size:16px;color:var(--ink-2);margin-top:6px}
.eod-btns{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.eod-btns .btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;padding:14px 22px}
.eod-btns .btn svg{width:18px;height:18px}

/* --- 4. dashboard additions --- */
.dash-ops{margin-bottom:22px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1240px){.g3{grid-template-columns:1fr}}
.site-row{display:grid;grid-template-columns:1fr 1.6fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.site-row:last-of-type{border-bottom:none}
.site-row .muted{font-size:12px}
.site-row.on .site-crew b{color:var(--gold-2)}

/* --- 5. project book --- */
.book{margin-top:8px;padding-top:6px;border-top:1px solid var(--line)}
.book-scope{font-size:13.5px;line-height:1.5;color:var(--ink-2);padding:10px 12px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);margin-bottom:14px}
.book-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
@media(max-width:900px){.book-grid{grid-template-columns:1fr}}
.cchip small{font-size:9px;opacity:.8;margin-left:2px}
.ready{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.ready-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);font-size:13px;cursor:pointer}
.ready-row:hover{border-color:var(--line-2)}

/* --- 6. schedule board --- */
.board-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.board-tools .btn{display:inline-flex;align-items:center;gap:8px}
.board-tools .btn svg{width:16px;height:16px}
.board-panel{padding:14px;overflow:auto}
.board{display:grid;gap:6px;min-width:760px}
.bhead{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);padding:6px 8px;text-align:center}
.bhead.today{color:var(--gold)}
.bcrew{padding:10px 8px;font-size:13px;display:flex;flex-direction:column;justify-content:center}
.bcrew .muted{font-size:11.5px}
.bcell{min-height:64px;border-radius:12px;border:1px dashed var(--line-2);background:var(--panel-2);padding:8px 9px;cursor:pointer;transition:.14s;display:flex;flex-direction:column;justify-content:center}
.bcell:hover{border-color:var(--gold);background:rgba(243,164,0,.05)}
.bcell.on{border-style:solid;border-color:rgba(74,168,230,.45);background:rgba(74,168,230,.08)}
.bcell.today{box-shadow:inset 0 0 0 1px rgba(243,164,0,.35)}
.bc-job{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bc-task{font-size:11px;color:var(--mut);margin-top:3px}
.bc-empty{text-align:center;color:var(--mut-2);font-size:20px;font-weight:300}
.week-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
@media(max-width:900px){.week-strip{grid-template-columns:repeat(2,1fr)}}
.ws-day{padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2)}
.ws-day.on{border-color:rgba(74,168,230,.45)}
.ws-day.today{box-shadow:inset 0 0 0 1px rgba(243,164,0,.45)}
.ws-d{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.ws-j{font-size:13px;font-weight:700;margin-top:6px;line-height:1.3}
.ws-t{font-size:11.5px;margin-top:3px}

/* --- 7. equipment scan --- */
.scan-av svg{width:26px;height:26px}

/* --- 8. safety --- */
.act{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);margin-bottom:8px}
.act.overdue{border-color:rgba(255,92,92,.45);background:rgba(255,92,92,.06)}
.act.closed{opacity:.6}
.act-desc{font-size:13.5px;font-weight:600;line-height:1.35}
.act-btn{padding:7px 12px !important;font-size:12px !important;white-space:nowrap}

/* --- 9. QuickBooks --- */
.qbo-status{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.qbo-status>div:nth-child(2){flex:1 1 300px}
.qbo-status .btn{display:inline-flex;align-items:center;gap:8px}
.qbo-status .btn svg{width:16px;height:16px}
.qbo-dot{width:14px;height:14px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 5px rgba(255,92,92,.18);flex:0 0 auto}

/* --- 11. proposal document + print --- */
.propmodal{width:min(880px,100%)}
.proposal-doc{background:#fff;color:#151515;border-radius:12px;padding:0 0 22px;overflow:hidden;font-family:var(--sans)}
.pd-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 26px;background:#0e0e11;color:#cdcdd4}
.pd-logo img{height:34px;width:auto}
.pd-co{text-align:right;font-size:12px;line-height:1.5}
.pd-co b{color:#fff;font-size:14px}
.pd-band{background:#F3A400;color:#1a1206;font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:6px}
.pd-title{font-family:var(--head);font-size:22px;font-weight:800;padding:20px 26px 6px}
.pd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 18px;padding:8px 26px 14px;border-bottom:1px solid #e6e6e6}
.pd-l{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#777;font-weight:700}
.pd-v{font-size:13.5px;font-weight:600;margin-top:2px}
.proposal-doc h4{margin:18px 26px 6px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#444}
.proposal-doc p,.proposal-doc ul{margin:0 26px;font-size:13.5px;line-height:1.55;color:#222}
.proposal-doc ul{padding-left:18px}
.pd-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.pd-cols h4{margin-left:26px}
.pd-price{margin:6px 26px;width:calc(100% - 52px);border-collapse:collapse;font-size:13.5px}
.pd-price td{padding:8px 6px;border-bottom:1px solid #e6e6e6}
.pd-price .num{text-align:right;font-variant-numeric:tabular-nums}
.pd-price .tot td{border-bottom:2px solid #151515;font-size:15px}
.pd-sign{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:34px 26px 0;font-size:12px;color:#444}
.pd-line{border-bottom:1px solid #151515;height:26px;margin-bottom:6px}
.pd-foot{margin:22px 26px 0;font-size:11px;color:#888;text-align:center}
@media(max-width:720px){.pd-grid,.pd-cols,.pd-sign{grid-template-columns:1fr}}
/* phone: the proposal is a white paper document. Keep its price table a real table —
   the app-wide "tables become dark stacked cards" rule above must not touch it. */
@media(max-width:720px){
  .proposal-doc .pd-price{display:table;width:calc(100% - 40px);margin:6px 20px}
  .proposal-doc .pd-price tbody{display:table-row-group}
  .proposal-doc .pd-price tr{display:table-row;background:none;border:none;border-radius:0;padding:0;margin:0;box-shadow:none}
  .proposal-doc .pd-price td{display:table-cell;width:auto;text-align:left;color:#151515;font-size:13px;padding:8px 6px;border-bottom:1px solid #e6e6e6;white-space:normal}
  .proposal-doc .pd-price td.num{text-align:right;white-space:nowrap}
  .proposal-doc .pd-price td::before{content:none}
  .proposal-doc .pd-price .tot td{border-bottom:2px solid #151515;font-size:15px}
  .pd-head,.pd-title,.pd-grid,.proposal-doc h4{padding-left:20px;padding-right:20px}
  .proposal-doc p,.proposal-doc ul,.pd-sign,.pd-foot{margin-left:20px;margin-right:20px}
  .proposal-doc h4{margin-left:0;margin-right:0}
  .pd-cols h4{margin-left:20px}
}
@media print{
  body.printing{overflow:visible !important;background:#fff}
  body.printing>*:not(#modalMount){display:none !important}
  body.printing .modal-bg{position:static;background:#fff;padding:0;display:block}
  body.printing .modal{width:100% !important;max-width:none;box-shadow:none;background:#fff;border:none;max-height:none;overflow:visible}
  body.printing .m-body{max-height:none;overflow:visible;padding:0}
  body.printing .no-print{display:none !important}
  .proposal-doc{border-radius:0}
  .pd-head,.pd-band{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* --- phone tab bar: more than 6 tabs scrolls sideways instead of squeezing --- */
@media(max-width:720px){
  #navList.many{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #navList.many::-webkit-scrollbar{display:none}
  #navList.many .nav{flex:0 0 auto;min-width:68px}
}
/* every panel heading icon is inline-sized (the field-ops panels put one in every h3) */
.panel h3 svg,.panel-head h3 svg,.jc-tag svg{width:17px;height:17px;vertical-align:-3px;margin-right:6px;color:var(--gold)}
.site-row{display:flex;flex-direction:column;gap:3px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.site-row .site-crew{display:flex;justify-content:space-between;align-items:center;gap:10px}
.site-row .site-crew .muted{display:inline;margin-left:6px}
.site-row .site-where{line-height:1.45}
.m-body h3 svg,.book h3 svg{width:17px;height:17px;vertical-align:-3px;margin-right:6px;color:var(--gold)}
.book-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.book .tbl-wrap{overflow:auto;max-width:100%}
/* phone: the line above re-declared two columns after the ≤900px collapse, so the
   project book in the job modal stayed two-up at 390px and clipped. One column again,
   and the readiness pills may wrap instead of running past the modal edge. */
@media(max-width:900px){.book-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:720px){
  .book,.book-grid>div{min-width:0;max-width:100%}
  .ready-row{flex-wrap:wrap}
  .ready-row .cpill{white-space:normal;text-align:right;flex:0 1 auto;min-width:0}
  .book .tbl-wrap{overflow:visible}
  .book table td{white-space:normal}
}
.btn svg{width:16px;height:16px;vertical-align:-3px}
.m-head .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px}

/* ================= APP BUILD 2 (2026-09-15): photos · cost codes · change orders · closeout · drag board · timeline · documents ================= */
/* --- job book tabs inside the job modal --- */
.b2{margin-top:8px;padding-top:6px;border-top:1px solid var(--line)}
.b2-revised{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:rgba(243,164,0,.08);border:1px solid rgba(243,164,0,.35);font-size:13.5px;margin-bottom:10px}
.b2-revised svg{width:16px;height:16px;color:var(--gold)}
.b2-tabs{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:12px;padding-bottom:2px}
.b2-tabs::-webkit-scrollbar{display:none}
.b2-tab{flex:0 0 auto;background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink-2);border-radius:999px;padding:8px 14px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.b2-tab.on{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1a1206;border-color:transparent}
.b2-n{font-size:11px;padding:1px 7px;border-radius:999px;background:rgba(0,0,0,.25)}
.b2-tab:not(.on) .b2-n{background:var(--panel-hd);color:var(--mut)}
.b2-pane{display:none}.b2-pane.on{display:block}
/* --- cost codes --- */
.cc-table td.bad{color:#ff8792;font-weight:700}
.cc-table tr.over td.addr{color:#ffab54}
/* --- change orders --- */
.co-strip{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);margin-bottom:12px}
.co-strip .dv{font-family:var(--mono);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;margin-top:2px}
.co-strip .dv.gold{color:var(--gold)}
.co-plus{color:var(--mut);font-size:18px;font-weight:300}
.co{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);margin-bottom:10px}
.co.approved{border-color:rgba(62,207,122,.35)}.co.sent{border-color:rgba(255,176,32,.35)}.co.declined{opacity:.65}
.co-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.co-no{font-family:var(--mono);color:var(--gold);font-weight:800;margin-right:4px}
.co-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto}
.co-amt{font-family:var(--mono);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.co-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.co-btn{padding:7px 12px !important;font-size:12px !important;white-space:nowrap}
.co-form{margin-top:12px;padding:14px;border-radius:12px;border:1px dashed var(--line-2);background:var(--bg-elev)}
.co-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.tm-table td{font-size:12.5px}
/* --- photos --- */
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:12px}
.ph-grid.small{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.ph{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel-2);cursor:pointer;transition:.14s}
.ph:hover{border-color:rgba(243,164,0,.5);transform:translateY(-1px)}
.ph img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:#0c0c0f}
.ph figcaption{padding:8px 10px}
.ph-cap{font-size:12.5px;line-height:1.35;margin-top:5px;color:var(--ink-2)}
.ph-meta{font-size:11px;margin-top:4px}
.ph-form{padding:12px 14px;border-radius:12px;border:1px dashed var(--line-2);background:var(--bg-elev);margin-bottom:6px}
.ph-form-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0}
.ph-form-row .selwrap{flex:0 0 150px}
.ph-form-row .selwrap select{width:100%;padding:10px 12px;font:inherit;font-size:13px}
.ph-form-row input[data-ph="caption"]{flex:1 1 220px;background:var(--bg-elev);border:1px solid var(--line-2);border-radius:12px;color:var(--ink);padding:10px 12px;font:inherit;font-size:13px}
.ph-file{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.photomodal{width:min(900px,100%)}
.ph-big{display:block;width:100%;max-height:70vh;object-fit:contain;border-radius:12px;background:#0c0c0f;border:1px solid var(--line)}
/* --- documents --- */
.doc-type{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:7px;border:1px solid var(--line-2);color:var(--ink-2);background:var(--panel-hd);white-space:nowrap}
.doc-type.jha{color:#ff8792;border-color:rgba(255,77,94,.38)}.doc-type.swp{color:#77c3ee;border-color:rgba(74,168,230,.4)}.doc-type.talk{color:#ffc86a;border-color:rgba(255,176,32,.35)}.doc-type.sds{color:#d3aaff;border-color:rgba(192,139,255,.35)}
.doc-list{display:flex;flex-direction:column;gap:8px}
.doc{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);cursor:pointer}
.doc:hover{border-color:rgba(243,164,0,.5)}
.doc-main{flex:1 1 auto;min-width:0}
.doc-title{font-size:13.5px;font-weight:700;line-height:1.35}
.docmodal{width:min(760px,100%)}
.doc-page{position:relative;background:#fff;color:#151515;border-radius:12px;padding:22px 26px 26px;overflow:hidden;font-family:var(--sans)}
.doc-wm{position:absolute;right:-20px;top:30px;transform:rotate(18deg);font-size:64px;font-weight:900;letter-spacing:.2em;color:rgba(243,164,0,.18);pointer-events:none}
.doc-page-head{display:flex;gap:12px;align-items:center;padding-bottom:12px;border-bottom:2px solid #F3A400;margin-bottom:14px}
.doc-page-head img{height:30px;width:auto;filter:invert(1)}
.doc-page-head .muted{color:#777}
.doc-page h2{font-family:var(--head);font-size:20px;margin:0 0 14px}
.doc-lines{display:flex;flex-direction:column;gap:9px;margin:6px 0 16px}
.doc-lines i{display:block;height:9px;border-radius:5px;background:#e9e9ec}
.doc-note{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:#444;padding:10px 12px;border-radius:10px;background:#fff6df;border:1px solid #f3d38a}
.doc-note svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:#c9820a}
/* --- closeout document --- */
.closeout-doc .pd-tbl{margin:6px 26px;width:calc(100% - 52px);border-collapse:collapse;font-size:12.5px}
.closeout-doc .pd-tbl th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#777;padding:6px;border-bottom:1px solid #ccc}
.closeout-doc .pd-tbl td{padding:6px;border-bottom:1px solid #e6e6e6;vertical-align:top}
.closeout-doc .pd-tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.closeout-doc .pd-tbl .tot td{border-bottom:2px solid #151515}
.closeout-doc .pd-grid{grid-template-columns:repeat(3,1fr)}
.pd-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 26px}
.pd-photos figure{margin:0}
.pd-photos img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid #ddd;border-radius:6px}
.pd-photos figcaption{font-size:10.5px;color:#444;margin-top:4px;line-height:1.35}
.closeout-doc .pd-sign{grid-template-columns:1fr 1fr 1fr}
.co-kpis{grid-template-columns:repeat(4,1fr)}
@media(max-width:720px){.closeout-doc .pd-tbl{margin:6px 20px;width:calc(100% - 40px)}.pd-photos{grid-template-columns:1fr 1fr;margin:6px 20px}.closeout-doc .pd-sign{grid-template-columns:1fr}.co-kpis{grid-template-columns:1fr 1fr}}
@media(max-width:720px){
  .closeout-doc .pd-tbl{display:table}.closeout-doc .pd-tbl tbody{display:table-row-group}
  .closeout-doc .pd-tbl tr{display:table-row;background:none;border:none;border-radius:0;padding:0;margin:0;box-shadow:none}
  .closeout-doc .pd-tbl td,.closeout-doc .pd-tbl th{display:table-cell;width:auto;color:#151515;font-size:11.5px;white-space:normal}
  .closeout-doc .pd-tbl td::before{content:none}.closeout-doc .pd-tbl td.num{text-align:right}
}
/* --- board drag-and-drop --- */
.drag-hint{font-size:12px;display:inline-flex;align-items:center;gap:6px;flex:1 1 100%}
.drag-hint svg{width:14px;height:14px;color:var(--gold)}
.bcell[data-job]{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-x pan-y}
.bcell.dragging{opacity:.35;border-style:dashed}
.bcell.over{border-color:var(--gold) !important;background:rgba(243,164,0,.14) !important;box-shadow:0 0 0 2px rgba(243,164,0,.35)}
.bcell.over-bad{border-color:var(--bad) !important;background:rgba(255,92,92,.12) !important;box-shadow:0 0 0 2px rgba(255,92,92,.4)}
.board.dragmode .bcell{cursor:grabbing}
.bghost{position:fixed;z-index:9999;pointer-events:none;padding:8px 9px;border-radius:12px;background:rgba(243,164,0,.18);border:1px solid var(--gold);backdrop-filter:blur(4px);box-shadow:var(--sh);font-size:12.5px;color:var(--ink);opacity:.95;transform:scale(1.02)}
.drag-blocks{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow:auto}
/* --- timeline (Gantt) --- */
.gantt{--glabel:230px;--gday:22px;min-width:calc(var(--glabel) + var(--gdays) * var(--gday));position:relative}
.grow{display:grid;grid-template-columns:var(--glabel) 1fr;min-height:44px;border-bottom:1px solid var(--line)}
.grow.ghead{background:var(--panel-hd);min-height:40px}
.grow.gweeks{position:sticky;top:0;z-index:3}
.glabel{padding:7px 10px;font-size:12.5px;line-height:1.3;border-right:1px solid var(--line);position:sticky;left:0;background:var(--panel);z-index:2;min-width:0}
.ghead .glabel{background:var(--panel-hd)}
.gl-j{font-family:var(--mono);color:var(--gold);font-size:11px;font-weight:700}
.gl-p{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.glane{position:relative;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--gday)*7 - 1px),var(--line) calc(var(--gday)*7 - 1px),var(--line) calc(var(--gday)*7))}
.gweek{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding-left:8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);border-left:1px solid var(--line-2);white-space:nowrap;overflow:hidden}
.gbody{position:relative}
.gtoday{position:absolute;top:0;bottom:0;width:2px;background:var(--gold);z-index:1;pointer-events:none}
.gtoday span{position:absolute;top:2px;left:4px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);background:var(--panel);padding:1px 5px;border-radius:6px}
.gbar{position:absolute;top:9px;height:26px;border-radius:8px;background:color-mix(in srgb,var(--gc) 28%,transparent);border:1px solid var(--gc);color:var(--ink);font-size:11.5px;font-weight:700;display:flex;align-items:center;padding:0 8px;overflow:hidden;white-space:nowrap;cursor:pointer;z-index:2;min-width:6px}
.gbar span{overflow:hidden;text-overflow:ellipsis}
.gbar.est{border-style:dashed}
.gbar.live{box-shadow:0 0 0 2px rgba(243,164,0,.35)}
.gbar.done{opacity:.55}
.gbar:hover{background:color-mix(in srgb,var(--gc) 45%,transparent)}
.glegend{display:inline-flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--mut)}
.glegend i{display:inline-block;width:14px;height:10px;border-radius:3px;margin-right:2px;vertical-align:-1px}
.glegend i.est{background:transparent;border:1px dashed var(--mut)}
.glegend i.today{background:var(--gold);width:3px}
@media(max-width:720px){.gantt{--glabel:150px;--gday:16px}.glabel{font-size:11.5px;padding:6px 8px}}
/* --- dashboard cost-code row --- */
.dash-ops2{margin-bottom:22px}
/* modal headings may carry an inline icon (drag-block warning) — size it like the panel headings */
.modal .m-head h3 svg{width:18px;height:18px;vertical-align:-3px;margin-right:6px;color:var(--bad)}
.drag-blocks>*{flex:0 0 auto}
.drag-blocks .assign-block{margin-top:0}
.dash-ops2>.panel{min-width:0}
.dash-ops2 .tbl-wrap{overflow:auto;max-width:100%}
.dash-ops2 td{white-space:normal}
.dash-ops2 .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---------- JOB-SITE MAP on the dashboard (2026-09-15) ----------
   Inline SVG basemap (city + downtown inset) inside a normal .panel. Pin colours are the
   status colours the pills already use; everything else is the panel palette. */
.map-panel{padding-bottom:18px}
.map-panel .panel-head{margin-bottom:16px}
.map-panel .panel-head h3{display:flex;align-items:center;gap:8px}
.map-panel .panel-head h3 svg{width:17px;height:17px;color:var(--gold)}
.mp-body{display:grid;grid-template-columns:minmax(260px,.565fr) minmax(0,1fr);gap:22px;align-items:start}
.mp-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.mp-map{position:relative;background:#0b0b0e;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.mp-map svg{display:block;width:100%;height:auto}
.mp-corner{position:absolute;left:12px;top:10px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--gold);
  background:rgba(11,11,14,.78);border:1px solid rgba(243,164,0,.28);border-radius:7px;padding:4px 8px;pointer-events:none}
.mp-base{fill:#0e0e12}
.mp-park{fill:rgba(62,207,122,.07)}
.mp-water{fill:rgba(74,168,230,.16);stroke:rgba(74,168,230,.45);stroke-width:1.2}
.mp-river{fill:none;stroke:rgba(74,168,230,.5);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mp-river.thin{stroke-width:1.5}
.mp-road{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mp-road.major{stroke:rgba(255,255,255,.2);stroke-width:2.2}
.mp-ring{fill:none;stroke:rgba(243,164,0,.34);stroke-width:1.6;stroke-dasharray:5 4;stroke-linejoin:round}
.mp-axis{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:2 5}
.mp-grid{fill:none;stroke:rgba(255,255,255,.06);stroke-width:1}
.mp-rail{fill:none;stroke:rgba(255,255,255,.24);stroke-width:1.4;stroke-dasharray:6 3}
.mp-lbl{fill:var(--mut);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-family:var(--sans);pointer-events:none}
.mp-core .mp-lbl{font-size:10.5px}
.mp-lbl.faint{fill:var(--mut-2)}
.mp-lbl.water{fill:rgba(74,168,230,.72)}
.mp-lbl.gold{fill:var(--gold);letter-spacing:.06em}
.mp-quad{fill:rgba(255,255,255,.055);font-size:34px;font-weight:900;letter-spacing:.06em;font-family:var(--head);pointer-events:none}
.mp-inset-box{fill:rgba(243,164,0,.07);stroke:var(--gold);stroke-width:1.4}
.mp-pin{cursor:pointer;outline:none}
/* invisible touch circle — see pin() in app-map.js. Must not take fill/stroke from
   the .st-* colour rules below, which is why it is excluded there by :not(.mp-hit). */
.mp-pin circle.mp-hit{fill:transparent;stroke:none;pointer-events:all}
.mp-nodrill .mp-pin{cursor:default}
.mp-pin circle:not(.mp-hit){stroke:#0b0b0e;stroke-width:1.6;transition:stroke .12s,filter .12s}
.mp-pin:hover circle:not(.mp-hit),.mp-pin:focus-visible circle:not(.mp-hit),.mp-pin.on circle:not(.mp-hit){stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}
.mp-pin.mini circle:not(.mp-hit){opacity:.8}
/* pin colours = the status pill colours */
.mp-pin.st-paid circle:not(.mp-hit),.mp-chip.st-paid .mp-dot{fill:#3ecf7a;background:#3ecf7a}
.mp-pin.st-outstanding circle:not(.mp-hit),.mp-chip.st-outstanding .mp-dot{fill:#ffb020;background:#ffb020}
.mp-pin.st-holdback circle:not(.mp-hit),.mp-chip.st-holdback .mp-dot{fill:#c08bff;background:#c08bff}
.mp-pin.st-court circle:not(.mp-hit),.mp-chip.st-court .mp-dot{fill:#ff4d5e;background:#ff4d5e}
.mp-pin.st-open circle:not(.mp-hit),.mp-chip.st-open .mp-dot{fill:#4aa8e6;background:#4aa8e6}
.mp-pin.st-partial circle:not(.mp-hit),.mp-chip.st-partial .mp-dot{fill:#ffc21a;background:#ffc21a}
.mp-pin.st-not_started circle:not(.mp-hit),.mp-chip.st-not_started .mp-dot{fill:#7d8894;background:#7d8894}
.mp-pin.st-other circle:not(.mp-hit),.mp-chip.st-other .mp-dot{fill:#8a94a0;background:#8a94a0}
.mp-pin.st-unknown circle:not(.mp-hit),.mp-chip.st-unknown .mp-dot{fill:#5c6672;background:#5c6672}
/* legend toggles hide a status on both maps */
.map-panel.off-paid .mp-pin.st-paid,.map-panel.off-outstanding .mp-pin.st-outstanding,.map-panel.off-holdback .mp-pin.st-holdback,
.map-panel.off-court .mp-pin.st-court,.map-panel.off-open .mp-pin.st-open,.map-panel.off-partial .mp-pin.st-partial,
.map-panel.off-not_started .mp-pin.st-not_started,.map-panel.off-other .mp-pin.st-other,.map-panel.off-unknown .mp-pin.st-unknown{display:none}
.mp-tip{min-width:170px;max-width:260px}
.mp-tip-addr{font-weight:800;font-size:13px;color:#fff;line-height:1.3}
.mp-tip .ct-row{margin-top:7px;padding-top:7px;border-top:1px solid var(--line)}
.mp-legs{display:flex;flex-direction:column;gap:12px}
.mp-leg{min-width:0}
.mp-leg-h{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:800;margin-bottom:8px;display:flex;gap:10px;align-items:baseline}
.mp-leg-h span{font-weight:600;letter-spacing:0;text-transform:none;color:var(--mut-2)}
.mp-chips{display:flex;flex-wrap:wrap;gap:8px}
.mp-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--panel-hd);
  color:var(--ink-2);font:inherit;font-size:12.5px;line-height:1.2;cursor:default;text-align:left}
button.mp-chip{cursor:pointer;transition:border-color .12s,background .12s}
button.mp-chip:hover{border-color:var(--line-2);background:#1f1f27}
.mp-chip b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.mp-chip.off{opacity:.4}
.mp-chip.off span{text-decoration:line-through}
.mp-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;border:1.5px solid #0b0b0e}
.mp-foot{font-size:12px;margin-top:14px}
@media(max-width:1160px){.mp-body{grid-template-columns:1fr}}
@media(max-width:720px){.map-panel .panel-head{flex-wrap:wrap}.mp-body{gap:14px}.mp-side{gap:12px}.mp-chip{font-size:12px;padding:5px 10px}}

/* ===================== owner nav: 15 tabs → 7 groups (2026-09-15 tabs7) =====================
   Desktop rail: 7 group rows; the open group unfolds its tabs under it (accordion).
   Phone bar: the 7 groups only; the page carries a sub-tab row (.subtabs) for the open group.
   Same black/gold look as .nav — nothing new, nothing removed. */
.nav-grp{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;color:var(--mut);
  cursor:pointer;font-size:13.5px;font-weight:700;transition:.14s;border:1px solid transparent;position:relative;user-select:none}
.nav-grp svg{width:19px;height:19px;flex:0 0 auto;opacity:.82;transition:.14s}
.nav-grp .nav-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}
.nav-grp .nav-chev{width:14px;height:14px;margin-left:auto;opacity:.5;transform:rotate(0deg);transition:transform .16s}
.nav-grp:hover{background:rgba(255,255,255,.035);color:var(--ink-2)}
.nav-grp:hover svg{opacity:1}
.nav-grp:focus-visible{outline:none;border-color:rgba(243,164,0,.6)}
.nav-grp.active{background:linear-gradient(90deg,rgba(243,164,0,.16),rgba(243,164,0,.02));color:var(--ink);border-color:rgba(243,164,0,.3)}
.nav-grp.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 0 14px rgba(243,164,0,.55)}
.nav-grp.active svg{color:var(--gold);opacity:1}
.nav-grp.open .nav-chev{transform:rotate(180deg);opacity:.9}
.nav-sub{display:none;flex-direction:column;gap:2px;margin:2px 0 6px 14px;padding-left:10px;border-left:1px solid rgba(243,164,0,.22)}
.nav-sub.open{display:flex}
.nav-sub.single{display:none !important}            /* a one-tab group IS its tab: the group row opens it */
#navList.grouped .nav-sub .nav{padding:8px 11px;font-size:12.5px;font-weight:600;border-radius:10px}
#navList.grouped .nav-sub .nav svg{width:16px;height:16px}
#navList.grouped .nav-sub .nav.active{background:rgba(243,164,0,.10);border-color:rgba(243,164,0,.22)}
#navList.grouped .nav-sub .nav.active::before{display:none}
/* the sub-tab row lives in the page but only shows on the phone (the rail already lists the tabs) */
.subtabs{display:none}
@media(max-width:720px){
  #navList.grouped .nav-sub{display:none !important}   /* bottom bar = groups only */
  .nav-grp{flex:1 1 0;flex-direction:column;gap:5px;padding:7px 6px;min-width:0;overflow:hidden;
    border:none;border-radius:12px;font-size:10px;font-weight:700;letter-spacing:.01em;
    color:var(--mut-2);text-align:center;justify-content:center}
  .nav-grp svg{width:21px;height:21px;opacity:.9}
  .nav-grp .nav-chev{display:none}
  .nav-grp .nav-lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto}
  .nav-grp:hover{background:none}
  .nav-grp.active{background:rgba(243,164,0,.1);color:var(--gold);border:none}
  .nav-grp.active svg{color:var(--gold)}
  .nav-grp.active::before{display:none}
  #navList.many .nav-grp{flex:0 0 auto;min-width:64px}
  /* top:0 pinned this row underneath the 58px brand bar and the 30px demo band,
     which are sticky above it — so the sub-tabs were unreachable once you
     scrolled. 88px = 58 + 30, i.e. straight under them. z-index 4 keeps it below
     the bar (5) and the band (6). It never stuck at all before .main stopped
     being a scroll container — see the .main note above. (2026-09-16 phone fix) */
  .subtabs{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:-4px 0 16px;padding:8px 2px 6px;position:sticky;top:88px;z-index:4;
    background:linear-gradient(180deg,var(--bg,#0b0b0e) 78%,transparent)}
  .subtabs::-webkit-scrollbar{display:none}
  .subtab{flex:0 0 auto;appearance:none;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--mut);
    font:inherit;font-size:12px;font-weight:700;letter-spacing:.01em;padding:7px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
  .subtab.on{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1a1206;border-color:transparent}
}
/* dashboard summary card for the cost codes (the full table is on the Project Book now) */
.cc-card{cursor:pointer}
.cc-card:hover{border-color:rgba(243,164,0,.35)}
.cc-card:focus-visible{outline:none;border-color:rgba(243,164,0,.6)}
.cc-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.cc-kpis .kpi{padding:12px 14px}
.cc-top{display:flex;flex-wrap:wrap;gap:4px}
@media(max-width:720px){.cc-kpis{grid-template-columns:1fr 1fr}}