/* 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}
/* Tracking was .11em, which opened a gap mid-word — "OUTSTANDING" read as "OUTS TANDING"
   (Omar, 2026-09-20). .045em keeps the small-caps look and the word reads as one word. */
.h-label{color:var(--mut);font-size:11.5px;letter-spacing:.045em;text-transform:uppercase;font-weight:700;
  font-kerning:normal;white-space:nowrap}
.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:10.5px;letter-spacing:.09em;color:var(--mut)}   /* The Eye 2026-09-21 check 7: --mut-2 read 2.73:1 at 10px on the panel; --mut at 10.5px matches the shared th rule above (5.4:1, floor 4.5) */
.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);text-align:center;justify-content:center}   /* tabs SHARE the bar — all fit, no sideways scroll.
    The Eye 2026-09-21 check 7: --mut-2 read 2.94:1 against the bar at 10px (floor 4.5); --mut reads 5.9:1. The active tab stays gold. */
  .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:.03em}
  .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}   /* NOTE: the white-space half of this
     loses to the base .cpill{white-space:nowrap} further down (equal specificity, later in
     the file). Re-stated for .cpill in the 2026-09-20 block at the end. .cchip is fine. */
  .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,.mp-lyr,.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}

  /* (e) iOS ZOOM. Safari zooms the whole page into any field under 16px the moment it
     gets focus, and does not zoom back out. The Eye 2026-09-21 check 6 measured the
     period select 11.5px, the table search 13.5px and the status select 13px. Every
     field is 16px on the phone; desktop keeps its sizes. !important because the widget
     rules (.period-sel select, .tbl-tools select, .tt-search input, .addform input)
     are more specific and sit elsewhere in this file. */
  select,textarea,input:not([type=checkbox]):not([type=radio]):not([type=hidden]){font-size:16px !important}
  /* A <select> sizes itself to its longest option, and at 16px the Tickets job select
     (#asJob, 348 → 422px) and the Payroll man select (#fixMan, 404px) outgrew the 322px
     form column. Their <label> is a grid item in .assign-form, and a grid item's min-width
     is "auto" — the widest thing inside — so the label grew to 422px, the page to 456px,
     and the fixed bottom bar (left:0;right:0) went with it: 66px sideways on Tickets, 48px
     on Payroll (verify_fieldops J, verify_tabs7 6). A 0 floor on the label lets it stay in
     its column and the select's max-width then means what it says. */
  select{max-width:100%;min-width:0}
  label:has(select),.selwrap{min-width:0;max-width:100%}
}
@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}
/* same wheel trap as .tbl-wrap, same fix — see the note at "internal scroll" below.
   These are the dashboard panels; the wheel must chain out of them to the page. */
.eqp-body{flex:1 1 auto;min-height:0;overflow:auto}
.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}
.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 ---
   The cap STAYS: a 40-row table still gets its own scrollbar instead of pushing the
   rest of the screen a mile down. What is gone is `overscroll-behavior:contain`.

   Ali, 2026-09-20: "Every single table that I go over — so like the bid versus actual
   — if I go over and scroll with my mouse up and down, it stops scrolling. It's with
   all of them." He was right, and it was worse than it sounds. `contain` tells the
   browser never to hand the wheel on to the page, so putting the pointer over ANY
   table killed the page scroll dead — measured at +0px over 22 wheel notches on 15
   tables (portal/_qa/wheel_BEFORE.json). And because a `overflow:auto` box counts as
   a scroll container even when its content fits, the short tables — Bid vs Actual,
   Inventory, Tickets — ate the wheel while having nothing of their own to scroll.
   Nothing moved at all. That is the "it stops scrolling".

   Without `contain` the browser chains the way it does everywhere else: the table
   scrolls to its own bottom, then the page carries on. Intent kept, trap gone.

   `.modal` KEEPS contain, and should: scrolling to the end of a modal must not start
   dragging the page around behind it. Same for `.sheet` and the bell popover.
   Proof both ways: node portal/_qa/wheel_test.cjs                                */
@media(min-width:721px){
  .tbl-wrap:not(.rjt-wrap){max-height:min(64vh,660px)}
  .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}

/* ---- file a ticket: add + renew (2026-09-17) ----
   Same panel language as "Put a man on a crew" right below it. Built phone-first:
   the grid collapses to one column at 900px and every control is already ≥44px from
   the phone block further down (.btn / select / input min-height:44px). */
.panel.writepanel h3 svg{color:var(--gold)}
.wt-modes{display:flex;gap:8px;margin:2px 0 18px;flex-wrap:wrap}
.wt-modes .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:12.5px;font-weight:700;letter-spacing:.01em;padding:10px 16px;
  border-radius:999px;cursor:pointer;white-space:nowrap;min-height:44px}   /* 44px everywhere: this rule
  is more specific than the phone block's .subtab{min-height:44px}, so it must not undercut it */
.wt-modes .subtab.on{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1a1206;border-color:transparent}
.wt-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;align-items:end}
.wt-form label{display:flex;flex-direction:column;gap:7px;font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--mut);font-weight:700;min-width:0}
.wt-form .wt-opt{text-transform:none;letter-spacing:normal;font-weight:500;color:var(--mut);opacity:.75}
.wt-form 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;width:100%;min-width:0}
.wt-form input:focus{outline:none;border-color:rgba(243,164,0,.5);box-shadow:0 0 0 3px rgba(243,164,0,.1)}
.wt-form input[type=file]{padding:9px 12px;font-size:12.5px;cursor:pointer}
.wt-form input[type=file]::file-selector-button{margin-right:12px;background:transparent;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:9px;padding:8px 13px;font:inherit;font-size:12.5px;cursor:pointer}
.wt-form .selwrap{position:relative}
.wt-form .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}
.wt-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.wt-shot:not(:empty){margin-top:16px}
.wt-thumb{display:flex;gap:14px;align-items:center;padding:12px 14px;border-radius:13px;
  background:var(--bg-elev);border:1px solid var(--line)}
.wt-thumb img{width:74px;height:74px;object-fit:cover;border-radius:10px;border:1px solid var(--line-2);flex:0 0 auto}
.wt-thumb>div{flex:1;min-width:0;font-size:13px}
.wt-full{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line-2);display:block}
.wt-warn{display:flex;gap:13px;align-items:flex-start;margin-top:16px;padding:16px 18px;border-radius:14px;
  background:rgba(255,176,32,.08);border:1px solid rgba(255,176,32,.36)}
.wt-warn svg{width:22px;height:22px;flex:0 0 auto;color:#ffb020}
.wt-warn>div{flex:1;min-width:0}
.wt-warn-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:13px}
.btn.sm{padding:8px 14px;font-size:12.5px}
.linkbtn{appearance:none;background:transparent;border:none;color:var(--gold);font:inherit;font-size:12px;
  font-weight:700;cursor:pointer;padding:0 0 0 4px;text-decoration:underline}
@media (max-width:900px){
  .wt-form{grid-template-columns:1fr}
  .wt-actions .btn{flex:1 1 100%}
  /* a thumb has to be able to hit "scan" and "Renew" in a stacked table card */
  .linkbtn{min-height:44px;display:inline-flex;align-items:center;padding:0 10px}
  .wt-thumb .btn.sm{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}
/* ---- the basemap: REAL TILES over the drawn one (2026-09-20) ----------------
   Omar, on the live app: "I want to see the terrain." So the map is now raster XYZ
   tiles — Esri World Topo by default, CARTO Voyager or Esri World Imagery on the
   switcher — laid out by app-map.js as plain <img> elements under the SVG. No Leaflet
   and no CDN: nothing external loads except the tile images themselves.
   The drawn SVG below the tiles did not go anywhere. It renders first and is only
   hidden once a tile has actually decoded (.tiles-on), so with no network the map is
   the drawing, never a grid of grey holes. The panel is a dark app holding a light
   map, so the frame keeps its hairline border, rounded corners and shadow. */
.mp-map{position:relative;background:#f8f9fa;border:1px solid #c6cacf;border-radius:10px;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04)}
.mp-map svg{display:block;width:100%;height:auto;position:relative;z-index:1}
.mp-tiles{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .28s ease}
.mp-map.tiles-on .mp-tiles{opacity:1}
.mp-tiles img{position:absolute;display:block;max-width:none;border:0;-webkit-user-drag:none;user-select:none}
.mp-map.tiles-on .mp-bm{display:none}          /* the drawing is the offline fallback, nothing more */

/* Google's segmented style switcher, top-right of the city frame. Drives BOTH frames. */
.mp-layers{position:absolute;right:10px;top:10px;z-index:3;display:flex;background:rgba(255,255,255,.96);
  border:1px solid rgba(60,64,67,.18);border-radius:8px;overflow:hidden;box-shadow:0 1px 4px rgba(60,64,67,.32)}
.mp-lyr{appearance:none;border:0;border-left:1px solid rgba(60,64,67,.14);background:transparent;cursor:pointer;
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.01em;color:#3c4043;
  padding:0 11px;height:30px;white-space:nowrap}
.mp-lyr:first-child{border-left:0}
.mp-lyr:hover{background:#f1f3f4}
.mp-lyr.on{background:#e8f0fe;color:#1967d2}
.mp-lyr:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

/* attribution is a licence condition on Esri, OSM and CARTO — it shows whenever tiles do */
.mp-attrib{position:absolute;right:0;bottom:0;z-index:2;display:none;font-family:var(--sans);font-size:9.5px;
  line-height:1.5;color:#3c4043;background:rgba(255,255,255,.82);padding:1px 6px;border-top-left-radius:5px;
  pointer-events:none;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-map.tiles-on .mp-attrib{display:block}
.mp-corner{position:absolute;left:10px;top:10px;z-index:2;font-size:10.5px;letter-spacing:.02em;font-weight:700;color:#3c4043;
  background:rgba(255,255,255,.94);border:1px solid rgba(60,64,67,.18);border-radius:6px;padding:4px 9px;pointer-events:none;
  box-shadow:0 1px 3px rgba(60,64,67,.24)}
.mp-base{fill:#f8f9fa}
.mp-core .mp-base{fill:#eceff1}   /* the inset is all city: the white grid over it makes the blocks */
.mp-built{fill:#eef0f2;stroke:none}
.mp-park{fill:#c8e6c9;stroke:#b7e1bd;stroke-width:1}
.mp-water{fill:#aadaff;stroke:#8dc7f0;stroke-width:1}
.mp-river{fill:none;stroke:#aadaff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.mp-river.thin{stroke-width:2}
/* roads: casing under, fill over — freeway (amber, Google's motorway), arterial, local */
.mp-case{fill:none;stroke-linecap:round;stroke-linejoin:round}
.mp-road{fill:none;stroke-linecap:round;stroke-linejoin:round}
.mp-case.fw{stroke:#e8b25a;stroke-width:4.4}
.mp-road.fw{stroke:#ffeac4;stroke-width:2.8}
.mp-case.art{stroke:#bcc3ca;stroke-width:3.8}
.mp-road.art{stroke:#fff;stroke-width:2.5}
.mp-case.loc{stroke:#d6dbdf;stroke-width:2.5}
.mp-road.loc{stroke:#fff;stroke-width:1.5}
.mp-axis{fill:none;stroke:#d8dbde;stroke-width:1;stroke-dasharray:3 5}
.mp-rail{fill:none;stroke:#b6bbc1;stroke-width:1.3;stroke-dasharray:6 4}
.mp-lbl{fill:#3c4043;font-size:10px;font-weight:500;letter-spacing:0;font-family:var(--sans);pointer-events:none;
  paint-order:stroke;stroke:#fff;stroke-width:2.6px;stroke-linejoin:round}
.mp-core .mp-lbl{font-size:11px}
.mp-lbl.big{font-size:12px;font-weight:600;fill:#202124;stroke-width:3px}
.mp-core .mp-lbl.big{font-size:13.5px}
.mp-lbl.road{fill:#5f6368;font-size:9.5px}
.mp-lbl.park{fill:#3f7a47}
.mp-lbl.faint{fill:#80868b}
.mp-lbl.water{fill:#4c7fb8;font-style:italic}
.mp-lbl.gold{fill:#9a6a00;font-weight:700;stroke:#fff;stroke-width:3px}
.mp-quad{fill:#b9bdc2;font-size:30px;font-weight:700;letter-spacing:.02em;font-family:var(--head);pointer-events:none;opacity:.55}
.mp-inset-box{fill:rgba(243,164,0,.10);stroke:#d99b1c;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}
/* the ring used to be the dark panel behind it; on the light basemap it is a Google
   marker's white ring with a soft shadow, which is what keeps the six status colours
   apart from #f8f9fa. The colours themselves are untouched. */
.mp-pin circle:not(.mp-hit){stroke:#fff;stroke-width:1.5;transition:stroke-width .12s,filter .12s;
  filter:drop-shadow(0 1px 1.6px rgba(32,33,36,.5))}
.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.6;filter:drop-shadow(0 2px 5px rgba(32,33,36,.65))}
.mp-pin.mini circle:not(.mp-hit){opacity:.92;stroke-width:1.1}   /* r=3 inside the inset box: a 1.5 ring ate the colour */
/* Over real tiles the background is no longer a flat #f8f9fa — it is contour shading,
   road casings and, on Satellite, dark imagery. The COLOURS do not change; the white
   ring and its shadow are thickened so the two quiet ones (In court #ff4d5e on brown
   relief, Other / Not started grey on anything) still read. (2026-09-20) */
.mp-map.tiles-on .mp-pin circle:not(.mp-hit){stroke-width:1.9;filter:drop-shadow(0 1px 2.2px rgba(32,33,36,.62))}
.mp-map.tiles-on .mp-pin.mini circle:not(.mp-hit){opacity:1;stroke-width:1.3}
.mp-sat .mp-map.tiles-on .mp-pin circle:not(.mp-hit){stroke-width:2.3;filter:drop-shadow(0 1px 3px rgba(0,0,0,.85))}
.mp-sat .mp-map.tiles-on .mp-pin.mini circle:not(.mp-hit){stroke-width:1.6}
/* 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);text-align:center;justify-content:center}   /* The Eye 2026-09-21 check 7: the bar's labels read 2.94:1 in --mut-2 (floor 4.5); --mut reads 5.9:1. Active stays gold. */
  .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}}

/* ===================== THE FIELD DAY + PAYROLL (2026-09-20, app-day.js) =====================
   Start Day's new timesheet (cost code per man, add/delete a man, the clock), the JHA PIN,
   and the payroll page's per-cost-code approval + fix grid. Black + gold, big targets,
   everything has to work one-handed on a 390-wide phone. */
/* an icon dropped into an empty state had no size rule, so it drew at the full width of
   the panel (crew End of Day did it too). One line, everywhere. */
.empty svg{width:18px;height:18px;vertical-align:-3px;opacity:.7}
.sel-sm select{padding:7px 26px 7px 10px;font-size:12.5px;min-width:116px}
.ccode{display:inline-block;padding:3px 8px;border-radius:7px;font:700 11.5px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;background:rgba(243,164,0,.13);color:var(--gold);border:1px solid rgba(243,164,0,.3)}
.ts-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.ts-head .spacer{flex:1}
.ts-codes{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12px}
.ts-table td .selwrap select{width:100%}
.ts-table td.addr{min-width:178px}
.ts-x{padding:7px 9px;line-height:0}
.ts-x svg{width:16px;height:16px}
.ts-add{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.ts-add .assign-form{grid-template-columns:2fr 1fr auto;margin-bottom:8px}
.eo-t{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;min-width:118px}
/* the start screen: site + the board's crew + who actually turned up */
.sd-start2{text-align:left}
.sd-start2 h3,.sd-start2 .sd-big,.sd-start2 .ph-sub{text-align:center}
.sd-start2 .assign-form{grid-template-columns:1.6fr 1.4fr;max-width:820px;margin-inline:auto}
.sd-start2 input[readonly]{width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--line-2);
  background:var(--panel-2);color:var(--ink-2);font:inherit}
.sd-roster{max-width:820px;margin:18px auto 0}
.sd-manlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:9px;margin-top:8px}
.sd-man span .cpill{margin-left:6px}
.sd-starts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}
.sd-starts .btn{flex:1 1 260px;justify-content:center}
.sd-startnote{max-width:820px;margin:12px auto 0;font-size:12px;text-align:center}
/* JHA signature */
.pinwrap{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.pinbox{width:150px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg-elev);
  color:var(--ink);font:800 22px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.42em;text-align:center}
.pinbox:focus{outline:none;border-color:rgba(243,164,0,.6)}
.jha-signed{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:14px;
  background:rgba(62,207,122,.07);border:1px solid rgba(62,207,122,.3)}
.jha-signed svg{width:20px;height:20px;color:var(--ok,#3ecf7a);flex:0 0 auto}
.jha-strip{margin-top:12px;padding:14px 16px;border-radius:14px;border:1px dashed var(--line-2);background:var(--panel-2)}
.jha-name{font:600 26px/1.1 "Segoe Script","Bradley Hand","Apple Chancery",cursive;color:var(--gold);margin-bottom:4px}
/* payroll: the fix grid + the log */
.fixgrid input.fix-h{width:70px;padding:7px 8px;border-radius:9px;border:1px solid var(--line-2);background:var(--bg-elev);
  color:var(--ink);font:inherit;font-variant-numeric:tabular-nums}
.fixgrid input.fix-h.fixed{border-color:rgba(243,164,0,.6);background:rgba(243,164,0,.08)}
.fixlog{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.fixrow{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel-2);font-size:13px}
.goal-grid{margin-bottom:12px}
.goal-grid 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;text-transform:none;letter-spacing:0;font-weight:400}
@media(max-width:720px){
  .ts-add .assign-form,.sd-start2 .assign-form{grid-template-columns:1fr}
  .sd-manlist{grid-template-columns:1fr}
  .sd-starts .btn{flex:1 1 100%}
  .pinwrap{flex-direction:column;align-items:stretch}
  .pinbox{width:100%}
  .pinwrap .btn{width:100%;justify-content:center}
  .fixrow{flex-direction:column;align-items:flex-start}
  .fixrow .btn{width:100%;justify-content:center}
  .ts-head{gap:8px}
  .ts-head .btn{flex:1 1 46%;justify-content:center}
}

/* ============ JOB SETUP & CLOSEOUT (2026-09-20, app-job.js) ============
   V66 details · V68 per diem · V71 building + owner · V72 waste loads ·
   V73 custom tabs · V74 question templates · V75 insurance · V76 emergency.
   Rides on .b2 / .b2-tabs / .b2-pane from the job book — this is only the
   form grid, the flag row, the waste bars and the emergency card. */
.jb .jb-flags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
/* block, not flex: the note is a sentence with <b> in it, and flex would make every
   run of text and every <b> its own column. */
.jb-note{display:block;padding:11px 13px;border-radius:12px;
  background:rgba(243,164,0,.07);border:1px solid rgba(243,164,0,.28);font-size:12.5px;color:var(--ink-2);line-height:1.6;margin-bottom:14px}
.jb-note svg{width:16px;height:16px;color:var(--gold);vertical-align:-3px;margin-right:6px}
.jb-note b{color:var(--gold-2)}
.jb-new{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold);margin:20px 0 10px;padding-top:12px;border-top:1px solid var(--line)}
.jb-new svg{width:15px;height:15px}
.jb-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.jb-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.jb-f.wide{grid-column:1 / -1}
.jb-f>span{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);font-weight:800}
.jb-f input,.jb-f textarea,.jb-f select{width:100%;background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink);
  border-radius:11px;padding:10px 12px;font:inherit;font-size:13.5px;min-height:42px}
.jb-f textarea{resize:vertical;line-height:1.45}
.jb-f input:focus,.jb-f textarea:focus,.jb-f select:focus{outline:none;border-color:rgba(243,164,0,.55)}
.jb-f input:disabled{opacity:.6}
.jb-ro{background:var(--panel-hd);border:1px solid var(--line);border-radius:11px;padding:10px 12px;
  font-size:13.5px;color:var(--ink-2);min-height:42px;display:flex;align-items:center;line-height:1.4}
.jb-swrow{gap:8px}
.jb-sub{font-size:12px;color:var(--mut);line-height:1.5;margin-top:10px}
.jb-sub svg{width:14px;height:14px;vertical-align:-2px}
.jb-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.jb-hint{font-size:11.5px;color:var(--mut)}
.jb-split{margin-top:4px}
.jb-bars{display:flex;flex-direction:column;gap:8px}
.jb-bar{display:grid;grid-template-columns:1fr;gap:4px}
.jb-bl{font-size:12.5px;color:var(--ink-2);font-weight:600}
.jb-bt{height:8px;border-radius:999px;background:var(--panel-hd);overflow:hidden}
.jb-bt span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-2),var(--gold))}
.jb-bv{font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.jb-loads td,.jb-loads th{white-space:nowrap}
.jb-loadform{margin-top:16px}
.jb-loadform .dl{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);font-weight:800;margin-bottom:10px}
.jb-q{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.jb-q:last-child{border-bottom:none}
.jb-qn{width:26px;height:26px;border-radius:50%;background:var(--panel-hd);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--mut)}
.jb-q.done .jb-qn{background:rgba(62,207,122,.14);border-color:rgba(62,207,122,.4);color:#5fe08a}
.jb-qb{min-width:0;display:flex;flex-direction:column;gap:7px}
.jb-qt{font-size:13.5px;color:var(--ink);line-height:1.45}
.jb-qb textarea,.jb-qb select{width:100%;background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink);
  border-radius:11px;padding:9px 12px;font:inherit;font-size:13.5px;resize:vertical}
.jb-qb textarea:focus,.jb-qb select:focus{outline:none;border-color:rgba(243,164,0,.55)}
.b2-tab.jb-addtab{border-style:dashed}
/* ten tabs do not fit one desktop row — wrap them rather than hide them behind a
   scroll only a mouse can find. The phone keeps the swipeable strip. */
@media(min-width:821px){ .jb .b2-tabs{flex-wrap:wrap;overflow:visible} }
/* the emergency card — the one thing on these screens that must read at a glance */
.jb-ec{border:1px solid rgba(255,77,94,.4);background:rgba(255,77,94,.06);border-radius:14px;padding:14px 16px}
.jb-ec.empty-ec{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2);line-height:1.5}
.jb-ec.empty-ec svg{width:17px;height:17px;flex:0 0 auto;color:#ff8792;margin-top:2px}
.ec-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:14px;color:var(--ink);margin-bottom:12px}
.ec-head svg{width:18px;height:18px;color:#ff8792}
.ec-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 18px}
.ec-l{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);font-weight:800}
.ec-v{font-size:14px;color:var(--ink);font-weight:600;line-height:1.35;word-break:break-word}
.ec-v.mono{font-family:var(--mono);font-size:16px;color:var(--gold-2)}
.ec-note{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,77,94,.25);
  font-size:12.5px;color:var(--ink-2);line-height:1.5}
.ec-note svg{width:15px;height:15px;flex:0 0 auto;color:#ff8792;margin-top:2px}
.jb-ecpanel .panel-head{margin-bottom:12px}
/* the two sections this build adds to the printed closeout report. The report's own
   .pd-tbl assumes short cells; the daily "what happened" column is a sentence, so
   these two tables are fixed-layout and wrap instead of running off the page. */
.closeout-doc [data-jb-closeout] .pd-tbl{table-layout:fixed}
.closeout-doc [data-jb-closeout] .pd-tbl td,
.closeout-doc [data-jb-closeout] .pd-tbl th{white-space:normal;overflow-wrap:anywhere}
.closeout-doc [data-jb-closeout] .pd-tbl:first-of-type th:nth-child(1){width:9%}
.closeout-doc [data-jb-closeout] .pd-tbl:first-of-type th:nth-child(2){width:13%}
.closeout-doc [data-jb-closeout] .pd-tbl:first-of-type th:nth-child(3){width:6%}
.closeout-doc [data-jb-closeout] .pd-tbl:first-of-type th:nth-child(4){width:7%}
.closeout-doc [data-jb-closeout] .pd-tbl:first-of-type th:nth-child(5){width:11%}
.closeout-doc [data-jb-closeout] .pd-tbl:first-of-type th:nth-child(6){width:22%}
@media(max-width:820px){
  .jb-grid{grid-template-columns:1fr}
  .jb-split{grid-template-columns:1fr}
  .ec-grid{grid-template-columns:1fr}
  .jb-q{grid-template-columns:24px 1fr;gap:9px}
  .jb-qs{grid-column:2}
  .jb-actions .btn{width:100%;justify-content:center}
  .jb-hint{width:100%}
}

/* ============ NOTIFICATIONS · DIGEST · SAFETY LOG (app-notify.js, 2026-09-20) ============ */
/* the unread count on the bell */
.bell-n{position:absolute;top:2px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--gold);color:#1a1206;font-size:10.5px;font-weight:800;line-height:17px;text-align:center;
  box-shadow:0 0 0 2px var(--bg-elev);pointer-events:none}
.bell.hasn::after{display:none}      /* the number replaces the plain dot, only where there is one */
.bp-item.go{cursor:pointer}
.bp-item.go:hover{background:rgba(243,164,0,.07)}
.bp-all{color:var(--gold);font-weight:700;cursor:pointer;font-size:11.5px}
.bp-all:hover{text-decoration:underline}

/* digest: the edition strip */
.nt-eds{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:2px 0 14px}
.nt-ed{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:9px;font-size:12.5px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--ink-2)}
.nt-ed b{font-family:var(--mono);color:var(--gold)}
.nt-ed.night{border-color:rgba(74,168,230,.45);background:rgba(74,168,230,.09)}
.nt-ed.night b{color:#7dc4f2}
.nt-ed-why{font-size:12px;color:var(--mut)}

/* digest: one row per section on the dashboard */
.nt-secs{display:flex;flex-direction:column;gap:2px}
.nt-sec{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;
  padding:11px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.nt-sec:last-child{border-bottom:none}
.nt-sec:hover{background:rgba(255,255,255,.025)}
.nt-sec.quiet{opacity:.55}
.nt-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--ink-2)}
.nt-ic svg{width:16px;height:16px}
.nt-sec-t{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.nt-sec-s{font-size:12px;color:var(--mut);margin-top:3px;line-height:1.4}

/* digest: the full list inside the modal */
.nt-block{border:1px solid var(--line);border-radius:12px;padding:14px 15px;margin-bottom:12px;background:rgba(255,255,255,.015)}
.nt-block-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.nt-block-h h3{font-size:14px;margin:0;display:flex;align-items:center;gap:8px}
.nt-block-h h3 svg{width:15px;height:15px;color:var(--mut)}
.nt-line{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:9px 0;border-bottom:1px solid var(--line)}
.nt-line:last-child{border-bottom:none}
.nt-k{font-size:13px;font-weight:600;color:var(--ink-2)}
.nt-v{justify-self:end}
.nt-sub{grid-column:1/-1;font-size:12px;color:var(--mut);line-height:1.45}
.nt-line.bad .nt-k{color:#ffb3b3}

/* the notice feed */
.nt-kinds{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.nt-kind{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:10px;font-size:12.5px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--ink-2)}
.nt-kind b{color:var(--gold);font-family:var(--mono)}
.nt-kind .bp-ic{width:26px;height:26px;border-radius:8px}
.nt-kind .bp-ic svg{width:13px;height:13px}
.nt-feed{display:flex;flex-direction:column}
.nt-ev{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:start;
  padding:13px 2px;border-bottom:1px solid var(--line)}
.nt-ev:last-child{border-bottom:none}
.nt-ev-t{font-size:13.5px;font-weight:700;line-height:1.35}
.nt-ev-m{font-size:11px;color:var(--mut-2);margin-top:5px;font-family:var(--mono)}

/* last incident + the counts tiles */
.nt-inc{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;margin:2px 0 14px}
.nt-inc-t{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.nt-since{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.nt-big{font-size:26px;font-weight:800;line-height:1.1;margin-top:3px;color:var(--ink)}
.nt-big.ok{color:var(--good)} .nt-big.warn{color:var(--warn)}
.nt-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.nt-tile{border:1px solid var(--line-2);border-radius:12px;padding:14px;background:rgba(255,255,255,.025);cursor:pointer}
.nt-tile:hover{border-color:rgba(243,164,0,.45);background:rgba(243,164,0,.05)}
.nt-tile-n{font-size:30px;font-weight:800;line-height:1;color:var(--gold)}
.nt-tile-l{font-size:12px;font-weight:700;color:var(--ink-2);margin-top:7px;display:flex;align-items:center;gap:6px}
.nt-tile-l svg{width:14px;height:14px;color:var(--mut)}
.nt-tile-s{font-size:11.5px;color:var(--mut);margin-top:4px;line-height:1.4}
.nt-dash{margin-bottom:16px}
.nt-log{margin-top:16px}

@media(max-width:820px){
  .nt-sec{grid-template-columns:32px 1fr;gap:10px}
  .nt-sec .viewall{grid-column:2;justify-self:start;margin-top:6px}
  .nt-tiles{grid-template-columns:1fr}
  .nt-since{grid-template-columns:1fr 1fr}
  .nt-ev{grid-template-columns:30px 1fr}
  .nt-ev .viewall{grid-column:2;justify-self:start;margin-top:8px}
  .nt-line{grid-template-columns:1fr}
  .nt-v{justify-self:start}
  .nt-eds{gap:6px}
  .nt-ed-why{width:100%}
}

/* ============ THE YARD (2026-09-20, app-yard.js) ============
   Row 73 the loadout list · row 74 the project inventory report · row 75 the
   inspection logged from the scan page and the machine's repair history.
   Rides on .b2 / .b2-tabs / .b2-pane (the job book) and on .scan-* (the scan
   page) — what is here is the loadout card, the return column, the checklist
   and the two history lists. */
.yd .jb-flags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.yd-lo{border:1px solid var(--line-2);border-radius:14px;padding:15px 16px;margin-bottom:14px;
  background:rgba(255,255,255,.018)}
.yd-lohead{margin-bottom:12px}
.yd-lot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:14.5px;color:var(--ink);line-height:1.35}
.yd-lometa{font-size:11.5px;color:var(--mut);margin-top:6px;line-height:1.6}
.yd-lometa .mono{color:var(--ink-2)}
.yd-lonote{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:8px}
.yd-lowhy{display:flex;align-items:flex-start;gap:6px;font-size:12px;color:var(--mut);margin-top:8px;line-height:1.5}
.yd-lowhy svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px;color:var(--gold)}
.yd-lines td,.yd-lines th{vertical-align:middle}
.yd-lines .addr{min-width:150px}
input.yd-qty{width:74px;background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink);
  border-radius:9px;padding:7px 9px;font:inherit;font-size:13.5px;text-align:right;min-height:36px}
input.yd-qty:focus{outline:none;border-color:rgba(243,164,0,.55)}
.yd-add{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.yd-add .dl,.yd-new .dl{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);font-weight:800;margin-bottom:10px}
.yd-addrow{display:grid;grid-template-columns:minmax(0,1fr) 92px auto;gap:10px;align-items:center}
/* a <select> takes its width from its longest OPTION, and a grid item's min-width is
   auto — together that pushes the item list off the side of the card on a phone.
   Pin both to the track. */
.yd-addrow .selwrap{min-width:0;max-width:100%}
.yd-addrow select{width:100%;max-width:100%;min-width:0;text-overflow:ellipsis}
.yd-addrow input{background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink);border-radius:11px;
  padding:10px 12px;font:inherit;font-size:13.5px;min-height:42px;width:100%;text-align:right}
.yd-addrow input:focus{outline:none;border-color:rgba(243,164,0,.55)}
.yd-addrow .btn{white-space:nowrap}
.yd-new{margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.yd-done{display:inline-flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--mut);line-height:1.5}
.yd-done svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px;color:var(--good)}
.yd-miss{display:flex;align-items:flex-start;gap:9px;margin:14px 0 0;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(255,77,94,.4);background:rgba(255,77,94,.07);font-size:12.5px;color:var(--ink-2);line-height:1.55}
.yd-miss svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px;color:#ff8792}
.yd-assetx{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.yd-assetx .dl{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);font-weight:800;margin-bottom:10px}

/* the checklist on the scan page — thumb-sized rows, one column, always */
.yd-form{display:flex;flex-direction:column;gap:14px}
.yd-checks{display:flex;flex-direction:column;gap:8px}
.yd-check{display:grid;grid-template-columns:26px 1fr;gap:11px;align-items:center;padding:11px 13px;
  border:1px solid var(--line-2);border-radius:12px;background:rgba(255,255,255,.025);cursor:pointer}
.yd-check input{position:absolute;opacity:0;width:0;height:0}
.yd-box{width:24px;height:24px;border-radius:8px;border:1.5px solid var(--line-2);background:var(--panel-2);
  display:grid;place-items:center;color:transparent}
.yd-box svg{width:15px;height:15px}
.yd-check input:checked+.yd-box{background:rgba(62,207,122,.18);border-color:rgba(62,207,122,.55);color:#5fe08a}
.yd-ctxt{font-size:13.5px;color:var(--ink-2);line-height:1.4}
.yd-check input:checked~.yd-ctxt{color:var(--ink)}
.yd-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.yd-fgrid .jb-f.wide{grid-column:1 / -1}
.yd-res{display:flex;flex-direction:column;gap:8px}
.yd-resopt{display:grid;grid-template-columns:auto 1fr;gap:4px 11px;align-items:center;padding:11px 13px;
  border:1px solid var(--line-2);border-radius:12px;background:rgba(255,255,255,.025);cursor:pointer}
.yd-resopt input{width:17px;height:17px;accent-color:var(--gold);grid-row:1 / span 2}
.yd-resopt span{font-size:13.5px;font-weight:700;color:var(--ink)}
.yd-resopt small{grid-column:2;font-size:11.5px;color:var(--mut);line-height:1.45}
.yd-resopt:has(input:checked){border-color:rgba(243,164,0,.55);background:rgba(243,164,0,.07)}
.yd-resopt.fail:has(input:checked){border-color:rgba(255,77,94,.55);background:rgba(255,77,94,.08)}
.btn.yd-file{width:100%;justify-content:center}
.yd-hint{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;color:var(--mut);line-height:1.5}
.yd-hint svg{width:14px;height:14px;flex:0 0 auto;margin-top:1px}

/* the two histories — same list on the scan page and in the asset modal */
.yd-list{display:flex;flex-direction:column;gap:9px}
.yd-none{font-size:12.5px;color:var(--mut);padding:12px 14px;border:1px dashed var(--line-2);border-radius:12px}
.yd-insp,.yd-mt{border:1px solid var(--line-2);border-left-width:3px;border-radius:12px;padding:11px 13px;
  background:rgba(255,255,255,.022)}
.yd-insp.ok{border-left-color:rgba(62,207,122,.7)}
.yd-insp.warn{border-left-color:rgba(255,140,32,.75)}
.yd-insp.bad{border-left-color:rgba(255,77,94,.8)}
.yd-inspt,.yd-mtt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;color:var(--ink)}
.yd-inspt .mono,.yd-mtt .mono{font-size:12.5px;color:var(--mut)}
.yd-mtt b{color:var(--gold-2)}
.yd-inspm,.yd-mtm{font-size:11.5px;color:var(--mut);margin-top:5px;line-height:1.5}
.yd-inspn,.yd-mtw{font-size:12.5px;color:var(--ink-2);margin-top:6px;line-height:1.5}
@media(max-width:820px){
  .yd-addrow{grid-template-columns:1fr 1fr}
  .yd-addrow .selwrap{grid-column:1 / -1}
  .yd-addrow .btn{width:100%;justify-content:center}
  .yd-fgrid{grid-template-columns:1fr}
  .yd-lines .addr{min-width:0}
  input.yd-qty{width:100%;max-width:120px}
}

/* ============================================================================
   THE BOARD'S MAN LIST + the start screen's board note (2026-09-20, row 78)
   ============================================================================ */
/* the men/hours line on a board cell — third line under the site and the task */
.bc-men{font-size:10.5px;color:var(--mut);margin-top:5px;display:flex;align-items:center;gap:5px;line-height:1.3}
.bc-men svg{width:12px;height:12px;flex:none}
.bc-men.set{color:var(--gold)}
/* the slot modal: site + planned hours side by side, the crew's men under them */
.bslot-form{grid-template-columns:1.6fr .9fr}
/* no inner scroll: the modal already scrolls at 88vh, and a second scroller inside it
   sliced the last man's name in half against a hard panel edge. One scroller only. */
.bslot-men{margin-top:8px}
.bslot-men .sd-man{align-items:center}
.bslot-foot{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin-top:18px}
.bslot-foot .btn{flex:0 1 auto;justify-content:center}
/* what the board says about the site the foreman just picked */
.sd-boardnote{max-width:820px;margin:14px auto 0;padding:11px 14px;border-radius:12px;
  font-size:12.5px;line-height:1.55;border:1px solid var(--line-2);background:rgba(255,255,255,.025);
  color:var(--ink-2);display:flex;align-items:flex-start;gap:10px;text-align:left}
.sd-boardnote svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--mut)}
.sd-boardnote b{color:var(--ink)}
.sd-boardnote.on{border-color:rgba(74,168,230,.4);background:rgba(74,168,230,.08)}
.sd-boardnote.on svg{color:#4aa8e6}
.sd-boardnote.bad{border-color:rgba(255,92,92,.4);background:rgba(255,92,92,.08)}
.sd-boardnote.bad svg{color:var(--bad)}
/* a head start that is refused must not still look like the brightest thing on screen.
   Scoped to these two rows — the portal has no global disabled-button style yet. */
.sd-starts{align-items:stretch}
.sd-starts .btn{min-height:52px;text-align:center;line-height:1.35}
.sd-starts .btn:disabled,.bslot-foot .btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;filter:grayscale(.55)}
@media(max-width:820px){
  .bslot-form{grid-template-columns:1fr}
  .bslot-foot .btn{flex:1 1 100%}
}

/* ============================================================================
   CSV IMPORT (2026-09-20, row 97) — the backstop where there is no integration
   ============================================================================ */
.ci-kinds{display:flex;gap:9px;flex-wrap:wrap;margin:4px 0 16px}
.ci-kind{display:inline-flex;align-items:center;gap:8px}
.ci-kind.on{border-color:rgba(243,164,0,.55);background:rgba(243,164,0,.1);color:var(--ink)}
.ci-n{font-family:var(--mono);font-size:11px;padding:1px 7px;border-radius:999px;
  background:rgba(255,255,255,.07);color:var(--mut)}
.ci-kind.on .ci-n{background:rgba(243,164,0,.22);color:var(--gold)}

.ci-pick{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.ci-file{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:12px;cursor:pointer;
  border:1px dashed var(--line-2);background:rgba(255,255,255,.025);color:var(--ink-2);font-size:13px;font-weight:600}
.ci-file:hover{border-color:var(--gold);background:rgba(243,164,0,.06);color:var(--ink)}
.ci-file svg{width:15px;height:15px}
.ci-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.ci-foot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px}
.ci-foot .btn{justify-content:center}

.ci-stage{margin-top:18px;padding:16px;border-radius:14px;
  border:1px solid rgba(243,164,0,.35);background:rgba(243,164,0,.05)}
.ci-stagehead{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.ci-counts{display:flex;gap:7px;flex-wrap:wrap}

.ci-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px;margin-top:8px}
.ci-maprow{display:flex;flex-direction:column;gap:5px;min-width:0}
.ci-mapf{font-size:12px;font-weight:600;color:var(--ink-2)}
.ci-req{color:var(--gold);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}

.ci-prev td.addr{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "what happens" carries the reason a line was refused — td is nowrap portal-wide, so
   the reason ran off the side of the table instead of wrapping under itself */
.ci-prev td:last-child,.ci-prev th:last-child{white-space:normal;min-width:210px;line-height:1.5}
/* the key column is an identifier — "IMP-1001" broke across two lines as "IMP-/1001" */
.ci-landed td.ci-key{white-space:nowrap;font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.ci-prev tr.ci-r-dupe td{opacity:.62}
.ci-prev tr.ci-r-error td{background:rgba(255,92,92,.06)}
.ci-gate{margin-top:16px}

@media(max-width:820px){
  /* the "last file · time" tag squeezed the panel title into two lines and then wrapped
     itself onto four — under the heading on a phone, on one line */
  #csvImport>.panel-head{flex-direction:column;align-items:flex-start;gap:9px}
  #csvImport>.panel-head .tag{white-space:nowrap}
  .ci-kinds{gap:7px}
  .ci-kind{flex:1 1 100%;justify-content:center}
  .ci-pick{flex-direction:column;align-items:stretch}
  .ci-file{justify-content:center}
  .ci-map{grid-template-columns:1fr}
  .ci-foot .btn{flex:1 1 100%}
  .ci-stagehead{flex-direction:column}
  .ci-prev td.addr{max-width:130px}
}

/* ======================================================================
   THE MAN — skills, emergency contacts, the certificate pack (2026-09-20)
   Rows 57 / 59 / 61 off the Fieldflo call. Appended; nothing above is touched.
   ====================================================================== */
.pp .b2-tabs{margin-top:4px}
.pp .pp-warntab .b2-n{background:rgba(255,77,94,.2);color:#ff8792}
.pp .kpis{margin:14px 0 4px}
.pp-err{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.5;color:#ff8792;
  background:rgba(255,77,94,.09);border:1px solid rgba(255,77,94,.34);border-radius:12px;padding:10px 13px;margin:0 0 14px}
.pp-err svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px}
/* .jb-f is a COLUMN flex box, so a wrap inside it wrapped into columns and dropped the
   two boxes a long way apart with the tick sitting under its own label. Row, explicitly. */
.pp-opts{display:flex;flex-flow:row wrap;align-items:center;gap:10px 26px;padding-top:2px}
.pp-opts .pp-chk{align-items:center}
.pp-chk{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--ink-2);line-height:1.45;cursor:pointer;min-width:0}
.pp-chk input{width:17px;height:17px;flex:0 0 auto;margin-top:1px;accent-color:var(--gold)}
.pp-chk input:checked+span{color:var(--ink)}
.pp .panel.pp-form{margin:18px 0 0;background:var(--panel-2)}

/* --- 59. the skill grid --- */
.pp-matrix table{min-width:640px}
.pp-matrix th.pp-cat{font-size:10px;letter-spacing:.08em;text-align:center;color:var(--gold-2);
  border-bottom:1px solid var(--line-2);white-space:nowrap}
.pp-matrix th.pp-sk{text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:0;padding-left:4px;padding-right:4px;white-space:nowrap}
.pp-matrix td.pp-c{text-align:center;padding-left:4px;padding-right:4px}
.pp-c .pp-dot{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;
  font-size:12px;font-weight:800;line-height:1;border:1px solid var(--line-2);background:var(--panel-hd);color:var(--mut-2)}
.pp-c.ok   .pp-dot{background:rgba(62,207,122,.14);border-color:rgba(62,207,122,.34);color:#5fe08a}
.pp-c.soon .pp-dot{background:rgba(255,176,32,.12);border-color:rgba(255,176,32,.32);color:#ffc86a}
.pp-c.warn .pp-dot{background:rgba(255,140,32,.15);border-color:rgba(255,140,32,.4);color:#ffab54}
.pp-c.bad  .pp-dot{background:rgba(255,77,94,.15);border-color:rgba(255,77,94,.44);color:#ff8792}
.pp-c.arch .pp-dot{background:rgba(140,140,150,.13);border-color:var(--line-2);color:var(--mut)}
.pp-c.none .pp-dot{opacity:.45}
.pp-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--mut);margin-top:12px}
.pp-legend .pp-c{display:inline-flex;margin-left:8px}
.pp-legend .pp-c:first-child{margin-left:0}

/* --- 59. who can go where --- */
.pp-cbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 18px}
.pp-cgroup{border:1px solid var(--line-2);border-radius:13px;padding:12px 13px;background:rgba(255,255,255,.022);min-width:0}
.pp-cglabel{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-2);font-weight:800;margin-bottom:9px}
.pp-cgroup .pp-chk{margin-bottom:7px;font-size:12.5px}
.pp-cgroup .pp-chk:last-child{margin-bottom:0}
.pp-findout{margin-top:16px}
.pp-findhead{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--mut);margin-bottom:12px}
.pp-crews{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.pp-crew{border:1px solid var(--line-2);border-left-width:3px;border-radius:13px;padding:12px 14px;background:rgba(255,255,255,.022);min-width:0}
.pp-crew.ok{border-left-color:rgba(62,207,122,.7)}
.pp-crew.part{border-left-color:rgba(255,140,32,.75)}
.pp-crew.bad{border-left-color:rgba(255,77,94,.8)}
.pp-crewh{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:13.5px;color:var(--ink)}
.pp-crewh .muted{font-size:12px}
.pp-crewb{margin-top:9px;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.pp-crewb svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px;color:var(--gold)}
/* .pp-short is used BOTH inside .pp-crewb (which sizes its own icons) and on its own
   in the job modal, where it had no size rule at all and the ban icon rendered at the
   full width of the modal. Size it here, where it is declared. */
.pp-short{display:block;margin-bottom:5px;line-height:1.5}
.pp-short:last-child{margin-bottom:0}
.pp-short svg{width:14px;height:14px;flex:0 0 auto;vertical-align:-2px;margin-right:5px;color:#ff8792}
.pp-sites{margin-top:18px;background:var(--panel-2)}
.pp-site{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;
  padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer}
.pp-site:last-of-type{border-bottom:none}
.pp-site:hover{background:rgba(243,164,0,.04)}
.pp-site:focus-visible{outline:2px solid rgba(243,164,0,.6);outline-offset:2px;border-radius:8px}
.pp-sitel{min-width:0;font-size:13.5px}
.pp-sitel .mono{margin-left:7px}
.pp-siter{display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-width:0}

/* --- 59. the badge on a board cell (dispatch's icon on the job) --- */
.pp-bchip{display:inline-flex;align-items:center;gap:4px;margin-top:5px;padding:2px 7px;border-radius:7px;
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.02em;line-height:1.45;
  background:rgba(243,164,0,.12);border:1px solid rgba(243,164,0,.34);color:var(--gold-2);align-self:flex-start;max-width:100%}
.pp-bchip.bad{background:rgba(255,77,94,.14);border-color:rgba(255,77,94,.42);color:#ff8792}
.pp-bchip svg{width:11px;height:11px;flex:0 0 auto}
.pp-bchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* --- 59 on the job modal --- */
.pp-job .pp-jok,.pp-job .pp-jblocked{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-top:10px}
.pp-job .pp-jok svg{width:15px;height:15px;vertical-align:-3px;margin-right:6px;color:#5fe08a}

/* --- 61. the emergency card --- */
.pp-ecard{border:1px solid var(--line-2);border-left:3px solid rgba(255,77,94,.7);border-radius:13px;
  padding:13px 15px;background:rgba(255,255,255,.022)}
.pp-ecard.none{border-left-color:rgba(255,176,32,.8);font-size:13px;color:var(--ink-2);line-height:1.55}
.pp-ecard.none svg{width:15px;height:15px;vertical-align:-3px;margin-right:6px;color:#ffc86a}
.pp-ecnote{font-size:12px;color:var(--mut);margin-top:7px;line-height:1.5}
.pp-ecrow{display:grid;grid-template-columns:132px minmax(0,1fr);gap:6px 14px;padding:7px 0;border-bottom:1px solid var(--line)}
.pp-ecrow:last-of-type{border-bottom:none}
.pp-ecl{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);font-weight:800;padding-top:2px}
.pp-ecv{font-size:13.5px;color:var(--ink);line-height:1.5;min-width:0;word-break:break-word}
.pp-tel{color:var(--gold);text-decoration:none;font-size:13px;margin-left:8px;white-space:nowrap}
.pp-tel:hover{text-decoration:underline}
.pp-ecfoot{font-size:11.5px;color:var(--mut);margin-top:10px}
.pp-gap{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.55;color:#ffab54;
  background:rgba(255,140,32,.08);border:1px solid rgba(255,140,32,.32);border-radius:12px;padding:11px 13px;margin:0 0 14px}
.pp-gap svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px}
.pp-erow.none td{opacity:.86}
.pp-etbl table{table-layout:fixed;width:100%}
.pp-etbl th:nth-child(1){width:14%}
.pp-etbl th:nth-child(2){width:9%}
.pp-etbl th:nth-child(3){width:20%}
.pp-etbl th:nth-child(4){width:10%}
.pp-etbl th:nth-child(5){width:27%}
.pp-etbl th:nth-child(6){width:11%}
.pp-etbl th:nth-child(7){width:9%}
/* the app-wide `td{white-space:nowrap}` printed the medical note straight over the
   Confirmed date. These cells wrap; the date and the edit link do not. */
.pp-etbl td{white-space:normal;overflow-wrap:anywhere;vertical-align:top}
.pp-etbl td.mono,.pp-etbl td:last-child{white-space:nowrap}
.pp-etbl .linkbtn{white-space:normal;text-align:left}
.pp-etbl td:last-child .linkbtn{white-space:nowrap}

/* --- 57. the certificate pack document (same paper as the closeout report) --- */
.certpack-doc .pd-tbl{margin:6px 26px;width:calc(100% - 52px);border-collapse:collapse;font-size:12.5px}
.certpack-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}
.certpack-doc .pd-tbl td{padding:6px;border-bottom:1px solid #e6e6e6;vertical-align:top}
.certpack-doc .pd-tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.certpack-doc .pd-grid{grid-template-columns:repeat(3,1fr)}
.certpack-doc .pd-man{margin-top:16px;padding-top:4px;border-top:1px solid #e6e6e6}
.certpack-doc .pd-man:first-of-type{border-top:none}
.certpack-doc .pd-man h4{display:flex;flex-wrap:wrap;align-items:center;gap:8px;text-transform:none;
  font-size:14px;letter-spacing:0;color:#151515;font-weight:800}
.certpack-doc .pd-hat{font-size:11px;color:#777;font-weight:600}
.certpack-doc .pd-flag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;
  padding:2px 8px;border-radius:999px;border:1px solid #bbb;color:#444}
.certpack-doc .pd-flag.ok{border-color:#2f8f52;color:#1e6b3a;background:#eaf7ee}
.certpack-doc .pd-flag.bad{border-color:#c1121f;color:#a00e1a;background:#fdeaec}
.certpack-doc .pd-arch{margin:8px 26px 0;font-size:11.5px;color:#555;line-height:1.5}
/* auto layout let the Status column ("Expires within 30 days — 17 left") push the
   table past the right edge of the white page. Fixed layout with named widths keeps
   every table inside the paper and wraps the long cell instead. */
.certpack-doc .pd-tbl{table-layout:fixed}
/* the app-wide `td{white-space:nowrap}` (line ~333) is what actually did the damage:
   with fixed widths the text simply printed over the next column. Wrap it. */
.certpack-doc .pd-tbl td,.certpack-doc .pd-tbl th{white-space:normal;overflow-wrap:anywhere}
.certpack-doc .pd-t-req th:nth-child(1){width:34%}
.certpack-doc .pd-t-req th:nth-child(2){width:24%}
.certpack-doc .pd-t-req th:nth-child(3){width:12%}
.certpack-doc .pd-t-req th:nth-child(4){width:30%}
.certpack-doc .pd-t-tick th:nth-child(1){width:23%}
.certpack-doc .pd-t-tick th:nth-child(2){width:15%}
.certpack-doc .pd-t-tick th:nth-child(3){width:19%}
.certpack-doc .pd-t-tick th:nth-child(4){width:13%}
.certpack-doc .pd-t-tick th:nth-child(5){width:13%}
.certpack-doc .pd-t-tick th:nth-child(6){width:17%}
.certpack-doc .pd-t-skill th:nth-child(1){width:27%}
.certpack-doc .pd-t-skill th:nth-child(2){width:13%}
.certpack-doc .pd-t-skill th:nth-child(3){width:15%}
.certpack-doc .pd-t-skill th:nth-child(4){width:13%}
.certpack-doc .pd-t-skill th:nth-child(5){width:14%}
.certpack-doc .pd-t-skill th:nth-child(6){width:18%}
/* a date is ten characters and must never break across two lines on a certificate */
.certpack-doc .pd-tbl td.mono{white-space:nowrap}
@media(max-width:720px){ .certpack-doc .pd-tbl td.mono{white-space:normal} }
/* a lapsed row must read as lapsed on PAPER, where the colour may not print at all */
.certpack-doc .pd-tbl tr.pdc-expired td{background:#fdeaec}
.certpack-doc .pd-tbl tr.pdc-expired td:last-child{font-weight:800;color:#a00e1a}
.certpack-doc .pd-tbl tr.pdc-expired td:first-child{box-shadow:inset 3px 0 0 #c1121f}
.certpack-doc .pd-tbl tr.pdc-expiring30 td:last-child,
.certpack-doc .pd-tbl tr.pdc-expiring60 td:last-child{font-weight:700;color:#8a5300}
.certpack-doc .pd-tbl tr.pdc-pending td:last-child{color:#555;font-style:italic}
@media(max-width:720px){
  .certpack-doc .pd-tbl{margin:6px 20px;width:calc(100% - 40px)}
  .certpack-doc .pd-arch{margin-left:20px;margin-right:20px}
  .certpack-doc .pd-tbl{display:table}.certpack-doc .pd-tbl tbody{display:table-row-group}
  .certpack-doc .pd-tbl thead{display:table-header-group}
  .certpack-doc .pd-tbl tr{display:table-row;background:none;border:none;border-radius:0;padding:0;margin:0;box-shadow:none}
  /* the app's phone table styling is built for dark cards: it gives a th a dark
     background and a td text-align:right. On a white certificate that printed a
     near-black heading on a near-black band and right-aligned every man's name.
     This is paper: pale header, text on the left. */
  .certpack-doc .pd-tbl td,.certpack-doc .pd-tbl th{display:table-cell;width:auto;color:#151515;
    font-size:11px;white-space:normal;text-align:left;background:transparent}
  .certpack-doc .pd-tbl th{background:#efefef;color:#555}
  .certpack-doc .pd-tbl td::before{content:none}
  .certpack-doc .pd-tbl td.num,.certpack-doc .pd-tbl th.num{text-align:right}
  .certpack-doc .pd-tbl tr.pdc-expired td{background:#fdeaec}
  /* the cover was still three columns wide at 390px and squeezed every value into a
     five-line stack. One column, like every other document on a phone. */
  .certpack-doc .pd-grid{grid-template-columns:1fr}
  .certpack-doc .pd-title{font-size:19px}
  /* "HELD BY" broke to three lines in a 12% column on a 390px screen. The four-column
     summary still reads at 390px once the widths are re-cut. */
  .certpack-doc .pd-t-req th:nth-child(1){width:33%}
  .certpack-doc .pd-t-req th:nth-child(2){width:22%}
  .certpack-doc .pd-t-req th:nth-child(3){width:17%}
  .certpack-doc .pd-t-req th:nth-child(4){width:28%}
  /* the six-column ticket and skill tables do NOT. Squeezed into 350px they broke
     ticket numbers mid-digit — "WHMI S-93582 8" — which on a certificate is worse
     than useless. Keep the columns their real width and let the man's block swipe.
     Print puts it back (below), so a PDF is never a scrolling table. */
  .certpack-doc .pd-man{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .certpack-doc .pd-t-tick,.certpack-doc .pd-t-skill{min-width:620px}
  .certpack-doc .pd-t-tick th:nth-child(2){width:16%}
  .certpack-doc .pd-t-tick th:nth-child(3){width:18%}
  .certpack-doc .pd-t-skill th:nth-child(2){width:15%}
  .certpack-doc .pd-t-skill th:nth-child(3){width:17%}
  .certpack-doc .pd-t-skill th:nth-child(1){width:25%}
  .certpack-doc .pd-t-tick td,.certpack-doc .pd-t-tick th,
  .certpack-doc .pd-t-skill td,.certpack-doc .pd-t-skill th{overflow-wrap:break-word}
  .certpack-doc .pd-t-tick td.mono,.certpack-doc .pd-t-skill td.mono{white-space:nowrap}
}
/* printing the pack: keep a man's block on one page, and keep the paper colours */
@media print{
  /* a printed page is a page, never a scroller — undo the phone swipe */
  .certpack-doc .pd-man{overflow:visible}
  .certpack-doc .pd-t-tick,.certpack-doc .pd-t-skill{min-width:0}
  .certpack-doc .pd-man{break-inside:avoid;page-break-inside:avoid}
  .certpack-doc .pd-tbl tr{break-inside:avoid;page-break-inside:avoid}
  .certpack-doc .pd-tbl,.certpack-doc .pd-flag,.certpack-doc .pd-tbl tr.pdc-expired td{
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .certpack-doc .pd-sign{break-inside:avoid;page-break-inside:avoid}
}

/* phone
   Two things the app-wide "tables become dark stacked cards at 720px" rule gets wrong
   here, and both were found by looking at the screenshot, not by a passing assertion:

   1. The skill grid is a MATRIX. Stacked as cards it came out 12,512px tall and pushed
      the page 674px wide at a 390px viewport. A matrix is only a matrix as a table, so
      it stays one and scrolls sideways inside its own wrapper.
   2. The certificate pack is a white paper document. Its tables must stay tables (that
      part the closeout report already does) AND they must not force the paper wider
      than the phone — six columns of ticket numbers ran to 500px. Fixed layout plus a
      word break keeps the paper 390px wide and the text readable. */
@media(max-width:720px){
  .pp-matrix{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pp-matrix table{display:table;min-width:620px;width:auto}
  .pp-matrix thead{display:table-header-group}
  .pp-matrix tbody{display:table-row-group}
  .pp-matrix tr{display:table-row;background:none;border:none;border-radius:0;padding:0;margin:0;box-shadow:none}
  .pp-matrix td,.pp-matrix th{display:table-cell;width:auto;white-space:nowrap;font-size:11.5px;padding:7px 4px}
  .pp-matrix td::before{content:none}
  .pp-matrix td:first-child{white-space:normal;min-width:130px}
  .pp-matrix .tm-av{width:28px;height:28px;border-radius:8px;font-size:11px}
  .pp-matrix .tm-mail{display:none}
  .certpack-doc .pd-tbl{table-layout:fixed}
  .certpack-doc .pd-tbl td,.certpack-doc .pd-tbl th{word-break:break-word;overflow-wrap:anywhere;padding:5px 4px}
  .certpack-doc .pd-man h4{font-size:13px}
  .pp-ecrow{grid-template-columns:1fr;gap:3px}
  .pp-ecl{padding-top:0}
  .pp-tel{margin-left:0;display:inline-block;margin-top:3px}
  .pp-crews,.pp-cbox{grid-template-columns:1fr}
  .pp-site{flex-direction:column;align-items:flex-start}
  .pp .kpis.co-kpis{grid-template-columns:1fr 1fr}
  .pp-legend{font-size:11.5px}
  .pp-bchip{font-size:9px;padding:1px 5px}
}

/* ================= 2026-09-20 PHONE GATE FIX =================
   The six phone-only failures the publish gate was still reporting — two bugs,
   each hitting two roles. Both measured in a real browser at 390px before and
   after; the numbers and the screenshots are in outbox/phone_fix_2026-09-20/.

   (A) 108px of sideways scroll on app/owner/board and app/lead/board, at the
       top of the page and at the bottom.

       The element: the `.cpill.bad` in the "Sites that demand an orientation"
       panel — "Dale Ferris, Otis Brandt, Petra Nowak, Mika Duarte turned back".
       `.cpill` is `white-space:nowrap` (line 960), so it has no min-content
       narrower than the whole sentence. Its `.wr` is a flex item of `.wrow`
       with the default `min-width:auto`, so it cannot shrink below that:
       383px wide starting at x=115 ends at 498px, and 498 - 390 = the 108.

       The 2026-09-16 phone pass already meant to fix exactly this —
       `.cchip,.cpill{white-space:normal}` at line 744 — but it sits BEFORE the
       base `.cpill{white-space:nowrap}` at line 960 and loses on equal
       specificity, so the pill never wrapped. (`.cchip` declares no
       white-space, so line 744 does still reach it; only `.cpill` was lost.)
       The same declaration, placed after the base rule, is all this needs.

       The `.sidebar` measuring 498px wide was the SYMPTOM, not the cause:
       `html{overflow-x:hidden}` makes <html> the scroll container, so a
       position:fixed left:0/right:0 bottom bar stretches to the document's
       scroll width. Constraining the bar on its own left the 108px untouched
       (bisect trial C); wrapping the pill returns the document to 390px and
       the bar follows to 390px by itself.

   (B) 7 controls under the 44px thumb minimum on app/owner/tickets and
       app/lead/crewcerts: 4x `.b2-tab` at 33px and 3x `.jb-f select` at 42px.

       `.b2-tab` was simply missing from the tap-target list in the 2026-09-16
       block (line 750). The selects ARE in that list, but
       `.jb-f input,.jb-f textarea,.jb-f select{min-height:42px}` (line 1777)
       is later and equally specific, so it undercut the 44px back down to 42.
       Both are repaired here — after both — so every page that uses the
       `.b2-tabs`/`.b2-tab` component (Tickets & Certs, My Crew, the job book,
       the people pages) and every `.jb-f` form gets the 44px, not just the two
       pages the gate happened to name. `.jb-ro` is the read-only twin of
       `.jb-f input` and moves with it so the rows stay aligned.

   Phone only (max-width:720px, the same breakpoint as the 2026-09-16 pass), so
   desktop is untouched by construction. Nothing here clips: no
   overflow-x:hidden band-aid, and the table/scroll behaviour of the v21-scroll
   fix is not referenced. */
@media(max-width:720px){
  .cpill{white-space:normal}

  .b2-tab{min-height:44px}
  .jb-f input,.jb-f textarea,.jb-f select,.jb-ro,.yd-addrow input{min-height:44px}
}

/* ==========================================================================
   THE FORM BUILDER (2026-09-23) — the Forms page: templates, the owner's builder,
   the fill view on the phone, the Submitted list, one opened form, and the block
   on the job modal. Black + gold, the same .panel / .jb-f / .b2-tab pieces as the
   rest of the app. Phone: every control 44px, every field 16px, nothing sideways.
   ========================================================================== */
.fb-list{display:flex;flex-direction:column;gap:10px}
.fb-card{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap;padding:14px 16px;
  border:1px solid var(--line);border-radius:14px;background:var(--panel-2)}
.fb-ct{flex:1 1 260px;min-width:0}
.fb-ct b{font-size:15px;margin-right:8px}
.fb-cf{margin-top:8px;display:flex;flex-wrap:wrap;gap:2px 4px;align-items:center}
.fb-ca{display:flex;gap:8px;flex-wrap:wrap}
.fb-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-bottom:14px}
.fb-frow{display:grid;grid-template-columns:1fr 190px auto auto;gap:10px 12px;align-items:end;padding:12px 0;border-top:1px solid var(--line)}
.fb-frow .jb-f.wide{grid-column:1 / -1}
.fb-req{display:inline-flex;align-items:center;gap:8px;min-height:42px;font-size:12.5px;color:var(--ink-2);white-space:nowrap;cursor:pointer}
.fb-req input{width:18px;height:18px;accent-color:var(--gold);margin:0}
.fb-q{padding:14px 0;border-top:1px solid var(--line)}
.fb-q:first-of-type{border-top:none;padding-top:4px}
.fb-ql{font-size:13.5px;font-weight:700;margin-bottom:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fb-q textarea,.fb-q input:not([type=checkbox]):not([type=file]),.fb-q select{width:100%;min-height:42px;background:var(--panel-2);
  border:1px solid var(--line-2);color:var(--ink);border-radius:11px;padding:10px 12px;font:inherit;font-size:14.5px}
.fb-q textarea{min-height:64px;resize:vertical;line-height:1.45}
.fb-q input:focus,.fb-q textarea:focus,.fb-q select:focus{outline:none;border-color:rgba(243,164,0,.55)}
.fb-yn{display:flex;gap:8px}
.fb-ynb{flex:1 1 0;min-height:42px;border-radius:11px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink-2);
  font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.fb-ynb.on{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1a1206;border-color:transparent}
.fb-sig{display:block;width:100%;max-width:100%;height:150px;background:#fff;border-radius:11px;border:1px solid var(--line-2);
  touch-action:none;cursor:crosshair}
.fb-sigrow{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap}
.fb-sigrow input{flex:1 1 160px;min-width:0}
.fb-photo-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fb-thumb{display:block;max-width:100%;max-height:220px;border-radius:11px;border:1px solid var(--line-2);margin-top:8px}
.fb-err{margin:0 0 14px;padding:11px 13px;border-radius:12px;background:rgba(255,77,94,.1);border:1px solid rgba(255,77,94,.35);color:#ff8792;font-size:13px}
.fb-err div+div{margin-top:4px}
.fb-err svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.fb-done{text-align:center;padding:26px 16px 10px}
.fb-done .fb-ok{width:56px;height:56px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;background:rgba(62,207,122,.13);color:#5fe08a}
.fb-done .fb-ok svg{width:26px;height:26px}
.fb-kv{display:grid;grid-template-columns:200px 1fr;gap:10px 16px;font-size:13.5px}
.fb-kv .k{color:var(--mut);font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:800;padding-top:3px}
.fb-kv .v{min-width:0;overflow-wrap:anywhere}
.fb-kv img{display:block;max-width:100%;max-height:220px;border-radius:10px;border:1px solid var(--line-2);background:#fff}
.fb-kv img.sigimg{max-height:110px}
.fb-job .wrow .wl{min-width:0}
@media(max-width:720px){
  .fb-grid,.fb-frow{grid-template-columns:1fr}
  .fb-frow .jb-f,.fb-frow .fb-req,.fb-frow .btn{grid-column:1 / -1}
  .fb-req{min-height:44px}
  .fb-card .fb-ca{width:100%}
  .fb-card .fb-ca .btn{flex:1 1 auto}
  .fb-q textarea,.fb-q input:not([type=checkbox]):not([type=file]),.fb-q select,.fb-ynb,.fb-sigrow input{min-height:44px;font-size:16px}
  .fb-kv{grid-template-columns:1fr;gap:4px 0}
  .fb-kv .v{margin-bottom:10px}
  .fb-page .b2-tab{min-height:44px}
}

/* ---- change or delete a ticket (2026-09-26) ----
   Edit / Delete beside Renew on a man's file, the edit mode of the File-a-ticket panel,
   the one delete confirmation, and the "Deleted — archived" state in the archive.
   Same 44px phone rule as the rest of the panel: .btn / select / input min-height come
   from the phone block, and these rules never undercut them. Appended, nothing rewritten. */
.cpill.del{background:rgba(255,77,94,.09);color:#f0aab2;border-color:rgba(255,77,94,.32)}
tr.cert-row.del td{opacity:.72}
.wt-rowbtns{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.btn.danger{background:transparent;color:#ff8792;border:1px solid rgba(255,77,94,.5);box-shadow:none}
.btn.danger:hover{border-color:#ff5c5c;color:#ffb3b9;filter:none;transform:translateY(-1px)}
.btn.ghost.danger{color:#ff8792;border-color:rgba(255,77,94,.5)}
.btn.ghost.danger:hover{border-color:#ff5c5c;color:#ffb3b9}
.wt-del{display:flex;gap:13px;align-items:flex-start;margin:0 0 18px;padding:16px 18px;border-radius:14px;
  background:rgba(255,77,94,.08);border:1px solid rgba(255,77,94,.42)}
.wt-del svg{width:22px;height:22px;flex:0 0 auto;color:#ff5c5c}
.wt-del>div{flex:1;min-width:0}
.wt-del-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:13px}
.wt-form select:disabled{opacity:.6;cursor:not-allowed}
.panel.writepanel.editing{border-color:rgba(243,164,0,.45)}
/* Edit / Delete scroll the panel into view; the pinned header (and the phone's sub-tab row)
   must not sit on top of it — scroll-margin keeps the question readable */
.panel.writepanel,.wt-del{scroll-margin-top:110px}
@media (max-width:900px){
  .panel.writepanel,.wt-del{scroll-margin-top:150px}
  .wt-rowbtns{width:100%;justify-content:flex-start}
  .wt-rowbtns .btn{flex:1 1 auto}
  .wt-del-btns .btn{flex:1 1 100%}
}

/* ---- the man's record, depth (2026-09-27, go-live wave 1: GL-003 · 087 · 088 · 028 · 027 · 029 · 093 · 004) ----
   The strip under Tickets & Certs / My Crew, the record block on a man's file, the safety
   scorecards, the ticket-type admin, the exports and the board's skill filter. Appended,
   nothing rewritten. Muted text sits on --mut (4.5:1), never --mut-2; every control keeps
   the phone block's 44px / 16px rules and these rules never undercut them. */
.pp2 .pp2-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:12px}
.pp2 .pp2-grid .dv{font-family:var(--sans);font-weight:600;font-size:14px}
.pp2 .pp2-grid .dv .mono{font-family:var(--mono)}
.pp2-sect{padding-top:8px;border-top:1px solid var(--line);font-size:13px}
.pp2-sect svg{width:15px;height:15px;vertical-align:-3px;color:var(--gold);margin-right:4px}
.pp2-chks{display:flex;flex-wrap:wrap;gap:6px 14px}
.pp2-chks .pp-chk{margin:0}
.pp2 .jb-f>span+.pp-chk{margin-top:2px}
.pp2-edit{margin-top:6px}
.pp2-num{font-family:var(--mono);font-size:16px}
.pp2-num.ok{color:#5fe08a}.pp2-num.warn{color:#ffab54}.pp2-num.bad{color:#ff8792}
.pp2-score{display:flex;gap:18px;align-items:flex-start;padding:16px 18px;border-radius:14px;border:1px solid var(--line-2);background:var(--panel-2)}
.pp2-score.ok{border-color:rgba(62,207,122,.35)}.pp2-score.warn{border-color:rgba(255,140,32,.4)}.pp2-score.bad{border-color:rgba(255,77,94,.45)}
.pp2-scoren{flex:0 0 auto;text-align:center;min-width:84px}
.pp2-scorev{font-family:var(--mono);font-size:44px;font-weight:800;line-height:1;color:var(--gold-2)}
.pp2-score.bad .pp2-scorev{color:#ff8792}.pp2-score.warn .pp2-scorev{color:#ffab54}.pp2-score.ok .pp2-scorev{color:#5fe08a}
.pp2-scoreb{flex:1;min-width:0}
.pp2-lines{list-style:none;margin:10px 0;padding:0;font-size:13px}
.pp2-lines li{padding:4px 0;border-bottom:1px solid var(--line)}
.pp2-lines li .mono{display:inline-block;min-width:34px;font-weight:700}
.pp2-lines li.bad .mono{color:#ff8792}.pp2-lines li.ok .mono{color:#5fe08a}
.pp2-safefoot{margin-top:12px;padding:11px 13px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);font-size:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pp2-safefoot svg{width:15px;height:15px;color:var(--gold)}
.pp2-cols{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:10px}
.pp2-qrgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-bottom:10px}
.pp2-qr{text-align:center;padding:8px;border-radius:10px;background:#fff;color:#111}
.pp2-qr.muted{background:var(--panel-2);color:var(--mut);display:flex;align-items:center;justify-content:center}
.pp2-qr .mono{color:#333}
.pp2-qrsvg svg{width:72px;height:72px;display:block;margin:0 auto 4px}
tr.pp2-retired td{opacity:.62}
.pp2-team .jb-actions{margin-top:0}
/* GL-028 — the board's skill filter */
.pp2-bfilter{margin-bottom:16px}
.pp2-bsel{max-width:420px;margin-bottom:12px}
.pp2-bres .pp-crew{margin-top:8px}
.pp2-bchip{margin-top:6px;display:inline-block;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink-2)}
.pp2-bchip.ok{color:#5fe08a;border-color:rgba(62,207,122,.35)}.pp2-bchip.part{color:#ffab54;border-color:rgba(255,140,32,.4)}.pp2-bchip.bad{color:#ff8792;border-color:rgba(255,77,94,.45)}
.bcell.pp2-dim{opacity:.38;filter:saturate(.4)}
/* the scan page: a ticket with a picture opens from its name */
.linkbtn.scan-photo{font-size:inherit;font-weight:inherit;padding:0;color:var(--gold-2);text-align:left;white-space:normal}
.linkbtn.scan-photo svg{width:14px;height:14px;vertical-align:-2px;margin-left:4px}
@media (max-width:900px){
  .pp2 input:not([type=checkbox]):not([type=file]),.pp2 select,.pp2 textarea{min-height:44px;font-size:16px}
  .pp2 input[type=file]{min-height:44px;font-size:16px}
  .pp2 .linkbtn,.pp2 .btn.sm,.pp2-safefoot .linkbtn{min-height:44px}
  .pp2-score{flex-direction:column;gap:10px}
  .pp2 .pp2-grid{grid-template-columns:1fr 1fr}
  .pp2-bsel{max-width:none}
  .pp2-qrgrid{grid-template-columns:repeat(3,1fr)}
  .linkbtn.scan-photo{min-height:44px;display:inline-flex;align-items:center;padding:0}
}

/* ===== GO-LIVE WAVE 2 — add forms + builders (2026-09-27): add asset / inventory line, template + inspection-set builders, SDS on the scan, the abatement checklist on the daily, meal/break + injured on verify ===== */
.f2-form{margin:0 0 16px;padding:16px 18px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line-2)}
.f2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px 16px}
.f2-grid .jb-f.wide{grid-column:1 / -1}
.f2-grid input[type=date]{color-scheme:dark}
.f2-grid input,.f2-grid select,.f2-grid textarea{min-width:0}
.f2-list .f2-card{align-items:flex-start}
.f2-qlist{margin:8px 0 0;padding-left:20px;font-size:13px;color:var(--ink-2);line-height:1.5}
.f2-qlist li{padding:3px 0;border-bottom:1px solid var(--line)}
.f2-qlist li:last-child{border-bottom:none}
.f2-qrows{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.f2-qrow{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--bg-elev);border:1px solid var(--line)}
.f2-qn{flex:0 0 28px;height:28px;border-radius:999px;background:var(--panel-hd);color:var(--gold-2);font-family:var(--mono);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:6px}
.f2-qb{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.f2-qb input,.f2-qb select{width:100%;background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink);border-radius:10px;padding:10px 12px;font:inherit;font-size:14px}
.f2-qb input:focus,.f2-qb select:focus{outline:none;border-color:rgba(243,164,0,.55)}
.f2-qmeta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.f2-qmeta .selwrap{flex:0 1 200px;min-width:160px}
.f2-qmeta input{flex:1 1 200px}
.f2-qmeta .btn.sm{flex:0 0 auto}
/* GL-086 — the steps */
.f2-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px}
.f2-step{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);cursor:pointer;min-height:44px}
.f2-step input{margin-top:4px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--gold);font-size:16px}
.f2-step.done{border-color:rgba(62,207,122,.4);background:rgba(62,207,122,.06)}
.f2-stepn{flex:0 0 24px;height:24px;border-radius:999px;background:var(--panel-hd);color:var(--gold-2);font-family:var(--mono);font-weight:800;font-size:11px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.f2-stept{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13.5px;color:var(--ink)}
.f2-stept small{color:var(--mut);font-size:12px;line-height:1.45}
.f2-stept em{color:#5fe08a;font-style:normal;font-size:11.5px;font-family:var(--mono)}
.f2-errslot:empty{display:none}
/* GL-036 — the two questions */
.f2-opts{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.f2-opt{display:flex;gap:10px;align-items:center;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);cursor:pointer;font-size:14px;color:var(--ink-2);min-height:44px}
.f2-opt input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--gold);font-size:16px}
.f2-opt.on{border-color:rgba(243,164,0,.5);background:rgba(243,164,0,.07);color:var(--ink)}
.f2-eod textarea{width:100%;background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink);border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;resize:vertical}
/* GL-006 — the sheets on a machine */
.f2-sdswrap{margin-bottom:18px}
.f2-sdslist{display:flex;flex-direction:column;gap:8px;margin:8px 0 12px}
.f2-sds{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2)}
.f2-sdst{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px}
.f2-sdst svg{width:15px;height:15px;color:var(--gold)}
.f2-sdsm{font-size:12px;color:var(--mut);margin-top:4px;line-height:1.5}
.f2-sdsa{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.f2-sdsa .btn{display:inline-flex;align-items:center;gap:6px}
.f2-sdsbody{margin:10px 0 0;padding:12px 14px;border-radius:10px;background:#fff;color:#111;font-size:12.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;max-height:360px;overflow:auto}
.f2-sdsbody img{max-width:100%;height:auto;display:block;border-radius:8px}
.f2-sdsform{padding:12px 14px;border-radius:12px;border:1px dashed var(--line-2)}
.f2-sdsform input[type=file]{width:100%;font-size:13px;color:var(--ink-2)}
.scanpage .f2-sdswrap .f2-sds{background:rgba(255,255,255,.03)}
@media (max-width:900px){
  .f2 input:not([type=checkbox]):not([type=radio]):not([type=file]),.f2 select,.f2 textarea,.f2-sdswrap input:not([type=checkbox]):not([type=file]),.f2-sdswrap select{min-height:44px;font-size:16px}
  .f2 input[type=file],.f2-sdswrap input[type=file]{min-height:44px;font-size:16px}
  .f2 .btn,.f2 .btn.sm,.f2-sdswrap .btn,.f2-sdswrap .btn.sm{min-height:44px}
  .f2-grid,.f2-steps{grid-template-columns:1fr}
  .f2-qrow{flex-direction:column;gap:8px}
  .f2-qmeta .selwrap,.f2-qmeta input{flex:1 1 100%;min-width:0}
}

/* ===================================================================================
   GO-LIVE WAVE 3 — schedule and dashboard (2026-09-27), app-board.js. One appended block:
   the stat tiles, the roll call, the schedule warnings (red cells), equipment on the
   board and the Gantt, the maintenance engine's inspection form, the equipment map.
   =================================================================================== */
.b3-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:0 0 22px}
.b3-tile{position:relative;background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:14px;padding:16px 18px;overflow:hidden;min-width:0}
.b3-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.b3-tile.owner::before{background:var(--good)}
/* label, figure and sub are inline runs; the line breaks are generated (::before "\A"), so the
   tile's text is one line — a text reader gets "Contracts in progress … $…" on one line */
.b3-tile .b3-tl{display:inline;color:var(--mut);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:800;line-height:1.3}
.b3-tile .b3-tl .tag{text-transform:none;letter-spacing:0;vertical-align:middle}
.b3-tile .b3-tv{display:inline;font-size:26px;font-weight:800;font-family:var(--head);line-height:1.7;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.b3-tile .b3-ts{display:inline;color:var(--mut);font-size:12px;line-height:1.9}
.b3-tile .b3-tv::before,.b3-tile .b3-ts::before{content:"\A";white-space:pre}
.b3-roll .b3-count{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;margin:2px 0 12px}
.b3-big{font-size:24px;font-weight:800;font-family:var(--head);color:var(--ink);white-space:nowrap}
.b3-big.bad{color:var(--bad)}
.b3-ns{color:#ff8792;font-weight:700}
.b3-rc-crew{border-top:1px solid var(--line);padding:10px 0}
.b3-rc-crew:last-of-type{padding-bottom:0}
.b3-rc-men{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.b3-man{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--panel-2);font-size:12.5px;color:var(--ink-2);line-height:1.2}
.b3-man svg{width:13px;height:13px;flex:none}
.b3-man small{color:var(--mut);font-size:11px}
.b3-man.in{border-color:rgba(62,207,122,.4)} .b3-man.in svg{color:#5fe08a}
.b3-man.noshow{border-color:rgba(255,77,94,.55);color:#ff8792;background:rgba(255,77,94,.08)} .b3-man.noshow svg,.b3-man.noshow small{color:#ff8792}
.b3-man.notstarted{opacity:.75}
.b3-man.late,.b3-man.sick,.b3-man.excused{border-color:rgba(255,176,32,.45);color:#ffc86a} .b3-man.late small,.b3-man.sick small,.b3-man.excused small{color:#ffc86a}
.b3-marks{display:flex;flex-wrap:wrap;gap:6px}
.b3-marks .btn.on{border-color:var(--gold);color:var(--gold)}
.b3-warn{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,77,94,.45);background:rgba(255,77,94,.08);color:var(--ink);font-size:13px;line-height:1.45;margin-bottom:8px}
.b3-warn svg{width:16px;height:16px;flex:none;color:var(--bad);margin-top:2px}
.b3-warn.asset{border-color:rgba(255,176,32,.45);background:rgba(255,176,32,.08)} .b3-warn.asset svg{color:var(--warn)}
tr.b3-red td{background:rgba(255,77,94,.09)}
.bcell.b3-red{border-color:rgba(255,77,94,.75) !important;background:rgba(255,77,94,.11) !important}
.bc-eq{font-size:10.5px;color:var(--ink-2);margin-top:5px;display:flex;align-items:flex-start;gap:5px;line-height:1.3}
.bc-eq svg{width:12px;height:12px;flex:none;margin-top:1px} .bc-eq.set{color:var(--gold)}
.bc-warn{display:inline-block;margin-top:5px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#ff8792}
.gl-eq{font-size:11px;color:var(--ink-2);margin-top:3px;white-space:normal;line-height:1.3;display:flex;gap:5px;align-items:flex-start}
.gl-eq svg{width:12px;height:12px;flex:none;margin-top:1px}
.b3-form{margin:14px 0 0;padding:16px 18px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line-2)}
.b3-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin-top:12px}
.b3-lines{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.b3-line{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.b3-line .b3-lt{font-size:13.5px;color:var(--ink-2);line-height:1.4}
.b3-ans{display:flex;gap:6px;flex-wrap:wrap}
.b3-ans label{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 13px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel-2);cursor:pointer;font-weight:800;font-size:13px;color:var(--ink)}
.b3-ans input{accent-color:var(--gold);width:16px;height:16px;font-size:16px;margin:0}
.b3-ans label:has(input:checked){border-color:rgba(243,164,0,.6);background:rgba(243,164,0,.08);color:var(--gold-2)}
.b3-ans label.no:has(input:checked){border-color:rgba(255,77,94,.6);background:rgba(255,77,94,.1);color:#ff8792}
.b3-ans label.na:has(input:checked){border-color:var(--line-2);background:var(--panel-hd);color:var(--mut)}
/* the equipment map: one frame, the legend beside it; the pins by kind */
.b3-map .mp-body{grid-template-columns:minmax(260px,.62fr) minmax(0,1fr)}
.b3-where{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto;padding-right:4px}
.b3-where .mp-chip{justify-content:flex-start;text-align:left;width:100%}
.b3-where .mp-chip small{margin-left:auto;color:var(--mut);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.mp-pin.b3-pin.k-tool circle:not(.mp-hit),.mp-chip.k-tool .mp-dot{fill:#3ecf7a;background:#3ecf7a}
.mp-pin.b3-pin.k-rental circle:not(.mp-hit),.mp-chip.k-rental .mp-dot{fill:#c08bff;background:#c08bff}
.mp-pin.b3-pin.k-heavy circle:not(.mp-hit),.mp-chip.k-heavy .mp-dot{fill:#F3A400;background:#F3A400}
.mp-pin.b3-pin.k-vehicle circle:not(.mp-hit),.mp-chip.k-vehicle .mp-dot{fill:#4aa8e6;background:#4aa8e6}
.b3-map.off-rental .b3-pin.k-rental,.b3-map.off-heavy .b3-pin.k-heavy,.b3-map.off-vehicle .b3-pin.k-vehicle,.b3-map.off-tool .b3-pin.k-tool{display:none}
.b3-pop{position:absolute;z-index:5;min-width:200px;max-width:min(280px,calc(100% - 8px));background:#141419;border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;box-shadow:0 12px 30px rgba(0,0,0,.5);color:var(--ink);font-size:13px}
.b3-pop[hidden]{display:none}
.b3-pop-t{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px}
.b3-pop-t .x{appearance:none;border:0;background:transparent;color:var(--mut);cursor:pointer;font-size:14px;min-width:44px;min-height:44px;margin:-10px -12px -10px 0}
.b3-pop-r{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:12.5px}
.b3-pop-r span{color:var(--mut)} .b3-pop-r b{text-align:right;overflow-wrap:anywhere}
@media(max-width:1160px){.b3-map .mp-body{grid-template-columns:1fr}}
@media(max-width:700px){
  .b3-line{grid-template-columns:1fr}
  .b3-roll .b3-count{gap:6px 16px}
  .b3-big{font-size:21px}
  .b3-where{max-height:240px}
}

/* ===== go-live wave 4 (2026-09-27): the JHA and the daily — app-jha.js =====
   Evacuation plan, weather + heat index and auditors on the JHA (lead's Start Day, owner's
   Safety); voice into the crew's End of Day; the language switch (top bar + login) and the
   per-form globe. Phone rules as always: 44px controls, 16px fields, nothing sideways; the
   Arabic pass flips the document to dir=rtl and the grid follows. */
.jh-m0{margin:0}
.jh-mt12{margin-top:12px}
.jh-note{font-size:12px;margin-top:10px}
.jh-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.jh-f{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);min-width:0}
.jh-f.wide{grid-column:1/-1}
.jh-l{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:4px}
.jh-v{font-size:14.5px;color:var(--ink);overflow-wrap:anywhere;line-height:1.45}
.jh-tel{font-size:16px;font-weight:700;color:var(--gold);margin-top:2px}
.jh-wxrow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px}
.jh-wxcard{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);min-width:0}
.jh-big{font-size:28px;font-weight:800;font-family:var(--head);line-height:1.1;margin:2px 0 4px}
.jh-sub{font-size:12.5px;color:var(--ink-2);line-height:1.4;overflow-wrap:anywhere}
.jh-heat{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border-radius:12px;border:1px solid rgba(243,164,0,.35);background:rgba(243,164,0,.07);font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.jh-heat svg{width:18px;height:18px;flex:0 0 auto;color:var(--gold)}
.jh-wxreads{margin-top:6px}
.jh-wxq{padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin-top:10px;background:var(--panel-2)}
.jh-wxline{font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.jh-q{font-size:13.5px;color:var(--ink-2);margin-top:6px}
.jh-opts{flex-direction:row;flex-wrap:wrap}
.jh-opts .f2-opt{flex:1 1 200px;min-width:0}
.jh-audform{display:grid;grid-template-columns:1.4fr 1fr 170px auto;gap:12px;align-items:end;margin-top:12px}
.jh-audform .fld{margin:0;min-width:0}
.jh-audform .pinbox{width:100%;font-size:22px}
.jh-audrow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.jh-audrow .jha-name{font-size:22px}
.jh-crewblock{margin-top:14px;padding-top:6px;border-top:1px dashed var(--line-2)}
.jh-crewhead{font-size:14px;margin:8px 0 4px;color:var(--ink-2);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.jh-crewhead svg{width:16px;height:16px;color:var(--gold)}
.jh-crewblock .panel{margin-top:12px}
.jh-voiceform textarea{font-size:16px;min-height:104px;width:100%}
.jh-mic{min-height:44px}
.jh-mic.rec{border-color:#ff5c5c;color:#ffb3b3}
.jh-nothing{display:flex;gap:6px;align-items:flex-start}
.jh-nothing svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px}
.langwrap{display:inline-flex;align-items:center;gap:6px;margin-right:10px}
.langico{display:inline-flex;align-items:center;line-height:1;color:var(--gold)}
.jh-globe{width:20px;height:20px}
.langsel{min-height:44px;font-size:16px;padding:8px 10px;border-radius:10px;background:var(--bg-elev);color:var(--ink);border:1px solid var(--line);max-width:150px}
.login-lang{display:flex;justify-content:center;margin:0 0 14px}
.side-lang{display:none}
html[dir=rtl] .side-lang{padding-left:0;margin-left:0;padding-right:6px;margin-right:2px;border-left:none;border-right:1px solid var(--line)}
.jh-formlang{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.jh-formlang-l{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);flex-wrap:wrap}
.jh-formlang .selwrap select{min-height:44px;font-size:16px}
/* right-to-left: the layout mirrors with the document; only the hand-set offsets need a word */
html[dir=rtl] .langwrap{margin-right:0;margin-left:10px}
html[dir=rtl] .userbox>div:first-child{text-align:left}
html[dir=rtl] .jh-crewblock,html[dir=rtl] .jh-f,html[dir=rtl] .jh-wxcard,html[dir=rtl] .jh-wxq{text-align:right}
html[dir=rtl] .mono,html[dir=rtl] .jh-tel,html[dir=rtl] .pinbox{direction:ltr;unicode-bidi:isolate}
@media(max-width:720px){
  .jh-grid,.jh-wxrow,.jh-audform{grid-template-columns:1fr}
  .jh-audform .btn{width:100%;justify-content:center}
  /* the phone: the top bar has no room for one more control (the bookkeeper's badge alone fills it), so the
     top-bar select hides and the bottom tab bar carries a 44px globe at its end; the native picker still lists the four names */
  .topbar .langwrap{display:none}
  .side-lang{display:flex;align-items:center;flex:0 0 auto;padding-left:6px;margin-left:2px;border-left:1px solid var(--line)}
  .side-lang .langwrap{position:relative;margin:0;gap:0}
  .side-lang .langico{position:absolute;left:0;top:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;pointer-events:none;color:var(--mut)}
  .side-lang .jh-globe{width:22px;height:22px}
  .side-lang .langsel{width:44px;min-width:44px;height:44px;padding:0;color:transparent;background:none;border:none;-webkit-appearance:none;appearance:none;text-indent:-999px;overflow:hidden}
  .side-lang .langsel option{color:var(--ink);text-indent:0}
  .topbar .userbox,.topbar .userbox .btn{min-width:0}
  .jh-opts .f2-opt{flex:1 1 100%}
}

/* ==========================================================================
   ADMIN AND SEATS (2026-09-27, go-live wave 5) — the screens in app-admin.js.
   Appended, not rewritten: the project manager's card and badge, the Reporting
   Center, Admin, Company, Messages, Ideas, Day links, the no-login day page, the
   roster, the project manager's pages and the three-dots customise menu on every
   list. Black and gold, dark surfaces, 44px controls and 16px fields on the phone.
   ========================================================================== */
.role-cards{grid-template-columns:repeat(3,1fr)}          /* six cards now (the project manager) — two rows of three */
@media(max-width:1100px){.role-cards{grid-template-columns:repeat(2,1fr)}}
.rolebadge.manager{background:rgba(127,209,199,.16);color:#7fd1c7}
.w5-demo{color:var(--gold-2)}
/* ---- fields inside a .fld label (the label is uppercase; the field is not) ---- */
.adm-form .fld input,.adm-form .fld textarea,.adm-form .fld select,.dl-date select{background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;color:var(--ink);
  padding:11px 13px;font:inherit;font-size:14px;text-transform:none;letter-spacing:0;font-weight:500;width:100%;min-width:0}
.adm-form .fld input:focus,.adm-form .fld textarea:focus{outline:none;border-color:rgba(243,164,0,.5);box-shadow:0 0 0 3px rgba(243,164,0,.1)}
.adm-form .fld textarea{resize:vertical;min-height:44px}
/* ---- the Reporting Center ---- */
.rpt-note{margin-top:0;margin-bottom:18px}
.rpt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1100px){.rpt-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.rpt-grid{grid-template-columns:1fr}}
.rpt-card{margin-bottom:0;display:flex;flex-direction:column;gap:8px}
.rpt-card.on{border-color:rgba(243,164,0,.5)}
.rpt-top{display:flex;gap:8px;flex-wrap:wrap}
.rpt-costed{color:var(--gold-2)} .rpt-costed svg{width:12px;height:12px;vertical-align:-2px}
.rpt-what{color:var(--mut);font-size:13px;line-height:1.5;flex:1}
.rpt-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.rpt-btns{display:flex;gap:8px;flex-wrap:wrap}
.rpt-open{margin-bottom:20px}
/* ---- Admin ---- */
.adm-nosend{margin-top:0;margin-bottom:16px}
.adm-tabs{margin-bottom:16px}
.adm-steps{display:flex;flex-direction:column;gap:8px}
.adm-step{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.adm-step > div{flex:1;min-width:0}
.adm-n{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--panel-hd);color:var(--gold);font-weight:800;flex:0 0 auto}
.adm-arrows{display:flex;gap:6px;flex-wrap:wrap}
.adm-arrow{min-width:44px;min-height:44px;padding:0 10px}
.adm-off{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.adm-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.adm-form{display:flex;flex-direction:column;gap:12px}
.adm-form .fld{margin-bottom:0}
.adm-adjust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:end}
.adm-adjust .adm-foot,.adm-adjust .err{grid-column:1 / -1}
.adm-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:8px}
.adm-field{min-height:44px;align-items:center;margin:0}
.adm-sets{margin-bottom:14px}
.adm-tpls{display:flex;flex-direction:column;gap:14px}
.adm-tpl{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--panel-2)}
.adm-tplhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.adm-subj{color:var(--gold-2);margin-bottom:6px}
.adm-body{white-space:pre-wrap;font:inherit;color:var(--ink-2);font-size:13px;line-height:1.55;margin:0 0 10px;background:none}
.adm-setval{width:100%;min-width:0;background:var(--bg-elev);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:9px 12px;font:inherit;font-size:14px}
/* ---- Company ---- */
.cmp-fields{display:flex;flex-direction:column;gap:2px}
.cmp-row{display:grid;grid-template-columns:170px 1fr;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}
.cmp-val{font-size:14px}
.cmp-kpis{grid-template-columns:repeat(2,1fr)}
@media(max-width:720px){.cmp-row{grid-template-columns:1fr;gap:4px}.cmp-kpis{grid-template-columns:1fr}}
/* ---- Messages ---- */
.msg-note{margin-top:0;margin-bottom:16px}
.msg-grid{grid-template-columns:0.9fr 1.4fr;align-items:start}
.msg-list{order:1} .msg-open{order:2}   /* the open thread is first in the DOM (its Post control ahead of the thread list); the list still sits on the left */
@media(max-width:900px){.msg-grid{grid-template-columns:1fr}}
.msg-thread{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;color:var(--ink);font:inherit;cursor:pointer;min-height:44px}
.msg-thread:hover{border-color:var(--line-2)}
.msg-thread.on{border-color:rgba(243,164,0,.5);background:rgba(243,164,0,.06)}
.msg-av{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--panel-hd);color:var(--gold);font-weight:800;font-size:12px;flex:0 0 auto}
.msg-tt{flex:1;min-width:0;font-size:13.5px}
.msg-last{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-n{background:var(--panel-hd);color:var(--mut);border-radius:999px;padding:2px 9px;font-size:11.5px;flex:0 0 auto}
.msg-flow{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow:auto;padding-right:4px}
.msg{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;max-width:85%;align-self:flex-start}
.msg.mine{align-self:flex-end;background:rgba(243,164,0,.08);border-color:rgba(243,164,0,.28)}
.msg-from{font-size:12px;color:var(--mut);margin-bottom:4px}
.msg-text{font-size:14px;line-height:1.5;white-space:pre-wrap}
.msg-compose{display:flex;gap:10px;margin-top:14px;align-items:stretch}
.msg-compose textarea{flex:1;min-height:44px;background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;color:var(--ink);padding:11px 13px;font:inherit;font-size:14px;resize:vertical}
@media(max-width:720px){.msg-compose{flex-direction:column}}
/* ---- Ideas + what's new ---- */
.idea-list{display:flex;flex-direction:column;gap:10px}
.idea{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel-2)}
.idea-head{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.idea-text{font-size:14px;line-height:1.5;white-space:pre-wrap}
.wn-list{display:flex;flex-direction:column;gap:12px}
.wn{border-left:3px solid var(--gold);padding:4px 0 4px 14px}
.wn-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.wn-date{color:var(--gold-2)}
.wn-what{color:var(--ink-2);font-size:13px;line-height:1.55}
/* ---- Day links + the no-login day page ---- */
.dl-note{margin-top:0;margin-bottom:16px}
.dl-date{margin:0;min-width:220px}
.dl-link{width:100%;min-width:240px;font-size:12.5px;background:var(--bg-elev);border:1px solid var(--line);border-radius:10px;color:var(--ink-2);padding:9px 12px}
.dl-copy{white-space:nowrap}
.day-page .scan-row .sr-sub{color:var(--mut);font-size:12.5px}
/* ---- the project manager's pages ---- */
.pm-today{padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.pm-today:last-child{border-bottom:none}
.pm-today-col{background:rgba(243,164,0,.06)}
.pm-sched td{min-width:120px;vertical-align:top}
.pm-warns{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.pm-warn{padding:8px 12px;border:1px solid rgba(255,140,32,.35);border-radius:10px;background:rgba(255,140,32,.08);font-size:13px}
/* ---- the three-dots customise menu on every list (GL-094) ---- */
.tt-dots{width:44px;height:44px;margin-left:auto;flex:0 0 auto}
.tt-dots svg{width:20px;height:20px}
.tt-menu{position:fixed;z-index:60;width:min(360px,calc(100vw - 32px));max-height:min(80vh,640px);overflow:auto;background:linear-gradient(180deg,#17171c,#111114);
  border:1px solid var(--line-2);border-radius:14px;padding:14px;box-shadow:var(--sh);color:var(--ink);text-align:left;font-weight:500;letter-spacing:0;text-transform:none}
.tt-menu.hide{display:none}
.tt-menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px}
.tt-close{min-width:44px;min-height:44px;padding:0 10px}
.tt-cols{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.tt-col{display:flex;align-items:center;gap:8px}
.tt-chk{flex:1;padding:6px 10px;min-height:44px;align-items:center;margin:0;font-size:13px}
.tt-move{display:flex;gap:4px;flex:0 0 auto}
.tt-arrow{min-width:44px;min-height:44px;padding:0 8px}
.tt-dens{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.tt-dens .btn.on{border-color:rgba(243,164,0,.6);color:var(--gold)}
.tt-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap;font-size:12px}
th.tt-hide,td.tt-hide{display:none !important}
table.tt-dense th,table.tt-dense td{padding-top:5px;padding-bottom:5px}

/* ===================== gl-notbuilt6 (2026-10-04): the six "Not built" rows =====================
   The warehouse loop + min / max on Inventory / Materials, the safety dashboard on Safety, the daily's
   Incident block on Start Day, the document folders in the job modal, and the owner's HQ page. Black and
   gold like everything above; every control 44px and every field 16px on the phone (the block at the end). */
.nb-lvl{width:84px;background:var(--bg-elev);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:8px 10px;font-family:var(--mono);font-size:13.5px;text-align:right}
.nb-lvl:focus{outline:none;border-color:rgba(243,164,0,.5);box-shadow:0 0 0 3px rgba(243,164,0,.1)}
.nb-reorder{font-size:11.5px;margin-left:6px;white-space:nowrap}
.nb-kpis{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.nb-kpi{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel-2);font-size:12.5px;color:var(--ink-2)}
.nb-kpi b{font-family:var(--mono);color:var(--gold-2)}
.nb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.nb-card{border:1px solid var(--line);border-radius:14px;background:var(--panel-2);padding:14px 14px 12px;display:flex;flex-direction:column;gap:10px}
.nb-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.nb-card-head .nb-id{font-family:var(--mono);font-weight:800;color:var(--gold-2);font-size:14px}
.nb-card-head .nb-kind{font-size:12px;color:var(--mut);margin-top:2px}
.nb-card-body{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start}
.nb-card .nb-meta{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.nb-card .nb-meta b{color:var(--ink)}
.nb-qr{width:84px;display:flex;flex-direction:column;align-items:center;gap:4px}
.nb-qr svg.qr{width:84px;height:84px;border-radius:8px;background:#fff;padding:3px;display:block}
.nb-qr .nb-qr-txt{font-family:var(--mono);font-size:10px;color:var(--mut);text-align:center;word-break:break-all}
.nb-lines{width:100%;border-collapse:collapse;font-size:12.5px}
.nb-lines th{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
.nb-lines td{padding:6px 6px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
.nb-lines td.num,.nb-lines th.num{text-align:right;font-family:var(--mono)}
.nb-lines input{width:70px;text-align:right}
.nb-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:2px}
.nb-form{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.nb-form .nb-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nb-form textarea,.nb-form select,.nb-form input:not([type=checkbox]){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;width:100%}
.nb-form textarea{min-height:64px;resize:vertical}
.nb-form textarea:focus,.nb-form select:focus,.nb-form input:focus{outline:none;border-color:rgba(243,164,0,.5);box-shadow:0 0 0 3px rgba(243,164,0,.1)}
.nb-chk{display:flex !important;flex-direction:row !important;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);cursor:pointer;text-transform:none !important;letter-spacing:normal !important;font-size:13.5px !important;color:var(--ink-2);font-weight:600 !important;min-height:44px}
.nb-chk input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--gold);font-size:16px;margin:0}
.nb-chk.on{border-color:rgba(243,164,0,.55);color:var(--gold)}
.nb-err{color:#ff8792;font-size:12.5px;margin-top:8px;min-height:0}
.nb-saved{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.nb-saved .nb-inc{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);font-size:12.5px;color:var(--ink-2);line-height:1.45}
.nb-saved .nb-inc b{color:var(--ink)}
/* the safety dashboard */
.nb-safety .nb-ctl{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.nb-safety .nb-ctl .selwrap{min-width:220px}
.nb-chart{width:100%;height:auto;display:block;overflow:visible}
.nb-chart .nb-bar{fill:var(--gold);opacity:.9}
.nb-chart .nb-bar.rep{fill:#ff8792}
.nb-chart .nb-grid{stroke:var(--line);stroke-width:1}
.nb-chart .nb-axis{stroke:var(--line-2);stroke-width:1.2}
.nb-chart text{fill:var(--mut);font-family:var(--mono);font-size:11px}
.nb-chart text.nb-val{fill:var(--ink);font-weight:700}
.nb-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:10px;font-size:12.5px;color:var(--ink-2)}
.nb-legend b{font-family:var(--mono);color:var(--gold-2)}
.nb-months{display:grid;grid-template-columns:repeat(12,1fr);gap:0;margin-top:6px;font-family:var(--mono);font-size:10.5px;color:var(--mut);text-align:center}
.nb-ind{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nb-ind h4{margin:0 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.nb-ind .nb-irow{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.nb-ind .nb-irow:last-child{border-bottom:none}
.nb-ind .nb-irow .nb-iv{font-family:var(--mono);font-weight:800;color:var(--ink);white-space:nowrap}
.nb-ind .nb-irow .nb-in{display:block;font-size:11.5px;color:var(--mut);margin-top:2px}
.nb-reg{display:flex;flex-direction:column;gap:8px}
.nb-reg .nb-inc .nb-when{font-family:var(--mono);color:var(--mut);white-space:nowrap}
.nb-rep{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;background:rgba(255,77,94,.14);color:#ff8792;border:1px solid rgba(255,77,94,.42)}
/* the document folders */
.nb-folders{margin-bottom:14px}
.nb-fold-head{margin-bottom:10px}
.nb-fold-head h4{margin:0 0 4px;font-size:13.5px}
.nb-ftable{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:10px}
.nb-ftable th{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
.nb-ftable td{padding:7px 6px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.nb-ftable td.num,.nb-ftable th.num{text-align:right;font-family:var(--mono)}
.nb-flag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.04em;border:1px solid var(--line-2);color:var(--mut);margin-right:4px}
.nb-flag.on{color:var(--gold-2);border-color:rgba(243,164,0,.45)}
.nb-folder{border:1px solid var(--line);border-radius:12px;background:var(--panel-2);margin-bottom:8px}
.nb-folder summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 12px;font-size:13px;color:var(--ink);font-weight:700;min-height:44px}
.nb-folder summary::-webkit-details-marker{display:none}
.nb-folder summary svg{width:16px;height:16px;color:var(--gold);flex:0 0 auto}
.nb-folder summary .nb-fsub{color:var(--mut);font-weight:500}
.nb-folder .nb-fbody{padding:0 12px 12px}
.nb-folder .nb-upload{position:relative;overflow:hidden;display:inline-flex;margin-top:8px}
.nb-folder .nb-upload input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.nb-lock{font-size:12.5px;color:var(--mut);display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border:1px dashed var(--line-2);border-radius:12px;margin-top:6px}
.nb-lock svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px}
/* HQ */
.nb-hq .nb-hq-sel{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.nb-hq .nb-hq-sel .selwrap{min-width:240px}
.nb-hq .kpi.sel::before{background:var(--gold)}
.nb-hq .nb-tot td{font-weight:800;color:var(--ink)}
@media(max-width:720px){
  .nb-card-body{grid-template-columns:1fr}
  .nb-qr{flex-direction:row;width:auto;align-items:center}
  .nb-form .nb-row,.nb-ind{grid-template-columns:1fr}
  .nb-lvl{width:92px;min-height:44px;font-size:16px}
  .nb-lines input{width:84px;min-height:44px;font-size:16px}
  .nb-chk input,.nb-dayinc input[type=checkbox],.nb-dayinc input[type=radio]{font-size:16px;width:22px;height:22px}
  .nb-form textarea{min-height:72px;font-size:16px}
  .nb-folder .nb-upload{min-height:44px}
  .nb-months{font-size:9.5px}
  .nb-safety .nb-ctl .selwrap,.nb-hq .nb-hq-sel .selwrap{min-width:0;width:100%}
  .nb-hq .kpis{grid-template-columns:1fr}            /* an eight-figure dollar value needs the full width of a 390px screen */
}