/* ============================================================================ sentinel-jid.css — FIM Jurisdiction-page design system (sentinel.gi) ---------------------------------------------------------------------------- Authored 2026-07-06 (session arti-cadd7edc, ArtI Architect / FIM scope). Operator directive: "proper FE design discipline, no quick fixes." /* :root blocks moved into sentinel-tokens.css 2026-07-30 so exactly one file defines :root and token precedence no longer depends on stylesheet load order. This file's own header already declared that all values come from sentinel-tokens.css as the single source of truth; the two semantic scales it introduced (confidence and horizon) now live there with it. Every var(--jid-*) reference below is unchanged. */ WHY THIS FILE EXISTS The FIM JID renderer (build_jurisdiction_page_fim_v2.py) emits a complete dashboard DOM — .shell > .layout(grid) > #sidenav + .contentcol > (.viewbar + main.wrap) with .sect sections, .role-card / .rh-card / .scn-card / .reg-block / .dl-table / .evidence-zone / .next-steps components. The deployed sentinel-display.css targets the SPA dashboard vocabulary (.cmd/.work/.cc-*/.enf-*/.gr-*) and has ZERO rules for these JID selectors, so the page rendered as a flat single-column text dump. This stylesheet is the missing JID-page layer, adapting the agreed fim-mockup.html design language onto the renderer's REAL selectors. TOKEN CONTRACT All colour / spacing / type / radius values come from the deployed sentinel-tokens.css v5 (single source of truth; already flips light<->dark via [data-theme]). This file adds NO palette of its own — it only maps two data-driven semantic scales (confidence, horizon) onto existing v5 semantic colours, so the page tracks the operator-approved cream/teal palette and the dark toggle with zero duplication. Load order: sentinel-tokens.css -> drawer.css -> sentinel-display.css -> THIS FILE (last, so JID selectors win the cascade cleanly). ========================================================================== */ /* ---- semantic scales mapped onto v5 tokens (data-driven, no new palette) -- */ /* ---- reset scoped to the JID content column ------------------------------- */ .shell *, .shell *::before, .shell *::after{ box-sizing:border-box; } /* ============================================================================ LAYOUT — shell wrapper + two-column grid (sidenav | content) Mockup .shell(grid) -> renderer .layout(grid); renderer .shell = max-width block wrapper. main.wrap#app is the scroll body inside .contentcol. ========================================================================== */ .shell{ display:block; max-width:1400px; margin-inline:auto; } .layout{ display:grid; grid-template-columns:248px minmax(0,1fr); align-items:start; } .contentcol{ min-width:0; } /* ---- left section navigation (JS-populated: .navlead + anchor links) ------ */ #sidenav{ position:sticky; top:61px; align-self:start; max-height:calc(100dvh - 61px); overflow-y:auto; padding:var(--space-6) var(--space-4); border-right:1px solid var(--line); font-family:var(--font-body); } #sidenav .navlead{ font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin:var(--space-4) 0 var(--space-2); } #sidenav .navlead:first-child{ margin-top:0; } #sidenav a{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); line-height:1.35; padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm); color:var(--muted); text-decoration:none; transition:var(--transition-interactive, background .15s, color .15s); } #sidenav a:hover, #sidenav a.active, #sidenav a[aria-current="true"]{ background:var(--color-surface-dynamic); color:var(--ink); } #sidenav .dot{ width:8px; height:8px; border-radius:var(--radius-full); flex-shrink:0; background:var(--muted); } #sidenav .dot.confirmed{ background:var(--jid-confirmed); } #sidenav .dot.assessed{ background:var(--jid-assessed); } #sidenav .dot.emerging{ background:var(--jid-emerging); } #sidenav .dot.sentinel{ background:var(--jid-sentinel); } /* ---- view/role bar above the content ------------------------------------- */ .viewbar{ display:flex; gap:var(--space-4); flex-wrap:wrap; align-items:center; padding:var(--space-4) var(--space-8) var(--space-4); border-bottom:1px solid var(--line-soft); } .viewbar .printbtn{ margin-left:auto; font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); background:var(--panel2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:var(--space-1) var(--space-3); cursor:pointer; transition:var(--transition-interactive, background .15s, color .15s); } .viewbar .printbtn:hover{ background:var(--color-surface-dynamic); color:var(--ink); } /* ---- main content column -------------------------------------------------- */ main.wrap{ padding:var(--space-8) var(--space-12); min-width:0; } /* ============================================================================ TYPOGRAPHY & SECTION RHYTHM ========================================================================== */ .sect{ margin-bottom:var(--space-12); scroll-margin-top:80px; } .sect > h2{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:600; line-height:1.15; text-wrap:balance; color:var(--ink); margin-bottom:var(--space-4); padding-bottom:var(--space-2); border-bottom:1px solid var(--line-soft); } .sect > h3, .sect h3{ font-family:var(--font-display); font-size:var(--text-lg); font-weight:600; color:var(--ink); } .sect h4{ font-family:var(--font-body); font-size:var(--text-sm); font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:var(--space-4) 0 var(--space-2); } .sect p{ max-width:74ch; color:var(--ink); text-wrap:pretty; margin-bottom:var(--space-3); } .sect a{ color:var(--accent); text-decoration:none; } .sect a:hover{ text-decoration:underline; } /* ---- weekly brief + domain prose bodies ---------------------------------- */ .weekly-brief-body, .domain-body{ font-size:var(--text-base); line-height:1.65; color:var(--ink); } .weekly-brief-body h4, .domain-body h4{ color:var(--muted); } .weekly-brief-body p, .domain-body p{ max-width:74ch; margin-bottom:var(--space-3); } /* ============================================================================ REGULATORY HORIZON — .rh-cards (horizontal scroll strip of .rh-card) ========================================================================== */ .rh-cards{ display:flex; gap:var(--space-4); overflow-x:auto; padding-bottom:var(--space-3); scroll-snap-type:x mandatory; } .rh-card{ flex:0 0 clamp(240px, 40%, 300px); scroll-snap-align:start; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); border-top:3px solid var(--rh-c, var(--accent)); padding:var(--space-4); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:var(--space-2); } .rh-card.inforce, .rh-card[data-stage="inforce"]{ --rh-c:var(--jid-inforce); } .rh-card.soon, .rh-card[data-stage="soon"]{ --rh-c:var(--jid-soon); } .rh-card.horizon, .rh-card[data-stage="horizon"]{ --rh-c:var(--jid-horizon); } .rh-head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-2); } .rh-stage{ font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:var(--rh-c, var(--accent)); } .rh-date{ font-family:var(--font-display); font-size:var(--text-sm); font-variant-numeric:tabular-nums; color:var(--muted); } .rh-title{ font-family:var(--font-display); font-size:var(--text-lg); line-height:1.2; color:var(--ink); } .rh-what{ font-size:var(--text-sm); color:var(--muted); } .rh-what b{ color:var(--ink); font-weight:600; } .rh-foot{ margin-top:auto; padding-top:var(--space-2); } .rh-src{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--accent); } /* ---- provenance-forward horizon: honest-empty + pipeline-state footer ----- AD-2026-07-31-FLEET-HORIZON-PROVENANCE-FORWARD. #sec-reg-horizon is no longer presence-gated: measured over 170 FIM state files, 29 jurisdictions have no dated horizon row, and hiding the section left the reader unable to distinguish "nothing is due" from "the page is broken". Reuses the dashed .null-cycle idiom so an empty cycle reads as MEASURED, not missing. -------------------------------------------------------------------------- */ .rh-empty{padding:var(--space-4);border:1px dashed var(--line); border-radius:var(--radius-md);background:var(--bg); font-size:var(--text-sm,0.9rem);color:var(--muted);max-width:74ch} .rh-prov-foot{margin-top:var(--space-3); font-family:var(--font-mono);font-size:var(--text-xs); letter-spacing:.04em;color:var(--faint,var(--muted))} /* ============================================================================ ROLE ACTIONS — .role-cards grid of .role-card ========================================================================== */ .role-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:var(--space-4); } .role-card{ background:var(--panel2); border:1px solid var(--line); border-radius:var(--radius-lg); border-top:3px solid var(--rc-c, var(--accent)); padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); } .role-card[data-role="board"]{ --rc-c:var(--jid-confirmed); } .role-card[data-role="mlro"]{ --rc-c:var(--jid-assessed); } .role-card[data-role="legal"]{ --rc-c:var(--jid-sentinel); } .role-card[data-role="cto"]{ --rc-c:var(--jid-emerging); } .rc-head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-2); } .rc-role{ font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:var(--rc-c, var(--accent)); } .rc-prio{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--faint); border:1px solid var(--line); border-radius:var(--radius-full); padding:1px var(--space-2); } .rc-headline{ font-family:var(--font-display); font-size:var(--text-base); font-weight:600; line-height:1.25; color:var(--ink); } .rc-means{ font-size:var(--text-sm); color:var(--muted); } .rc-means b{ color:var(--ink); font-weight:600; } .rc-claims{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--faint); border-top:1px dashed var(--line); padding-top:var(--space-2); margin-top:auto; } /* ============================================================================ DECISION LENS — .dl-table + .dl-shared ========================================================================== */ .dl-table{ width:100%; border-collapse:collapse; font-size:var(--text-sm); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; } .dl-table th, .dl-table td{ text-align:left; padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--line-soft); vertical-align:top; } .dl-table th{ font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); background:var(--panel2); font-weight:600; } .dl-table tr:last-child td{ border-bottom:none; } .dl-table td b{ color:var(--ink); font-weight:600; } .dl-shared{ margin-top:var(--space-4); padding:var(--space-4); background:var(--panel2); border:1px dashed var(--line); border-radius:var(--radius-md); font-size:var(--text-sm); color:var(--muted); } /* ============================================================================ SCENARIOS — .scn-cards of .scn-card ========================================================================== */ .scn-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:var(--space-4); } .scn-card{ background:var(--panel2); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); } .scn-title{ font-family:var(--font-display); font-size:var(--text-base); font-weight:600; line-height:1.25; color:var(--ink); } .scn-body{ font-size:var(--text-sm); color:var(--muted); max-width:none; } .scn-body b{ color:var(--ink); font-weight:600; } .scn-disclaimer{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--faint); border-top:1px dashed var(--line); padding-top:var(--space-2); } /* ============================================================================ REGISTERS — .reg-block (h3.reg-h + ul.reg-list + span.reg-date) ========================================================================== */ .reg-block{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-6); margin-bottom:var(--space-4); } .reg-h{ font-family:var(--font-display); font-size:var(--text-lg); color:var(--ink); margin-bottom:var(--space-3); display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; } .reg-list{ list-style:none; padding:0; margin:0; } .reg-list li{ font-size:var(--text-sm); color:var(--ink); padding:var(--space-2) 0; border-bottom:1px solid var(--line-soft); display:flex; gap:var(--space-3); align-items:baseline; } .reg-list li:last-child{ border-bottom:none; } .reg-date{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--faint); font-variant-numeric:tabular-nums; white-space:nowrap; } /* ============================================================================ SOURCES + COVERAGE — ol.src-list / ul.gap-list ========================================================================== */ .src-list{ margin:0; padding-left:var(--space-6); font-size:var(--text-sm); color:var(--ink); } .src-list li{ padding:var(--space-1) 0; } .src-list a{ color:var(--accent); word-break:break-word; } .gap-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:var(--space-3); } .gap-list li{ background:var(--panel2); border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-3); font-size:var(--text-sm); color:var(--muted); } .gap-list li b{ color:var(--ink); font-weight:600; } /* ============================================================================ EVIDENCE — section.sec-tier > .body-zone > .evidence-zone > .claim > .pv ========================================================================== */ .sec-tier{ margin-bottom:var(--space-12); scroll-margin-top:80px; } .sec-tier > .sect{ margin-bottom:var(--space-4); } .evidence-zone{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-6); } .evidence-zone h4{ margin-top:0; } .claim{ padding:var(--space-3) var(--space-4); border-left:2px solid var(--color-primary-highlight); background:var(--panel2); border-radius:0 var(--radius-md) var(--radius-md) 0; margin-top:var(--space-3); font-size:var(--text-sm); } .claim b{ display:block; color:var(--ink); margin-bottom:var(--space-1); } .claim .pv{ color:var(--muted); } /* ---- confidence chip grammar (matches drawer + mockup) ------------------- */ .cchip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--text-xs); padding:2px var(--space-2); border-radius:var(--radius-full); } .cchip.confirmed{ background:var(--jid-confirmed-bg); color:var(--jid-confirmed); } .cchip.assessed{ background:var(--jid-assessed-bg); color:var(--jid-assessed); } .cchip.emerging{ background:var(--jid-emerging-bg); color:var(--jid-emerging); } .cchip.sentinel{ background:var(--jid-sentinel-bg); color:var(--jid-sentinel); } /* ============================================================================ NEXT STEPS — nav.next-steps (.next-steps-head + .next-steps-opts > a) ========================================================================== */ .next-steps{ margin-bottom:var(--space-12); } .next-steps-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-4); } .next-steps-head .count{ font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--faint); } .next-steps-opts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--space-4); } .next-step-opt{ display:block; background:var(--panel2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-4); text-decoration:none !important; transition:var(--transition-interactive, border-color .15s, background .15s); } .next-step-opt:hover{ border-color:var(--accent); background:var(--color-surface-dynamic); } .nso-title{ font-family:var(--font-display); font-size:var(--text-base); font-weight:600; color:var(--ink); margin-bottom:var(--space-1); } .nso-desc{ font-size:var(--text-sm); color:var(--muted); } /* ============================================================================ RESPONSIVE — collapse to single column; hide sidenav on narrow screens ========================================================================== */ @media (max-width:900px){ .layout{ grid-template-columns:1fr; } #sidenav{ display:none; } main.wrap{ padding:var(--space-6) var(--space-4); } .viewbar{ padding-left:var(--space-4); padding-right:var(--space-4); } .rh-card{ flex-basis:82%; } } /* ============================================================================ PRINT — drop chrome, single column, remove card shadows ========================================================================== */ @media print{ #sidenav, .viewbar, .next-steps{ display:none !important; } .layout{ grid-template-columns:1fr; } main.wrap{ padding:0; } .rh-card, .role-card, .scn-card, .reg-block, .evidence-zone, .dl-table{ box-shadow:none; break-inside:avoid; } .rh-cards{ overflow:visible; flex-wrap:wrap; } } /* ============================================================================ SITE CHROME — util bar, header (topnav), footer. Mounted client-side by site/assets/js/partials.js mountChrome("jurisdictions") into #util-mount / #header-mount / #footer-mount (empty in the served HTML). All classes are FIM-namespaced (.fim-*) and use the design-system tokens so the chrome inherits the light cream / teal register and the dark toggle. Authored 2026-07-06 with the JS chrome port (partials.js/app.js were never ported during the FE clone; see FIM-RUNBOOK ## FIM front-end architecture). ========================================================================== */ .fim-wrap{ max-width:1400px; margin-inline:auto; padding-inline:var(--space-6); display:flex; align-items:center; gap:var(--space-6); } /* --- utility bar (theme toggle) ------------------------------------------- */ .fim-util{ background:var(--color-surface-offset, var(--panel2)); border-bottom:1px solid var(--line); font-size:var(--text-xs); } .fim-util .fim-wrap{ height:36px; justify-content:space-between; } .fim-util-brand{ font-family:var(--font-mono); letter-spacing:.06em; color:var(--faint); text-transform:none; } .fim-themebar{ display:flex; align-items:center; gap:var(--space-2); } .fim-themebar-lbl{ font-size:var(--text-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); } .fim-themebar-opts{ display:flex; border:1px solid var(--line); border-radius:var(--radius-full); overflow:hidden; } .fim-themebar-opts button{ font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; border:0; background:transparent; color:var(--muted); padding:3px 12px; transition:background .15s, color .15s; } .fim-themebar-opts button.on{ background:var(--color-primary); color:#fff; } /* --- header / topnav ------------------------------------------------------ */ header.fim-site{ background:var(--color-surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:60; } header.fim-site .fim-wrap{ height:61px; gap:var(--space-6); } .fim-logo{ font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--ink); white-space:nowrap; text-decoration:none; line-height:1.05; } .fim-logo b{ color:var(--color-primary); } .fim-logo small{ display:block; font-size:9.5px; letter-spacing:.18em; font-weight:600; color:var(--faint); font-family:var(--font-mono); margin-top:1px; } nav.fim-main{ display:flex; gap:2px; flex:1; flex-wrap:wrap; } nav.fim-main a{ padding:8px 11px; border-radius:var(--radius-sm); font-size:var(--text-sm); color:var(--muted); font-weight:600; text-decoration:none; transition:background .15s, color .15s; } nav.fim-main a:hover, nav.fim-main a.active{ background:var(--color-surface-dynamic); color:var(--color-primary); } /* mobile nav toggle (hidden by default; shown < 860px) */ .fim-nav-toggle{ display:none; } .fim-nav-toggle-label{ display:none; flex-direction:column; gap:4px; cursor:pointer; padding:6px; } .fim-nav-toggle-label span{ width:22px; height:2px; background:var(--ink); border-radius:2px; } /* --- footer --------------------------------------------------------------- */ footer.fim-site-foot{ background:var(--color-surface-offset, var(--panel2)); border-top:1px solid var(--line); margin-top:var(--space-12); padding:var(--space-8) 0; font-size:var(--text-sm); color:var(--muted); } footer.fim-site-foot .fim-wrap{ display:block; } .fim-foot-cols{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--space-6); } .fim-foot-logo{ font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:16px; } .fim-foot-logo b{ color:var(--color-primary); } .fim-foot-blurb{ opacity:.85; margin-top:var(--space-2); max-width:320px; } .fim-foot-cols h5{ font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:var(--space-2); } .fim-foot-cols a{ color:var(--muted); text-decoration:none; display:block; padding:3px 0; } .fim-foot-cols a:hover{ color:var(--color-primary); } .fim-foot-note{ margin-top:var(--space-6); padding-top:var(--space-4); border-top:1px solid var(--line-soft, var(--line)); font-size:var(--text-xs); color:var(--faint); line-height:1.5; max-width:820px; } .fim-foot-powered{ margin-top:var(--space-3); font-size:var(--text-xs); } .fim-foot-powered a{ color:var(--faint); text-decoration:none; } .fim-foot-powered a:hover{ color:var(--color-primary); } /* --- chrome responsive ---------------------------------------------------- */ @media (max-width:860px){ nav.fim-main{ display:none; position:fixed; top:61px; left:0; right:0; flex-direction:column; background:var(--color-surface); border-bottom:1px solid var(--line); padding:var(--space-2) var(--space-4); z-index:59; } .fim-nav-toggle:checked ~ nav.fim-main{ display:flex; } .fim-nav-toggle-label{ display:flex; margin-left:auto; } .fim-foot-cols{ grid-template-columns:1fr 1fr; } } @media print{ .fim-util, header.fim-site, footer.fim-site-foot{ display:none !important; } } /* ============================================================================= sentinel-jid.css — Option B card vocabulary (APPEND block) v0.2 ADAPTED Pairs with: fim-jid-template-B-v0.2.html + fim_slot_fills-v0.2.py v0.2 changes: (1) KPI rules target the renderer's shipped .kpis>.kpi>.k+.v (not .kpi-strip/.kpi-value/.kpi-label) so no renderer DOM churn; (2) severity classes reuse the existing --high/--elevated/--monitored/--critical tokens already in sentinel-tokens.css instead of re-deriving from --color-*. Adds the mockup's card/tile/chip selectors the WPM-scaffold sheet lacked: .hero .kpi .kpi-strip .panel .lens-card .trust-card .trust-grid .cchip .badge .eyebrow .role-tag .mono (+ *-trigger drawer affordance) ----------------------------------------------------------------------------- DESIGN DISCIPLINE (runbook FE-2): - Token-driven ONLY. Adds NO palette; every colour is a var(--color-*) or a --jid-* local mapped FROM tokens. No inline hex. No :root block. - Confidence/severity classes reuse the sev-badge cascade already shipped. - Load AFTER sentinel-display.css, BEFORE the inline thin-bridge. ============================================================================= */ /* ---- confidence / severity -> local vars ---------------------------------- REUSE the severity tokens already shipped in sentinel-tokens.css (--high/--elevated/--monitored/--critical) with --color-* as fallback. */ .sev-badge--high { --jid-sev: var(--high, var(--color-primary)); } .sev-badge--elevated { --jid-sev: var(--elevated, var(--color-warning, #b5751a)); } .sev-badge--monitored{ --jid-sev: var(--monitored, var(--muted)); } .sev-badge--critical { --jid-sev: var(--critical, var(--color-error, #c23b3b)); } /* ---- shared primitives ----------------------------------------------------- */ .eyebrow{font:600 .72rem/1 var(--font-mono);letter-spacing:.09em; text-transform:uppercase;color:var(--muted);margin-bottom:.55rem} .mono{font-family:var(--font-mono)} .badge,.sev-badge{display:inline-flex;align-items:center;gap:.4em; font:700 .68rem/1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase; padding:.32em .6em;border-radius:999px; color:var(--jid-sev,var(--color-text)); background:color-mix(in srgb,var(--jid-sev,var(--line)) 14%,transparent); border:1px solid color-mix(in srgb,var(--jid-sev,var(--line)) 28%,transparent)} /* ---- hero + KPI strip ------------------------------------------------------ */ .hero{background:linear-gradient(135deg, color-mix(in srgb,var(--color-primary) 12%,var(--panel)),var(--panel)); border:1px solid var(--line);border-radius:14px; padding:1.9rem 2rem;margin:1.4rem 0 1.5rem;box-shadow:var(--shadow,0 1px 3px rgba(0,0,0,.06))} .hero h1{font:600 2rem/1.1 var(--font-display);letter-spacing:-.01em;margin:.35rem 0 .5rem} .hero h1 .mono{font-size:1.1rem;color:var(--muted);vertical-align:middle} .hero-lede{color:var(--color-text);max-width:62ch;margin:0} /* KPI strip: target the renderer's shipped .kpis>.kpi>.k+.v structure (label = .k, value = .v). Keeps _kpi_card() output; no renderer churn. */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.75rem;margin-top:1.4rem} .kpi{background:var(--bg);border:1px solid var(--line);border-radius:10px; padding:.85rem 1rem;display:flex;flex-direction:column;gap:.25rem} .kpi .k{font-size:.75rem;color:var(--muted);order:2} .kpi .v{font:600 1.75rem/1 var(--font-display);color:var(--color-primary);order:1} /* ---- panel (weekly brief) -------------------------------------------------- */ .panel{background:var(--panel);border:1px solid var(--line);border-radius:12px; padding:1.4rem 1.6rem;margin:0 0 1.2rem} .lens-title{font:600 1.35rem/1.2 var(--font-display);margin:.1rem 0 .8rem} .panel-body{color:var(--color-text)} .panel-body>h4{font:600 .95rem/1.3 var(--font-body);margin:1.1rem 0 .3rem} /* ---- decision lens cards --------------------------------------------------- */ .lens-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.85rem} .lens-card{background:var(--panel);border:1px solid var(--line); border-left:3px solid var(--color-primary);border-radius:10px;padding:1.1rem 1.2rem} .lens-role{font:700 .68rem/1 var(--font-mono);letter-spacing:.06em; text-transform:uppercase;color:var(--color-primary);margin-bottom:.5rem} .lens-headline{font:600 1.02rem/1.3 var(--font-body);margin-bottom:.4rem} .lens-body{font-size:.9rem;color:var(--muted)} /* ---- role action cards ----------------------------------------------------- */ .role-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.85rem} .role-card{background:var(--panel);border:1px solid var(--line);border-radius:10px; padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.45rem} .role-tag{align-self:flex-start;font:700 .64rem/1 var(--font-mono);letter-spacing:.06em; text-transform:uppercase;color:var(--color-primary); background:color-mix(in srgb,var(--color-primary) 12%,transparent); padding:.3em .6em;border-radius:6px} .rc-prio{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} .rc-headline{font:600 1rem/1.3 var(--font-body);margin:0} .rc-means{font-size:.9rem;color:var(--color-text);margin:0} .rc-claims{font:600 .74rem/1 var(--font-mono);color:var(--muted)} /* ---- trust cards (domains D1-D6) + coverage grid --------------------------- */ .trust-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem} .trust-card{background:var(--panel);border:1px solid var(--line);border-radius:12px; padding:1.2rem 1.35rem;display:flex;flex-direction:column;gap:.7rem; border-top:3px solid var(--jid-sev,var(--color-primary))} .trust-card .tc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem} .trust-card .tc-head h3{font:600 1.02rem/1.25 var(--font-body);margin:0} .tc-body{font-size:.9rem;color:var(--color-text); max-height:11rem;overflow:hidden;position:relative} .tc-body::after{content:"";position:absolute;inset:auto 0 0 0;height:2.5rem; background:linear-gradient(transparent,var(--panel))} .tc-foot{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:auto;padding-top:.3rem} /* ---- chips ----------------------------------------------------------------- */ .cchip-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))} .cchip{display:inline-flex;align-items:center;gap:.4em;font:600 .74rem/1 var(--font-mono); padding:.4em .7em;border-radius:7px;border:1px solid var(--line); background:var(--bg);color:var(--color-text)} .cchip--covered {border-color:transparent;color:var(--color-primary); background:color-mix(in srgb,var(--color-primary) 12%,transparent)} .cchip--partial {border-color:transparent;color:var(--color-warning,#b5751a); background:color-mix(in srgb,var(--color-warning,#b5751a) 14%,transparent)} .cchip--uncovered{border-color:transparent;color:var(--color-error,#c23b3b); background:color-mix(in srgb,var(--color-error,#c23b3b) 12%,transparent)} .cchip--unassessed,.cchip--other{color:var(--muted)} /* ---- unmapped / null-cycle (integrity guards — must stay visible) ---------- */ .unmapped-chip{display:inline-flex;align-items:center;font:600 .7rem/1 var(--font-mono); padding:.32em .6em;border-radius:6px;color:var(--muted); border:1px dashed var(--line);background:transparent} .null-cycle{font-size:.9rem;color:var(--muted);border:1px dashed var(--line); border-radius:10px;padding:1rem 1.2rem;background:var(--bg)} .provenance-footer{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem} /* ---- drawer trigger affordance (drawer.css owns the panel) ----------------- */ .brief-trigger,.claim-trigger{cursor:pointer;font:600 .78rem/1 var(--font-body); color:var(--color-primary);background:transparent;border:1px solid var(--line); border-radius:7px;padding:.45em .8em} .brief-trigger:hover,.claim-trigger:hover{border-color:var(--color-primary)} /* ---- dark register: nothing to override — all colour is token-derived, so .cchip/.hero/.kpi flip automatically with [data-theme="dark"]. ----- */ /* ---- reduced-motion / narrow ---------------------------------------------- */ @media (max-width:640px){.hero{padding:1.4rem}.trust-grid{grid-template-columns:1fr}} /* ============================================================================ MOCKUP-PARITY APPEND (BRIEF-2026-07-06-FIM-FE-MOCKUP-PARITY, session arti-cadd7edc). Token-driven; NO :root; NO new palette. Tokens verified against this blob (c912250e): --panel/--line/--ink/--accent/--muted/ --font-mono/--font-display/--space-*/--text-*/--radius-* all present; BRIEF's --surface/--border/--font-serif absent -> adapted to --panel/--line/ --font-display. Retires the dl-table count view; adds lens narrative cards, domain lead/expand, and title-led role bodies. ========================================================================== */ /* ---- decision lens: narrative cards (retire the dl-table count view) ---- */ .lens-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-3)} .lens-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-4)} .lens-card .lens-role{font:600 var(--text-xs)/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-2)} .lens-card .lens-body{font-size:var(--text-sm);color:var(--ink);max-width:none;margin:0} .dl-shared{margin-top:var(--space-3);font:500 var(--text-xs)/1.4 var(--font-mono);color:var(--muted)} /* ---- domain trust cards: lead always visible + expand (retire full dump) ---- */ /* Slice K max-height:none clamp-defeat REMOVED (Phase 2): the prose|cards model (sentinel-jid.domain-view-append, below) now governs #sec-domains essay flow, so the blanket .tc-body.domain-body clamp override is redundant. */ .tc-body.domain-body::after{content:none} .domain-body .tc-lead{margin-bottom:var(--space-2)} .domain-body .tc-lead p:first-child{margin-top:0} .domain-body .tc-more{margin-top:var(--space-2)} .domain-body .tc-more>summary.tc-more-toggle{cursor:pointer;list-style:none;font:600 var(--text-xs)/1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--accent);padding:var(--space-1) 0;user-select:none} .domain-body .tc-more>summary.tc-more-toggle::-webkit-details-marker{display:none} .domain-body .tc-more>summary.tc-more-toggle::before{content:"+ ";font-weight:700} .domain-body .tc-more[open]>summary.tc-more-toggle::before{content:"\2013 "} .domain-body .tc-rest{margin-top:var(--space-2)} .domain-body .tc-rest p{max-width:74ch;margin-bottom:var(--space-3)} /* ---- role cards: title-led + full body paragraph (no confidence dot) ---- */ .role-card .rc-headline{font-family:var(--font-display);font-size:var(--text-base);margin:var(--space-1) 0 var(--space-2)} .role-card .rc-role{font:600 var(--text-xs)/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .role-card .rc-means p{max-width:none;margin-bottom:var(--space-2)} .role-card .rc-means p:last-child{margin-bottom:0} /* ---- a11y utilities: skip-link + screen-reader-only live region ---- The renderer emits