/* ═══════════════════════════════════════════════════════════════════════════
   CAFM CLOUD — Phase 1 styles. Same "electric" design language as the offline
   app (deep navy header, cyan/violet accents, slate canvas, raised panels).
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --forest:#0A1628;--mid:#123B63;--accent:#0EA5E9;--bright:#22D3EE;--accent2:#7C5CFC;
  --offwhite:#E9EFF8;--white:#fff;--border:#C9D6E7;--text:#16202E;--muted:#64748B;
  --danger:#C0392B;--warn:#E67E22;--amber:#F39C12;--green:#1E8449;
  /* --card: the popup-modal surface. 3 Sep 2026 — twelve modals in app.js were
     written as var(--card,#0f1a2e) with color:var(--text). --card had never been
     defined, so the FALLBACK dark navy won in BOTH themes while --text correctly
     flipped to near-black in light — dark text on a dark card, every field
     invisible. Defined here, and in the dark block below, it tracks --white. */
  --card:#fff;
  /* --warn-on-panel: amber that stays READABLE on the pale-blue panel used by
     the document slots (rgba(233,239,248,.4)). 4 Sep 2026 — that panel blends
     to a mid slate over the dark card, and #B7770D on it measured ~1.9:1, which
     is not a warning anybody reads. Same trap as the --card one above: the
     colour was picked while looking at light mode, where it is fine. Flipped in
     the dark block below. */
  --warn-on-panel:#B7770D;
  /* 🏗 PROJECT PROGRESS STATES (7 Sep 2026). Two palettes, on purpose.
     The BAR FILLS are drawn with solid hexes in app.js — a block of colour only
     needs 3:1 and reads the same in either theme. This set is for the STATE
     TEXT beside them, and it had to be split: measured against the real modal
     background, ONE palette could not pass 4.5:1 in both themes. The bar colours
     scored, as text — dark: on-track 3.27, slipped 3.50; light: complete 3.30,
     behind 3.19, not-started 2.56. Every one of the five fails in one theme or
     the other, which is the --warn-on-panel trap again, five times over.
     Measured, not guessed. Asserted in tools\projects-test.html. */
  --prj-done:#15803d;
  --prj-ontrack:#1d4ed8;
  /* ⚠ NOT --warn-on-panel's #B7770D. That amber was measured against the pale
     BLUE slot panel; on the white modal card it is 3.71:1. A colour is only
     "proven" against the background it was proven on. #B45309 measures 5.02. */
  --prj-behind:#B45309;
  --prj-slipped:#b91c1c;
  --prj-idle:#556579;
  --shadow:0 1px 3px rgba(10,22,40,.07),0 1px 2px rgba(10,22,40,.08);
  --shadow-md:0 4px 16px rgba(10,22,40,.11),0 1px 3px rgba(10,22,40,.08);
  --shadow-lg:0 14px 40px rgba(10,22,40,.18);
  --glow:0 0 0 3px rgba(14,165,233,.16);
  --radius:10px;--ease:cubic-bezier(.4,0,.2,1);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{
  background-color:#E7EEF8;
  background-image:
    radial-gradient(1200px 460px at 15% -12%,rgba(14,165,233,.12),transparent 62%),
    radial-gradient(1000px 420px at 88% -8%,rgba(124,92,252,.09),transparent 60%);
  background-attachment:fixed;min-height:100%;
}
body{font-family:var(--font);color:var(--text);font-size:13.5px;-webkit-font-smoothing:antialiased}
::selection{background:rgba(14,165,233,.25)}

/* ── Header ── */
header{
  background:linear-gradient(120deg,#0A1628 0%,#0F2745 40%,#123B63 70%,#0EA5E9 100%);
  color:#fff;padding:14px 26px;display:flex;align-items:center;gap:14px;
  box-shadow:0 4px 24px rgba(10,22,40,.3);
}
header .logo{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;
  box-shadow:inset 0 0 0 1.5px rgba(34,211,238,.4)}
header h1{font-size:16px;font-weight:800;letter-spacing:.01em}
header .sub{font-size:10px;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.1em}
header .cloud-chip{font-size:9px;font-weight:800;background:rgba(34,211,238,.18);color:var(--bright);
  border:1px solid rgba(34,211,238,.4);padding:2px 8px;border-radius:20px;letter-spacing:.08em}
header .spacer{flex:1}
header .who{font-size:11px;color:rgba(255,255,255,.8);text-align:right;line-height:1.5}

/* ── Layout ── */
main{max-width:1800px;margin:0 auto;padding:20px 22px 60px}
.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-md),0 0 0 1px rgba(18,59,99,.07);padding:18px;margin-bottom:16px}
.card h2{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:12px}
.hidden{display:none!important}

/* ── Auth screen ── */
.auth-wrap{max-width:430px;margin:6vh auto 0;text-align:center}
.auth-brand{margin-bottom:22px}
.auth-brand .mark{width:58px;height:58px;border-radius:16px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:20px;color:#fff;
  background:linear-gradient(135deg,#0EA5E9,#1F4D3B);box-shadow:0 10px 30px rgba(14,165,233,.35)}
.auth-brand .name{font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:-.02em}
.auth-brand .name span{color:var(--bright)}
.auth-brand .strap{font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.auth-wrap .card{padding:30px 28px;text-align:left;border-radius:16px;
  box-shadow:0 24px 70px rgba(10,25,50,.16),inset 0 1px 0 rgba(255,255,255,.6)}
html[data-theme="dark"] .auth-wrap .card{box-shadow:0 24px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05)}
.auth-title{font-size:20px;font-weight:800;color:var(--forest);margin-bottom:2px}
.auth-sub{font-size:12px;color:var(--muted);margin-bottom:18px}
.auth-feats{display:flex;justify-content:center;gap:18px;margin-top:20px;flex-wrap:wrap}
.auth-feats span{font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.04em}
.auth-foot{margin-top:26px;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);opacity:.8}

/* ── Forms ── */
label{display:block;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:10px 0 4px}
input,select,textarea{
  width:100%;padding:9px 11px;border:1.5px solid var(--border);border-radius:7px;
  font-family:var(--font);font-size:13px;background:var(--white);color:var(--text);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
input:hover,select:hover{border-color:#B8CCE8}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--glow)}
input::placeholder{color:#A5B4C8}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:6px;border:none;border-radius:7px;
  padding:9px 16px;font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),filter .16s var(--ease);
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:none;box-shadow:var(--glow),var(--shadow-md)}
.btn-primary{background-image:linear-gradient(135deg,var(--accent),#0B8CD6);color:#fff}
.btn-outline{background:var(--white);color:var(--text);box-shadow:inset 0 0 0 1.5px var(--border)}
.btn-danger{background:var(--danger);color:#fff}
.btn-sm{padding:5px 10px;font-size:11px}
.btn-block{width:100%;justify-content:center;margin-top:14px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}

/* ── Tabs ── */
/* Offline-style icon tab bar: white pill strip, icon buttons, active gradient */
nav.tabs{display:flex;gap:2px;background:var(--white);border-radius:12px;padding:5px;margin-bottom:18px;
  box-shadow:var(--shadow-md),0 0 0 1px rgba(18,59,99,.07);overflow-x:auto;scrollbar-width:thin}
nav.tabs button{flex:0 0 auto;display:flex;align-items:center;gap:6px;background:transparent;border:none;
  color:var(--muted);font-family:var(--font);font-size:11.5px;font-weight:700;padding:9px 13px;
  border-radius:8px;cursor:pointer;white-space:nowrap;
  transition:background .15s var(--ease),color .15s var(--ease),transform .12s var(--ease)}
nav.tabs button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
nav.tabs button:hover{background:rgba(14,165,233,.09);color:var(--mid);transform:translateY(-1px)}
nav.tabs button.active{background:linear-gradient(135deg,var(--accent),var(--bright));color:#fff;
  box-shadow:0 3px 12px rgba(14,165,233,.4)}

/* ── Tables ── */
.table-wrap{overflow-x:auto;border-radius:8px;box-shadow:0 0 0 1px var(--border)}
/* 📐 GRID — full-size text with a sticky header row so the column names stay
   visible as you scroll down. Frozen LEFT columns were tried and removed: the
   sticky offsets can't track auto-sized column widths, so they overlapped the
   Site column. Horizontal scroll is the lesser evil until the columns are
   given fixed widths. */
.grid-fit{overflow:auto;max-height:74vh;border-radius:8px;box-shadow:0 0 0 1px var(--border);position:relative}
.grid-fit table{border-collapse:separate;border-spacing:0;font-size:12.8px;width:100%}
.grid-fit thead th{position:sticky;top:0;z-index:6}
.grid-fit tbody td{border-bottom:1px solid var(--border);vertical-align:top}
table{width:100%;border-collapse:collapse;font-size:12.8px}
thead th{background-image:linear-gradient(180deg,#16457A,#123B63);color:#fff;text-align:left;
  padding:9px 12px;font-size:10.2px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
tbody td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
/* 📏 ROW DENSITY ON THE BIG GRIDS (4 Sep). Jamie, at 75% browser zoom: "you
   cant really see many on the page, we need to be able to see more, its a bit
   zoomed in". Three reactive jobs fitted on a screen.
   The cause was accumulation, not one rule: every cell that gained a second
   line this week (acceptance state + who + when, the ETA input plus a Chase
   button, the priority sentence, attend-by AND complete-by) was individually
   reasonable, and together they roughly tripled the row height. The generous
   spacing below was added when those cells held one badge each.
   Tightened here rather than in the JS so it applies to every such cell at
   once, and so a future cell inherits the density instead of re-discovering it.
   A grid you must scroll to compare two rows has stopped being a grid. */
#jobs-tbody td,#quotes-tbody td,#works-tbody td,#ppm-tbody td{padding:5px 9px}
#jobs-tbody td>div,#quotes-tbody td>div,#works-tbody td>div,#ppm-tbody td>div{line-height:1.32}
#jobs-tbody input[type="datetime-local"],#quotes-tbody input[type="datetime-local"],#works-tbody input[type="datetime-local"],#ppm-tbody input[type="datetime-local"]{margin-top:2px;padding:2px 5px;font-size:10.5px}
#jobs-tbody .badge,#quotes-tbody .badge,#works-tbody .badge,#ppm-tbody .badge{margin-bottom:0}
#jobs-tbody .btn-sm,#quotes-tbody .btn-sm,#works-tbody .btn-sm,#ppm-tbody .btn-sm{padding:1px 6px;line-height:1.35}
/* The description carries a client ref and chips under it; keep it readable but
   stop one long site name forcing the whole row taller than everything else. */
#jobs-tbody td:nth-child(2),#works-tbody td:nth-child(3){max-width:230px}
#jobs-tbody td:nth-child(4),#quotes-tbody td:nth-child(4){max-width:170px}
/* Detail cards lay key/value pairs out on an auto-fit grid. Grid items default to
   min-width:auto, so a long URL or email refuses to shrink and bursts out over the
   next column. Let every cell shrink, and break long unbroken strings. */
#detail-body>div[style*="grid-template-columns"]>div{min-width:0}
#detail-body>div[style*="grid-template-columns"]>div strong{overflow-wrap:anywhere;word-break:break-word}
/* Task-card tab strip — Details / Event Notes / Uplifts / Actions / Documents */
.rec-tabs{display:flex;gap:2px;flex-wrap:wrap;padding:0 20px;border-bottom:1px solid var(--border);background:var(--panel,transparent)}
.rec-tabs button{background:none;border:none;border-bottom:2.5px solid transparent;padding:9px 13px;font:600 12px var(--font);color:var(--muted);cursor:pointer;white-space:nowrap;transition:color .13s var(--ease),border-color .13s var(--ease)}
.rec-tabs button:hover{color:var(--text)}
.rec-tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
.rec-tabs .pill{background:#C0392B;color:#fff;border-radius:8px;padding:0 5px;margin-left:4px;font-size:9.5px;font-weight:800}
.rec-tabs .pill.blue{background:var(--accent)}
tbody tr{transition:background .13s var(--ease),box-shadow .13s var(--ease)}
tbody tr:hover{background:#EAF4FE;box-shadow:inset 3px 0 0 var(--accent)}
tbody tr:nth-child(even){background:rgba(233,239,248,.5)}
tbody tr:nth-child(even):hover{background:#EAF4FE}

/* ── MAC grid: self-contained scroll box with frozen header row(s) + frozen
   discipline column, so the trade stays visible across to Nights/Sundays and the
   horizontal scrollbar is always reachable no matter how far down the list. ── */
.mac-scroll{overflow:auto;max-height:70vh;border-radius:8px;box-shadow:0 0 0 1px var(--border);position:relative}
.mac-scroll table{border-collapse:separate;border-spacing:0}
.mac-scroll thead th{position:sticky;top:0;z-index:6}
.mac-scroll thead tr:nth-child(2) th{top:var(--mac-h1,30px)}
.mac-scroll tbody td{border-bottom:1px solid var(--border)}
.mac-scroll .mfz1,.mac-scroll .mfz2{position:sticky;z-index:3}
.mac-scroll .mfz1{left:0;width:42px;min-width:42px;max-width:42px;text-align:center}
.mac-scroll .mfz2{left:42px;min-width:150px;box-shadow:2px 0 0 var(--border)}
.mac-scroll tbody .mfz1,.mac-scroll tbody .mfz2{background:var(--white)}
.mac-scroll thead .mfz1,.mac-scroll thead .mfz2{z-index:7}

/* ── Internal P&L: overheads register scroll box — frozen header row + frozen
   Person / Cost-item columns; the current month is highlighted down its column,
   and the current-month row is highlighted in the monthly P&L table. ── */
.pnl-scroll{overflow:auto;max-height:60vh;border-radius:8px;box-shadow:0 0 0 1px var(--border);position:relative;margin-bottom:2px}
.pnl-scroll table{border-collapse:separate;border-spacing:0;font-size:11px}
.pnl-scroll thead th{position:sticky;top:0;z-index:6}
.pnl-scroll tbody td{border-bottom:1px solid var(--border);background:var(--white)}
.pnl-scroll .pfz1,.pnl-scroll .pfz2{position:sticky;z-index:3}
.pnl-scroll .pfz1{left:0;min-width:92px;max-width:92px}
.pnl-scroll .pfz2{left:92px;min-width:126px;box-shadow:2px 0 0 var(--border)}
.pnl-scroll tbody .pfz1,.pnl-scroll tbody .pfz2{background:var(--white)}
.pnl-scroll thead .pfz1,.pnl-scroll thead .pfz2{z-index:7}
.pnl-scroll thead th.pnl-cur{background-image:linear-gradient(180deg,#B7770D,#96610A)}
/* theme-safe current-month highlight: translucent amber tint OVER the theme
   background (light or dark), so text colours are never washed out */
.pnl-scroll tbody td.pnl-cur{box-shadow:inset 0 0 0 999px rgba(245,183,8,.16)}
.pnl-cur-row td{box-shadow:inset 0 0 0 999px rgba(245,183,8,.16)}

/* ── Quote Requests grid: self-contained scroll box (vertical + horizontal)
   with a frozen header row and frozen Ref / Description / Client / Site /
   Discipline / Supplier columns, so the identifying info stays put while you
   scroll right and the wheel scrolls the list, not the page. ── */
.qr-scroll{overflow:auto;max-height:68vh;border-radius:8px;box-shadow:0 0 0 1px var(--border);position:relative}
.qr-scroll table{border-collapse:separate;border-spacing:0}
.qr-scroll thead th{position:sticky;top:0;z-index:6}
.qr-scroll tbody td{border-bottom:1px solid var(--border)}
.qr-scroll .qfz1,.qr-scroll .qfz2,.qr-scroll .qfz3,.qr-scroll .qfz4,.qr-scroll .qfz5,.qr-scroll .qfz6{position:sticky;z-index:3}
.qr-scroll .qfz1{left:0;min-width:124px;max-width:124px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 16 Oct: same as jfz1 (OCFM-QR-xxx) */
.qr-scroll .qfz2{left:124px;min-width:150px;max-width:150px}
.qr-scroll .qfz3{left:274px;min-width:78px;max-width:78px}
.qr-scroll .qfz4{left:352px;min-width:108px;max-width:108px}
.qr-scroll .qfz5{left:460px;min-width:94px;max-width:94px}
.qr-scroll .qfz6{left:554px;min-width:118px;max-width:118px;box-shadow:2px 0 0 var(--border)}
.qr-scroll tbody .qfz1,.qr-scroll tbody .qfz2,.qr-scroll tbody .qfz3,.qr-scroll tbody .qfz4,.qr-scroll tbody .qfz5,.qr-scroll tbody .qfz6{background:var(--white)}
.qr-scroll thead .qfz1,.qr-scroll thead .qfz2,.qr-scroll thead .qfz3,.qr-scroll thead .qfz4,.qr-scroll thead .qfz5,.qr-scroll thead .qfz6{z-index:7}

/* ── Badges & chips ── */
.badge{display:inline-block;font-size:9.5px;font-weight:800;padding:2px 9px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.04em;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.badge.ok{background:#EAF7EF;color:var(--green)}
.badge.pending{background:#FEF5E7;color:#B7770D}
.badge.bad{background:#FDEDEC;color:var(--danger)}
.badge.info{background:#EAF4FE;color:#2471A3}
.disc-tag{display:inline-block;font-size:10px;font-weight:700;background:#EAF4FE;color:#2471A3;
  border:1px solid #BBD9F2;border-radius:5px;padding:1px 7px;margin:1px}
.role-chip{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  background:rgba(124,92,252,.12);color:var(--accent2);border-radius:20px;padding:2px 8px}

/* ── Toast ── */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--forest);color:#fff;padding:11px 20px;border-radius:10px;font-size:12.5px;font-weight:600;
  box-shadow:var(--shadow-lg);opacity:0;transition:all .3s var(--ease);z-index:99;pointer-events:none}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(10,22,40,.5);backdrop-filter:blur(3px);
  display:none;align-items:flex-start;justify-content:center;padding:5vh 16px;z-index:50;overflow-y:auto}
.modal-overlay.open{display:flex}
.modal{background:var(--white);border-radius:14px;width:100%;max-width:760px;box-shadow:var(--shadow-lg);
  animation:mIn .26s cubic-bezier(.34,1.3,.5,1)}
@keyframes mIn{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modal-head h3{font-size:15px;font-weight:800;color:var(--forest)}
.modal-body{padding:18px 20px}
.modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px}
.x{background:none;border:none;font-size:16px;cursor:pointer;color:var(--muted);transition:transform .15s var(--ease)}
.x:hover{transform:rotate(90deg)}

/* 🗂 Tabs inside a modal — used by the PPM task card (This visit / Task details
   / Event notes). Underline-style so they read as sections of one record, not
   as separate screens. */
.pc-tab{background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;
  padding:8px 12px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;
  white-space:nowrap;transition:color .15s var(--ease),border-color .15s var(--ease)}
.pc-tab:hover{color:var(--forest)}
.pc-tab.on{color:var(--forest);border-bottom-color:var(--forest)}
html[data-theme="dark"] .pc-tab:hover,html[data-theme="dark"] .pc-tab.on{color:var(--text)}
html[data-theme="dark"] .pc-tab.on{border-bottom-color:var(--text)}

.note{font-size:11px;color:var(--muted);line-height:1.6}
/* 📍 Site / building under a task-card heading. Uses --muted, the same token
   .note uses, so it is legible in BOTH themes without a second rule. */
.rec-title-site{display:block;font-size:12px;font-weight:600;color:var(--muted);
  margin-top:3px;line-height:1.35;letter-spacing:0}
.setup-banner{background:#FEF9E7;border:1.5px solid #F9E79F;border-radius:8px;padding:12px 16px;font-size:12px;color:#7D6608;line-height:1.7;margin-bottom:16px}
.sum-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.sum-card{background:var(--white);border-radius:10px;box-shadow:var(--shadow),0 0 0 1px rgba(18,59,99,.06);
  padding:12px 16px;position:relative;overflow:hidden;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.sum-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;
  background:linear-gradient(90deg,var(--accent),var(--bright) 60%,transparent);opacity:.65}
.sum-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.sum-card .v{font-size:22px;font-weight:800;color:var(--forest)}
.sum-card .l{font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
@media(max-width:800px){.grid2,.grid3{grid-template-columns:1fr}main{padding:14px}}

/* ═══ OFFLINE LOOK-AND-FEEL PARITY — 2026-07-08 ═══
   Display font, ambient blobs and micro-interactions matching OCFM_CAFM_v13. */
:root{--font-display:'Manrope','Inter',-apple-system,sans-serif}
header h1,.auth-title,.sum-card .v,h2,h3{font-family:var(--font-display)}
.sum-card .v{font-variant-numeric:tabular-nums}
/* Ambient blobs (offline .bg-fx-blob) */
body::before,body::after{content:'';position:fixed;border-radius:50%;pointer-events:none;z-index:-1;
  filter:blur(70px);opacity:.5;animation:blobFloat 22s ease-in-out infinite}
body::before{width:520px;height:520px;top:-190px;left:-150px;
  background:radial-gradient(circle,rgba(34,211,238,.35),transparent 70%)}
body::after{width:420px;height:420px;top:30%;right:-160px;animation-delay:-8s;
  background:radial-gradient(circle,rgba(14,165,233,.3),transparent 70%)}
@keyframes blobFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,20px) scale(1.06)}}
/* Buttons — offline gradient + lift */
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--bright))}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible,input:focus-visible,select:focus-visible{outline:none;box-shadow:var(--glow)}
/* Header — glow on the numbers, offline hs-val vibe */
header .who{font-variant-numeric:tabular-nums}
header .cloud-chip{text-shadow:0 0 14px rgba(34,211,238,.5)}
/* Badges get the offline pill micro-hover */
.badge{transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.badge:hover{transform:translateY(-1px)}
/* Modal entrance closer to offline spring */
.modal-overlay.open .modal{animation:modalIn .28s cubic-bezier(.34,1.4,.64,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,body::before,body::after{animation:none!important;transition:none!important}}

/* ═══ FUTURISTIC LAYER — hero FX, header KPI strip ═══ */
#fx-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.7}
#cursor-glow{position:fixed;top:0;left:0;width:560px;height:560px;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(14,165,233,.10),rgba(124,92,252,.05) 45%,transparent 70%);
  border-radius:50%;will-change:transform;transform:translate(-9999px,-9999px)}
/* ══ 🎨 11 Sep 2026 — EVERY <option>, ONCE, INSTEAD OF 674 TIMES ═════════════
   THE STANDING TRAP, in CLAUDE.md since August: a <select> with a transparent
   background and inherited colour looks right CLOSED (it picks up the dark card
   behind it) but the OPEN list is drawn by the OS on a WHITE popup — so the
   inherited light text becomes white-on-white and every option vanishes. It
   looks perfect in the only state you see while writing the code.
   `optSty()` fixes it per-option, and the newer screens use it. A live sweep
   counted **852 options on screen and 674 with no inline style** — the older
   ones, written before optSty() existed, plus every <option> any future screen
   forgets. Only three narrow CSS rules existed (#viewas, #ownerview).
   One rule closes the whole class, now and for anything added later. optSty()
   stays as belt and braces where it is already used. ══════════════════════ */
select option, select optgroup{ background:#ffffff; color:#16202e; }
html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup{ background:#0f1a2e; color:#e8eef7; }

main{position:relative;z-index:1}
/* 🔔 11 Sep 2026 — THE TOAST WAS BEHIND THE MODAL, AND BLURRED BY IT.
   Jamie: "it comes up with a message in the background but its blured out as
   you can see so i cant see the reason?"
   `main,#toast{position:relative;z-index:1}` was added for the hero FX layer and
   quietly undid BOTH of the toast's own properties: `position:fixed` became
   relative, so it drifted from the bottom-centre down to the bottom-left of the
   page flow, and z-index:99 became 1 — underneath `.modal-overlay` at z-index:50,
   which carries `backdrop-filter:blur(3px)`. So every message raised while a
   modal was open was rendered behind frosted glass. That is most of them: the
   quote card, the visit editor and the invoice modals are all overlays.
   A message nobody can read is the same as no message, and it is worse than no
   message when the thing it is reporting is a failure. */
#toast{position:fixed;z-index:2000}
/* header sits ABOVE main (but below modals, z=50) so the global-search results
   dropdown isn't painted behind the page content — run-42 fix */
header{position:relative;z-index:30}
header{
  background:linear-gradient(120deg,#0A1628 0%,#0F2745 35%,#123B63 65%,#0EA5E9 130%);
  background-size:200% 200%;animation:headerFlow 14s ease infinite;
}
@keyframes headerFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* Header live KPI strip (offline hs-val parity) */
.hstats{display:flex;gap:4px;margin-left:22px;overflow-x:auto;scrollbar-width:none}
.hstats::-webkit-scrollbar{display:none}
.hs{padding:5px 13px;border-radius:9px;cursor:pointer;text-align:center;white-space:nowrap;
  background:rgba(255,255,255,.06);border:1px solid rgba(34,211,238,.15);
  transition:background .15s var(--ease),transform .12s var(--ease),border-color .15s var(--ease)}
.hs:hover{background:rgba(34,211,238,.12);transform:translateY(-1px);border-color:rgba(34,211,238,.45)}
.hs-val{font-size:19px;font-weight:800;color:var(--bright);line-height:1;
  font-family:var(--font-display);font-variant-numeric:tabular-nums;text-shadow:0 0 16px rgba(34,211,238,.4)}
.hs-val.bad{color:#FF7B6B;text-shadow:0 0 16px rgba(255,90,70,.45)}
.hs-lbl{font-size:8px;font-weight:700;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
@media(max-width:1100px){.hstats{display:none}}
/* Glassier cards over the FX layer */
.card{background:rgba(255,255,255,.92);backdrop-filter:blur(6px)}
.sum-card{background:rgba(255,255,255,.92);backdrop-filter:blur(6px)}
nav.tabs{background:rgba(255,255,255,.93);backdrop-filter:blur(8px)}

/* ═══ GLOBAL SEARCH (header) ═══ */
#gsearch{width:210px;padding:7px 11px;font-size:11.5px;font-weight:600;border-radius:20px;
  border:1.5px solid rgba(34,211,238,.35);background:rgba(255,255,255,.1);color:#fff;transition:width .25s ease}
#gsearch:focus{width:280px;outline:none;border-color:var(--bright);box-shadow:0 0 18px rgba(34,211,238,.25)}
#gsearch::placeholder{color:rgba(255,255,255,.55)}
#gsearch-res{position:absolute;top:calc(100% + 8px);right:0;width:420px;max-height:60vh;overflow-y:auto;z-index:300;
  background:#fff;border:1.5px solid var(--border);border-radius:12px;box-shadow:0 18px 50px rgba(10,20,40,.28);padding:6px}
#gsearch-res .gs-hit{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:8px;cursor:pointer}
#gsearch-res .gs-hit:hover{background:rgba(14,165,233,.09)}
#gsearch-res .gs-t{font-size:12px;font-weight:700;color:#16202E}
#gsearch-res .gs-s{font-size:10.5px;color:#5B6B84;margin-top:1px}
html[data-theme="dark"] #gsearch-res{background:#0D1526;border-color:rgba(34,211,238,.25)}
html[data-theme="dark"] #gsearch-res .gs-t{color:#EAF2FF}
html[data-theme="dark"] #gsearch-res .gs-s{color:#8FA3C4}
html[data-theme="dark"] #gsearch-res .gs-hit:hover{background:rgba(34,211,238,.1)}

/* ═══ FRONT SCREEN — screensaver landing (approved design demo) ═══ */
#hero{position:fixed;inset:0;z-index:200;cursor:pointer;background:#04070F;overflow:hidden;
  transition:opacity 1s var(--ease),transform 1.1s var(--ease),background .6s var(--ease)}
html[data-theme="dark"] #hero{background:#05070F}
html:not([data-theme="dark"]) #hero.day{background:#549BE0}
#hero.gone{opacity:0;transform:translateY(-4%) scale(1.02);pointer-events:none}
/* Refresh should put you back where you were, not on the marketing splash.
   A signed-in session skips the hero with no animation at all — .instant kills
   the transition so there's no 1s fade on every reload. */
#hero.instant{transition:none!important;display:none}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 52% 44%,transparent 46%,rgba(2,4,12,.55) 100%)}
#hero.day .hero-vignette{background:radial-gradient(ellipse at 52% 44%,transparent 55%,rgba(30,42,66,.28) 100%)}
.hero-content{position:absolute;left:clamp(24px,5.5vw,100px);top:50%;transform:translateY(-50%);max-width:min(530px,42vw);
  padding:40px 44px;border-radius:24px;pointer-events:none;text-align:left;
  background:linear-gradient(160deg,rgba(5,10,22,.78),rgba(7,13,28,.4));
  border:1px solid rgba(45,225,252,.25);backdrop-filter:blur(16px);
  box-shadow:0 30px 90px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07);
  transition:background .6s var(--ease),border-color .6s var(--ease)}
#hero.day .hero-content{background:linear-gradient(160deg,rgba(255,255,255,.88),rgba(250,250,252,.6));
  border-color:rgba(10,42,94,.22);box-shadow:0 30px 80px rgba(40,58,86,.28),inset 0 1px 0 rgba(255,255,255,.9)}
.hero-chip{font-size:10.5px;font-weight:800;letter-spacing:.42em;color:var(--bright);text-transform:uppercase;opacity:0;animation:heroRise 1.2s .3s var(--ease) forwards}
#hero.day .hero-chip{color:#5E7233}
.hero-title{font-family:var(--font-display);font-weight:800;font-size:clamp(36px,4.4vw,68px);letter-spacing:-.03em;line-height:1.04;margin:14px 0 10px;
  opacity:0;animation:heroRise 1.2s .55s var(--ease) forwards}
.hero-title .ltr{display:inline-block;transition:transform .18s var(--ease),text-shadow .18s var(--ease),filter .18s var(--ease);will-change:transform}
.hero-title .w1 .ltr{color:var(--bright);text-shadow:0 0 38px rgba(45,225,252,.55)}
.hero-title .w2 .ltr{color:#F4F8FF;text-shadow:0 0 24px rgba(255,255,255,.14)}
#hero.day .hero-title .w1 .ltr{color:#0A2A5E;text-shadow:none}
#hero.day .hero-title .w2 .ltr{color:#26354E;text-shadow:none}
.hero-sub{font-size:clamp(12.5px,1.05vw,15px);color:#A4B8D8;font-weight:600;line-height:1.65;opacity:0;animation:heroRise 1.2s .8s var(--ease) forwards}
#hero.day .hero-sub{color:#3A4C68}
.hero-enter{display:inline-block;margin-top:28px;padding:15px 42px;border:1.5px solid rgba(45,225,252,.6);border-radius:40px;font-size:12.5px;font-weight:800;
  letter-spacing:.28em;text-transform:uppercase;color:var(--bright);background:linear-gradient(120deg,rgba(45,225,252,.12),rgba(255,177,61,.08));
  animation:heroPulse 2.6s 1.4s ease-in-out infinite,heroRise 1.2s 1.05s var(--ease) forwards;opacity:0;position:relative;overflow:hidden}
.hero-enter::after{content:'';position:absolute;top:0;left:-80%;width:60%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);animation:heroSheen 3.4s 2s ease-in-out infinite}
#hero.day .hero-enter{border-color:rgba(107,127,58,.7);color:#4E6028;background:linear-gradient(120deg,rgba(255,255,255,.7),rgba(196,212,150,.35));
  animation:heroPulseDay 2.6s 1.4s ease-in-out infinite,heroRise 1.2s 1.05s var(--ease) forwards}
.hero-foot{margin-top:22px;font-size:9.5px;letter-spacing:.26em;color:#5A6E92;text-transform:uppercase;
  opacity:0;animation:heroRise 1.2s 1.3s var(--ease) forwards}
#hero.day .hero-foot{color:#6B7C96}
.hero-theme{position:absolute;top:22px;right:26px;z-index:5;width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1.5px solid rgba(45,225,252,.5);background:rgba(6,14,30,.55);backdrop-filter:blur(8px);color:#fff;font-size:18px;
  transition:all .25s var(--ease);opacity:0;animation:heroRise 1s 1.4s var(--ease) forwards}
.hero-theme:hover{transform:rotate(24deg) scale(1.12);border-color:var(--bright);box-shadow:0 0 26px rgba(45,225,252,.45)}
#hero.day .hero-theme{border-color:rgba(107,127,58,.6);background:rgba(255,255,255,.7);box-shadow:0 0 22px rgba(119,144,63,.3)}
@media (max-width:820px){.hero-content{max-width:86vw;left:7vw}}
@keyframes heroRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes heroPulse{0%,100%{box-shadow:0 0 0 0 rgba(45,225,252,.4)}50%{box-shadow:0 0 46px 9px rgba(45,225,252,.26)}}
@keyframes heroPulseDay{0%,100%{box-shadow:0 0 0 0 rgba(119,144,63,.45)}50%{box-shadow:0 0 46px 9px rgba(119,144,63,.32)}}
@keyframes heroSheen{0%{left:-80%}55%,100%{left:130%}}

/* ═══ DARK THEME (approved design demo) ═══ */
html[data-theme="dark"]{
  --offwhite:#0A1424;--white:#0F1D33;--border:#23375A;--text:#E8F0FB;--muted:#8DA2BF;
  --card:#0F1D33;
  --warn-on-panel:#FFC864;   /* see the note in :root — measured, not guessed */
  --prj-done:#4ade80;--prj-ontrack:#7dd3fc;--prj-behind:#FFC864;
  --prj-slipped:#fca5a5;--prj-idle:#9FB3CC;   /* see :root — measured on the modal, not guessed */
  --forest:#E8F0FB;--green:#2EE6A8;--danger:#FF5A6E;
  background-color:#050B16;
  background-image:
    radial-gradient(1200px 460px at 15% -12%,rgba(14,165,233,.14),transparent 62%),
    radial-gradient(1000px 420px at 88% -8%,rgba(124,92,252,.12),transparent 60%);
}
html[data-theme="dark"] body{color:var(--text)}
html[data-theme="dark"] .card,html[data-theme="dark"] .sum-card{background:rgba(13,26,46,.78);backdrop-filter:blur(12px);
  box-shadow:0 10px 40px rgba(3,6,13,.4),0 0 0 1px rgba(34,211,238,.1)}
html[data-theme="dark"] nav.tabs{background:rgba(13,26,46,.85);box-shadow:0 10px 40px rgba(3,6,13,.4),0 0 0 1px rgba(34,211,238,.12)}
html[data-theme="dark"] nav.tabs button{color:var(--muted)}
html[data-theme="dark"] nav.tabs button:hover{background:rgba(14,165,233,.12);color:var(--bright)}
html[data-theme="dark"] .sum-card .v{color:var(--bright);text-shadow:0 0 22px rgba(34,211,238,.3)}
html[data-theme="dark"] tbody td{border-bottom-color:rgba(35,55,90,.7)}
html[data-theme="dark"] tbody tr:nth-child(even){background:rgba(255,255,255,.025)}
html[data-theme="dark"] tbody tr:hover,html[data-theme="dark"] tbody tr:nth-child(even):hover{background:rgba(14,165,233,.1)}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:#0A1830;color:var(--text);border-color:#23375A}
html[data-theme="dark"] .modal{background:#0F1D33;color:var(--text)}
html[data-theme="dark"] .table-wrap{box-shadow:0 0 0 1px rgba(34,211,238,.14)}
html[data-theme="dark"] .disc-tag{background:rgba(14,165,233,.16);color:var(--bright)}
html[data-theme="dark"] .badge.info{background:rgba(14,165,233,.16);color:var(--bright)}
html[data-theme="dark"] .badge.ok{background:rgba(46,230,168,.14);color:var(--green)}
html[data-theme="dark"] .badge.bad{background:rgba(255,90,110,.15);color:var(--danger)}
html[data-theme="dark"] .badge.pending{background:rgba(255,180,84,.14);color:#FFB454}
html[data-theme="dark"] .setup-banner{background:rgba(255,180,84,.09);border-color:rgba(255,180,84,.3);color:#FFD9A0}
html[data-theme="dark"] .note{color:var(--muted)}
html[data-theme="dark"] #cursor-glow{background:radial-gradient(circle,rgba(14,165,233,.15),rgba(124,92,252,.07) 45%,transparent 70%)}
html[data-theme="dark"] #toast{background:#0F1D33;color:var(--text);box-shadow:0 8px 30px rgba(3,6,13,.6),0 0 0 1px rgba(34,211,238,.2)}
html[data-theme="dark"] h3,html[data-theme="dark"] .modal-head h3{color:var(--text)}
html[data-theme="dark"] .auth-title{color:var(--text)}
/* View-as dropdown options must stay readable on the native popup */
#viewas option,#viewas optgroup{color:#16202E;background:#fff}
html[data-theme="dark"] #viewas option,html[data-theme="dark"] #viewas optgroup{color:#E8F0FB;background:#0F1D33}

/* ═══ 2026-08-06 — Reactive Jobs frozen identity columns (Ref → Supplier).
   FIXED pixel widths — the earlier attempt failed because sticky offsets can't
   track auto-sized columns (Client overlapped Site). Same pattern as .qr-scroll. */
.grid-fit .jfz1,.grid-fit .jfz2,.grid-fit .jfz3,.grid-fit .jfz4,.grid-fit .jfz5,.grid-fit .jfz6{position:sticky;z-index:3}
.grid-fit .jfz1{left:0;min-width:124px;max-width:124px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 16 Oct: mirrored refs (OCFM-RJ-068) overlapped Description - rows_v5 widened this to 84px but the offsets below still assumed 60px */
.grid-fit .jfz2{left:124px;min-width:170px;max-width:170px}
.grid-fit .jfz3{left:294px;min-width:66px;max-width:66px}
.grid-fit .jfz4{left:360px;min-width:106px;max-width:106px}
.grid-fit .jfz5{left:466px;min-width:88px;max-width:88px}
.grid-fit .jfz6{left:554px;min-width:116px;max-width:116px;box-shadow:2px 0 0 var(--border)}
.grid-fit tbody .jfz1,.grid-fit tbody .jfz2,.grid-fit tbody .jfz3,.grid-fit tbody .jfz4,.grid-fit tbody .jfz5,.grid-fit tbody .jfz6{background:var(--white)}
.grid-fit thead .jfz1,.grid-fit thead .jfz2,.grid-fit thead .jfz3,.grid-fit thead .jfz4,.grid-fit thead .jfz5,.grid-fit thead .jfz6{z-index:7}

/* Synced horizontal scrollbar rendered ABOVE the big grids (jobs/quotes/works) */
.hscroll-top{overflow-x:auto;overflow-y:hidden;height:15px;margin-bottom:5px;border-radius:8px}

/* ═══ 2026-08-06 — 🏅 Supplier grading metal tiers ═══════════════════════════
   Diamond + Platinum animate (moving sheen); Gold / Silver / Bronze are static
   metallic gradients; Unknown is a neutral grey, deliberately not a judgement. */
.met{display:inline-flex;align-items:center;gap:4px;font-weight:800;border-radius:6px;padding:2px 9px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;border:1px solid rgba(0,0,0,.18);position:relative;white-space:nowrap;vertical-align:middle;line-height:1.5}
.met-diamond{background:linear-gradient(115deg,#9fdcff 0%,#eafaff 18%,#6ecbff 36%,#ffffff 50%,#8fd6ff 64%,#e2f6ff 82%,#a8e2ff 100%);background-size:280% 100%;animation:metShine 2.7s linear infinite;color:#053a5e;box-shadow:0 0 12px rgba(110,203,255,.6),inset 0 0 6px rgba(255,255,255,.7);text-shadow:0 1px 1px rgba(255,255,255,.6)}
.met-platinum{background:linear-gradient(115deg,#c8cfd9 0%,#f7f9fc 22%,#b9c2ce 42%,#ffffff 54%,#c4ccd7 72%,#eef1f5 100%);background-size:280% 100%;animation:metShine 4.2s linear infinite;color:#2c3947;text-shadow:0 1px 1px rgba(255,255,255,.55);box-shadow:0 0 6px rgba(200,210,222,.45)}
.met-gold{background:linear-gradient(135deg,#8a6414 0%,#d4a017 24%,#ffe9a8 48%,#d4a017 70%,#a97b12 100%);color:#3c2c05;text-shadow:0 1px 1px rgba(255,240,190,.5)}
.met-silver{background:linear-gradient(135deg,#878e96 0%,#c8cdd3 30%,#f0f2f4 50%,#b2b8bf 72%,#90979f 100%);color:#2e3439;text-shadow:0 1px 1px rgba(255,255,255,.5)}
.met-bronze{background:linear-gradient(135deg,#6d3f1e 0%,#b0672d 28%,#e8b184 50%,#a95f28 74%,#7c4a20 100%);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.4)}
.met-unknown{background:#5b6570;color:#eef1f4;border-color:#49525c}
@keyframes metShine{0%{background-position:0% 0}100%{background-position:280% 0}}

/* ── 🖱 A REFERENCE THAT OPENS ITS TASK (21 Sep 2026) ─────────────────────────
   Jamie, on the To Put On Client System page: "i can click on the tasks and it
   pop open the task for me, otherwise i have to go back and forth between
   different tabs."

   It is a <button>, not an <a>: there is no URL behind it, and a real button is
   what keyboard and screen-reader users expect for "do a thing on this page".
   Styled to LOOK like the bold ref it replaces so the table does not change
   shape — the only visible difference is that it is now obviously clickable.

   🔴 BOTH THEMES, EXPLICITLY. var(--accent) is defined in both, but the
   underline colour and the hover background are not inherited from anything, so
   they are stated for each theme rather than left to chance. (The <select>
   trap: a control that looks right in the one theme you happened to be in.) */
.reflink{
  background:transparent; border:0; padding:0; margin:0;
  font:inherit; font-weight:800; cursor:pointer;
  color:var(--accent); text-decoration:underline;
  text-decoration-color:rgba(14,165,233,.45); text-underline-offset:2px;
  border-radius:4px;
}
.reflink:hover{ color:var(--bright); text-decoration-color:var(--bright); }
.reflink:focus-visible{ outline:none; box-shadow:var(--glow); }
html[data-theme="dark"] .reflink{ color:#5FD0F5; text-decoration-color:rgba(95,208,245,.5); }
html[data-theme="dark"] .reflink:hover{ color:#A5E9FF; text-decoration-color:#A5E9FF; }
/* 9 Oct 2026 - HOME PAGE REFRESH (flag home_v2). Layout only: wider page, a
   greeting header with the counters as big tiles, two columns on wide screens. */
body.home-v2 main{max-width:2600px}
@media(min-width:1600px){
  body.home-v2 .hs{flex:1 1 0;min-width:78px}
  body.home-v2 .hs-lbl{font-size:9.5px}
  body.home-v2 .hs-val{font-size:21px}
}
body.home-v2.dv2-on-dash .hstats{display:none}
.dv2-hero{padding:20px 24px;background:linear-gradient(135deg,rgba(34,211,238,.10),rgba(16,185,129,.07)),var(--white)}
.dv2-hero-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.dv2-greet{font-family:var(--font-display);font-size:27px;font-weight:800;color:var(--forest);line-height:1.15}
.dv2-date{font-size:13px;color:var(--muted);margin-top:3px}
.dv2-hint{font-size:11px}
.dv2-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:10px}
.dv2-tile.zero{opacity:.55}
.dv2-tile.zero:hover{opacity:1}
.dv2-tile{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:13px 15px;border-radius:12px;
  border:1px solid rgba(34,211,238,.25);background:rgba(34,211,238,.06);cursor:pointer;text-align:left;
  transition:transform .12s,border-color .12s,background .12s;color:inherit;font:inherit}
.dv2-tile:hover{transform:translateY(-2px);border-color:rgba(34,211,238,.65);background:rgba(34,211,238,.11)}
.dv2-tile.bad{border-color:rgba(255,90,70,.45);background:rgba(255,90,70,.08)}
.dv2-v{font-family:var(--font-display);font-size:27px;font-weight:800;line-height:1;color:var(--forest);font-variant-numeric:tabular-nums}
.dv2-tile.bad .dv2-v{color:#FF7B6B}
.dv2-l{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);line-height:1.25}
.dv2-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media(min-width:1500px){.dv2-grid{grid-template-columns:minmax(0,2.1fr) minmax(380px,1fr)}}
.dv2-col{min-width:0}
#dv2-right #dash-charts{flex-direction:column}
#dv2-right #dash-charts > *{width:100% !important;max-width:none !important;flex:1 1 auto !important;min-width:0 !important}
#dv2-right .sum-row{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
#dv2-right .dv2-side:empty,#dv2-right .dv2-side:has(> div:empty:only-child){display:none}
body.home-v2 #tab-dashboard .card{padding:20px}
body.home-v2 #tab-dashboard table{font-size:13px}
body.home-v2 #tab-dashboard .dv2-todo-card h2{font-size:16px}

/* === LANDING V2 (9 Oct 2026) - clean dark corporate front screen. Dummy figures only. === */
#hero.hero-v2,html:not([data-theme="dark"]) #hero.hero-v2.day{background:#060b16;color:#e8eef8;cursor:default;overflow-y:auto}
#hero.hero-v2 #lv2-grid{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#hero.hero-v2 .lv2-glow{position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(900px 600px at 78% 35%,rgba(34,195,230,.10),transparent 60%),radial-gradient(700px 500px at 10% 90%,rgba(61,120,220,.08),transparent 60%)}
#hero.hero-v2 .lv2-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:22px clamp(20px,4vw,64px)}
#hero.hero-v2 .lv2-brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:-.01em;font-size:15px}
#hero.hero-v2 .lv2-brand small{display:block;font-weight:500;font-size:11px;color:#8a9bb5;letter-spacing:.06em;text-transform:uppercase}
#hero.hero-v2 .lv2-logo{width:34px;height:34px;border-radius:9px;border:1px solid rgba(91,224,255,.35);display:grid;place-items:center;font-size:12px;font-weight:800;color:#5be0ff;background:rgba(34,195,230,.08)}
#hero.hero-v2 .lv2-btn{font-weight:600;font-size:14px;font-family:inherit;border-radius:10px;padding:11px 18px;cursor:pointer;border:1px solid rgba(140,170,220,.18);background:rgba(255,255,255,.03);color:#e8eef8;transition:background .2s,border-color .2s}
#hero.hero-v2 .lv2-btn:hover{border-color:rgba(91,224,255,.5)}
#hero.hero-v2 .lv2-btn.primary{background:#22c3e6;border-color:#22c3e6;color:#04121c}
#hero.hero-v2 .lv2-btn.primary:hover{background:#5be0ff}
#hero.hero-v2 .lv2-wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;
  min-height:calc(100vh - 130px);padding:0 clamp(20px,6vw,110px) 30px}
#hero.hero-v2 .lv2-eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#5be0ff;font-weight:600;margin-bottom:22px;display:flex;gap:10px;align-items:center}
#hero.hero-v2 .lv2-eyebrow:before{content:"";width:28px;height:1px;background:#5be0ff}
#hero.hero-v2 .lv2-h1{font-size:clamp(36px,3.9vw,64px);line-height:1.04;letter-spacing:-.035em;font-weight:700;color:#e8eef8;margin:0}
#hero.hero-v2 .lv2-h1 span{color:#8a9bb5;font-weight:600}
#hero.hero-v2 .lv2-lede{margin-top:22px;max-width:520px;font-size:17px;line-height:1.6;color:#8a9bb5}
#hero.hero-v2 .lv2-cta{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
#hero.hero-v2 .lv2-trust{margin-top:44px;display:flex;gap:28px;flex-wrap:wrap;color:#8a9bb5;font-size:12.5px}
#hero.hero-v2 .lv2-trust b{display:block;color:#e8eef8;font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:2px}
#hero.hero-v2 .lv2-panels{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-content:center}
#hero.hero-v2 .lv2-card{position:relative;background:rgba(16,28,52,.55);border:1px solid rgba(140,170,220,.12);border-radius:16px;padding:18px 20px;backdrop-filter:blur(14px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.04)}
#hero.hero-v2 .lv2-c1{grid-row:span 2}
#hero.hero-v2 .lv2-c4{grid-column:1/-1}
#hero.hero-v2 .lv2-card h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8a9bb5;font-weight:600;margin:0 0 12px;display:flex;justify-content:space-between}
#hero.hero-v2 .lv2-live{color:#3ddc97;display:flex;align-items:center;gap:6px}
#hero.hero-v2 .lv2-live:before{content:"";width:6px;height:6px;border-radius:50%;background:#3ddc97;animation:lv2p 2s infinite}
@keyframes lv2p{0%{box-shadow:0 0 0 0 rgba(61,220,151,.6)}70%{box-shadow:0 0 0 7px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
#hero.hero-v2 .lv2-big{font-size:34px;font-weight:700;letter-spacing:-.03em;color:#e8eef8}
#hero.hero-v2 .lv2-sub{font-size:12px;color:#8a9bb5;margin-top:4px}
#hero.hero-v2 .lv2-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#hero.hero-v2 .lv2-row{display:grid;grid-template-columns:66px 1fr auto;gap:10px;font-size:12.5px;padding:8px 0;border-top:1px solid rgba(140,170,220,.12);align-items:center;color:#e8eef8}
#hero.hero-v2 .lv2-card h4+.lv2-row{border-top:0}
#hero.hero-v2 .lv2-ref{font-weight:600;color:#5be0ff;font-variant-numeric:tabular-nums}
#hero.hero-v2 .lv2-tag{font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.05);color:#8a9bb5;white-space:nowrap}
#hero.hero-v2 .lv2-tag.g{color:#3ddc97;background:rgba(61,220,151,.1)}
#hero.hero-v2 .lv2-tag.a{color:#f2b84b;background:rgba(242,184,75,.1)}
#hero.hero-v2 .lv2-tag.c{color:#5be0ff;background:rgba(34,195,230,.1)}
#hero.hero-v2 .lv2-spark{width:100%;height:46px;margin-top:8px;display:block}
#hero.hero-v2 .lv2-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.06);margin-top:12px;overflow:hidden}
#hero.hero-v2 .lv2-bar i{display:block;height:100%;width:97%;background:linear-gradient(90deg,#22c3e6,#3ddc97)}
#hero.hero-v2 .lv2-foot{position:relative;z-index:2;text-align:center;font-size:11px;color:#55657f;padding:0 0 22px;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:980px){#hero.hero-v2 .lv2-wrap{grid-template-columns:1fr;padding-top:20px;gap:34px}}
@media(max-width:560px){#hero.hero-v2 .lv2-panels{grid-template-columns:1fr}#hero.hero-v2 .lv2-c1{grid-row:auto}#hero.hero-v2 .lv2-row{grid-template-columns:60px 1fr auto}}

/* === WIDE PAGES (9 Oct 2026, flag wide_pages) - Jamie: "there is a lot of empty space" either side of
   All Tasks / Reactive Jobs on his wide screen. Pages use the full width; long text columns get more room. === */
body.wide-pages main{max-width:none;padding-left:clamp(14px,1.4vw,28px);padding-right:clamp(14px,1.4vw,28px)}
body.wide-pages #jobs-tbody td:nth-child(2),body.wide-pages #works-tbody td:nth-child(3){max-width:380px}
body.wide-pages #jobs-tbody td:nth-child(4),body.wide-pages #quotes-tbody td:nth-child(4){max-width:280px}
/* ── LANDING V3 (12 Oct 2026, Jamie: "think apple level") ─────────────── */
#hero.hero-v3,html:not([data-theme="dark"]) #hero.hero-v3.day{background:#000;color:#f5f7fa;cursor:default;overflow-x:hidden;overflow-y:auto;scroll-behavior:smooth;
 font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
/* 12 Oct fix: the line above used to say opacity:1, which beat #hero.gone{opacity:0} - Enter left the page
   on screen but unclickable (Jamie: "it freezes on this screen"). Keep the leave/skip states winning here. */
#hero.hero-v3.gone,html:not([data-theme="dark"]) #hero.hero-v3.day.gone{opacity:0;pointer-events:none}
#hero.hero-v3.instant,html:not([data-theme="dark"]) #hero.hero-v3.day.instant{display:none}
#hero.hero-v3 *{box-sizing:border-box}
/* the app styles bare header / nav / h1 / button etc. - wipe those inside the landing page (class rules below still win) */
#hero.hero-v3 :is(header,nav,section,footer,h1,h2,h3,h4,h5,h6,p){all:unset;display:block;box-sizing:border-box}
#hero.hero-v3 :is(button,a){all:unset;box-sizing:border-box;cursor:pointer}
#hero.hero-v3 :is(h1,h2,h3,h4,h5,h6,p,button,a,span,b,em,small,time,u,i,div){font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
#hero.hero-v3 .l3-btn{display:inline-block;text-align:center}
#hero.hero-v3 .l3-in{width:100%;max-width:1680px;margin:0 auto;padding:0 clamp(18px,4vw,56px)}
#hero.hero-v3 .l3-bgglow{position:absolute;left:0;right:0;top:0;height:1500px;pointer-events:none;z-index:0;
 background:radial-gradient(60% 45% at 50% 0%,rgba(47,120,255,.22),transparent 70%),radial-gradient(40% 35% at 80% 30%,rgba(34,211,238,.12),transparent 70%),radial-gradient(35% 30% at 15% 40%,rgba(120,90,255,.10),transparent 70%)}
/* nav */
#hero.hero-v3 .l3-nav{position:sticky;top:0;z-index:20;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
#hero.hero-v3 .l3-nav.solid{background:rgba(0,0,0,.66);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom-color:rgba(255,255,255,.08)}
#hero.hero-v3 .l3-nav .l3-in{display:flex;align-items:center;height:64px;gap:28px}
#hero.hero-v3 .l3-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:-.01em;color:#fff;white-space:nowrap}
#hero.hero-v3 .l3-mark{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#000;background:linear-gradient(135deg,#fff,#9fdcff)}
#hero.hero-v3 .l3-brand small{color:#8b93a1;font-weight:500;margin-left:4px}
#hero.hero-v3 .l3-links{display:flex;gap:26px;margin-left:auto}
#hero.hero-v3 .l3-links a{color:#a1a8b5;font-size:13.5px;text-decoration:none;transition:color .2s}
#hero.hero-v3 .l3-links a:hover{color:#fff}
#hero.hero-v3 .l3-navcta{display:flex;gap:10px;margin-left:12px}
#hero.hero-v3 .l3-btn{font:600 14px/1 Inter,system-ui,sans-serif;border-radius:999px;padding:12px 20px;cursor:pointer;border:1px solid rgba(255,255,255,.16);background:transparent;color:#fff;transition:transform .2s,background .2s,border-color .2s;white-space:nowrap}
#hero.hero-v3 .l3-btn:hover{border-color:rgba(255,255,255,.4)}
#hero.hero-v3 .l3-btn.pri{background:#fff;border-color:#fff;color:#000}
#hero.hero-v3 .l3-btn.pri:hover{background:#dff4ff;transform:translateY(-1px)}
#hero.hero-v3 .l3-btn.lg{font-size:16px;padding:16px 28px}
#hero.hero-v3 .l3-btn.sm{padding:9px 16px;font-size:13px}
/* hero */
#hero.hero-v3 .l3-hero{position:relative;z-index:1;text-align:center;padding:clamp(56px,9vh,120px) 0 0}
#hero.hero-v3 .l3-pill{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:#c9d1dd;padding:7px 14px 7px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
#hero.hero-v3 .l3-pill b{font-size:11px;font-weight:700;color:#000;background:#5ee0ff;border-radius:999px;padding:3px 9px}
#hero.hero-v3 .l3-h1{margin:28px auto 0;font-weight:700;letter-spacing:-.045em;line-height:.98;font-size:clamp(44px,6.4vw,124px);max-width:15ch;color:#fff}
#hero.hero-v3 .l3-h1 span{display:block;background:linear-gradient(180deg,#ffffff 0%,#9aa7ba 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
#hero.hero-v3 .l3-h1 em{font-style:normal;background:linear-gradient(90deg,#5ee0ff,#4f8cff 55%,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
#hero.hero-v3 .l3-lede{margin:28px auto 0;max-width:640px;font-size:clamp(17px,1.35vw,21px);line-height:1.55;color:#a1a8b5}
#hero.hero-v3 .l3-ctas{margin-top:38px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
#hero.hero-v3 .l3-fade{opacity:0;transform:translateY(18px);animation:l3up .9s cubic-bezier(.2,.7,.2,1) forwards}
#hero.hero-v3 .d1{animation-delay:.08s}#hero.hero-v3 .d2{animation-delay:.18s}#hero.hero-v3 .d3{animation-delay:.3s}#hero.hero-v3 .d4{animation-delay:.42s}#hero.hero-v3 .d5{animation-delay:.6s}
@keyframes l3up{to{opacity:1;transform:none}}
/* product window */
#hero.hero-v3 .l3-stage{position:relative;margin:clamp(44px,6vh,80px) auto 0;max-width:1760px;padding:0 clamp(12px,3vw,48px);perspective:2200px}
#hero.hero-v3 .l3-stage:before{content:"";position:absolute;left:10%;right:10%;top:8%;height:70%;background:radial-gradient(50% 50% at 50% 50%,rgba(79,140,255,.35),transparent 70%);filter:blur(40px);z-index:0}
#hero.hero-v3 .l3-win{position:relative;z-index:1;border-radius:18px;overflow:hidden;background:#0b0e14;border:1px solid rgba(255,255,255,.12);
 box-shadow:0 0 0 1px rgba(0,0,0,.6),0 50px 120px -30px rgba(0,0,0,.9),0 30px 80px -40px rgba(79,140,255,.45);transform-origin:50% 0;
 transform:rotateX(var(--l3tilt,16deg)) scale(var(--l3sc,.94));will-change:transform}
#hero.hero-v3 .l3-chrome{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;background:#11151d;border-bottom:1px solid rgba(255,255,255,.06)}
#hero.hero-v3 .l3-chrome i{width:11px;height:11px;border-radius:50%;background:#2a2f39}
#hero.hero-v3 .l3-url{margin:0 auto;font-size:12px;color:#6b7383;background:#0b0e14;border-radius:7px;padding:5px 60px}
#hero.hero-v3 .l3-app{display:grid;grid-template-columns:200px 1fr;min-height:0;text-align:left;font-size:12.5px;color:#c9d1dd}
#hero.hero-v3 .l3-side{border-right:1px solid rgba(255,255,255,.06);padding:16px 10px;background:#0d1118}
#hero.hero-v3 .l3-side .s{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:#8b93a1;margin-bottom:2px}
#hero.hero-v3 .l3-side .s.on{background:rgba(94,224,255,.09);color:#fff}
#hero.hero-v3 .l3-side .s u{text-decoration:none;margin-left:auto;font-size:10.5px;color:#5ee0ff;background:rgba(94,224,255,.12);padding:1px 7px;border-radius:999px}
#hero.hero-v3 .l3-side .dot{width:7px;height:7px;border-radius:2px;background:currentColor;opacity:.7}
#hero.hero-v3 .l3-main{padding:20px 22px;display:flex;flex-direction:column;gap:16px;min-width:0}
#hero.hero-v3 .l3-hi{display:flex;align-items:flex-end;justify-content:space-between}
#hero.hero-v3 .l3-hi h5{margin:0;font-size:20px;font-weight:700;color:#fff;letter-spacing:-.02em}
#hero.hero-v3 .l3-hi p{margin:4px 0 0;color:#6b7383;font-size:12px}
#hero.hero-v3 .l3-search{font-size:12px;color:#6b7383;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:7px 12px;min-width:220px}
#hero.hero-v3 .l3-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
#hero.hero-v3 .l3-tile{border:1px solid rgba(255,255,255,.07);background:#10141c;border-radius:12px;padding:12px 14px}
#hero.hero-v3 .l3-tile b{display:block;font-size:24px;color:#fff;font-weight:700;letter-spacing:-.03em}
#hero.hero-v3 .l3-tile span{font-size:11px;color:#6b7383}
#hero.hero-v3 .l3-tile.red b{color:#ff7a7a}
#hero.hero-v3 .l3-cols{display:grid;grid-template-columns:1.7fr 1fr;gap:12px;min-height:0}
#hero.hero-v3 .l3-panel{border:1px solid rgba(255,255,255,.07);background:#10141c;border-radius:12px;padding:12px 14px;min-width:0}
#hero.hero-v3 .l3-panel h6{margin:0 0 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6b7383;font-weight:600;display:flex;justify-content:space-between}
#hero.hero-v3 .l3-tr{display:grid;grid-template-columns:72px 1.4fr 1fr 1fr 96px;gap:10px;padding:8px 0;border-top:1px solid rgba(255,255,255,.05);align-items:center;white-space:nowrap}
#hero.hero-v3 .l3-tr>*{overflow:hidden;text-overflow:ellipsis}
#hero.hero-v3 .l3-tr.h{border-top:0;color:#6b7383;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em}
#hero.hero-v3 .l3-ref{color:#5ee0ff;font-weight:600}
#hero.hero-v3 .l3-st{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:999px;justify-self:start;background:rgba(255,255,255,.06);color:#a1a8b5}
#hero.hero-v3 .l3-st.g{color:#4ade80;background:rgba(74,222,128,.1)}#hero.hero-v3 .l3-st.b{color:#5ee0ff;background:rgba(94,224,255,.1)}
#hero.hero-v3 .l3-st.a{color:#fbbf24;background:rgba(251,191,36,.1)}#hero.hero-v3 .l3-st.v{color:#c4b5fd;background:rgba(167,139,250,.12)}
#hero.hero-v3 .l3-bars{display:flex;align-items:flex-end;gap:7px;height:120px;margin-top:6px}
#hero.hero-v3 .l3-bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#5ee0ff,#4f8cff);opacity:.85}
#hero.hero-v3 .l3-bars i:nth-child(odd){opacity:.45}
#hero.hero-v3 .l3-kv{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid rgba(255,255,255,.05)}
#hero.hero-v3 .l3-kv b{color:#fff}
/* logos / capability strip */
#hero.hero-v3 .l3-strip{position:relative;z-index:1;margin-top:clamp(70px,10vh,130px);text-align:center}
#hero.hero-v3 .l3-strip p{color:#6b7383;font-size:13px;letter-spacing:.04em;margin:0 0 22px}
#hero.hero-v3 .l3-marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
#hero.hero-v3 .l3-marq div{display:flex;gap:56px;width:max-content;animation:l3marq 40s linear infinite}
#hero.hero-v3 .l3-marq span{font-size:clamp(18px,1.6vw,24px);font-weight:600;color:#59616f;letter-spacing:-.01em;white-space:nowrap}
@keyframes l3marq{to{transform:translateX(-50%)}}
/* sections */
#hero.hero-v3 .l3-sec{position:relative;z-index:1;padding:clamp(90px,14vh,170px) 0 0}
#hero.hero-v3 .l3-eyebrow{font-size:14px;font-weight:600;color:#5ee0ff;margin:0 0 16px}
#hero.hero-v3 .l3-h2{margin:0;font-size:clamp(36px,4.6vw,80px);line-height:1.02;letter-spacing:-.04em;font-weight:700;color:#fff;max-width:20ch}
#hero.hero-v3 .l3-h2 span{color:#6b7383}
#hero.hero-v3 .l3-p{margin:22px 0 0;max-width:620px;font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:#a1a8b5}
#hero.hero-v3 .l3-rv{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
#hero.hero-v3 .l3-rv.in{opacity:1;transform:none}
/* lifecycle */
#hero.hero-v3 .l3-flow{margin-top:64px;display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative}
#hero.hero-v3 .l3-flow:before{content:"";position:absolute;left:0;right:0;top:21px;height:2px;background:rgba(255,255,255,.08)}
#hero.hero-v3 .l3-flow:after{content:"";position:absolute;left:0;top:21px;height:2px;width:0;background:linear-gradient(90deg,#5ee0ff,#4f8cff,#a78bfa);transition:width 2.2s cubic-bezier(.4,0,.2,1) .3s}
#hero.hero-v3 .l3-flow.in:after{width:100%}
#hero.hero-v3 .l3-step{position:relative;padding-right:18px}
#hero.hero-v3 .l3-step i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#0b0e14;border:1px solid rgba(255,255,255,.14);font-style:normal;font-size:13px;font-weight:700;color:#fff;position:relative;z-index:1}
#hero.hero-v3 .l3-step b{display:block;margin-top:18px;font-size:17px;color:#fff;letter-spacing:-.01em}
#hero.hero-v3 .l3-step span{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:#8b93a1}
/* bento */
#hero.hero-v3 .l3-bento{margin-top:64px;display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
#hero.hero-v3 .l3-card{position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(180deg,#0f131b,#0a0d13);border:1px solid rgba(255,255,255,.08);padding:30px;min-height:340px;display:flex;flex-direction:column;transition:border-color .3s,transform .4s}
#hero.hero-v3 .l3-card:hover{border-color:rgba(255,255,255,.18)}
#hero.hero-v3 .l3-card h3{margin:0;font-size:clamp(20px,1.6vw,26px);letter-spacing:-.025em;font-weight:700;color:#fff}
#hero.hero-v3 .l3-card p{margin:10px 0 0;font-size:15px;line-height:1.55;color:#8b93a1;max-width:46ch}
#hero.hero-v3 .l3-viz{margin-top:auto;padding-top:26px}
#hero.hero-v3 .c7{grid-column:span 7}#hero.hero-v3 .c5{grid-column:span 5}#hero.hero-v3 .c4{grid-column:span 4}#hero.hero-v3 .c12{grid-column:span 12}
#hero.hero-v3 .l3-feed{display:flex;flex-direction:column;gap:8px;height:196px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
#hero.hero-v3 .l3-feed .f{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);font-size:13.5px;color:#c9d1dd;animation:l3feed 9s cubic-bezier(.6,0,.2,1) infinite}
#hero.hero-v3 .l3-feed .f em{font-style:normal;margin-left:auto;font-size:12px;color:#6b7383}
@keyframes l3feed{0%,26%{transform:translateY(0)}33%,59%{transform:translateY(-54px)}66%,92%{transform:translateY(-108px)}100%{transform:translateY(0)}}
#hero.hero-v3 .l3-ring{display:flex;align-items:center;gap:26px}
#hero.hero-v3 .l3-ring svg{width:150px;height:150px;flex:none}
#hero.hero-v3 .l3-ring circle.p{stroke-dasharray:377;stroke-dashoffset:377;transition:stroke-dashoffset 2s cubic-bezier(.4,0,.2,1) .2s}
#hero.hero-v3 .l3-rv.in .l3-ring circle.p{stroke-dashoffset:11}
#hero.hero-v3 .l3-certs{flex:1;font-size:13px}
#hero.hero-v3 .l3-certs div{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid rgba(255,255,255,.06);color:#c9d1dd}
#hero.hero-v3 .l3-certs div:first-child{border-top:0}
#hero.hero-v3 .ok{color:#4ade80}#hero.hero-v3 .due{color:#fbbf24}
#hero.hero-v3 .l3-phone{margin:0 auto;width:200px;border-radius:30px;border:1px solid rgba(255,255,255,.14);background:#07090d;padding:14px 12px 16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
#hero.hero-v3 .l3-phone .notch{width:60px;height:6px;border-radius:6px;background:#1a1f28;margin:0 auto 14px}
#hero.hero-v3 .l3-phone .pc{border-radius:12px;background:#10141c;padding:10px 12px;font-size:12px;color:#c9d1dd;margin-bottom:8px}
#hero.hero-v3 .l3-phone .pc b{display:block;color:#fff;font-size:13px}
#hero.hero-v3 .l3-phone .pbtn{border-radius:10px;background:#4ade80;color:#04210f;text-align:center;font-weight:700;font-size:12.5px;padding:10px}
#hero.hero-v3 .l3-quote{border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);padding:16px 18px;font-size:13.5px}
#hero.hero-v3 .l3-quote .r{display:flex;justify-content:space-between;padding:6px 0;color:#a1a8b5}
#hero.hero-v3 .l3-quote .r b{color:#fff}
#hero.hero-v3 .l3-quote .acts{display:flex;gap:8px;margin-top:12px}
#hero.hero-v3 .l3-quote .acts span{flex:1;text-align:center;border-radius:10px;padding:9px;font-weight:600;font-size:12.5px;border:1px solid rgba(255,255,255,.12);color:#c9d1dd}
#hero.hero-v3 .l3-quote .acts span.y{background:#fff;color:#000;border-color:#fff}
#hero.hero-v3 .l3-money{display:flex;align-items:flex-end;gap:10px;height:150px}
#hero.hero-v3 .l3-money div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;height:100%}
#hero.hero-v3 .l3-money i{display:block;border-radius:5px;transform-origin:bottom;transform:scaleY(0);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
#hero.hero-v3 .l3-rv.in .l3-money i{transform:scaleY(1)}
#hero.hero-v3 .l3-money i.in{background:linear-gradient(180deg,#5ee0ff,#4f8cff)}
#hero.hero-v3 .l3-money i.out{background:rgba(255,255,255,.12)}
#hero.hero-v3 .l3-money small{font-size:11px;color:#6b7383;text-align:center}
#hero.hero-v3 .l3-audit{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
#hero.hero-v3 .l3-audit div{border-left:2px solid rgba(94,224,255,.35);padding:4px 0 4px 14px;font-size:13px;color:#a1a8b5;line-height:1.5}
#hero.hero-v3 .l3-audit b{display:block;color:#fff;font-weight:600}
#hero.hero-v3 .l3-audit time{display:block;font-size:11.5px;color:#6b7383;margin-top:2px}
/* roles */
#hero.hero-v3 .l3-roles{margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
#hero.hero-v3 .l3-role{border-top:1px solid rgba(255,255,255,.14);padding-top:24px}
#hero.hero-v3 .l3-role svg{width:28px;height:28px;stroke:#5ee0ff;fill:none;stroke-width:1.6}
#hero.hero-v3 .l3-role b{display:block;margin-top:18px;font-size:20px;color:#fff;letter-spacing:-.02em}
#hero.hero-v3 .l3-role span{display:block;margin-top:8px;font-size:15px;line-height:1.55;color:#8b93a1}
/* security */
#hero.hero-v3 .l3-sec2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,120px);align-items:center}
#hero.hero-v3 .l3-checks{display:grid;gap:0}
#hero.hero-v3 .l3-checks div{display:flex;gap:16px;padding:22px 0;border-top:1px solid rgba(255,255,255,.08);font-size:16px;color:#c9d1dd;line-height:1.5}
#hero.hero-v3 .l3-checks div:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
#hero.hero-v3 .l3-checks svg{flex:none;width:22px;height:22px;stroke:#4ade80;fill:none;stroke-width:2;margin-top:1px}
#hero.hero-v3 .l3-checks b{color:#fff;font-weight:600}
/* final cta + footer */
#hero.hero-v3 .l3-final{position:relative;z-index:1;text-align:center;padding:clamp(120px,18vh,220px) 0 clamp(100px,14vh,170px);overflow:hidden}
#hero.hero-v3 .l3-final:before{content:"";position:absolute;left:50%;bottom:-40%;width:1200px;height:800px;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(79,140,255,.28),transparent 70%);pointer-events:none}
#hero.hero-v3 .l3-final .l3-h2{margin:0 auto;max-width:none;font-size:clamp(44px,7vw,128px)}
#hero.hero-v3 .l3-final .l3-h2 em{font-style:normal;background:linear-gradient(90deg,#5ee0ff,#4f8cff 55%,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
#hero.hero-v3 .l3-final .l3-ctas{position:relative}
#hero.hero-v3 .l3-foot{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.08);padding:28px 0 36px;font-size:12.5px;color:#6b7383}
#hero.hero-v3 .l3-foot .l3-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:1100px){
 #hero.hero-v3 .l3-links{display:none}#hero.hero-v3 .l3-navcta{margin-left:auto}
 #hero.hero-v3 .l3-app{grid-template-columns:1fr}#hero.hero-v3 .l3-side{display:none}
 #hero.hero-v3 .l3-tiles{grid-template-columns:repeat(3,1fr)}#hero.hero-v3 .l3-tile:nth-child(n+4){display:none}
 #hero.hero-v3 .c7,#hero.hero-v3 .c5{grid-column:span 12}#hero.hero-v3 .c4{grid-column:span 6}
 #hero.hero-v3 .l3-roles{grid-template-columns:1fr 1fr}#hero.hero-v3 .l3-sec2{grid-template-columns:1fr}
}
@media(max-width:720px){
 #hero.hero-v3 .l3-navcta .l3-btn:not(.pri){display:none}#hero.hero-v3 .l3-brand small{display:none}#hero.hero-v3 .l3-nav .l3-in{gap:12px}
 #hero.hero-v3 .l3-cols{grid-template-columns:1fr}#hero.hero-v3 .l3-cols .l3-panel+.l3-panel{display:none}
 #hero.hero-v3 .l3-tr{grid-template-columns:64px 1fr 92px}#hero.hero-v3 .l3-tr>:nth-child(3),#hero.hero-v3 .l3-tr>:nth-child(4){display:none}
 #hero.hero-v3 .l3-search{display:none}#hero.hero-v3 .l3-url{padding:5px 18px}
 #hero.hero-v3 .l3-flow{grid-template-columns:1fr 1fr;row-gap:34px}#hero.hero-v3 .l3-flow:before,#hero.hero-v3 .l3-flow:after{display:none}
 #hero.hero-v3 .c4{grid-column:span 12}#hero.hero-v3 .l3-card{padding:24px;min-height:0}
 #hero.hero-v3 .l3-ring{flex-direction:column;align-items:stretch}#hero.hero-v3 .l3-ring svg{margin:0 auto}
 #hero.hero-v3 .l3-audit{grid-template-columns:1fr 1fr}#hero.hero-v3 .l3-roles{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
 #hero.hero-v3 .l3-fade,#hero.hero-v3 .l3-rv{opacity:1;transform:none;animation:none;transition:none}
 #hero.hero-v3 .l3-marq div,#hero.hero-v3 .l3-feed .f{animation:none}
 #hero.hero-v3 .l3-win{transform:none}
}

/* ===== SHELL V2 - the simpler look (12 Oct 2026, Jamie; flag shell_v2) =====
   PRESENTATION ONLY. The menu is the same nav.tabs rail, docked open on the left
   on a desktop (phones keep the pop-out MENU handle). Nothing here hides a tab
   or a button that the classic look shows, except the header counter strip for
   office users - the same counters are the clickable tiles on Dashboard > Overview. */
@media (min-width:821px){
  body.shell-v2 nav.tabs.asrail{top:0!important;bottom:0!important;width:252px!important;transform:none!important;visibility:visible!important;
    z-index:40!important;background:#0b1120!important;border-right:1px solid rgba(255,255,255,.07)!important;box-shadow:none!important;
    padding:0 10px 28px!important;border-radius:0!important;margin:0!important;gap:1px!important}
  body.shell-v2 nav.tabs.asrail::before{content:"OCFM CAFM";display:block;position:sticky;top:0;z-index:2;background:#0b1120;
    padding:20px 10px 16px;margin:0 -10px 6px;font:700 15px/1.2 Inter,system-ui,sans-serif;letter-spacing:-.01em;color:#fff;
    border-bottom:1px solid rgba(255,255,255,.06)}
  body.shell-v2 #sidenav-handle,body.shell-v2 #sidenav-scrim{display:none!important}
  body.shell-v2 header,body.shell-v2 main,body.shell-v2 #tabs-anchor{margin-left:252px}
  body.shell-v2 main{max-width:none;padding:24px 28px 70px}
}
/* the rail itself (any width) */
body.shell-v2 nav.tabs.asrail button[data-tab]{font:500 13.5px/1.35 Inter,system-ui,sans-serif!important;padding:8px 12px!important;border-radius:8px!important;
  color:#c3cbd8!important;background:transparent!important;box-shadow:none!important;transform:none!important;flex-wrap:nowrap!important}
/* rail z-index 40: above the page (main 1, header 30) but BELOW pop-ups (.modal-overlay 50) - a docked
   menu must never be clickable over an open job card (found in the 12 Oct walk at 60). */
body.shell-v2 nav.tabs.asrail button[data-tab]:hover{background:rgba(255,255,255,.05)!important;color:#fff!important}
body.shell-v2 nav.tabs.asrail button[data-tab].active{background:rgba(94,224,255,.11)!important;color:#fff!important;font-weight:600!important;box-shadow:inset 3px 0 0 #5ee0ff!important}
body.shell-v2 nav.tabs.asrail button[data-tab] svg{opacity:.75}
body.shell-v2 nav.tabs.asrail .navgrp-head{background:transparent!important;color:#7d889b!important;font:600 11px/1.2 Inter,system-ui,sans-serif!important;
  letter-spacing:.08em!important;padding:14px 12px 6px!important;margin-top:4px!important;border-radius:0!important}
body.shell-v2 nav.tabs.asrail .navgrp-head:hover{color:#c3cbd8!important}
body.shell-v2 nav.tabs.asrail::-webkit-scrollbar{width:6px}
body.shell-v2 nav.tabs.asrail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:6px}
/* top bar: flat, quiet, same controls */
body.shell-v2 header{background:#0b1120!important;box-shadow:none!important;border-bottom:1px solid rgba(255,255,255,.07);padding:10px 24px!important;min-height:60px}
body.shell-v2 header .logo,body.shell-v2 header .logo+div{display:none}
body.shell-v2.sv2-office header .hstats{display:none}
/* calmer page surfaces */
body.shell-v2 .card{border-radius:14px;box-shadow:0 0 0 1px rgba(18,59,99,.08)}
html[data-theme="dark"] body.shell-v2 .card{background:rgba(13,20,33,.92);backdrop-filter:none;box-shadow:0 0 0 1px rgba(255,255,255,.07)}
html[data-theme="dark"] body.shell-v2{background:#070a10}
html[data-theme="dark"]:has(body.shell-v2){background-image:none;background-color:#070a10}
/* dashboard tabs (office) */
body.shell-v2 .sv2-dtabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:0 0 18px;overflow-x:auto}
body.shell-v2 .sv2-dtabs button{font:600 13.5px Inter,system-ui,sans-serif;padding:11px 16px;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--muted);cursor:pointer;white-space:nowrap}
body.shell-v2 .sv2-dtabs button:hover{color:var(--text)}
body.shell-v2 .sv2-dtabs button.on{color:var(--text);border-bottom-color:var(--bright)}
body.shell-v2 #tab-dashboard[data-sv2="ov"] [data-sv2p]:not([data-sv2p~="ov"]),
body.shell-v2 #tab-dashboard[data-sv2="money"] [data-sv2p]:not([data-sv2p~="money"]),
body.shell-v2 #tab-dashboard[data-sv2="wid"] [data-sv2p]:not([data-sv2p~="wid"]),
body.shell-v2 #tab-dashboard[data-sv2="perf"] [data-sv2p]:not([data-sv2p~="perf"]){display:none!important}
body.shell-v2 #tab-dashboard[data-sv2="money"] [data-sv2p="ov money"]>h2{display:none}
body.shell-v2 #tab-dashboard[data-sv2="money"] #dv2-grid,body.shell-v2 #tab-dashboard[data-sv2="perf"] #dv2-grid{display:grid!important;grid-template-columns:1fr!important;gap:16px}
body.shell-v2 #tab-dashboard[data-sv2="wid"] #dv2-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr))!important;gap:16px;align-items:start}
body.shell-v2 #tab-dashboard:is([data-sv2="money"],[data-sv2="wid"],[data-sv2="perf"]) .dv2-col{display:contents!important}
body.shell-v2 #tab-dashboard[data-sv2="wid"] #dv2-grid>*,body.shell-v2 #tab-dashboard[data-sv2="wid"] .dv2-col>*{margin:0!important}

/* ===== SHELL V3 (12 Oct 2026, mock v3 approved) - presentation only, under body.shell-v2 ===== */
#sv3-nav{display:none}
@media (min-width:821px){
  body.sv3-nav-on nav.tabs.asrail{display:none!important}
  body.sv3-nav-on #sv3-nav{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:252px;z-index:40;background:#0b1120;border-right:1px solid rgba(255,255,255,.07);
    font-family:Inter,system-ui,sans-serif;color:#c3cbd8}
}
#sv3-nav .sv3-brand{display:flex;align-items:center;gap:10px;padding:18px 16px 14px;font-weight:700;font-size:15px;color:#fff;letter-spacing:-.01em;border-bottom:1px solid rgba(255,255,255,.06)}
#sv3-nav .sv3-brand small{display:block;font-weight:500;font-size:11.5px;color:#7d889b;margin-top:2px}
#sv3-nav .sv3-mark{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#000;background:linear-gradient(135deg,#fff,#9fdcff);flex:none}
#sv3-nav .sv3-scroll{flex:1;overflow-y:auto;padding:10px 10px 28px}
#sv3-nav .sv3-scroll::-webkit-scrollbar{width:6px}#sv3-nav .sv3-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:6px}
#sv3-nav .sv3-it,#sv3-nav .sv3-gh{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;line-height:1.3;user-select:none;color:#c3cbd8}
#sv3-nav .sv3-it:hover,#sv3-nav .sv3-gh:hover{background:rgba(255,255,255,.05);color:#fff}
#sv3-nav .sv3-it.on{background:rgba(94,224,255,.11);color:#fff;font-weight:600}
#sv3-nav .sv3-it svg,#sv3-nav .sv3-ic{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;opacity:.85}
#sv3-nav .sv3-t{flex:1;min-width:0}
#sv3-nav .sv3-n{font-size:11px;font-weight:600;color:#5ee0ff;background:rgba(94,224,255,.12);padding:1px 8px;border-radius:999px;flex:none}
#sv3-nav .sv3-n.red{color:#ff8a8a;background:rgba(255,122,122,.14)}
#sv3-nav .sv3-star{opacity:0;font-size:12px;color:#7d889b;flex:none;padding:0 2px}
#sv3-nav .sv3-it:hover .sv3-star,#sv3-nav .sv3-star.on{opacity:1}#sv3-nav .sv3-star.on{color:#5ee0ff}
#sv3-nav .sv3-chev{width:14px;height:14px;stroke:#7d889b;fill:none;stroke-width:2;transition:transform .2s;flex:none}
#sv3-nav .sv3-grp.open .sv3-chev{transform:rotate(90deg)}
#sv3-nav .sv3-grp.has-on>.sv3-gh{color:#fff}
#sv3-nav .sv3-sub{display:none;margin:2px 0 6px 18px;padding-left:10px;border-left:1px solid rgba(255,255,255,.08)}
#sv3-nav .sv3-grp.open .sv3-sub{display:block}
#sv3-nav .sv3-it.sub{font-size:13px;padding:6px 10px;color:#9aa4b4}#sv3-nav .sv3-it.sub.on{color:#fff}
#sv3-nav .sv3-sep{height:1px;background:rgba(255,255,255,.07);margin:10px 8px}
/* dashboard tiles - mock style */
body.shell-v2 .dv2-tiles{gap:12px!important}
body.shell-v2 .dv2-tile{border-radius:14px!important;padding:14px 16px!important;text-align:left!important;box-shadow:none!important;border:1px solid rgba(18,59,99,.10)!important}
html[data-theme="dark"] body.shell-v2 .dv2-tile{background:#10141c!important;border-color:rgba(255,255,255,.07)!important}
body.shell-v2 .dv2-tile .dv2-v{font:700 28px/1.1 Inter,system-ui,sans-serif!important;letter-spacing:-.03em}
body.shell-v2 .dv2-tile .dv2-l{font:500 12.5px/1.3 Inter,system-ui,sans-serif!important;text-transform:none!important;letter-spacing:0!important;opacity:.75;margin-top:4px;display:block}
body.shell-v2 .dv2-tile.bad .dv2-v{color:#ff7a7a}
/* widgets: even grid; the three charts sit side by side */
body.shell-v2 #tab-dashboard[data-sv2="wid"] #dv2-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
body.shell-v2 #tab-dashboard[data-sv2="wid"] #dash-charts{order:10;grid-column:1/-1;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
body.shell-v2 #tab-dashboard[data-sv2="wid"] #dash-charts>.card{margin:0!important}
@media(max-width:1300px){body.shell-v2 #tab-dashboard[data-sv2="wid"] #dv2-grid,body.shell-v2 #tab-dashboard[data-sv2="wid"] #dash-charts{grid-template-columns:1fr 1fr!important}}
/* tables everywhere - calmer header, more air */
body.shell-v2 main table thead tr,body.shell-v2 .modal table thead tr{background:transparent!important}
body.shell-v2 main table thead th,body.shell-v2 .modal table thead th{background:transparent!important;color:var(--muted)!important;font:600 11px/1.3 Inter,system-ui,sans-serif!important;letter-spacing:.06em;border-bottom:1px solid rgba(127,140,160,.22)!important;padding:10px 10px!important}
body.shell-v2 main table tbody td{padding:10px 10px!important;font-size:13.2px;border-bottom:1px solid rgba(127,140,160,.14)!important}
body.shell-v2 main table tbody tr:hover td{background:rgba(94,224,255,.04)}
body.shell-v2 .sv3-cols{display:flex;align-items:center;gap:6px;margin:0 0 10px;font:600 12px Inter,system-ui,sans-serif;color:var(--muted)}
body.shell-v2 .sv3-cols button{font:600 12px Inter,system-ui,sans-serif;padding:5px 11px;border-radius:999px;border:1px solid rgba(127,140,160,.35);background:transparent;color:var(--text);cursor:pointer}
body.shell-v2 .sv3-cols button.on{background:var(--text);color:var(--white);border-color:var(--text)}
/* task card */
body.shell-v2 #modal-rec .modal{max-width:1120px!important;border-radius:18px;overflow:hidden;border:1px solid rgba(127,140,160,.22)}
body.shell-v2 #modal-rec .modal-head{padding:22px 26px 18px!important}
body.shell-v2 #modal-rec #rec-title{font-size:21px!important;letter-spacing:-.02em}
body.shell-v2 .sv3-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));border-top:1px solid rgba(127,140,160,.18);border-bottom:1px solid rgba(127,140,160,.18)}
body.shell-v2 .sv3-fact{padding:12px 18px;border-right:1px solid rgba(127,140,160,.14)}
body.shell-v2 .sv3-fact:last-child{border-right:0}
body.shell-v2 .sv3-fact span{display:block;font:600 11px Inter,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
body.shell-v2 .sv3-fact b{display:block;margin-top:5px;font:600 14.5px Inter,system-ui,sans-serif;color:var(--text)}
body.shell-v2 .sv3-fact small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
body.shell-v2 .sv3-fact.bad b{color:#ef4444}
html[data-theme="dark"] body.shell-v2 .sv3-fact.bad b{color:#ff7a7a}
body.shell-v2 #rec-tabs{display:flex;gap:2px;padding:0 18px!important;border-bottom:1px solid rgba(127,140,160,.2);background:transparent!important;flex-wrap:wrap}
body.shell-v2 #rec-tabs button{background:transparent!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;box-shadow:none!important;
  font:600 13.5px Inter,system-ui,sans-serif!important;color:var(--muted)!important;padding:13px 12px!important;margin-bottom:-1px}
body.shell-v2 #rec-tabs button.on{color:var(--text)!important;border-bottom-color:var(--bright)!important}
body.shell-v2 #modal-rec .modal-body{padding:20px 26px!important}
body.shell-v2 #rec-pane-details>div:not(.hidden):not(#rec-fields){border-radius:12px}
html[data-theme="dark"] body.shell-v2 #rec-timeline>div[style*="F6F8FA"]{background:rgba(255,255,255,.03)!important;border:1px solid rgba(255,255,255,.08)}
html[data-theme="dark"] body.shell-v2 #rec-timeline>div[style*="F6F8FA"] *{color:inherit}
body.shell-v2 #modal-rec .modal-foot{padding:14px 26px!important;border-top:1px solid rgba(127,140,160,.18)}
body.shell-v2 #modal-rec label{font-weight:600;letter-spacing:.02em}
#sv3-nav .sv3-segs{display:inline-flex;gap:3px;flex:none}
#sv3-nav .sv3-segs i{font-style:normal;font-size:10.5px;font-weight:700;color:#fff;min-width:16px;height:16px;line-height:16px;text-align:center;border-radius:8px;padding:0 4px;opacity:.9}
/* SV3 LIFT (12 Oct 2026, Jamie: "writing a bit more stand out, but not too much ... number colouring feels a bit dull") - colour/weight only */
#sv3-nav .sv3-it,#sv3-nav .sv3-gh{color:#e3e8f0;font-weight:500}
#sv3-nav .sv3-it.sub{color:#c8d0dc}
#sv3-nav .sv3-it svg,#sv3-nav .sv3-ic{opacity:1}
#sv3-nav .sv3-brand small{color:#9ba6b8}
#sv3-nav .sv3-chev{stroke:#a9b3c3}
#sv3-nav .sv3-sub{border-left-color:rgba(255,255,255,.14)}
#sv3-nav .sv3-n{color:#8ef3ff;background:rgba(94,224,255,.2);font-weight:700}
#sv3-nav .sv3-n.red{color:#fff;background:#e5484d}
#sv3-nav .sv3-segs i{opacity:1;font-weight:800;filter:saturate(1.35) brightness(1.1)}
html[data-theme="dark"] body.shell-v2 main table tbody td{color:#e4e9f1}
html[data-theme="dark"] body.shell-v2 main table thead th{color:#a9b3c4!important}
/* SV3 LIGHT MODE LIFT (12 Oct 2026, Jamie: "light version ... a bit hard to see some text, boxes not outlined very well, kind of blends in") */
html:not([data-theme="dark"]) body.shell-v2{background-color:#eef2f7}
html:not([data-theme="dark"]) body.shell-v2 .card{background:#fff;border:1px solid #cfd8e3;box-shadow:0 1px 3px rgba(15,23,42,.07)!important}
html:not([data-theme="dark"]) body.shell-v2 .dv2-tile{background:#fff!important;border:1px solid #cfd8e3!important;box-shadow:0 1px 2px rgba(15,23,42,.06)!important}
html:not([data-theme="dark"]) body.shell-v2 .dv2-tile .dv2-l{opacity:1;color:#475467!important}
html:not([data-theme="dark"]) body.shell-v2 .sum-card{border:1px solid #cfd8e3!important;background:#fff!important}
html:not([data-theme="dark"]) body.shell-v2 main table thead th,html:not([data-theme="dark"]) body.shell-v2 .modal table thead th{color:#475467!important;border-bottom:1px solid #c3cdd9!important}
html:not([data-theme="dark"]) body.shell-v2 main table tbody td{color:#1d2939;border-bottom:1px solid #e1e7ef!important}
html:not([data-theme="dark"]) body.shell-v2 main .note{color:#5b6677}
html:not([data-theme="dark"]) body.shell-v2 .table-wrap{border:1px solid #cfd8e3;border-radius:12px;background:#fff}
html:not([data-theme="dark"]) body.shell-v2 select,html:not([data-theme="dark"]) body.shell-v2 main input[type="text"],html:not([data-theme="dark"]) body.shell-v2 main input[type="search"]{border-color:#b9c4d2!important;color:#1d2939}
html:not([data-theme="dark"]) body.shell-v2 .sv2-dtabs{border-bottom-color:#cfd8e3}
html:not([data-theme="dark"]) body.shell-v2 .sv2-dtabs button{color:#5b6677}
html:not([data-theme="dark"]) body.shell-v2 .sv2-dtabs button.on{color:#101828}
html:not([data-theme="dark"]) body.shell-v2 .sv3-facts,html:not([data-theme="dark"]) body.shell-v2 .sv3-fact{border-color:#d5dde8}
html:not([data-theme="dark"]) body.shell-v2 .sv3-fact span{color:#5b6677}
/* MENU COUNTERS v2 (12 Oct 2026): blue = a count, green/amber/red = SLA. Red only ever means late. */
#sv3-nav .sv3-segs.nc i{opacity:1;font-weight:800;filter:none;color:#fff}
#sv3-nav .nc-tot{background:#2563eb}
#sv3-nav .nc-ok{background:#16a34a}
#sv3-nav .nc-amb{background:#d97706}
#sv3-nav .nc-red{background:#dc2626}
#sv3-nav .nc-q1{background:#0891b2}
#sv3-nav .nc-q2{background:#7c3aed}
#sv3-nav .nc-q3{background:#db2777}
/* SUPPLIER RANK (12 Oct 2026): the real grade badge after the name, name tinted to match */
.met.sup-rank{font-size:9px;padding:1px 6px;margin-left:5px;vertical-align:1px;border-radius:999px;white-space:nowrap}
.met-oc{background:linear-gradient(135deg,#7e22ce,#c026d3);color:#fff}
.supn-diamond{color:#8fd6ff!important}.supn-platinum{color:#e6ebf2!important}.supn-gold{color:#f2c94c!important}
.supn-silver{color:#aeb6c1!important}.supn-bronze{color:#d98a52!important}.supn-oc{color:#e879f9!important}
html:not([data-theme="dark"]) .supn-diamond{color:#0369a1!important}
html:not([data-theme="dark"]) .supn-platinum{color:#475569!important}
html:not([data-theme="dark"]) .supn-gold{color:#a16207!important}
html:not([data-theme="dark"]) .supn-silver{color:#6b7280!important}
html:not([data-theme="dark"]) .supn-bronze{color:#9a3412!important}
html:not([data-theme="dark"]) .supn-oc{color:#a21caf!important}

/* SEARCH ALL 12 Oct 2026 - the finance bar's Search-all box (finq) covers every field these older single-screen boxes searched, and more; hidden so there is one box, not two. Still in the page so the code reading them gets ''. */
#ai-search,#ia-search,#po-search{display:none!important}

/* PORTAL PREVIEW 12 Oct 2026 - previewing a supplier/client must look exactly like their login: office-only extras injected before the switch are hidden, and the office home hero only shows with home-v2 on. */
body:not(.home-v2) #dv2-hero,body.pv-portal #dv2-hero,body.pv-portal [data-testchip],body.pv-portal #sav-open{display:none!important}

/* ===== UI v4 (13 Oct 2026, mock v4 approved - Jamie: "98% there", light a touch too bright, lines need to box things off) =====
   Visual only. Everything is scoped to html.ui-v4, switched on by feature flag ui_v4 (applyRoleUI). Remove the class = exactly the old look.
   One accent (blue), neutral surfaces, colour only for status, no glow/starfield. Work queues and every menu item untouched. */
html.ui-v4{
  --v4bg:#e8ecf2;--v4s1:#fbfcfd;--v4s2:#f1f4f8;--v4s3:#e6ebf1;--v4line:#cdd5e0;--v4line2:#b6c1cf;
  --v4tx:#0f1724;--v4tx2:#3f4a5c;--v4tx3:#667185;--v4acc:#3b74e6;--v4accbg:rgba(59,116,230,.11);
  --v4ok:#15803d;--v4warn:#b45309;--v4bad:#c0262d;--v4okbg:rgba(21,128,61,.10);--v4warnbg:rgba(180,83,9,.10);--v4badbg:rgba(192,38,45,.09);
  --white:var(--v4s1);--card:var(--v4s1);--offwhite:var(--v4s2);--border:var(--v4line);--text:var(--v4tx);--muted:var(--v4tx3);
  --accent:var(--v4acc);--bright:var(--v4acc);--accent2:var(--v4acc);
  --shadow:0 1px 2px rgba(16,24,40,.06);--shadow-md:0 1px 2px rgba(16,24,40,.06),0 4px 12px rgba(16,24,40,.05);--glow:0 0 0 3px rgba(59,116,230,.18);
  background:var(--v4bg)!important;background-image:none!important;
}
html.ui-v4[data-theme="dark"]{
  --v4bg:#0b0f17;--v4s1:#111723;--v4s2:#161d2b;--v4s3:#1c2434;--v4line:#273145;--v4line2:#323e55;
  --v4tx:#e7ecf3;--v4tx2:#a9b4c6;--v4tx3:#7a8699;--v4acc:#4f8cff;--v4accbg:rgba(79,140,255,.14);
  --v4ok:#34d399;--v4warn:#fbbf24;--v4bad:#f87171;--v4okbg:rgba(52,211,153,.12);--v4warnbg:rgba(251,191,36,.12);--v4badbg:rgba(248,113,113,.12);
  --forest:var(--v4tx);--green:var(--v4ok);--danger:var(--v4bad);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset;--shadow-md:0 1px 0 rgba(255,255,255,.03) inset,0 8px 24px rgba(0,0,0,.22);
}
html.ui-v4 body,html.ui-v4 body.shell-v2{background:var(--v4bg)!important;color:var(--v4tx);font-feature-settings:"cv11","ss01","tnum"}
html.ui-v4 #fx-canvas{display:none!important}
/* surfaces */
html.ui-v4 .card,html.ui-v4 .sum-card,html.ui-v4 body.shell-v2 .card,html.ui-v4 body.shell-v2 .sum-card,html.ui-v4[data-theme="dark"] .card,html.ui-v4[data-theme="dark"] .sum-card{
  background:var(--v4s1)!important;border:1px solid var(--v4line)!important;box-shadow:var(--shadow-md)!important;backdrop-filter:none!important;border-radius:12px}
html.ui-v4 .sum-card .v,html.ui-v4[data-theme="dark"] .sum-card .v{color:var(--v4tx)!important;text-shadow:none!important;letter-spacing:-.02em}
html.ui-v4 .sum-card .l{color:var(--v4tx3)!important;text-transform:none!important;letter-spacing:0!important;font-weight:500}
html.ui-v4 body.shell-v2 .dv2-tile,html.ui-v4[data-theme="dark"] body.shell-v2 .dv2-tile{background:var(--v4s1)!important;border:1px solid var(--v4line)!important;box-shadow:var(--shadow)!important}
html.ui-v4 body.shell-v2 .dv2-tile .dv2-l{color:var(--v4tx3)!important;opacity:1}
html.ui-v4 body.shell-v2 .dv2-tile.bad .dv2-v{color:var(--v4bad)}
html.ui-v4 .dv2-hero,html.ui-v4 #dv2-hero{background:transparent!important;border:0!important;box-shadow:none!important}
html.ui-v4 .hs{background:var(--v4s1)!important;border:1px solid var(--v4line)!important;box-shadow:none!important}
html.ui-v4 .hs .hs-val{color:var(--v4tx)!important;text-shadow:none!important}
html.ui-v4 .hs .hs-val.bad{color:var(--v4bad)!important}
html.ui-v4 .hs .hs-lbl{color:var(--v4tx3)!important}
/* header / top bar */
html.ui-v4 header{background:var(--v4s1)!important;color:var(--v4tx)!important;border-bottom:1px solid var(--v4line)!important;box-shadow:none!important}
html.ui-v4 header *{text-shadow:none!important}
html.ui-v4 header .btn,html.ui-v4 header select,html.ui-v4 header button{background:var(--v4s2)!important;color:var(--v4tx)!important;border:1px solid var(--v4line)!important;box-shadow:none!important}
html.ui-v4 header input{background:var(--v4s2)!important;color:var(--v4tx)!important;border:1px solid var(--v4line)!important}
/* sidebar (Work queues and every group unchanged - colours only) */
html.ui-v4 body.sv3-nav-on #sv3-nav{background:var(--v4s1)!important;border-right:1px solid var(--v4line)!important;color:var(--v4tx2)}
html.ui-v4 #sv3-nav .sv3-brand{color:var(--v4tx);border-bottom-color:var(--v4line)}
html.ui-v4 #sv3-nav .sv3-brand small{color:var(--v4tx3)}
html.ui-v4 #sv3-nav .sv3-mark{background:linear-gradient(135deg,#4f8cff,#7c5cff);color:#fff}
html.ui-v4 #sv3-nav .sv3-it,html.ui-v4 #sv3-nav .sv3-gh{color:var(--v4tx2);font-weight:500}
html.ui-v4 #sv3-nav .sv3-it.sub{color:var(--v4tx2)}
html.ui-v4 #sv3-nav .sv3-it:hover,html.ui-v4 #sv3-nav .sv3-gh:hover{background:var(--v4s3);color:var(--v4tx)}
html.ui-v4 #sv3-nav .sv3-it.on,html.ui-v4 #sv3-nav .sv3-it.sub.on{background:var(--v4accbg);color:var(--v4tx);font-weight:600}
html.ui-v4 #sv3-nav .sv3-it.on svg{color:var(--v4acc)}
html.ui-v4 #sv3-nav .sv3-grp.has-on>.sv3-gh{color:var(--v4tx)}
html.ui-v4 #sv3-nav .sv3-sub{border-left-color:var(--v4line)}
html.ui-v4 #sv3-nav .sv3-sep{background:var(--v4line)}
html.ui-v4 #sv3-nav .sv3-chev{stroke:var(--v4tx3)}
html.ui-v4 #sv3-nav .sv3-n{color:var(--v4tx3);background:transparent;font-weight:600}
html.ui-v4 #sv3-nav .sv3-n.red{color:#fff;background:#e5484d}
html.ui-v4 #sv3-nav .nc-tot{background:var(--v4s3);color:var(--v4tx2)!important}
html.ui-v4 #sv3-nav .sv3-segs i{min-width:18px;height:18px;line-height:18px;border-radius:9px}
html.ui-v4 #sv3-nav .sv3-scroll::-webkit-scrollbar-thumb{background:var(--v4line2)}
/* tables */
html.ui-v4 .table-wrap,html.ui-v4[data-theme="dark"] .table-wrap,html.ui-v4 body.shell-v2 .table-wrap{background:var(--v4s1)!important;border:1px solid var(--v4line)!important;border-radius:12px;box-shadow:none!important}
html.ui-v4 body.shell-v2 main table thead th,html.ui-v4 body.shell-v2 .modal table thead th,html.ui-v4 main table thead th{
  background:var(--v4s1)!important;color:var(--v4tx3)!important;font:600 11.5px/1.3 Inter,system-ui,sans-serif!important;letter-spacing:.02em!important;text-transform:none!important;border-bottom:1px solid var(--v4line2)!important}
html.ui-v4 body.shell-v2 main table tbody td,html.ui-v4 main table tbody td{color:var(--v4tx)!important;border-bottom:1px solid var(--v4line)!important}
html.ui-v4 tbody tr:nth-child(even),html.ui-v4[data-theme="dark"] tbody tr:nth-child(even){background:transparent!important}
html.ui-v4 tbody tr:hover td,html.ui-v4[data-theme="dark"] tbody tr:hover,html.ui-v4[data-theme="dark"] tbody tr:nth-child(even):hover{background:var(--v4s2)!important}
html.ui-v4 main .note,html.ui-v4 .modal .note{color:var(--v4tx3)}
/* status pills: dot + word, no shouting caps */
html.ui-v4 .badge{font-size:11.5px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;padding:2px 9px 2px 8px!important;border-radius:999px!important;
  background:var(--v4s3)!important;color:var(--v4tx2)!important;box-shadow:none!important;border:0!important;display:inline-flex;align-items:center;gap:6px}
html.ui-v4 .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
html.ui-v4 .badge.ok,html.ui-v4 .badge.success{background:var(--v4okbg)!important;color:var(--v4ok)!important}
html.ui-v4 .badge.bad,html.ui-v4 .badge.danger{background:var(--v4badbg)!important;color:var(--v4bad)!important}
html.ui-v4 .badge.pending,html.ui-v4 .badge.warn{background:var(--v4warnbg)!important;color:var(--v4warn)!important}
html.ui-v4 .badge.info{background:var(--v4accbg)!important;color:var(--v4acc)!important}
html.ui-v4 .disc-tag{background:var(--v4s3)!important;color:var(--v4tx2)!important;border:0!important}
/* buttons and fields */
html.ui-v4 .btn{border-radius:8px;box-shadow:none!important;text-shadow:none!important;font-weight:600}
html.ui-v4 .btn-primary{background:var(--v4acc)!important;color:#fff!important;border:1px solid var(--v4acc)!important}
html.ui-v4 .btn-primary:hover{filter:brightness(1.07)}
html.ui-v4 .btn-outline{background:var(--v4s1)!important;color:var(--v4tx)!important;border:1px solid var(--v4line2)!important}
html.ui-v4 .btn-outline:hover{background:var(--v4s2)!important}
html.ui-v4 input:not([type=checkbox]):not([type=radio]),html.ui-v4 select,html.ui-v4 textarea,
html.ui-v4[data-theme="dark"] input:not([type=checkbox]):not([type=radio]),html.ui-v4[data-theme="dark"] select,html.ui-v4[data-theme="dark"] textarea{
  background:var(--v4s2)!important;color:var(--v4tx)!important;border:1px solid var(--v4line)!important;border-radius:8px;box-shadow:none}
html.ui-v4 input:focus,html.ui-v4 select:focus,html.ui-v4 textarea:focus{border-color:var(--v4acc)!important;box-shadow:0 0 0 3px var(--v4accbg)!important;outline:none}
/* dashboard sub-tabs */
html.ui-v4 body.shell-v2 .sv2-dtabs{border-bottom-color:var(--v4line)}
html.ui-v4 body.shell-v2 .sv2-dtabs button{color:var(--v4tx3)}
html.ui-v4 body.shell-v2 .sv2-dtabs button.on{color:var(--v4tx);border-bottom-color:var(--v4acc)}
html.ui-v4 body.shell-v2 .sv3-cols button.on{background:var(--v4tx);color:var(--v4s1);border-color:var(--v4tx)}
/* modals: calm surface */
html.ui-v4 .modal,html.ui-v4[data-theme="dark"] .modal{background:var(--v4s1)!important;color:var(--v4tx);border:1px solid var(--v4line)!important}
html.ui-v4 .modal-head,html.ui-v4 .modal-foot{border-color:var(--v4line)!important}
html.ui-v4 .modal-overlay{background:rgba(8,12,20,.45);backdrop-filter:blur(2px)}
/* job card = right-hand side panel; the list stays underneath */
html.ui-v4 #modal-rec.modal-overlay{justify-content:flex-end!important;align-items:stretch!important;padding:0!important}
html.ui-v4 body.shell-v2 #modal-rec .modal,html.ui-v4 #modal-rec .modal{max-width:min(940px,100vw)!important;width:min(940px,100vw)!important;min-height:100vh;border-radius:0!important;
  border:0!important;border-left:1px solid var(--v4line)!important;box-shadow:-24px 0 48px rgba(0,0,0,.28)!important;animation:v4slide .22s cubic-bezier(.2,.8,.2,1)}
@keyframes v4slide{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
html.ui-v4 #modal-rec .modal-foot{position:sticky;bottom:0;background:var(--v4s1);z-index:2}
html.ui-v4 body.shell-v2 .sv3-facts,html.ui-v4 body.shell-v2 .sv3-fact{border-color:var(--v4line)!important}
html.ui-v4 body.shell-v2 #rec-tabs{border-bottom-color:var(--v4line)}
html.ui-v4 body.shell-v2 #rec-tabs button.on{border-bottom-color:var(--v4acc)!important}
/* metal grade badges: smaller tags, same colours */
html.ui-v4 .met.sup-rank{font-size:9.5px;padding:1px 6px;border-radius:5px;box-shadow:none;animation:none}

/* UI v4 fixes 1 (13 Oct): no leftover accent strip on summary cards; light-mode top bar text and search readable */
html.ui-v4 .sum-card::before,html.ui-v4 .sum-card::after{display:none!important}
html.ui-v4 header :is(div,span,small,b,strong,label,a):not([class*="badge"]):not(.btn-primary){color:inherit}
html.ui-v4 header input::placeholder{color:var(--v4tx3)!important;opacity:1}
html.ui-v4 header svg{color:var(--v4tx2)}
/* 13 Oct (Jamie/Brian): v4 drawer scroll - the side panel was stretched to the screen height with overflow hidden, so on a laptop the lower fields (ETA etc.) could not be reached. Header/tabs/footer stay put, the body scrolls. */
html.ui-v4 #modal-rec .modal{display:flex!important;flex-direction:column;height:100vh;height:100dvh;max-height:100dvh;min-height:0!important}
html.ui-v4 #modal-rec .modal>*{flex:0 0 auto}
html.ui-v4 #modal-rec .modal>.modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* 13 Oct: office-only task actions hidden for PMs (see recTabsBuild) */
.pm-off{display:none!important}

/* 13 Oct (Jamie/Brian): v4 drawer scrollbar - always shown, wide and high-contrast so it can be grabbed with the mouse (no scroll wheel needed). */
html.ui-v4 #modal-rec .modal>.modal-body{overflow-y:scroll!important;scrollbar-width:auto;scrollbar-color:#8b9ab0 rgba(127,140,160,.18);padding-bottom:70px!important}
html.ui-v4 #modal-rec .modal>.modal-body::-webkit-scrollbar{width:16px}
html.ui-v4 #modal-rec .modal>.modal-body::-webkit-scrollbar-track{background:rgba(127,140,160,.18)}
html.ui-v4 #modal-rec .modal>.modal-body::-webkit-scrollbar-thumb{background:#8b9ab0;border-radius:8px;border:3px solid transparent;background-clip:content-box;min-height:40px}
html.ui-v4[data-theme="light"] #modal-rec .modal>.modal-body{scrollbar-color:#7b8799 rgba(0,0,0,.08)}
/* 13 Oct (Jamie): v4 visible scrollbars everywhere - every pop-up, the page itself and wide tables, for every login (office, PM, supplier, client), so nobody needs a scroll wheel. */
html.ui-v4,html.ui-v4 .modal-overlay,html.ui-v4 .table-wrap,html.ui-v4 main{scrollbar-width:auto;scrollbar-color:#8b9ab0 rgba(127,140,160,.18)}
html.ui-v4[data-theme="light"],html.ui-v4[data-theme="light"] .modal-overlay,html.ui-v4[data-theme="light"] .table-wrap,html.ui-v4[data-theme="light"] main{scrollbar-color:#7b8799 rgba(0,0,0,.08)}
html.ui-v4 ::-webkit-scrollbar{width:14px;height:14px}
html.ui-v4 ::-webkit-scrollbar-track{background:rgba(127,140,160,.18)}
html.ui-v4 ::-webkit-scrollbar-thumb{background:#8b9ab0;border-radius:8px;border:3px solid transparent;background-clip:content-box;min-height:40px}
/* 13 Oct (Jamie): v4 fabs clear of the task card - the bug-report and Remi buttons sat on top of Save / Copy etc. With the card open they move to the left of it; on a narrow screen they lift above its footer. */
body:has(#modal-rec.open) #remi-fab,body:has(#modal-rec.open) #fb-fab{right:calc(min(940px,100vw) + 16px)!important}
@media (max-width:1060px){
  body:has(#modal-rec.open) #remi-fab{right:14px!important;bottom:92px!important}
  body:has(#modal-rec.open) #fb-fab{right:22px!important;bottom:156px!important}
}
/* Simple / All - the chosen one is unmistakable */
html.ui-v4 body.shell-v2 .sv3-cols button.on{background:var(--v4acc,#3b82f6)!important;border-color:var(--v4acc,#3b82f6)!important;color:#fff!important}
/* ===== ROWS v5 + LIST WIDGETS (13 Oct 2026) - body.rows-v5 is set only while switch rows_v5 is on ===== */
:root{--v5r:#f87171;--v5a:#fbbf24;--v5g:#4ade80;--v5b:#60a5fa}
html[data-theme="light"]{--v5r:#dc2626;--v5a:#b45309;--v5g:#15803d;--v5b:#2563eb}
body.rows-v5 #jobs-tbody>tr>td,body.rows-v5 #works-tbody>tr>td,body.rows-v5 #quotes-tbody>tr>td{vertical-align:middle}
body.rows-v5 #jobs-tbody>tr[onclick]:hover>td,body.rows-v5 #works-tbody>tr[onclick]:hover>td,body.rows-v5 #quotes-tbody>tr[onclick]:hover>td{background:rgba(127,140,160,.10)!important}
body.rows-v5 tr.v5-r>td:first-child{box-shadow:inset 4px 0 0 var(--v5r)}
body.rows-v5 tr.v5-a>td:first-child{box-shadow:inset 4px 0 0 var(--v5a)}
body.rows-v5 tr.v5-g>td:first-child{box-shadow:inset 4px 0 0 var(--v5g)}
body.rows-v5 tr.v5-x>td:first-child{box-shadow:inset 4px 0 0 rgba(127,140,160,.35)}
body.rows-v5 tr.v5grp>td{font:800 11px Inter,system-ui,sans-serif!important;letter-spacing:.06em;text-transform:uppercase;padding:14px 12px 6px!important;background:transparent!important;border-bottom:1px solid rgba(127,140,160,.18)!important;cursor:default;position:static!important}
body.rows-v5 tr.v5grp-r>td{color:var(--v5r)}body.rows-v5 tr.v5grp-a>td{color:var(--v5a)}body.rows-v5 tr.v5grp-g>td{color:var(--v5g)}body.rows-v5 tr.v5grp-x>td{color:var(--v4tx3,#8a94a6)}
body.rows-v5 .v5gn{display:inline-block;margin-left:6px;font-size:10.5px;border-radius:999px;padding:0 7px;background:rgba(127,140,160,.18);color:var(--v4tx,inherit);letter-spacing:0}
body.rows-v5 .qfz1,body.rows-v5 .jfz1{white-space:nowrap}
body.rows-v5 .qr-scroll .qfz1,body.rows-v5 .grid-fit .jfz1{min-width:124px!important;max-width:124px!important}
.v5due{min-width:150px}
.v5dl{white-space:nowrap;font-size:11px;color:var(--v4tx3,#8a94a6);line-height:1.5}
.v5dl.main{font-size:12.5px;font-weight:700;color:var(--v4tx,inherit)}
.v5rel{font-weight:800;margin-left:3px}.v5rel.r{color:var(--v5r)}.v5rel.a{color:var(--v5a)}.v5rel.g{color:var(--v5g)}
.v5via{display:inline-block;font-size:10px;font-weight:700;border:1px solid rgba(127,140,160,.35);border-radius:5px;padding:0 5px;margin-left:5px;color:var(--v4tx2,#a9b3c4);vertical-align:1px;white-space:nowrap}
.sum-card.v5-hid{display:none!important}
.v5kp-wrap{flex:1 1 100%;width:100%;margin-bottom:4px}
.v5seg{display:flex;justify-content:flex-end;gap:0;margin:0 0 8px}
.v5seg button{font:700 11.5px Inter,system-ui,sans-serif;padding:4px 11px;border:1px solid rgba(127,140,160,.35);background:transparent;color:var(--v4tx2,#a9b3c4);cursor:pointer}
.v5seg button:first-child{border-radius:999px 0 0 999px}.v5seg button:last-child{border-radius:0 999px 999px 0}.v5seg button+button{border-left:0}
.v5seg button.on{background:var(--v4acc,#3b74e6);border-color:var(--v4acc,#3b74e6);color:#fff}
.v5kp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:1100px){.v5kp{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.v5kp{grid-template-columns:1fr}}
.v5k{background:var(--v4s1,var(--white));border:1px solid var(--v4line,rgba(127,140,160,.3));border-radius:12px;padding:12px 14px;min-width:0}
.v5k .t{font:800 10.5px Inter,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--v4tx3,#8a94a6)}
.v5k .n{font-size:26px;font-weight:800;margin:4px 0 2px;font-variant-numeric:tabular-nums;color:var(--v4tx,inherit)}
.v5k .d{font-size:11.5px;font-weight:700}.v5k .d.up{color:var(--v5g)}.v5k .d.dn{color:var(--v5r)}.v5k .d.fl{color:var(--v4tx3,#8a94a6)}
.v5k .vs{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;font-size:11px;color:var(--v4tx3,#8a94a6)}.v5k .vs b{color:var(--v4tx2,inherit);font-weight:700}
.v5bar{height:6px;border-radius:4px;background:rgba(127,140,160,.2);margin-top:8px;position:relative}
.v5bar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.v5bar s{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--v4tx2,#a9b3c4)}
.v5sp svg{height:22px!important}
/* rows v5 - Priority view / All tasks toggle */
.v5view{display:inline-flex;margin-right:10px;vertical-align:middle}
.v5view button{font:700 11.5px Inter,system-ui,sans-serif;padding:4px 11px;border:1px solid rgba(127,140,160,.35);background:transparent;color:var(--v4tx2,#a9b3c4);cursor:pointer}
.v5view button:first-child{border-radius:999px 0 0 999px}.v5view button:last-child{border-radius:0 999px 999px 0;border-left:0}
.v5view button.on{background:var(--v4acc,#3b74e6);border-color:var(--v4acc,#3b74e6);color:#fff}
body.rows-v5 #ppmt-tbody>tr>td{vertical-align:middle}
body.rows-v5 #ppmt-tbody>tr[onclick]:hover>td{background:rgba(127,140,160,.10)!important}
/* ===== Unassigned v5 + assign panel (13 Oct 2026, switch assign_v5) ===== */
.asg-panel{margin-top:12px}
.asg-lbl{font:800 10.5px Inter,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--v4tx3,#8a94a6);margin:6px 0 8px}
.asg-sup{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--v4line,rgba(127,140,160,.3));border-radius:10px;padding:8px 10px;margin-bottom:6px;background:var(--v4s2,rgba(127,140,160,.06))}
.asg-sup.best{border-color:rgba(74,222,128,.55);background:rgba(74,222,128,.06)}
.asg-sup.asg-int{border-color:rgba(96,165,250,.5);background:rgba(96,165,250,.06)}
.asg-rk{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;background:rgba(127,140,160,.18)}
.asg-sup.best .asg-rk{background:var(--v5g,#16a34a);color:#08210f}
.asg-mini{font-size:11px;color:var(--v4tx3,#8a94a6)}.asg-mini b{color:var(--v4tx2,inherit)}
.asg-more{max-height:300px;overflow-y:auto;padding-right:4px}
.una-wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,1fr);gap:14px;align-items:start}
@media(max-width:1100px){.una-wrap{grid-template-columns:1fr}}
.una-side{background:var(--v4s1,var(--white));border:1px solid var(--v4line,rgba(127,140,160,.3));border-radius:14px;padding:14px;position:sticky;top:10px}
.una-bar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.una-bar .chip{border:1px solid rgba(127,140,160,.35);border-radius:999px;padding:3px 10px;font:700 11.5px Inter,system-ui,sans-serif;color:var(--v4tx2,inherit);background:transparent;cursor:pointer}
.una-bar .chip.on{background:var(--v4acc,#3b74e6);border-color:var(--v4acc,#3b74e6);color:#fff}
.una-bar .chip b.r{color:var(--v5r)}.una-bar .chip b.b{color:var(--v5b)}.una-bar .chip.on b{color:#fff}
.una-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;border:1px solid var(--v4line,rgba(127,140,160,.25));border-radius:11px;padding:10px 12px 10px 16px;margin-bottom:7px;cursor:pointer;background:var(--v4s1,var(--white))}
.una-row::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:rgba(127,140,160,.35)}
.una-row.v5-r::before{background:var(--v5r)}.una-row.v5-a::before{background:var(--v5a)}.una-row.v5-g::before{background:var(--v5g)}
.una-row:hover{border-color:rgba(127,140,160,.5)}.una-row.sel{border-color:var(--v4acc,#3b74e6);box-shadow:0 0 0 1px var(--v4acc,#3b74e6) inset}
.una-l1{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.una-ty{font-size:10px;font-weight:800;border-radius:5px;padding:1px 6px}.una-ty.rj{background:rgba(96,165,250,.16);color:var(--v5b)}.una-ty.qr{background:rgba(192,132,252,.16);color:#a855f7}
.una-ref{font-family:ui-monospace,Consolas,monospace;font-weight:800}
.una-pri{font-size:10px;font-weight:800;border-radius:5px;padding:1px 6px;background:rgba(251,191,36,.14);color:var(--v5a)}
.una-l2{color:var(--v4tx3,#8a94a6);font-size:11.5px;margin-top:3px}
.una-why{display:inline-block;margin-top:5px;font-size:11px;font-weight:700;border:1px solid rgba(96,165,250,.45);background:rgba(96,165,250,.1);color:var(--v5b);border-radius:6px;padding:1px 7px}
.una-rt{text-align:right;white-space:nowrap}.una-rt .w{font-weight:800;font-size:12.5px}.una-rt .w.r{color:var(--v5r)}.una-rt .w.a{color:var(--v5a)}.una-rt .w.g{color:var(--v5g)}.una-rt .s{font-size:11px;color:var(--v4tx3,#8a94a6)}
.una-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}
.una-facts>div{background:var(--v4s2,rgba(127,140,160,.06));border:1px solid var(--v4line,rgba(127,140,160,.25));border-radius:9px;padding:7px 9px}
.una-facts span{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--v4tx3,#8a94a6);font-weight:800}.una-facts b{font-size:13px}
.una-scope{background:var(--v4s2,rgba(127,140,160,.06));border-radius:8px;padding:8px 10px;font-size:12px;color:var(--v4tx2,inherit);white-space:pre-wrap}
/* 13 Oct - internal engineers v2 */
.ie2-pc{display:inline-block;border:1px solid var(--border);border-radius:5px;padding:0 6px;margin:1px 3px 1px 0;font-size:11px;font-weight:700}
.ie2-tbl td{vertical-align:middle}
.ie2-tbl td{white-space:nowrap}.ie2-tbl .badge{white-space:nowrap;border-radius:6px}
.ie2-edit td{background:rgba(59,116,230,.07)}
.ie2-form{display:grid;grid-template-columns:1.1fr 1.4fr .9fr 1fr 1.5fr auto;gap:8px;align-items:end;margin-top:12px;border-top:1px dashed var(--border);padding-top:10px}
.ie2-form input{width:100%;margin:0}
.ie2-more{margin-top:12px;border-top:1px dashed var(--border);padding-top:8px}
.ie2-more>summary{font-weight:800;cursor:pointer}
.asg-rec{display:inline-block;font-size:10.5px;font-weight:800;border-radius:6px;padding:1px 7px;background:rgba(74,222,128,.15);color:var(--green,#1E8449)}
@media (max-width:900px){.ie2-form{grid-template-columns:1fr 1fr}}
/* 13 Oct - instant feedback on click while the database call runs (switch btn_busy) */
.is-busy{opacity:.65;pointer-events:none;cursor:progress;position:relative}
.is-busy::after{content:"";display:inline-block;width:10px;height:10px;margin-left:6px;vertical-align:-1px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:isbusy .7s linear infinite}
@keyframes isbusy{to{transform:rotate(360deg)}}
/* 13 Oct - visual upgrades round 2 (v6-*) */
:root{--v6-s3:rgba(148,163,184,.22)}
.v6-card{padding:12px 14px;margin:0 0 14px}
.v6-hd{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.v6-hd h3{margin:0;font-size:14.5px}
.v6-sp{flex:1}
.v6-pill{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;border-radius:6px;padding:2px 7px;white-space:nowrap}
.v6-pill.p-red{background:rgba(248,113,113,.15);color:#ef4444}.v6-pill.p-amb{background:rgba(217,119,6,.15);color:#d97706}.v6-pill.p-grn{background:rgba(34,197,94,.14);color:#16a34a}.v6-pill.p-blu{background:rgba(96,165,250,.16);color:#3b82f6}.v6-pill.p-gry{background:rgba(148,163,184,.16);color:inherit;opacity:.85}
.v6-r{border-color:rgba(248,113,113,.55)!important;color:#ef4444!important}
.v6-bar{height:5px;border-radius:3px;background:var(--v6-s3);margin-top:6px;overflow:hidden}.v6-bar i{display:block;height:100%}
.v6-age{display:inline-flex;gap:3px}.v6-age i{width:9px;height:9px;border-radius:2px;background:var(--v6-s3)}.v6-age i.f{background:#d97706}
.v6-tbl td{vertical-align:middle}
.v6-cmd .v6-flow{display:flex;border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:0 0 12px}
.v6-flow>div{flex:1;min-width:0;padding:9px 11px;border-right:1px solid var(--border)}.v6-flow>div:last-child{border-right:0}
.v6-flow .l{font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.7;font-weight:800}.v6-flow .v{font-size:20px;font-weight:900;line-height:1.2}.v6-flow .m{font-size:11px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v6-flow .hot{background:rgba(248,113,113,.08)}
.v6-cols{display:grid;grid-template-columns:1.25fr 1fr;gap:12px}
.v6-it{display:flex;gap:9px;align-items:center;padding:8px 6px;border-bottom:1px solid var(--border)}.v6-it:last-child{border-bottom:0}
.v6-sev{width:4px;align-self:stretch;border-radius:3px;flex:none}
.v6-ref{font-weight:800;min-width:74px;font-size:12.5px}
.v6-d{flex:1;min-width:0}.v6-d b{display:block;font-size:12.5px}.v6-d span{font-size:11.5px;opacity:.7}
.v6-risk{border:1.5px solid rgba(248,113,113,.5);background:linear-gradient(180deg,rgba(248,113,113,.07),transparent);border-radius:14px;padding:12px}
.v6-cnt{font-weight:900;color:#ef4444}
.v6-tl{position:relative;margin:4px 0 0 6px;padding-left:16px;border-left:2px solid var(--border)}
.v6-tl .it{position:relative;margin:0 0 9px}.v6-tl .it:before{content:"";position:absolute;left:-22px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--v6-s3);border:2px solid rgba(148,163,184,.7)}
.v6-tl .it.now:before{background:#3b82f6;border-color:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.2)}
.v6-tl .t{font-size:10.5px;opacity:.7;font-weight:700}.v6-tl .n{font-size:12.5px;font-weight:700}.v6-tl .s{font-size:11.5px;opacity:.75}
.v6-riskhd{border:1px solid rgba(248,113,113,.6);background:rgba(248,113,113,.14);color:#ef4444;border-radius:999px;padding:4px 10px;font:700 12px inherit;cursor:pointer;margin-right:6px}
.v6-banner{display:flex;gap:12px;align-items:center;border-radius:12px;padding:10px 12px;background:linear-gradient(90deg,rgba(59,116,230,.14),rgba(94,224,255,.05));border:1px solid rgba(96,165,250,.35);margin-bottom:10px}
.v6-ring{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}.v6-ring span{width:40px;height:40px;border-radius:50%;background:var(--card,var(--bg,#fff));display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px}
.v6-kan{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.v6-kl{border:1px solid var(--border);border-radius:12px;padding:9px;max-height:520px;overflow:auto}.v6-kl h4{margin:0 0 2px;font-size:12.5px}
.v6-tk{border:1px solid var(--border);border-radius:10px;padding:7px 9px;margin-bottom:7px;font-size:12px}
.v6-r1{display:flex;gap:6px;align-items:center}
.v6-lanes4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.v6-lane{border:1px solid var(--border);border-radius:12px;padding:9px 11px}.v6-lane.on{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.2)}
/* engineer */
.v6-hero{border-radius:16px;padding:14px;background:linear-gradient(160deg,#16314f,#121a29 75%);color:#e6ebf3;border:1px solid rgba(96,165,250,.35);margin:0 0 12px}
.v6-hero .lbl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#93c5fd;font-weight:800}.v6-hero .ttl{font-size:16px;font-weight:800;margin:3px 0 2px}.v6-hero .meta{font-size:12px;color:#c3cddb}
.v6-hero .btn{color:#e6ebf3;border-color:rgba(255,255,255,.3)}
.v6-big{display:block;width:100%;border:0;border-radius:14px;padding:14px;font:800 15px inherit;font-family:inherit;color:#fff;margin-top:11px;cursor:pointer}
.v6-big.b{background:linear-gradient(90deg,#2563eb,#3b74e6)}.v6-big.g{background:linear-gradient(90deg,#15803d,#1E8449)}
.v6-row2{display:flex;gap:8px;margin-top:8px}.v6-row2>*{flex:1;text-align:center;justify-content:center}
.v6-cap{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.7;font-weight:800;margin:4px 0 6px}
.v6-done{border:1px solid rgba(34,197,94,.4);background:rgba(34,197,94,.08);border-radius:12px;padding:10px 12px;font-size:13px;margin-bottom:12px}
.v6-eod{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.v6-eod>div{border:1px solid var(--border);border-radius:12px;padding:8px 10px}.v6-eod b{display:block;font-size:20px}.v6-eod span{font-size:11px;opacity:.7}
.v6-job{margin:8px 0}
.v6-steps{display:flex;gap:4px;margin-bottom:8px}.v6-steps>div{flex:1;text-align:center;font-size:10.5px;opacity:.6}.v6-steps i{display:block;height:5px;border-radius:3px;background:var(--v6-s3);margin-bottom:3px}
.v6-steps .d{opacity:1}.v6-steps .d i{background:#16a34a}.v6-steps .c{opacity:1;font-weight:800}.v6-steps .c i{background:#3b82f6}
.v6-clock{font-size:13px;margin:4px 0}.v6-clock b{font-size:17px}
.v6-stick{position:sticky;bottom:0;z-index:3;padding-bottom:4px}
/* tracker */
.v6-track-wrap{border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:12px}
.v6-enr{font-size:12px;font-weight:700;margin-bottom:8px;color:#3b82f6}
.v6-track{display:flex;align-items:flex-start;overflow-x:auto}
.v6-track .st{flex:1;min-width:76px;text-align:center;position:relative;font-size:11px}
.v6-track .st:before{content:"";position:absolute;top:10px;left:-50%;width:100%;height:3px;background:var(--v6-s3);z-index:0}
.v6-track .st:first-child:before{display:none}.v6-track .st.d:before,.v6-track .st.c:before{background:#16a34a}
.v6-track .st i{position:relative;z-index:1;display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;background:var(--v6-s3);border:2px solid rgba(148,163,184,.7);font-style:normal;font-size:11px;font-weight:900}
.v6-track .st.d i{background:#16a34a;border-color:#16a34a;color:#fff}.v6-track .st.c i{background:#3b82f6;border-color:#3b82f6;color:#fff;box-shadow:0 0 0 5px rgba(59,130,246,.2)}
.v6-track .st.w i{background:rgba(217,119,6,.2);border-color:#d97706;color:#d97706}
.v6-track .n{display:block;font-weight:800;margin-top:4px}.v6-track .t{display:block;opacity:.7;font-size:10.5px;line-height:1.3}
@media (max-width:980px){.v6-cols,.v6-kan,.v6-lanes4{grid-template-columns:1fr}.v6-cmd .v6-flow{flex-wrap:wrap}.v6-flow>div{flex:1 1 33%;border-bottom:1px solid var(--border)}}

/* 14 Oct 2026 (Jamie): status colours = whose move it is. Grey new, blue contractor, cyan on site,
   amber us, purple client, orange going back, red problem, green done, faded closed. Display only. */
html .badge.badge.st-new{color:#475569!important;background:#F1F5F9!important;}
html[data-theme="dark"] .badge.badge.st-new{color:#cbd5e1!important;background:rgba(148,163,184,.16)!important}
html .badge.badge.st-con{color:#1D4ED8!important;background:#EAF1FE!important;}
html[data-theme="dark"] .badge.badge.st-con{color:#60a5fa!important;background:rgba(96,165,250,.14)!important}
html .badge.badge.st-site{color:#0E7490!important;background:#E6F8FB!important;}
html[data-theme="dark"] .badge.badge.st-site{color:#22d3ee!important;background:rgba(34,211,238,.13)!important}
html .badge.badge.st-us{color:#B45309!important;background:#FEF3E2!important;}
html[data-theme="dark"] .badge.badge.st-us{color:#fbbf24!important;background:rgba(251,191,36,.14)!important}
html .badge.badge.st-cli{color:#7E22CE!important;background:#F5ECFE!important;}
html[data-theme="dark"] .badge.badge.st-cli{color:#c084fc!important;background:rgba(192,132,252,.14)!important}
html .badge.badge.st-rev{color:#C2410C!important;background:#FFF1E6!important;}
html[data-theme="dark"] .badge.badge.st-rev{color:#fb923c!important;background:rgba(251,146,60,.15)!important}
html .badge.badge.st-prob{color:#B91C1C!important;background:#FDECEC!important;}
html[data-theme="dark"] .badge.badge.st-prob{color:#f87171!important;background:rgba(248,113,113,.15)!important}
html .badge.badge.st-done{color:#15803D!important;background:#EAF7EF!important;}
html[data-theme="dark"] .badge.badge.st-done{color:#4ade80!important;background:rgba(74,222,128,.13)!important}
html .badge.badge.st-paid{color:#166534!important;background:#D7F2E0!important;}
html[data-theme="dark"] .badge.badge.st-paid{color:#86efac!important;background:rgba(34,197,94,.22)!important}
html .badge.badge.st-shut{color:#64748B!important;background:#F1F5F9!important;text-decoration:line-through;}
html[data-theme="dark"] .badge.badge.st-shut{color:#94a3b8!important;background:rgba(148,163,184,.10)!important}

/* dash_settle (14 Oct) - office dashboard held until the first full paint, so it no longer jumps on load */
#tab-dashboard.dash-wait{position:relative;min-height:60vh}
#tab-dashboard.dash-wait>*{visibility:hidden}
#tab-dashboard.dash-wait::before{content:"Loading dashboard\2026";position:absolute;top:48px;left:0;right:0;text-align:center;font-size:13px;color:var(--muted,#94a3b8);visibility:visible}

/* dash_simple (14 Oct) - one tab per section; Overview = at risk, needs you now, money position */
body.shell-v2 #tab-dashboard[data-sv2="pri"] [data-sv2p]:not([data-sv2p~="pri"]),
body.shell-v2 #tab-dashboard[data-sv2="work"] [data-sv2p]:not([data-sv2p~="work"]),
body.shell-v2 #tab-dashboard[data-sv2="rep"] [data-sv2p]:not([data-sv2p~="rep"]){display:none!important}
body.shell-v2 #tab-dashboard:is([data-sv2="ov"],[data-sv2="pri"],[data-sv2="work"],[data-sv2="rep"]) .dv2-col{display:contents!important}
body.shell-v2 #tab-dashboard:is([data-sv2="ov"],[data-sv2="pri"],[data-sv2="rep"]) #dv2-grid{display:grid!important;grid-template-columns:1fr!important;gap:16px}
body.shell-v2 #tab-dashboard[data-sv2="work"] #dv2-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,620px),1fr))!important;gap:16px;align-items:start}
body.shell-v2 #tab-dashboard[data-sv2="work"] #dv2-grid>*{margin:0!important}
#ov-cmd .ds-needs{display:grid;grid-template-columns:1fr 1fr;column-gap:26px;align-content:start}
#ov-cmd .ds-needs>:not(.v6-it){grid-column:1/-1}
#ov-cmd .ds-risk #v6-risk{margin:0}
@media(max-width:1000px){#ov-cmd .ds-needs{grid-template-columns:1fr}}

/* 19 Oct 2026 scan: the columns hint pushed Jobs/Works/Quotes 30px wider than a phone screen (page wobbled sideways) */
@media (max-width:600px){.sv3-hint{display:none}}
/* 19 Oct 2026 scan rec 5: office screens on a phone - wide tables scroll inside themselves, filters fit the screen */
@media (max-width:600px){#tab-reports table,#tab-team table,#tab-settings table{display:block;overflow-x:auto;max-width:100%}#tab-clientinv select,#tab-reports select,#tab-team select,#tab-settings select{max-width:100%}}

/* ── 23 Oct 2026 - Jamie: "the colours for suppliers are still a little bland - gold looks a bit orange/yellow,
   platinum just looks grey/silver. these colours really need to stand out and mean something" -> option B.
   A colour per tier (chip, name and a coloured edge down the supplier cell). Diamond, Platinum and Gold shimmer. */
.met-diamond{background:linear-gradient(110deg,#06b6d4 0%,#67e8f9 30%,#ffffff 50%,#67e8f9 70%,#0891b2 100%);background-size:280% 100%;animation:metShine 2.6s linear infinite;color:#083344;text-shadow:none;box-shadow:0 0 12px rgba(34,211,238,.75);border-color:rgba(8,51,68,.25)}
.met-platinum{background:linear-gradient(110deg,#6d28d9 0%,#a78bfa 30%,#ede9fe 50%,#a78bfa 70%,#5b21b6 100%);background-size:280% 100%;animation:metShine 3.4s linear infinite;color:#fff;text-shadow:0 1px 2px rgba(46,16,101,.85);box-shadow:0 0 11px rgba(139,92,246,.7);border-color:rgba(46,16,101,.35)}
.met-gold{background:linear-gradient(110deg,#b8860b 0%,#ffd700 30%,#fff6c2 50%,#ffd700 70%,#b8860b 100%);background-size:280% 100%;animation:metShine 4s linear infinite;color:#3d2a00;text-shadow:none;box-shadow:0 0 9px rgba(255,215,0,.55);border-color:rgba(61,42,0,.3)}
.met-silver{background:linear-gradient(135deg,#94a3b8 0%,#e2e8f0 50%,#94a3b8 100%);color:#1e293b;text-shadow:none}
.met-bronze{background:linear-gradient(135deg,#9a3412 0%,#f59e6b 50%,#9a3412 100%);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.5)}
html.ui-v4 .met.sup-rank.met-diamond{animation:metShine 2.6s linear infinite;box-shadow:0 0 10px rgba(34,211,238,.7)}
html.ui-v4 .met.sup-rank.met-platinum{animation:metShine 3.4s linear infinite;box-shadow:0 0 9px rgba(139,92,246,.65)}
html.ui-v4 .met.sup-rank.met-gold{animation:metShine 4s linear infinite;box-shadow:0 0 8px rgba(255,215,0,.5)}
.supn-diamond{color:#67e8f9!important}.supn-platinum{color:#c4b5fd!important}.supn-gold{color:#fcd34d!important}
.supn-silver{color:#cbd5e1!important}.supn-bronze{color:#fdba74!important}
html:not([data-theme="dark"]) .supn-diamond{color:#0e7490!important}
html:not([data-theme="dark"]) .supn-platinum{color:#6d28d9!important}
html:not([data-theme="dark"]) .supn-gold{color:#a16207!important}
html:not([data-theme="dark"]) .supn-silver{color:#475569!important}
html:not([data-theme="dark"]) .supn-bronze{color:#c2410c!important}
.supt{display:inline-block;border-left:4px solid transparent;padding-left:7px;border-radius:2px;max-width:100%}
.supt-diamond{border-left-color:#22d3ee}.supt-platinum{border-left-color:#a78bfa}.supt-gold{border-left-color:#facc15}
.supt-silver{border-left-color:#94a3b8}.supt-bronze{border-left-color:#ea580c}