/* GovHub 2.0 — runtime stylesheet (GENERATED — do not edit by hand). Built from docs/specs/design-framework/reference/{tokens,components}.css by scripts/build-css.sh. Edit the reference, then run `task css:build`. Drift between this file and the reference is caught by `task css:check`. */ /* ---------- Self-hosted Inter (App UI font; the brand display font is login-only and falls back to system). Served from /static/fonts via embed.FS — no CDN. Must be named exactly `Inter` so var(--font-ui) resolves to it without a separate alias. ---------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/InterVariable.woff2") format("woff2"); } /* ============================================================ GovHub 2.0 — Design Tokens (v2, "Precision SaaS") Single source of truth for color, type, spacing, elevation. Brand values: CLOUDPILOTS CI manual (as of November 2025). DESIGN DIRECTION v2: crisp, hairline-border, flat-surface UI. Borders define structure; shadows are reserved for floating layers (dropdown, dialog, toast, peek panel). Cool slate neutrals, two-role blue system (brand navy = identity, action blue = interaction), squared-badge status language, 14px data-grade type on an 8-pt grid. North stars: Linear (structure/density), Stripe Dashboard (data/table/form language), Attio (temperature/chips). RULE: No raw hex / px values anywhere outside this file. Components and pages reference var(--token) only. SSR : Pure CSS custom properties — render server-side with zero JavaScript. Link this file first, before components. ============================================================ */ /* ---------- Webfonts ---------- Inter Variable — App UI (body + headings). Data-dense friendly, tabular figures, broad glyph coverage. Self-hosted in production; the CDN import is for the standalone reference pages only. PT Sans Narrow — Brand/marketing/login ONLY (display), not in the app. */ /* (CDN @import from fonts.googleapis.com intentionally omitted — self-hosted @font-face above provides Inter at runtime.) */ :root { /* ========================================================= 1. CORE BRAND COLORS (CI manual p. 7–8) Two-role blue system: brand (navy #345E93) — identity: logo, sidebar rail accents, selected-nav, focus ring action (blue-600) — interaction: buttons, links, active controls. Same hue family, higher chroma → clear affordance. ========================================================= */ --clp-blue: #345E93; /* primary brand (identity) */ --clp-yellow: #FFBB29; /* accent only — never body text */ --clp-black: #212121; --clp-gray-text: #424242; --clp-white: #FFFFFF; /* Brand blue scale (hue ≈ 214, chroma peaks at 600) */ --clp-blue-950: #142338; --clp-blue-900: #1d3350; --clp-blue-800: #274568; --clp-blue-700: #345E93; /* = brand navy */ --clp-blue-600: #2f6cba; /* = action blue */ --clp-blue-500: #4d84c9; --clp-blue-400: #7ba6d8; --clp-blue-300: #aac6e6; --clp-blue-200: #d0e0f2; --clp-blue-100: #e7eff8; --clp-blue-50: #f3f7fb; /* Neutral scale — cool slate, pairs with the blue family */ --clp-neutral-950: #0d1220; --clp-neutral-900: #1a2233; --clp-neutral-800: #2c3547; --clp-neutral-700: #414c61; --clp-neutral-600: #57637a; --clp-neutral-500: #717d92; --clp-neutral-400: #9ba4b5; --clp-neutral-300: #cdd3dc; --clp-neutral-200: #e1e5eb; --clp-neutral-150: #eaedf2; --clp-neutral-100: #f1f3f6; --clp-neutral-50: #f8f9fb; --clp-neutral-25: #fcfcfd; --clp-neutral-0: #ffffff; /* Accent (yellow) scale — accent + warning family only */ --clp-yellow-700: #a56b06; --clp-yellow-600: #cd8c0e; --clp-yellow-500: #FFBB29; --clp-yellow-400: #ffc955; --clp-yellow-300: #ffd882; --clp-yellow-200: #ffe7b0; --clp-yellow-100: #fff3d6; /* Status hues — each hue ships base (icons/dots), 700 (text on light), bg (tint fill), border (tint outline). Canon and usage rules: 02-colors-and-status.md. */ --status-success: #1a9e6d; --status-success-700: #0e6b47; --status-success-bg: #e6f6ef; --status-success-border: #b9e6d2; --status-warning: #e09a12; --status-warning-700: #8f5b06; --status-warning-bg: #fdf3df; --status-warning-border: #f3ddaa; --status-danger: #c2372c; --status-danger-700: #9c2b22; --status-danger-bg: #fceceb; --status-danger-border: #f2c7c3; --status-info: #2f6cba; --status-info-700: #274568; --status-info-bg: #e7eff8; --status-info-border: #c4d9ee; --status-neutral: #717d92; --status-neutral-700: #414c61; --status-neutral-bg: #f1f3f6; --status-neutral-border: #dbe0e7; /* ========================================================= 2. SEMANTIC COLOR TOKENS (use these, not the raw scale) ========================================================= */ --bg-app: var(--clp-neutral-25); /* page canvas — near-white */ --bg-sidebar: var(--clp-neutral-50); /* app-shell sidebar rail */ --bg-surface: var(--clp-white); /* cards, panels, rows */ --bg-subtle: var(--clp-neutral-100); /* inset wells, skeletons */ --bg-muted: var(--clp-blue-50); --bg-inverse: var(--clp-neutral-900); --bg-brand: var(--clp-blue-700); /* identity surfaces */ --bg-action: var(--clp-blue-600); /* primary buttons */ --bg-action-hover: var(--clp-blue-700); --bg-brand-soft: var(--clp-blue-100); /* active nav item, selected */ --bg-accent: var(--clp-yellow-500); --bg-hover: var(--clp-neutral-100); /* row / item hover */ --fg-primary: var(--clp-neutral-900); --fg-body: var(--clp-neutral-700); --fg-muted: var(--clp-neutral-500); --fg-brand: var(--clp-blue-700); --fg-action: var(--clp-blue-600); --fg-on-brand: var(--clp-white); --fg-on-action: var(--clp-white); --fg-on-accent: var(--clp-neutral-900); --fg-on-inverse: var(--clp-white); --fg-link: var(--clp-blue-600); --fg-link-hover: var(--clp-blue-700); --border-subtle: var(--clp-neutral-150); /* hairline card / divider */ --border-default: var(--clp-neutral-200); /* controls, tables */ --border-strong: var(--clp-neutral-300); /* hover / emphasis */ --border-brand: var(--clp-blue-700); --border-action: var(--clp-blue-600); --ring-focus: color-mix(in srgb, var(--clp-blue-600) 40%, transparent); /* ========================================================= 3. TYPOGRAPHY (14px data-grade scale, tabular numerals) ========================================================= */ --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-brand: 'PT Sans Narrow', var(--font-ui); /* marketing / login only */ --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace; --fs-display: 1.75rem; /* 28px — hero numbers, login */ --fs-stat: 1.625rem; /* 26px — KPI numbers */ --fs-h1: 1.375rem; /* 22px — page title */ --fs-h2: 1.125rem; /* 18px — section */ --fs-h3: 1rem; /* 16px — card / subsection */ --fs-h4: 0.875rem; /* 14px — label-ish heading (semibold) */ --fs-body: 0.875rem; /* 14px — base body */ --fs-small: 0.8125rem; /* 13px — secondary, table cells */ --fs-caption: 0.75rem; /* 12px — captions, table heads, meta */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --lh-tight: 1.2; --lh-snug: 1.4; --lh-normal:1.5; --lh-loose: 1.65; --ls-wide: 0.05em; /* uppercase eyebrows / table heads */ --ls-tight: -0.02em; /* h1 / h2 / stat numbers */ --ls-snug: -0.01em; /* h3 / buttons */ --ls-normal: 0; /* ========================================================= 4. SPACING (8-pt rhythm; 4px half-step allowed) ========================================================= */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ========================================================= 5. RADIUS / ELEVATION / MOTION Precision-SaaS: tighter radii; borders carry structure, shadows belong to floating layers only. ========================================================= */ --radius-none: 0; --radius-sm: 4px; /* chips, small pills' inner bits */ --radius-md: 6px; /* default control radius (buttons, inputs) */ --radius-lg: 10px; /* cards, panels */ --radius-xl: 14px; /* dialogs, large overlays */ --radius-pill: 999px; /* xs/sm: resting hints on interactive surfaces (cards keep border-only). md: dropdowns / popovers. lg: dialogs / peek panels / toasts. */ --shadow-xs: 0 1px 2px rgba(13,18,32,0.05); --shadow-sm: 0 1px 3px rgba(13,18,32,0.07), 0 1px 2px rgba(13,18,32,0.04); --shadow-md: 0 4px 12px rgba(13,18,32,0.10), 0 1px 3px rgba(13,18,32,0.06); --shadow-lg: 0 16px 40px rgba(13,18,32,0.16), 0 4px 12px rgba(13,18,32,0.08); --shadow-brand: 0 4px 14px rgba(47,108,186,0.28); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 100ms; --dur-base: 150ms; --dur-slow: 240ms; /* ========================================================= 6. LAYOUT SCALE (app shell + z-index) ========================================================= */ --layout-sidebar-w: 240px; --layout-sidebar-w-collapsed: 64px; --layout-topbar-h: 52px; --layout-content-max: 1320px; --layout-gutter: var(--space-8); --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --z-base: 0; --z-sticky: 100; /* sticky table head, page header */ --z-nav: 200; /* app shell sidebar / topbar */ --z-dropdown: 300; --z-overlay: 400; /* dialog backdrop */ --z-dialog: 401; --z-toast: 500; /* ========================================================= 7. CATEGORY PALETTE (data-vis, NOT status) Stable 8-slot palette for categories without status meaning — framework chips, relationship-map edges, multi-series charts. Saturated stroke/text value + low-saturation surface tint. Assign deterministically (hash of stable id mod 8); never reuse for status. Retuned to the cool slate temperature. ========================================================= */ --c-cat-1: #2f6cba; --c-cat-1-bg: #e7eff8; /* action blue — slot 0 */ --c-cat-2: #7c58d6; --c-cat-2-bg: #efeafb; /* violet — slot 1 */ --c-cat-3: #0f8f83; --c-cat-3-bg: #e2f3f1; /* teal — slot 2 */ --c-cat-4: #c05f1e; --c-cat-4-bg: #faece0; /* deep orange — slot 3 */ --c-cat-5: #4f52d8; --c-cat-5-bg: #ebebfb; /* indigo — slot 4 */ --c-cat-6: #b13087; --c-cat-6-bg: #f8e8f2; /* magenta — slot 5 */ --c-cat-7: #4e7d22; --c-cat-7-bg: #edf3e3; /* moss green — slot 6 */ --c-cat-8: #57637a; --c-cat-8-bg: #eaedf2; /* slate — slot 7 */ /* ========================================================= 8. BREAKPOINTS (reference values — see note below) --bp-* are documentation tokens; use them via the media queries listed in 03-layout-and-app-shell.md. Custom properties cannot be used directly inside @media, so the literal values are repeated there intentionally. ========================================================= */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* ========================================================= 9. DATA-VIZ CATEGORICAL PALETTE (diagram archetype — ADR-0054) Categorical, 8-slot palette for the Compliance-flow Sankey (v2 restyle 2026-07-05). Deterministic mapping framework_id → slot N via FNV-1a of the UUID modulo 8. Slot 1 is the v2 action blue so the palette head reads on-brand; slots 2–8 follow a CVD-optimised fixed order (validated on white surface: worst adjacent Machado-2009 ΔE 24.2, lightness band + chroma floor PASS). Three slots sit below 3:1 mark-contrast on white — relief is the always-visible node labels + the parallel ?view=list table. Distinct from the status canon (--status-*) so a series colour never reads as "compliance outcome". Fixed order, assigned in sequence, never cycled. ========================================================= */ --sankey-ribbon-1: #2f6cba; /* blue (action) — slot 1 */ --sankey-ribbon-2: #1baf7a; /* aqua — slot 2 */ --sankey-ribbon-3: #eda100; /* amber — slot 3 */ --sankey-ribbon-4: #008300; /* green — slot 4 */ --sankey-ribbon-5: #4a3aa7; /* violet — slot 5 */ --sankey-ribbon-6: #e34948; /* red — slot 6 */ --sankey-ribbon-7: #e87ba4; /* magenta — slot 7 */ --sankey-ribbon-8: #eb6834; /* orange — slot 8 */ --sankey-node-fg: var(--clp-neutral-900); /* node label ink */ --sankey-node-bg: var(--bg-surface); /* diagram surface (white card) */ --sankey-edge-hover: color-mix(in srgb, var(--clp-blue-700) 45%, transparent); } /* Dark mode is intentionally NOT shipped yet. Components read the semantic layer (section 2) only, so a future [data-theme="dark"] block re-maps semantics without touching any component CSS. */ /* ============================================================ GovHub 2.0 — Components & Base Reset + base typography + layout helpers + all component classes. Consumes tokens.css ONLY (no raw values here either, except structural zeroes and 100%/1px hairlines). Link order: then DIRECTION v2: "Precision SaaS" — crisp hairline-border, flat-surface UI. Borders define structure; shadows are reserved for floating layers (dropdown, dialog, toast, panels). Tinted-rail sidebar on a near-white canvas, action-blue interactions, squared status badges. Status always: color + icon + text. ============================================================ */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } body { min-height: 100vh; color: var(--fg-body); background: var(--bg-app); font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } ul, ol { list-style: none; padding: 0; } :where(a) { color: var(--fg-link); } /* Visible focus everywhere — accessibility is markup, not opt-in */ :focus-visible { outline: 2px solid var(--ring-focus); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* Skip link — first focusable element, jumps to
*/ .skip-link { position: absolute; left: var(--space-3); top: -100%; z-index: var(--z-toast); background: var(--bg-surface); color: var(--fg-link); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .skip-link:focus { top: var(--space-3); } /* ---------- Base typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-ui); font-weight: var(--fw-semibold); color: var(--fg-primary); line-height: var(--lh-tight); text-align: left; text-wrap: balance; letter-spacing: var(--ls-tight); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } p { text-wrap: pretty; } strong, b { font-weight: var(--fw-semibold); } small { font-size: var(--fs-small); } a { text-decoration: none; color: var(--fg-link); transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--fg-link-hover); } :where(p, .field__help, .prose) a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } code, kbd, samp { font-family: var(--font-mono); font-size: .9em; } .muted { color: var(--fg-muted); } .eyebrow { font-weight: var(--fw-semibold); font-size: var(--fs-caption); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-brand); } .caption { font-size: var(--fs-caption); color: var(--fg-muted); } /* ============================================================ ICON (reference/icons.svg → ) Inherits text color; sized by font context. No raw SVG in markup. ============================================================ */ .icon { width: var(--icon-md); height: var(--icon-md); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; } .icon--sm { width: var(--icon-sm); height: var(--icon-sm); } .icon--lg { width: var(--icon-lg); height: var(--icon-lg); } /* ============================================================ LAYOUT HELPERS (the only spacing primitives — see 03) ============================================================ */ .stack { display: flex; flex-direction: column; gap: var(--space-6); } .stack--tight { gap: var(--space-3); } .stack--loose { gap: var(--space-8); } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .split { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .grid-cards { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .grid-stats { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* ============================================================ APP SHELL (03-layout-and-app-shell.md) ============================================================ */ .shell { display: grid; grid-template-columns: var(--layout-sidebar-w) 1fr; min-height: 100vh; } .shell__sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: var(--z-nav); } .shell__main { display: flex; flex-direction: column; min-width: 0; } .shell__content { width: 100%; max-width: var(--layout-content-max); margin-inline: auto; padding: var(--layout-gutter); } /* Brand block — logo mark + wordmark */ .sidebar__brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); min-height: var(--layout-topbar-h); font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--fg-primary); letter-spacing: var(--ls-tight); } .sidebar__mark { width: 30px; height: 30px; flex: none; border-radius: var(--radius-md); background: var(--bg-brand); color: var(--fg-on-brand); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); } .sidebar__nav { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); flex: 1; overflow-y: auto; } .sidebar__section { padding: var(--space-4) var(--space-3) var(--space-1); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-muted); } .sidebar__link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--fg-body); text-decoration: none; min-height: 34px; font-weight: var(--fw-medium); font-size: var(--fs-small); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .sidebar__link .icon { color: var(--fg-muted); } .sidebar__link:hover { background: var(--clp-neutral-150); color: var(--fg-primary); } .sidebar__link:hover .icon { color: var(--fg-body); } .sidebar__link[aria-current="page"] { background: var(--bg-brand-soft); color: var(--fg-brand); font-weight: var(--fw-semibold); } .sidebar__link[aria-current="page"] .icon { color: var(--fg-brand); } .sidebar__count { margin-left: auto; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--fg-muted); background: var(--bg-subtle); border-radius: var(--radius-pill); padding: 1px var(--space-2); min-width: 22px; text-align: center; } /* Settings context: "back to app" link sits above the settings nav, set apart by muted weight and a divider so it reads as an exit rather than a peer item. */ .sidebar__link--back { color: var(--fg-muted); font-weight: var(--fw-medium); margin-bottom: var(--space-1); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-subtle); border-radius: 0; } .sidebar__link--back:hover { background: transparent; color: var(--fg-primary); } .sidebar__footer { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin: var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--fg-body); font-size: var(--fs-small); } .sidebar__footer .icon { color: var(--fg-muted); } .sidebar__footer small { display: block; color: var(--fg-muted); } /* Topbar */ .topbar { display: flex; align-items: center; gap: var(--space-4); height: var(--layout-topbar-h); padding-inline: var(--layout-gutter); background: color-mix(in srgb, var(--bg-surface) 88%, transparent); backdrop-filter: saturate(140%) blur(6px); border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0; z-index: var(--z-sticky); } .topbar__spacer { flex: 1; } /* Chained selector: must outrank the later .icon-btn display rule. */ .icon-btn.topbar__menu-btn { display: none; } /* Breadcrumb */ .breadcrumb { display: flex; align-items: center; gap: var(--space-1); font-size: var(--fs-small); color: var(--fg-muted); } .breadcrumb a { color: var(--fg-muted); } .breadcrumb a:hover { color: var(--fg-body); } .breadcrumb .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--clp-neutral-300); } .breadcrumb [aria-current="page"] { color: var(--fg-primary); font-weight: var(--fw-medium); } /* Search box with leading icon */ .searchbox { display: flex; align-items: center; gap: var(--space-2); background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding-inline: var(--space-3); min-height: 34px; min-width: 240px; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .searchbox:focus-within { border-color: var(--border-brand); box-shadow: 0 0 0 3px var(--ring-focus); background: var(--bg-surface); } .searchbox .icon { color: var(--fg-muted); width: var(--icon-sm); height: var(--icon-sm); } .searchbox input { flex: 1; border: 0; background: transparent; outline: none; font-size: var(--fs-small); min-width: 0; } /* Icon button (topbar utility actions) */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--fg-body); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); } .icon-btn:hover { background: var(--bg-hover); } /* Active state for the topbar settings gear while inside the settings context. */ .icon-btn.is-active { background: var(--bg-brand-soft); color: var(--fg-brand); } .icon-btn.is-active .icon { color: var(--fg-brand); } /* Page header — title left, primary CTA right (03 + 04 button rules) */ .page-header { gap: var(--space-4); align-items: flex-start; } .page-header__title { display: flex; flex-direction: column; gap: var(--space-1); } .page-header__title h1 { display: flex; align-items: center; gap: var(--space-3); } /* Header action cluster (title left, buttons right): a long intro paragraph must not squeeze the buttons into a vertical wrap — the cluster keeps its intrinsic width and stays pinned to the right edge on one row. On narrow viewports the whole header wraps instead, dropping the cluster below the title rather than overflowing horizontally. */ .page-header > .cluster { flex-shrink: 0; } @media (max-width: 640px) { .split.page-header { flex-wrap: wrap; } } /* Collection-size count appended to a list-page H1 (e.g. "Workloads · 24"). */ .page-header__count { font-weight: var(--fw-regular); font-size: var(--fs-h3); color: var(--fg-muted); } /* Sticky variant — opt-in modifier. Use on long designer-style detail pages where the single primary CTA in the header (e.g. "Save changes") must stay reachable while the user scrolls through deep accordions. Sticks BELOW the sticky topbar (top = --layout-topbar-h). Negative inline padding + matching positive padding bleeds the surface to the gutter so the sticky bar visually covers the content scrolling underneath it. Do NOT add to every detail page — most pages are short enough that the top-right CTA is reachable without sticking. */ .page-header--sticky { position: sticky; top: var(--layout-topbar-h); z-index: var(--z-sticky); background: var(--bg-app); margin-inline: calc(-1 * var(--layout-gutter)); padding: var(--space-3) var(--layout-gutter); border-bottom: 1px solid var(--border-subtle); } /* ============================================================ BUTTON (04 → Button) ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); font-family: var(--font-ui); font-weight: var(--fw-semibold); font-size: var(--fs-small); letter-spacing: var(--ls-snug); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .btn .icon { width: var(--icon-sm); height: var(--icon-sm); } .btn--primary { background: var(--bg-action); color: var(--fg-on-action); box-shadow: var(--shadow-xs); } .btn--primary:hover { background: var(--bg-action-hover); box-shadow: var(--shadow-sm); } .btn--secondary { background: var(--bg-surface); color: var(--fg-body); border-color: var(--border-default); } .btn--secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); } .btn--ghost { background: transparent; color: var(--fg-body); } .btn--ghost:hover { background: var(--bg-hover); } .btn--danger { background: var(--status-danger); color: var(--clp-white); } .btn--danger:hover { background: var(--status-danger-700); } .btn--sm { min-height: 30px; padding: 0 var(--space-3); } .btn--lg { min-height: 42px; padding: 0 var(--space-5); font-size: var(--fs-body); } .btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; } .btn.is-loading { position: relative; color: transparent; pointer-events: none; } .btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: var(--radius-pill); animation: spin var(--dur-slow) linear infinite; color: var(--fg-on-brand); } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ STATUS PILL + DOT + CHIP (02 + 04) — Farbe + Icon + Text ============================================================ */ /* Squared status badge (v2): light tint + darker text, no border, 4px radius — calmer in dense tables than filled rounded pills. Anatomy stays color + icon + text (canon, never color alone). */ .pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: var(--fs-caption); font-weight: var(--fw-medium); line-height: var(--lh-snug); white-space: nowrap; } .pill .icon { width: 13px; height: 13px; } .pill--success { background: var(--status-success-bg); color: var(--status-success-700); } .pill--warning { background: var(--status-warning-bg); color: var(--status-warning-700); } .pill--danger { background: var(--status-danger-bg); color: var(--status-danger-700); } .pill--info { background: var(--status-info-bg); color: var(--status-info-700); } .pill--neutral { background: var(--status-neutral-bg); color: var(--status-neutral-700); } /* Draft / provisional: no fill, dashed hairline — reads as "not yet real". */ .pill--outline { background: transparent; color: var(--fg-muted); border: 1px dashed var(--border-strong); padding-block: 1px; } .dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-pill); vertical-align: middle; } .dot--success { background: var(--status-success); } .dot--warning { background: var(--status-warning); } .dot--danger { background: var(--status-danger); } .dot--info { background: var(--status-info); } .dot--neutral { background: var(--status-neutral); } .chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px var(--space-2); border-radius: var(--radius-sm); background: var(--bg-subtle); border: 1px solid var(--border-subtle); color: var(--fg-body); font-size: var(--fs-caption); font-weight: var(--fw-medium); } .chip__remove { display: inline-flex; cursor: pointer; color: var(--fg-muted); background: none; border: 0; padding: 0; } .chip__remove:hover { color: var(--fg-primary); } .chip__remove .icon { width: 13px; height: 13px; } /* Data-driven chip color (tag-value / scope-value Color column). Templates render the user-chosen hex as the inline CSS custom property `--chip-color`; we accept that one inline form (R2: only `style="--…"` exceptions allowed) because the value originates in data, not in markup authoring. The border darkens via color-mix so the chip still reads as a bounded shape regardless of how light the user-chosen background is. */ .chip[style*="--chip-color"] { background: var(--chip-color); border-color: color-mix(in srgb, var(--chip-color) 70%, var(--clp-neutral-900)); } /* Reveal-on-open
: a summary acts as the trigger ("Add assignment", "Add filter", …) and the body underneath holds an inline form/control. Opt-in via data-reveal so vanilla disclosure UIs (FAQ accordions etc.) keep their natural flush layout. Adds breathing room between summary and body when the panel is open. */ details[data-reveal][open] > *:not(summary) { margin-top: var(--space-3); } /* Read-only chip — used when a tag category is configured via a scope-side tag_category field (ADR-0039 amendment 2026-06-19). The Tags section still shows the same chips so the user sees what is selected, but inputs are disabled there; the scope-side picker is the single edit surface. */ .chip--readonly { opacity: 0.6; cursor: not-allowed; } .chip--readonly input { pointer-events: none; } .field--readonly .field__label .caption { font-style: italic; } /* Interactive toggle chip — click-to-hide/click-to-show affordance for diagram legends + layer toolbars (ADR-0054 §Amendment 2026-07-03 — user-testing feedback on PR-82). Extends .chip with hover + focus + an "inactive" state (aria-pressed="false"): the swatch dims and the label goes muted so the reader sees at a glance which relations / layers are currently hidden. Keyboard-accessible via role="button" + tabindex="0". */ .chip--toggle { cursor: pointer; user-select: none; transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .chip--toggle:hover { background: var(--bg-hover); border-color: var(--border-strong); } .chip--toggle:focus-visible { outline: 2px solid var(--ring-focus); outline-offset: 2px; } .chip--toggle[aria-pressed="false"] { opacity: 0.42; color: var(--fg-muted); background: var(--bg-surface); border-style: dashed; } .chip--toggle[aria-disabled="true"] { cursor: not-allowed; opacity: 0.62; background: var(--bg-subtle); } .chip--toggle[aria-disabled="true"]:hover { background: var(--bg-subtle); border-color: var(--border-subtle); } /* ============================================================ SCOPE MULTI-SELECT (workload form — toggle buttons + fill-in cards) ============================================================ */ .scope-group { display: flex; flex-direction: column; gap: var(--space-2); } .scope-group__label { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-muted); } .scope-toggle { display: flex; flex-wrap: wrap; gap: var(--space-2); } .scope-toggle__btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: var(--bg-surface); color: var(--fg-body); font-family: var(--font-ui); font-weight: var(--fw-medium); font-size: var(--fs-small); cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .scope-toggle__btn .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--fg-muted); } .scope-toggle__btn:hover { background: var(--bg-hover); border-color: var(--border-strong); } .scope-toggle__btn.is-selected { background: var(--bg-brand-soft); color: var(--fg-brand); border-color: var(--border-brand); font-weight: var(--fw-semibold); } .scope-toggle__btn.is-selected .icon { color: var(--fg-brand); } .scope-fields { background: var(--bg-subtle); } /* CovBar — segmented rollup (width via --seg inline var, the only allowed inline) */ .covbar { display: flex; height: 8px; border-radius: var(--radius-pill); overflow: hidden; background: var(--bg-subtle); min-width: 120px; } .covbar__seg { width: var(--seg, 0%); } .covbar__seg--ok { background: var(--status-success); } .covbar__seg--await { background: var(--status-info); } .covbar__seg--rework { background: var(--status-danger); } .covbar__seg--todo { background: var(--clp-neutral-300); } /* ============================================================ CARD / SECTION (04) ============================================================ */ .card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); } .card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); } .card__header h2, .card__header h3 { font-size: var(--fs-h3); } .card__body { padding: var(--space-5); } /* Use when a card body needs to butt directly against the table or footer that follows — e.g. a .stat-strip preceding a full-bleed .table. */ .card__body--flush-bottom { padding-bottom: 0; } .card__footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-subtle); background: var(--bg-subtle); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* Stat / KPI card */ .stat { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); } .stat__label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--fg-muted); font-weight: var(--fw-medium); } .stat__label .icon { width: var(--icon-sm); height: var(--icon-sm); } .stat__value { font-size: var(--fs-stat); font-weight: var(--fw-semibold); color: var(--fg-primary); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; } .stat__sub { font-size: var(--fs-caption); color: var(--fg-muted); } .stat__sub--up { color: var(--status-success-700); } .stat__sub--down { color: var(--status-danger-700); } /* Collapsible entry card — scope designer "Data" section. Native
wraps the title cluster in the header so a click on the chevron/label collapses the body; action buttons (Pin/Remove) live outside and stay reachable in either state. CSS :has() ties body visibility and header divider to the details' open state — no JS. */ .entry-card__header { padding-left: var(--space-3); } .entry-toggle { flex: 1; min-width: 0; } .entry-toggle__summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2); margin: calc(-1 * var(--space-2)); border-radius: var(--radius-md); } .entry-toggle__summary::-webkit-details-marker { display: none; } .entry-toggle__summary:hover { background: var(--bg-hover); } .entry-toggle__chevron { color: var(--fg-muted); flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); } .entry-toggle:not([open]) .entry-toggle__chevron { transform: rotate(-90deg); } .entry-toggle__label { font-weight: var(--fw-semibold); color: var(--fg-primary); } .entry-card:has(> .entry-card__header > .entry-toggle:not([open])) .entry-card__body { display: none; } .entry-card:has(> .entry-card__header > .entry-toggle:not([open])) > .entry-card__header { border-bottom: 0; } /* Collapsible follow-up field card — same shape as .entry-toggle but scoped to per-field
. Without this the native marker ▶ shows alongside the custom chevron and the body never actually collapses. */ .field-toggle { flex: 1; min-width: 0; } .field-toggle__summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2); margin: calc(-1 * var(--space-2)); border-radius: var(--radius-md); } .field-toggle__summary::-webkit-details-marker { display: none; } .field-toggle__summary:hover { background: var(--bg-hover); } .field-toggle__chevron { color: var(--fg-muted); flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); } .field-toggle:not([open]) .field-toggle__chevron { transform: rotate(-90deg); } [data-field-card]:has(> .field-card__header > .field-toggle:not([open])) .field-card__body { display: none; } [data-field-card]:has(> .field-card__header > .field-toggle:not([open])) > .field-card__header { border-bottom: 0; } /* Compose-new disclosures — when the details is open the "Add another…" summary button visually disappears (otherwise it duplicates the composer's own header) but stays in the tab order + a11y tree via sr-only-style clip, so keyboard users retain the native collapse affordance even when JS-wired Cancel is unavailable. */ .add-entry[open] > summary, .add-field[open] > summary { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .add-field__card { margin-top: var(--space-3); } .add-entry__card { margin-top: var(--space-3); } /* ============================================================ READING-ROW (04 — novel component, ADR-0058 §UI Decisions) Expandable Control row for the framework "reading view". The framework detail's Controls card renders one
per Control so a framework reads like the policy document it represents. Collapsed, the summary reads ≈ a table row (leading chevron + section- label chip + control title). Expanded, the body shows the pinned requirement text as plain paragraphs at a constrained reading measure + reading line-height — no Markdown, no truncation. Native
disclosure = zero JS; an expand-all toggle (phase 03) just flips the [open] attribute on every row. Variants: normative (with text, default), --empty (Section / no requirement text yet → a muted note in the body), --withdrawn (dimmed title; template adds a neutral .pill--neutral per the status canon). Status colour lives on the pill, never on the row itself. */ .reading-row { /* Reading line length. Component-local convenience constant (ch measure), same pattern as .figure-help's --fh-max-inline — there is no framework token for a text measure. */ --reading-row-measure: 68ch; border-bottom: 1px solid var(--border-subtle); } .reading-row:last-child { border-bottom: 0; } .reading-row__summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; /* Indent by tree depth so children sit under their parent section (same --space-6-per-level rhythm as .controltree). --depth is a data-driven custom property set on the row (0 = top-level). */ padding-block: var(--space-3); padding-inline: calc(var(--space-4) + var(--depth, 0) * var(--space-6)) var(--space-4); } .reading-row__summary::-webkit-details-marker { display: none; } .reading-row__summary:hover { background: var(--bg-hover); } /* Full-row summary: keep the focus ring inside the row instead of the global 2px outset (which would overflow the card edge). */ .reading-row__summary:focus-visible { outline-offset: -2px; } .reading-row__chevron { color: var(--fg-muted); flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); } .reading-row[open] > .reading-row__summary .reading-row__chevron { transform: rotate(90deg); } /* Section-label chip (e.g. "Art. 5", "A.5.1") — neutral, monospaced, never a status tint. */ .reading-row__label { flex-shrink: 0; font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--fg-muted); background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 2px var(--space-2); white-space: nowrap; } .reading-row__title { min-width: 0; color: var(--fg-primary); font-size: var(--fs-small); font-weight: var(--fw-medium); } .reading-row--withdrawn .reading-row__title { color: var(--fg-muted); } /* Body indents under the title (past the chevron + gap) so requirement text lines up with the control title, not the disclosure marker. The same per-depth indent as the summary keeps the text block aligned under its own label when the row is nested. */ .reading-row__body { padding-block: 0 var(--space-4); padding-inline: calc(var(--space-4) + var(--icon-sm) + var(--space-3) + var(--depth, 0) * var(--space-6)) var(--space-4); } .reading-row__body p { max-inline-size: var(--reading-row-measure); font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--fg-body); } .reading-row__body p + p { margin-top: var(--space-3); } /* --empty variant: a Section (title-only) or a Control with no published text yet. The body carries a single muted note instead of prose. */ .reading-row__note { font-size: var(--fs-small); color: var(--fg-muted); } /* ============================================================ FIGURE-HELP (04 — novel component, ADR-0035 §UI Decisions) Captioned illustration block for help/process content. Consistent framing across the six process SVGs authored in F16 Phase 04. Real
semantics; inline preferred; falls back to its own substantive alt= text on 404 (never a broken-image icon). ============================================================ */ .figure-help { --fh-max-inline: 640px; display: flex; flex-direction: column; gap: var(--space-3); align-items: center; max-inline-size: var(--fh-max-inline); margin-inline: auto; padding: var(--space-4) var(--space-5); background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); } .figure-help > svg, .figure-help > img, .figure-help > .figure-help__zoom > img { display: block; max-inline-size: 100%; block-size: auto; color: var(--fg-primary); } /* Zoom-into-new-tab link that wraps the . The tray is narrow, so the inline diagram is often unreadable — clicking the figure opens the raw SVG in a new tab where the browser scales it to the viewport for detail reading. No JS, no lightbox library — the browser is the viewer. Reduced-motion safe (no scale transitions). Sizing: `.figure-help` is a flex column with `align-items: center`. A naive `{img}` collapses to 0 width — the anchor's intrinsic width waits on the img, and the img with `max-inline-size: 100%` waits on the anchor. `align-self: stretch` breaks the loop by giving the anchor the flex container's cross-axis width (i.e. the figure's inline size, up to fh-max-inline). The img then resolves its `max-inline-size: 100%` against that concrete width. */ .figure-help__zoom { display: block; align-self: stretch; cursor: zoom-in; border-radius: var(--radius-md); transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .figure-help__zoom:hover { box-shadow: 0 0 0 1px var(--border-brand); } .figure-help__zoom:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring-focus); } @media (prefers-reduced-motion: reduce) { .figure-help__zoom { transition: none; } } /* ============================================================ FIGURE LIGHTBOX (F16 UX follow-up) Full-viewport overlay that enlarges a process diagram in place. Rendered at the body/shell level (outside the helptray, whose `transform` establishes a containing block that would clip a nested `position: fixed` overlay). Activation is CSS-only via `:target`: the `.figure-help__zoom` link inside the tray points at `#lightbox-` which matches the overlay id and reveals it. The close button targets `#lightbox-close`, a bogus fragment no element carries — `:target` stops matching, all overlays hide. ============================================================ */ .figure-lightbox { display: none; position: fixed; inset: 0; /* --z-dialog (401) covers the helptray; the lightbox has to render ABOVE the tray. --z-toast (500) is the next tier in tokens.css and is only ever occupied by transient notifications, so reusing it for a user-invoked modal is safe (they never co-occur). */ z-index: var(--z-toast); padding: var(--space-6); align-items: center; justify-content: center; } .figure-lightbox:target { display: flex; } .figure-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); cursor: zoom-out; } .figure-lightbox__content { position: relative; display: flex; flex-direction: column; gap: var(--space-3); align-items: center; /* Explicit width (not just max) so the content box doesn't shrink to the SVG's natural size — the whole point is to enlarge a small inline diagram. 90vw on narrow, 1200px on wide. */ inline-size: min(90vw, 1200px); max-block-size: 90vh; padding: var(--space-5) var(--space-6); background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .figure-lightbox__close { position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); display: inline-flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px; color: var(--fg-muted); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); text-decoration: none; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .figure-lightbox__close:hover { color: var(--fg-primary); border-color: var(--border-strong); background: var(--bg-hover); } .figure-lightbox__close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring-focus); } .figure-lightbox__img { display: block; /* Fill the content-box's explicit width (min(90vw,1200px)). SVGs scale losslessly, so upscaling from natural 300×133 to 1200×… is the whole point of the lightbox. Cap block-size so a tall diagram doesn't push the caption off screen. */ inline-size: 100%; block-size: auto; max-block-size: calc(90vh - 8rem); object-fit: contain; color: var(--fg-primary); } .figure-lightbox__caption { margin: 0; font-size: var(--fs-small); color: var(--fg-body); text-align: center; } @media (prefers-reduced-motion: reduce) { .figure-lightbox__close { transition: none; } } /* The fallback: on a broken URL the browser paints the alt text in-flow (no icon). Keep it legible: match the caption's rhythm and colour so the fallback still reads as an accessible caption block. */ .figure-help > img { min-block-size: var(--space-8); font-size: var(--fs-small); color: var(--fg-muted); font-style: italic; text-align: center; } .figure-help > figcaption { font-size: var(--fs-small); color: var(--fg-body); line-height: var(--lh-snug); text-align: center; max-inline-size: 56ch; } .figure-help__legend { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); justify-content: center; align-items: center; font-size: var(--fs-caption); color: var(--fg-muted); line-height: var(--lh-snug); } .figure-help__legend > * { display: inline-flex; align-items: center; gap: var(--space-2); } /* Data-driven swatch: colour comes from the caller as `style="--fh-swatch: var(--status-info)"` (R2 exception — the same `style="--…"` custom-property pattern used by CovBar/control-map). */ .figure-help__swatch { inline-size: 12px; block-size: 12px; border-radius: var(--radius-sm); background: var(--fh-swatch, var(--fg-muted)); border: 1px solid color-mix(in srgb, var(--fh-swatch, var(--fg-muted)) 60%, var(--clp-neutral-900)); flex: none; } /* ============================================================ SEARCH-RESULT (04 — F16 Phase 02; ADR-0036 + ADR-0035) One row = one hit inside the /search results page and the future typeahead partial. The whole row is the target (no nested link). `--faq` variant is the FAQ-kind hit whose href deep-links into the Help Tray without a full-page nav. ============================================================ */ .search-result { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--fg-primary); text-decoration: none; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .search-result + .search-result { margin-block-start: var(--space-2); } .search-result:hover { background: var(--bg-hover); border-color: var(--border-default); } .search-result:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring-focus); border-color: var(--border-brand); } .search-result__chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--status-neutral-bg); color: var(--status-neutral); border: 1px solid var(--border-default); font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: var(--lh-snug); text-transform: uppercase; letter-spacing: var(--ls-wide); flex: none; grid-column: 1; grid-row: 1; } .search-result__title { grid-column: 2; grid-row: 1; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--fg-primary); line-height: var(--lh-snug); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .search-result__snippet { grid-column: 2; grid-row: 2; font-size: var(--fs-small); color: var(--fg-muted); line-height: var(--lh-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; } .search-result__snippet mark { background: var(--status-warning-bg); color: inherit; padding: 0 2px; border-radius: var(--radius-sm); font-weight: var(--fw-medium); } /* --faq: FAQ-kind hit. Chip stays neutral (HANDOFF F16 Phase 02 d1); the variant modifier exists so future kinds can layer their own tint without touching the base rules. */ .search-result--faq .search-result__chip { background: var(--status-neutral-bg); color: var(--status-neutral); } /* ============================================================ TABLE + TOOLBAR + PAGINATION (04) ============================================================ */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .toolbar__search { flex: 1 1 260px; } .table-wrap { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow-x: auto; /* Right-edge gradient = scroll affordance. background-attachment:local pins the gradient to the scroll viewport so it slides off once scrolled all the way right. */ background-image: linear-gradient(to left, var(--bg-surface), transparent 28px); background-repeat: no-repeat; background-position: right top; background-attachment: local; } /* An open row-action menu must escape the wrapper's overflow clip, otherwise the panel is cut off by the rounded corners instead of layering above the table. */ .table-wrap:has(details.menu[open]) { overflow: visible; } /* …and it must layer ABOVE the action controls of the following rows. Each actions cell is a stacking context pinned at z-index:1 (the row-lift rule below), so an open panel is trapped at level 1 and later rows — also level 1, later in DOM — paint over it. While a menu is open, lift its whole cell to the dropdown tier so the panel floats above every following row's controls. */ .table td.table__actions:has(details.menu[open]) { z-index: var(--z-dropdown); } .table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); } .table th, .table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; } .table thead th { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--fg-muted); font-weight: var(--fw-medium); background: transparent; padding-block: var(--space-2); border-bottom: 1px solid var(--border-default); } /* Sticky head: opt-in for long, full-page tables (NOT inside short cards). */ .table--sticky thead th { position: sticky; top: var(--layout-topbar-h); z-index: var(--z-sticky); } .table thead th a { color: inherit; display: inline-flex; align-items: center; gap: var(--space-1); } .table thead th a:hover { color: var(--fg-body); } .table thead th a .icon { width: 13px; height: 13px; opacity: .7; } .table tbody tr { transition: background var(--dur-fast) var(--ease-out); position: relative; } .table tbody tr:hover { background: var(--bg-hover); } .table tbody tr:last-child td { border-bottom: 0; } /* v2: zebra is demoted to a whisper — hairline row borders carry the rhythm; the stripe survives only as a near-invisible tint. */ .table--zebra tbody tr:nth-child(even) { background: var(--clp-neutral-25); } .table--zebra tbody tr:nth-child(even):hover { background: var(--bg-hover); } /* "You are here" — a row targeted by a #fragment (e.g. after a form POST redirects to …#cv-) gets a soft brand-tinted background so the reader's eye lands on the row the action affected. Neutral/informational, not a status signal; wins over the zebra tint. CSS-only (:target) — no JS. */ .table tbody tr:target, .table--zebra tbody tr:nth-child(even):target { background: var(--bg-muted); } .table tbody tr:target:hover, .table--zebra tbody tr:nth-child(even):target:hover { background: var(--bg-muted); } .table__rowlink { color: var(--fg-primary); font-weight: var(--fw-semibold); } .table__rowlink:hover { color: var(--fg-brand); } /* Phase A: the row-link anchor extends to cover the whole row via a position: absolute overlay. Cells that hold their own interactive content (action menu, secondary buttons, chip-style links) lift above the overlay with z-index:1. */ .table__rowlink::after { content: ""; position: absolute; inset: 0; cursor: pointer; } .table__rowlink:focus-visible { outline: 2px solid var(--ring-focus); outline-offset: 2px; border-radius: var(--radius-sm); } .table td.table__actions, .table td .menu, .table td .icon-btn, .table td .btn, .table td .chip[href], .table td a:not(.table__rowlink) { position: relative; z-index: 1; } .table__actions { text-align: right; width: 1%; white-space: nowrap; } .table__num { text-align: right; font-variant-numeric: tabular-nums; } /* Evidence-cell links (proofs table): a raw URL would stretch the column and shove the Actions cell out of view. Bound each link and truncate its text with an ellipsis; the full URL stays reachable via the title tooltip, and the external-link icon never shrinks. A provided label renders instead of the URL (template-side); truncation is the safety net for long raw URLs. */ .evidence-link { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 11rem; vertical-align: top; } .evidence-link .icon { flex: none; } .evidence-link__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Evidence-cell reason: the proof's plain-language justification, shown above the links/documents. Muted + 2-line clamped so it never dominates the row; the full text stays reachable via the title tooltip. */ .evidence-reason { margin: 0 0 var(--space-1); max-width: 16rem; font-size: var(--fs-caption); color: var(--fg-muted); line-height: var(--lh-snug); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .pagination { display: flex; align-items: center; gap: var(--space-1); } .pagination a, .pagination span { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--fg-body); font-size: var(--fs-small); font-weight: var(--fw-medium); } .pagination a:hover { background: var(--bg-hover); } .pagination a[aria-current="page"] { background: var(--bg-action); color: var(--fg-on-action); } .pagination .is-disabled { color: var(--clp-neutral-300); pointer-events: none; } /* ============================================================ MENU (row actions / identity) — native
, no JS ============================================================ */ .menu { position: relative; display: inline-block; } .menu > summary { list-style: none; cursor: pointer; display: inline-flex; } .menu > summary::-webkit-details-marker { display: none; } .menu__panel { position: absolute; right: 0; top: calc(100% + var(--space-1)); min-width: 200px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-1); z-index: var(--z-dropdown); } .menu__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--fg-body); font-size: var(--fs-small); width: 100%; background: none; border: 0; cursor: pointer; text-align: left; } .menu__item .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--fg-muted); } .menu__item:hover { background: var(--bg-hover); color: var(--fg-primary); } .menu__item--danger { color: var(--status-danger-700); } .menu__item--danger .icon { color: var(--status-danger-700); } .menu__sep { height: 1px; background: var(--border-subtle); margin: var(--space-1) 0; } /* Small forms nested inside a menu (e.g. Move up / Move down POST buttons). Strips the default form margin so the inner button aligns with sibling .menu__item anchors. */ .menu__form { margin: 0; padding: 0; } .menu__header { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-1); } .menu__header strong { font-size: var(--fs-small); } /* A muted helper line inside a menu panel — explains *why* a particular action is the one shown (e.g. "this control requires Control-Owner review"). Sits below the action it qualifies; never interactive. */ .menu__hint { padding: var(--space-1) var(--space-3) var(--space-2); font-size: var(--fs-caption); color: var(--fg-muted); margin: 0; max-width: 240px; white-space: normal; } .menu__header small { color: var(--fg-muted); } /* Identity trigger in topbar */ .identity { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1); border-radius: var(--radius-pill); border: 1px solid transparent; } .identity:hover { background: var(--bg-hover); } .avatar { width: 30px; height: 30px; border-radius: var(--radius-pill); flex: none; background: var(--bg-brand-soft); color: var(--fg-brand); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-caption); font-weight: var(--fw-bold); } .identity__name { font-size: var(--fs-small); font-weight: var(--fw-medium); } /* ============================================================ FORM FIELD + WIZARD (04) ============================================================ */ /* The HTML `hidden` attribute must beat the component's own display rule (e.g. `.field { display: flex }`); without this, [hidden] elements stay visible whenever a class sets display explicitly. */ [hidden] { display: none !important; } .field { display: flex; flex-direction: column; gap: var(--space-2); } .field__label { font-weight: var(--fw-semibold); font-size: var(--fs-small); color: var(--fg-primary); } .field__label .req { color: var(--status-danger); } .field__control { width: 100%; min-height: 36px; padding: var(--space-2) var(--space-3); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: var(--fs-small); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .field__control:focus-visible { border-color: var(--border-brand); outline: none; box-shadow: 0 0 0 3px var(--ring-focus); } .field__control[disabled] { background: var(--bg-subtle); cursor: not-allowed; } textarea.field__control { min-height: 88px; padding: var(--space-3); } /* Tag-category filter (Phase 7.4.d) — narrow, in-cluster search input. Hidden by default via [hidden]; JS removes the attribute to enable it. */ .tag-filter { max-width: 22rem; min-height: 32px; padding: var(--space-1) var(--space-2); font-size: var(--fs-small); } .field__help { font-size: var(--fs-caption); color: var(--fg-muted); } .field__error { font-size: var(--fs-caption); color: var(--status-danger-700); display: flex; align-items: center; gap: var(--space-1); } .field__error .icon { width: 14px; height: 14px; } .field.has-error .field__control { border-color: var(--status-danger); } /* Links repeater (Phase 7.4.b) — URL-first inline row. One link per line: a leading icon anchors the row, then a compact type select, the dominant URL, an optional label and an icon-only delete. The grid keeps the controls on a single row (a bare .field__control would otherwise stack at width:100%) and reflows URL-first on narrow widths. */ .link-row { display: grid; align-items: center; gap: var(--space-2); grid-template-columns: auto minmax(7rem, 8rem) minmax(0, 2fr) minmax(0, 1.2fr) auto; grid-template-areas: "icon type url label del"; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); } .link-row__icon { grid-area: icon; color: var(--fg-muted); } .link-row__type { grid-area: type; } .link-row__url { grid-area: url; } .link-row__label { grid-area: label; } .link-row__delete { grid-area: del; color: var(--fg-muted); } .link-row__delete:hover { color: var(--status-danger); } .link-row .field__control { min-width: 0; } .link-row.has-error { border-color: var(--status-danger); } @media (max-width: 720px) { .link-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon url del" "icon type type" "icon label label"; } } /* Builder rows (approval rules) — compact inline rows of selects for the scope builder (dimension/operator/value) and the approver picker (one approver per row). A grid keeps controls on one line (a bare .field__control is width:100% and would otherwise stack) and reflows on narrow widths. Mirrors .link-row. */ .builder-rows { display: flex; flex-direction: column; gap: var(--space-3); } .builder-row { display: grid; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); } .builder-row .field__control { min-width: 0; } .builder-row__del { grid-area: del; color: var(--fg-muted); } .builder-row__del:hover { color: var(--status-danger); } .builder-head { display: grid; gap: var(--space-2); padding: 0 var(--space-3); font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--fg-muted); } .builder-row--scope, .builder-head--scope { grid-template-columns: minmax(0, 2fr) minmax(6rem, 8rem) minmax(0, 2fr) auto; grid-template-areas: "dim op val del"; } .builder-row--approver { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who del"; } .builder-row__dim { grid-area: dim; } .builder-row__op { grid-area: op; } .builder-row__val { grid-area: val; } .builder-row__who { grid-area: who; } @media (max-width: 720px) { .builder-head--scope { display: none; } .builder-row--scope { grid-template-columns: 1fr auto; grid-template-areas: "dim del" "op op" "val val"; } } /* Tag-category value rows — one controlled-vocabulary value per row: a native color picker doubles as the swatch, the label dominates, an icon-only delete removes the row. Mirrors .link-row / .builder-row. */ .value-rows { display: flex; flex-direction: column; gap: var(--space-2); } .value-row { display: grid; align-items: center; gap: var(--space-3); grid-template-columns: auto minmax(0, 1fr) auto; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); } .value-row .field__control { min-width: 0; } .value-row__color { inline-size: 2.25rem; block-size: 2.25rem; flex: none; padding: 2px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); cursor: pointer; } .value-row__color::-webkit-color-swatch-wrapper { padding: 0; } .value-row__color::-webkit-color-swatch { border: none; border-radius: var(--radius-sm); } .value-row__color::-moz-color-swatch { border: none; border-radius: var(--radius-sm); } .value-row__del { color: var(--fg-muted); } .value-row__del:hover { color: var(--status-danger); } .steps { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; } .steps__item { display: flex; align-items: center; gap: var(--space-2); color: var(--fg-muted); font-size: var(--fs-small); } .steps__item[aria-current="step"] { color: var(--fg-brand); font-weight: var(--fw-semibold); } .steps__num { width: 24px; height: 24px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-default); font-size: var(--fs-caption); } .steps__item[aria-current="step"] .steps__num { background: var(--bg-brand); color: var(--fg-on-brand); border-color: transparent; } .steps__item--done .steps__num { background: var(--status-success); color: var(--clp-white); border-color: transparent; } .form-footer { display: flex; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); } /* ============================================================ FORM-PAGE LAYOUT (F1 — constrained shell, F2 — sections, F3 — grid) The canonical form-page body sits in a max-width column (NOT the .detail-grid two-column shell). Inside a single .card, sections are separated by thin rules using .form-section; rows use a two-column .form-grid where simple inputs sit side-by-side and wider rows span the full width via .form-grid__full. Replaces the native
/ pattern entirely. ============================================================ */ .form-shell { max-width: 720px; margin-inline: auto; width: 100%; display: flex; flex-direction: column; gap: var(--space-6); } .form-section + .form-section { border-top: 1px solid var(--border-subtle); padding-top: var(--space-6); margin-top: var(--space-6); } .form-section__head { margin-bottom: var(--space-4); } .form-section__head h3 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--fg-primary); } .form-section__head p { font-size: var(--fs-caption); color: var(--fg-muted); margin-top: 2px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-4); align-items: start; } .form-grid__full { grid-column: 1 / -1; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } /* ============================================================ MATRIX (F4 — checkbox/property grid) Replaces inline nested-checkbox patterns ("Workloads □ required") with a real labeled matrix: column headers + one row per target, each row carrying a name on the left and a property cell on the right. Use for "Applies to (and whether required)", role-pillar matrices, permission tables — anywhere two boolean axes meet. ============================================================ */ .matrix { display: grid; grid-template-columns: minmax(0, 1fr) 120px; column-gap: var(--space-4); row-gap: var(--space-3); align-items: center; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .matrix__head { font-size: var(--fs-caption); color: var(--fg-muted); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; padding: var(--space-2) var(--space-4); background: var(--bg-subtle); } .matrix__head:first-child { border-top-left-radius: var(--radius-md); } .matrix__head:nth-child(2) { border-top-right-radius: var(--radius-md); text-align: center; } .matrix__row { display: contents; } .matrix__name { padding: var(--space-3) var(--space-4); font-size: var(--fs-small); color: var(--fg-primary); border-top: 1px solid var(--border-subtle); } .matrix__name .caption { display: block; color: var(--fg-muted); font-size: var(--fs-caption); margin-top: 2px; } .matrix__toggle { padding: var(--space-3); text-align: center; border-top: 1px solid var(--border-subtle); } .matrix__toggle--unavailable { color: var(--fg-muted); font-style: italic; font-size: var(--fs-caption); } /* ============================================================ LIST-PAGE FILTER-BAR (L2 — active-filter chips below the toolbar) Rendered as a horizontal row of removable chips below `.toolbar`, one per applied filter, plus a "Clear all" link. Visible summary of what's currently restricting the visible rows. ============================================================ */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; } .filter-bar__label { font-size: var(--fs-caption); color: var(--fg-muted); margin-right: var(--space-2); } .filter-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px var(--space-2) 4px var(--space-3); border-radius: var(--radius-pill); background: var(--bg-brand-soft); color: var(--fg-brand); font-size: var(--fs-caption); font-weight: var(--fw-medium); } .filter-chip__remove { all: unset; cursor: pointer; padding: 2px; border-radius: var(--radius-pill); display: inline-flex; } .filter-chip__remove:hover { background: var(--bg-hover); } .filter-chip__remove .icon { width: 12px; height: 12px; } /* ============================================================ DIALOG + FLASH + EMPTY/ERROR/SKELETON (04) ============================================================ */ .dialog { border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 0; max-width: 480px; width: calc(100% - var(--space-8)); margin: auto; } /* re-assert UA centering (global reset zeroes margins) */ .dialog::backdrop { background: rgba(15,20,25,.5); backdrop-filter: blur(2px); } .dialog__body { padding: var(--space-6); } .dialog__title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--fg-primary); } .dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); } /* Form-shaped dialog — wider, with header/body/footer rows and a scrolling body so longer forms (capture-proof) stay usable on shorter viewports. */ .dialog--form { max-width: 720px; } .dialog--form .dialog__body { padding: var(--space-5) var(--space-6); max-height: calc(100vh - 14rem); overflow-y: auto; } .dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6) var(--space-4); border-bottom: 1px solid var(--border-subtle); } .dialog__header-text { min-width: 0; } .dialog__footer { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-subtle); background: var(--bg-subtle); border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); } /* Capture-proof form — risk acceptance reveals only when the assessment is set to risk_accepted, driven by CSS :has() over the select's checked option. No JS needed for the toggle. */ .capture-form .capture-risk { display: none; } .capture-form:has(.capture-assessment option[value="risk_accepted"]:checked) .capture-risk { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--status-warning); border-radius: var(--radius-md); background: var(--status-warning-bg); } /* Symmetric hide: when the assessment is Risk accepted, the Evidence fieldset collapses so the modal shows ONLY the risk-acceptance block. Any other assessment keeps Evidence visible (default) and Risk hidden (rule above). */ .capture-form:has(.capture-assessment option[value="risk_accepted"]:checked) .capture-evidence { display: none; } .capture-form .capture-risk > legend, .capture-form .capture-evidence > legend { padding: 0 var(--space-2); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-muted); } .capture-form .capture-risk > legend { color: var(--status-warning-700); } /* Evidence group — one section per modality (Links / Documents) inside the Evidence fieldset. The group head spans the full width with a title and an optional inline action ("Add link"); the rows below share the .evidence-row visual rhythm so links and files read as the same shape. */ .evidence-group { display: flex; flex-direction: column; gap: var(--space-2); } .evidence-group__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .evidence-group__title { margin: 0; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--fg-primary); } .evidence-rows { display: flex; flex-direction: column; gap: var(--space-2); } /* Single evidence row — a unified shape used for URL links, existing-file blobs and the file-picker drop target. Each row is a card with a leading icon, a flexible main column and a trailing remove control. The picker variant uses a