/* 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
   Single source of truth for color, type, spacing, elevation.
   Brand values: CLOUDPILOTS CI manual (as of November 2025).

   DESIGN DIRECTION: "Calm modern SaaS" — airy, card-centred,
   soft shadows, larger radii. Neutral UI font for the app
   (best legibility in tables); the brand display font is reserved
   for marketing/login (--font-brand).

   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            — App UI (body + headings). Variable, excellent
                      for data-dense interfaces, broad glyph coverage.
   PT Sans Narrow   — Brand/marketing/login ONLY (display), not in the app.
   Self-host in production; the CDN import is for the reference only. */
/* (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)
     ========================================================= */
  --clp-blue:      #345E93;   /* primary brand */
  --clp-yellow:    #FFBB29;   /* accent only */
  --clp-black:     #212121;
  --clp-gray-text: #424242;
  --clp-white:     #FFFFFF;

  /* Brand blue scale (same hue family) */
  --clp-blue-900: #1e3b63;
  --clp-blue-800: #264c7a;
  --clp-blue-700: #345E93;   /* = brand */
  --clp-blue-600: #4a74a6;
  --clp-blue-500: #6e93bd;
  --clp-blue-400: #9ab4d1;
  --clp-blue-300: #c2d3e4;
  --clp-blue-200: #dce7f1;
  --clp-blue-100: #eaf1f8;
  --clp-blue-50:  #f4f7fb;

  /* Neutral scale — slightly cool to pair with the brand blue */
  --clp-neutral-950: #0f1419;
  --clp-neutral-900: #1b2430;
  --clp-neutral-800: #2b3543;
  --clp-neutral-700: #3f4a59;
  --clp-neutral-600: #586273;
  --clp-neutral-500: #76808f;
  --clp-neutral-400: #9aa3b0;
  --clp-neutral-300: #c3cad3;
  --clp-neutral-200: #dfe3e9;
  --clp-neutral-150: #e9ecf1;
  --clp-neutral-100: #f1f3f6;
  --clp-neutral-50:  #f7f8fa;
  --clp-neutral-0:   #ffffff;

  /* Accent (yellow) scale */
  --clp-yellow-700: #c88c10;
  --clp-yellow-600: #e5a11c;
  --clp-yellow-500: #FFBB29;
  --clp-yellow-400: #ffc955;
  --clp-yellow-300: #ffd882;
  --clp-yellow-200: #ffe7b0;
  --clp-yellow-100: #fff3d6;

  /* Status hues + accessible text/fill pairs (see 02-colors-and-status.md) */
  --status-success:    #2f8f5f;
  --status-success-700:#226b46;  /* readable text on light bg */
  --status-success-bg: #e7f3ec;  /* subtle badge fill */
  --status-warning:    #FFBB29;
  --status-warning-700:#9a6b00;  /* readable text — bright yellow fails on white */
  --status-warning-bg: #fff3d6;
  --status-danger:     #b5341f;
  --status-danger-700: #8c2818;
  --status-danger-bg:  #fbe9e6;
  --status-info:       #345E93;
  --status-info-700:   #264c7a;
  --status-info-bg:    #eaf1f8;
  --status-neutral:    #586273;
  --status-neutral-bg: #eef0f3;

  /* =========================================================
     2. SEMANTIC COLOR TOKENS  (use these, not the raw scale)
     ========================================================= */
  --bg-app:      var(--clp-neutral-50);   /* page canvas */
  --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);
  --bg-brand-soft: var(--clp-blue-100);   /* active nav pill, 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-on-brand:   var(--clp-white);
  --fg-on-accent:  var(--clp-neutral-900);
  --fg-on-inverse: var(--clp-white);
  --fg-link:       var(--clp-blue-700);
  --fg-link-hover: var(--clp-blue-800);

  --border-subtle:  var(--clp-neutral-150);
  --border-default: var(--clp-neutral-200);
  --border-strong:  var(--clp-neutral-300);
  --border-brand:   var(--clp-blue-700);

  --ring-focus: color-mix(in srgb, var(--clp-blue-700) 45%, transparent);

  /* =========================================================
     3. TYPOGRAPHY  (App scale — compact, console-grade)
     ========================================================= */
  --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-stat:    1.75rem;    /* 28px — KPI numbers */
  --fs-h1:      1.5rem;     /* 24px — page title */
  --fs-h2:      1.25rem;    /* 20px — section */
  --fs-h3:      1.0625rem;  /* 17px — card / subsection */
  --fs-h4:      0.9375rem;  /* 15px — label-ish heading */
  --fs-body:    0.9375rem;  /* 15px — base body */
  --fs-small:   0.8125rem;  /* 13px — secondary */
  --fs-caption: 0.75rem;    /* 12px — captions, table heads */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-normal:1.55;
  --lh-loose: 1.7;

  --ls-wide:   0.04em;
  --ls-tight: -0.01em;
  --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
        Calm-SaaS: softer, larger radii + diffuse shadows.
     ========================================================= */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;    /* default control radius */
  --radius-lg:   12px;   /* cards, panels */
  --radius-xl:   16px;   /* dialogs, large surfaces */
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(27,36,48,0.06);
  --shadow-sm: 0 1px 2px rgba(27,36,48,0.06), 0 1px 3px rgba(27,36,48,0.10);
  --shadow-md: 0 2px 4px rgba(27,36,48,0.06), 0 6px 16px rgba(27,36,48,0.08);
  --shadow-lg: 0 8px 24px rgba(27,36,48,0.12), 0 2px 6px rgba(27,36,48,0.08);
  --shadow-brand: 0 8px 24px rgba(52,94,147,0.20);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* =========================================================
     6. LAYOUT SCALE  (app shell + z-index)
     ========================================================= */
  --layout-sidebar-w:           256px;
  --layout-sidebar-w-collapsed: 68px;
  --layout-topbar-h:            60px;
  --layout-content-max:         1320px;  /* max content width */
  --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 distinguishing categories whose
     identity has no fixed status meaning — framework chips,
     relationship-map edges, multi-series charts. Hues sit
     between the brand blue and the warning yellow so the
     status canon (success/warning/danger/info/neutral) stays
     unambiguous. Each slot pairs a saturated stroke/text
     value with a low-saturation surface tint (1.5 : 8 ratio
     so chips read on white). Assign a slot deterministically
     (hash of stable id mod 8); never repeat status hues.
     ========================================================= */
  --c-cat-1: #345E93;  --c-cat-1-bg: #eaf1f8;  /* brand blue   — slot 0 */
  --c-cat-2: #8b5cf6;  --c-cat-2-bg: #efeafd;  /* violet       — slot 1 */
  --c-cat-3: #0d9488;  --c-cat-3-bg: #e2f3f1;  /* teal         — slot 2 */
  --c-cat-4: #c25b1f;  --c-cat-4-bg: #fbece2;  /* deep orange  — slot 3 */
  --c-cat-5: #4f46e5;  --c-cat-5-bg: #ebeafc;  /* indigo       — slot 4 */
  --c-cat-6: #b32a8d;  --c-cat-6-bg: #f9e7f2;  /* magenta      — slot 5 */
  --c-cat-7: #4a7c1f;  --c-cat-7-bg: #ecf3e2;  /* moss green   — slot 6 */
  --c-cat-8: #475569;  --c-cat-8-bg: #e7ebf0;  /* 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;
}

/* Dark mode is intentionally NOT shipped yet (open decision in
   02-colors-and-status.md). Tokens are structured so a future
   [data-theme="dark"] block can re-map the semantic layer only. */
/* ============================================================
   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:  <link tokens.css> then <link components.css>

   DIRECTION: "Calm modern SaaS" — light branded app shell,
   card-centred content, soft shadows, larger radii,
   neutral UI font. 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 <main id="content"> */
.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 → <svg class="icon"><use href="#i-…"></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-surface);
  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: 40px;
  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(--bg-hover); 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; }
.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-app); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding-inline: var(--space-3);
  min-height: 38px; 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: 38px; height: 38px; 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); }

/* ============================================================
   BUTTON  (04 → Button)
   ============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); min-height: 38px; 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);
  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-brand); color: var(--fg-on-brand);
  box-shadow: var(--shadow-xs); }
.btn--primary:hover   { background: var(--clp-blue-800); 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: 32px; padding: 0 var(--space-3); }
.btn--lg { min-height: 44px; 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
   ============================================================ */
.pill { display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 3px var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: var(--lh-snug);
  border: 1px solid transparent; }
.pill .icon { width: 14px; height: 14px; }
.pill--success { background: var(--status-success-bg); color: var(--status-success-700);
  border-color: color-mix(in srgb, var(--status-success) 22%, transparent); }
.pill--warning { background: var(--status-warning-bg); color: var(--status-warning-700);
  border-color: color-mix(in srgb, var(--status-warning) 35%, transparent); }
.pill--danger  { background: var(--status-danger-bg);  color: var(--status-danger-700);
  border-color: color-mix(in srgb, var(--status-danger) 22%, transparent); }
.pill--info    { background: var(--status-info-bg);    color: var(--status-info-700);
  border-color: color-mix(in srgb, var(--status-info) 22%, transparent); }
.pill--neutral { background: var(--status-neutral-bg); color: var(--status-neutral);
  border-color: var(--border-default); }

.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 <details>: 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; }

/* ============================================================
   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); box-shadow: var(--shadow-sm); }
.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); }
.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); box-shadow: var(--shadow-sm);
  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-bold);
  color: var(--fg-primary); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.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 <details>
   wraps the title cluster in the header so a click on the chevron/label
   collapses the body; action buttons (Pin/Remove) live outside <summary>
   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;
}

/* ============================================================
   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); box-shadow: var(--shadow-sm); 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; }
.table { width: 100%; border-collapse: collapse; }
.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-semibold);
  background: var(--bg-subtle); padding-block: var(--space-2); }
/* 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; }
.table--zebra tbody tr:nth-child(even) { background: var(--bg-subtle); }
.table--zebra tbody tr:nth-child(even):hover { background: var(--bg-hover); }
.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; }

.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-brand); color: var(--fg-on-brand); }
.pagination .is-disabled { color: var(--clp-neutral-300); pointer-events: none; }

/* ============================================================
   MENU  (row actions / identity) — native <details>, 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-md); box-shadow: var(--shadow-lg); 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; }
.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 policy requires Policy-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: 40px; 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); }

/* ============================================================
   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);
}
.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 <label> so the whole row is clickable. */
.evidence-row { display: grid; align-items: center; gap: var(--space-3);
  grid-template-columns: auto minmax(0, 1fr) 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);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out); }
.evidence-row:focus-within { border-color: var(--border-brand);
  box-shadow: 0 0 0 3px var(--ring-focus); }
.evidence-row__icon { width: 32px; height: 32px; border-radius: var(--radius-md);
  background: var(--bg-subtle); color: var(--fg-muted);
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.evidence-row__icon .icon { width: 16px; height: 16px; }
.evidence-row__delete { color: var(--fg-muted); }
.evidence-row__delete:hover { color: var(--status-danger); background: var(--bg-hover); }
.evidence-row .field__control { min-width: 0; }
.evidence-row.has-error { border-color: var(--status-danger); }
.evidence-row--blob { grid-template-columns: auto minmax(0, 1fr) auto; }
.evidence-row__filename { font-size: var(--fs-small); color: var(--fg-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evidence-row--upload { grid-template-columns: auto minmax(0, 1fr) auto;
  cursor: pointer; border-style: dashed;
  background: var(--bg-subtle); }
.evidence-row--upload:hover { border-color: var(--border-brand); background: var(--bg-surface); }
.evidence-row__upload-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.evidence-row__upload-label strong { font-size: var(--fs-small); color: var(--fg-primary); }
.evidence-row__upload-hint { font-size: var(--fs-caption); color: var(--fg-muted); }
.evidence-row__upload-input { display: none; }

@media (max-width: 720px) {
  .evidence-row { grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon main del"
                         "icon sub  sub"; }
  .evidence-row > .evidence-row__icon { grid-area: icon; }
  .evidence-row > .evidence-row__delete { grid-area: del; }
  .evidence-row > .evidence-row__url,
  .evidence-row > .evidence-row__filename,
  .evidence-row > .evidence-row__upload-label { grid-area: main; }
  .evidence-row > .evidence-row__label { grid-area: sub; }
}

/* Inline cluster — wraps a one-button form so its <form> wrapper doesn't break
   the row's horizontal cluster layout. Used by the draft actions strip. */
.cluster__inline { display: inline-flex; align-items: center; }
.cluster--split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) {
  .cluster--split { grid-template-columns: 1fr; }
}

.flash { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid; font-size: var(--fs-small); }
.flash .icon { flex: none; }
.flash--success { background: var(--status-success-bg); color: var(--status-success-700);
  border-color: color-mix(in srgb, var(--status-success) 30%, transparent); }
.flash--danger  { background: var(--status-danger-bg); color: var(--status-danger-700);
  border-color: color-mix(in srgb, var(--status-danger) 30%, transparent); }
.flash--warning { background: var(--status-warning-bg); color: var(--status-warning-700);
  border-color: color-mix(in srgb, var(--status-warning) 45%, transparent); }
.flash--info    { background: var(--status-info-bg); color: var(--status-info-700);
  border-color: color-mix(in srgb, var(--status-info) 30%, transparent); }

.empty-state { display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: var(--space-16) var(--space-6); gap: var(--space-3);
  color: var(--fg-muted); }
.empty-state__icon { width: 56px; height: 56px; border-radius: var(--radius-pill);
  background: var(--bg-subtle); color: var(--fg-muted);
  display: inline-flex; align-items: center; justify-content: center; }
.empty-state__icon .icon { width: 28px; height: 28px; }
.empty-state__title { color: var(--fg-primary); font-size: var(--fs-h3); }
.empty-state p { max-width: 42ch; }

.error-state { display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  background: var(--status-danger-bg); color: var(--status-danger-700);
  border: 1px solid color-mix(in srgb, var(--status-danger) 30%, transparent); }
.error-state .icon { flex: none; margin-top: 2px; }

.skeleton { background: linear-gradient(90deg,
    var(--bg-subtle) 25%, var(--clp-neutral-150) 37%, var(--bg-subtle) 63%);
  background-size: 400% 100%; border-radius: var(--radius-md); height: 1em;
  animation: shimmer 1.4s var(--ease-in-out) infinite; }
.skeleton--row { height: 44px; margin-bottom: var(--space-2); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ============================================================
   FILTER-SYSTEM  (04 + ADR-0020) — field → operator → values, SSR-first
   No-JS: <form method="get"> + native <details> popovers.
   ============================================================ */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.filterbar__spacer { flex: 1; }
.card__header > .filterbar { flex: 1; }

/* Segmented control (quick-scope + operator switcher). No-JS:
   Links with aria-current OR <label> with hidden radio (:has). */
.segmented { display: inline-flex; background: var(--bg-subtle);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 2px; gap: 2px; }
.segmented__item { display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--fg-body);
  background: transparent; border: 0; cursor: pointer; white-space: nowrap; }
.segmented__item .icon { width: var(--icon-sm); height: var(--icon-sm); }
.segmented__item:hover { color: var(--fg-primary); }
.segmented__item input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.segmented__item:focus-within { outline: 2px solid var(--ring-focus); outline-offset: 1px; }
.segmented__item[aria-current="true"], .segmented__item[aria-pressed="true"],
.segmented__item:has(input:checked) { background: var(--bg-surface);
  color: var(--fg-primary); box-shadow: var(--shadow-xs); }
.segmented__count { font-weight: var(--fw-semibold); color: var(--fg-muted); }

/* "+ Add filter" popover = .menu; per field one nested
   <details class="filter-editor">. */
.filter-add summary { list-style: none; }
.filter-add summary::-webkit-details-marker { display: none; }

.filter-editor { border-radius: var(--radius-sm); }
.filter-editor > summary { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--fs-small); color: var(--fg-body); cursor: pointer; list-style: none; }
.filter-editor > summary::-webkit-details-marker { display: none; }
.filter-editor > summary .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--fg-muted); }
.filter-editor > summary:hover { background: var(--bg-hover); }
.filter-editor[open] > summary { background: var(--bg-hover);
  color: var(--fg-primary); font-weight: var(--fw-semibold); }
.filter-editor__body { padding: var(--space-3); display: flex; flex-direction: column;
  gap: var(--space-3); border-top: 1px solid var(--border-subtle); margin-top: var(--space-1); }
.filter-editor__title { font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-muted); }
.filter-editor__help { font-size: var(--fs-caption); color: var(--fg-muted); }
.filter-editor__actions { display: flex; justify-content: flex-end; gap: var(--space-2);
  padding-top: var(--space-1); }

/* Checkbox multi-select (enum fields, e.g. Owning Team) */
.checklist { display: flex; flex-direction: column; gap: 2px;
  max-height: 240px; overflow-y: auto; }
.checklist__item { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2); border-radius: var(--radius-sm); cursor: pointer;
  font-size: var(--fs-small); }
.checklist__item:hover { background: var(--bg-hover); }
.checklist__item input { width: 16px; height: 16px; flex: none; accent-color: var(--clp-blue-700); }
.checklist__item .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--fg-muted); }

/* Token/tag input (text/tags fields). Tokens are .chip. No-JS:
   comma-separated input; JS enhancement tokenises on space/enter. */
.tokeninput { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2); min-height: 40px; background: var(--bg-surface); }
.tokeninput:focus-within { border-color: var(--border-brand); box-shadow: 0 0 0 3px var(--ring-focus); }
.tokeninput input { flex: 1; min-width: 80px; border: 0; outline: none;
  background: transparent; font-size: var(--fs-small); padding: var(--space-1); }

/* Active filter as removable chip (brand-tinted) */
.chip--filter { background: var(--bg-brand-soft); color: var(--fg-brand);
  border-color: color-mix(in srgb, var(--clp-blue-700) 22%, transparent);
  font-weight: var(--fw-medium); }
.chip--filter strong { font-weight: var(--fw-semibold); }

/* ============================================================
   TABS  (04) — Detail page sections; No-JS: ?tab=… (R1)
   ============================================================ */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto; }
.tab { display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3); margin-bottom: -1px; border-bottom: 2px solid transparent;
  font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--fg-muted);
  white-space: nowrap; }
.tab .icon { width: var(--icon-sm); height: var(--icon-sm); }
.tab:hover { color: var(--fg-body); }
.tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--fg-brand);
  border-bottom-color: var(--border-brand); font-weight: var(--fw-semibold); }

/* ============================================================
   RELATIONSHIP MAP  (04) — Symmetric incoming/hub/outgoing graph
   Two channels: category (--cat / --cat-bg) drives colour;
   relation type (--solid / --dashed / --dotted / --double / --super)
   drives stroke style + .policy-map__rel chip caption.
   Inline CSS variables permitted on rows (R2): --cat, --cat-bg, --y.
   ============================================================ */
.policy-map { display: grid;
  grid-template-columns: 1fr minmax(280px, 360px) 1fr;
  gap: var(--space-6); align-items: stretch; position: relative; margin: 0; }
.policy-map__edges { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; }
.policy-map__edges path { fill: none; stroke-width: 1.5px;
  stroke: var(--cat, var(--border-strong)); opacity: 0.65;
  transition: opacity var(--dur-fast) var(--ease-out),
              stroke-width var(--dur-fast) var(--ease-out); }
.policy-map__edges path.is-hover { opacity: 1; stroke-width: 2.25px; }
.policy-map__edges path.policy-map__edge--dashed { stroke-dasharray: 6 4; }
.policy-map__edges path.policy-map__edge--dotted { stroke-dasharray: 2 4; }
.policy-map__edges path.policy-map__edge--double { stroke-width: 2.5px; }
.policy-map__edges path.policy-map__edge--super  { stroke-dasharray: 10 3 2 3; }

.policy-map__lhs, .policy-map__rhs { position: relative; z-index: 1;
  min-height: var(--col-h, 0); }
.policy-map__center { display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; }

.policy-map__hub { background: var(--bg-brand); color: var(--fg-on-brand);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-brand); width: 100%; max-width: 320px; }
.policy-map__hub .eyebrow { color: color-mix(in srgb, var(--fg-on-brand) 70%, transparent);
  margin-bottom: var(--space-2); }
.policy-map__hub h2 { font-size: var(--fs-h3); margin: 0 0 var(--space-2) 0;
  line-height: var(--lh-snug); }
.policy-map__hub p { font-size: var(--fs-small); margin: 0;
  color: color-mix(in srgb, var(--fg-on-brand) 80%, transparent); }

.policy-map__group-header { position: absolute; left: 0; right: 0;
  top: var(--y, 0); display: flex; align-items: baseline; gap: var(--space-2);
  height: 24px; font-size: var(--fs-caption); letter-spacing: var(--ls-wide);
  text-transform: uppercase; font-weight: var(--fw-semibold);
  color: var(--cat, var(--fg-muted)); margin: 0; }
.policy-map__group-count { color: var(--fg-muted); font-weight: var(--fw-regular);
  text-transform: none; letter-spacing: var(--ls-normal); }

.policy-map__row { position: absolute; left: 0; right: 0; top: var(--y, 0);
  display: block; padding: var(--space-2) var(--space-3);
  height: 56px; box-sizing: border-box; overflow: hidden;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--cat, var(--border-strong));
  border-radius: var(--radius-md); text-decoration: none; color: inherit;
  transition: box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out); }
.policy-map__row:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.policy-map__row:focus-visible { outline: 2px solid var(--ring-focus); outline-offset: 2px; }

.policy-map__label { display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-caption);
  font-weight: var(--fw-semibold); color: var(--cat, var(--fg-primary));
  background: var(--cat-bg, var(--bg-subtle));
  padding: 1px var(--space-2); border-radius: var(--radius-sm); }
.policy-map__headline { display: block; margin-top: var(--space-1);
  font-size: var(--fs-small); color: var(--fg-body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.policy-map__rel { display: inline-flex; align-items: center;
  font-size: var(--fs-caption); color: var(--fg-muted); margin-left: var(--space-2);
  letter-spacing: var(--ls-normal); }

.policy-map__more { position: absolute; left: 0; right: 0; top: var(--y, 0); }
.policy-map__more > summary { cursor: pointer; list-style: none;
  font-size: var(--fs-caption); color: var(--fg-muted);
  padding: var(--space-1) var(--space-2); }
.policy-map__more > summary::-webkit-details-marker { display: none; }
.policy-map__more[open] > summary { color: var(--fg-body); }
.policy-map__more > div { display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-2); }
.policy-map__more > div .policy-map__row { position: static; }

.policy-map__empty { font-size: var(--fs-small); color: var(--fg-muted);
  text-align: center; padding: var(--space-6) var(--space-4); }

.policy-map__row.is-loading { background: var(--bg-subtle); height: 44px;
  border-left-color: var(--border-default); }
.policy-map__row--error { border-color: var(--status-danger);
  border-left-color: var(--status-danger); color: var(--status-danger-700); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 767px) {
  .policy-map { grid-template-columns: 1fr; gap: var(--space-4); }
  .policy-map__edges { display: none; }
  .policy-map__center { order: -1; }
}

/* ============================================================
   DEFINITION LIST + BACK-LINK + NARROW CONTENT  (detail/form)
   ============================================================ */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3) var(--space-6); }
.dl dt { color: var(--fg-muted); font-size: var(--fs-small); }
.dl dd { color: var(--fg-primary); font-size: var(--fs-small); }

.back-link { display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--fg-muted); }
.back-link .icon { width: var(--icon-sm); height: var(--icon-sm); }
.back-link:hover { color: var(--fg-body); }

.shell__content--narrow { max-width: 760px; }

/* Standalone confirmation page (no-JS fallback for the dialog, ADR-0020/R1) */
.confirm { max-width: 480px; margin-inline: auto; }
.confirm__icon { width: 48px; height: 48px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--status-danger-bg); color: var(--status-danger-700); }

/* ============================================================
   FRAMEWORK DETAIL — POLICY TREE / LINKS / CALLOUT
   ADR-0004 (+ amendment 2026-06-16). Law-style hierarchical view + the
   external-links section. Mirrors the design framework canon — uses existing
   tokens only, no new colors.
   ============================================================ */

/* Right-side meta dl on the framework header (Owning team / Version / …). */
.framework-meta { grid-template-columns: max-content max-content;
  align-self: start; row-gap: var(--space-2); }

/* Info callout banner above the tabs (e.g. "Read-only — global framework
   maintained by CLOUDPILOTS"). Same shape as a card but with brand-soft fill
   to read as informational, not interactive. */
.callout { display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); background: var(--bg-subtle); }
.callout .icon { color: var(--fg-muted); flex: 0 0 auto;
  width: var(--icon-md); height: var(--icon-md); margin-top: 2px; }
.callout--info { background: var(--bg-brand-soft); border-color: var(--bg-brand-soft); }
.callout--info .icon { color: var(--fg-brand); }

/* Spread the two ends of a cluster onto either side (caption left, filter
   chip-group right) — paired with .cluster's existing flex layout. */
.cluster--between { justify-content: space-between; width: 100%; }
/* Right-aligns the cluster's children — used inside table action cells where
   we render an action button alongside a secondary link (e.g. History). */
.cluster--end { justify-content: flex-end; }

/* ============================================================
   TIMELINE  (audit trail: Proof history, future cycle events)
   Vertical list of events; left rail with a status dot per row.
   ============================================================ */
.timeline { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--space-4); }
.timeline__item { display: grid; grid-template-columns: var(--space-5) 1fr;
  gap: var(--space-3); position: relative; }
.timeline__item:not(:last-child)::before {
  content: ""; position: absolute; left: calc(var(--space-3) - 1px);
  top: var(--space-5); bottom: calc(-1 * var(--space-4));
  width: 2px; background: var(--border-subtle); }
.timeline__dot { width: 12px; height: 12px; border-radius: 50%;
  background: var(--clp-neutral-300); margin-top: var(--space-1);
  justify-self: center; box-shadow: 0 0 0 3px var(--bg-surface); }
.timeline__dot[data-kind="success"]  { background: var(--status-success-700); }
.timeline__dot[data-kind="warning"]  { background: var(--status-warning-700); }
.timeline__dot[data-kind="info"]     { background: var(--status-info-700); }
.timeline__dot[data-kind="neutral"]  { background: var(--clp-neutral-400); }
.timeline__title { font-weight: var(--fw-semibold); }
.timeline__meta  { font-size: var(--fs-caption); color: var(--fg-muted); }
.timeline__comment { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--border-default); background: var(--bg-subtle);
  border-radius: var(--radius-sm); font-style: italic; color: var(--fg-body); }

/* One Proof revision card on the history page — a quiet container that
   stacks header / description / timeline / collapsed details. */
.proof-rev { padding: var(--space-4); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); background: var(--bg-surface); }
.proof-rev__details > summary { cursor: pointer; color: var(--fg-brand);
  font-size: var(--fs-small); }
.proof-rev__details[open] > summary { margin-bottom: var(--space-3); }

/* Hierarchical policy tree on the framework Policies tab. <ol> for the
   semantics; row layout = 3-column grid (section_label | title | refs). */
.policytree { list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--border-subtle); }
.policytree__row { display: grid; grid-template-columns: minmax(96px, 120px) 1fr auto;
  align-items: baseline; column-gap: var(--space-4);
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--border-subtle); }
.policytree__row:hover { background: var(--bg-hover); }
.policytree__label { display: contents; color: inherit; }
.policytree__section { color: var(--fg-brand); font-weight: var(--fw-medium);
  font-size: var(--fs-small); text-align: right; }
.policytree__title { color: var(--fg-primary); font-size: var(--fs-small); }
.policytree__refs { display: inline-flex; align-items: center; gap: var(--space-1);
  color: var(--fg-link); font-size: var(--fs-small); }
.policytree__refs .icon { width: var(--icon-sm); height: var(--icon-sm); }
/* Indent by depth — children move their section column to the right; the
   title column shifts with them so the visual gutter stays clean. */
.policytree__row--d1 { padding-left: var(--space-6); }
.policytree__row--d2 { padding-left: calc(var(--space-6) * 2); }
.policytree__row--d3 { padding-left: calc(var(--space-6) * 3); }
.policytree__row--d4 { padding-left: calc(var(--space-6) * 4); }
.policytree__row--d5 { padding-left: calc(var(--space-6) * 5); }
/* Top-level rows are headings (Article 5) — bolder section label. */
.policytree__row--d0 .policytree__section { color: var(--fg-brand);
  font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.policytree__row--d0 .policytree__title { font-weight: var(--fw-semibold); }

/* Link list on the Links tab — icon + label + host, host right-aligned. */
.linklist { list-style: none; padding: 0; margin: 0; }
.linklist__row { display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; column-gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle); }
.linklist__row:last-child { border-bottom: 0; }
.linklist__row > .icon { width: var(--icon-sm); height: var(--icon-sm);
  color: var(--fg-brand); }
.linklist__label { color: var(--fg-link); font-size: var(--fs-small); }
.linklist__host { color: var(--fg-muted); }
/* Two-column row inside the edit-details slidepanel: URL + label inputs. */
.linklist__editor { display: grid; grid-template-columns: 2fr 1fr;
  gap: var(--space-3); }

/* ============================================================
   RESPONSIVE  (03)
   ============================================================ */
@media (max-width: 1023px) {
  :root { --layout-gutter: var(--space-6); }
  .shell { grid-template-columns: var(--layout-sidebar-w-collapsed) 1fr; }
  .sidebar__link span, .sidebar__count, .sidebar__section,
  .sidebar__footer > :not(.icon), .sidebar__brand span { display: none; }
  .sidebar__brand { justify-content: center; padding-inline: 0; }
  .sidebar__link { justify-content: center; padding-inline: 0; }
  .sidebar__footer { justify-content: center; }
}
/* =========================================================
   Help Tray (ADR-0031, component contract in design-framework/04-components.md)
   Right-side slide-in panel. Modal-less (aria-modal="false"): the underlying
   page stays mounted and interactive. Tokens only — no bespoke hue.
   ========================================================= */
:root {
  --layout-helptray-w: 480px;
}
.helptray {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--layout-helptray-w); max-width: 100vw;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  z-index: var(--z-dialog);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
  visibility: hidden;
}
.helptray.is-open { transform: translateX(0); visibility: visible; }
.helptray__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);
}
.helptray__brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.helptray__chip {
  font-size: var(--fs-caption); letter-spacing: var(--ls-wide);
  text-transform: uppercase; font-weight: var(--fw-semibold);
  color: var(--fg-muted);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.helptray__title {
  margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  color: var(--fg-primary); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.helptray__tabs {
  display: flex; gap: var(--space-1);
  padding: var(--space-2) var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}
.helptray__tab {
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid transparent;
  color: var(--fg-body); text-decoration: none;
  font-size: var(--fs-small); font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.helptray__tab:hover { color: var(--fg-primary); }
.helptray__tab.is-active {
  color: var(--fg-brand); border-bottom-color: var(--border-brand);
}
.helptray__body {
  flex: 1 1 auto; overflow-y: auto;
  padding: var(--space-5);
}
.helptray__footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-small); color: var(--fg-muted);
}
.help__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-caption); color: var(--fg-muted);
  margin: 0;
}
.help__flow { row-gap: var(--space-2); }
.help__flow-sep { color: var(--fg-muted); }
.help__card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.help__card > summary {
  list-style: none;
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-weight: var(--fw-semibold); color: var(--fg-primary);
}
.help__card > summary::-webkit-details-marker { display: none; }
.help__card > summary::after {
  content: ""; flex: 1;
}
.help__card[open] > summary { border-bottom: 1px solid var(--border-subtle); }
.help__card > p,
.help__card > ul {
  margin: 0; padding: var(--space-3) var(--space-4) var(--space-4);
  color: var(--fg-body);
}
.help__example-list {
  list-style: none; margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.help__example-list > li {
  display: grid; grid-template-columns: minmax(7.5rem, max-content) 1fr;
  gap: var(--space-3); align-items: start;
}
.help__uc-list {
  list-style: disc inside; margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.help__footer { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .helptray { transition: none; }
}
@media (max-width: 767px) {
  .helptray { width: 100vw; }
}

/* =========================================================
   Slide-in panel — CSS-only :target right-side drawer.
   Used by the framework-detail snapshot rows to surface policy
   version status without leaving the page. Modal-less: the
   underlying page stays interactive. Reuses the helptray width
   token + tokens-only styling (no bespoke colours).
   ========================================================= */
.slidepanel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--layout-helptray-w); max-width: 100vw;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  z-index: var(--z-dialog);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
  visibility: hidden;
}
.slidepanel:target { transform: translateX(0); visibility: visible; }
.slidepanel__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);
}
.slidepanel__brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.slidepanel__chip {
  font-size: var(--fs-caption); letter-spacing: var(--ls-wide);
  text-transform: uppercase; font-weight: var(--fw-semibold);
  color: var(--fg-muted);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.slidepanel__title {
  margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  color: var(--fg-primary); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slidepanel__body {
  flex: 1 1 auto; overflow-y: auto;
  padding: var(--space-5);
}
.slidepanel__footer {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
@media (prefers-reduced-motion: reduce) {
  .slidepanel { transition: none; }
}
@media (max-width: 767px) {
  .slidepanel { width: 100vw; }
}

@media (max-width: 767px) {
  .shell { grid-template-columns: 1fr; }
  .shell__sidebar { position: fixed; left: -100%; width: var(--layout-sidebar-w);
    box-shadow: var(--shadow-lg); transition: left var(--dur-base) var(--ease-out); }
  .shell__sidebar.is-open { left: 0; }
  .shell__sidebar.is-open .sidebar__link span, .shell__sidebar.is-open .sidebar__count,
  .shell__sidebar.is-open .sidebar__section, .shell__sidebar.is-open .sidebar__brand span,
  .shell__sidebar.is-open .sidebar__footer > :not(.icon) { display: revert; }
  .shell__sidebar.is-open .sidebar__link { justify-content: flex-start; padding-inline: var(--space-3); }
  .shell__sidebar.is-open .sidebar__brand { justify-content: flex-start; padding-inline: var(--space-5); }
  .topbar__menu-btn { display: inline-flex; }
  .searchbox { min-width: 0; }
  /* Tables collapse to cards — pages add data-label per cell */
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    margin-bottom: var(--space-3); padding: var(--space-2); }
  .table td { border: 0; padding: var(--space-2); display: flex;
    justify-content: space-between; gap: var(--space-4); }
  .table td::before { content: attr(data-label); font-size: var(--fs-caption);
    text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--fg-muted);
    font-weight: var(--fw-semibold); }
}


/* Lifecycle action row (Policy detail) — pairs the action with a short
   rationale next to it so disabled buttons explain themselves (UC-09 step 4,
   ADR-0003). The withdraw variant stacks a labelled reason field with its
   submit, instead of squeezing the input between unrelated buttons. */
.action-row { display: flex; align-items: flex-start; flex-wrap: wrap;
  gap: var(--space-3) var(--space-5); }
.action-row > form { flex: 0 0 auto; }
.action-row__hint { margin: 0; flex: 1 1 280px;
  font-size: var(--fs-small); color: var(--fg-muted); }
.action-row--withdraw { padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle); }
.action-row--withdraw > form { min-width: 260px; max-width: 380px; }

/* Side-by-side draft editor (UC-09 §3) — predecessor on the left (read-only),
   editable draft on the right. Falls back to a single column on narrow widths
   so mobile editors can still work, even if the comparison is then stacked. */
.compare-grid { display: grid; gap: var(--space-5);
  grid-template-columns: 1fr 1fr; align-items: start; }
.compare-pane { display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--bg-subtle); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-4); min-width: 0; }
.compare-pane > form,
form.compare-pane { background: var(--bg-surface); }
.compare-pane__header { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); }
.compare-pane__text { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--fs-small); line-height: var(--lh-tight); }
@media (max-width: 900px) {
  .compare-grid { grid-template-columns: 1fr; }
}

/* PolicyVersion diff (Phase 6l, UC-09 §3) — two-column side-by-side rendering.
   Tokens reused from the status canon (success/danger/warning) so add/delete/
   change rows pick up the global color language without a new archetype. */
.diff { table-layout: fixed; }
.diff td, .diff th { vertical-align: top; }
.diff__text { margin: 0; white-space: pre-wrap; word-break: break-word;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--fs-small); line-height: var(--lh-tight); }
.diff tr[data-diff-kind="add"]    td:nth-child(3),
.diff tr[data-diff-kind="add"]    td:nth-child(4) { background: var(--status-success-bg); }
.diff tr[data-diff-kind="delete"] td:nth-child(1),
.diff tr[data-diff-kind="delete"] td:nth-child(2) { background: var(--status-danger-bg); }
.diff tr[data-diff-kind="change"] td { background: var(--status-warning-bg); }
.diff tr[data-diff-kind="equal"]  td { color: var(--fg-muted); }

/* ============================================================
   Tree-Editor archetype (UC-17, ADR-0027)
   Mirrors docs/specs/design-framework/reference/tree-editor.html.
   Calm modern SaaS: per-row affordances reveal on hover/focus
   so the resting tree stays quiet. Sortable.js binds via
   [data-tree-list] and posts SUC-FE-06/07 routes on drop.
   ============================================================ */
.editor-layout { display: grid; grid-template-columns: minmax(320px, 38%) 1fr;
  gap: var(--space-5); align-items: start; }
@media (max-width: 960px) { .editor-layout { grid-template-columns: 1fr; } }

.tree-pane__head { display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle); }
.tree-pane__head h2 { margin: 0; font-size: var(--fs-small); flex: 1; }
.tree-pane__body { padding: var(--space-3) var(--space-2); }

.tree-search { position: relative; flex: 1; max-width: 220px; }
.tree-search input { width: 100%; padding: 0.375rem 0.5rem 0.375rem 1.875rem;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-2);
  background: var(--bg-default); font-size: var(--fs-small); }
.tree-search .icon { position: absolute; left: 0.5rem; top: 50%;
  transform: translateY(-50%); color: var(--fg-muted); pointer-events: none; }

.tree { list-style: none; padding: 0; margin: 0; }
.tree ul[role="group"] { list-style: none; padding-left: 1.125rem; margin: 0;
  position: relative; }
.tree ul[role="group"]::before { content: ""; position: absolute;
  left: 0.5rem; top: 0.25rem; bottom: 0.25rem; width: 1px;
  background: var(--border-subtle); }

.tree__row { display: grid;
  grid-template-columns: 18px 18px 1fr auto auto;
  align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.5rem; border-radius: var(--radius-2);
  min-height: 32px; position: relative;
  transition: background 80ms ease; }
.tree__row:hover { background: var(--bg-hover, var(--bg-subtle)); }
.tree__row:focus-within { background: var(--bg-hover, var(--bg-subtle));
  box-shadow: 0 0 0 2px var(--ring-focus, var(--fg-brand-subtle)) inset; }
.tree li[aria-selected="true"] > .tree__row { background: var(--bg-brand-subtle);
  box-shadow: inset 2px 0 0 var(--fg-brand); }

.tree__drag { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; color: var(--border-strong, var(--border-subtle));
  cursor: grab; opacity: 0;
  transition: opacity 120ms ease, color 120ms ease; }
.tree__row:hover .tree__drag,
.tree__row:focus-within .tree__drag,
.tree li[aria-selected="true"] > .tree__row .tree__drag { opacity: 1; }
.tree__drag:hover { color: var(--fg-default); }
.tree__drag:active { cursor: grabbing; }

.tree__chevron { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; color: var(--fg-muted);
  border-radius: var(--radius-1); }
.tree__chevron:hover { background: var(--bg-default); color: var(--fg-default); }
.tree__chevron[aria-hidden="true"] { visibility: hidden; }

.tree__label { display: inline-flex; gap: 0.5rem; align-items: baseline;
  color: var(--fg-default); text-decoration: none; min-width: 0;
  padding: 0.1875rem 0; }
.tree__label .label { color: var(--fg-muted); font-variant-numeric: tabular-nums;
  font-size: 0.75rem; letter-spacing: 0.01em; font-weight: 500;
  white-space: nowrap; }
.tree__label .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree__label:hover .title { text-decoration: underline; }

.tree__badge { font-size: 0.6875rem; padding: 0.0625rem 0.375rem; }

.tree__menu { opacity: 0; transition: opacity 120ms ease; }
.tree__row:hover .tree__menu,
.tree__row:focus-within .tree__menu,
.tree li[aria-selected="true"] > .tree__row .tree__menu { opacity: 1; }
.tree__menu summary { list-style: none; }
.tree__menu summary::-webkit-details-marker { display: none; }

/* Sortable.js drop visuals */
.tree__row.sortable-ghost { background: var(--bg-brand-subtle); opacity: 0.6; }
.tree__row.sortable-chosen { box-shadow: 0 0 0 1px var(--fg-brand); }
.tree__row.sortable-drag { background: var(--bg-default);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(15,23,42,0.12);
  border-radius: var(--radius-2); }
.tree li.is-drop-target > .tree__row { background: var(--bg-brand-subtle);
  box-shadow: inset 0 0 0 1px var(--fg-brand); }

.tree-add { margin: 0.5rem 0.5rem 0 0.5rem;
  border-top: 1px solid var(--border-subtle); padding-top: 0.5rem; }
.tree-add > details > summary { list-style: none; cursor: pointer;
  padding: 0.375rem 0.5rem; border-radius: var(--radius-2);
  color: var(--fg-muted); display: inline-flex; align-items: center;
  gap: 0.375rem; font-size: var(--fs-small); }
.tree-add > details > summary::-webkit-details-marker { display: none; }
.tree-add > details > summary:hover { background: var(--bg-subtle);
  color: var(--fg-default); }
.tree-add__placement { display: flex; gap: 0.5rem;
  padding: 0.25rem 0.5rem; font-size: 0.75rem; color: var(--fg-muted); }
.tree-add__placement label { display: inline-flex; gap: 0.25rem;
  align-items: center; cursor: pointer; }
.tree-add__form { display: grid; grid-template-columns: 6rem 1fr auto;
  gap: 0.375rem; padding: 0.5rem; margin-top: 0.25rem;
  background: var(--bg-subtle); border-radius: var(--radius-2); }
.tree-add__form input { padding: 0.375rem 0.5rem;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-1);
  background: var(--bg-default); font-size: var(--fs-small); }

.empty-tree { padding: 2rem 1rem; text-align: center;
  border: 1px dashed var(--border-subtle); border-radius: var(--radius-3);
  background: var(--bg-subtle); color: var(--fg-muted); }
.empty-tree__icon { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: var(--bg-default);
  border-radius: 50%; color: var(--fg-muted); margin-bottom: 0.75rem; }

.node-detail__crumb { display: inline-flex; gap: 0.375rem; align-items: center;
  color: var(--fg-muted); font-size: var(--fs-small); margin-bottom: 0.375rem; }
.node-detail__crumb a { color: inherit; }
.node-detail__title { display: flex; align-items: baseline; gap: 0.5rem;
  margin: 0; font-size: 1.125rem; }
.node-detail__title .label { color: var(--fg-muted);
  font-variant-numeric: tabular-nums; font-weight: 500;
  font-size: var(--fs-small); padding: 0.125rem 0.375rem;
  background: var(--bg-subtle); border-radius: var(--radius-1); }
.node-detail__meta { color: var(--fg-muted); font-size: var(--fs-small);
  margin: 0.25rem 0 0 0; display: flex; gap: 0.375rem 0.75rem; flex-wrap: wrap; }
.node-detail__meta .dot { color: var(--border-strong, var(--border-subtle)); }

.node-footer { display: flex; justify-content: space-between; gap: 0.75rem;
  padding-top: var(--space-3); border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-4); }
.node-footer__danger { color: var(--fg-muted); font-size: var(--fs-small);
  text-decoration: none; display: inline-flex; align-items: center;
  gap: 0.25rem; }
.node-footer__danger:hover { color: var(--fg-danger, var(--status-danger-text)); }