:root{
  /* Brand palette — DESIGN.md §3. Deep Charcoal, Precision Teal,
     Innovation Orange, Blueprint Grey, Soft Mist. */
  --navy:#1F3864;--teal:#009999;--orange:#FF9900;--ch:#333333;
  --grey:#A6A6A6;--mist:#F2F2F2;--white:#fff;
  /* Blueprint Grey is 2.43:1 on white, so it keeps its gridline/border/disabled
     roles while --ink-2 (6.4:1) carries secondary TEXT. DESIGN.md §3 deviation. */
  --ink-2:#5A6470;
  /* Precision Teal is 3.49:1 on white — fine as a non-text mark (the 3:1 floor)
     but below the 4.5:1 text floor, and it sat on every primary button in the
     product. --teal-ink (#008080, 4.77:1) carries teal TEXT and any teal fill
     that has text on it; --teal keeps gauges, bars, rules, dots and the active
     tab. Same hue, darker: the hue is what is recognised, not the lightness.
     Ruled 14 Aug 2026 — DESIGN.md §3. */
  --teal-ink:#008080;
  /* RAG — DESIGN.md §4 */
  --red:#D32F2F;--amber:#F57C00;--green:#388E3C;
  /* RIBA stages — pixel-sampled from the official Plan of Work diagram, DESIGN.md §5 */
  --s0:#EA9840;--s1:#E19FC0;--s2:#75B9C2;--s3:#ECC400;
  --s4:#86B28F;--s5:#B1B1D8;--s6:#E5CE96;--s7:#629FCB;
  --hdr:68px;--side:330px;
  --wrap:1720px;--wrap-site:1320px;--wrap-form:1180px;--wrap-app:1400px;   /* MAP dashboard + picker column */
  /* ── Type scale — DESIGN.md §6 (15 Aug 2026). Fixed rem steps, tight ratio;
     16px browser default renders identically to the old px sizes. Nine steps
     for the whole product: nothing else may set a font-size in px. ── */
  --fs-2xs:.75rem;   /* 12 · micro: footer strips, demo badge, stage numbers        */
  --fs-sm:.875rem;   /* 14 · label · pill/badge · table header · secondary line · id */
  --fs-md:1rem;      /* 16 · body: UI text, table primary text, controls, prose      */
  --fs-lg:1.125rem;  /* 18 · lede · page subtitle · modal body                       */
  --fs-xl:1.25rem;   /* 20 · card/panel title (h3) · toolbar figure                  */
  --fs-2xl:1.5rem;   /* 24 · section/modal/drill title (h2) · inline figure          */
  --fs-3xl:2rem;     /* 32 · page title (h1, Fraunces) · gauge figure                */
  --fs-4xl:2.5rem;   /* 40 · marketing section title                                 */
  --fs-hero:4.5rem;  /* 72 · landing hero only                                       */
  --lh-tight:1.2;--lh-ui:1.4;--lh-prose:1.6;
  --track-caps:.06em;              /* uppercase labels at sm/2xs */
  /* Weights: 400 / 500 / 600 only. The Figtree and Fraunces files are variable
     (300–900) but the faces are declared to 600; 700 never rendered heavier. */
  /* ── Spacing — 4px scale ── */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;
  /* ── Structure tokens — every divider/rule and every row hover (DESIGN.md §9) ── */
  --line:#E6E9ED;--hover:#F4F6F8;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:100%;}
html,body{height:100%;overflow:hidden;font-family:'Figtree',sans-serif;color:var(--ch);}
body{font-size:var(--fs-md);line-height:var(--lh-ui);}

/* ── TYPE ROLES — DESIGN.md §6. Roles are classes; the tokens above are the
   only sizes. Fold-in selectors keep old class names working. ── */
.lbl,.th,.col-hdr-txt{font-size:var(--fs-sm);font-weight:600;line-height:var(--lh-ui);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2);}
.lbl-on-dark,.col-hdr-txt,#col-hdr-row .th{color:rgba(255,255,255,.72);}
.tbl-hdr-light .th{color:var(--ink-2);}
.h1{font-family:'Fraunces',serif;font-size:var(--fs-3xl);font-weight:400;line-height:var(--lh-tight);color:var(--navy);}
.h2{font-family:'Figtree',sans-serif;font-size:var(--fs-2xl);font-weight:600;line-height:var(--lh-tight);}
.h3{font-family:'Figtree',sans-serif;font-size:var(--fs-xl);font-weight:600;line-height:var(--lh-tight);}
.pill{display:inline-block;font-size:var(--fs-sm);font-weight:600;line-height:var(--lh-ui);white-space:nowrap;}
.figure,.kpi{font-family:'DM Mono',monospace;font-weight:500;font-variant-numeric:tabular-nums;}
.prose{font-size:var(--fs-md);line-height:var(--lh-prose);max-width:72ch;}
.tbl-zebra>*:nth-child(even){background:var(--mist);}
small{font-size:var(--fs-2xs);}   /* the browser's .833em is off the scale */
/* Drill / modal tables: one table role, light header (DESIGN.md §9). */
.dtbl{width:100%;border-collapse:collapse;font-size:var(--fs-md);}
.dtbl th{text-align:left;padding:7px 8px;background:var(--mist);border-bottom:1px solid var(--line);}
.dtbl th{font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2);}
.dtbl td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top;}
.td-mono{font-family:'DM Mono',monospace;font-size:var(--fs-sm);font-weight:400;padding:7px 8px;border-bottom:1px solid var(--line);}
/* Callouts: a tinted notice with a 1px line — colour marks the RAG state,
   never a coloured bar (DESIGN.md §10 craft floor). */
.callout{padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:6px;font-size:var(--fs-md);line-height:var(--lh-prose);margin-bottom:var(--sp-3);}
.callout-ok{background:#E8F5E9;border-color:#C8E6C9;}
.callout-warn{background:#FFF3E0;border-color:#FFE0B2;}
.callout-crit{background:#FFEBEE;border-color:#FFCDD2;}
.callout-note{background:var(--mist);}
.callout-sm{padding:var(--sp-2) var(--sp-3);line-height:var(--lh-ui);}
.empty-note{padding:var(--sp-6);text-align:center;font-size:var(--fs-md);color:var(--ink-2);}
::-webkit-scrollbar{width:4px;height:4px;}::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px;}

/* Android edge-to-edge safe-area fix (Pixel 10 Pro Fold etc, Android 15+).
   The WebView extends under the system status bar by default; without this,
   every top nav bar (#nav, .hs-nav, .cd-nav, .ap-nav) gets overlaid by the
   clock and notification icons. env(safe-area-inset-top) returns 0 on the
   Windows .exe (Edge --app mode), so this block is a no-op there. */
#nav, .hs-nav, .cd-nav, .ap-nav {
  padding-top: env(safe-area-inset-top, 0px);
}
#nav      { height: calc(var(--hdr) + env(safe-area-inset-top, 0px)); }
.hs-nav   { height: calc(72px + env(safe-area-inset-top, 0px)); }
.cd-nav   { height: calc(68px + env(safe-area-inset-top, 0px)); }
.ap-nav   { height: calc(68px + env(safe-area-inset-top, 0px)); }

/* ── APP ── */
#app{display:none;flex-direction:column;height:100%;background:var(--mist);}

/* ── NAV ── */
#nav{height:var(--hdr);background:var(--navy);display:flex;align-items:center;padding:0 18px 0 14px;border-bottom:2px solid rgba(0,153,153,.3);flex-shrink:0;}
/* Nav logo: the weave mark is a real alpha PNG (assets/img/loom-mark.png) — no blend tricks.
   TRAP: inline SVGs sharing mask/filter ids resolve url(#...) to the FIRST document instance;
   if that one sits in a display:none subtree the mask silently fails and the raw image paints. */
.nav-logo{display:flex;align-items:center;margin-right:28px;flex-shrink:0;line-height:0;}
.nav-logo svg{height:26px;width:auto;display:block;}
.ntabs{display:flex;align-items:stretch;height:var(--hdr);}
.ntab{display:flex;flex-direction:column;justify-content:center;padding:0 18px;cursor:pointer;border-bottom:3px solid transparent;transition:all .16s;user-select:none;}
.ntab:hover{background:rgba(255,255,255,.05);}.ntab.active{border-bottom-color:var(--teal);background:rgba(255,255,255,.06);}
.ntab-n{font-size:var(--fs-md);font-weight:600;letter-spacing:var(--track-caps);text-transform:uppercase;color:rgba(255,255,255,.62);}.ntab.active .ntab-n{color:#fff;}
.ntab-s{font-size:var(--fs-sm);color:rgba(255,255,255,.4);margin-top:1px;}.ntab.active .ntab-s{color:rgba(255,255,255,.78);}
/* Demonstration modules are labelled wherever they can be reached (PRODUCT.md principle 3). */
.demo-badge{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:9px;background:rgba(255,153,0,.18);border:1px solid rgba(255,153,0,.55);color:#FFB84D;font-size:var(--fs-2xs);font-weight:600;letter-spacing:var(--track-caps);text-transform:none;vertical-align:middle;}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:10px;}
/* THE project identity in the chrome (DESIGN.md §2 ruling, 15 Aug): bright
   enough to be read as a label, ellipsised so it can never push the nav past
   1280 (the 1280/1366 nav test guards it).
   Cap raised 360→440px, 17 Aug. Measured at 1280: the seeded worst case
   ("NMGH Redevelopment (NHP Pathfinder) · Higher Risk Building") wants a
   420.8px box and lost 61px to the ellipsis — on an HRB project the ellipsis
   ate the risk classification, which is the one word on that label a
   compliance lead is looking for. MAP had 114.5px of nav sitting free at the
   time (the stage pill only shows on LENS/TRACE), so the old cap was costing
   legibility to buy room nothing needed. 440 clears the worst case with 19px
   spare and still leaves ~74px of slack. Longer names still ellipsise, by
   design, and the title attribute carries the full string. */
.proj-tag{font-size:var(--fs-sm);font-weight:600;color:rgba(255,255,255,.88);font-family:'Figtree',sans-serif;padding:3px 10px;border:1px solid rgba(255,255,255,.28);border-radius:3px;max-width:440px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--teal-ink);display:flex;align-items:center;justify-content:center;font-size:var(--fs-md);font-weight:600;color:#fff;cursor:pointer;position:relative;}
.avatar-menu{position:absolute;top:34px;right:0;background:#fff;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.18);min-width:155px;z-index:99;display:none;overflow:hidden;}
.avatar-menu.open{display:block;}
.am-item{padding:10px 14px;font-size:var(--fs-md);cursor:pointer;color:var(--ch);display:flex;align-items:center;gap:8px;transition:background .12s;}.am-item:hover{background:var(--mist);}.am-item.danger{color:var(--red);}
/* Planned capability wears the grey of the planned-capability button, so the
   menu says what is live before it is clicked, not after (F-L3). */
.am-item.am-planned{color:var(--ink-2);}

/* ── ICONS (17→20 Aug) ────────────────────────────────────────────────────
   31 emoji did icon work until now. Emoji are someone else's artwork in
   someone else's palette, at a different weight per operating system, and
   they cannot take --navy or --teal-ink — on a surface a compliance lead
   reads unaccompanied, a colour cartoon beside a regulatory figure reads as
   unserious. The set lives in js/icons.js on one 24px grid at one weight.
   This class only sizes and aligns: colour is inherited, always, so an icon
   on navy is the same asset as an icon on white. */
.ico{display:inline-block;vertical-align:-.125em;flex-shrink:0;}
/* Beside text: optical centring on the line box, not the baseline. */
.ico-inline{vertical-align:-.16em;margin-right:.15em;}
/* The landing pillars and sector tiles set their own size on the wrapper. */
.ico-lg{width:2.1em;height:2.1em;vertical-align:middle;}
/* Wrappers the emoji used to sit in. They keep the type token that sized the
   glyph, so the SVG's `em` width resolves against the same basis the emoji
   did and nothing moves; the margin each inline style carried moves here too.
   `line-height:1` because a glyph sat on a text baseline and a box does not —
   without it the old leading is left behind as a gap. */
.ico-slot{font-size:var(--fs-3xl);line-height:1;}
.ico-sector{font-size:var(--fs-2xl);line-height:1;margin-bottom:8px;}
/* Empty-state marks are muted: they label an absence, and a full-strength
   navy mark above "nothing here yet" reads as a status. */
.ico-state{font-size:var(--fs-2xl);line-height:1;margin-bottom:8px;color:var(--ink-2);}
.gw-ico{display:inline-flex;align-items:center;line-height:1;}

/* ── STAGE PILL (20 Aug) ──────────────────────────────────────────────────
   The popover used to be a DOM DESCENDANT of the pill that opens it: a
   control nested inside a control, with the popover's own "Advance stage"
   button inside the pill's click target. It only worked because the handler
   called stopPropagation, and it was invalid for assistive technology — a
   button cannot contain a dialog.
   The positioning context is now a NEUTRAL wrapper, so the popover is the
   pill's SIBLING. No absolute-offset maths, and the pill can be a real
   <button> with aria-expanded, which is what a disclosure is. */
.stage-wrap{position:relative;display:flex;align-items:center;}
#cur-stage-pill{display:flex;align-items:center;gap:5px;padding:3px 10px;border-radius:4px;
  background:#82C09B22;border:1px solid #82C09B;cursor:pointer;font-family:inherit;}
#cur-stage-pill:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
/* The landing runs on a near-black ground and its base text colour is #333.
   An emoji carried its own colour so that never mattered; a currentColor icon
   inherits it and disappears — measured at ~1:1 against the section behind it,
   which is not a nitpick but an invisible control. Marks on the dark ground
   take --teal: DESIGN.md §3 keeps #009999 on every NON-TEXT mark, and it
   measures ~5:1 here, well clear of the 3:1 graphical floor. */
.hs-pillar-icon,.ico-sector,.hs-contact-icon{color:var(--teal);}

/* ── MODULES ── */
.module{display:none;flex:1;overflow:hidden;}.module.active{display:flex;flex-direction:column;}

/* ── SHARED ── */
.btn{padding:6px 13px;border-radius:4px;font-size:var(--fs-md);font-weight:600;cursor:pointer;border:none;font-family:'Figtree',sans-serif;transition:all .16s;letter-spacing:var(--track-caps);}
/* Teal fills that carry text take --teal-ink: white on #009999 is 3.49:1, on
   #008080 it is 4.77:1. The outline button's border matches its own text. */
.btn-teal{background:var(--teal-ink);color:#fff;}.btn-teal:hover{background:#006e6e;}
.btn-out{background:transparent;border:1px solid var(--teal-ink);color:var(--teal-ink);}.btn-out:hover{background:var(--teal-ink);color:#fff;}
.btn-red{background:var(--red);color:#fff;}.btn-red:hover{background:#8b0000;}
.btn-grey{background:var(--mist);border:1px solid #ddd;color:var(--ink-2);}.btn-grey:hover{background:#e4e4e4;}
.btn-sm{padding:4px 10px;font-size:var(--fs-sm);}
.btn-navy{background:var(--navy);color:#fff;}.btn-navy:hover{background:#16294a;}
.card{background:#fff;border-radius:7px;border:1px solid var(--line);overflow:hidden;}
.card-hdr{padding:9px 15px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;flex-shrink:0;}
.card-title{font-size:var(--fs-xl);font-weight:600;line-height:var(--lh-tight);color:var(--navy);}
.card-cnt{font-family:'Figtree',sans-serif;font-size:var(--fs-sm);color:var(--ink-2);margin-left:auto;}
/* Disclosure card (details/summary): the header is the toggle. Marker hidden,
   our own chevron rotates on [open]. Collapsed cards keep the header only. */
.card-disclosure>summary{cursor:pointer;list-style:none;user-select:none;}
.card-disclosure>summary .card-title{white-space:nowrap;}
.card-count{display:inline-block;font-family:'DM Mono',monospace;font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);
  background:var(--mist);border-radius:9px;padding:1px 7px;vertical-align:2px;margin-left:2px;}
.card-disclosure>summary::-webkit-details-marker{display:none;}
.card-disclosure:not([open])>summary{border-bottom:none;}
.card-chev{width:8px;height:8px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);
  transform:rotate(-45deg);transition:transform .15s;flex-shrink:0;margin-left:4px;}
.card-disclosure[open]>summary .card-chev{transform:rotate(45deg);}
.chip{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:10px;font-size:var(--fs-sm);font-weight:600;background:var(--mist);color:var(--ch);cursor:pointer;border:1px solid transparent;transition:all .13s;white-space:nowrap;user-select:none;}
.chip:hover{background:#e4e4e4;}
/* Filter chips say WHICH filter is on — one navy active state. The status
   colour lives on each row's pill, never on the chip (DESIGN.md §9). RIBA
   stage chips are a legend and keep their hues (set inline by setSingle,
   which outranks this rule precisely because it is inline).
   17 Aug: promoted from `#gap-filters .chip.active` to every chip. The MAP
   sidebar groups were each painting their own colour — BSA #8B0000, Data
   State #00695C, SFG #5D4037 — three colours in no palette, all of them
   saying "this filter is on" in a language reserved for status. */
.chip.active{background:var(--navy);color:#fff;}
/* .th — see the TYPE ROLES block: one label role for every table header. */
.tbadge{display:inline-block;padding:2px 5px;border-radius:2px;font-size:var(--fs-sm);font-weight:600;text-transform:uppercase;white-space:nowrap;}
.sbadge{padding:2px 5px;border-radius:2px;font-size:var(--fs-sm);font-weight:500;font-family:'DM Mono',monospace;}
.sb-c{background:#E8F4FD;color:#0A3D62;}.sb-f{background:#f0f0f0;color:#aaa;}
.bsa-tag{display:inline-flex;padding:2px 5px;border-radius:2px;background:#FFEBEE;color:#B71C1C;font-size:var(--fs-sm);font-weight:600;margin:1px;}
.status-pill{padding:2px 7px;border-radius:10px;font-size:var(--fs-sm);font-weight:600;line-height:var(--lh-ui);display:inline-block;white-space:nowrap;}
.sp-urgent{background:var(--red);color:#fff;}.sp-bsa{background:#8B0000;color:#fff;}
.sp-gap{background:#FFEBEE;color:var(--red);}.sp-partial{background:#FFF3E0;color:var(--amber);}
.sp-complete{background:#E8F5E9;color:var(--green);}.sp-cafm{background:#E3F2FD;color:#1565C0;}
.sp-spatial{background:#F3E5F5;color:#6A1B9A;}.sp-cobie{background:#E0F2F1;color:#004D40;}
.tier-tag{display:inline-block;padding:1px 5px;border-radius:2px;font-size:var(--fs-sm);font-weight:600;}
.stage-dep{color:var(--ink-2);font-style:italic;font-size:var(--fs-sm);}
.owner-tag{padding:2px 6px;border-radius:3px;font-size:var(--fs-sm);background:var(--mist);color:var(--ch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:152px;display:inline-block;}
.toggle-sw{position:relative;width:34px;height:18px;flex-shrink:0;}
.toggle-sw input{opacity:0;width:0;height:0;}
.toggle-sl{position:absolute;cursor:pointer;inset:0;background:#ccc;border-radius:20px;transition:.2s;}
.toggle-sl::before{content:'';position:absolute;width:12px;height:12px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s;}
input:checked+.toggle-sl{background:var(--teal);}
input:checked+.toggle-sl::before{transform:translateX(16px);}

/* ── CONFIRM MODAL ── */
#confirm-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:600;display:none;align-items:center;justify-content:center;}
#confirm-modal.open{display:flex;}
.cm-card{background:#fff;border-radius:10px;padding:28px 32px;width:420px;text-align:center;box-shadow:0 16px 48px rgba(0,0,0,.22);}
.cm-title{font-family:'Figtree',sans-serif;font-size:var(--fs-2xl);color:var(--navy);margin-bottom:10px;font-weight:600;}
.cm-body{font-size:var(--fs-lg);color:var(--ink-2);margin-bottom:24px;line-height:var(--lh-prose);}
.cm-btns{display:flex;gap:10px;justify-content:center;}

/* ── TOAST ── */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 20px;border-radius:6px;font-size:var(--fs-md);z-index:1200;opacity:0;transition:opacity .3s;pointer-events:none;}
#toast.show{opacity:1;}

/* ── DRILL OVERLAY ── */
#drill-overlay{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:1100;display:none;align-items:center;justify-content:center;}
#drill-overlay.open{display:flex;}
#drill-card{background:#fff;border-radius:10px;width:980px;max-width:92vw;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 64px rgba(0,0,0,.28);}
#drill-hdr{padding:16px 20px;background:var(--navy);display:flex;align-items:flex-start;gap:12px;flex-shrink:0;}
#drill-htx{flex:1;}
#drill-id{font-family:'DM Mono',monospace;font-size:var(--fs-md);color:var(--teal-ink);}
#drill-name{font-family:'Figtree',sans-serif;font-size:var(--fs-2xl);color:#fff;font-weight:600;margin-top:3px;line-height:var(--lh-tight);}
#drill-sub{font-size:var(--fs-md);color:rgba(255,255,255,.45);margin-top:3px;}
.drill-close{color:rgba(255,255,255,.5);font-size:var(--fs-3xl);cursor:pointer;padding:2px 6px;line-height:1;background:none;border:none;flex-shrink:0;transition:color .13s;}.drill-close:hover{color:#fff;}
#drill-tabs{display:flex;background:#fafafa;border-bottom:1px solid #f0f0f0;flex-shrink:0;}
.dtab{padding:9px 15px;font-size:var(--fs-md);font-weight:600;cursor:pointer;border-bottom:2px solid transparent;color:var(--ink-2);background:none;border-top:none;border-left:none;border-right:none;font-family:'Figtree',sans-serif;transition:all .13s;}
.dtab.active{color:var(--teal-ink);border-bottom-color:var(--teal);}
#drill-body{flex:1;overflow-y:auto;padding:18px 20px;}
.ds{margin-bottom:16px;}
.ds-title{font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2);margin-bottom:7px;padding-bottom:3px;border-bottom:1px solid var(--mist);}
.df{display:flex;justify-content:space-between;align-items:flex-start;padding:4px 0;gap:8px;border-bottom:1px solid #fafafa;}
.df-k{font-size:var(--fs-md);color:var(--ink-2);flex-shrink:0;width:175px;}
.df-v{font-size:var(--fs-md);color:var(--ch);text-align:right;}
.df-vm{font-size:var(--fs-md);color:var(--ch);text-align:right;font-family:'DM Mono',monospace;word-break:break-all;}

/* Stage dot grid */
.stg-dots{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap;}
.stg-dot{display:flex;flex-direction:column;align-items:center;gap:3px;}
.stg-circle{width:30px;height:30px;border-radius:50%;border:2px solid;display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:600;}
.stg-circle.filled{color:#fff;}
.stg-circle.empty{background:transparent;}
.stg-lbl{font-size:var(--fs-2xs);color:var(--ink-2);font-family:'Figtree',sans-serif;text-align:center;max-width:74px;line-height:var(--lh-tight);}

/* Compliance badges */
.comp-row{display:flex;align-items:flex-start;gap:8px;padding:5px 0;border-bottom:1px solid #fafafa;}
.mr-badge{display:inline-flex;width:20px;height:20px;border-radius:3px;font-size:var(--fs-sm);font-weight:600;align-items:center;justify-content:center;flex-shrink:0;cursor:help;position:relative;}
.mr-badge.M{background:#E8F5E9;color:var(--green);}.mr-badge.R{background:#FFF3E0;color:var(--amber);}
.mr-tooltip{position:absolute;left:26px;top:-4px;background:#222;color:#fff;font-size:var(--fs-sm);padding:5px 9px;border-radius:4px;z-index:99;display:none;min-width:240px;max-width:380px;white-space:normal;line-height:var(--lh-ui);pointer-events:none;}
.mr-badge:hover .mr-tooltip{display:block;}
.comp-std{font-size:var(--fs-md);color:var(--ch);flex:1;}

/* ADR Stage Data Panel */
.stg-section{border:1px solid #e8e8e8;border-radius:6px;margin-bottom:10px;overflow:hidden;}
.stg-section-hdr{padding:9px 14px;display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;transition:background .12s;}
.stg-section-hdr:hover{background:rgba(0,0,0,.02);}
.stg-section-hdr.active{} 
.stg-section-body{display:none;border-top:1px solid #e8e8e8;}
.stg-section-body.open{display:block;}
.param-row{display:flex;align-items:center;gap:8px;padding:7px 14px;border-bottom:1px solid #fafafa;font-size:var(--fs-md);}
.param-row:last-child{border:none;}
.param-id{font-family:'DM Mono',monospace;font-size:var(--fs-sm);color:var(--teal-ink);width:80px;flex-shrink:0;}
.param-name{flex:1;}
.param-schema{flex-shrink:0;}
.stg-section-search{padding:8px 14px;border-bottom:1px solid #f0f0f0;background:#fafafa;}
.stg-section-search input{width:100%;padding:6px 10px;border:1px solid #e0e0e0;border-radius:4px;font-size:var(--fs-md);font-family:'Figtree',sans-serif;outline:none;background:#fff;}
.stg-section-search input:focus{border-color:var(--teal);}
.stg-filter-bar{display:flex;gap:5px;padding:8px 14px;border-bottom:1px solid #f0f0f0;background:#fafafa;flex-wrap:wrap;}

/* LOIN table */
.loin-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-md);}
.loin-tbl th{background:var(--navy);color:rgba(255,255,255,.7);padding:5px 7px;font-size:var(--fs-sm);text-align:left;font-weight:600;letter-spacing:var(--track-caps);}
.loin-tbl td{padding:5px 7px;border-bottom:1px solid #f5f5f5;}
.loin-tbl tr:hover td{background:var(--mist);}
.loin-req{color:var(--green);font-weight:600;}
.loin-nr{color:var(--ink-2);font-style:italic;font-size:var(--fs-sm);}

/* ══ MAP ══ */
#mod-map{flex-direction:row;}
#map-sb{width:var(--side);background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;}
#sb-search-wrap{padding:9px;border-bottom:1px solid #f0f0f0;}
#sb-search-wrap input{width:100%;padding:7px 10px;border:1px solid #e0e0e0;border-radius:4px;font-size:var(--fs-md);font-family:'Figtree',sans-serif;outline:none;background:var(--mist);}
#sb-search-wrap input:focus{border-color:var(--teal);background:#fff;}
#map-sb-body{flex:1;overflow-y:auto;}
.sb-sec{margin-bottom:2px;}
.sb-sec-title{font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2);padding:9px 13px 5px;}
.sb-item{display:flex;align-items:center;gap:7px;padding:9px 16px;cursor:pointer;transition:background .11s;user-select:none;}
.sb-item:hover{background:var(--mist);}.sb-item.active{background:#EEF7FF;}
.sb-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:#ccc;}
.sb-label{font-size:var(--fs-md);flex:1;}
.sb-cnt{font-size:var(--fs-sm);font-family:'DM Mono',monospace;color:var(--ink-2);background:var(--mist);padding:1px 5px;border-radius:2px;}
.sb-item.active .sb-cnt{background:#BBDEFB;color:#1565C0;}
.maint-row{display:flex;align-items:center;gap:8px;padding:6px 13px 10px;}
.maint-lbl{font-size:var(--fs-md);}
.bsa-chips{display:flex;gap:4px;padding:0 13px 10px;flex-wrap:wrap;}
.bim-sb{display:flex;align-items:center;gap:8px;padding:9px 13px;border-top:1px solid #f0f0f0;background:#FAFFF9;}
.bim-sb-lbl{font-size:var(--fs-sm);white-space:nowrap;font-weight:600;color:var(--teal-ink);}

/* map main */
#map-main{flex:1;display:flex;flex-direction:column;overflow:hidden;}
/* MAP view bar (15 Aug): two segmented groups — the engine surfaces
   (Dashboard | Checklist) and the library tables (Parameters | Assets |
   Documents) — mirroring the code boundary (LoomProject.show vs setView),
   then a right group for the "Change project" button and the admin scope
   toggle. Ids/classes unchanged so _setActiveButton/setView/goLibrary hold. */
#map-view-bar{padding:var(--sp-2) var(--sp-5);background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:var(--sp-4);flex-shrink:0;flex-wrap:wrap;}
.vb-seg{display:inline-flex;border:1px solid #D9DEE4;border-radius:6px;overflow:hidden;background:#fff;}
.vb-seg .view-btn{border:0;border-radius:0;background:#fff;}
.vb-seg .view-btn+.view-btn{border-left:1px solid #D9DEE4;}
.vb-right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3);}
.view-btn{padding:6px 12px;border-radius:4px;font-size:var(--fs-sm);white-space:nowrap;font-weight:600;cursor:pointer;border:1px solid #e0e0e0;background:var(--mist);color:var(--ink-2);font-family:'Figtree',sans-serif;transition:all .16s;}
.view-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.view-btn:hover:not(.active){background:#e8e8e8;color:var(--ch);}
#map-filter-bar{padding:10px 20px;background:#fafafa;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;}
.fg{display:flex;align-items:center;gap:4px;}.fg-lbl{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:var(--track-caps);white-space:nowrap;}
.fsep{width:1px;height:18px;background:#e0e0e0;}
#map-toolbar{padding:10px 20px;background:#fff;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.mt-title{font-family:'Figtree',sans-serif;font-size:var(--fs-2xl);color:var(--navy);font-weight:600;}
.mt-sub{font-size:var(--fs-sm);color:var(--ink-2);margin-top:1px;}
.stat-row{display:flex;gap:7px;margin-left:auto;}
.stat{display:flex;flex-direction:column;align-items:center;padding:3px 8px;background:var(--mist);border-radius:4px;}
.stat-v{font-size:var(--fs-xl);font-weight:500;color:var(--navy);font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;}
.stat-l{font-size:var(--fs-sm);color:var(--ink-2);text-transform:uppercase;letter-spacing:var(--track-caps);}

/* resizable table */
#table-wrap{flex:1;overflow:hidden;display:flex;flex-direction:column;}
#col-hdr-row{display:flex;background:var(--navy);flex-shrink:0;}
.col-hdr{padding:11px 12px;display:flex;align-items:center;position:relative;user-select:none;min-width:40px;overflow:hidden;}
.col-hdr-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}   /* type: TYPE ROLES .lbl/.col-hdr-txt */
.col-resizer{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:5;}
.col-resizer:hover,.col-resizer.active{background:rgba(255,255,255,.25);}
#table-body-wrap{flex:1;overflow-y:auto;overflow-x:hidden;}
.t-row{display:flex;border-bottom:1px solid var(--line);cursor:pointer;transition:background .1s;align-items:center;min-height:46px;}
/* `.t-row.sel` lived here until 14 Aug: a selected-row marker from the v1.4
   desktop build, where clicking a row selected it and an inline detail panel
   filled beside it. Since M4 a row click opens the drill overlay, so there is
   no selection state and nothing had applied the class in any served file.
   The focused-row treatment in a11y.css is the live equivalent. */
.t-row:hover{background:var(--hover);}
/* Hover is a token, never an inline handler (DESIGN.md §9). Until 17 Aug the
   drill and demo rows carried `onmouseover="this.style.background=…"` writing
   --mist straight onto the element: a hover that no theme can reach, that
   drifted from --hover the moment the token existed, and that a keyboard user
   never saw at all. As classes they pick up :focus-visible for free. */
.hov-row{transition:background .1s;}
.hov-row:hover,.hov-row:focus-visible{background:var(--hover);}
.hov-card{background:#fff;border-radius:7px;border:1px solid #e8e8e8;padding:14px;margin-bottom:10px;cursor:pointer;transition:border-color .15s;}
.hov-card:hover,.hov-card:focus-visible{border-color:var(--teal);}
.hov-lift:hover{transform:translateY(-1px);}
.t-cell{padding:10px 12px;display:flex;align-items:center;flex-shrink:0;overflow:hidden;}
.tc-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;}
.c-id{font-family:'DM Mono',monospace;font-size:var(--fs-sm);color:var(--teal-ink);font-weight:500;}
.c-name{font-size:var(--fs-md);font-weight:500;}
.c-desc{font-size:var(--fs-md);color:var(--ink-2);}

/* detail panel - now uses shared floating overlay */

/* ══ LENS ══ */
#mod-lens{flex-direction:column;overflow-y:auto;}
#lens-inner{padding:20px 28px;max-width:var(--wrap);margin:0 auto;}
.riba-tl{display:flex;height:10px;border-radius:4px;overflow:hidden;margin-bottom:16px;gap:1px;}
.riba-s{flex:1;cursor:pointer;transition:flex .22s,outline .18s;position:relative;}.riba-s:hover{flex:1.5;}
.riba-s.cur{flex:2;}
.gauges{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:16px;}
.gc{background:#fff;border-radius:7px;border:1px solid #e8e8e8;padding:16px;position:relative;overflow:hidden;min-height:280px;}
.gc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.gc-c::before{background:var(--teal);}.gc-q::before{background:var(--orange);}.gc-r::before{background:var(--s3);}
.gc-title{font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2);margin-bottom:12px;}
.arc-wrap{position:relative;width:120px;height:68px;margin:0 auto 8px;}
.arc-wrap svg{width:120px;height:68px;}
.arc-val{font-variant-numeric:tabular-nums;position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-family:'DM Mono',monospace;font-size:var(--fs-3xl);color:var(--navy);font-weight:500;white-space:nowrap;}
.gc-sub{font-size:var(--fs-sm);color:var(--ink-2);text-align:center;margin-bottom:10px;}
.dr{display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.dr-l{font-size:var(--fs-sm);width:134px;color:var(--ch);flex-shrink:0;}
.dr-bar{flex:1;height:4px;background:var(--mist);border-radius:3px;overflow:hidden;}
.dr-fill{height:100%;border-radius:3px;}
.dr-v{font-size:var(--fs-sm);font-family:'DM Mono',monospace;color:var(--ink-2);width:40px;text-align:right;}
.lens-bot{display:grid;grid-template-columns:1fr 400px;gap:14px;align-items:start;}
.gap-filter-row{display:flex;gap:5px;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid var(--line);background:#fafafa;}
#gap-body{min-height:220px;}
/* Stakeholder Gap Analysis grid — one template for header and rows (re-cut
   15 Aug: asset 200→minmax 240, action 100→170). Second pass the same day
   (Erwan: "columns blur, first column reads bigger"): 1px --line rules between
   cells that span the full row height, one --hover, and ONE type size for the
   asset name and the prose — weight and colour separate them, not size. Cells
   carry the padding so the rules run edge to edge. DESIGN.md §9. */
.gap-grid{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2fr) 170px;align-items:stretch;}
.gap-grid>*{min-width:0;padding:var(--sp-3);}
.gap-grid>*+*{border-left:1px solid var(--line);}
.gap-grid>:first-child{padding-left:14px;}
.gap-grid>:last-child{padding-right:14px;}
.gap-head{background:var(--mist);border-bottom:1px solid var(--line);}
.gap-head>*{padding-top:6px;padding-bottom:6px;}
.gap-row{border-bottom:1px solid var(--line);cursor:pointer;transition:background .1s;}
.gap-row:hover,.gap-row:focus-visible{background:var(--hover);}
.gap-asset{font-size:var(--fs-md);font-weight:600;color:var(--ch);line-height:var(--lh-ui);}
.gap-count{font-weight:400;color:var(--ink-2);}
.gap-code{font-family:'DM Mono',monospace;font-size:var(--fs-sm);color:var(--ink-2);margin-top:2px;}
.gap-src{display:block;font-size:var(--fs-sm);color:var(--ink-2);margin-top:2px;}
.gap-score{display:flex;align-items:center;gap:4px;margin-top:4px;}
.gap-score-bar{height:3px;background:var(--teal);border-radius:2px;}
.gap-score-pct{font-size:var(--fs-sm);color:var(--ink-2);}
.gap-prose{font-size:var(--fs-md);color:var(--ink-2);line-height:var(--lh-prose);max-width:80ch;}   /* measure cap on wide screens */
.gap-link{font-size:var(--fs-sm);font-weight:600;color:var(--teal-ink);margin-top:5px;}
.crit-item{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;gap:8px;cursor:pointer;transition:background .1s;}
.crit-item:hover{background:var(--hover);}
.ci-icon{width:28px;height:28px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);flex-shrink:0;}
.ci-u{background:#FFEBEE;}.ci-w{background:#FFF3E0;}.ci-ok{background:#E8F5E9;}
.crit-hdr{font-size:var(--fs-md);font-weight:600;color:var(--ch);}
.crit-body{font-size:var(--fs-sm);color:var(--ink-2);margin-top:2px;line-height:var(--lh-ui);}
.upload-zone{border:2px dashed #e0e0e0;border-radius:6px;padding:16px;text-align:center;cursor:pointer;transition:all .18s;background:#fff;margin:10px;}
.upload-zone:hover{border-color:var(--teal);background:#f0fdfa;}
.uz-icon{font-size:var(--fs-2xl);margin-bottom:5px;}.uz-main{font-size:var(--fs-lg);}.uz-sub{font-size:var(--fs-sm);color:var(--ink-2);margin-top:3px;font-family:'DM Mono',monospace;}
.stg-sel{padding:6px 10px;border-radius:4px;border:1px solid #e0e0e0;font-size:var(--fs-lg);font-family:'Figtree',sans-serif;width:calc(100% - 20px);margin:8px 10px 0;outline:none;}
.stg-sel:focus{border-color:var(--teal);}

/* ══ TRACE ══ */
#mod-trace{flex-direction:column;overflow-y:auto;}
#trace-tl{display:flex;height:44px;flex-shrink:0;}
.ts{flex:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .14s;position:relative;}
.ts:hover{opacity:.85;}
.ts.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--mist);}
.ts-inner{text-align:center;}
.ts-n{font-size:var(--fs-2xs);color:rgba(255,255,255,.6);font-family:'Figtree',sans-serif;}
.ts-l{font-size:var(--fs-sm);font-weight:600;color:#fff;}
#trace-scroll{flex:1;}
#trace-inner{padding:20px 28px;max-width:var(--wrap);margin:0 auto;}
.gw-row{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap;align-items:center;}
.gw{padding:7px 12px;border-radius:4px;border:1px solid;display:flex;align-items:center;gap:7px;cursor:pointer;transition:all .16s;}
.gw:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.12);}
.gw-pass{background:#E8F5E9;border-color:#A5D6A7;color:var(--green);}
.gw-active{background:#FFEBEE;border-color:#EF9A9A;color:var(--red);}
.gw-locked{background:var(--mist);border-color:#e0e0e0;color:var(--ink-2);}
.gw-name{font-size:var(--fs-md);font-weight:600;text-transform:uppercase;letter-spacing:var(--track-caps);}
.gw-status{font-size:var(--fs-sm);font-family:'Figtree',sans-serif;opacity:.7;}
.trace-grid{display:grid;grid-template-columns:1fr 380px;gap:14px;}
.tab-bar{display:flex;border-bottom:1px solid #f0f0f0;background:#fafafa;}
.tab-btn{padding:7px 12px;font-size:var(--fs-md);font-weight:600;cursor:pointer;border-bottom:2px solid transparent;color:var(--ink-2);background:none;border-top:none;border-left:none;border-right:none;font-family:'Figtree',sans-serif;transition:all .13s;}
.tab-btn.active{color:var(--teal-ink);border-bottom-color:var(--teal);}
.tab-pane{display:none;}.tab-pane.active{display:block;}
.prog-bar{width:65px;height:4px;background:var(--mist);border-radius:2px;overflow:hidden;}
.prog-fill{height:100%;border-radius:2px;}
.right-col{display:flex;flex-direction:column;gap:12px;}
.audit-entry{padding:9px 13px;border-bottom:1px solid #f5f5f5;display:flex;gap:9px;}
.ae-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:3px;}
.ae-v{background:var(--green);}.ae-u{background:var(--amber);}.ae-s{background:var(--grey);}.ae-a{background:var(--teal);}.ae-f{background:var(--red);}
.ae-who{font-size:var(--fs-md);font-weight:600;}.ae-role{font-size:var(--fs-sm);color:var(--ink-2);}
.ae-what{font-size:var(--fs-sm);margin-top:2px;line-height:var(--lh-ui);}.ae-when{font-size:var(--fs-sm);color:var(--ink-2);font-family:'DM Mono',monospace;margin-top:1px;}
.gt-card{background:linear-gradient(135deg,var(--navy),#0a4a4a);border-radius:7px;padding:20px;}
.gt-title{font-family:'Figtree',sans-serif;font-size:var(--fs-xl);color:#fff;margin-bottom:2px;font-weight:600;}
.gt-item{display:flex;align-items:flex-start;gap:7px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:var(--fs-sm);color:rgba(255,255,255,.82);cursor:pointer;transition:all .12s;border-radius:3px;}
.gt-item:hover{background:rgba(255,255,255,.07);padding-left:4px;}.gt-item:last-child{border:none;}
.gt-chk{width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-2xs);flex-shrink:0;margin-top:1px;}
.gt-done{background:var(--teal);}.gt-warn{background:var(--orange);}.gt-pend{background:rgba(255,255,255,.15);}
.gt-prog-wrap{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.15);}
.gtp-r{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.gtp-l{font-size:var(--fs-md);color:rgba(255,255,255,.65);}
.gtp-v{font-family:'DM Mono',monospace;font-size:var(--fs-2xl);color:var(--orange);font-weight:500;;font-variant-numeric:tabular-nums}
.gtp-bar{height:3px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden;}
.gtp-fill{height:100%;background:var(--orange);border-radius:2px;}
/* BIM banner in trace */
.bim-banner{display:none;background:linear-gradient(90deg,#003d3d,#005f5f);padding:7px 16px;font-size:var(--fs-md);color:rgba(255,255,255,.8);border-bottom:1px solid rgba(0,153,153,.3);align-items:center;gap:10px;flex-shrink:0;}
.bim-banner.show{display:flex;}
.bim-banner strong{color:var(--teal-ink);}

/* ── HOMEPAGE ─────────────────────────────────────── */
#home-screen{position:fixed;inset:0;z-index:998;display:flex;flex-direction:column;overflow-y:auto;background:#0a1628;}
#home-screen.hidden{display:none;}
.hs-nav{height:56px;background:rgba(255,255,255,.04);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;padding:0 40px;gap:24px;flex-shrink:0;position:sticky;top:0;z-index:10;}
.hs-nav-logo{display:flex;align-items:center;line-height:0;}
.hs-nav-logo svg{height:22px;width:auto;}
.hs-nav-links{display:flex;gap:20px;margin-left:24px;}
.hs-nav-link{font-size:var(--fs-lg);color:rgba(255,255,255,.55);cursor:pointer;transition:color .15s;text-decoration:none;}
.hs-nav-link:hover{color:#fff;}
.hs-nav-cta{margin-left:auto;display:flex;gap:8px;}
.hs-btn-outline{padding:7px 16px;border:1px solid rgba(255,255,255,.25);border-radius:4px;font-size:var(--fs-md);font-weight:600;color:#fff;cursor:pointer;background:transparent;font-family:'Figtree',sans-serif;transition:all .15s;}
.hs-btn-outline:hover{border-color:var(--teal);color:var(--teal-ink);}
.hs-btn-solid{padding:7px 16px;border-radius:4px;font-size:var(--fs-md);font-weight:600;color:#fff;cursor:pointer;background:var(--teal-ink);border:none;font-family:'Figtree',sans-serif;transition:all .15s;}
.hs-btn-solid:hover{background:#007a7a;}
.hs-hero{padding:90px 40px 60px;max-width:var(--wrap-site);margin:0 auto;display:grid;grid-template-columns:1fr 520px;gap:60px;align-items:center;}
.hs-hero-eyebrow{font-size:var(--fs-md);font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--teal-ink);margin-bottom:14px;}
.hs-hero-h1{font-family:'Fraunces',serif;font-size:var(--fs-hero);color:#fff;font-weight:300;line-height:var(--lh-tight);margin-bottom:18px;}
.hs-hero-h1 em{color:var(--teal-ink);font-style:normal;}
.hs-hero-sub{font-size:var(--fs-xl);color:rgba(255,255,255,.6);line-height:var(--lh-prose);margin-bottom:32px;max-width:640px;}
.hs-hero-btns{display:flex;gap:10px;}
.hs-hero-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:28px;backdrop-filter:blur(12px);}
.hs-hero-stat{padding:14px 8px;border-bottom:1px solid rgba(255,255,255,.08);border-radius:6px;transition:all .2s ease;cursor:default;}
.hs-hero-stat:last-child{border-bottom:none;}
.hs-hero-stat:hover{background:rgba(0,153,153,.1);padding-left:14px;border-color:transparent;}
.hs-hero-stat-v{font-family:'Fraunces',serif;font-size:var(--fs-4xl);color:var(--teal-ink);font-weight:400;}
.hs-hero-stat-l{font-size:var(--fs-md);color:rgba(255,255,255,.5);margin-top:2px;}
.hs-pillars{padding:60px 40px;max-width:var(--wrap-site);margin:0 auto;}
.hs-pillars-title{font-family:'Fraunces',serif;font-size:var(--fs-4xl);color:#fff;font-weight:300;text-align:center;margin-bottom:8px;}
.hs-pillars-sub{font-size:var(--fs-xl);color:rgba(255,255,255,.45);text-align:center;margin-bottom:40px;}
.hs-pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.hs-pillar{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:24px;transition:all .25s ease;}
.hs-pillar:hover{background:rgba(255,255,255,.09);border-color:rgba(0,153,153,.55);transform:translateY(-4px);box-shadow:0 8px 28px rgba(0,153,153,.18);}

/* ── HOME SCREEN CARD HOVER ANIMATIONS ── */
.hs-info-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:18px;transition:all .25s ease;cursor:default;}
.hs-info-card:hover{background:rgba(255,255,255,.08);border-color:rgba(0,153,153,.45);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,153,153,.15);}
.hs-step-card{position:relative;transition:all .25s ease;}
.hs-step-card:hover{transform:translateY(-3px);}
.hs-step-card:hover .hs-step-num{background:var(--orange);box-shadow:0 4px 14px rgba(255,153,0,.35);}
.hs-step-card .hs-step-num{transition:all .25s ease;}
.hs-standards-card{transition:all .25s ease;padding:4px;border-radius:6px;}
.hs-standards-card:hover{background:rgba(0,153,153,.08);transform:translateY(-2px);}
.hs-hero-card-stat{transition:all .2s ease;}
.hs-hero-card-stat:hover{background:rgba(255,255,255,.05);border-radius:6px;padding-left:6px;padding-right:6px;margin-left:-6px;margin-right:-6px;}
.hs-pillar-icon{font-size:var(--fs-4xl);margin-bottom:12px;}
.hs-pillar-name{font-family:'Fraunces',serif;font-size:var(--fs-2xl);color:var(--teal-ink);font-weight:400;margin-bottom:6px;}
.hs-pillar-tag{font-size:var(--fs-md);color:rgba(255,255,255,.35);font-family:'Figtree',sans-serif;margin-bottom:10px;}
.hs-pillar-desc{font-size:var(--fs-lg);color:rgba(255,255,255,.55);line-height:var(--lh-prose);}
.hs-how{padding:60px 40px;background:rgba(255,255,255,.02);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);}
.hs-how-inner{max-width:var(--wrap-site);margin:0 auto;}
.hs-how-title{font-family:'Fraunces',serif;font-size:var(--fs-4xl);color:#fff;font-weight:300;margin-bottom:32px;}
.hs-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.hs-step{position:relative;}
.hs-step-num{width:32px;height:32px;border-radius:50%;background:var(--teal-ink);display:flex;align-items:center;justify-content:center;font-size:var(--fs-xl);font-weight:600;color:#fff;margin-bottom:12px;}
.hs-step-title{font-size:var(--fs-xl);font-weight:600;color:#fff;margin-bottom:6px;}
.hs-step-desc{font-size:var(--fs-md);color:rgba(255,255,255,.5);line-height:var(--lh-prose);}
.hs-step::after{content:'→';position:absolute;top:8px;right:-10px;color:rgba(255,255,255,.2);font-size:var(--fs-2xl);}
.hs-step:last-child::after{display:none;}
.hs-footer{padding:32px 40px;max-width:var(--wrap-site);margin:0 auto;display:flex;align-items:center;gap:16px;border-top:1px solid rgba(255,255,255,.06);}
.hs-footer-copy{font-size:var(--fs-md);color:rgba(255,255,255,.25);font-family:'Figtree',sans-serif;}

/* ── AUTH MODAL ───────────────────────────────────── */
#auth-modal{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;}
#auth-modal.open{display:flex;}
.am-card{background:#fff;border-radius:12px;width:500px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.35);}
.am-hdr{padding:20px 24px;background:var(--navy);display:flex;align-items:center;justify-content:space-between;}
.am-hdr-title{font-family:'Figtree',sans-serif;font-size:var(--fs-2xl);color:#fff;font-weight:600;}
.am-close{color:rgba(255,255,255,.4);font-size:var(--fs-2xl);cursor:pointer;background:none;border:none;line-height:1;}
.am-close:hover{color:#fff;}
.am-tabs{display:flex;background:#f5f5f5;}
.am-tab{flex:1;padding:11px;text-align:center;font-size:var(--fs-md);font-weight:600;cursor:pointer;border-bottom:2px solid transparent;color:var(--ink-2);transition:all .15s;}
.am-tab.active{color:var(--teal-ink);border-bottom-color:var(--teal);background:#fff;}
.am-body{padding:24px;}
.am-field{margin-bottom:14px;}
.am-field label{font-size:var(--fs-md);font-weight:600;color:var(--ink-2);letter-spacing:var(--track-caps);text-transform:uppercase;display:block;margin-bottom:5px;}
.am-field input,.am-field select{width:100%;padding:10px 12px;border:1px solid #e0e0e0;border-radius:5px;font-size:var(--fs-md);font-family:'Figtree',sans-serif;outline:none;transition:border .15s;background:#fff;}
.am-field input:focus,.am-field select:focus{border-color:var(--teal);}
.am-pw-wrap{position:relative;}
.am-pw-wrap input{padding-right:38px;}
.am-pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:none;cursor:pointer;font-size:var(--fs-xl);line-height:1;padding:4px 6px;color:var(--ink-2);opacity:.55;}
.am-pw-toggle:hover{opacity:1;}
.am-pw-toggle.showing{opacity:1;color:var(--teal-ink);}
.am-error{display:none;margin:10px 0 0;padding:8px 10px;border-radius:5px;background:#FFEBEE;color:#D32F2F;font-size:var(--fs-lg);line-height:var(--lh-ui);}
.am-error.show{display:block;}
.am-submit{width:100%;padding:12px;border-radius:5px;background:var(--teal-ink);color:#fff;font-size:var(--fs-md);font-weight:600;border:none;cursor:pointer;font-family:'Figtree',sans-serif;margin-top:4px;transition:background .15s;}
.am-submit:hover{background:#007a7a;}
.am-foot{text-align:center;font-size:var(--fs-md);color:var(--ink-2);margin-top:14px;}
.am-link{color:var(--teal-ink);cursor:pointer;text-decoration:underline;}

/* ── CLIENT DASHBOARD ─────────────────────────────── */
#client-dash{position:fixed;inset:0;z-index:995;display:none;flex-direction:column;background:var(--mist);}
#client-dash.open{display:flex;}
.cd-nav{height:68px;background:var(--navy);display:flex;align-items:center;padding:0 24px;gap:16px;flex-shrink:0;}
.cd-nav-logo{display:flex;align-items:center;line-height:0;}
.cd-nav-logo svg{height:22px;width:auto;}
.cd-nav-title{font-size:var(--fs-md);color:rgba(255,255,255,.45);font-family:'Figtree',sans-serif;margin-left:8px;}
.cd-body{flex:1;overflow-y:auto;padding:28px 32px;max-width:var(--wrap);margin:0 auto;width:100%;}
.cd-welcome{margin-bottom:32px;}
.cd-welcome-h{font-family:'Fraunces',serif;font-size:var(--fs-3xl);color:var(--navy);font-weight:400;}
.cd-welcome-sub{font-size:var(--fs-lg);color:var(--ink-2);margin-top:4px;}
.cd-projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:16px;margin-bottom:24px;}
.cd-project{background:#fff;border-radius:8px;border:1px solid #e8e8e8;overflow:hidden;cursor:pointer;transition:all .18s;}
.cd-project:hover{box-shadow:0 4px 20px rgba(0,0,0,.1);transform:translateY(-2px);}
.cd-proj-hdr{padding:16px 20px;background:var(--navy);display:flex;align-items:center;gap:10px;}
.cd-proj-title{font-family:'Figtree',sans-serif;font-size:var(--fs-xl);color:#fff;font-weight:600;flex:1;}
/* Stage badges carry dark text — no RIBA stage colour holds white text at an
   accessible ratio (DESIGN.md §5: "dark text on the stage colour, never white"). */
.cd-proj-stage{padding:2px 8px;border-radius:10px;font-size:var(--fs-sm);font-weight:600;color:#333;}
.cd-proj-body{padding:18px 20px;}
.cd-proj-meta{font-size:var(--fs-md);color:var(--ink-2);margin-bottom:12px;font-family:'Figtree',sans-serif;}
.cd-mini-gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;}
.cd-mini-g{text-align:center;padding:8px 4px;background:var(--mist);border-radius:5px;}
.cd-mini-v{font-family:'DM Mono',monospace;font-size:var(--fs-2xl);font-weight:500;;font-variant-numeric:tabular-nums}
.cd-mini-l{font-size:var(--fs-sm);color:var(--ink-2);text-transform:uppercase;letter-spacing:var(--track-caps);margin-top:2px;}
.cd-proj-bar{height:4px;background:#e8e8e8;border-radius:2px;overflow:hidden;margin-bottom:8px;}
.cd-proj-bar-fill{height:100%;border-radius:2px;background:var(--teal);}
.cd-proj-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;}
/* The call-to-action never wraps; the status line yields space instead. */
.cd-proj-foot>span:last-child{white-space:nowrap;flex-shrink:0;}
.cd-new-proj{background:#fff;border-radius:8px;border:2px dashed #e0e0e0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;cursor:pointer;transition:all .18s;}
.cd-new-proj:hover{border-color:var(--teal);background:#f0fdfa;}
.cd-new-icon{font-size:var(--fs-4xl);margin-bottom:8px;}
.cd-new-label{font-size:var(--fs-xl);font-weight:600;color:var(--ink-2);}
.cd-new-sub{font-size:var(--fs-md);color:#bbb;margin-top:4px;}
.cd-guide{background:#fff;border-radius:8px;border:1px solid #e8e8e8;padding:28px;margin-bottom:24px;}
.cd-guide-title{font-family:'Figtree',sans-serif;font-size:var(--fs-2xl);color:var(--navy);font-weight:600;margin-bottom:6px;}
/* The lede carries the pitch; the steps carry the mechanism. */
.cd-guide-lede{font-size:var(--fs-md);line-height:var(--lh-prose);color:var(--ink-2);max-width:78ch;margin-bottom:22px;}
/* Roadmap step is visually demoted so it cannot read as available today. */
.cd-guide-step--future{opacity:.72;}
.cd-gs-num--future{background:var(--grey);}
.demo-badge--light{background:rgba(255,153,0,.14);border-color:rgba(255,153,0,.5);color:#9A5B00;}
.cd-guide-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.cd-guide-step{padding:18px;background:var(--mist);border-radius:6px;}
.cd-gs-num{width:22px;height:22px;border-radius:50%;background:var(--teal-ink);color:#fff;font-size:var(--fs-md);font-weight:600;display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
.cd-gs-title{font-size:var(--fs-md);font-weight:600;color:var(--navy);margin-bottom:4px;}
.cd-gs-desc{font-size:var(--fs-md);color:var(--ink-2);line-height:var(--lh-ui);}

/* ── ADMIN PANEL ─────────────────────────────────── */
#admin-panel{position:fixed;inset:0;z-index:998;display:none;flex-direction:column;background:var(--mist);}
#admin-panel.open{display:flex;}
.ap-nav{height:68px;background:#1a0a2e;display:flex;align-items:center;padding:0 24px;gap:16px;flex-shrink:0;}
.ap-nav-logo{font-family:'Figtree',sans-serif;font-size:var(--fs-2xl);color:#fff;font-weight:600;}
.ap-nav-tag{padding:2px 8px;border-radius:3px;background:rgba(255,100,100,.2);border:1px solid rgba(255,100,100,.3);font-size:var(--fs-sm);font-weight:600;color:#ff9999;letter-spacing:var(--track-caps);text-transform:uppercase;}
.ap-body{flex:1;overflow:hidden;display:flex;}
.ap-sidebar{width:266px;background:#fff;border-right:1px solid #e8e8e8;flex-shrink:0;padding:16px 0;}
.ap-sb-title{font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-2);padding:0 16px 8px;}
.ap-sb-item{padding:9px 16px;font-size:var(--fs-md);cursor:pointer;transition:background .12s;color:var(--ch);display:flex;align-items:center;gap:8px;}
.ap-sb-item:hover{background:var(--mist);}
.ap-sb-item.active{background:#F3E5F5;color:#4A148C;font-weight:600;}
.ap-main{flex:1;overflow:hidden;display:flex;flex-direction:column;}
.ap-toolbar{padding:10px 16px;background:#fff;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.ap-title{font-size:var(--fs-xl);font-weight:600;color:var(--navy);}
.ap-search{padding:7px 11px;border:1px solid #e0e0e0;border-radius:4px;font-size:var(--fs-lg);font-family:'Figtree',sans-serif;outline:none;width:320px;}
.ap-search:focus{border-color:#7B1FA2;}
.ap-table-wrap{flex:1;overflow-y:auto;}
.ap-row{display:grid;grid-template-columns:82px 1fr 164px 110px 110px 110px;align-items:center;padding:12px 20px;border-bottom:1px solid #f5f5f5;transition:background .1s;}
.ap-row:hover{background:#fafafa;}
.ap-row-hdr{background:#1a0a2e !important;position:sticky;top:0;z-index:5;}
.ap-row-hdr span{font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--track-caps);text-transform:uppercase;color:rgba(255,255,255,.55);}
.ap-id{font-family:'DM Mono',monospace;font-size:var(--fs-sm);color:#7B1FA2;}
.ap-name{font-size:var(--fs-md);font-weight:500;}
.ap-type-badge{font-size:var(--fs-sm);font-weight:600;padding:2px 6px;border-radius:2px;}
.ap-toggle{position:relative;width:36px;height:20px;flex-shrink:0;display:inline-flex;align-items:center;}
.ap-toggle input{opacity:0;width:0;height:0;}
.ap-tog-sl{position:absolute;cursor:pointer;inset:0;background:#ccc;border-radius:20px;transition:.2s;}
.ap-tog-sl::before{content:'';position:absolute;width:14px;height:14px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s;}
input:checked+.ap-tog-sl{background:#7B1FA2;}
input:checked+.ap-tog-sl::before{transform:translateX(16px);}
.ap-save-bar{padding:10px 16px;background:#F3E5F5;border-top:1px solid #CE93D8;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.ap-unsaved{font-size:var(--fs-md);color:#4A148C;font-weight:600;}


/* M2: Team/Discipline are inert on the params view (no per-parameter ownership
   in v2.9) — visibly disabled rather than silently matching nothing. */
.chip-inert{opacity:.35;pointer-events:none;cursor:not-allowed;}