/**
 * EnclaveWatch — product dashboard aligned with Impeccable shared laws:
 * OKLCH (no pure black/white), motion tokens (expo-out, never bounce),
 * flat surfaces at rest, no identical hero-metric tile grids, no side-stripe
 * accents, focus-visible rings, hover gated to fine pointers,
 * empty states as onboarding moments.
 *
 * Scene (dark): ISSO / reviewer checking posture beside SOC consoles or vault-room workstations with subdued ambient light.
 *
 * @see https://github.com/pbakaus/impeccable — SKILL.md, motion/interaction/ux-writing/responsive references.
 */

:root {
  --hue-brand: 198;
  --chroma-nudge: 0.014;

  --surface-deep: oklch(14% var(--chroma-nudge) var(--hue-brand));
  --surface-base: oklch(17% var(--chroma-nudge) var(--hue-brand));
  --surface-raised: oklch(21% calc(var(--chroma-nudge) * 1.3) var(--hue-brand));
  --surface-overlay: oklch(26% calc(var(--chroma-nudge) * 1.5) var(--hue-brand));
  --border-subtle: oklch(34% 0.024 var(--hue-brand));
  --border-strong: oklch(42% 0.03 var(--hue-brand));

  --text-primary: oklch(96% 0.008 var(--hue-brand));
  --text-secondary: oklch(78% 0.035 var(--hue-brand));
  --text-tertiary: oklch(70% 0.04 var(--hue-brand));   /* bumped from 62% -> 70% for WCAG AA on raised surfaces (verifier flagged 5 nodes on /) */

  --accent: oklch(74% 0.11 var(--hue-brand));
  --accent-hover: oklch(82% 0.12 var(--hue-brand));
  --accent-pressed: oklch(64% 0.1 var(--hue-brand));
  --accent-fg: oklch(14% 0.045 var(--hue-brand));

  --danger: oklch(62% 0.18 22);
  --danger-surface: oklch(28% 0.06 22);
  --success: oklch(72% 0.13 155);
  --success-surface: oklch(28% 0.06 155);
  --warning: oklch(80% 0.13 92);
  --warning-surface: oklch(30% 0.07 92);

  /* Evidence / hash / integrity accent — distinct from the brand cyan,
     used for signed-content surfaces (manifest hashes, signatures). */
  --integrity: oklch(70% 0.12 280);
  --integrity-surface: oklch(28% 0.07 280);
  --integrity-fg: oklch(96% 0.01 280);

  /* Severity ramp — semantic, used on .severity-badge and table cells. */
  --sev-critical-fg: oklch(94% 0.03 22);
  --sev-critical-bg: var(--danger-surface);
  --sev-critical-bd: oklch(45% 0.12 22);
  --sev-high-fg: oklch(94% 0.04 38);
  --sev-high-bg: oklch(28% 0.07 38);
  --sev-high-bd: oklch(50% 0.12 38);
  --sev-medium-fg: oklch(94% 0.05 92);
  --sev-medium-bg: oklch(30% 0.07 92);
  --sev-medium-bd: oklch(60% 0.14 92);
  --sev-low-fg: oklch(94% 0.04 155);
  --sev-low-bg: oklch(28% 0.06 155);
  --sev-low-bd: oklch(50% 0.12 155);
  --sev-info-fg: var(--text-primary);
  --sev-info-bg: oklch(28% 0.04 var(--hue-brand));
  --sev-info-bd: var(--border-strong);

  /* Boundary line — Codex Export divider. */
  --boundary: oklch(60% 0.14 280);
  --boundary-fg: oklch(96% 0.02 280);

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.28);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.14s;
  --dur-base: 0.28s;
  --dur-slow: 0.48s;

  --z-sticky: 100;
  --z-skip: 500;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --lh-tight: 1.22;
  --lh-body: 1.55;

  --nav-target: 44px;

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@keyframes ew-main-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Strip browser-default <dl>/<dt>/<dd> margins. The UA sheet ships
   `dl { margin-block: 1em }` and `dd { margin-inline-start: 40px }`,
   which leaves a phantom 40px indent under every metric value and a
   1em gap above/below every definition list — reads as misaligned text
   ("off-color blocks") on dark surfaces. Site-wide reset; opt-in spacing
   is provided by the layout class (e.g. `.kv`, `.assurance-state__metrics`). */
dl, dt, dd {
  margin: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body.app-body {
  margin: 0;
  min-height: 100vh;
  padding-top: env(safe-area-inset-top, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: var(--lh-body);
  font-weight: 400;
  font-kerning: normal;
  font-optical-sizing: auto;
  color: var(--text-primary);
  background: var(--surface-deep);
  accent-color: var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
  .app-main__inner {
    animation: ew-main-enter var(--dur-base) var(--ease-out-expo) backwards;
  }
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
  z-index: var(--z-skip);
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out-expo);
}

.skip-link:focus {
  transform: translateY(0);
  outline: none;
}

.skip-link:focus-visible {
  outline: 3px solid oklch(94% 0.06 var(--hue-brand));
  outline-offset: 3px;
}

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

/* ——— App shell — sidebar (left) + main column (right) ——— */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w-expanded, 248px) 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--dur-base) var(--ease-out-expo);
}

.app-shell[data-sidebar-collapsed="true"] {
  grid-template-columns: var(--sidebar-w-collapsed, 64px) 1fr;
}

.app-shell__main {
  display: flex;
  flex-direction: column;
  min-width: 0; /* allow children to shrink instead of overflowing the grid track */
}

/* ——— Sidebar ——— */
.app-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-base);
  border-right: 1px solid var(--border-subtle);
  overflow: hidden;
  z-index: var(--z-sticky);
}

.app-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  min-height: 76px;
  box-sizing: border-box;
}

.app-sidebar__brand:hover {
  background: oklch(100% 0 0 / 0.02);
}

.app-sidebar__brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.logo-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--accent-fg);
  background: linear-gradient(180deg,
    oklch(78% 0.12 var(--hue-brand)) 0%,
    oklch(68% 0.10 var(--hue-brand)) 100%);
  border: 1px solid oklch(54% 0.09 var(--hue-brand));
  box-shadow:
    inset 0 1px 0 oklch(96% 0.04 var(--hue-brand) / 0.35),
    0 1px 2px oklch(0% 0 0 / 0.32);
}

/* Vault-running indicator pip — subtle but informative. The page already
   hydrates real service health into the command strip; this is the at-rest
   "the brand mark itself is alive" detail that audit consoles tend to have. */
.logo-mark::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(72% 0.18 155);
  border: 2px solid var(--surface-base);
  box-shadow: 0 0 0 1px oklch(40% 0.06 155);
}

.product-name {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-tagline {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-sidebar__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-3) 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.app-sidebar__section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-sidebar__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 var(--space-2);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  /* Inactive links are quiet — secondary text. The accent is reserved for the
     active rail marker and primary actions, per design law. */
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--dur-fast) var(--ease-out-quart),
    background-color var(--dur-fast) var(--ease-out-quart);
}

@media (hover: hover) {
  .app-sidebar__link:hover {
    background: oklch(100% 0 0 / 0.04);
    color: var(--text-primary);
  }
}

.app-sidebar__link:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

.app-sidebar__link.is-active {
  color: var(--text-primary);
  background: oklch(100% 0 0 / 0.06);
  font-weight: 600;
}

/* Thin accent rail on the active link — the only place the brand cyan
   carries primary-state weight in the navigation. */
.app-sidebar__link.is-active::before {
  content: "";
  position: absolute;
  left: calc(var(--space-2) * -1 + 2px);
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* The icon "tile" — quiet at rest, brand-tinted only when the link is current.
   Doubles as the visible target when the sidebar is collapsed to icon-only mode. */
.app-sidebar__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  background: transparent;
  border: 1px solid var(--border-subtle);
  transition:
    color var(--dur-fast) var(--ease-out-quart),
    background-color var(--dur-fast) var(--ease-out-quart),
    border-color var(--dur-fast) var(--ease-out-quart);
}

@media (hover: hover) {
  .app-sidebar__link:hover .app-sidebar__icon {
    color: var(--text-secondary);
    border-color: var(--border-strong);
  }
}

.app-sidebar__link.is-active .app-sidebar__icon {
  color: var(--accent);
  background: oklch(28% 0.05 var(--hue-brand));
  border-color: oklch(48% 0.08 var(--hue-brand));
}

.app-sidebar__link-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-sidebar__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: none;
  border-top: 1px solid var(--border-subtle);
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  text-align: left;
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease-out-quart);
}

.app-sidebar__toggle:hover {
  color: var(--text-primary);
}

.app-sidebar__toggle-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 24px;
  flex-shrink: 0;
  font-size: 1.125rem;
  line-height: 1;
}

/* ——— Collapsed state: hide labels, keep icons + active highlight ——— */
.app-shell[data-sidebar-collapsed="true"] .app-sidebar__brand-text,
.app-shell[data-sidebar-collapsed="true"] .app-sidebar__link-label,
.app-shell[data-sidebar-collapsed="true"] .app-sidebar__bucket-summary .app-sidebar__link-label,
.app-shell[data-sidebar-collapsed="true"] .app-sidebar__toggle-label {
  display: none;
}

.app-shell[data-sidebar-collapsed="true"] .app-sidebar__brand {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.app-shell[data-sidebar-collapsed="true"] .app-sidebar__link {
  justify-content: center;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.app-shell[data-sidebar-collapsed="true"] .app-sidebar__toggle {
  justify-content: center;
}

/* When collapsed, replace each section's "label" gap with a small divider so the
   three groupings stay visually separated. */
.app-shell[data-sidebar-collapsed="true"] .app-sidebar__section + .app-sidebar__section {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-2);
  margin-top: var(--space-2);
}

.app-shell[data-sidebar-collapsed="true"] .app-sidebar__toggle-icon {
  transform: rotate(180deg);
}

/* ——— Bucket (top-level group with sub-nav) ——— *
 * Uses a native <details>/<summary> so sub-links stay visible on load with
 * zero JS, and the user can fold the group closed without losing state on a
 * second visit (browser-default state persistence). Active sub-link still
 * uses the existing `.is-active` treatment from above.
 */
.app-sidebar__bucket {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Inherit the same gutter rhythm as .app-sidebar__section. */
  margin-top: var(--space-3);
}

.app-sidebar__bucket-summary {
  /* Match .app-sidebar__link sizing exactly so bucket header reads as another
     row (just with a caret instead of a target). */
  list-style: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 var(--space-2);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  cursor: pointer;
  user-select: none;
  transition:
    color var(--dur-fast) var(--ease-out-quart),
    background-color var(--dur-fast) var(--ease-out-quart);
}

.app-sidebar__bucket-summary::-webkit-details-marker {
  display: none;
}

@media (hover: hover) {
  .app-sidebar__bucket-summary:hover {
    color: var(--text-secondary);
    background: oklch(100% 0 0 / 0.03);
  }
}

.app-sidebar__bucket-summary:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

.app-sidebar__bucket[data-bucket-active="true"] > .app-sidebar__bucket-summary {
  /* Quietly call attention to the bucket whose sub-link is active. No accent
     bleed — just promote the header color so the user's eye lands here. */
  color: var(--text-secondary);
}

.app-sidebar__bucket-caret {
  margin-left: auto;
  font-size: 0.625rem;
  line-height: 1;
  color: var(--text-tertiary);
  transition: transform var(--dur-fast) var(--ease-out-quart);
}

.app-sidebar__bucket:not([open]) > .app-sidebar__bucket-summary .app-sidebar__bucket-caret {
  transform: rotate(-90deg);
}

.app-sidebar__sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}

/* Sub-link: identical to top-level link but slightly indented so the
   hierarchy is unmistakable. The icon tile already provides the visual rail. */
.app-sidebar__link--sub {
  font-size: 0.8125rem;
  font-weight: 500;
  padding-left: var(--space-3);
}

/* Collapsed sidebar: hide carets + bucket labels; reset the bucket
   summary so the icon tile centers like any other link. Sub-links render
   as ordinary icon tiles. */
.app-shell[data-sidebar-collapsed="true"] .app-sidebar__bucket-summary {
  justify-content: center;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.app-shell[data-sidebar-collapsed="true"] .app-sidebar__bucket-caret {
  display: none;
}

/* On mobile (the drawer view) reveal the bucket labels just like other labels. */
@media (max-width: 820px) {
  .app-shell[data-sidebar-collapsed="true"] .app-sidebar__bucket-summary {
    justify-content: flex-start;
  }
}

/* ——— Mobile: sidebar becomes an off-canvas drawer ——— */
.app-mobile-nav-toggle {
  display: none;
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: calc(var(--z-sticky) + 2);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  font-size: 1.25rem;
  color: var(--text-primary);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

@media (max-width: 820px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out-expo);
    z-index: calc(var(--z-sticky) + 1);
    box-shadow: 0 0 32px oklch(0% 0 0 / 0.4);
  }
  .app-shell[data-mobile-open="true"] .app-sidebar {
    transform: translateX(0);
  }
  .app-shell[data-sidebar-collapsed="true"] .app-sidebar {
    /* On mobile the collapsed-icon variant doesn't make sense; always show full
       width when the drawer is open. */
    width: 280px;
  }
  .app-shell[data-sidebar-collapsed="true"] .app-sidebar__brand-text,
  .app-shell[data-sidebar-collapsed="true"] .app-sidebar__link-label,
  .app-shell[data-sidebar-collapsed="true"] .app-sidebar__bucket-summary .app-sidebar__link-label,
  .app-shell[data-sidebar-collapsed="true"] .app-sidebar__toggle-label {
    display: revert;
  }
  .app-shell[data-sidebar-collapsed="true"] .app-sidebar__link,
  .app-shell[data-sidebar-collapsed="true"] .app-sidebar__brand,
  .app-shell[data-sidebar-collapsed="true"] .app-sidebar__toggle {
    justify-content: flex-start;
  }
  .app-mobile-nav-toggle {
    display: flex;
  }
  /* Pull the main column down so the floating burger doesn't cover the command strip. */
  .app-shell__main {
    padding-top: 56px;
  }
}

/* ——— Main column (right of sidebar) ——— */
.app-main {
  flex: 1 1 auto;
  padding: var(--space-6) clamp(var(--space-4), 3vw, var(--space-8));
}

.app-main__inner {
  max-width: 1320px;
  margin: 0 auto;
}

.ambient-footer {
  max-width: 1280px;
  margin: var(--space-10) auto var(--space-6);
  padding: 0 clamp(var(--space-4), 2.5vw, var(--space-6));
}

.ambient-footer p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  max-width: 55ch;
}

/* ——— Typography ——— */
h1,
h2,
h3 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  color: var(--text-primary);
  text-wrap: balance;
}

h1 {
  font-size: 1.875rem;
  margin: 0 0 var(--space-4);
}

h2 {
  font-size: 1.3125rem;
  margin: 0 0 var(--space-4);
}

h3 {
  font-size: 1.0625rem;
  margin: 0 0 var(--space-3);
}

.page-header {
  margin-bottom: var(--space-8);
  /* The page title carries the most weight on the screen — give the lead
     a measured maximum so it doesn't run the full content width and look
     like marketing copy. */
}

.page-title {
  margin: 0 0 var(--space-3);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.18;
}

.page-title small {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  margin-left: var(--space-3);
}

.lead,
.text-secondary {
  margin: 0;
  color: var(--text-secondary);
  font-size: 1rem;
  max-width: 68ch;
}

.lead + .lead {
  margin-top: var(--space-3);
}

.text-tertiary {
  color: var(--text-tertiary);
  font-size: 0.875rem;
}

code,
pre {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
  font-size: 0.8125rem;
}

pre {
  margin: 0;
  padding: var(--space-4);
  background: var(--surface-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.notes-block {
  white-space: pre-wrap;
}

.meta-rows {
  display: grid;
  gap: 0;
  margin: var(--space-4) 0 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.meta-rows > div {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.meta-rows > div:last-child {
  border-bottom: none;
}

.meta-rows dt {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-tertiary);
}

.meta-rows dd {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.stack--lg {
  gap: var(--space-8);
}

.panel,
.card {
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}

.panel:last-child,
.card:last-child {
  margin-bottom: 0;
}

.panel__title {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 1.125rem;
}

.panel--quiet {
  background: transparent;
  border-style: dashed;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: var(--space-4) 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface-overlay);
  border-bottom: 1px solid var(--border-strong);
}

tbody td {
  padding: var(--space-3) var(--space-4);
  vertical-align: top;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

tbody tr {
  transition: background-color var(--dur-fast) var(--ease-out-quart);
}

@media (hover: hover) {
  tbody tr:hover {
    background: oklch(100% 0 0 / 0.035);
  }
}

tbody tr:last-child td {
  border-bottom: none;
}

label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

/* Inline-filter: a thin one-line filter row (label + 1–3 fields + apply button)
   that doesn't deserve a full panel. Sits flush above a table or list. */
.inline-filter {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-2) 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-base);
}

.inline-filter__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 0 var(--space-2);
}

.inline-filter__field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.inline-filter__field span {
  color: var(--text-tertiary);
}

.inline-filter__field select,
.inline-filter__field input {
  margin: 0;
  height: 32px;
  padding: 0 var(--space-2);
  font-size: 0.8125rem;
}

.btn--compact {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: 0.8125rem;
}

.form-actions {
  margin-top: var(--space-5);
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* ============================================================================
   Compact filter bar — tight inline layout, no panel chrome.
   Used by /Events. Drops the form into a horizontal flex row that wraps on
   narrow viewports. Each cell is label-on-top + control-below at 30px height,
   with low-contrast borders. Apple-quality density.
   ========================================================================== */

.filter-bar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  flex-wrap: wrap;
  margin: var(--space-2) 0 var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.filter-bar__cells {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-width: 0;
  align-items: flex-end;
}

.filter-bar__cell {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  min-width: 0;
}

/* Label sits as small caps over the control — quiet enough not to compete
   with the value, loud enough to scan. */
.filter-bar__cell > span {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  line-height: 1;
}

.filter-bar__cell > input,
.filter-bar__cell > select {
  height: 30px;
  margin: 0;
  padding: 0 var(--space-2);
  font-size: 0.8125rem;
  font-weight: 400;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

/* Custom select arrow — strip browser default, draw a small ▾ in tertiary tone.
   Cleaner than the native chunky arrow box on Windows / Chromium. */
.filter-bar__cell > select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-6);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 14px) center,
    calc(100% - 9px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--text-secondary);
}

.filter-bar__cell > select option {
  color: var(--text-primary);
  background: var(--surface-base);
}

/* Per-cell sizing so wraps look intentional, not random. */
.filter-bar__cell                  { width: 160px; }
.filter-bar__cell--time            { width: 200px; }
.filter-bar__cell--text            { width: 140px; }
.filter-bar__cell--flag            { width: 96px; }

/* On wide displays (>1500px main column) everything fits on one row; on narrow
   the wrap is graceful. The auto-shrink ensures cells don't overflow. */
@media (max-width: 720px) {
  .filter-bar__cell                  { width: calc(50% - var(--space-3) / 2); }
  .filter-bar__cell--flag            { width: calc(33.33% - var(--space-3) * 2 / 3); }
}

.filter-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.filter-bar__reset {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.filter-bar__reset:hover,
.filter-bar__reset:focus-visible {
  color: var(--text-primary);
}

/* Visual hint when filters are active: thin accent stripe on the bar's left edge. */
.filter-bar[data-active-count]:not([data-active-count="0"]) {
  position: relative;
}

.filter-bar[data-active-count]:not([data-active-count="0"])::before {
  content: "";
  position: absolute;
  left: calc(var(--space-4) * -1);
  top: 0;
  bottom: var(--space-4);
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.inline-actions select {
  width: auto;
  min-width: 10rem;
}

.inline-actions input[type="text"] {
  width: auto;
  min-width: 10rem;
  max-width: 14rem;
}

input[type="text"],
input[type="number"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  max-width: 100%;
  padding: var(--space-3);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--surface-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--dur-fast) var(--ease-out-quart),
    box-shadow var(--dur-fast) var(--ease-out-quart);
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(74% 0.11 var(--hue-brand) / 0.32);
}

button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--nav-target);
  padding: 0 var(--space-4);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-fg);
  background: var(--accent);
  border: 1px solid oklch(54% 0.09 var(--hue-brand));
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease-out-quart),
    border-color var(--dur-fast) var(--ease-out-quart),
    transform var(--dur-fast) var(--ease-out-expo);
}

@media (hover: hover) {
  button:hover:not(:disabled),
  .btn:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: oklch(62% 0.1 var(--hue-brand));
  }
}

button:active:not(:disabled),
.btn:active:not(:disabled) {
  transform: translateY(1px);
}

@media (hover: none) {
  button:active:not(:disabled),
  .btn:active:not(:disabled) {
    background: var(--accent-pressed);
  }
}

button:disabled,
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

button.secondary,
.btn.secondary {
  color: var(--text-primary);
  background: var(--surface-overlay);
  border-color: var(--border-strong);
}

@media (hover: hover) {
  button.secondary:hover:not(:disabled),
  .btn.secondary:hover:not(:disabled) {
    background: oklch(100% 0 0 / 0.06);
  }
}

button:focus-visible,
.btn:focus-visible {
  outline: 3px solid oklch(82% 0.12 var(--hue-brand));
  outline-offset: 2px;
}

.banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  border: 1px solid transparent;
  font-size: 0.875rem;
}

.banner > strong {
  flex-shrink: 0;
  color: var(--text-primary);
}

.banner > span {
  flex: 1 1 auto;
  color: var(--text-secondary);
  line-height: var(--lh-body);
}

.banner__action {
  flex-shrink: 0;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.banner__action:hover,
.banner__action:focus-visible {
  color: var(--accent-hover);
}

.banner--error {
  color: oklch(92% 0.03 22);
  background: var(--danger-surface);
  border-color: oklch(45% 0.12 22);
}

.banner--ok {
  background: oklch(28% 0.06 155);
  border-color: oklch(50% 0.12 155);
}

.banner--ok > strong {
  color: oklch(96% 0.03 155);
}

.empty-state {
  position: relative;
  padding: var(--space-8) var(--space-6);
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: oklch(100% 0 0 / 0.02);
}

/* Minimal "all clear" mark — quiet enough to read as status, not a graphic. */
.empty-state::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, oklch(72% 0.12 155 / 0.55) 0%, transparent 60%),
    var(--surface-overlay);
  border: 1.5px solid oklch(50% 0.12 155);
  box-shadow: 0 0 0 4px oklch(28% 0.06 155 / 0.45);
}

.empty-state__title {
  margin: 0 0 var(--space-3);
  font-size: 1.125rem;
  font-weight: 600;
}

.empty-state__desc {
  margin: 0 auto;
  max-width: 52ch;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: var(--lh-body);
}

.empty-state__cta {
  margin: var(--space-6) 0 0;
}

.empty-state__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--nav-target);
  padding: 0 var(--space-6);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--accent-fg);
  background: var(--accent);
  border: 1px solid oklch(54% 0.09 var(--hue-brand));
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease-out-quart),
    transform var(--dur-fast) var(--ease-out-expo);
}

@media (hover: hover) {
  .empty-state__link:hover {
    background: var(--accent-hover);
  }
}

.empty-state__link:focus {
  outline: none;
}

.empty-state__link:focus-visible {
  outline: 3px solid oklch(82% 0.12 var(--hue-brand));
  outline-offset: 2px;
}

.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge--low {
  background: var(--surface-overlay);
  color: var(--text-secondary);
}

/* Outcome-tone variants — used on Reviews registry, CA Assessments,
   Tabletops, RiskAssessments. Semantic mapping:
     good = passing / current / met         (success)
     warn = approaching threshold / N/A     (warning)
     bad  = overdue / NOT MET / failed      (danger)
   These have been referenced from CSHTML for a while; consolidating the
   rule here so the visual treatment matches the rest of the system. */
.badge--good {
  background: var(--success-surface);
  color: oklch(92% 0.04 155);
  border: 1px solid oklch(50% 0.12 155);
}

.badge--warn {
  background: var(--warning-surface);
  color: oklch(92% 0.05 92);
  border: 1px solid oklch(56% 0.12 92);
}

.badge--bad {
  background: var(--danger-surface);
  color: oklch(92% 0.04 22);
  border: 1px solid oklch(50% 0.14 22);
}

/* Reviews registry — table tweaks. Per-row data-state attribute drives
   a quiet left-border accent so the overdue rows draw the eye without
   shouting; current rows stay flat. */
.reviews-registry tbody tr {
  border-left: 3px solid transparent;
}
.reviews-registry tbody tr[data-state="overdue"]   { border-left-color: oklch(50% 0.14 22); }
.reviews-registry tbody tr[data-state="duesoon"]   { border-left-color: oklch(56% 0.12 92); }
.reviews-registry tbody tr[data-state="neverrun"]  { border-left-color: var(--border-strong); }
.reviews-registry tbody tr[data-state="current"]   { border-left-color: transparent; }

.reviews-registry__cadence {
  font-size: 0.75rem;
}

.reviews-registry__recent-label {
  font-size: 0.75rem;
  max-width: 28ch;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.reviews-registry__actions-col {
  white-space: nowrap;
}

.cell-clip {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  /* overflow-wrap: anywhere lets long unbroken tokens wrap at any character
     as a last resort, but the browser still prefers spaces and punctuation
     boundaries first — so a dotted identifier like
     `RoleManagement.Read.Directory` wraps at the dots rather than splitting
     mid-token into "Director y" the way `word-break: break-word` does. */
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
}

.table-wrap td pre.notes-block {
  margin: 0;
  padding: var(--space-3);
  font-size: 0.75rem;
  line-height: 1.45;
  white-space: pre-wrap;
  background: var(--surface-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.mono-clip {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

@media (pointer: coarse) {
  button,
  .btn,
  .empty-state__link {
    min-height: 48px;
  }

  .app-nav a {
    min-height: 48px;
  }
}

/* Section titles within page bodies — match Impeccable's restrained hierarchy. */
.section-title {
  margin: 0 0 var(--space-3);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.section-title--spaced {
  margin-top: var(--space-8);
}

/* Run panel: surfaced action shelf for manual evidence collection.
   Flat at rest, single accent button + secondaries, status banner appears
   in place (no toast) so the operator stays in context. */
.run-panel {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-8);
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.run-panel__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: end;
}

@media (max-width: 720px) {
  .run-panel__row {
    grid-template-columns: 1fr;
  }
  .run-panel__actions {
    justify-content: flex-start;
  }
}

.run-panel__copy {
  max-width: 64ch;
}

.run-panel__copy p {
  margin: 0;
}

.run-panel__copy p + p {
  margin-top: var(--space-2);
}

.run-panel__title {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.run-panel__evidence-path {
  font-size: 0.8125rem;
  line-height: 1.5;
}

.run-panel__evidence-path code {
  font-size: 0.78em;
}

/* The definitive evidence root — emphasized so the operator can spot the
   on-vault save location at a glance. */
.run-panel__path {
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-overlay);
  padding: 1px 6px;
  border-radius: 4px;
}

.run-panel__last {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.run-panel__last strong {
  color: var(--text-secondary);
  font-weight: 500;
}

.run-panel__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Operator overrides — legacy "Complete + Generate manifest + Codex export"
   button row, hidden behind a native <details> disclosure on the WeeklyReview
   page. Visible signal is intentionally quiet — these are escape hatches, not
   the primary path. */
.operator-overrides {
  margin: var(--space-5) 0 var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-sm);
  background: oklch(100% 0 0 / 0.015);
}

.operator-overrides > summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  list-style: none;
  user-select: none;
}

.operator-overrides > summary::-webkit-details-marker {
  display: none;
}

.operator-overrides > summary::before {
  content: "▸ ";
  display: inline-block;
  margin-right: var(--space-1);
  color: var(--text-tertiary);
  transition: transform var(--dur-fast) var(--ease-out-quart);
}

.operator-overrides[open] > summary::before {
  content: "▾ ";
}

.operator-overrides[open] > summary {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.operator-overrides .run-panel__actions {
  justify-content: flex-start;
}

.run-panel__status {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 0.875rem;
  line-height: var(--lh-body);
  transition: background-color var(--dur-base) var(--ease-out-quart),
              border-color var(--dur-base) var(--ease-out-quart);
}

.run-panel__status[data-level="info"] {
  color: var(--text-primary);
  background: oklch(28% 0.04 var(--hue-brand));
  border-color: var(--border-strong);
}

.run-panel__status[data-level="ok"] {
  color: oklch(94% 0.04 155);
  background: oklch(28% 0.06 155);
  border-color: oklch(50% 0.12 155);
}

.run-panel__status[data-level="error"] {
  color: oklch(94% 0.03 22);
  background: var(--danger-surface);
  border-color: oklch(45% 0.12 22);
}

.run-panel__status .text-tertiary {
  color: inherit;
  opacity: 0.7;
}

/* Inline status text for table cells (red-amber-green without re-using banner full background). */
.status-bad {
  color: oklch(78% 0.12 22);
  font-weight: 500;
}

.status-good {
  color: oklch(82% 0.12 155);
  font-weight: 500;
}

.status-warn {
  color: oklch(82% 0.12 92);
  font-weight: 500;
}

/* =========================================================================
   ENCLAVE ASSURANCE CONSOLE — Refresh primitives
   These ride on the existing tokens. Severity ramp + integrity accent come
   from :root; nothing here is one-off color.
   ========================================================================= */

/* ----- Command strip (above page content on every page) ------------------- */
.command-strip {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  padding: var(--space-3) clamp(var(--space-4), 2.5vw, var(--space-6));
  /* Slightly elevated against the deeper page background so it reads as a
     fixed status rail rather than just the top of content. The thin
     border-bottom does the actual separation work. */
  background:
    linear-gradient(to bottom, var(--surface-base), oklch(16% var(--chroma-nudge) var(--hue-brand)));
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 1px 0 oklch(0% 0 0 / 0.18);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  min-height: 56px;
  box-sizing: border-box;
}

/* Subtle hairline brand-tinted accent at the very top of the strip — reads as
   "this product has an enclave guarding it" without using glow / glassmorphism. */
.command-strip::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    oklch(48% 0.08 var(--hue-brand)) 28%,
    oklch(52% 0.10 var(--hue-brand)) 50%,
    oklch(48% 0.08 var(--hue-brand)) 72%,
    transparent 100%);
  opacity: 0.45;
  pointer-events: none;
}

.command-strip__cells {
  display: flex;
  gap: var(--space-3) var(--space-5);
  flex-wrap: wrap;
  align-items: center;
}

.command-strip__context {
  display: inline-flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

/* Static-context pill (vault id, week). Muted, no label — the value is self-describing. */
.command-strip__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-deep);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.command-strip__pill strong {
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.command-strip__cell {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}

/* Live cells get a tone-colored dot so the operator can see status at a glance
   without reading the label. JS sets data-tone="ok|warn|error" on the cell. */
.command-strip__cell--live::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-tertiary);
  margin-right: var(--space-1);
  align-self: center;
}

.command-strip__cell--live[data-tone="ok"]::before { background: oklch(72% 0.18 155); }
.command-strip__cell--live[data-tone="warn"]::before { background: oklch(78% 0.16 92); }
.command-strip__cell--live[data-tone="error"]::before { background: oklch(72% 0.20 28); }

.command-strip__cell-label {
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.6875rem;
  font-weight: 600;
}

.command-strip__cell-value {
  color: var(--text-primary);
  font-weight: 500;
}

.command-strip__cell-value strong {
  color: var(--text-primary);
  font-weight: 600;
}

.command-strip__right {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.command-strip__user {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-deep);
  font-size: 0.75rem;
}

.command-strip__user-name {
  color: var(--text-primary);
  font-weight: 600;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-strip__user-meta {
  color: var(--text-tertiary);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.command-strip__signout {
  color: var(--text-secondary);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  margin-left: var(--space-1);
}

.command-strip__signout:hover,
.command-strip__signout:focus-visible {
  color: var(--text-primary);
}

.command-strip__boundary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--integrity-fg);
  background: var(--integrity-surface);
  border: 1px solid oklch(45% 0.1 280);
}

.command-strip__boundary::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--integrity);
  box-shadow: 0 0 0 2px oklch(45% 0.1 280);
}

@media (max-width: 1180px) {
  .command-strip {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .command-strip__right {
    justify-content: flex-start;
    width: 100%;
  }
  .command-strip__boundary,
  .command-strip__user {
    justify-self: start;
  }
}

/* Narrow viewports: drop the brand-context pills entirely so the live cells
   (Service / Manifests / Codex) keep priority — those are the ones the ISSO
   actually scans. The vault id is reachable from the sidebar brand. */
@media (max-width: 720px) {
  .command-strip__context .command-strip__pill:nth-child(2) {
    display: none;
  }
}

/* ----- Assurance state hero (Overview top) -------------------------------- */
.assurance-state {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6) var(--space-6);
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}

.assurance-state[data-state="healthy"]   { border-left-color: oklch(50% 0.12 155); }
.assurance-state[data-state="review"]    { border-left-color: oklch(60% 0.14 92); }
.assurance-state[data-state="findings"]  { border-left-color: oklch(60% 0.14 38); }
.assurance-state[data-state="critical"]  { border-left-color: oklch(45% 0.12 22); }
.assurance-state[data-state="manifest"]  { border-left-color: oklch(45% 0.12 22); }
.assurance-state[data-state="degraded"]  { border-left-color: oklch(60% 0.14 92); }

.assurance-state__copy {
  max-width: 64ch;
}

.assurance-state__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

.assurance-state__title {
  margin: 0 0 var(--space-2);
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.assurance-state__detail {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: var(--lh-body);
}

/* Primary CTA inside the assurance-state hero. Used on Overview when the weekly
   review is due (or when the user can jump straight to the signed export
   after completion). Sits directly under the detail copy so it reads as
   "the answer to the headline." */
.assurance-state__cta {
  margin-top: var(--space-4);
}

.assurance-state__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, auto));
  gap: var(--space-3) var(--space-4);
  align-items: end;
  margin: 0;
  padding: 0;
}

/* Browser defaults for <dl>/<dt>/<dd> create misaligned text and phantom
   indentation everywhere these elements appear inside our design surfaces.
   Reset for the metric grid + every direct child <dt>/<dd>. */
.assurance-state__metrics dt,
.assurance-state__metrics dd,
.metric-block dt,
.metric-block dd {
  margin: 0;
  padding: 0;
}

@media (max-width: 720px) {
  .assurance-state {
    grid-template-columns: 1fr;
  }
}

/* ----- Metric block (sparingly used, ≤4 per surface) ---------------------- */
.metric-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0;
}

.metric-block__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.metric-block__value {
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.metric-block[data-tone="critical"] .metric-block__value { color: oklch(78% 0.12 22); }
.metric-block[data-tone="warn"]     .metric-block__value { color: oklch(80% 0.13 92); }
.metric-block[data-tone="ok"]       .metric-block__value { color: oklch(82% 0.12 155); }

/* ----- Severity badge ----------------------------------------------------- */
.severity-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.severity-badge[data-severity="critical"] { color: var(--sev-critical-fg); background: var(--sev-critical-bg); border-color: var(--sev-critical-bd); }
.severity-badge[data-severity="high"]     { color: var(--sev-high-fg);     background: var(--sev-high-bg);     border-color: var(--sev-high-bd); }
.severity-badge[data-severity="medium"]   { color: var(--sev-medium-fg);   background: var(--sev-medium-bg);   border-color: var(--sev-medium-bd); }
.severity-badge[data-severity="low"]      { color: var(--sev-low-fg);      background: var(--sev-low-bg);      border-color: var(--sev-low-bd); }
.severity-badge[data-severity="info"],
.severity-badge[data-severity="informational"] {
  color: var(--sev-info-fg); background: var(--sev-info-bg); border-color: var(--sev-info-bd);
}

/* ----- Evidence quality badge (S01, Cap 27) ------------------------------ */
.evidence-quality-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.evidence-quality-badge[data-quality="automated"]         { color: var(--sev-info-fg);    background: var(--sev-info-bg);    border-color: var(--sev-info-bd); }
.evidence-quality-badge[data-quality="manual"]            { color: var(--sev-low-fg);     background: var(--sev-low-bg);     border-color: var(--sev-low-bd); }
.evidence-quality-badge[data-quality="reviewer-attested"] { color: var(--sev-info-fg);    background: var(--sev-info-bg);    border-color: var(--sev-info-bd); }
.evidence-quality-badge[data-quality="stale"]             { color: var(--sev-medium-fg);  background: var(--sev-medium-bg);  border-color: var(--sev-medium-bd); }
.evidence-quality-badge[data-quality="missing"]           { color: var(--sev-high-fg);    background: var(--sev-high-bg);    border-color: var(--sev-high-bd); }
.evidence-quality-badge[data-quality="failed"]            { color: var(--sev-critical-fg);background: var(--sev-critical-bg);border-color: var(--sev-critical-bd); }

/* ----- Form grid (S07, used by Binder.cshtml) ----------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  align-items: end;
}
.form-field { display: flex; flex-direction: column; gap: var(--space-1); }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: 0.8125rem; color: var(--text-secondary); font-weight: 500; }
.form-field input,
.form-field textarea,
.form-field select {
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.875rem;
  background: var(--surface-default);
}

/* ----- Control implementation status chip (S03, Cap 24) ------------------ */
.control-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.control-status[data-status="implemented"]           { color: var(--sev-info-fg);    background: var(--sev-info-bg);    border-color: var(--sev-info-bd); }
.control-status[data-status="partiallyimplemented"]  { color: var(--sev-medium-fg);  background: var(--sev-medium-bg);  border-color: var(--sev-medium-bd); }
.control-status[data-status="planned"]               { color: var(--sev-low-fg);     background: var(--sev-low-bg);     border-color: var(--sev-low-bd); }
.control-status[data-status="inherited"]             { color: var(--sev-info-fg);    background: var(--sev-info-bg);    border-color: var(--sev-info-bd); }
.control-status[data-status="notapplicable"]         { color: var(--sev-low-fg);     background: var(--sev-low-bg);     border-color: var(--sev-low-bd); }

/* ----- Control reference pill -------------------------------------------- */
.control-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--integrity-fg);
  background: oklch(28% 0.05 280);
  border: 1px solid oklch(45% 0.08 280);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.control-pill + .control-pill {
  margin-left: var(--space-1);
}

/* S05 (Cap 6) — objective suffix tone. Dimmer + slightly smaller so the
   bracket text doesn't fight the control id for visual weight. */
.control-pill__objective {
  margin-left: 1px;
  font-size: 0.6125rem;
  color: oklch(70% 0.04 280);
  opacity: 0.85;
}

/* ----- Hash chip (mono, copy button) ------------------------------------- */
.hash-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-2) 2px var(--space-1);
  background: var(--surface-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  max-width: 100%;
}

/* Tiny leading mark — visually identifies the chip as a cryptographic anchor
   rather than just a mono string. Calm violet matches the integrity accent. */
.hash-chip::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--integrity);
  box-shadow: 0 0 0 1px oklch(45% 0.10 280);
}

.hash-chip__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.hash-chip__copy {
  flex-shrink: 0;
  height: 22px;
  padding: 0 var(--space-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color var(--dur-fast) var(--ease-out-quart),
              background-color var(--dur-fast) var(--ease-out-quart),
              border-color var(--dur-fast) var(--ease-out-quart);
}

@media (hover: hover) {
  .hash-chip__copy:hover {
    color: var(--text-primary);
    background: var(--surface-overlay);
    border-color: var(--border-strong);
  }
}

.hash-chip__copy:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

.hash-chip__copy[data-copied="true"] {
  color: oklch(94% 0.04 155);
  background: oklch(28% 0.06 155);
  border-color: oklch(50% 0.12 155);
}

/* ----- Timeline (Overview "this week" panel) ----------------------------- */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-left: var(--space-6);
  margin: 0;
  list-style: none;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--border-subtle);
}

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr auto;
  gap: var(--space-3) var(--space-4);
  align-items: baseline;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(var(--space-6) * -1 + 4px);
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 2px solid var(--border-strong);
}

.timeline__item[data-tone="ok"]::before       { border-color: oklch(50% 0.12 155); background: oklch(28% 0.06 155); }
.timeline__item[data-tone="warn"]::before     { border-color: oklch(60% 0.14 92);  background: oklch(30% 0.07 92); }
.timeline__item[data-tone="critical"]::before { border-color: oklch(45% 0.12 22);  background: var(--danger-surface); }
.timeline__item[data-tone="ok"]       { color: var(--text-primary); }

.timeline__time {
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
  font-size: 0.75rem;
}

.timeline__label strong {
  color: var(--text-primary);
  font-weight: 600;
}

.timeline__detail {
  color: var(--text-tertiary);
  font-size: 0.75rem;
  text-align: right;
}

@media (max-width: 720px) {
  .timeline__item { grid-template-columns: 1fr; gap: var(--space-1); }
  .timeline__detail { text-align: left; }
}

/* ----- Needs Attention list (Overview) ----------------------------------- */
.attention-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.attention-list__empty {
  padding: var(--space-4);
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.attention-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease-out-quart),
              background-color var(--dur-fast) var(--ease-out-quart);
}

@media (hover: hover) {
  .attention-item:hover {
    background: var(--surface-raised);
    border-color: var(--border-strong);
  }
}

.attention-item[data-severity="critical"] { border-left-color: oklch(45% 0.12 22); }
.attention-item[data-severity="high"]     { border-left-color: oklch(50% 0.12 38); }
.attention-item[data-severity="medium"]   { border-left-color: oklch(60% 0.14 92); }

.attention-item__title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9375rem;
}

.attention-item__detail {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.attention-item__chevron {
  color: var(--text-tertiary);
  font-size: 1.125rem;
}

/* ----- Status block grid (Overview "Four primary status blocks") --------- */
.status-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
}

.status-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  /* Normalize heights so cards in the same row stay flush regardless of whether
     the subtext line is short, long, or absent. */
  min-height: 124px;
}

.status-block__updated {
  /* Keep the subtext line at the bottom — every tile reserves space for it so
     ones without subtext still match height with siblings that have it. */
  margin-top: auto;
}

.status-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.status-block__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.status-block__pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: oklch(28% 0.04 var(--hue-brand));
  border: 1px solid var(--border-strong);
}

.status-block[data-state="ok"]    .status-block__pill { color: oklch(94% 0.04 155); background: oklch(28% 0.06 155); border-color: oklch(50% 0.12 155); }
.status-block[data-state="warn"]  .status-block__pill { color: oklch(94% 0.05 92);  background: oklch(30% 0.07 92);  border-color: oklch(60% 0.14 92); }
.status-block[data-state="error"] .status-block__pill { color: oklch(94% 0.03 22);  background: var(--danger-surface); border-color: oklch(45% 0.12 22); }

.status-block__metric {
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.status-block__updated {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.status-block__action {
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  color: var(--accent-hover);
  text-decoration: none;
  font-weight: 500;
}

@media (hover: hover) {
  .status-block__action:hover {
    text-decoration: underline;
  }
}

/* ----- Review stepper (Weekly Review 7-step workflow) -------------------- */
.review-stepper {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: review-step;
}

.review-step {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-4);
  align-items: start;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  counter-increment: review-step;
}

.review-step__index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 1.5px solid var(--border-strong);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.review-step__index::before {
  content: counter(review-step);
}

.review-step[data-state="complete"] {
  border-color: oklch(40% 0.06 155);
  background: oklch(20% 0.02 155);
}

.review-step[data-state="complete"] .review-step__index {
  background: oklch(28% 0.06 155);
  border-color: oklch(50% 0.12 155);
  color: oklch(94% 0.04 155);
}

.review-step[data-state="complete"] .review-step__index::before {
  content: "✓";
  font-size: 1rem;
}

.review-step[data-state="active"] {
  border-color: oklch(48% 0.08 var(--hue-brand));
  background: oklch(20% 0.03 var(--hue-brand));
}

.review-step[data-state="active"] .review-step__index {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

.review-step__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.review-step__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Small inline pill next to a step title indicating the action is gated to a
   specific role (currently only "Admin only" for the manifest-generation step,
   but generalizable). The rendered button is also disabled with the same
   reason as a tooltip. */
.review-step__role-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 16px;
  padding: 0 8px 0 6px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  background: transparent;
  border: 1px solid var(--border-subtle);
  text-transform: none;
}

/* Tiny dot to the left of the pill text — signals the state visually without
   making the pill itself a heavy color block. */
.review-step__role-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.review-step__detail {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: var(--lh-body);
}

/* Lighter, italic variant — used for the second-line "Admin role required…"
   reason that pairs with the role pill. Quiet enough not to compete with the
   primary description, loud enough to be noticed. */
.review-step__detail--muted {
  margin-top: var(--space-1);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--text-tertiary);
}

/* "Ready to review" — soft green, low-saturation. Just a state marker, not a CTA. */
.review-step__role-pill--ready {
  color: oklch(72% 0.10 155);
  border-color: oklch(40% 0.06 155);
}

/* "Blocked" — soft amber. Tells the ISSO the data prerequisite isn't met yet. */
.review-step__role-pill--blocked {
  color: oklch(74% 0.10 92);
  border-color: oklch(42% 0.06 92);
}

/* Per-step ack confirmation line — sits below the description on completed
   attestable steps. Captures the audit artifact (who/role/when/note) inline
   so the ISSO doesn't need to open a separate audit log to see who reviewed
   what during this period. */
.review-step__ack {
  margin: var(--space-2) 0 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.review-step__ack-label {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(72% 0.08 155);
  margin-right: var(--space-2);
}

.review-step__ack-role {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  color: var(--text-tertiary);
}

.review-step__ack-note {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-style: italic;
}

.review-step__ack-form {
  margin: 0;
}

/* Mark-reviewed CTA — uses the soft green tone of the ready pill so the two
   read as a coordinated pair. Compact size keeps the action column from
   stacking like a chunky toolbar. */
.review-step__ack-btn {
  height: 30px;
  min-height: 30px;
  padding: 0 var(--space-3);
  font-size: 0.8125rem;
  background: transparent;
  border-color: oklch(40% 0.06 155);
  color: oklch(78% 0.10 155);
}

.review-step__ack-btn:hover:not(:disabled) {
  background: oklch(20% 0.04 155);
  border-color: oklch(50% 0.10 155);
  color: oklch(88% 0.08 155);
}

/* "Ready" state — small accent on the step number circle is enough signal;
   no heavy left stripe. The pill on the title carries the rest. */
.review-step[data-state="ready"] .review-step__index {
  border-color: oklch(40% 0.06 155);
  color: oklch(80% 0.10 155);
}

/* "Blocked" state — slightly dimmed body, soft amber on the step number;
   no left stripe. */
.review-step[data-state="blocked"] {
  opacity: 0.78;
}

.review-step[data-state="blocked"] .review-step__index {
  border-color: oklch(42% 0.06 92);
  color: oklch(80% 0.10 92);
}

.review-step__action {
  align-self: center;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
  min-width: 180px;
}

/* Both buttons in the action column shrink to compact height — the per-step
   actions shouldn't compete with the page's primary affordances. */
.review-step__action > .btn,
.review-step__action > form > .btn {
  min-height: 32px;
  height: 32px;
  padding: 0 var(--space-3);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.review-step__action > form {
  display: flex;
}

.review-step__action > form > .btn {
  width: 100%;
}

/* ----- Finding card (Findings + POA&M kanban) --------------------------- */
.workflow-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.workflow-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.workflow-column__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.workflow-column__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.workflow-column__count {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.finding-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  font-size: 0.875rem;
  transition: border-color var(--dur-fast) var(--ease-out-quart),
              background-color var(--dur-fast) var(--ease-out-quart);
}

@media (hover: hover) {
  .finding-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-raised);
  }
}

.finding-card[data-severity="critical"] { border-left-color: oklch(45% 0.12 22); }
.finding-card[data-severity="high"]     { border-left-color: oklch(50% 0.12 38); }
.finding-card[data-severity="medium"]   { border-left-color: oklch(60% 0.14 92); }
.finding-card[data-severity="low"]      { border-left-color: oklch(50% 0.12 155); }

.finding-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.finding-card__id {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-tertiary);
}

.finding-card__title {
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

.finding-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ----- Boundary line (Codex Export) ------------------------------------- */
.boundary-line {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  padding: var(--space-2) 0;
}

.boundary-line::before,
.boundary-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--boundary), transparent);
}

.boundary-line__copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--integrity-surface);
  border: 1px solid oklch(45% 0.1 280);
  color: var(--integrity-fg);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  max-width: 60ch;
}

.boundary-line__copy::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--integrity);
}

.boundary-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4);
}

.boundary-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.boundary-column[data-side="vault"]  { border-top: 3px solid var(--accent); }
.boundary-column[data-side="codex"]  { border-top: 3px solid var(--integrity); }

.boundary-column__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.boundary-column__lead {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.boundary-column__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.boundary-column__list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: 0.875rem;
  color: var(--text-primary);
  border-bottom: 1px dashed var(--border-subtle);
}

.boundary-column__list li:last-child {
  border-bottom: none;
}

.boundary-column__list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
}

.boundary-column[data-side="vault"]  .boundary-column__list li::before { background: var(--accent); }
.boundary-column[data-side="codex"]  .boundary-column__list li::before { background: var(--integrity); }

/* ----- Section title variant (lead, with sub) --------------------------- */
.section-title--lead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.section-title--lead small {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ----- Drift family group (Checks page) -------------------------------- */
.drift-family {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.drift-family__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.drift-family__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.drift-family__counts {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ----- prefers-contrast hardening --------------------------------------- */
@media (prefers-contrast: more) {
  body { --border-subtle: oklch(50% 0.04 var(--hue-brand)); --border-strong: oklch(64% 0.04 var(--hue-brand)); }
  .severity-badge { border-width: 2px; }
}

/* =========================================================================
   Page-level primitives — promoted from per-page <style> blocks so they
   reuse the system's tokens instead of one-off rgba fallbacks. Every rule
   here was previously inlined in a .cshtml; consolidating means dark-mode
   tokens propagate correctly and there's a single owner.
   ========================================================================= */

/* ----- Two-column responsive layout used by Overview ------------------- */
.overview-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
}

@media (max-width: 960px) {
  .overview-split { grid-template-columns: 1fr; }
}

.overview-split__col {
  min-width: 0;
}

/* ----- Cadence run progress (Checks, WeeklyReview) ---------------------- */
.run-progress {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-base);
}

.run-progress__groups {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.run-progress__group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

/* OS+Vuln (Endpoint Posture) gets the lion's share of the width; Cloud is a
   single leg so it needn't be as wide. flex-grow tracks the leg count. */
.run-progress__group:nth-child(1) { flex: 2; }
.run-progress__group:nth-child(2) { flex: 1; }

.run-progress__group-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.run-progress__bar {
  display: flex;
  gap: 4px;
  height: 30px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.run-progress__seg {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--surface-overlay);
  transition: background var(--dur-base) var(--ease-out-quart),
              color var(--dur-base) var(--ease-out-quart);
}

.run-progress__seg-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
}

.run-progress__seg[data-state="pending"] {
  background: var(--surface-overlay);
}

.run-progress__seg[data-state="pending"] .run-progress__seg-label {
  opacity: 0.45;
}

.run-progress__seg[data-state="running"] {
  background: linear-gradient(90deg,
    oklch(28% 0.05 var(--hue-brand)) 0%,
    oklch(45% 0.10 var(--hue-brand)) 50%,
    oklch(28% 0.05 var(--hue-brand)) 100%);
  background-size: 200% 100%;
  animation: run-progress-shimmer 1.6s linear infinite;
}

.run-progress__seg[data-state="running"] .run-progress__seg-label {
  color: oklch(94% 0.04 var(--hue-brand));
}

.run-progress__seg[data-state="done-ok"] {
  background: oklch(40% 0.10 155);
}

.run-progress__seg[data-state="done-ok"] .run-progress__seg-label {
  color: oklch(96% 0.04 155);
}

.run-progress__seg[data-state="done-fail"] {
  background: oklch(40% 0.14 22);
}

.run-progress__seg[data-state="done-fail"] .run-progress__seg-label {
  color: oklch(96% 0.04 22);
}

/* Script crashed before producing results — distinct from a real validation
   failure (done-fail) because the validators never got to run. Amber/orange
   to signal "needs operator attention" without claiming drift was detected. */
.run-progress__seg[data-state="done-error"] {
  background: oklch(45% 0.13 60);
}

.run-progress__seg[data-state="done-error"] .run-progress__seg-label {
  color: oklch(97% 0.03 60);
}

/* Leg intentionally not run (feature off / cmdlet missing) — muted so the
   user can tell at a glance it isn't a problem. */
.run-progress__seg[data-state="done-skipped"] {
  background: var(--surface-overlay);
  border: 1px dashed var(--border-subtle);
}

.run-progress__seg[data-state="done-skipped"] .run-progress__seg-label {
  color: var(--text-tertiary);
  opacity: 0.75;
}

@keyframes run-progress-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .run-progress__seg[data-state="running"] {
    animation: none;
    background: oklch(38% 0.08 var(--hue-brand));
  }
}

.run-progress__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: 0.75rem;
}

.run-progress__elapsed {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

/* ----- Status block click-filter variant (Checks "Pass / Warn / Fail") -- */
.status-block--clickable {
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--surface-base);
  transition:
    transform var(--dur-fast) var(--ease-out-quart),
    border-color var(--dur-fast) var(--ease-out-quart);
  /* Override the global button min-height so the click-target tile keeps the
     status-block proportions instead of ballooning to 44 px. */
  min-height: 124px;
  height: auto;
}

@media (hover: hover) {
  .status-block--clickable:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
  }
}

.status-block--clickable[aria-pressed="true"] {
  border-color: oklch(48% 0.08 var(--hue-brand));
  box-shadow: 0 0 0 1px oklch(48% 0.08 var(--hue-brand));
}

.status-block--clickable:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

/* ----- Filter-active inline confirmation row (used on Checks) ----------- */
.filter-bar--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.filter-bar--inline[hidden] { display: none; }

.btn--small {
  min-height: 30px;
  height: 30px;
  padding: 0 var(--space-3);
  font-size: 0.75rem;
}

/* When a filter is active, hide rows that don't match. Rules are written
   per-bucket so the table still renders rapidly without JS work. */
#check-results[data-filter-active="pass"]    tr[data-status]:not([data-status="pass"])    { display: none; }
#check-results[data-filter-active="fail"]    tr[data-status]:not([data-status="fail"])    { display: none; }
#check-results[data-filter-active="warn"]    tr[data-status]:not([data-status="warn"])    { display: none; }
#check-results[data-filter-active="unknown"] tr[data-status]:not([data-status="unknown"]) { display: none; }
#check-results[data-filter-active="pass"]    section.drift-family[data-pass="0"]    { display: none; }
#check-results[data-filter-active="fail"]    section.drift-family[data-fail="0"]    { display: none; }
#check-results[data-filter-active="warn"]    section.drift-family[data-warn="0"]    { display: none; }
#check-results[data-filter-active="unknown"] section.drift-family[data-unknown="0"] { display: none; }

/* ----- Clickable table row (Events) ------------------------------------ */
tr.row-clickable {
  cursor: pointer;
}

tr.row-clickable:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: -2px;
}

.row-clickable__id {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
}

@media (hover: hover) {
  .row-clickable__id:hover {
    color: var(--accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

/* Privileged table rows — quiet warning tint. */
.row-privileged td {
  background: oklch(22% 0.03 38 / 0.4);
}

.row-privileged td:first-child {
  box-shadow: inset 2px 0 0 oklch(60% 0.14 38);
}

.numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ----- Event detail layout --------------------------------------------- */
.breadcrumb {
  margin: 0 0 var(--space-2) 0;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.evt-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-4);
}

@media (max-width: 960px) {
  .evt-detail { grid-template-columns: 1fr; }
}

.evt-detail__col--side {
  padding-left: var(--space-6);
  border-left: 1px solid var(--border-subtle);
}

@media (max-width: 960px) {
  .evt-detail__col--side {
    padding-left: 0;
    padding-top: var(--space-6);
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
  }
}

.kv {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 4px var(--space-4);
  margin: 0;
  padding: 0;
}

.kv dt {
  color: var(--text-tertiary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 0;
}

.kv dd {
  margin: 0;
  padding: 4px 0;
  font-size: 0.875rem;
  color: var(--text-primary);
  word-break: break-word;
}

.evt-cmdline {
  display: block;
  max-height: 280px;
  overflow: auto;
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) 0 0 0;
  background: var(--surface-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}

.evt-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.evt-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.evt-link-list li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.875rem;
}

.evt-link-list li:last-child {
  border-bottom: 0;
}

.evt-link-list a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.evt-link-list a:hover strong,
.evt-link-list a:focus-visible strong {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ----- Sign-weekly-review panel (WeeklyReview canonical sign-off) ----- */
.v11-panel {
  margin-top: var(--space-5);
}

.v11-checklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 460px;
  overflow-y: auto;
  padding: var(--space-2);
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.v11-checklist__row {
  display: grid;
  grid-template-columns: 24px 110px minmax(0, 1fr) 130px;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-out-quart);
}

@media (hover: hover) {
  .v11-checklist__row:hover {
    background: oklch(100% 0 0 / 0.03);
  }
}

.v11-checklist__row[data-stale="true"] {
  background: oklch(28% 0.04 92 / 0.4);
  border-left-color: oklch(60% 0.14 92);
  padding-left: calc(var(--space-3) - 2px);
}

.v11-checklist__id code {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.v11-checklist__title {
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v11-checklist__title small {
  color: var(--text-tertiary);
  margin-left: var(--space-2);
}

.v11-checklist__age {
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.v11-checklist__hint {
  grid-column: 3 / span 2;
  font-size: 0.75rem;
  padding-left: 0;
}

.v11-acks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.v11-acks__row {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-base);
}

.v11-acks__head {
  font-size: 0.8125rem;
  margin-bottom: var(--space-2);
}

.v11-acks__id {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.v11-acks__meta {
  font-size: 0.75rem;
}

.v11-acks__inputs {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-3);
}

.v11-acks__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8125rem;
  margin: 0;
}

.v11-acks__field span {
  color: var(--text-tertiary);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.v11-acks__field input,
.v11-acks__field select {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

@media (max-width: 720px) {
  .v11-acks__inputs { grid-template-columns: 1fr; }
}

/* ----- Eyebrow above the page title (orientation aid) ------------------ */
.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.page-eyebrow::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--text-tertiary);
}

/* ----- Zebra striping for dense audit tables --------------------------- */
.table-wrap--zebra tbody tr:nth-child(even) td {
  background: oklch(100% 0 0 / 0.012);
}

@media (hover: hover) {
  .table-wrap--zebra tbody tr:hover td {
    background: oklch(100% 0 0 / 0.04);
  }
}

/* ----- Boundary callout — a smaller version of the boundary-line copy
   for placement on Settings / Health where the boundary statement is a
   reinforcement aside, not the main canvas. */
.boundary-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--integrity-surface);
  border: 1px solid oklch(45% 0.10 280);
  color: var(--integrity-fg);
}

.boundary-callout__mark {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: oklch(38% 0.10 280);
  border: 1px solid oklch(50% 0.10 280);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--integrity);
  line-height: 1;
}

.boundary-callout__copy {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.boundary-callout__copy strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--integrity);
  margin-bottom: 2px;
}

/* ----- Segmented control (used by Assets/Poam kind filters + similar) -- */
.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--surface-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.segmented .btn,
.segmented button {
  min-height: 30px;
  height: 30px;
  padding: 0 var(--space-3);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

@media (hover: hover) {
  .segmented .btn:hover:not(:disabled),
  .segmented button:hover:not(:disabled) {
    background: oklch(100% 0 0 / 0.04);
    color: var(--text-primary);
    border-color: transparent;
  }
}

.segmented .btn[aria-pressed="true"],
.segmented .btn--active,
.segmented button[aria-pressed="true"] {
  background: var(--surface-overlay);
  color: var(--text-primary);
  border-color: var(--border-strong);
  font-weight: 600;
}

/* ----- Section spacing utilities — replace ad-hoc inline style="margin…" */
.section--spaced { margin-bottom: var(--space-8); }

/* ----- Disposition disclosure form (Findings table) ------------------- */
.disposition {
  margin: 0;
}

.disposition__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-deep);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.disposition__summary::-webkit-details-marker { display: none; }

.disposition__summary::before {
  content: "▸";
  color: var(--text-tertiary);
  font-size: 0.625rem;
  transition: transform var(--dur-fast) var(--ease-out-quart);
}

.disposition[open] .disposition__summary::before {
  transform: rotate(90deg);
}

@media (hover: hover) {
  .disposition__summary:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
  }
}

.disposition__summary:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

.disposition__summary-label {
  font-weight: 600;
  color: var(--text-primary);
}

.disposition__summary-hint {
  color: var(--text-tertiary);
  font-size: 0.6875rem;
}

.disposition__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  width: min(720px, 100%);
}

.disposition__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.disposition__field--full { grid-column: 1 / -1; }

.disposition__field label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.disposition__field label small {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-tertiary);
  margin-left: var(--space-1);
}

.disposition__field input,
.disposition__field select,
.disposition__field textarea {
  margin: 0;
  width: 100%;
}

.disposition__actions {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

@media (max-width: 720px) {
  .disposition__form { grid-template-columns: 1fr; }
}

/* ----- Check ID secondary line (technical-checks family table) -------- */
.check-id {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}

/* ----- Print rules (auditor-friendly attestation export) --------------- */
@media print {
  .app-sidebar,
  .command-strip,
  .ambient-footer,
  .app-mobile-nav-toggle,
  .skip-link,
  .run-panel__actions,
  .form-actions {
    display: none !important;
  }

  .app-shell {
    grid-template-columns: 1fr !important;
  }

  body.app-body {
    background: white;
    color: black;
  }

  .panel,
  .card,
  .status-block,
  .review-step,
  .assurance-state {
    background: white !important;
    color: black !important;
    border-color: #888 !important;
    page-break-inside: avoid;
  }

  .severity-badge,
  .control-pill,
  .health-card__pill,
  .status-block__pill {
    color: black !important;
    background: white !important;
    border: 1px solid #888 !important;
  }

  .hash-chip__copy { display: none; }

  a {
    color: black !important;
    text-decoration: none;
  }
}

/* =========================================================================
   Intake Suite surface (customer-facing /intake pages)
   Inspired by mactech-design vivid mood + cyan palette tokens.
   ========================================================================= */

.intake-suite {
  --mt-bg: #06070d;
  --mt-bg-2: #0a0c16;
  --mt-bg-3: #0e1120;
  --mt-surface-1: rgb(255 255 255 / 0.022);
  --mt-surface-2: rgb(255 255 255 / 0.04);
  --mt-surface-3: rgb(255 255 255 / 0.06);
  --mt-hairline: rgb(255 255 255 / 0.08);
  --mt-hairline-2: rgb(255 255 255 / 0.14);
  --mt-text: #f4f6fb;
  --mt-text-2: #b7bccb;
  --mt-text-3: #7c8195;
  --mt-accent: #00e5ff;
  --mt-accent-2: #7c5cff;
  --mt-accent-3: #ff5bd0;
  --mt-on-accent: #04121a;
  --mt-success: #74f094;
  --mt-warning: #ffb454;
  --mt-danger: #ff6b8a;
  --mt-glow: rgb(0 229 255 / 0.38);
  --mt-soft-accent: rgb(0 229 255 / 0.08);
}

.intake-shell {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-2);
  margin-bottom: var(--space-8);
}

.intake-hero {
  border: 1px solid var(--mt-hairline);
  border-radius: 18px;
  padding: var(--space-8) var(--space-8);
  background:
    radial-gradient(900px 420px at 0% -8%, rgb(0 229 255 / 0.14), transparent 58%),
    radial-gradient(900px 420px at 100% -15%, rgb(124 92 255 / 0.14), transparent 56%),
    linear-gradient(180deg, var(--mt-bg-3), var(--mt-bg-2));
  box-shadow: 0 20px 38px oklch(0% 0 0 / 0.34);
}

.intake-hero__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mt-text-3);
}

.intake-hero__title {
  margin: 0;
  font-size: 2rem;
  color: var(--mt-text);
  letter-spacing: -0.015em;
}

.intake-hero__lede {
  margin: var(--space-4) 0 0;
  max-width: 72ch;
  color: var(--mt-text-2);
  font-size: 1rem;
  line-height: 1.6;
}

.intake-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.intake-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--mt-hairline-2);
  background: var(--mt-surface-2);
  color: var(--mt-text-2);
  font-size: 0.75rem;
  font-weight: 600;
}

.intake-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mt-accent);
  box-shadow: 0 0 0 3px rgb(0 229 255 / 0.18);
}

.intake-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
}

@media (max-width: 980px) {
  .intake-grid {
    grid-template-columns: 1fr;
  }
}

.intake-card {
  border: 1px solid var(--mt-hairline);
  border-radius: 16px;
  padding: var(--space-6) var(--space-6);
  background: linear-gradient(180deg, var(--mt-surface-2), var(--mt-surface-1));
  box-shadow: 0 14px 30px oklch(0% 0 0 / 0.18);
}

.intake-card__title {
  margin: 0 0 var(--space-3);
  color: var(--mt-text);
  font-size: 1.2rem;
}

.intake-card__copy {
  margin: 0 0 var(--space-5);
  color: var(--mt-text-2);
  font-size: 0.95rem;
  line-height: 1.55;
}

.intake-instruction-list {
  margin: 0;
  padding-left: var(--space-4);
  color: var(--mt-text-2);
  display: grid;
  gap: var(--space-2);
  font-size: 0.875rem;
}

.intake-trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.intake-trust-list li {
  border: 1px solid var(--mt-hairline);
  border-radius: 10px;
  background: var(--mt-surface-1);
  padding: var(--space-3) var(--space-4);
  color: var(--mt-text-2);
  font-size: 0.8125rem;
}

.intake-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}

.intake-form-grid label,
.intake-card label {
  color: var(--mt-text-2);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.intake-card input[type="text"],
.intake-card select {
  height: 44px;
  padding: 0 var(--space-3);
  border-radius: 10px;
  border: 1px solid var(--mt-hairline-2);
  background: linear-gradient(180deg, rgb(8 12 20 / 0.95), rgb(6 10 16 / 0.95));
  color: var(--mt-text);
  font-size: 0.9rem;
}

.intake-card input[type="text"]::placeholder {
  color: var(--mt-text-3);
}

.intake-card input[type="text"]:focus-visible,
.intake-card select:focus-visible,
.intake-card input[type="file"]:focus-visible {
  outline: 2px solid rgb(0 229 255 / 0.75);
  outline-offset: 2px;
}

.intake-card input[type="file"] {
  width: 100%;
  padding: var(--space-3);
  border: 1px dashed var(--mt-hairline-2);
  border-radius: 10px;
  background: rgb(6 12 20 / 0.7);
  color: var(--mt-text-2);
}

.intake-card input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  border: 1px solid var(--mt-hairline-2);
  border-radius: 8px;
  padding: 0.45rem 0.65rem;
  background: rgb(255 255 255 / 0.04);
  color: var(--mt-text);
  font-weight: 600;
  cursor: pointer;
}

.intake-note {
  margin-top: var(--space-3);
  color: var(--mt-text-3);
  font-size: 0.75rem;
}

.intake-card .inline-filter {
  margin: var(--space-3) 0 var(--space-4);
  padding: var(--space-3);
  border-radius: 10px;
  border: 1px solid var(--mt-hairline-2);
  background: rgb(8 12 20 / 0.62);
}

.intake-card .inline-filter__field span {
  color: var(--mt-text-3);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn--intake-primary {
  background: linear-gradient(135deg, var(--mt-accent), var(--mt-accent-2));
  color: var(--mt-on-accent);
  border: 1px solid transparent;
  box-shadow: 0 0 24px var(--mt-glow);
  min-height: 46px;
  padding: 0 var(--space-6);
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.btn--intake-primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

.intake-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-5);
}

.intake-kpi {
  border: 1px solid var(--mt-hairline);
  border-radius: 14px;
  padding: var(--space-5);
  background: var(--mt-surface-1);
  min-height: 176px;
  display: flex;
  flex-direction: column;
}

.intake-kpi__label {
  margin: 0;
  color: var(--mt-text-3);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

.intake-kpi__value {
  margin: var(--space-2) 0 0;
  font-size: 1.9rem;
  color: var(--mt-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.intake-kpi__detail {
  margin: var(--space-3) 0 0;
  color: var(--mt-text-2);
  font-size: 0.86rem;
  line-height: 1.45;
  margin-top: auto;
}

.intake-kpi[data-tone="danger"] .intake-kpi__value {
  color: var(--mt-danger);
}

.intake-kpi[data-tone="warn"] .intake-kpi__value {
  color: var(--mt-warning);
}

.intake-kpi[data-tone="ok"] .intake-kpi__value {
  color: var(--mt-success);
}

@media (max-width: 980px) {
  .intake-hero {
    padding: var(--space-6) var(--space-6);
  }

  .intake-card {
    padding: var(--space-5) var(--space-5);
  }

  .intake-hero__title {
    font-size: 1.65rem;
  }
}

/* ───── Welcome (pre-auth auditor surface) ──────────────────────────────
   Re-skinned in alignment with DESIGN.md anti-rules: no purple gradients,
   no glassmorphism. Uses the same OKLCH token system as the main shell. */
.welcome-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-deep);
  color: var(--text-primary);
}
.welcome-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-base);
}
.welcome-topbar__brand { display: flex; align-items: center; gap: var(--space-3); }
.welcome-topbar__brand-text { display: flex; flex-direction: column; }
.welcome-topbar__title { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
.welcome-topbar__subtitle {
  font-size: 0.6875rem; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.welcome-topbar__pill {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--warning);
  border: 1px solid oklch(50% 0.1 92);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: var(--warning-surface);
}
.welcome-main { flex: 1; display: flex; justify-content: center; padding: var(--space-8) var(--space-6); }
.welcome-container {
  width: 100%; max-width: 880px;
  display: flex; flex-direction: column; gap: var(--space-6);
}
.welcome-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-base);
  color: var(--text-tertiary);
  font-size: 0.75rem;
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: space-between;
}
.welcome-footer code { color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.7rem; }
.welcome-hero { padding: var(--space-6); }
.welcome-hero__title {
  font-size: 1.75rem; line-height: var(--lh-tight);
  margin: var(--space-3) 0; color: var(--text-primary);
}
.welcome-hero__lede { margin: 0; font-size: 1rem; line-height: var(--lh-body); max-width: 70ch; }
.welcome-hero__cta {
  margin-top: var(--space-5);
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start;
}
.welcome-hero__cta-meta { font-size: 0.8125rem; line-height: var(--lh-body); max-width: 56ch; }
.welcome-list {
  margin: 0; padding-left: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  font-size: 0.875rem; line-height: var(--lh-body); color: var(--text-primary);
}
.welcome-list li::marker { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 0.8125rem; }
.welcome-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}
.welcome-cards .panel { margin: 0; }
@media (max-width: 720px) {
  .welcome-topbar { flex-wrap: wrap; padding: var(--space-4); }
  .welcome-topbar__pill { margin-left: 0; }
  .welcome-main { padding: var(--space-6) var(--space-3); }
  .welcome-hero__title { font-size: 1.45rem; }
}

/* ===================================================================
   Adjudication surface (/Checks) — research-brief leverage #1/#2/#4/#5/#6.
   All token-driven; no new colors, no glass, no glow. Reuses the existing
   semantic ramp (success/warning/danger) for state only.
   =================================================================== */

/* ── Latest-run header (leverage #2 + #6) ─────────────────────────── */
.run-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
}
.run-header[data-freshness="fresh"] { border-left-color: var(--success); }
.run-header[data-freshness="stale"] { border-left-color: var(--warning); }
.run-header__title {
  margin: 0 0 var(--space-1);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.run-header__meta { margin: 0; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.run-header__runid {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-primary);
  background: var(--surface-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  cursor: pointer;
}
@media (hover: hover) { .run-header__runid:hover { border-color: var(--border-strong); } }
.run-header__runid:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.run-header__runid[data-copied="ok"]::after { content: " ✓ copied"; color: var(--success); }
.run-header__runid[data-copied="fail"]::after { content: " ✗"; color: var(--danger); }
.run-header__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.run-header__freshness {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Freshness carries an icon glyph as well as color so state isn't color-only. */
.run-header__freshness[data-state="fresh"]::before { content: "● "; }
.run-header__freshness[data-state="stale"]::before { content: "▲ "; }
.run-header__freshness[data-state="fresh"] { color: oklch(94% 0.04 155); background: var(--success-surface); border-color: oklch(50% 0.12 155); }
.run-header__freshness[data-state="stale"] { color: oklch(94% 0.05 92); background: var(--warning-surface); border-color: oklch(60% 0.14 92); }
.run-header__leg {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-deep);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.run-header__leg strong { color: var(--text-primary); letter-spacing: 0.04em; }
.run-header__leg[data-tone="ok"]    { border-color: oklch(50% 0.12 155); }
.run-header__leg[data-tone="warn"]  { border-color: oklch(60% 0.14 92); }
.run-header__leg[data-tone="error"] { border-color: oklch(45% 0.12 22); }

/* ── Run history disclosure (folds the old standalone runs table) ─── */
.run-history { margin: 0 0 var(--space-8); }
.run-history__summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  list-style: none;
  user-select: none;
  padding: var(--space-2) 0;
}
.run-history__summary::-webkit-details-marker { display: none; }
.run-history__summary::before { content: "▸ "; color: var(--text-tertiary); }
.run-history[open] .run-history__summary::before { content: "▾ "; }
.run-history__summary:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }

/* ── Evidence-source chip + drill-down (leverage #5, §11.2) ───────── */
.evidence-source {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}
@media (hover: hover) { .evidence-source:hover { border-color: var(--border-strong); color: var(--text-primary); } }
.evidence-source:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.evidence-source[data-source="vuln"]     { border-color: oklch(45% 0.1 22); }
.evidence-source[data-source="endpoint"] { border-color: oklch(50% 0.1 280); }
.evidence-source[data-source="audit"]    { border-color: oklch(50% 0.08 var(--hue-brand)); }
.evidence-source[data-source="config"]   { border-color: var(--border-subtle); }

/* ── Inline quiet action link (used in adjudicate cell + drawer) ──── */
.btn-link {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
@media (hover: hover) { .btn-link:hover { color: var(--accent); } }
.btn-link:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }

.disposition__form--compact { width: min(440px, 100%); }
.adjudicate-cell { white-space: nowrap; }

/* ── Per-control unified drawer (leverage #4, read-only) ──────────── */
.control-drawer-row > td { background: var(--surface-deep); padding: 0; }
.control-drawer { margin: 0; }
.control-drawer__summary {
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  list-style: none;
  user-select: none;
  padding: var(--space-2) var(--space-4);
}
.control-drawer__summary::-webkit-details-marker { display: none; }
.control-drawer__summary::before { content: "▸ "; color: var(--text-tertiary); }
.control-drawer[open] .control-drawer__summary::before { content: "▾ "; }
.control-drawer__summary:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: -2px; }
.control-drawer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  padding: 0 var(--space-4) var(--space-4);
}
.control-drawer__control {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}
.control-drawer__head { margin-bottom: var(--space-2); }
.control-drawer__facets {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  font-size: 0.75rem;
}
.control-drawer__facets dt {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.625rem;
  color: var(--text-tertiary);
  align-self: center;
}
.control-drawer__facets dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
}
@media (max-width: 720px) {
  .control-drawer__facets { grid-template-columns: 1fr; gap: 0; }
  .control-drawer__facets dt { margin-top: var(--space-2); }
}