/* SAMTAG design system — COMPONENTS. BUILD_BRIEF_design_system_v2.
   Every class st- prefixed so it coexists with the legacy ID/class chrome on the
   shared sheet. Colours/fonts resolve through st-tokens.css (never hardcoded).
   Structure extracted from samtag-assets-darkside.html + samtag-doc-add-single.html.
   Subset so far: base + shell (dark rail + topbar) + appearance controls +
   buttons + RAG badge + card/forms (doc-add re-base) + table set + list
   furniture (scope bar, stat strip, search/filter, pager - assets re-base). */

/* ===== base for the new shell: a FIXED-VIEWPORT app shell. The viewport does NOT
   scroll; the rail + topbar stay pinned and only .st-content scrolls. (Previously the
   whole document scrolled, which let the rail and its footer scroll away.) ===== */
html.st,body.st{overflow:hidden;height:100%}
body.st{margin:0;background:var(--st-ink);color:var(--st-text);font-family:var(--st-sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .2s;color-scheme:dark}
body.st *{box-sizing:border-box}
/* Native controls (selects + their option popups, date inputs, scrollbars) follow the
   theme. Without this, light theme rendered native dropdowns dark/unreadable. */
body.st[data-theme="light"]{color-scheme:light}

/* ===== app shell ===== */
.st-app{display:grid;grid-template-columns:236px 1fr;height:100vh;height:100dvh;overflow:hidden}

/* ===== dark rail (constant in both themes, via --st-side-*) ===== */
/* Full-height pinned rail: brand top, nav scrolls if it must, footer pinned bottom.
   overflow:hidden on the rail (no rail-level scrollbar); only .st-nav scrolls. */
.st-side{background:var(--st-side-bg);border-right:1px solid var(--st-side-border);display:flex;flex-direction:column;padding:18px 0 14px;height:100vh;height:100dvh;overflow:hidden;color-scheme:dark}
/* SAMTAP wordmark (locked brand): SAM = the <b> in amber #E89A22, TAP white;
   exact hex by decree - the wordmark does NOT follow the brand axis. Archivo
   Black per the brand bible (single-weight face: 400, never synthesized bold);
   the NFC glyph carries its own inline em sizing (Demo::samtapWordmark). */
.st-wm{font-family:'Archivo Black',var(--st-cond);font-weight:400;font-size:22px;letter-spacing:.05em;padding:8px 22px 22px;color:#FFFFFF}
.st-wm b{color:#E89A22}
.st-nav{display:flex;flex-direction:column;gap:1px;padding:0 12px;flex:1;overflow-y:auto;min-height:0}
.st-nav__item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--st-radius-sm);color:var(--st-side-text);text-decoration:none;font-size:13.5px;font-weight:500;border-left:2px solid transparent;transition:background .15s,color .15s}
.st-nav__item svg{width:16px;height:16px;flex:none;stroke:currentColor;stroke-width:1.6;fill:none;opacity:.85}
.st-nav__item:hover{background:var(--st-side-hover);color:var(--st-side-text-bright)}
.st-nav__item.is-active{background:var(--st-side-active-bg);color:var(--st-side-accent);border-left-color:var(--st-side-accent);font-weight:600}
.st-side__user{margin:10px 14px 0;padding-top:14px;border-top:1px solid var(--st-side-border);display:flex;align-items:center;gap:10px;flex:none}
.st-avatar{width:30px;height:30px;border-radius:50%;background:var(--st-side-avatar-bg);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--st-side-text);flex:none}
.st-side__name{font-size:12.5px;font-weight:600;line-height:1.2;color:var(--st-side-text-bright)}
.st-side__role{font-size:9.5px;letter-spacing:.1em;color:var(--st-side-accent);text-transform:uppercase;font-weight:600}
.st-side__out{margin-left:auto;font-size:10px;letter-spacing:.1em;color:var(--st-side-text-dim);border:1px solid var(--st-side-border);padding:4px 8px;border-radius:6px;text-transform:uppercase;cursor:pointer;background:none;font-weight:600;text-decoration:none}
.st-side__out:hover{color:var(--st-side-accent);border-color:var(--st-side-accent)}

/* ===== main + topbar (take the page theme) ===== */
.st-main{min-width:0;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.st-topbar{min-height:46px;border-bottom:1px solid var(--st-line-soft);display:flex;align-items:center;padding:8px 26px;gap:14px;background:var(--st-ink-2);flex-wrap:wrap;flex:none}
.st-eyebrow{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--st-text-faint);font-weight:500}
.st-chip{font-family:var(--st-cond);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--st-text);border:1px solid var(--st-line);border-radius:5px;padding:2px 9px}
.st-topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.st-org{display:flex;align-items:center;gap:9px}
.st-org-tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--st-text-faint);font-weight:500}
.st-org-name{font-size:14px;font-weight:600;color:var(--st-text);letter-spacing:.01em}
.st-org-sep{width:1px;height:16px;background:var(--st-line)}
.st-live{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--st-brand-ink);border:1px solid var(--st-brand-deep);border-radius:5px;padding:3px 8px;font-weight:600}
.st-live i{width:6px;height:6px;border-radius:50%;background:var(--st-brand);display:block}
@media (prefers-reduced-motion:no-preference){.st-live i{animation:st-pulse 1.8s ease-in-out infinite}}
@keyframes st-pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ===== appearance controls (theme switch + colour-safe toggle) ===== */
.st-appearance{display:flex;align-items:center;gap:10px}
.st-seg2{display:inline-flex;background:var(--st-surface-2);border:1px solid var(--st-line);border-radius:8px;padding:2px;gap:2px}
.st-s2{width:30px;height:26px;border:none;background:none;border-radius:6px;color:var(--st-text-faint);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.st-s2 svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none}
.st-s2:hover{color:var(--st-text)}
.st-s2.is-on{background:var(--st-brand);color:var(--st-on-brand)}
.st-s2.is-on svg{stroke:var(--st-on-brand)}
.st-cvd-toggle{display:inline-flex;align-items:center;gap:8px;background:var(--st-surface-2);border:1px solid var(--st-line);border-radius:8px;padding:5px 10px 5px 11px;cursor:pointer;color:var(--st-text-dim);font-size:12px;font-weight:500;transition:.15s}
.st-cvd-toggle:hover{border-color:var(--st-line-strong);color:var(--st-text)}
.st-cvd-toggle svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.7;fill:none}
.st-cvd-switch{width:30px;height:17px;border-radius:9px;background:var(--st-surface-3);position:relative;transition:.15s;flex:none}
.st-cvd-switch i{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--st-text-faint);transition:.15s}
body[data-cvd="on"] .st-cvd-toggle{color:var(--st-brand-ink);border-color:var(--st-brand-deep)}
body[data-cvd="on"] .st-cvd-switch{background:var(--st-brand)}
body[data-cvd="on"] .st-cvd-switch i{left:15px;background:var(--st-on-brand)}

/* ===== content header ===== */
.st-content{padding:26px 38px 60px;flex:1;overflow-y:auto;min-height:0}
.st-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:14px}
.st-page-title{font-family:var(--st-cond);font-weight:700;font-size:30px;letter-spacing:.04em;text-transform:uppercase;margin:0;color:var(--st-text)}
.st-head-actions{display:flex;gap:10px}
.st-crumbs{font-size:11.5px;color:var(--st-text-faint);margin-bottom:18px}
.st-crumbs b{color:var(--st-text-dim);font-weight:500}
.st-crumbs span{margin:0 7px}
/* breadcrumb links are brand amber (never the browser default purple) */
.st-crumbs a{color:var(--st-brand-ink);text-decoration:none}
.st-crumbs a:hover{text-decoration:underline}

/* ===== buttons ===== */
.st-btn{font-family:var(--st-cond);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;padding:9px 18px;border-radius:var(--st-radius-sm);cursor:pointer;border:1px solid transparent;transition:.15s;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.st-btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none}
.st-btn--primary{background:var(--st-brand);color:var(--st-on-brand)}
.st-btn--primary:hover{background:var(--st-brand-bright);box-shadow:0 6px 18px -8px var(--st-brand)}
.st-btn--ghost{background:transparent;border-color:var(--st-line);color:var(--st-text-dim)}
.st-btn--ghost:hover{border-color:var(--st-line-strong);color:var(--st-text)}
/* solid SECONDARY: a neutral surface fill with high-contrast text - reads clearly on a tinted panel
   (e.g. the amber golden-thread box) yet stays visually secondary to the one amber primary per view */
.st-btn--solid{background:var(--st-surface);border-color:var(--st-line-strong);color:var(--st-text)}
.st-btn--solid:hover{background:var(--st-surface-2);border-color:var(--st-text-faint)}

/* ===== status (RAG) badge — dot + word always; colour-safe adds the shape glyph ===== */
.st-rag{display:inline-flex;align-items:center;gap:7px;font-family:var(--st-cond);font-weight:600;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px 4px 8px;border-radius:20px;border:1px solid transparent;white-space:nowrap}
.st-rag i{width:7px;height:7px;border-radius:50%;flex:none}
.st-rag--red{color:var(--st-rag-red);background:var(--st-rag-red-bg);border-color:var(--st-rag-red)} .st-rag--red i{background:var(--st-rag-red)}
.st-rag--amber{color:var(--st-rag-amber);background:var(--st-rag-amber-bg);border-color:var(--st-rag-amber)} .st-rag--amber i{background:var(--st-rag-amber)}
.st-rag--green{color:var(--st-rag-green);background:var(--st-rag-green-bg);border-color:var(--st-rag-green)} .st-rag--green i{background:var(--st-rag-green)}
.st-rag--grey{color:var(--st-rag-grey);background:var(--st-rag-grey-bg);border-color:var(--st-rag-grey)} .st-rag--grey i{background:var(--st-rag-grey)}
/* colour-safe: hide the dot, prepend a shape glyph so status survives with no colour */
body[data-cvd="on"] .st-rag i{display:none}
body[data-cvd="on"] .st-rag{padding-left:8px}
body[data-cvd="on"] .st-rag::before{font-weight:700;margin-right:2px;font-size:11px}
body[data-cvd="on"] .st-rag--green::before{content:"\2713"}
body[data-cvd="on"] .st-rag--red::before{content:"\2715"}
body[data-cvd="on"] .st-rag--amber::before{content:"\25B2"}
body[data-cvd="on"] .st-rag--grey::before{content:"\2013"}
/* coverage-gap marker: a hollow ring shown on a RAG badge when the asset ALSO has an
   unevidenced required duty, so a gap is never masked behind amber/red. A <span> (not an
   <i>), so colour-safe's hide-the-dot rule leaves it; shape-based, so it survives with no colour. */
.st-rag__gap{display:inline-block;width:6px;height:6px;border-radius:50%;border:1.6px solid currentColor;background:transparent;margin-left:4px;opacity:.9}

/* ===== card ===== */
.st-card{background:var(--st-surface);border:1px solid var(--st-line);border-radius:var(--st-radius);overflow:hidden;box-shadow:var(--st-card-shadow)}
.st-card__head{padding:14px 22px;border-bottom:1px solid var(--st-line-soft);background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);display:flex;align-items:center;gap:10px}
.st-card__head h2,.st-card__title{font-family:var(--st-cond);font-weight:600;font-size:16px;letter-spacing:.1em;text-transform:uppercase;margin:0;color:var(--st-text)}
.st-card__body{padding:22px}

/* ===== forms — fields, labels, controls, select ===== */
.st-field{margin-bottom:18px}
.st-field:last-child{margin-bottom:0}
.st-label{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--st-label);margin-bottom:7px}
.st-opt{color:var(--st-text-faint);text-transform:none;letter-spacing:0;font-weight:400}
.st-help{font-size:12.5px;color:var(--st-text-dim);margin-top:7px;line-height:1.45}
/* Field-level validation message, rendered directly under the failing control
   (walk fix 23 Jul: the banner alone never names what is wrong). */
.st-field-err{font-size:12.5px;color:var(--st-rag-red);margin-top:5px;line-height:1.4;font-weight:500}
.st-control{width:100%;background:var(--st-surface-2);border:1px solid var(--st-line);border-radius:var(--st-radius-sm);color:var(--st-text);font-family:var(--st-sans);font-size:14px;padding:11px 13px;transition:border-color .15s,box-shadow .15s}
.st-control::placeholder{color:var(--st-text-faint)}
.st-control:focus{outline:none;border-color:var(--st-brand);box-shadow:0 0 0 3px var(--st-brand-glow)}
/* select chevron is a static neutral grey (a data-uri can't read a CSS var); it is
   decorative and reads on both themes — not brand colour, so the token rule holds. */
select.st-control{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239BA1AA' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer}
.st-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ===== dropzone ===== */
.st-drop{border:1.5px dashed var(--st-line);border-radius:var(--st-radius-sm);background:var(--st-surface-2);padding:18px 20px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:border-color .15s,background .15s}
.st-drop:hover{border-color:var(--st-brand-deep);background:var(--st-surface-3)}
.st-drop__ico{width:38px;height:38px;border-radius:9px;flex:none;background:var(--st-surface-3);display:flex;align-items:center;justify-content:center;color:var(--st-brand-ink)}
.st-drop__ico svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.6;fill:none}
.st-drop__t{font-size:13.5px;font-weight:600;color:var(--st-text)}
.st-drop__t b{color:var(--st-brand-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.st-drop__s{font-size:11.5px;color:var(--st-text-faint);margin-top:3px}

/* ===== segmented (form) — distinct from the appearance .st-seg2 ===== */
.st-seg{display:inline-flex;background:var(--st-surface-2);border:1px solid var(--st-line);border-radius:var(--st-radius-sm);padding:3px;gap:3px}
.st-seg__btn{font-family:var(--st-cond);font-weight:600;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--st-text-dim);background:none;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;transition:.15s;white-space:nowrap}
.st-seg__btn:hover{color:var(--st-text)}
.st-seg__btn.is-on{background:var(--st-brand);color:var(--st-on-brand)}

/* ===== divider + action row ===== */
.st-rule{height:1px;background:var(--st-line-soft);margin:22px 0}
.st-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:20px;flex-wrap:wrap}

/* ===== notice — brand-amber informational panel (e.g. the fail-closed "stays a
   draft" note). Brand-routed, NOT a RAG status, so it follows a tenant brand. ===== */
.st-notice{display:flex;gap:11px;align-items:flex-start;background:var(--st-brand-glow);border:1px solid var(--st-brand-deep);border-radius:var(--st-radius-sm);padding:13px 15px}
.st-notice svg{width:16px;height:16px;flex:none;stroke:var(--st-brand-ink);stroke-width:1.7;fill:none;margin-top:1px}
.st-notice p{margin:0;font-size:12.5px;color:var(--st-text-dim);line-height:1.5}
.st-notice b{color:var(--st-text);font-weight:600}

@media (max-width:560px){.st-two-col{grid-template-columns:1fr}}

/* ===== scope bar (Customer/Site) — the control that decides what a table shows ===== */
.st-vscope{display:flex;align-items:center;gap:22px;background:var(--st-surface);border:1px solid var(--st-line);border-radius:var(--st-radius-sm);padding:11px 18px;margin-bottom:18px;flex-wrap:wrap;box-shadow:var(--st-card-shadow)}
.st-vscope__field{display:flex;align-items:center;gap:11px}
.st-vscope__label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--st-text-faint);font-weight:600}
.st-vscope__sel{appearance:none;-webkit-appearance:none;background:var(--st-surface-2);border:1px solid var(--st-line);border-radius:7px;color:var(--st-text);font-family:var(--st-sans);font-size:13.5px;font-weight:500;padding:8px 32px 8px 12px;cursor:pointer;transition:.15s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239BA1AA' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.st-vscope__sel:hover{border-color:var(--st-line-strong)}
.st-vscope__sel:focus{outline:none;border-color:var(--st-brand);box-shadow:0 0 0 3px var(--st-brand-glow)}
/* Legacy samtag.css sets `select option{background:var(--ink2)}` - a FIXED dark colour
   that never flips for light theme - leaving native option popups dark-on-dark/unreadable
   in light mode. Re-resolve option bg + text to st- tokens for every st- select. */
.st-vscope__sel option,.st-control option{background-color:var(--st-surface-2);color:var(--st-text)}
.st-vscope__status{margin-left:auto;font-size:10.5px;color:var(--st-text-faint);letter-spacing:.04em;display:flex;align-items:center;gap:7px;font-weight:500}
.st-vscope__status i{width:6px;height:6px;border-radius:50%;background:var(--st-brand);flex:none}

/* ===== stat strip — counts come from the data; accent bars use the LOCKED RAG palette ===== */
.st-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px}
/* fixed six-across, non-wrapping (the site compliance status buckets) */
.st-stats--6{grid-template-columns:repeat(6,1fr)}
/* fixed four-across, non-wrapping (the Regulatory Horizon KPI row) */
.st-stats--4{grid-template-columns:repeat(4,1fr)}
/* standard inter-section spacing for a stacked bare panel (matches the grid rows' 18px) */
.st-stack-gap{margin-bottom:18px}
.st-stat{background:var(--st-surface);border:1px solid var(--st-line);border-radius:var(--st-radius);padding:15px 17px;position:relative;overflow:hidden;box-shadow:var(--st-card-shadow)}
.st-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--st-stat-accent,var(--st-line-strong))}
.st-stat--red{--st-stat-accent:var(--st-rag-red)} .st-stat--amber{--st-stat-accent:var(--st-rag-amber)} .st-stat--green{--st-stat-accent:var(--st-rag-green)} .st-stat--grey{--st-stat-accent:var(--st-rag-grey)}
.st-stat__n{font-family:var(--st-cond);font-weight:700;font-size:30px;line-height:1;color:var(--st-text);font-variant-numeric:tabular-nums}
.st-stat__l{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--st-label);margin-top:8px}

/* ===== toolbar: search + filter chips + count ===== */
.st-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.st-search{position:relative;flex:1;min-width:220px;max-width:340px}
.st-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--st-text-faint);stroke-width:1.7;fill:none}
.st-search input{width:100%;background:var(--st-surface-2);border:1px solid var(--st-line);border-radius:var(--st-radius-sm);color:var(--st-text);font-family:var(--st-sans);font-size:13.5px;padding:9px 12px 9px 34px;transition:.15s}
.st-search input::placeholder{color:var(--st-text-faint)}
.st-search input:focus{outline:none;border-color:var(--st-brand);box-shadow:0 0 0 3px var(--st-brand-glow)}
.st-filter{display:inline-flex;align-items:center;gap:7px;background:var(--st-surface-2);border:1px solid var(--st-line);border-radius:var(--st-radius-sm);color:var(--st-text-dim);font-family:var(--st-sans);font-size:13px;font-weight:500;padding:9px 13px;cursor:pointer;transition:.15s;text-decoration:none}
.st-filter:hover{border-color:var(--st-line-strong);color:var(--st-text)}
.st-filter svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.7;fill:none;opacity:.8}
.st-filter.is-active{color:var(--st-text);border-color:var(--st-line-strong)}
.st-filter b{color:var(--st-brand-ink);font-size:11px}
.st-filter.is-disabled{opacity:.5;cursor:default}
.st-toolbar__count{margin-left:auto;font-size:11px;color:var(--st-text-faint);letter-spacing:.04em;font-weight:500}

/* ===== table ===== */
.st-table-card{background:var(--st-surface);border:1px solid var(--st-line);border-radius:var(--st-radius);overflow:hidden;box-shadow:var(--st-card-shadow)}
.st-table{width:100%;border-collapse:collapse;font-size:13.5px}
.st-table thead th{text-align:left;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--st-text-dim);font-weight:600;padding:12px 16px;border-bottom:1px solid var(--st-line);white-space:nowrap;background:linear-gradient(180deg,var(--st-brand-glow),transparent)}
.st-th--sortable{cursor:pointer;user-select:none}
.st-th--sortable:hover{color:var(--st-text)}
.st-th .st-arr{margin-left:5px;opacity:0;transition:.15s;color:var(--st-text-faint);font-size:11px}
.st-th--sortable:hover .st-arr{opacity:.55}
.st-th.is-sorted{color:var(--st-brand-ink)}
.st-th.is-sorted .st-arr{opacity:1;color:var(--st-brand-ink)}
.st-table tbody td{padding:13px 16px;border-bottom:1px solid var(--st-line-soft);color:var(--st-text-dim);vertical-align:middle}
.st-table tbody tr{transition:background .12s}
.st-table tbody tr.is-clickable{cursor:pointer}
.st-table tbody tr:hover{background:var(--st-surface-2)}
.st-table tbody tr:last-child td{border-bottom:none}
.st-ref{font-size:12px;color:var(--st-brand-ink);letter-spacing:.02em;font-weight:600;font-variant-numeric:tabular-nums}
.st-aname{color:var(--st-text);font-weight:600}
.st-asub{font-size:12px;font-weight:500;color:var(--st-text-dim);margin-top:2px}
.st-tcell{font-size:12.5px;color:var(--st-text-dim);font-variant-numeric:tabular-nums}
.st-tcell.is-overdue{color:var(--st-rag-red)}
.st-rowact{color:var(--st-text-faint);display:flex;justify-content:flex-end}
.st-rowact svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.7;fill:none}
.st-table tbody tr:hover .st-rowact{color:var(--st-brand-ink)}

/* discipline dot: a CATEGORICAL palette (NOT brand, NOT RAG) keyed by discipline
   slug; unknown disciplines fall back to neutral grey. */
.st-disc{display:inline-flex;align-items:center;gap:7px}
.st-disc__dot{width:7px;height:7px;border-radius:2px;background:var(--st-rag-grey);flex:none}
.st-disc__dot[data-discipline="hvac"]{background:#6BA4D8}
.st-disc__dot[data-discipline="electrical"]{background:#E0C24B}
.st-disc__dot[data-discipline="lighting"]{background:#ECA94B}
.st-disc__dot[data-discipline="public_health"]{background:#5FB8B0}
.st-disc__dot[data-discipline="fire"]{background:#E5604D}
.st-disc__dot[data-discipline="lifts"]{background:#C98ED8}
.st-disc__dot[data-discipline="controls"]{background:#6BB5E0}
.st-disc__dot[data-discipline="security"]{background:#8E8AD8}
.st-disc__dot[data-discipline="comms"]{background:#B07FA0}
.st-disc__dot[data-discipline="specialist"]{background:#A0958A}

/* ===== pagination ===== */
.st-pager{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-top:1px solid var(--st-line);background:var(--st-ink-2);flex-wrap:wrap;gap:10px}
.st-pager__info{font-size:11px;color:var(--st-text-faint);font-weight:500}
.st-pager__btns{display:flex;gap:6px}
.st-pg{min-width:30px;height:30px;border:1px solid var(--st-line);background:var(--st-surface-2);border-radius:6px;color:var(--st-text-dim);font-size:12px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;justify-content:center;padding:0 8px;font-weight:500;text-decoration:none}
.st-pg:hover{border-color:var(--st-line-strong);color:var(--st-text)}
.st-pg.is-on{background:var(--st-brand);border-color:var(--st-brand);color:var(--st-on-brand);font-weight:600}
.st-pg.is-disabled{opacity:.4;pointer-events:none}

/* ===== empty state ===== */
.st-empty{padding:40px 24px;text-align:center;color:var(--st-text-faint);font-size:13.5px}
.st-empty a{color:var(--st-brand-ink);font-weight:600;text-decoration:none}
.st-empty a:hover{text-decoration:underline}

/* ===== interactive table chrome (Part 2: sort / filter chips / clickable cards) ===== */
/* sortable header: the whole label is a link; the arrow re-uses the .st-arr reveal rules */
.st-th--sortable a{color:inherit;text-decoration:none;display:inline-flex;align-items:center}

/* clickable stat cards: a card is a link sharing one state with the Status chip; the
   selected card thickens its accent bar and brightens its label (is-on) */
a.st-stat{display:block;text-decoration:none;color:inherit;cursor:pointer}
a.st-stat:hover{border-color:var(--st-line-strong)}
.st-stat.is-on{border-color:var(--st-stat-accent,var(--st-line-strong))}
.st-stat.is-on::before{width:5px}
.st-stat.is-on .st-stat__l{color:var(--st-text)}

/* filter chip: a <details> disclosure (works without JS) whose menu floats over content */
.st-fil{position:relative;display:inline-block}
.st-fil>summary{list-style:none}
.st-fil>summary::-webkit-details-marker{display:none}
.st-fil>summary::marker{content:""}
.st-fil__menu{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:230px;max-width:320px;
  background:var(--st-surface-3);border:1px solid var(--st-line);border-radius:var(--st-radius-sm);
  box-shadow:0 16px 44px -16px rgba(15,16,20,.5);padding:7px}
.st-fil__opt{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:6px;font-size:13px;color:var(--st-text-dim);cursor:pointer;user-select:none}
.st-fil__opt:hover{background:var(--st-surface-2);color:var(--st-text)}
.st-fil__opt input{accent-color:var(--st-brand);width:14px;height:14px;flex:none;cursor:pointer}
.st-fil__opt span{line-height:1.25}
.st-fil__foot{display:flex;align-items:center;gap:12px;padding:8px 9px 4px;margin-top:4px;border-top:1px solid var(--st-line-soft)}
.st-fil__clear{font-size:12px;color:var(--st-text-faint);text-decoration:none}
.st-fil__clear:hover{color:var(--st-text)}
.st-btn--sm{padding:6px 13px;font-size:12px}

/* Compliance duty surface: a muted stat card (e.g. Tracked/no-cycle) + amber "due soon" cell */
.st-stat--muted{opacity:.66}
.st-stat--muted.is-on{opacity:1}
.st-due-soon{font-size:12.5px;color:var(--st-rag-amber);font-variant-numeric:tabular-nums}

/* Sites coverage overlay: a stat counting on a DIFFERENT basis (any unevidenced duty), so it
   does NOT sum with the reconciling worst-wins cards. Dashed border + a note signal that. */
.st-stat--overlay{border-style:dashed;--st-stat-accent:var(--st-rag-amber)}
.st-stat--overlay.is-on{border-style:solid;border-color:var(--st-stat-accent)}
.st-stat__note{font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--st-text-faint);margin-top:5px}
/* coverage option inside the filter menu: separated (different basis) with a small note */
.st-fil__opt--cov{margin-top:4px;padding-top:9px;border-top:1px dashed var(--st-line)}
.st-fil__opt em{display:block;font-style:normal;font-size:10.5px;color:var(--st-text-faint);margin-top:1px}
/* filter-menu group label (Documents uses two groups: State + Type) */
.st-fil__grp{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--st-text-faint);padding:8px 4px 4px;margin-top:2px}
.st-fil__grp:first-child{margin-top:0;padding-top:2px}

/* Documents: the Superseded SIDECAR card (a retained, different-basis count - dashed, grey;
   deliberately not a reconciling peer of In error / Pending / Current). */
.st-stat--side{border-style:dashed;--st-stat-accent:var(--st-rag-grey)}
.st-stat--side.is-on{border-style:solid;border-color:var(--st-stat-accent)}

/* Documents: the lifecycle-state badge. Deliberately NOT the compliance RAG pill - its own
   class, its own square glyph, its own colour-safe markers - so it can never read as a duty
   verdict. State is the document's own health (current / pending / the named error / superseded). */
.st-dstate{display:inline-flex;align-items:center;gap:7px;font-family:var(--st-cond);font-weight:600;font-size:12.5px;letter-spacing:.04em;padding:4px 10px 4px 8px;border-radius:6px;border:1px solid transparent;white-space:nowrap}
.st-dstate i{width:7px;height:7px;border-radius:2px;flex:none}
.st-dstate--current{color:var(--st-text-dim);background:var(--st-surface-2);border-color:var(--st-line-strong)} .st-dstate--current i{background:var(--st-text-faint)}
.st-dstate--pending{color:var(--st-rag-amber);background:var(--st-rag-amber-bg);border-color:var(--st-rag-amber)} .st-dstate--pending i{background:var(--st-rag-amber)}
.st-dstate--error-scan,.st-dstate--error-proc{color:var(--st-rag-red);background:var(--st-rag-red-bg);border-color:var(--st-rag-red)} .st-dstate--error-scan i,.st-dstate--error-proc i{background:var(--st-rag-red)}
.st-dstate--superseded{color:var(--st-rag-grey);background:var(--st-rag-grey-bg);border-color:var(--st-rag-grey);border-style:dashed} .st-dstate--superseded i{background:var(--st-rag-grey)}
/* colour-safe glyphs (mirror .st-rag): a non-colour cue for every state */
body[data-cvd="on"] .st-dstate i{display:none}
body[data-cvd="on"] .st-dstate{padding-left:8px}
body[data-cvd="on"] .st-dstate::before{font-weight:700;margin-right:3px;font-size:11px}
body[data-cvd="on"] .st-dstate--current::before{content:"\2713"}      /* check */
body[data-cvd="on"] .st-dstate--pending::before{content:"\2026"}      /* ... in progress */
body[data-cvd="on"] .st-dstate--error-scan::before{content:"\2715"}   /* x */
body[data-cvd="on"] .st-dstate--error-proc::before{content:"\2715"}
body[data-cvd="on"] .st-dstate--superseded::before{content:"\21BB"}   /* replaced */

/* Documents: the filename IS the gated download - a link when openable, a reasoned disabled
   label otherwise (never an affordance the server gate would refuse). */
.st-dlink{color:var(--st-brand-ink);text-decoration:none}
.st-dlink:hover{text-decoration:underline}
.st-dlink.is-disabled{color:var(--st-text-faint);cursor:default}
.st-dlink.is-disabled:hover{text-decoration:none}
.st-dlink em{font-style:normal;font-size:11px;color:var(--st-text-faint)}

/* small inline notice (e.g. storage being set up) */
.st-note{font-size:12.5px;border-radius:var(--st-radius-sm);padding:9px 13px;line-height:1.45}
.st-note--warn{background:var(--st-rag-amber-bg);border:1px solid var(--st-rag-amber);color:var(--st-rag-amber)}

/* ===== Estate Health dashboard ===== */
.st-eh-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.st-eh-brand{width:42px;height:42px;border-radius:10px;background:var(--st-brand);color:var(--st-on-brand);display:flex;align-items:center;justify-content:center;flex:none}
.st-eh-brand svg{width:24px;height:24px}
.st-eh-note{color:var(--st-text-faint)}
.st-eh-pad{padding:18px 20px}

.st-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.st-kpis--3{grid-template-columns:repeat(3,1fr)}
/* The card is a positioning context: the body is an anchor (the deep-link); the help control is a
   SIBLING pinned to the corner, never nested inside the anchor (interactive-in-anchor is invalid
   HTML and would swallow the popover click). §1. */
.st-kpi{position:relative;background:var(--st-surface);border:1px solid var(--st-line);border-radius:var(--st-radius);padding:0}
.st-kpi__link{display:block;padding:16px 18px;text-decoration:none;color:inherit;border-radius:var(--st-radius);cursor:pointer}
.st-kpi__link:hover{background:var(--st-surface-2)}
.st-kpi:hover{border-color:var(--st-line-strong)}
.st-kpi__link:focus-visible{outline:2px solid var(--st-brand-deep);outline-offset:-2px}
.st-kpi>.st-hc{position:absolute;top:13px;right:13px;z-index:2}
.st-kpi__top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px;padding-right:22px}
.st-kpi__l{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--st-text-faint);font-weight:600}
.st-kpi__n{font-size:34px;font-weight:700;font-variant-numeric:tabular-nums lining-nums;margin-top:10px;line-height:1;color:var(--st-text)}
.st-kpi__n small{font-size:18px;font-weight:600;color:var(--st-text-faint)}
.st-kpi__n.is-red{color:var(--st-rag-red)} .st-kpi__n.is-amber{color:var(--st-rag-amber)} .st-kpi__n.is-green{color:var(--st-rag-green)}
.st-kpi__sub{font-size:11.5px;color:var(--st-text-faint);margin-top:6px}

/* customer scope selector (FM only, §6) - sits in the header, right-aligned */
.st-eh-scope{display:flex;align-items:center;gap:8px;flex:none}
.st-eh-scope__l{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--st-text-faint);font-weight:700}

.st-eh-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.st-chip2{display:inline-flex;align-items:baseline;gap:7px;background:var(--st-surface-2);border:1px solid var(--st-line);border-radius:7px;padding:7px 12px;font-size:12px;color:var(--st-text-dim);text-decoration:none}
a.st-chip2{cursor:pointer}
a.st-chip2:hover{border-color:var(--st-line-strong);color:var(--st-text)}
a.st-chip2:focus-visible{outline:2px solid var(--st-brand-deep);outline-offset:1px}
.st-chip2 b{font-size:14px;font-weight:700;color:var(--st-text);font-variant-numeric:tabular-nums lining-nums}
/* the clarifier is a plain grey chip (reuses .st-chip2) that sits left in the flow with the secondary
   duty chips and wraps onto its own line when it does not fit; faint so it does not draw the eye */
.st-eh-clarify{max-width:560px;line-height:1.5;color:var(--st-text-faint)}
/* bare section title for the "Assets by status" breakdown (the st-stat row that follows) */
.st-eh-secttl{margin-bottom:12px}
/* "Re-test due" in the Assets listing Next-due column (out-of-service row) */
.st-retest{color:var(--st-rag-amber);font-weight:600}

/* help control + popover (flat, border not shadow, click to open) */
.st-hc{position:relative;display:inline-flex}
.st-hc__btn{width:20px;height:20px;border-radius:50%;border:1px solid var(--st-line);background:transparent;color:var(--st-text-faint);font:700 12px/1 var(--st-sans);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none;padding:0;transition:.15s}
.st-hc__btn:hover,.st-hc__btn:focus-visible{color:var(--st-brand-ink);border-color:var(--st-brand-deep);outline:none}
.st-hc__pop{position:absolute;top:26px;right:0;z-index:40;width:282px;background:var(--st-surface);border:1px solid var(--st-line-strong);border-radius:var(--st-radius-sm);padding:12px 14px;text-align:left;display:none}
.st-hc__pop.is-open{display:block}
.st-hc__pop h4{margin:0 0 5px;font-size:12.5px;font-weight:700;color:var(--st-text)}
.st-hc__pop p{margin:0 0 7px;font-size:12px;line-height:1.5;color:var(--st-text-dim)}
.st-hc__pop p.d{color:var(--st-text-faint);font-size:11.5px;margin-bottom:0}
.st-hc__pop .live{margin-top:9px;padding-top:9px;border-top:1px solid var(--st-line);font-size:12.5px;color:var(--st-text);font-weight:600;font-variant-numeric:tabular-nums}

.st-eh-ch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.st-eh-ch h2{margin:0;font-family:var(--st-cond);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--st-text)}

.st-eh-trend{padding:18px 20px;margin-bottom:18px}
.st-trend{width:100%;height:auto;display:block}
.st-trend__grid{stroke:var(--st-line)}
.st-trend__ylab,.st-trend__xlab{fill:var(--st-text-faint);font-size:11px;font-family:var(--st-sans)}
.st-trend__ref{fill:var(--st-text-faint);font-size:10px;letter-spacing:.04em}
.st-trend__line{stroke:var(--st-brand);stroke-width:2}
.st-trend__pt{fill:var(--st-brand)}
.st-trend__pt.is-current{stroke:var(--st-surface);stroke-width:2}
.st-trend__pt.is-red{fill:var(--st-rag-red)} .st-trend__pt.is-amber{fill:var(--st-rag-amber)} .st-trend__pt.is-green{fill:var(--st-rag-green)}
.st-trend__curr{font-size:13px;font-weight:700;font-family:var(--st-sans);fill:var(--st-text)}
.st-trend__curr.is-red{fill:var(--st-rag-red)} .st-trend__curr.is-amber{fill:var(--st-rag-amber)} .st-trend__curr.is-green{fill:var(--st-rag-green)}
/* §3 compact: smaller internal labels for the narrow one-third column */
.st-trend--compact .st-trend__ylab,.st-trend--compact .st-trend__xlab{font-size:9px}
.st-trend--compact .st-trend__ref{font-size:8.5px}
.st-trend--compact .st-trend__curr{font-size:11px}
.st-eh-short{color:var(--st-text-faint);font-size:13px;padding:18px 0}

.st-eh-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
/* §3 three-up: Compliance over time + By discipline + By site, equal columns. Cards STRETCH to a
   shared height; that height comes from the breakdown content (By discipline / By site), and the
   trend SVG fills whatever height it is given rather than setting its own (see st-eh-trendwrap). */
.st-eh-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:18px;align-items:stretch}
.st-eh-grid3--2{grid-template-columns:1fr 1fr}
.st-eh-grid3 > .st-card{display:flex;flex-direction:column}
/* the trend fills the remaining card height; the SVG is taken out of flow (absolute) so its own
   intrinsic size never balloons the row - the breakdown drives the height, the chart adapts. */
.st-eh-trendwrap{position:relative;flex:1 1 auto;min-height:110px;margin-top:2px}
.st-eh-trendwrap .st-trend{position:absolute;inset:0;width:100%;height:100%}

/* §4 estate/building summary + §5 where-to-start: plain prose / ranked, design-system body type */
.st-eh-summary{margin-bottom:18px}
.st-eh-prose{margin:0;font-size:13.5px;line-height:1.65;color:var(--st-text-dim)}
.st-eh-prio{margin-bottom:18px}
.st-prio{list-style:none;margin:0;padding:0;counter-reset:none;display:flex;flex-direction:column}
.st-prio>li{border-bottom:1px solid var(--st-line)}
.st-prio>li:last-child{border-bottom:none}
.st-prio__row{display:flex;align-items:center;gap:12px;padding:11px 2px;text-decoration:none;color:inherit}
.st-prio__row:hover .st-prio__text{color:var(--st-text)}
.st-prio__row:focus-visible{outline:2px solid var(--st-brand-deep);outline-offset:-2px}
.st-prio__rank{flex:none;width:22px;height:22px;border-radius:50%;background:var(--st-surface-3);color:var(--st-text-dim);font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.st-prio__text{flex:1;font-size:13px;color:var(--st-text-dim);min-width:0}
.st-prio__tag{flex:none;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;color:var(--st-text-faint);background:var(--st-surface-2);border:1px solid var(--st-line);border-radius:6px;padding:3px 8px;white-space:nowrap}

.st-bars{display:flex;flex-direction:column;gap:11px}
.st-bar{display:grid;grid-template-columns:130px 1fr 46px;align-items:center;gap:10px;font-size:12px;text-decoration:none;color:inherit}
a.st-bar:hover .st-bar__l{color:var(--st-text)}
.st-bar__l{color:var(--st-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-bar__track{height:9px;border-radius:5px;background:var(--st-surface-3);overflow:hidden}
.st-bar__fill{display:block;height:100%;border-radius:5px;background:var(--st-rag-grey)}
.st-bar__fill.is-red{background:var(--st-rag-red)} .st-bar__fill.is-amber{background:var(--st-rag-amber)} .st-bar__fill.is-green{background:var(--st-rag-green)} .st-bar__fill.is-none{background:var(--st-rag-grey)}
.st-bar__pct{text-align:right;font-variant-numeric:tabular-nums lining-nums;color:var(--st-text)}

.st-srows{display:flex;flex-direction:column}
.st-srow{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--st-line);font-size:12.5px;text-decoration:none;color:inherit}
.st-srow:last-child{border-bottom:none}
.st-srow:hover .st-srow__n{color:var(--st-text)}
.st-srow__dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--st-rag-grey)}
.st-srow__dot.is-overdue,.st-srow__dot.is-outstanding{background:var(--st-rag-red)}
.st-srow__dot.is-due_soon{background:var(--st-rag-amber)} .st-srow__dot.is-compliant{background:var(--st-rag-green)} .st-srow__dot.is-tracked{background:var(--st-rag-grey)}
.st-srow__n{flex:1;color:var(--st-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-srow__open{color:var(--st-text-faint);font-variant-numeric:tabular-nums lining-nums;flex:none}
.st-srow--more{color:var(--st-brand-ink);justify-content:flex-start;font-size:12px}

.st-eh-reserved{border-style:dashed;display:flex;align-items:center;gap:14px;padding:18px 20px;opacity:.72}
.st-eh-reserved__ico{width:34px;height:34px;border-radius:8px;background:var(--st-surface-3);color:var(--st-text-faint);display:flex;align-items:center;justify-content:center;flex:none}
.st-eh-reserved__ico svg{width:20px;height:20px}
.st-eh-reserved__t{font-weight:600;color:var(--st-text-dim)}
.st-eh-reserved__s{color:var(--st-text-faint);font-size:12px;margin-top:2px}

/* colour-safe: a glyph cue wherever RAG colour carries status, so it reads without colour */
body[data-cvd="on"] .st-kpi__n.is-red::before,body[data-cvd="on"] .st-kpi__n.is-amber::before,body[data-cvd="on"] .st-kpi__n.is-green::before{font-size:.55em;margin-right:.28em;vertical-align:middle;font-weight:700}
body[data-cvd="on"] .st-kpi__n.is-red::before{content:"\2715"} body[data-cvd="on"] .st-kpi__n.is-amber::before{content:"\25B2"} body[data-cvd="on"] .st-kpi__n.is-green::before{content:"\2713"}
body[data-cvd="on"] .st-bar__pct::after{margin-left:5px;font-weight:700;font-size:11px}
body[data-cvd="on"] .st-bar.is-red .st-bar__pct::after{content:"\2715"} body[data-cvd="on"] .st-bar.is-amber .st-bar__pct::after{content:"\25B2"} body[data-cvd="on"] .st-bar.is-green .st-bar__pct::after{content:"\2713"} body[data-cvd="on"] .st-bar.is-none .st-bar__pct::after{content:"\2013"}
body[data-cvd="on"] .st-srow__dot{width:auto;height:auto;border-radius:0;background:none !important;font-weight:700;font-size:12px;line-height:1;color:var(--st-text-dim)}
body[data-cvd="on"] .st-srow__dot.is-overdue::before,body[data-cvd="on"] .st-srow__dot.is-outstanding::before{content:"\2715"}
body[data-cvd="on"] .st-srow__dot.is-due_soon::before{content:"\25B2"} body[data-cvd="on"] .st-srow__dot.is-compliant::before{content:"\2713"} body[data-cvd="on"] .st-srow__dot.is-tracked::before{content:"\2013"}

/* ===== Asset detail (BUILD_BRIEF_asset_detail_redesign) ===== */
/* header block: title, three-word tag, model subtitle, then the compliance chip + secondary tags */
.st-ahead{min-width:0}
/* Asset header contained in its own st-card panel to match the panels below it (Compliance,
   Identity). Layout only - reuses st-card/st-eh-pad, the existing chip/buttons/pills and st-
   tokens; no new component, no new hex. Actions are top-aligned; the row wraps on a narrow
   width so the actions drop below the title. */
.st-ahead-card{margin-bottom:16px}
.st-ahead-top{align-items:flex-start;flex-wrap:wrap;margin-bottom:0}
.st-ahead-top .st-ahead{flex:1 1 320px}
.st-asubline{font-size:13px;color:var(--st-text-dim);margin-top:6px}
/* id line: the tag chip then the model subtitle on one line, directly beneath the title */
.st-ahead__idline{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:10px}
.st-ahead__idline .st-asubline{margin-top:0}
/* the pills move to their own row, under a subtle full-width divider (existing border token) */
.st-ahead__status{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px;border-top:1px solid var(--st-line-soft);padding-top:14px}
/* the SAMTAG three-word identity chip - brand amber, the scannable identity (NOT the reference code) */
.st-tagchip{display:inline-flex;align-items:center;font-family:var(--st-mono,var(--st-sans));font-weight:600;font-size:13px;letter-spacing:.01em;color:var(--st-brand-ink);background:var(--st-brand-glow);border:1px solid var(--st-brand-deep);border-radius:7px;padding:5px 11px;text-decoration:none;white-space:nowrap}
a.st-tagchip:hover{background:var(--st-brand-deep);color:var(--st-on-brand)}
.st-tagchip--sm{font-size:12px;padding:3px 9px}
.st-tagchip--add{color:var(--st-text-faint);background:transparent;border-style:dashed;border-color:var(--st-line-strong);cursor:default;font-weight:600;font-family:var(--st-sans)}
/* click-to-copy identity chip (no detail page): a plain chip that copies the tag, with a brief Copied state */
button.st-tagchip{cursor:pointer;-webkit-appearance:none;appearance:none}
.st-tagchip--copy:hover{background:var(--st-brand-deep);color:var(--st-on-brand)}
.st-tagchip--copy.is-copied{background:var(--st-brand-deep);color:var(--st-on-brand);border-color:var(--st-brand-deep)}
/* secondary muted tag (in service, condition, decommissioned) - never a status verdict */
.st-mtag{display:inline-flex;align-items:center;font-size:11.5px;font-weight:500;letter-spacing:.03em;color:var(--st-text-faint);border:1px solid var(--st-line);border-radius:6px;padding:4px 9px;white-space:nowrap}

/* body panels: ONE consistent vertical rhythm between every stacked card */
.st-astack{display:flex;flex-direction:column;gap:18px}
/* secondary panel-header actions (e.g. Golden Thread: Full thread + Report) - never amber */
.st-eh-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Identity + Location row: matching gutter, and each card HUGS its own content (top-aligned,
   not stretched to equal height) so Location shows no trailing empty space */
.st-arow{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}

/* compliance panel: a positioning context for its corner help (sibling, absolute). overflow is
   VISIBLE (st-card is overflow:hidden) so the help popover escapes the card and floats above the
   panels below it - the .st-hc's own z-index already layers it over later sibling cards. */
.st-acard{position:relative;overflow:visible}
.st-acard>.st-hc{position:absolute;top:16px;right:18px;z-index:20}
.st-acard__summary{margin:2px 0 16px;color:var(--st-text)}
.st-acard__empty{font-size:13px;color:var(--st-text-faint);background:var(--st-surface-2);border:1px solid var(--st-line);border-radius:var(--st-radius-sm);padding:13px 15px;line-height:1.5}

/* duty rows: RAG pill, name (+T1 marker), timing, and the reserved per-duty legal-basis entry point */
.st-duties{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.st-duty{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:0;padding:12px 2px;border-bottom:1px solid var(--st-line-soft)}
.st-duty:last-child{border-bottom:none}
.st-duty__rag{flex:none;min-width:104px}
.st-duty__main{flex:1;min-width:0}
.st-duty__name{display:block;font-size:13.5px;color:var(--st-text);font-weight:500}
.st-duty__t1{font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--st-brand-ink);border:1px solid var(--st-brand-deep);border-radius:4px;padding:1px 4px;margin-left:4px;vertical-align:1px}
.st-duty__when{display:block;font-size:11.5px;color:var(--st-text-faint);margin-top:3px;font-variant-numeric:tabular-nums}
/* per-duty legal-basis label: quiet metadata; RESERVED (inert, muted, no pointer, no hover) until
   the T1 legal-context content is verified, then the summary of the collapsible panel below */
.st-duty__legal{flex:none;font-size:11.5px;color:var(--st-text-faint);text-decoration:none}
.st-duty__legal.is-reserved{cursor:default;color:var(--st-text-faint)}

/* legal-context panel (gate1 Part C, one emitter: LegalContext::html). Read-only, restating
   verified catalogue content; the disclaimer line is mandatory and rendered by the emitter. */
.st-legalctx{flex:none;min-width:0}
.st-legalctx>summary.st-duty__legal{cursor:pointer;list-style:none}
.st-legalctx>summary.st-duty__legal::after{content:' \25BE';font-size:9px}
.st-legalctx__body{margin:6px 0 2px;padding:8px 10px;border:1px solid var(--st-line-soft);border-radius:6px;background:var(--st-bg-raised,transparent);max-width:520px}
.st-legalctx__inst{font-size:12px;color:var(--st-text);font-weight:500}
.st-legalctx__rule{font-size:12px;color:var(--st-text-muted);margin:4px 0}
.st-legalctx__meta{font-size:11px;color:var(--st-text-faint)}
.st-legalctx__meta a{color:inherit;text-decoration:underline}
.st-legalctx__std{font-size:11.5px;color:var(--st-text-muted);margin:2px 0 4px}
.st-legalctx__disc{font-size:10.5px;color:var(--st-text-faint);margin-top:6px;padding-top:5px;border-top:1px dashed var(--st-line-soft)}
.st-legalctx__reserved{display:inline-block;font-size:11.5px;color:var(--st-text-faint);font-style:italic;padding:2px 0}
/* Asset compliance panel only: the per-duty Legal basis expands full-width BELOW the
   duty row (accordion), pushing the following duties down - not a right-hand column.
   Scoped to .st-duty so the shared emitter's other surfaces (Compliance page table,
   upload form, review queue) keep their inline 520px treatment unchanged. */
.st-duty>.st-legalctx,.st-duty>.st-duty__legal.is-reserved{flex:0 0 100%;margin-top:5px}
.st-duty .st-legalctx__body{max-width:none}
.st-legalbadge{display:inline-block;font-size:10.5px;color:var(--st-text-faint);border:1px dashed var(--st-line-soft);border-radius:4px;padding:2px 6px;margin:2px 0}
.st-legalrow>td{background:transparent;padding-top:0}

/* per-tile help wrap (walk fix 7): the "?" pop-out sits in the tile's corner so a
   link-tile can carry a button without invalid nesting; the wrap fills the grid cell */
.st-statwrap{position:relative;display:block;min-width:0}
.st-statwrap>.st-stat{height:100%}
.st-statwrap>.st-hc{position:absolute;top:6px;right:6px}

/* row-actions overflow (walk fix 2b): the st-fil dropdown re-dressed as a kebab -
   quiet trigger, right-anchored menu, stacked action items */
.st-rowmenu{position:relative;display:inline-block}
.st-rowmenu>summary.st-filter{padding:2px 8px;font-size:15px;line-height:1;cursor:pointer;list-style:none}
.st-rowmenu__menu{right:0;left:auto;min-width:280px}
.st-rowmenu__item{display:block;padding:6px 0;border-bottom:1px solid var(--st-line-soft)}
.st-rowmenu__item:last-child{border-bottom:none}

/* golden-thread timeline: one merged, date-ordered list with a visible lane tag per entry */
.st-thread{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.st-thread__row{display:flex;align-items:center;gap:14px;padding:11px 2px;border-bottom:1px solid var(--st-line-soft)}
.st-thread__row:last-child{border-bottom:none}
.st-thread__date{flex:none;width:88px;font-size:12px;color:var(--st-text-faint);font-variant-numeric:tabular-nums}
.st-thread__main{flex:1;min-width:0}
.st-thread__title{display:block;font-size:13.5px;color:var(--st-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-thread__sub{display:block;font-size:11.5px;color:var(--st-text-faint);margin-top:2px}
/* lane tag: CATEGORICAL (NOT RAG) - the text label carries meaning, the tint is only a cue */
.st-lane{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:5px;padding:3px 8px;border:1px solid var(--st-line);color:var(--st-text-dim);background:var(--st-surface-2);min-width:150px}
.st-lane::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--st-rag-grey);flex:none}
.st-lane--compliance::before{background:var(--st-rag-green)}
.st-lane--maintenance::before{background:#6BA4D8}
.st-lane--reference::before{background:var(--st-rag-grey)}
.st-lane--observation::before{background:var(--st-rag-amber)}

/* asset detail top row: Compliance (two thirds) + the compact Golden-thread box (one third); stacks on narrow.
   Stretched to equal row height: the box matches the Compliance panel beside it. Its content stays
   top-aligned; the thread stat + actions anchor to the card foot (st-gtbox is a flex column and
   st-gtbox__stat carries margin-top:auto), so the extra height reads as breathing room, not emptiness. */
.st-asset-top{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:stretch;margin-bottom:16px}
@media (max-width:900px){.st-asset-top{grid-template-columns:1fr}}
/* Golden thread box: a PEER of the Compliance/Identity/Location panels - it reuses the st-card shell
   (same border, corner, shadow) and st-eh-pad padding, and its heading is the shared st-eh-ch h2. Its
   ONLY distinctions are the amber-tinted gradient and a small amber icon set inline beside the heading as
   a section emblem. Flex column: icon + heading, then the narrative top-aligned, then the thread stat and
   the two actions anchored to the foot (__stat carries the auto top margin). The background composes st-
   tokens only: the brand glow fades from the top edge over a surface-to-ink vertical fade, keeping the
   bronze feel in dark, light and colour-safe modes (colour-safe retunes RAG tokens, never the brand glow). */
.st-gtbox{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--st-brand-glow),transparent 62%),linear-gradient(180deg,var(--st-surface),var(--st-ink-2))}
.st-gtbox__head{justify-content:flex-start}
.st-gtbox__icon{flex:none;display:inline-flex;align-items:center}
.st-gtbox__icon svg{width:20px;height:20px;fill:none;stroke:var(--st-brand-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.st-gtbox__lede{margin:0 0 14px;font-size:12.5px;line-height:1.55;color:var(--st-text-dim)}
/* thread stat: one quiet line above the anchored actions. Figures use the token set's figure treatment -
   monospace is RETIRED in st-tokens (--st-mono is deliberately unset), so the st-tagchip fallback pattern
   renders the sans with tabular figures where numeric alignment matters. */
.st-gtbox__stat{margin:auto 0 12px;padding-top:14px;font-size:12.5px;color:var(--st-text-dim)}
.st-gtbox__fig{font-family:var(--st-mono,var(--st-sans));font-variant-numeric:tabular-nums;font-weight:600;color:var(--st-text)}
.st-gtbox__actions{display:flex;flex-wrap:wrap;gap:8px}
/* all-documents register: the lane chip is compact in the table; the observation note sits under the item */
.st-doctable .st-lane{min-width:auto}
.st-doctable__note{font-size:12px;color:var(--st-text-dim);margin-top:3px;line-height:1.45}
/* observation register entry: a note with its photos expanding inline (native details disclosure) */
.st-obs{font-size:13px}
.st-obs__sum{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.st-obs__sum::-webkit-details-marker{display:none}
.st-obs__sum::before{content:"\25B8";color:var(--st-text-faint);font-size:11px}
.st-obs[open] .st-obs__sum::before{content:"\25BE"}
.st-obs__lead{font-weight:600;color:var(--st-text)}
.st-obs__prev{color:var(--st-text-dim);font-size:12px}
.st-obs__pc{font-size:11px;color:var(--st-brand-ink);font-weight:600}
.st-obs__body{padding:8px 0 2px 16px}
.st-obs__note{margin:0 0 8px;font-size:13px;line-height:1.5;color:var(--st-text);white-space:pre-wrap}
.st-obs__photos{display:flex;flex-wrap:wrap;gap:12px}
.st-obs__photo{font-size:12px;color:var(--st-text-dim)}
/* document thumbnail: a small square preview of an image document; the anchor opens it
   full size in a new tab. object-fit:cover on a fixed box keeps a large photo from
   blowing out the row height. Border/placeholder use theme tokens (Dark/Light/colour-safe). */
.st-thumb{display:block;width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--st-line);background:var(--st-surface-2)}
.st-obs__thumb,.st-doctable__thumb{display:inline-block;line-height:0}
.st-obs__photos .st-thumb{width:72px;height:72px}
.st-doctable__cap{font-size:12px;color:var(--st-text-dim);margin-top:4px}
/* service-outcome chip on a filed visit (sits just before the doc-state badge) */
.st-thread__outcome{flex:none}

/* open defects (asset detail) - present-only; blocking is red (out of service), advisory amber */
.st-defects{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.st-defrow{display:flex;align-items:center;gap:14px;padding:11px 2px;border-bottom:1px solid var(--st-line-soft)}
.st-defrow:last-child{border-bottom:none}
.st-defrow__kind{flex:none;min-width:96px}
.st-defrow__main{flex:1;min-width:0}
.st-defrow__note{display:block;font-size:13.5px;color:var(--st-text)}
.st-defrow__sub{display:block;font-size:11.5px;color:var(--st-text-faint);margin-top:2px}
.st-defrow__lock{flex:none;font-size:11.5px;color:var(--st-text-faint);white-space:nowrap}

/* two-layer Identity: grouped so the shared-model / this-asset split is visible */
.st-idgroup{margin-bottom:18px}
.st-idgroup:last-child{margin-bottom:0}
.st-idgroup__h{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--st-text-faint);padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--st-line-soft)}
/* definition list: label/value rows; the --3 variant lays the cells out as a 3-up grid (Lifecycle) */
.st-deflist{margin:0;display:flex;flex-direction:column}
.st-deflist>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--st-line-soft)}
.st-deflist>div:last-child{border-bottom:none}
.st-deflist dt{font-size:12px;color:var(--st-text-faint);margin:0;flex:none}
.st-deflist dd{font-size:13.5px;color:var(--st-text);margin:0;text-align:right;font-variant-numeric:tabular-nums}
.st-deflist--3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px}
.st-deflist--3>div{flex-direction:column;align-items:flex-start;gap:3px}
.st-deflist--3 dd{text-align:left}

@media (max-width:1100px){.st-kpis,.st-kpis--3{grid-template-columns:repeat(2,1fr)}.st-eh-grid2,.st-eh-grid3,.st-eh-grid3--2,.st-arow{grid-template-columns:1fr}.st-eh-scope{margin-top:4px}.st-deflist--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1240px){.st-col-loc{display:none}}

@media (max-width:760px){.st-app{grid-template-columns:1fr}.st-side{display:none}.st-content{padding:22px 16px 50px}.st-page-title{font-size:25px}.st-org{display:none}.st-org-sep{display:none}.st-col-disc,.st-col-next{display:none}}
@media (prefers-reduced-motion:reduce){body.st *{transition:none !important;animation:none !important}}