/* ——— Siite base tokens ——— Merged from SEVEN competing :root blocks in which 17 tokens held different values — --radius-sm was 10px, 6px and 8px depending on where the cascade landed. Every value here is the one that ALREADY WON, so this change is invisible by design: it makes the system honest without restyling anything. --action-blue is deliberately NOT here. It is declared on body:not(.login-mode), which is more specific than :root and wins anyway. Audit LD29 (20 Oct): the two later :root blocks (elevation + radii, and motion) are merged in here, brace-balanced, so this is the ONLY place a token is defined. Where they disagreed, the later block's value is the one that was already winning and is the one kept. --shadow, the accidental fourth elevation, is now an alias of --elev-2. */ :root{--stat-value:var(--text-3xl);--control-sm:44px;--control-md:44px;--control-lg:56px;--tab-bar-h:calc(60px + env(safe-area-inset-bottom, 0px)); --bad:var(--status-critical); --bad-bg:var(--status-critical-surface); --bg:#f4f7fb; --blue:#163a5f; --blue-2:#245f8f; --blue-3:#31749f; --blue-deep:#102a44; --blueprint:#1f6fa8; --border-default:#dce4ee; --border-strong:#c3d0e0; --border-subtle:#eef2f7; --border-width:1px; --danger-bg:var(--status-critical-surface); /* Elevation: three levels - resting, raised, overlay. Every older shadow name points at one of them. */ --elev-0:none;--elev-1:0 1px 2px rgba(16,42,68,.05); --elev-2:0 1px 2px rgba(16,42,68,.05),0 6px 16px rgba(16,42,68,.06); --elev-3:0 2px 6px rgba(16,42,68,.07),0 18px 40px rgba(16,42,68,.10); --elevation-0:var(--elev-0); --elevation-1:var(--elev-1); --elevation-2:var(--elev-2); --elevation-3:var(--elev-3); --elevation-4:var(--elev-3); --focus-offset:2px; /* Visual 453 (Jim, 22 Oct): the focus ring and accents are the website orange. The ring keeps a white halo, which is what makes it readable on a rust button (ring on rust alone is 1.64:1). */ --accent:#D85F32; --focus-colour:var(--accent); --focus-outline:2px solid var(--focus-colour); --focus-ring:0 0 0 5px rgba(255,255,255,.9); /* Visual 453: the call-to-action is the jbpdevelopments.com button rust (#A6421F, white text 6.14:1), darker on hover (7.75:1). One per view. */ --cta:#A6421F; --cta-hover:#8E3719; --cta-ink:#fff; /* Visual 453: the clock button is gold on every screen. Sand to clock in (navy text 6.86:1), the website gold while clocked in (9.85:1). Both sit on white, so both carry the deep-gold edge (4.0:1 against white). Never red, never amber. */ --clock:#C3AF90; --clock-edge:#9a7b33; --clock-ink:#102a44; --clock-live:#F1D08D; --clock-live-ink:#102a44; --fs-min:12px; --good:var(--status-ok); --good-bg:#e4f2ea; --info-bg:#eef6ff; --ink:#132033; /* Visual 459: four line heights - none (figures, icons), tight (headings, chips), snug (dense UI: tables, rows, labels) and normal (reading text). */ --leading-none:1; --leading-snug:1.4; --leading-normal:1.55; --leading-relaxed:1.7; --leading-tight:1.25; --limestone:#f7f4ee; --line:#dce4ee; --line-soft:#eaf0f6; --muted:#4e5a68; --navy:#163a5f; --navy-800:#123757; --navy-900:#0d2b49; --neutral-bg:#f2f5f8; --page-max:1540px; --panel:#fff; /* One roundness scale, the brief's 0/4/8/12/16/999. Audit LD18: --r-xs was 6px and --r-lg 18px, putting 735 corners off the scale. */ --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px; --radius-xs:var(--r-xs); --radius-sm:var(--r-sm); --radius-md:var(--r-md); --radius-lg:var(--r-md); --radius-xl:var(--r-lg); --radius:var(--r-md); --sand:#c3af90; /* Brand 332: JBP's own colours (logo pack, October 2026), for what Siite shows or prints under JBP's name. Not the app's palette. */ --jbp-navy:#1E2A39;--jbp-gold:#AA8C57;--jbp-muted:var(--muted);--jbp-line:#DCD9D2; --sand-deep:#9a7b33; --sand-tint:#f7f2e7; --shadow:var(--elev-2); --shadow-board:var(--elev-2); --shadow-card:var(--elev-2); --shadow-lift:var(--elev-2); --shadow-md:var(--elev-3); --shadow-sm:var(--elev-2); --shadow-soft:var(--elev-2); --shadow-xs:var(--elev-1); --soft:#eaf1f8; --space-1:4px; --space-10:40px; --space-12:48px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:28px; --space-8:32px; --status-critical:#a63636; --status-critical-surface:#fdf0f0; --status-info:#245f8f; --status-info-surface:#eef4fa; --status-neutral:#4e5a68; --status-neutral-surface:#f2f5f9; --status-ok:#1d7a4d; --status-ok-surface:#eef8f2; --status-warning:#a8721f; --status-warning-surface:#fff8ec; --success-bg:var(--status-ok-surface); --surface:#ffffff; --surface-base:#f4f7fb; --surface-inverse:#132033; --surface-overlay:rgba(255,255,255,.86); --surface-raised:#ffffff; --surface-scrim:rgba(15,26,42,.42); --surface-soft:var(--bg); --surface-sunken:#eef2f7; --text-2xl:24px; --text-3xl:30px; --text-base:14px; /* Audit LD12: the brief's 14px base (was 15) */ --text-lg:17px; --text-sm:13px; --text-xl:20px; --text-xs:12px; --transition-base:180ms ease; --transition-fast:120ms ease; --transition-slow:260ms ease; /* Motion: two durations, two easings (see the Motion notes further down). */ --motion:150ms; --motion-slow:240ms; --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.4,0,.2,1); --ui-gap:16px; --ui-radius:var(--r-lg); --warn:var(--status-warning); /* Audit LD20/LM-25: --warn (#a8721f) is a fill and border colour; as TEXT on white or the warning tint it fails AA (3.9:1). Warn text uses this. */ --warn-ink:#7a4d00; --warn-bg:#fbf1df; --warning-bg:var(--status-warning-surface); --weight-bold:700; --weight-medium:600; --weight-normal:400; /* Calm 469 (R2B-01): ONE stacking scale, low to high. Every drawer opened UNDER the sticky header (drawer 60, header a hard-coded 90), so its title and Close were hidden and a press on Close hit the menu button. The order is now a rule: page < menus < header < phone tab bar < scrim < drawer / sheet < full-screen viewers < dialog < toast. A drawer's scrim dims the header and the tab bar; Close is never under anything. */ --z-base:0; --z-sticky:9; --z-nav:20; --z-overlay:70; --z-menu:var(--z-overlay); --z-header:90; --z-palette:100; --z-tabbar:1000; --z-scrim:1290; --z-drawer:1300; --z-viewer:2000; --z-dialog:9100; --z-toast:9200; /* Calm 469 (Apple feel #20): one open/close timing for drawers, sheets and search. */ --motion-sheet:180ms; /* Programme 460: one crew palette (area chart, Gantt stripe, legend) - no red, which means "drives the finish". */ --crew-1:#2e79aa;--crew-2:#2e8b57;--crew-3:#6d28d9;--crew-4:#a8721f; --crew-5:#0f766e;--crew-6:#163a5f;--crew-7:#5b6b7c;--crew-8:#9aa7b4; --p460-blocker:#b45309;--p460-blocker-band:rgba(180,83,9,.14); --p460-area-bg:#f7f2e7;--p460-span:#e4d6bc; } *{box-sizing:border-box} html,body{max-width:100%} /* Audit LM-01: overflow-x:hidden on BOTH html and body made body its own scroll container, one that never scrolls, so every position:sticky element (the header with Clock in, the Submit bar, the message box) stuck to body and scrolled away with the page. The viewport keeps the sideways clip on a phone, and body uses clip, which hides overflow WITHOUT becoming a scroller. Above phone width nothing is clipped, so a wide table can still scroll the page sideways (25 Sep). */ @media(max-width:760px){html{overflow-x:hidden}body{overflow-x:clip}} .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} body{margin:0;background:var(--bg);color:var(--ink);display:flex;min-height:100vh;font-size:var(--text-base);line-height:var(--leading-normal);font-variant-numeric:tabular-nums} .sidebar{width:236px;background:linear-gradient(180deg,#102f4f,#0b2239);color:white;padding:var(--space-6) var(--space-4);display:flex;flex-direction:column;gap:var(--space-6);position:fixed;left:0;top:0;bottom:0;z-index:10} body.sidebar-collapsed .sidebar{transform:translateX(-100%)} .brand{display:flex;gap:var(--space-4);align-items:center;padding:var(--space-1) var(--space-1) var(--space-5);border-bottom:1px solid rgba(255,255,255,.14)} .logo{width:50px;height:50px;border-radius:var(--r-md);background:white;color:var(--blue);display:grid;place-items:center;font-size:var(--text-2xl);font-weight:700;box-shadow:var(--shadow-soft)} /* Audit LD07: no browser-default #0000ee links; zero specificity so every component's own link colour still wins */:where(a){color:var(--blue-2)}/* Audit LD22 (third pass): an unstyled was a 21px press (hub Documents' 28 folders, Ledger and Materials "Details", Marketplace "Sell something", Time Clock, Programme). Every disclosure gets the 44px floor here; zero specificity, so a component's own summary styling still wins. */:where(summary){min-height:var(--control-md);box-sizing:border-box;cursor:pointer}:where(summary:not([class])){padding-block:var(--space-3)}h1,h2,h3,p{margin:0}/* Audit LD06: headings are 600, set once here (12 later 700s deleted). Audit LD05: without this a in a 600/700 parent resolved to 900. */h1,h2,h3,h4,h5,h6{font-weight:600}b,strong{font-weight:600}/* Visual 459: a heading with no size of its own lands on the type scale (the browser's 1.5em / 1.17em gave 21px and 16.38px). Zero-class selectors, so every component's own size still wins. */h1{font-size:var(--text-2xl)}h2{font-size:var(--text-xl)}h3{font-size:var(--text-lg)}h4,h5,h6{font-size:var(--text-base)}.brand h1{font-size:var(--text-2xl);letter-spacing:-.04em}.brand p{font-size: var(--text-sm);opacity:.75;margin-top:1px} nav{display:flex;flex-direction:column;gap:8px}.nav-group{margin:var(--space-2) var(--space-2) 0;color:rgba(255,255,255,.48);font-size: var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.12em}.nav-group:first-child{margin-top:0}.nav{border:0;text-align:left;padding:var(--space-3) var(--space-4);border-radius:var(--r-md);background:transparent;color:rgba(255,255,255,.77);font-weight:700;cursor:pointer;font-size:var(--text-base)}.nav:hover,.nav.active,.nav[aria-current="page"]{background:rgba(255,255,255,.12);color:white}.side-footer{margin-top:auto;background:rgba(255,255,255,.08);padding:var(--space-4);border-radius:var(--r-md);display:flex;flex-direction:column;gap:var(--space-1);font-size: var(--text-sm)}.side-footer span{opacity:.7} main{padding:var(--space-7);min-height:100vh}/* Calm 469 (R2B-18): the margin slides only while a person toggles the sidebar (body.sidebar-moving); on sign-in it was animated and counted as the whole page shifting. */body.sidebar-moving main{transition:margin-left var(--motion-slow) var(--ease-out),width var(--motion-slow) var(--ease-out)}.topbar{display:flex;justify-content:space-between;align-items:center;margin:calc(var(--space-7) * -1) calc(var(--space-7) * -1) var(--space-6);padding:var(--space-7);gap:var(--space-4);position:sticky;top:0;z-index:9;background:rgba(244,247,251,.98);border-bottom:1px solid rgba(220,228,238,.8)}.topbar-left{display:flex;align-items:center;gap:var(--space-4);min-width:0}.topbar-brand{display:flex;align-items:center;gap:var(--space-2);min-width:190px}.topbar-logo{width:38px;height:38px;border-radius:var(--r-md);background:var(--blue);color:white;display:grid;place-items:center;font-size:var(--text-xl);font-weight:700}.topbar-brand strong,.topbar-brand span{display:block;line-height:var(--leading-none)}.topbar-brand strong{font-size:var(--text-lg);letter-spacing:-.03em}.topbar-brand span{font-size: var(--text-xs);color:var(--muted);font-weight:700}.eyebrow{text-transform:uppercase;font-size: var(--text-xs);font-weight:600;letter-spacing:.14em;color:var(--muted);margin-bottom:4px}.topbar h2{font-size: var(--text-2xl);font-weight:600;letter-spacing:-.03em}.actions,.button-row,.toolbar{display:flex;gap:var(--space-2);align-items:center}.actions{margin-left:auto}.button-row{margin-top:12px;flex-wrap:wrap}.wrap{flex-wrap:wrap}.badge{background:#eef4fa;color:var(--blue);border:1px solid #dbe4ec;padding:var(--space-2) var(--space-3);border-radius:var(--r-pill);font-size: var(--text-xs);font-weight:600}.badge.live{background:var(--status-ok-surface);color:var(--good);border-color:#b3e4c7}.badge.warn{background:var(--status-warning-surface);color:var(--warn-ink);border-color:#f1d08d} button{border:0;background:var(--blue);color:white;border-radius:var(--r-sm);padding:var(--space-2) var(--space-4);font-weight:600;cursor:pointer;box-shadow:var(--shadow-soft)}button:hover{filter:brightness(1.04)}button.secondary{background:white;color:var(--blue);border:1px solid var(--line);box-shadow:none}button.danger{background:var(--bad)}/* Visual 459 (V3 §4): the dead button.stop rule is gone - no control carries .stop since clocking out became the gold siiteClockButton (Visual 453). *//* Audit LM-11: text-field styling (padding, 44px height, pale border) is for text fields; it was turning every checkbox into a 21x44 pill. :where() keeps the specificity unchanged. */input:where(:not([type=checkbox],[type=radio])),select,textarea{border:1px solid #dbe4ec;border-radius:var(--r-sm);padding:var(--space-3) var(--space-3);background:white;color:var(--ink);font:inherit;min-height:var(--control-md)}input:focus,select:focus,textarea:focus{outline:2px solid rgba(36,95,143,.18);border-color:#8fb6d5}textarea{width:100%;margin-top:var(--space-4);line-height:var(--leading-snug)}.view{display:none}.view.active{display:block}.alert{background:var(--status-warning-surface);border:1px solid #eedec0;border-left:4px solid var(--warn);color:#5d4a1a;padding:var(--space-4) var(--space-4);border-radius:var(--r-sm);margin-bottom:var(--space-4)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4);margin-bottom:var(--space-4)}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-4);box-shadow:var(--shadow)}.card .label{color:var(--muted);font-size: var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.1em}.card .value{font-size: var(--text-2xl);font-weight:600;letter-spacing:-.04em;margin-top:var(--space-2)}.card small{display:block;color:var(--muted);margin-top:var(--space-2)}.grid{display:grid;gap:var(--space-4);margin-bottom:var(--space-4)}.grid.two{grid-template-columns:1fr 1fr}.panel{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-5);box-shadow:var(--shadow);margin-bottom:var(--space-4)}.panel-title{display:flex;justify-content:space-between;gap:var(--space-4);align-items:flex-start;margin-bottom:var(--space-4)}.panel-title h3{font-size:var(--text-lg);letter-spacing:-.02em}.panel-title span,.muted{color:var(--muted);font-size: var(--text-sm)}.bars{display:flex;flex-direction:column;gap:14px}.bar-row{display:grid;grid-template-columns:150px 1fr 110px;gap:12px;align-items:center}.bar-label{font-weight:700;font-size:var(--text-base)}.bar-track{height:13px;background:var(--soft);border-radius:var(--r-pill);overflow:hidden}.bar-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--blue-2));border-radius:var(--r-pill)}.bar-value{text-align:right;font-weight:700}.donut-wrap{display:grid;grid-template-columns:170px 1fr;gap:20px;align-items:center}.donut{width:160px;height:160px;border-radius:50%;background:conic-gradient(var(--blue) 0deg,var(--blue) 180deg,var(--blue-2) 180deg,var(--blue-2) 300deg,#b9c7d6 300deg,#b9c7d6 360deg);position:relative}.donut:after{content:"";position:absolute;inset:28px;background:white;border-radius:50%}.legend{display:flex;flex-direction:column;gap:var(--space-2)}.legend span{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding-bottom:8px;font-size:var(--text-base)}.clean-list{display:flex;flex-direction:column;gap:var(--space-3);list-style:none;padding:0;margin:0}.clean-list li{background:#f8fafc;border:1px solid #e6edf5;border-radius:var(--r-md);padding:var(--space-3) var(--space-4)}.toolbar{margin-bottom:16px}.toolbar input{min-width:260px}tr:hover td{background:var(--panel)}.pill{display:inline-flex;border-radius:var(--r-pill);padding:var(--space-1) var(--space-2);font-size: var(--text-xs);font-weight:600;background:var(--line);color:var(--muted)}.pill.good{background:var(--status-ok-surface);color:var(--good)}.pill.warn{background:var(--status-warning-surface);color:var(--warn-ink)}.pill.bad{background:var(--status-critical-surface);color:var(--bad)}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(230px,1fr));gap:16px}.project-card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}.project-card h3{font-size:var(--text-xl);margin-bottom:4px}.project-card .meta{color:var(--muted);font-size: var(--text-sm);margin-bottom:14px}.numbers{display:grid;grid-template-columns:1fr 1fr;gap:10px}.numberbox{background:#f7fafc;border:1px solid #e7edf4;border-radius:var(--r-md);padding:var(--space-3)}.numberbox span{display:block;color:var(--muted);font-size: var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.1em}.numberbox strong{display:block;font-size:var(--text-lg);margin-top:4px}/* Audit P3V-08 (third pass): minmax(0,1fr), and children that may shrink - a 1fr column grows to its longest select option (429px of a 390 screen on Documents' upload form). */.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-4)}.form-grid > *{min-width:0}.form-grid > :is(select,input,textarea){max-width:100%}.form-grid button{grid-column:1/-1}.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.lane{background:#eef4fa;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--space-4);min-height:260px}.lane h3{margin-bottom:var(--space-3)}.task{background:white;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--space-3);margin-bottom:var(--space-2)}.task strong{display:block}.task small{display:block;color:var(--muted);margin-top:var(--space-2)}.task-actions{display:flex;gap:var(--space-2);margin-top:var(--space-2)}.task-actions button{padding:var(--space-2) var(--space-2);font-size: var(--text-xs)}.manifest{display:flex;flex-direction:column;gap:var(--space-2)}.source{border:1px solid #e1e9f2;background:var(--bg);border-radius:var(--r-md);padding:13px}.source strong{display:block}.source code{font-size: var(--text-xs);color:#43586d;word-break:normal;overflow-wrap:break-word}.codebox{white-space:pre-wrap;background:#0e2238;color:#dcecff;border-radius:var(--r-md);padding:14px;min-height:120px;overflow:auto}.architecture{display:flex;align-items:stretch;justify-content:space-between;gap:var(--space-2)}.architecture div{flex:1;background:#f7fafc;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--space-4);font-weight:700;text-align:center}.architecture small{display:block;color:var(--muted);font-weight:600;margin-top:var(--space-1)}.architecture span{display:grid;place-items:center;color:var(--blue);font-size:var(--text-2xl);font-weight:700}@media(max-width:1100px){.sidebar{position:static;width:100%;height:auto}.sidebar nav{display:grid;grid-template-columns:repeat(2,1fr)}body{display:block}.grid.two,.project-grid,.kanban{grid-template-columns:1fr}.topbar{align-items:flex-start;gap:var(--space-4);flex-direction:column}.donut-wrap{grid-template-columns:1fr}.architecture{flex-direction:column}.architecture span{transform:rotate(90deg)}} button:focus{outline:none} button:focus-visible{outline:2px solid var(--focus-colour);outline-offset:3px;box-shadow:var(--shadow-card)} button.secondary:focus-visible,.menu-toggle:focus-visible{outline:2px solid var(--focus-colour);outline-offset:3px;box-shadow:var(--shadow-card)} .link-card:after{content:"Open";position:absolute;right:14px;top:14px;border-radius:var(--r-pill);background:#eef4fa;color:var(--blue);font-size: var(--text-xs);font-weight:700;padding:var(--space-1) var(--space-2);opacity:0;transition:opacity var(--motion) var(--ease-out)} .link-card:hover:after,.link-card:focus-visible:after{opacity:1} .evidence-actions{margin-top:12px} .evidence-open-link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-sm);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--space-2) var(--space-3);background:white;color:var(--blue);font-size: var(--text-sm);font-weight:700;text-decoration:none} .evidence-open-link:hover{border-color:#9ebbd4;background:var(--bg)} .crm-stage-list,.crm-action-list{display:grid;gap:12px} /* Audit LD23: stat grids auto-fit, so a row never leaves one tile stranded on its own. */ .crm-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px} .crm-kpi-card{background:var(--bg);border:1px solid #e6edf5;border-radius:var(--r-md);padding:14px;display:grid;gap:5px} .crm-kpi-card span{color:var(--muted);font-size: var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.1em} .crm-kpi-card strong{font-size:var(--text-2xl);letter-spacing:-.03em} .crm-kpi-card small{color:var(--muted);font-weight:700;line-height:var(--leading-tight)} .crm-stage-row{display:grid;grid-template-columns:minmax(160px,1fr) 2fr minmax(130px,.7fr);gap:14px;align-items:center;background:var(--bg);border:1px solid #e6edf5;border-radius:var(--r-md);padding:13px} .crm-stage-row strong{display:block} .crm-stage-row small{display:block;color:var(--muted);font-weight:700;margin-top:3px} .crm-stage-track{height:12px;background:#e7eef6;border-radius:var(--r-pill);overflow:hidden} .crm-stage-track span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),#34a0a4);border-radius:var(--r-pill)} .crm-stage-money{font-weight:700;text-align:right} .crm-stage-money small{font-weight:700} .crm-action-list .review-item{box-shadow:none} /* Bulk-archive preview: the reviewer reads every candidate and its reason, and unticks anything that should stay. An excluded row stays legible rather than disappearing, so the count and the list always agree. */ .crm-archive-preview .crm-action-list{max-height:420px;overflow-y:auto} .crm-archive-row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;cursor:pointer} .crm-archive-row input{margin-top:4px;width:18px;height:18px} .crm-archive-row>span{display:grid;gap:4px} .crm-action-list .review-item.muted{opacity:.55} .crm-action-list .review-item.muted strong{text-decoration:line-through} .crm-call-review{display:grid;gap:14px} .crm-call-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .crm-call-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .crm-call-filters label{display:grid;gap:6px;min-width:0} .crm-call-filters input,.crm-call-filters select{width:100%;min-width:0} @media(max-width:760px){.crm-call-filters{grid-template-columns:1fr}} .crm-call-summary-card{background:var(--bg);border:1px solid #e6edf5;border-radius:var(--r-md);padding:14px;display:grid;gap:5px} .crm-call-summary-card span,.crm-call-note aside span{color:var(--muted);font-size: var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.1em} .crm-call-summary-card strong{font-size:var(--text-2xl);letter-spacing:-.03em} .crm-call-summary-card small{color:var(--muted);font-weight:700;line-height:var(--leading-tight)} .crm-call-director-note{background:#f7fafc;border:1px solid var(--line);border-radius:var(--r-md);padding:14px;color:#30475f;font-weight:700;line-height:var(--leading-snug)} .crm-call-director-note p+p{margin-top:6px} .crm-call-note-list{display:grid;gap:12px} .crm-call-note{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);gap:14px;background:white;border:1px solid var(--line);border-radius:var(--r-md);padding:14px;box-shadow:var(--shadow-soft)} .crm-call-note strong{display:block;margin-top:8px;font-size:var(--text-base)} .crm-call-note small{display:block;color:var(--muted);font-weight:700;line-height:var(--leading-snug);margin-top:4px} .crm-call-note p{color:#40556b;line-height:var(--leading-snug);margin-top:8px} .crm-call-note aside{background:var(--status-warning-surface);border:1px solid #f1d08d;border-radius:var(--r-md);padding:var(--space-3)} .crm-call-note aside p{color:#5d4309;font-weight:700} @media(max-width:760px){.crm-stage-row,.crm-call-summary,.crm-call-note{grid-template-columns:1fr}.crm-stage-money{text-align:left}} .task.warning{border-color:#f0c36d;background:#fff8e7} .task.danger{border-color:#df8d8d;background:#fff0f0} .task.complete{background:#f1f6f2;border-color:#bfd9c9;opacity:.78} .task.complete strong{text-decoration:line-through;color:#53625a} .task-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-2)} /* Audit LM-18: Mark complete is a 24px box in a 44px-tall label, not a 13px native tick. */ .task-check{display:flex;align-items:center;gap:8px;min-height:var(--control-sm);color:var(--muted);font-size: var(--text-xs);font-weight:600;cursor:pointer} .task-check input{width:24px;height:24px;min-height:0;margin:0;accent-color:var(--good)} .due-pill{display:inline-flex;border-radius:var(--r-pill);padding:var(--space-1) var(--space-2);background:var(--line);color:var(--muted);font-size: var(--text-xs);font-weight:700;white-space:nowrap} .due-pill.warning{background:var(--status-warning-surface);color:#835300} .due-pill.danger{background:var(--status-critical-surface);color:var(--bad)} .due-pill.complete{background:var(--status-ok-surface);color:var(--good)} .task-preview{display:flex;justify-content:space-between;align-items:center;gap:10px} .task-preview.warning{background:#fff8e7;border-color:#f0c36d} .task-preview.danger{background:#fff0f0;border-color:#df8d8d} .task-done{padding:7px 9px;font-size: var(--text-xs);white-space:nowrap} .empty-lane{padding:var(--space-2) 2px} .task-actions{flex-wrap:wrap} .task-bulk-panel,.task-notification-panel{border-top:4px solid #d8e7f4} .task-bulk-controls{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr)) auto;gap:var(--space-2);align-items:end} .task-bulk-controls .field{margin:0} .task-bulk-controls button{min-height:var(--control-md)} .task-notification-list{display:grid;gap:var(--space-2)} .task-notification-item{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel)} .task-notification-item.unread{border-left:4px solid var(--blue);background:#f3f8fc} .task-notification-item h4{margin:0 0 4px} .task-notification-item p,.task-notification-item small{margin:0;color:var(--muted)} .task-notification-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} .task-bulk-select{display:flex;align-items:center;gap:var(--space-2);font-size: var(--text-xs);font-weight:700;color:var(--muted)} .task-bulk-select input{min-height:auto} .task-checklist{display:grid;gap:9px;margin:14px 0} .task-checklist-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel)} .task-checklist-row.done{background:#eff9f3;border-color:#bfe2ca} .task-checklist-row label{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;grid-column:1 / 3;margin:0} .task-checklist-row input{min-height:auto;accent-color:var(--good)} .task-checklist-row button{padding:6px 9px} .task-checklist-progress{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px} .task-checklist-progress strong{font-size:var(--text-base)} .task-checklist-progress span{color:var(--muted);font-size: var(--text-sm)} .task-create-panel .panel-title{margin-bottom:10px} .task-create-panel{border-top:4px solid #d8e7f4} .task-form-grid{grid-template-columns:repeat(4,minmax(160px,1fr))} .task-form-grid .wide{grid-column:1/-1} .task-title-button{display:block;width:100%;padding:0;margin:0 0 2px;background:transparent;color:var(--ink);box-shadow:none;border:0;text-align:left;font-size: var(--text-base);font-weight:600;line-height:var(--leading-tight)} .task-title-button:hover{filter:none;color:var(--blue)} .task-title-button.selected{color:var(--blue)} .task-list-page.hidden,.task-record-page.hidden{display:none} .record-page-header{display:flex;align-items:center;justify-content:space-between;gap:16px;background:white;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;margin-bottom:18px;box-shadow:var(--shadow)} .record-title-block{flex:1;min-width:220px} .record-title-block h3{font-size:var(--text-2xl);letter-spacing:-.03em;margin:2px 0 4px} .record-title-block p{color:var(--muted);font-weight:700;margin:0} .record-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap} .task-record-shell .task-detail-panel{margin-bottom:0} .task-record-shell .task-detail-panel>.panel-title{display:none} .task-detail-panel{border-color:#cddceb} .task-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:10px;margin-bottom:14px} .task-detail-grid div{background:#f7fafc;border:1px solid #e7edf4;border-radius:var(--r-md);padding:var(--space-3)} .task-detail-grid strong{display:block;font-size: var(--text-xs);text-transform:uppercase;color:var(--muted);letter-spacing:.1em;margin-bottom:5px} .task-detail-grid span{display:block;font-weight:700;color:var(--ink);word-break:break-word} .task-message{background:#f8fafc;border:1px solid #e6edf5;border-radius:var(--r-md);padding:13px;margin:12px 0} .task-message strong{display:block;margin-bottom:5px} .task-message p{margin:0;color:#31475d;line-height:var(--leading-snug)} .task-evidence-block{margin:16px 0;border:1px solid #e3ebf4;border-radius:var(--r-md);background:var(--panel);padding:var(--space-3)} .task-evidence-list{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .task-evidence-card{border:1px solid #e3ebf4;border-radius:var(--r-md);background:white;padding:11px;display:grid;gap:7px} .task-evidence-card h4{margin:0;font-size:var(--text-base);color:var(--ink)} .task-evidence-card p{margin:0;color:var(--muted);font-weight:700} .task-filter-row{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:var(--space-2);align-items:center} .lane h3{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)} .lane h3 small{background:white;border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--space-1) var(--space-2);color:var(--muted);font-size: var(--text-xs);font-weight:700} .task-linked-drawings p{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px} .task-closeout-box{margin:16px 0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);padding:14px} .task-closeout-box textarea{margin-top:0} .task-closeout-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0} .task-closeout-box button{margin-top:6px} .task-file-drop{border:1px dashed #b9cbe0;background:#f7fafc;border-radius:var(--r-md);padding:14px;display:grid;gap:7px;color:#31475d} .task-file-drop.wide{grid-column:1/-1} .task-file-drop.dragging{background:#eaf4ff;border-color:var(--blue-2);box-shadow:var(--shadow-card)} .task-file-drop strong{color:var(--ink);font-size: var(--text-base)} .task-file-drop span,.task-file-drop small{color:var(--muted);font-weight:700;line-height:var(--leading-snug)} .task-file-drop input{background:white;border-style:solid;padding:9px;min-height:auto} @media(max-width:1100px){.task-filter-row,.task-closeout-grid{grid-template-columns:1fr}.record-page-header{align-items:stretch;flex-direction:column}.record-header-actions{justify-content:flex-start}.record-header-actions button{width:100%}} @media(max-width:1100px){.task-bulk-controls{grid-template-columns:1fr}.task-notification-item{grid-template-columns:1fr}.task-notification-actions{justify-content:flex-start}} .task-comms{margin-top:18px} .task-comms textarea{margin-top:0} .task-communication-list article{background:#f8fafc;border:1px solid #e6edf5;border-radius:var(--r-md);padding:13px;margin-bottom:10px} .task-communication-list h4{margin:8px 0 4px;font-size: var(--text-base)} .task-communication-list p{margin:0 0 6px;color:#31475d;line-height:var(--leading-snug)} @media(max-width:1100px){.form-grid,.task-form-grid,.task-detail-grid,.prestart-grid,.source-status-grid{grid-template-columns:minmax(0,1fr)}.task-form-grid .wide{grid-column:1}.task-detail-panel .button-row{align-items:stretch}.task-detail-panel .button-row button{width:100%}} .login-mode .sidebar,.login-mode .topbar{display:none} .login-mode .sidebar-scrim,body[data-auth-state="restoring"] .sidebar-scrim{display:none!important} .login-mode main{margin-left:0;width:100%;display:grid;place-items:center;padding:28px} .login-page{width:min(440px,100%);margin:auto;padding-top:env(safe-area-inset-top, 0px)} /* Offline 483 (R2D-14): clear of the status bar in a home-screen Siite */ .login-card{background:white;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);padding:28px} .login-logo{width:54px;height:54px;border-radius:var(--r-md);background:var(--blue);color:white;display:grid;place-items:center;font-size:var(--text-3xl);font-weight:700;margin-bottom:18px} .login-card h3{font-size:var(--text-2xl);letter-spacing:-.03em;margin-bottom:8px} .auth-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px} .auth-controls input{width:100%;min-width:180px} .auth-controls button{flex:1;min-width:130px} /* Visual 453: the sign-in button is the call-to-action, in the website rust. */ .auth-controls #signIn{background:var(--cta);color:var(--cta-ink)} .auth-controls #signIn:hover{background:var(--cta-hover);filter:none} .password-field{position:relative;width:100%;display:flex;align-items:center} .password-field input{padding-right:86px} .password-field button{position:absolute;right:6px;min-width:0;flex:0;padding:7px 10px;border-radius:var(--r-sm)} .user-menu{position:relative} .user-button{width:42px;height:42px;border-radius:50%;padding:0;display:grid;place-items:center;background:var(--blue);box-shadow:none} .user-dropdown{position:absolute;right:0;top:50px;width:240px;max-height:calc(100dvh - 82px);background:white;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);padding:14px;z-index:20;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable} .user-dropdown strong,.user-dropdown span{display:block} .user-dropdown button{width:100%;margin-top:12px} .hidden{display:none!important} .toast-host{position:fixed;right:22px;bottom:22px;z-index:var(--z-toast);display:grid;gap:var(--space-2);width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 44px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;pointer-events:none} .toast{pointer-events:auto;background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-4) 52px var(--space-4) var(--space-4);position:relative;color:var(--ink);font-weight:700;line-height:var(--leading-snug)} .toast.success{border-left-color:var(--good)} .toast.error{border-left-color:var(--bad);background:var(--status-critical-surface);border-color:#efc6c6} .toast.info{border-left-color:var(--blue)} /* 2 Sep audit: 100 warning toasts painted identical to neutral ones - a must-see warning now looks like one. */ .toast.warning{border-left-color:var(--warn, var(--warn));background:var(--status-warning-surface);border-color:#ecd9ae} /* Audit LM-29: the dismiss x is a 44px target (it was 28px wide). */ .toast button{position:absolute;right:2px;top:2px;width:var(--control-md);height:var(--control-md);border-radius:var(--r-pill);padding:0;background:transparent;color:var(--muted);box-shadow:none;border:0;font-size:var(--text-lg);line-height:var(--leading-none)} .toast button:hover{background:var(--line);filter:none;color:var(--ink)} .toast .toast-action{position:static;width:auto;height:auto;margin-top:10px;padding:var(--space-2) var(--space-3);border:1px solid var(--line);border-radius:var(--r-xs);background:#fff;color:var(--navy);font-size: var(--text-sm);line-height:var(--leading-tight)} .toast .toast-action:hover{background:#edf4fa;color:var(--navy)} .toast .toast-dismiss{position:absolute;right:2px;top:2px} /* Square close buttons (notifications drawer and the like): 44 x 44, a real glyph size, not a 36px sliver around a tiny x. Audit LM-29. */ .icon-button{display:inline-grid;place-items:center;min-width:var(--control-md);min-height:var(--control-md);padding:0;font-size:var(--text-xl);line-height:var(--leading-none)} /* Audit P3V-07 (third pass): the bell is the shared line icon (siiteIcon 'bell') in a fixed 44px box, with the unread count as a badge pinned to the button's corner. The CSS-drawn bell (a ::before body and an ::after clapper) collapsed to a 4px bar whenever a count was showing, and its clapper was positioned against the topbar (the button was position:static), so it landed under Clock in as a stray mark on every phone screen. One look at every width; the word "Notifications" stays for screen readers. */ body:not(.login-mode) .topbar .notification-button{position:relative;display:inline-grid;place-items:center;width:var(--control-md);min-width:var(--control-md);height:var(--control-md);min-height:var(--control-md);padding:0;overflow:visible;color:var(--blue)} .notification-button .notification-bell{display:grid;place-items:center;width:20px;height:20px;pointer-events:none} .notification-button .notification-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .notification-button .notification-count{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;line-height:18px;font-size:var(--text-xs);pointer-events:none} .notification-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);background:var(--bad);color:#fff;font-size: var(--text-xs);font-weight:700} .notification-scrim{position:fixed;inset:0;z-index:1230;background:rgba(9,27,46,.28);backdrop-filter:blur(2px)} .notification-drawer{position:fixed;top:0;right:0;bottom:0;z-index:1240;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);width:min(470px,96vw);height:100dvh;background:#f5f8fb;border-left:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden} .notification-drawer-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:var(--space-5);border-bottom:1px solid var(--line);background:#fff} .notification-drawer-header h3,.notification-drawer-header p{margin:0} .notification-drawer-actions{display:flex;gap:8px;flex-wrap:wrap;padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--line);background:#fff} .notification-permission-status{padding:10px 20px;border-bottom:1px solid var(--line);font-size: var(--text-xs);font-weight:700;line-height:var(--leading-snug);background:#f7f9fc;color:var(--muted)} .notification-permission-status.good{background:#effaf4;color:var(--good)} .notification-permission-status.warn{background:#fff9ed;color:#7d5511} .notification-permission-status.bad{background:#fff1f1;color:var(--bad)} .notification-drawer-list{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--space-3)} .notification-drawer-item{margin-bottom:10px;padding:var(--space-3);border:1px solid var(--line);border-radius:var(--r-sm);background:#fff} .notification-drawer-item.unread{border-left:4px solid var(--blue);background:#f8fcff} .notification-open{display:grid;grid-template-columns:10px minmax(0,1fr);gap:10px;width:100%;padding:0;border:0;background:transparent;color:var(--ink);text-align:left;box-shadow:none} .notification-open:hover{background:transparent;filter:none;color:var(--ink)} .notification-open span:last-child{display:grid;gap:4px} .notification-open strong,.notification-open small,.notification-open time{display:block} .notification-open small{color:var(--muted);font-weight:600;line-height:var(--leading-snug)} .notification-open time{color:var(--muted);font-size: var(--text-xs);font-weight:700} .notification-severity{width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--blue)} .notification-severity.high{background:var(--bad)} .notification-item-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px} .notification-empty{display:grid;place-items:center;align-content:center;gap:6px;min-height:240px;padding:30px;text-align:center;color:var(--muted)} .notification-empty strong{color:var(--ink);font-size:var(--text-lg)} body.notification-centre-open{overflow:hidden} @media(max-width:760px){ .notification-drawer{width:100vw;border-left:0} .notification-drawer-header{padding:var(--space-4)} .notification-drawer-actions{padding:10px 16px} .notification-drawer-list{padding:10px} } .build-update-toast{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 46px 14px 15px} .build-update-toast>div{display:grid;gap:3px} .build-update-toast strong{color:var(--blue);font-size:var(--text-base)} .build-update-toast span{color:var(--muted);font-size: var(--text-xs);line-height:var(--leading-snug)} .build-update-toast .build-update-action{position:static;width:auto;height:auto;border-radius:var(--r-sm);padding:9px 12px;background:var(--blue);color:#fff;font-size: var(--text-xs);white-space:nowrap} .build-update-toast .build-update-action:hover{background:#174f7e;color:#fff} .build-update-toast .build-update-dismiss{position:absolute;right:8px;top:8px} @media(max-width:760px){.build-update-toast{grid-template-columns:1fr}.build-update-toast .build-update-action{width:100%}} .bad-text{color:var(--bad)!important} .sync-warning{width:100%;background:#fff8e7;border:1px solid #f1d08d;color:#684500;border-radius:var(--r-md);padding:13px 15px;margin:-8px 0 18px;font-weight:700;line-height:var(--leading-snug);overflow-wrap:anywhere} /* Offline 483 (R2D-10): a long unbroken word (a web address in an error) wraps instead of widening the sign-in card past the screen. */ #authStatus{overflow-wrap:anywhere;min-width:0} .login-mode .sync-warning{width:min(440px,100%);min-width:0;margin:0 auto 18px;white-space:normal;overflow-wrap:anywhere} /* Audit LD36: an urgent failure carries its own error card, so the amber strip steps aside. */ .sync-warning:has(> .siite-empty){background:none;border:0;padding:0;font-weight:400;color:inherit} .data-mode-panel{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;width:100%;border-radius:var(--r-md);padding:12px 15px;margin:-8px 0 18px;border:1px solid #dce6f1;background:white;color:var(--ink);box-shadow:var(--shadow-soft)} .data-mode-panel strong{color:var(--blue);margin-right:auto} .data-mode-panel span{font-size: var(--text-sm);color:var(--muted);font-weight:700} .data-mode-panel.good{border-color:#b3e4c7;background:#f4fbf7} .data-mode-panel.warn{border-color:#f1d08d;background:var(--status-warning-surface)} .data-mode-panel.bad{border-color:#efc6c6;background:var(--status-critical-surface)} .data-mode-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;padding-top:10px;margin-top:2px;border-top:1px solid rgba(16,47,79,.12)} .data-mode-actions div{display:flex;flex-direction:column;gap:3px;min-width:240px;flex:1} .data-mode-actions strong{margin:0;color:var(--ink);font-size:var(--text-base)} .data-mode-actions button{padding:9px 12px;border-radius:var(--r-md);font-size: var(--text-sm);white-space:nowrap} .data-health-banner{display:grid;gap:var(--space-2);border:1px solid var(--line);border-radius:var(--r-md);background:white;padding:var(--space-4);margin-bottom:var(--space-4)} .data-health-banner.good{border-color:#b3e4c7;background:#f4fbf7} .data-health-banner.warn{border-color:#f1d08d;background:var(--status-warning-surface)} .data-health-banner.bad{border-color:#efc6c6;background:var(--status-critical-surface)} .data-health-banner strong{display:block;color:var(--blue);font-size:var(--text-base)} .data-health-banner span{color:var(--muted);font-weight:700;font-size: var(--text-sm)} .data-health-meta{display:flex;gap:var(--space-2) var(--space-4);flex-wrap:wrap} .data-health-banner ul{margin:0;padding-left:var(--space-4);color:#684500;font-weight:700;line-height:var(--leading-snug)} .menu-toggle{width:42px;height:42px;padding:0;display:grid;place-items:center;gap:0} .menu-toggle span{display:block;width:18px;height:2px;background:var(--blue);border-radius:var(--r-pill)} .dashboard-command{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-4);align-items:center;background:linear-gradient(135deg,#102f4f,#17466f);color:white;border-radius:var(--r-md);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow);margin-bottom:var(--space-4)} .dashboard-command h3{font-size:var(--text-2xl);letter-spacing:-.02em;margin:2px 0 var(--space-2);color:white} .dashboard-command p{max-width:760px;color:#dce8f3;font-weight:700;line-height:var(--leading-snug)} .dashboard-command .eyebrow{color:#b7d2e8} .dashboard-command-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:flex-end} .dashboard-command-actions button{white-space:nowrap;min-height:var(--control-md);padding:var(--space-2) var(--space-4)} .dashboard-command-actions .secondary{background:white;color:var(--blue)} .dashboard-readiness{margin-bottom:18px} .dashboard-priority-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-4);align-items:start;margin-bottom:var(--space-4)} .dashboard-trust-and-pulse{display:grid;grid-template-columns:minmax(280px,.75fr) minmax(420px,1.25fr);gap:16px;align-items:start;margin-bottom:18px} .dashboard-pulse-panel .cards{margin:0} .dashboard-pulse-cards{grid-template-columns:repeat(3,minmax(150px,1fr))} .dashboard-module-grid{display:grid;grid-template-columns:repeat(2,minmax(320px,1fr));gap:var(--space-4);margin-bottom:var(--space-4)} .dashboard-module-card .cards{gap:var(--space-2);margin:0} /* columns: the auto-fit rule below (Audit LD23) */ .dashboard-module-card .card{min-height:108px;padding:var(--space-4)} .dashboard-detail-grid{margin-bottom:var(--space-4)} .dashboard-detail-grid:last-child{margin-bottom:0} .topbar{background:linear-gradient(180deg,#102f4f,#0d2b49)!important;color:white;border-bottom:1px solid rgba(255,255,255,.16)!important;box-shadow:var(--shadow)} .topbar .eyebrow,.topbar h2,.topbar-brand strong,.topbar-brand span{color:white} .topbar-brand span{opacity:.78} .topbar-logo{background:white;color:var(--blue)} .topbar .actions{gap:var(--space-2)} .topbar .badge{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:white;box-shadow:none;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .topbar button.secondary,.topbar .menu-toggle{background:white;color:var(--blue);border-color:rgba(255,255,255,.34);box-shadow:var(--shadow-soft)} .topbar button.secondary{padding:var(--space-2) var(--space-3)} .topbar .menu-toggle span{background:var(--blue)} .topbar .user-button{background:white;color:var(--blue)} @media(max-width:1100px){ body{display:flex} .sidebar{position:fixed;left:0;top:142px;bottom:0;width:286px;height:auto;transform:translateX(0);transition:transform var(--motion-slow) var(--ease-out);z-index:20} .sidebar nav{display:flex;grid-template-columns:none} .sidebar .nav{padding:var(--space-3) var(--space-4);font-size:var(--text-base)} .side-footer{margin-top:auto} main{padding:var(--space-6)} .topbar{margin:calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-7);padding:var(--space-4) var(--space-6);top:0;z-index:40} .topbar{flex-direction:row;align-items:flex-start} .topbar-left{flex-direction:column;align-items:flex-start;gap:var(--space-2)} .topbar-brand{min-width:0} .actions{margin-left:auto;justify-content:flex-end;flex-wrap:wrap} /* Audit P3V-06 (third pass): the menu button is in the header row, last, at every width up to 1100px - as it already was on phones. Fixed at right:24px it sat over the user menu at 768 and 1100 (elementFromPoint on the user button returned the menu button). */ .menu-toggle{order:99} } .upload-row{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;margin-top:var(--space-4)} .upload-row input{min-width:260px} @media(max-width:1100px){.auth-controls input,.upload-row input{width:100%;min-width:0}.user-dropdown{left:0;right:auto}} .ledger-intro{margin-bottom:16px} .ledger-toolbar{align-items:stretch} .ledger-toolbar input{flex:1 1 280px} .ledger-toolbar select{min-width:190px} .ledger-cards .card:nth-child(4){border-color:#f1d08d;background:var(--status-warning-surface)} .ledger-alert{display:grid;gap:8px} .ledger-alert ul{margin:0;padding-left:18px} .ledger-analysis{align-items:start} .ledger-review-list{display:grid;gap:10px} .ledger-review-item{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;background:var(--status-critical-surface);border:1px solid #f0cece;border-radius:var(--r-md);padding:13px} .ledger-review-item h4{font-size: var(--text-base);margin:8px 0 4px} .ledger-review-item p{font-size: var(--text-sm);color:#40556b;line-height:var(--leading-snug)} .ledger-review-item small{display:block;color:var(--muted);font-weight:700;margin-top:6px} .ledger-review-item strong{white-space:nowrap;color:var(--bad)} .review-item{display:grid;gap:var(--space-2);background:#fff; border:1px solid var(--line);border-radius:var(--r-md);padding:var(--space-3);box-shadow:var(--shadow-soft)} .review-item strong{font-size: var(--text-base)} /* V1-23 (Visual 456): a status chip in a review card is its own size, never stretched across the card. */ .review-item > .pill,.workforce-ai-item > .pill{justify-self:start;max-width:100%} .review-item small{color:var(--muted);font-weight:700;line-height:var(--leading-snug)} .source-status-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--space-4);margin-bottom:var(--space-4);box-shadow:var(--shadow)} .source-status-panel .panel-title{border-bottom:1px solid var(--line);padding-bottom:var(--space-2);margin-bottom:var(--space-4)} .source-status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-2)} .source-status-card{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--space-3);background:var(--bg);display:grid;gap:var(--space-2);min-height:128px} .source-status-card.good{border-color:#bfe2cc;background:#f5fff8} .source-status-card.warn{border-color:#f1d08d;background:var(--status-warning-surface)} .source-status-card.bad{border-color:#efcfcf;background:var(--status-critical-surface)} .source-status-card.neutral{border-color:#d8e2ec;background:var(--bg)} .source-status-card strong{font-size: var(--text-sm);color:var(--ink);line-height:var(--leading-tight);overflow-wrap:anywhere} .source-status-card small{color:var(--muted);font-size: var(--text-xs);line-height:var(--leading-tight)} .source-card-head{display:flex;flex-direction:column;gap:6px;align-items:flex-start} .source-card-head strong{overflow-wrap:break-word;word-break:normal} .data-confidence-badge{display:inline-flex;align-items:center;border-radius:var(--r-pill);padding:var(--space-1) var(--space-3);font-size: var(--text-xs);font-weight:700;white-space:normal;line-height:var(--leading-snug);max-width:100%;background:var(--line);color:var(--muted)} .data-confidence-badge.good{background:var(--status-ok-surface);color:var(--good)} .data-confidence-badge.warn{background:var(--status-warning-surface);color:var(--warn-ink)} .data-confidence-badge.bad{background:var(--status-critical-surface);color:var(--bad)} .data-confidence-badge.neutral{background:var(--line);color:var(--muted)} .data-trust-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--space-2);margin-bottom:var(--space-4)} .data-trust-warning{display:grid;gap:4px} .report-source-list h4{margin:12px 0 8px} .ledger-empty-state{display:grid;gap:10px;text-align:left} .ledger-empty-state strong{color:var(--ink);font-size:var(--text-base)} .ledger-empty-state span,.ledger-empty-state small{color:var(--muted);font-weight:700} .table-empty{padding:var(--space-4);color:var(--muted);font-weight:700;background:var(--bg);border-radius:var(--r-md)} .attachment-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px} .attachment-card{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden;display:grid;box-shadow:var(--shadow-soft)} .attachment-preview{min-height:150px;background:var(--line);display:grid;place-items:center} .attachment-preview img,.attachment-preview video{width:100%;height:190px;object-fit:cover;display:block;background:var(--line)} .attachment-file-icon{display:grid;place-items:center;width:72px;height:72px;border-radius:var(--r-md);background:var(--blue);color:#fff;font-size:var(--text-lg);font-weight:700;letter-spacing:.08em} .attachment-card-body{display:grid;gap:7px;padding:var(--space-3)} .attachment-card-body strong{font-size:var(--text-base);color:var(--ink);line-height:var(--leading-tight);word-break:break-word} .attachment-card-body small{color:var(--muted);font-weight:700} @media(max-width:1100px){.source-status-grid,.prestart-grid,.prestart-checklist-grid{grid-template-columns:1fr}} .exception-group{display:grid;gap:8px;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--space-3);background:var(--panel)} .exception-group-head{display:flex;justify-content:space-between;align-items:center;gap:10px} .exception-group-head strong{font-size:var(--text-base);color:var(--ink)} .exception-triage{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px} .exception-triage small{color:var(--muted);font-weight:700} .inline-action{display:inline-flex;width:max-content;border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 9px;background:white;color:var(--blue);font-size: var(--text-xs);font-weight:700} .commercial-triage-item{gap:10px} .commercial-triage-item.muted-item{opacity:.72;background:#f7f8fa} .review-item-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .commercial-triage-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;align-items:end;margin-top:4px} .commercial-triage-controls label{display:grid;gap:5px;margin:0;min-width:0} .commercial-triage-controls span{font-size: var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)} .commercial-triage-controls input,.commercial-triage-controls select{min-height:var(--control-md);min-width:0;width:100%} .commercial-review-readiness{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 14px} .commercial-review-readiness>.row-actions{grid-column:1/-1} .report-delivery-history{margin-top:10px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;overflow:hidden} .report-delivery-history summary{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;cursor:pointer} .today-support-panel summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);cursor:pointer;min-height:var(--control-md)} .today-support-panel summary::-webkit-details-marker{display:none} .today-support-panel summary>span:first-child{display:flex;flex-direction:column;gap:2px} .today-support-panel summary strong{font-size: var(--text-base);font-weight:600;letter-spacing:-.01em} .today-support-panel summary small{color:var(--muted);font-size: var(--text-xs)} .today-support-panel summary>span:last-child{font-weight:600;color:var(--blue-2);white-space:nowrap} /* Calm 469 (R2B-18): "Site tools" has ONE span, so the figure rule above (nowrap, blue) caught its title and line, and at 390 the line ran off the right edge. A lone span is the title block. */ .today-support-panel summary>span:only-child{white-space:normal;min-width:0;flex:1 1 auto;color:inherit;font-weight:inherit} .today-support-panel summary:after{content:"▾";color:var(--muted);margin-left:6px;transition:transform var(--motion) var(--ease-out)} .today-support-panel[open] summary:after{transform:rotate(180deg)} .report-delivery-history summary span{color:var(--muted);font-size: var(--text-xs)} .report-delivery-history .table-wrap{border:0;border-top:1px solid var(--line);border-radius:0} .report-delivery-ledger td small{display:block;color:var(--muted)} .row-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .prestart-panel{border-color:#ead39a;background:#fffdf7} .prestart-grid{display:grid;grid-template-columns:repeat(3,minmax(190px,1fr));gap:10px} .prestart-item{display:grid;gap:6px;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--space-3);background:white} .prestart-item.good{border-color:#bfe2cc;background:#f6fff9} .prestart-item.warn{border-color:#f1d08d;background:var(--status-warning-surface)} .prestart-item strong{font-size: var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)} .prestart-item span{font-weight:700;color:var(--ink)} .prestart-item small{color:var(--muted);line-height:var(--leading-snug)} .prestart-item button{width:max-content;padding:7px 10px;font-size: var(--text-xs)} .prestart-checklist-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)} .prestart-checklist-column{min-width:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);padding:var(--space-4);display:grid;gap:var(--space-3)} .prestart-checklist-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start} .prestart-checklist-head h4{font-size:var(--text-base);color:var(--ink)} .prestart-checklist-head span{color:var(--muted);font-size: var(--text-xs);font-weight:700} .prestart-checklist-items{display:grid;gap:var(--space-2)} .prestart-checklist-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2);align-items:start;min-width:0;border:1px solid #e3ebf4;border-radius:var(--r-md);background:white;padding:var(--space-3)} .prestart-checklist-item.good{border-color:#bfe2cc;background:#f6fff9} .prestart-checklist-item.warn{border-color:#f1d08d;background:var(--status-warning-surface)} .prestart-checklist-item strong{display:block;font-size: var(--text-sm);color:var(--ink)} .prestart-checklist-item small{display:block;margin:var(--space-1) 0 var(--space-2);color:var(--muted);line-height:var(--leading-snug)} .prestart-checklist-item button{padding:var(--space-2) var(--space-2);font-size: var(--text-xs);white-space:nowrap} .po-card{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);padding:14px} .po-card h4{margin:7px 0 5px;color:var(--ink)} .po-card p{color:var(--muted);line-height:var(--leading-snug);margin-bottom:7px} .po-card small{display:block;color:var(--muted);font-weight:700} /* 4 Sep (Jim: "buttons still look bad"): the action column wrapped differently on every card. One fixed column, equal buttons, never wrapping mid-word. */ .po-card>div:first-child{min-width:0;flex:1 1 auto} .po-card .button-row.compact-buttons{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,minmax(96px,auto));gap:8px;align-items:start;align-self:flex-start} .po-card .button-row.compact-buttons button{white-space:nowrap;width:100%;margin:0} @media(max-width:1100px){.po-card .button-row.compact-buttons{grid-template-columns:repeat(3,1fr);width:100%}} .daily-programme-progress{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);margin:12px 0} .daily-programme-progress h5{margin:0} .daily-progress-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)} .daily-progress-name{display:grid;gap:2px;min-width:0} .daily-progress-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end} .daily-progress-controls input{width:74px;min-height:var(--control-md)} /* Written at the house specificity: `body:not(.login-mode) button.secondary` outranked the plain rule, so a chosen figure never showed as chosen. */ body:not(.login-mode) .daily-progress-controls button.active,body:not(.login-mode) .daily-progress-chips button.active{background:var(--blue);color:#fff;border-color:var(--blue)} .daily-progress-detail{grid-column:1/-1;display:grid;gap:10px;padding:10px 12px;border-radius:var(--r-sm);background:var(--sand-tint)} .daily-progress-detail[hidden]{display:none} tr.price-book-focus>td{background:var(--sand-tint)} .daily-progress-ask{display:grid;gap:6px} .daily-progress-ask>span{font-size: var(--text-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .daily-progress-chips{display:flex;flex-wrap:wrap;gap:6px} .daily-progress-chips button{min-height:var(--control-md)} .daily-progress-quantity{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .daily-progress-quantity input{width:110px;min-height:var(--control-md)} .daily-progress-quantity select{min-height:var(--control-md)} @media(max-width:760px){.daily-progress-row{grid-template-columns:1fr}.daily-progress-controls{justify-content:flex-start}} .files-workspace{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px;margin-bottom:14px} .files-rail{display:grid;gap:6px;align-content:start;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);padding:10px} .files-rail-item{display:grid;gap:2px;text-align:left;border:1px solid transparent;border-radius:var(--r-sm);padding:8px 10px;background:transparent;color:inherit;cursor:pointer} .files-rail-item small{color:var(--muted)} .files-rail-item.active{border-color:var(--blue);background:var(--accent-soft, #eaf1f8)} .files-pane{min-width:0;display:grid;gap:10px} .files-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap} .files-toolbar h3{margin:0} .files-toolbar button.active{background:var(--blue);color:#fff} .files-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);margin-bottom:6px} .files-row-main{display:grid;gap:2px;min-width:0} .files-row-main small{color:var(--muted)} @media(max-width:760px){.files-workspace{grid-template-columns:1fr}.files-rail{display:flex;overflow-x:auto;gap:8px}.files-rail-item{min-width:150px}} .workforce-contact{display:block} .workforce-contact a{margin-right:6px} .compact-records article{border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);padding:var(--space-3)} .dar-card{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);padding:14px} .dar-card.red{border-color:#e4a4a4;background:var(--status-critical-surface)} .dar-card.amber{border-color:#f1d08d;background:var(--status-warning-surface)} .dar-card.green{border-color:#bfe2cc;background:#f6fff9} .dar-card h4{margin:7px 0 5px;color:var(--ink)} .dar-card p{color:#31475d;line-height:var(--leading-snug);margin-bottom:7px} .dar-card small{display:block;color:var(--muted);font-weight:700} .dar-filters select{min-width:180px} @media(max-width:760px){.po-card{display:grid}.po-card .button-row{justify-content:flex-start}} .map-panel{overflow:hidden} .map-panel .panel-title{align-items:flex-start} .map-frame{width:100%;height:340px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--line)} .map-frame iframe{width:100%;height:100%;border:0;display:block} .inline-choice-button{padding:7px 10px;font-size: var(--text-xs);box-shadow:none} /* Offline 483 (R2D-05): sized to the VISIBLE viewport (--siite-vvh and --siite-vv-top, kept by siiteTrackVisualViewport in app.js), so an iPhone keyboard shrinks the sheet instead of covering its confirm row and photo buttons. Without the variables it is exactly 100dvh, as before. */ .choice-overlay{position:fixed;inset:0;top:var(--siite-vv-top,0px);bottom:auto;height:var(--siite-vvh,100dvh);background:rgba(9,31,52,.45);z-index:var(--z-dialog);display:flex;align-items:flex-start;justify-content:center;padding:22px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .choice-sheet{width:min(520px,100%);max-height:calc(var(--siite-vvh,100dvh) - 44px);margin:auto;background:white;border:1px solid var(--line);border-radius:var(--r-md);padding:18px;box-shadow:var(--shadow);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable} .dialog-form{display:grid;gap:12px;margin-top:14px} .dialog-field{display:grid;gap:var(--space-2)} .dialog-field span{font-size: var(--text-sm);font-weight:700;color:#354c63} .dialog-field input,.dialog-field textarea,.dialog-field select{width:100%;margin:0} /* Audit LM-22: a dialog whose job is a primary site action (Send report) gets the 52px site target. */ body:not(.login-mode) button.site-primary-action{min-height:52px;padding-inline:22px} /* Audit LM-13: read-only text in a dialog (the RAMS to sign) reads as a document in the sheet's own scroll. */ .dialog-display-text{white-space:pre-wrap;overflow-wrap:anywhere;padding:var(--space-3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);font-size:var(--text-base);line-height:var(--leading-normal)} /* Audit LM-12: a declaration tick-box ("I have read the RAMS") sits beside its words on one line, a 24px box tied to the sentence it confirms, instead of a full-width control centred above the text. */ .dialog-field:has(> input[type=checkbox]){grid-template-columns:auto 1fr;align-items:start;column-gap:12px;min-height:var(--control-md);cursor:pointer} .dialog-field > input[type=checkbox]{width:24px;height:24px;min-height:0;margin:2px 0 0;accent-color:var(--blue)} /* Audit P3V-28 (third pass): a multi-choice is a list of tick boxes - 24px boxes, each row a 44px label - never a Cmd-click