/* Tokens transcribed directly from DESIGN.md — do not restate a value here that DESIGN.md doesn't
   already have; if a token is wrong, fix DESIGN.md first, then this file.

   There is still no dark *mode* — the content area is one canonical light aesthetic. What the third
   pass added is dark *chrome*: the header and nav rail are a deliberate near-black frame around
   that light content, not a theme the rest of the app can be switched into. The `--color-chrome-*`
   tokens exist only for those two surfaces.

   2026-09-10, three passes:
   1. the neutral ramp warmed (cool blue-grey -> warm ivory/parchment), structural radius grew
      (12px -> 16px), and elevation gained a real shadow instead of relying on borders alone;
   2. structure — queue/bucket groups, a vertical processing checklist, a donut, a review-queue bar;
   3. identity — dark chrome, ink primary buttons, a 32px display heading, loading skeletons.
   Severity, outcome and AI accents are untouched across all three: they carry meaning, and only the
   parts carrying mood were allowed to move. See DESIGN.md's own revision notes. */
:root {
  color-scheme: light;

  --color-canvas: #f8f6f1;
  --color-surface: #ffffff;
  --color-surface-subtle: #eeeae0;
  --color-surface-container: #e8e2d5;
  --color-border: #d8d2c6;
  --color-border-strong: #6e6555;

  --color-text: #1c1a17;
  --color-text-secondary: #4a453d;
  --color-text-muted: #6e6555;

  --color-action: #33608f;
  --color-action-hover: #284c72;
  --color-action-active: #1f3b57;
  --color-action-tint: #e8edf2;
  --color-action-contrast: #ffffff;

  /* Ink: the fill of a primary button. Separated from the action accent in the third pass — the
     accent stays the *semantic* marker of interactivity (links, focus rings, the active nav pill,
     progress), but a committing button reads as a deliberate, weighty object in ink rather than as
     a coloured surface. Harvey's own primary buttons are near-black for the same reason. */
  --color-ink: #23201d;
  --color-ink-hover: #35302b;
  --color-ink-active: #14120f;

  /* Dark chrome: the app header and navigation rail. An L-shaped dark frame around the warm
     content area — the shape Harvey's Command Center and Contract Intelligence both use. Warm
     near-black rather than neutral black, so it belongs to the same palette as the ivory canvas
     it frames. Every value below was contrast-checked against `--color-chrome`. */
  --color-chrome: #1f1c19;
  --color-chrome-raised: #2a2622;
  --color-chrome-selected: #3a352f;
  --color-chrome-text: #ece7de;
  --color-chrome-text-muted: #a89f92;
  --color-chrome-border: #34302b;
  /* The action accent measures 2.59:1 on chrome — below the 3:1 a focus indicator needs. This is
     DESIGN.md's own `inverse-primary`, which is what an inverse is for: 9.99:1 on the same ground. */
  --color-focus-inverse: #9fcaff;

  --color-ai: #79719d;
  --color-ai-text: #5f5882;
  --color-ai-tint: #f1eef6;

  --color-error: #ba1a1a;
  --color-error-bg: #ffdad6;

  --color-critical: #ba1a1a;
  --color-critical-bg: #ffdad6;
  --color-critical-border: #f6c4c0;
  --color-high: #c2410c;
  --color-high-bg: #fef0e7;
  --color-high-border: #f4cdb8;
  --color-medium: #b45309;
  --color-medium-bg: #fef6e7;
  --color-medium-border: #f2ddb4;
  --color-low: #1e7a46;
  --color-low-bg: #e8f5ec;
  --color-low-border: #c2e6cc;
  --color-info: #3f5468;
  --color-info-bg: #edf1f5;
  --color-info-border: #d8d2c6;

  --color-requires-review: #525c6b;
  --color-requires-review-bg: #eeeae0;

  --font-headline: "Newsreader", serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --radius-control: 0.5rem;
  --radius-default: 0.625rem;
  --radius-panel: 1rem;
  --radius-pill: 9999px;

  /* Elevation: a soft shadow per level, derived from --color-text so it reads warm rather than
     the cool near-black a generic rgba(0,0,0,...) shadow would cast on this canvas (DESIGN.md
     "Elevation and depth"). Level 0 (bare canvas) has no shadow at all. */
  --shadow-xs: 0 1px 2px rgba(28, 26, 23, 0.05);
  --shadow-sm: 0 1px 3px rgba(28, 26, 23, 0.07), 0 1px 2px rgba(28, 26, 23, 0.04);
  --shadow-md: 0 4px 16px rgba(28, 26, 23, 0.08), 0 1px 2px rgba(28, 26, 23, 0.04);
  --shadow-lg: 0 16px 40px rgba(28, 26, 23, 0.14);
  --color-overlay-backdrop: rgba(28, 26, 23, 0.35);

  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;

  --sidebar-width: 260px;
  --inspector-width: 420px;
  --header-height: 80px;

  --focus-ring: 2px solid var(--color-action);
}

* {
  box-sizing: border-box;
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
  }

  .nav-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(236, 231, 222, 0.16) transparent;
  }
}

/* Modern, subtle scrollbars across the application to eliminate bulky OS defaults and arrow buttons */
*::-webkit-scrollbar,
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
  background-color: var(--color-border-strong);
  border-radius: var(--radius-pill);
}

*::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-secondary);
}

*::-webkit-scrollbar-button,
::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:double-button,
*::-webkit-scrollbar-button:start:decrement,
*::-webkit-scrollbar-button:end:increment,
*::-webkit-scrollbar-button:vertical:decrement,
*::-webkit-scrollbar-button:vertical:increment,
*::-webkit-scrollbar-button:horizontal:decrement,
*::-webkit-scrollbar-button:horizontal:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

*::-webkit-scrollbar-corner,
::-webkit-scrollbar-corner {
  background: transparent;
}

/* The browser's own UA stylesheet hides [hidden] elements at the same specificity as a class
   selector, so any container class below that sets its own `display` (`.workbench`,
   `.inspector-pane`, etc.) silently wins the cascade tie and renders anyway even while `hidden` is
   set. This single override restores `hidden` as the actual authority app.js/source-viewer.js rely
   on to show/hide the login view, the shell, and the inspector pane. */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  background: var(--color-canvas);
  color: var(--color-text);
  line-height: 1.5;
}

h1,
h2,
h3 {
  font-family: var(--font-headline);
  color: var(--color-text);
  margin: 0 0 var(--space-8);
}

/* Display scale (third pass). A page title at 24px reads as a row of dense UI; at 32 it reads as
   the title of a document, which is the register this product is written in everywhere else. */
h1 {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.015em;
}

h2 {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

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

/* The default for a bare, unstyled `<a>` — which in practice means an entity's own name used as
   its link (a table's contract/case row, a workspace card's title): it reads first as *that
   record's identity* and second as a link, so it stays near-black like the heading it effectively
   is, with an underline appearing only on hover to confirm it is clickable. The action accent
   remains reserved for a link that is genuinely a secondary, in-sentence navigational action rather
   than a record's own name — "Show all" (`.search-summary`) — and for every component with its own
   navigational role (breadcrumbs, tabs, the nav rail), which sets its own color and wins on
   specificity regardless of this default. */
a {
  color: var(--color-text);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.search-summary a {
  color: var(--color-action);
}

.code-inline {
  font-family: var(--font-mono);
  font-size: 11px;
}

/* --- Skip-to-content link (DESIGN.md Accessibility) --- */

.skip-link {
  position: absolute;
  top: -48px;
  left: 0;
  z-index: 100;
  background: var(--color-action);
  color: var(--color-action-contrast);
  padding: var(--space-8) var(--space-16);
  border-radius: 0 0 var(--radius-control) 0;
  text-decoration: none;
  transition: top 0.15s ease-out;
}

.skip-link:focus {
  top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

/* --- App shell / header --- */

.app-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--space-16) max(var(--space-40), calc((100% - 1180px) / 2)) var(--space-12);
  background: var(--color-canvas);
  border-bottom: none;
  flex: 0 0 auto;
  gap: var(--space-24);
  min-height: var(--header-height);
  box-sizing: border-box;
}

.header-titles {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  line-height: 1.2;
}

.breadcrumb-link {
  color: var(--color-text-muted);
  text-decoration: none !important;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.breadcrumb-link:hover {
  color: var(--color-text);
  text-decoration: none !important;
}

.breadcrumb-separator {
  color: var(--color-border-strong);
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  opacity: 0.5;
}

.breadcrumb-chevron {
  width: 12px;
  height: 12px;
}

.breadcrumb-current {
  color: var(--color-text-secondary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-section-title {
  font-family: var(--font-headline);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-actions-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex: 0 0 auto;
  min-width: 0;
  padding-bottom: 2px;
}

/* Repository search now lives beside notifications rather than in the navigation rail. It uses the
   same compact, quiet control treatment as the header's existing utility actions. */
.header-search {
  display: flex;
  align-items: center;
  width: clamp(12rem, 20vw, 19rem);
  height: 36px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-xs);
}

.header-search:focus-within {
  border-color: var(--color-action);
  box-shadow: 0 0 0 2px var(--color-action-tint);
}

.header-search input {
  min-width: 0;
  flex: 1 1 auto;
  height: 100%;
  padding: 0 0 0 var(--space-12);
  color: var(--color-text);
  border: none;
  background: transparent;
  box-shadow: none;
}

.header-search input:focus-visible {
  outline: none;
}

.header-search input::placeholder {
  color: var(--color-text-muted);
}

.header-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  border: none;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.header-search-submit:hover {
  background: var(--color-surface-subtle);
  color: var(--color-action);
}

.header-user {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* --- User Profile Pill Trigger --- */
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  height: 38px;
  padding: 3px 8px 3px 4px;
  border-radius: var(--radius-control);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--color-text);
  font-family: var(--font-body);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.user-pill:hover,
.user-pill:focus-visible {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 1px 3px rgba(28, 26, 23, 0.05);
  outline: none;
}

.user-pill.is-open {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  box-shadow: 0 1px 4px rgba(28, 26, 23, 0.08);
}

/* Bespoke Monogram Squircle Avatar (Harmonized with Dark Chrome and "R" Brand) */
.user-pill-avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: var(--radius-control);
  background: var(--color-chrome);
  color: var(--color-chrome-text);
  border: 1px solid var(--color-chrome-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

.user-pill-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.2;
  min-width: 0;
}

.user-pill-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.user-pill-role {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.user-pill-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  margin-left: 2px;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), color 0.15s ease;
}

.user-pill-chevron-icon {
  width: 12px;
  height: 12px;
}

.user-pill:hover .user-pill-chevron,
.user-pill.is-open .user-pill-chevron {
  color: var(--color-text);
}

.user-pill.is-open .user-pill-chevron {
  transform: rotate(180deg);
}

/* User Menu Dropdown Popover (Refined, minimal, elegant) */
.user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-default);
  box-shadow: 0 4px 20px rgba(28, 26, 23, 0.08), 0 1px 3px rgba(28, 26, 23, 0.04);
  padding: 4px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 1px;
  transform-origin: top right;
  animation: userDropdownEnter 0.14s cubic-bezier(0.2, 0, 0, 1);
}

@keyframes userDropdownEnter {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.user-dropdown[hidden] {
  display: none !important;
}

.user-dropdown-divider {
  height: 1px;
  background: rgba(216, 210, 198, 0.6);
  margin: 3px 2px;
  border: none;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: 34px;
  padding: 0 10px;
  border-radius: var(--radius-control);
  color: var(--color-text);
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  border: none;
  background: transparent;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

.user-dropdown-item:hover,
.user-dropdown-item:focus-visible {
  background: var(--color-surface-subtle);
  color: var(--color-text);
  outline: none;
}

.user-dropdown-item-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s ease;
}

.user-dropdown-item-icon svg {
  width: 16px;
  height: 16px;
}

.user-dropdown-item:hover .user-dropdown-item-icon,
.user-dropdown-item:focus-visible .user-dropdown-item-icon {
  color: var(--color-text);
}

.user-dropdown-item-text {
  flex: 1 1 auto;
}

.user-dropdown-logout {
  color: var(--color-text);
}

.user-dropdown-logout .user-dropdown-item-icon {
  color: var(--color-critical);
}

.user-dropdown-logout:hover,
.user-dropdown-logout:focus-visible {
  background: rgba(186, 26, 26, 0.08) !important;
  color: var(--color-critical) !important;
}

.user-dropdown-logout:hover .user-dropdown-item-icon,
.user-dropdown-logout:focus-visible .user-dropdown-item-icon {
  color: var(--color-critical) !important;
}

/* --- Notification bell (ENT-22): same header row as the user pill, same popover shape as its
   dropdown, so the two read as one family of header controls rather than two different ones. --- */

.header-notifications {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.notifications-bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-chrome-text-muted);
  cursor: pointer;
}

.notifications-bell-btn:hover,
.notifications-bell-btn.is-open {
  background: var(--color-chrome-raised);
  color: var(--color-chrome-text);
}

.notifications-unread-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: var(--radius-pill);
  background: var(--color-critical);
  color: #fff;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.notifications-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 360px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-default);
  box-shadow: var(--shadow-md);
  z-index: 1000;
}

.notifications-panel[hidden] {
  display: none !important;
}

.notifications-panel-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--space-16);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.notifications-panel-header h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.notifications-panel-body {
  padding: var(--space-12) var(--space-16);
}

.notifications-empty {
  padding: var(--space-16) 0;
  text-align: center;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border);
}

.notification-item-icon {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item-main {
  flex: 1 1 auto;
  min-width: 0;
}

.notification-item-unread .notification-item-title {
  font-weight: 600;
}

.notification-item-type {
  margin: 0 0 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.notification-item-title {
  display: block;
  font-size: 13px;
  color: var(--color-text);
  text-decoration: none;
}

a.notification-item-title:hover {
  color: var(--color-action);
}

.notification-item-body {
  margin: 2px 0 0;
  font-size: 12px;
}

.app-header :focus-visible,
.nav-pane :focus-visible {
  outline: 2px solid var(--color-focus-inverse);
  outline-offset: 2px;
}

.nav-pane :focus-visible {
  outline: 2px solid var(--color-focus-inverse);
  outline-offset: 2px;
}

.login-brand {
  text-align: center;
  margin-bottom: var(--space-20);
}

.login-brand-title {
  font-family: var(--font-headline);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.015em;
}

/* --- Harvey-inspired Redline Login Page --- */
body.is-auth-page,
body:has(.login-canvas:not([hidden])) {
  background: #0d0d0e !important;
  overflow: hidden !important;
}

body.is-auth-page #main-content {
  background: #0d0d0e !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100vw !important;
  width: 100vw !important;
  height: 100vh !important;
}

#login-view,
#invitation-view,
.login-canvas {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: var(--space-32) var(--space-20) !important;
  background: #0d0d0e !important;
  color: #ffffff;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  overflow-y: auto;
  box-sizing: border-box;
}

#login-view[hidden],
#invitation-view[hidden],
.login-canvas[hidden] {
  display: none !important;
}

.login-container {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.login-logo-mark {
  font-family: var(--font-headline);
  font-size: 38px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.login-logo-r {
  color: #e53935;
}

.login-canvas h1 {
  font-family: var(--font-headline);
  font-size: 30px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-8);
  line-height: 1.2;
}

.login-subtitle {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 var(--space-32);
  max-width: 320px;
}

.login-canvas form {
  width: 100%;
  text-align: left;
}

.login-canvas .field {
  margin-bottom: var(--space-16);
}

.login-canvas label {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: var(--space-6);
  display: block;
}

.login-canvas input[type="email"],
.login-canvas input[type="password"],
.login-canvas input[type="text"] {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-control);
  color: #ffffff;
  font-size: 14px;
  padding: 0 var(--space-16);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.login-canvas input[type="email"]::placeholder,
.login-canvas input[type="password"]::placeholder,
.login-canvas input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.login-canvas input[type="email"]:focus,
.login-canvas input[type="password"]:focus,
.login-canvas input[type="text"]:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.5);
  outline: 2px solid var(--color-focus-inverse);
  outline-offset: 2px;
  box-shadow: none;
}

.login-canvas .field-help {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  margin-top: var(--space-6);
}

.login-canvas .btn-continue {
  /* The one deliberate exception to `.btn-primary` being content-width by default (see the base
     `.btn` rule): a full-bleed submit button is the correct, expected shape for an auth form. */
  width: 100%;
  margin-top: var(--space-12);
  height: 44px;
  background: #ffffff !important;
  color: #0e0e0e !important;
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-control);
  border: none;
  width: 100%;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-canvas .btn-continue:hover {
  background: #ededed !important;
}

.login-canvas .btn-continue:active {
  background: #e0e0e0 !important;
  transform: scale(0.99);
}

.login-canvas .error-message {
  background: rgba(186, 26, 26, 0.16);
  color: #ff8585;
  border: 1px solid rgba(186, 26, 26, 0.35);
  font-size: 13px;
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-control);
  margin-bottom: var(--space-16);
  text-align: left;
}

.login-canvas .status-message {
  background: rgba(255, 255, 255, 0.08);
  color: #e5e5e5;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 13px;
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-control);
  margin-bottom: var(--space-16);
  text-align: left;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
}

.status-message-dismiss {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  opacity: 0.7;
  flex-shrink: 0;
}

.status-message-dismiss:hover {
  opacity: 1;
}

.login-canvas .link-button {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s ease;
}

.login-canvas .link-button:hover {
  color: #ffffff;
  text-decoration: underline;
}

.login-canvas .login-footer-text {
  margin-top: var(--space-24);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

#main-content {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.view {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: var(--space-48) var(--space-16);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: var(--space-24);
  box-shadow: var(--shadow-sm);
}

.field {
  margin-bottom: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

label {
  font-weight: 500;
  font-size: 13px;
  color: var(--color-text-secondary);
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="file"],
input[type="date"],
input[type="datetime-local"],
input[type="number"],
select {
  height: 36px;
  padding: 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-surface);
}

input[type="file"] {
  height: auto;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-12);
  color: var(--color-text-muted);
  cursor: pointer;
}

/* The native "Choose File" button otherwise renders as an unstyled OS control sitting inside an
   otherwise-themed field — style it like `.btn-secondary` so every file input in the app (upload,
   new version) reads as one deliberate control instead of a browser default. */
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  height: 28px;
  padding: 0 var(--space-12);
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--color-surface-subtle);
  border-color: var(--color-border-strong);
}

/* The native calendar/spinner glyphs stay (a custom replacement is real extra surface for what a
   browser already renders correctly), just dimmed to the same muted weight as every other icon in
   a field, instead of the loud, undimmed default that reads as a leftover OS control next to the
   bordered/radiused fields around it. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: opacity(0.5);
  cursor: pointer;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-action);
  box-shadow: 0 0 0 2px var(--color-action-tint);
}

/* --- Buttons --- */

.btn,
a.btn {
  border: none;
  border-radius: var(--radius-control);
  padding: var(--space-8) var(--space-16);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none !important;
  /* Content-width by default, everywhere — including inside a flex column (`.form-inline`), where
     a flex item stretches to fill the cross-axis unless told otherwise. Full-width is the rare
     exception (the login/SSO/invitation screens' submit button), not the default; it opts back in
     with its own scoped rule rather than every other button opting out. */
  align-self: flex-start;
}

.btn:hover,
a.btn:hover,
.btn:focus,
a.btn:focus,
.btn:active,
a.btn:active {
  text-decoration: none !important;
}

/* Ink, not the action accent (third pass). The accent still means "this is interactive" everywhere
   it appears — links, focus rings, the progress fill — but the button that commits something is an
   object, and reads as one in ink. */
.btn-primary {
  background: var(--color-ink);
  color: var(--color-action-contrast);
}

.btn-primary:hover {
  background: var(--color-ink-hover);
}

.btn-primary:active {
  background: var(--color-ink-active);
}

.btn-secondary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.btn-secondary:hover {
  background: var(--color-surface-subtle);
  border-color: var(--color-border-strong);
}

.btn-inline {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  text-align: center;
}

/* For a confirmed destructive action (delete, purge, remove) — never for severity/risk, which
   keeps its own documented `.badge-severity-*` colors untouched (DESIGN.md hard rules 1/2/6). */
.btn-danger {
  background: var(--color-critical);
  color: var(--color-action-contrast);
}

.btn-danger:hover {
  background: #9c1616;
}

.btn-danger:active {
  background: #7d1212;
}

.btn-small {
  padding: var(--space-4) var(--space-12);
  font-size: 12px;
}

.btn-icon {
  background: transparent;
  border: none;
  font-size: 14px;
  padding: var(--space-4) var(--space-8);
  cursor: pointer;
  color: var(--color-text-muted);
}

.btn-logout {
  background: rgba(186, 26, 26, 0.08) !important;
  color: var(--color-critical) !important;
  border: 1px solid rgba(186, 26, 26, 0.22) !important;
  border-radius: var(--radius-control);
  width: 34px;
  height: 34px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-logout:hover {
  background: rgba(186, 26, 26, 0.16) !important;
  border-color: rgba(186, 26, 26, 0.4) !important;
  color: var(--color-critical) !important;
}

.btn-logout:active {
  background: rgba(186, 26, 26, 0.24) !important;
}

.btn-logout svg {
  width: 18px;
  height: 18px;
  opacity: 1 !important;
  color: var(--color-critical);
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-action);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

/* --- Messages --- */

.error-message {
  background: var(--color-critical-bg);
  color: var(--color-error);
  border-radius: var(--radius-control);
  padding: var(--space-8) var(--space-12);
  margin-bottom: var(--space-16);
  font-size: 13px;
}

.status-message {
  background: var(--color-medium-bg);
  color: var(--color-medium);
  border-radius: var(--radius-control);
  padding: var(--space-8) var(--space-12);
  margin-bottom: var(--space-16);
  font-size: 13px;
}

.muted {
  color: var(--color-text-muted);
  font-size: 12px;
}

/* --- Workbench: Floating sidebar and content architecture --- */

.workbench {
  display: flex;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: var(--color-canvas);
  overflow: hidden;
}

/* Floating dark navigation rail */
.nav-pane {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  max-width: var(--sidebar-width);
  flex: 0 0 auto;
  height: calc(100vh - 16px);
  margin: 8px 8px 8px 8px;
  box-sizing: border-box;
  background: var(--color-chrome);
  color: var(--color-chrome-text);
  border: 1px solid var(--color-chrome-border);
  border-radius: var(--radius-panel);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color-scheme: dark;
  position: relative;
  z-index: 10;
  transition: width 0.25s cubic-bezier(0.2, 0, 0, 1), min-width 0.25s cubic-bezier(0.2, 0, 0, 1), max-width 0.25s cubic-bezier(0.2, 0, 0, 1);
  will-change: width;
}

/* Collapsed sidebar: rail mode with zero jitter */
.workbench.is-collapsed .nav-pane {
  width: 64px;
  min-width: 64px;
  max-width: 64px;
}

/* Pinned sidebar header: stays fixed at the top during sidebar scroll.
   Height aligns its bottom border with the main content header's bottom border:
   var(--header-height) minus the floating nav pane's 8px top margin and 1px border. */
.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--header-height) - 9px);
  min-height: calc(var(--header-height) - 9px);
  box-sizing: border-box;
  margin: 0;
  padding: 0 var(--space-12);
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  border-bottom: none;
}

/* Scrollable sidebar navigation items */
.nav-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-8) var(--space-12) var(--space-16);
  display: flex;
  flex-direction: column;
  gap: 2px;
  color-scheme: dark;
}

.nav-scroll::-webkit-scrollbar {
  width: 5px;
}

.nav-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.nav-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(236, 231, 222, 0.16);
  border-radius: var(--radius-pill);
}

.nav-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(236, 231, 222, 0.32);
}

.nav-scroll::-webkit-scrollbar-thumb:active {
  background-color: rgba(236, 231, 222, 0.48);
}

.nav-scroll::-webkit-scrollbar-button,
.nav-scroll::-webkit-scrollbar-button:single-button,
.nav-scroll::-webkit-scrollbar-button:double-button,
.nav-scroll::-webkit-scrollbar-button:start:decrement,
.nav-scroll::-webkit-scrollbar-button:end:increment,
.nav-scroll::-webkit-scrollbar-button:vertical:decrement,
.nav-scroll::-webkit-scrollbar-button:vertical:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.nav-scroll::-webkit-scrollbar-corner {
  background: transparent;
}

/* Everything below re-grounds the nav pane's contents on dark. Scoped to `.nav-pane` rather than
   changing the shared components themselves — the same `.queue-group`, `.muted` and `.btn` are
   used all over the light content area and must not move. */
.nav-pane .muted,
.nav-pane .nav-section-title,
.nav-pane .queue-group-header {
  color: var(--color-chrome-text-muted);
}

.nav-pane .nav-section {
  border-top: none;
}

.nav-pane .queue-group-count {
  background: var(--color-chrome-raised);
  color: var(--color-chrome-text);
}

.nav-org {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
}

.nav-org-mark {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-control);
  background: var(--color-chrome-selected);
  color: var(--color-chrome-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.nav-org-name {
  font-family: var(--font-headline);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-chrome-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.sidebar-toggle-btn {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: var(--radius-control);
  color: var(--color-chrome-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.2s ease;
}

.sidebar-toggle-btn:hover {
  background: var(--color-chrome-raised);
  color: var(--color-chrome-text);
}

.sidebar-toggle-btn svg {
  width: 20px;
  height: 20px;
}

.sidebar-toggle-logo {
  display: none;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-control);
  background: var(--color-chrome-selected);
  color: var(--color-chrome-text);
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  align-items: center;
  justify-content: center;
}

/* In collapsed mode:
   1. Rail width 64px
   2. Toggle button centers in rail
   3. Show company logo at top (where collapse icon was)
   4. Hovering reveals the collapse/expand icon
   5. Zero scrollbar space, zero padding on nav-scroll */
.workbench.is-collapsed .nav-pane {
  width: 64px;
  min-width: 64px;
  max-width: 64px;
}

.workbench.is-collapsed .nav-org {
  display: none;
}

.workbench.is-collapsed .nav-header {
  justify-content: center;
  align-items: center;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

.workbench.is-collapsed .sidebar-toggle-btn {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  padding: 0;
  margin: 0 auto;
  position: relative;
  border-radius: var(--radius-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.workbench.is-collapsed .sidebar-toggle-btn .sidebar-toggle-logo {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
}

.workbench.is-collapsed .sidebar-toggle-btn svg {
  display: none;
  width: 20px;
  height: 20px;
}

.workbench.is-collapsed .sidebar-toggle-btn:hover,
.workbench.is-collapsed .sidebar-toggle-btn:focus-visible {
  background: var(--color-chrome-raised);
}

.workbench.is-collapsed .sidebar-toggle-btn:hover .sidebar-toggle-logo,
.workbench.is-collapsed .sidebar-toggle-btn:focus-visible .sidebar-toggle-logo {
  display: none;
}

.workbench.is-collapsed .sidebar-toggle-btn:hover svg,
.workbench.is-collapsed .sidebar-toggle-btn:focus-visible svg {
  display: block;
}

.workbench.is-collapsed .nav-scroll {
  padding: var(--space-8) 0 var(--space-16) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.workbench.is-collapsed .nav-scroll::-webkit-scrollbar,
.workbench.is-collapsed .nav-scroll::-webkit-scrollbar-thumb,
.workbench.is-collapsed .nav-scroll::-webkit-scrollbar-track,
.workbench.is-collapsed .nav-scroll::-webkit-scrollbar-corner {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.workbench.is-collapsed .nav-section {
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-top: none !important;
  position: relative !important;
  gap: 2px !important;
}

.workbench.is-collapsed .nav-section::before {
  display: none !important;
}

.workbench.is-collapsed .nav-section.nav-section-primary {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

.workbench.is-collapsed .nav-section.nav-section-primary::before {
  display: none !important;
}

/* Main workspace area - normal layout */
.workbench-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  background: transparent;
  overflow: hidden;
  position: relative;
}

.workbench-content {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.nav-contracts-badge {
  margin-left: auto;
  transition: opacity 0.15s ease;
}

/* The horizontal padding grows once the stage is wider than the content wants to be, which centres
   the column on a large monitor instead of letting a table run the full width of a 27-inch screen.
   Done with `max()` on the padding rather than a `max-width` wrapper so it needs no extra element
   and cannot disturb the three-pane flex layout. */
.stage {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-16) max(var(--space-40), calc((100% - 1180px) / 2)) var(--space-32);
}

/* A resting, considered container rather than text floating on the bare canvas — the "nothing is
   selected yet" state still deserves a designed home, not just a headline (DESIGN.md hard rule 10
   forbids illustration here, so the polish is entirely in the container, spacing, and type). */
.empty-workspace {
  max-width: 480px;
  margin: var(--space-48) auto;
  padding: var(--space-40) var(--space-32);
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-sm);
}

.inspector-pane {
  width: calc(var(--inspector-width) - var(--space-24));
  max-width: calc(100vw - var(--space-32));
  flex: 0 0 calc(var(--inspector-width) - var(--space-24));
  margin: var(--space-12) var(--space-16) var(--space-16) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  /* Opening a citation from inside a Level-4 dialog (`AcxDialog.panel`, chat's own home) must not
     end up rendering behind that dialog's `.modal-backdrop` (z-index 1050): plain in-flow content
     with no stacking context of its own always paints beneath a `position: fixed` + z-index
     sibling regardless of z-index value, so without this the pane would open — successfully —
     completely hidden from view. `position: relative` is what makes the z-index below apply at
     all; without it, z-index on a non-positioned element is ignored entirely. */
  position: relative;
  z-index: 1060;
}

.inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.inspector-header h2 {
  margin: 0;
  font-size: 14px;
  flex: 1 1 auto;
}

.inspector-body {
  padding: var(--space-16);
  overflow-y: auto;
}

/* --- Stage 3A administration ------------------------------------------------------------------
   People, workspaces and cases, organization settings, security, and the platform console. These
   reuse the existing card/table/badge vocabulary rather than introducing a second one: an
   administration screen that looks like a different product is a screen people distrust. Inserted
   before the responsive block below so the max-width overrides still win. */

.stage-section {
  margin-bottom: var(--space-32);
}

.stage-header {
  margin-bottom: var(--space-32);
}

.stage-header h1 {
  margin: 0 0 var(--space-4);
}

.stage-header p {
  margin: 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-16);
}

.form-inline {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-16);
}

.form-inline h2 {
  margin: 0;
}

/* ENT-03/ENT-07: an inline edit form nested inside its own `.card` — no background/border of its
   own (that would be a card inside a card), just a separator from the summary above it. */
.sso-edit-form {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-16);
}

/* ENT-04: same pattern for a workspace's inline edit form and its expandable member list.
   ENT-19: the same separator for a workspace/case's inline "ask a question" chat panel. */
.workspace-edit-form,
.workspace-members,
.workspace-chat {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-16);
  margin-top: var(--space-16);
}

.workspace-chat .chat-panel {
  max-height: 480px;
}

/* ENT-15: a contract's comment thread — a plain nested list, replies indented once per level. */
.comment-thread,
.comment-replies {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-item {
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--color-border);
}

.comment-replies {
  margin-top: var(--space-8);
  padding-left: var(--space-20);
  border-left: 2px solid var(--color-border);
}

.comment-replies .comment-item:last-child {
  border-bottom: none;
}

.comment-reply-form {
  margin-top: var(--space-8);
}

/* ENT-05: a case's detail panel, expanded in the table body directly below its own row. */
.case-detail-row td {
  background: var(--color-surface-subtle);
  padding: var(--space-16);
}

.case-edit-form {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-16);
  margin-bottom: var(--space-16);
}

/* ENT-32: an organization's administrator list, expanded in the platform table directly below its
   own row — same shape as `.case-detail-row` above. */
.platform-admin-panel-row td {
  background: var(--color-surface-subtle);
  padding: var(--space-16);
}

.platform-admin-panel-body {
  width: 100%;
}

.platform-admin-add-form {
  margin-top: var(--space-12);
}

.field-help {
  margin: var(--space-4) 0 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

.notice {
  padding: var(--space-12) var(--space-16);
  margin-bottom: var(--space-16);
  border: 1px solid var(--color-action);
  border-left-width: 3px;
  border-radius: var(--radius-default);
  background: var(--color-action-tint);
  color: var(--color-text);
  font-size: 14px;
}

.notice code {
  font-family: var(--font-mono);
  font-size: 12px;
  word-break: break-all;
}

.badge-success {
  background: var(--color-low-bg);
  color: var(--color-low);
  border-color: var(--color-low-border);
}

.badge-warning {
  background: var(--color-medium-bg);
  color: var(--color-medium);
  border-color: var(--color-medium-border);
}

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

.timeline li {
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
}

.timeline code,
.permission-list code {
  font-family: var(--font-mono);
  font-size: 12px;
}

.permission-list {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}

/* The read-only "N permissions" popup (`permissionSummaryHtml`) reuses this grid but adds a check
   glyph per item, so each `<li>` needs its own icon+label alignment. */
.permission-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.permission-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.permission-list-item svg {
  flex: 0 0 auto;
  color: var(--color-low);
}

/* The "N assigned" popup (`assigneeListHtml`) — one row per member holding the role, name/email/
   title on the left the same way `memberRow` (people.js) reads them, status pill on the right. */
.assignee-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.assignee-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.assignee-list-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Recovery codes are read off a screen and typed back, sometimes months later, so they are set
   large and monospaced rather than styled to blend in. */
.recovery-codes {
  list-style: none;
  margin: var(--space-12) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-8);
}

.recovery-codes code,
.mfa-secret {
  display: inline-block;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-subtle);
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.05em;
}

@media (max-width: 1023px) {
  .inspector-pane {
    position: fixed;
    inset: 60px 16px 16px 16px;
    width: auto;
    max-width: 560px;
    margin: 0 auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    z-index: 1060;
    box-shadow: var(--shadow-lg);
  }

  .nav-pane {
    display: none;
  }
}

/* --- Page header (used inside .stage) --- */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-20);
  flex-wrap: wrap;
}

.stage .page-header h1 {
  display: none;
}

.stage .page-header:has(> h1:only-child),
.stage .page-header:has(> .page-header-text:only-child > h1:only-child) {
  display: none;
}

.page-header-text {
  flex: 1 1 auto;
  min-width: 240px;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex: 0 0 auto;
}

.contract-danger-zone-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

#contracts-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  text-decoration: none !important;
}

#contracts-upload-btn svg {
  flex: 0 0 auto;
}

/* A page's subtitle is the one place `.muted`'s 12px reads as fine print rather than as the
   sentence explaining the title above it. */
.page-header>div>p.muted,
.page-header>p.muted,
.stage-header p.muted {
  font-size: 14px;
  line-height: 22px;
  max-width: 68ch;
}

/* --- Badges: severity + outcome, DESIGN.md exact colors --- */

.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-8);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge-severity-critical {
  background: var(--color-critical-bg);
  color: var(--color-critical);
  border-color: var(--color-critical-border);
}

.badge-severity-high {
  background: var(--color-high-bg);
  color: var(--color-high);
  border-color: var(--color-high-border);
}

.badge-severity-medium {
  background: var(--color-medium-bg);
  color: var(--color-medium);
  border-color: var(--color-medium-border);
}

.badge-severity-low {
  background: var(--color-low-bg);
  color: var(--color-low);
  border-color: var(--color-low-border);
}

.badge-severity-informational,
.badge-neutral {
  background: var(--color-info-bg);
  color: var(--color-info);
  border-color: var(--color-info-border);
}

.badge-status-ready {
  background: var(--color-low-bg);
  color: var(--color-low);
  border-color: var(--color-low-border);
}

.badge-status-processing {
  background: var(--color-medium-bg);
  color: var(--color-medium);
  border-color: var(--color-medium-border);
}

.badge-status-failed {
  background: var(--color-critical-bg);
  color: var(--color-critical);
  border-color: var(--color-critical-border);
}

/* --- Playbook compliance outcomes: four and only four, each its own fixed color (DESIGN.md) --- */

.badge-outcome-compliant {
  background: var(--color-low-bg);
  color: var(--color-low);
  border-color: var(--color-low-border);
}

.badge-outcome-partially-compliant {
  background: var(--color-medium-bg);
  color: var(--color-medium);
  border-color: var(--color-medium-border);
}

.badge-outcome-non-compliant {
  background: var(--color-critical-bg);
  color: var(--color-critical);
  border-color: var(--color-critical-border);
}

.badge-outcome-requires-review {
  background: var(--color-requires-review-bg);
  color: var(--color-requires-review);
  border-color: var(--color-border);
}

/* --- Status flags: human review / jurisdiction-sensitive (distinct from severity badges) --- */

.status-flag {
  display: inline-block;
  margin: var(--space-8) 0;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-control);
  font-size: 12px;
  font-weight: 500;
}

.status-flag-review {
  background: var(--color-requires-review-bg);
  color: var(--color-requires-review);
}

.status-flag-jurisdiction {
  background: var(--color-info-bg);
  color: var(--color-info);
}

/* --- AI-generated label --- */

.ai-generated-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--color-ai-tint);
  color: var(--color-ai-text);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

button.ai-generated-chip {
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.ai-generated-wrap {
  position: relative;
  display: inline-block;
}

/* --- AI-generated label's "How this was produced" popover (DESIGN.md) --- */

.ai-info-popover {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: 0;
  z-index: 30;
  min-width: 220px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-default);
  box-shadow: var(--shadow-md);
  padding: var(--space-12);
}

.ai-info-popover dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4) var(--space-12);
}

.ai-info-popover dt {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.ai-info-popover dd {
  margin: 0;
  font-size: 12px;
  color: var(--color-text);
  font-family: var(--font-mono);
}

.analysis-header-row {
  margin-bottom: var(--space-16);
}

/* --- Confidence indicator: text label plus a stepped glyph, never a percentage --- */

.confidence-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 12px;
  color: var(--color-text-secondary);
  cursor: help;
}

.confidence-glyph {
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
  height: 8px;
}

.confidence-bar {
  width: 3px;
  border-radius: 1px;
  background: var(--color-border);
}

.confidence-bar:nth-child(1) {
  height: 4px;
}

.confidence-bar:nth-child(2) {
  height: 6px;
}

.confidence-bar:nth-child(3) {
  height: 8px;
}

.confidence-bar.is-filled {
  background: currentcolor;
}

.confidence-high {
  color: var(--color-low);
}

.confidence-medium {
  color: var(--color-medium);
}

.confidence-low {
  color: var(--color-text-muted);
}

.finding-meta {
  margin: var(--space-8) 0;
}

/* --- Contract list (dashboard empty state) / findings --- */

.empty-state {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  align-items: center;
}

/* --- Contracts index (`#/contracts`) --- */

.contracts-load-more-row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}

.analysis-section {
  margin-bottom: var(--space-24);
}

.finding-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: var(--space-12) var(--space-16);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-xs);
}

.finding-card p {
  margin: var(--space-4) 0;
}

.finding-title {
  font-weight: 500;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.risk-card {
  border-left: 3px solid var(--color-border-strong);
}

.analysis-footer {
  margin-top: var(--space-24);
}

/* --- Citations / source evidence (CORE-34) --- */

.citation-list {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

.citation-chip,
.chip-button {
  background: var(--color-ai-tint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  padding: 2px var(--space-8);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-ai-text);
  cursor: pointer;
}

.chip-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-body);
  background: var(--color-surface-container);
  color: var(--color-text-secondary);
}

.chip-button svg {
  flex: 0 0 auto;
  opacity: 0.7;
}

.citation-chip:hover,
.chip-button:hover {
  border-color: var(--color-border-strong);
}

.source-locator {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-12);
}

.source-quote {
  margin: 0;
  padding: var(--space-12) var(--space-16);
  background: var(--color-canvas);
  border-radius: var(--radius-default);
  border-left: 3px solid var(--color-action);
  font-family: var(--font-headline);
  font-size: 15px;
  line-height: 26px;
  color: var(--color-text);
}

.source-quote-ai {
  border-left-color: var(--color-ai);
}

.source-quote mark {
  background: var(--color-ai-tint);
  color: var(--color-ai-text);
  border-radius: 3px;
  padding: 0 2px;
}

/* --- Processing status (CORE-32) --- */

.status-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.status-label {
  font-weight: 500;
  margin: 0;
}

.progress-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-container);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--color-action);
  transition: width 0.2s ease-out;
}

.status-card-failed .status-label {
  color: var(--color-error);
}

/* --- Processing stage stepper: horizontal on desktop, vertical below 768px (DESIGN.md) --- */

.stage-stepper {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stage-step {
  flex: 1 1 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  font-size: 11px;
  color: var(--color-text-muted);
}

.stage-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 5px;
  left: calc(50% + 11px);
  right: calc(-50% + 11px);
  height: 2px;
  background: var(--color-border);
}

.stage-step-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  z-index: 1;
}

.stage-step-done .stage-step-dot {
  background: var(--color-action);
  border-color: var(--color-action);
}

.stage-step-done:not(:last-child)::after {
  background: var(--color-action);
}

.stage-step-current .stage-step-dot {
  border-color: var(--color-action);
  background: var(--color-action-tint);
}

.stage-step-current .stage-step-label {
  color: var(--color-text);
  font-weight: 500;
}

.stage-step-failed .stage-step-dot {
  border-color: var(--color-error);
  background: var(--color-critical-bg);
}

.stage-step-failed .stage-step-label {
  color: var(--color-error);
  font-weight: 500;
}

@media (max-width: 767px) {
  .stage-stepper {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
  }

  .stage-step {
    flex-direction: row;
    text-align: left;
  }

  .stage-step:not(:last-child)::after {
    display: none;
  }
}

/* --- Tabs --- */

/* A single-row, horizontally-scrolling strip rather than wrapping — both of this app's tab bars
   (contract.js's 10 tabs, reports.js's 9) exceed one clean row at normal widths, and DESIGN.md's
   underline tab style reads as a ragged multi-row stack once it wraps rather than as one control. */
.tab-bar {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-24);
}

.tab-button {
  flex: 0 0 auto;
  white-space: nowrap;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-control) var(--radius-control) 0 0;
  padding: var(--space-8) var(--space-16);
  font-size: 13px;
  cursor: pointer;
  color: var(--color-text-muted);
  text-decoration: none;
}

.tab-button:hover {
  color: var(--color-text);
  background: var(--color-surface-subtle);
}

.tab-button.is-active {
  color: var(--color-text);
  border-bottom-color: var(--color-action);
  font-weight: 500;
  background: transparent;
}

/* --- Legal disclaimer: exactly one instance per view, low-contrast --- */

.disclaimer-line {
  color: var(--color-text-muted);
  font-size: 12px;
  margin-top: var(--space-24);
}

/* --- Chat (CORE-35) --- */

.chat-panel {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  height: calc(100vh - 270px);
  min-height: 520px;
  position: relative;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.chat-panel::-webkit-scrollbar,
.chat-history::-webkit-scrollbar,
#tab-panel-chat::-webkit-scrollbar,
#tab-panel-chat *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.chat-history {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-8) var(--space-4) var(--space-20);
  scroll-behavior: smooth;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#tab-panel-chat,
#tab-panel-chat * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* Chat Messages */
.chat-message {
  border-radius: var(--radius-default);
  padding: var(--space-12) var(--space-16);
  max-width: 85%;
  font-size: 14px;
  line-height: 1.6;
  position: relative;
  transition: all 0.2s ease;
}

.chat-message p {
  margin: 0;
}

.chat-message-user {
  align-self: flex-end;
  background: var(--color-ink);
  color: #ffffff;
  border-radius: 16px 16px 4px 16px;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: var(--space-16);
}

.chat-message-assistant {
  align-self: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px 16px 16px 4px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.chat-message.is-pending {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-6) var(--space-12);
  color: var(--color-text-muted);
  box-shadow: var(--shadow-xs);
}

.chat-message.is-failed {
  border-color: var(--color-error);
  background: var(--color-error-bg);
}

.not-found-answer {
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  border-radius: var(--radius-control);
  padding: var(--space-8) var(--space-12);
  margin: 0;
}

.chat-answer-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}


/* Glowing Siri Ball Thinking Indicator (darker, complementary theme colors) */
.siri-ball-indicator {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px;
}

.siri-ball {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #181926 0%, #0d0e17 70%, #06070a 100%);
  box-shadow: 0 0 8px rgba(67, 56, 202, 0.4), 0 0 14px rgba(180, 83, 9, 0.25), inset 0 0 3px rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  overflow: hidden;
  animation: siri-ball-pulse 2.2s ease-in-out infinite alternate;
}

.siri-ball-glow {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      #9f1239 0%,
      #b45309 18%,
      #4338ca 42%,
      #6366f1 60%,
      #0e7490 78%,
      #1e3a8a 90%,
      #9f1239 100%);
  filter: blur(2.5px);
  opacity: 0.88;
  animation: siri-ball-spin 3.2s linear infinite;
}

.siri-ball-core {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #141727 15%, #080911 85%);
  z-index: 2;
}

.siri-ball-swirl-1 {
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: conic-gradient(from 120deg,
      transparent 0%,
      rgba(99, 102, 241, 0.95) 25%,
      rgba(180, 83, 9, 0.9) 50%,
      rgba(159, 18, 57, 0.9) 75%,
      transparent 100%);
  filter: blur(1.5px);
  mix-blend-mode: screen;
  z-index: 3;
  animation: siri-ball-spin 2.4s linear infinite reverse;
}

.siri-ball-swirl-2 {
  position: absolute;
  inset: 2px;
  border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
  border: 1.2px solid rgba(194, 65, 12, 0.85);
  box-shadow: 0 0 5px rgba(217, 119, 6, 0.8), inset 0 0 4px rgba(99, 102, 241, 0.75);
  z-index: 4;
  animation: siri-ball-morph 3.8s ease-in-out infinite alternate;
}

.siri-ball-sheen {
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 55%);
  z-index: 5;
  pointer-events: none;
}

@keyframes siri-ball-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes siri-ball-morph {
  0% {
    border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
    transform: rotate(0deg) scale(0.92);
  }

  50% {
    border-radius: 62% 38% 32% 68% / 58% 32% 68% 42%;
    transform: rotate(180deg) scale(1.08);
  }

  100% {
    border-radius: 35% 65% 55% 45% / 40% 60% 40% 60%;
    transform: rotate(360deg) scale(0.92);
  }
}

@keyframes siri-ball-pulse {
  0% {
    transform: scale(0.96);
    box-shadow: 0 0 6px rgba(67, 56, 202, 0.35), 0 0 10px rgba(180, 83, 9, 0.2), inset 0 0 2px rgba(255, 255, 255, 0.2);
  }

  100% {
    transform: scale(1.04);
    box-shadow: 0 0 12px rgba(67, 56, 202, 0.55), 0 0 18px rgba(180, 83, 9, 0.35), inset 0 0 4px rgba(255, 255, 255, 0.3);
  }
}

.ai-thinking-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: 0.01em;
}

/* Streaming Cursor */
.chat-streaming-cursor {
  display: inline-block;
  width: 2.5px;
  height: 1.1em;
  vertical-align: -0.15em;
  margin-left: 2px;
  background: var(--color-action);
  border-radius: 1px;
  animation: chat-cursor-blink 0.8s infinite;
}

@keyframes chat-cursor-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Redline AI footer watermark */
.chat-reply-footer {
  display: flex;
  align-items: center;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-surface-subtle);
}

.chat-model-watermark {
  font-size: 11px;
  font-weight: 500;
  font-style: italic;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  user-select: none;
}

.chat-watermark-r {
  color: var(--color-critical);
  font-weight: 600;
}

/* Pinned Bottom Dock */
.chat-dock {
  position: sticky;
  bottom: 0;
  z-index: 10;
  width: 100%;
  background: transparent;
  padding-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.chat-suggestions {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  justify-content: center;
}

.chat-suggestion-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 12.5px;
  color: var(--color-text-secondary);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all 0.15s ease;
}

.chat-suggestion-chip:hover {
  background: var(--color-surface-subtle);
  border-color: var(--color-border-strong);
  color: var(--color-text);
  transform: translateY(-1px);
}

.suggestion-icon {
  font-size: 11px;
  color: var(--color-ai);
}

/* Harvey / ChatGPT Form Card */
.chat-form-card,
.chat-form {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 14px 16px 12px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.chat-form-card:focus-within,
.chat-form:focus-within {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.chat-input-row {
  display: flex;
  width: 100%;
}

.chat-input-row textarea,
.chat-input-row input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  resize: none;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  min-height: 48px;
  max-height: 160px;
  padding: 2px 0 6px;
}

.chat-input-row textarea:focus,
.chat-input-row textarea:focus-visible,
.chat-input-row input:focus,
.chat-input-row input:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.chat-input-row textarea::placeholder,
.chat-input-row input::placeholder {
  color: var(--color-text-muted);
}

.chat-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.chat-context-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  padding: 4px 10px;
  border-radius: 6px;
  max-width: 80%;
  overflow: hidden;
}

.context-icon {
  font-size: 12px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
}

.context-icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--color-ink);
}

.context-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* Black background and white rocket / send dart icon from user image */
.chat-rocket-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  border: none;
  background: var(--color-ink);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none !important;
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}

.rocket-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  color: #ffffff;
  fill: #ffffff;
  stroke: #ffffff;
  stroke-width: 1.5;
}

.chat-rocket-btn:hover:not(:disabled) {
  background: var(--color-ink-hover);
  box-shadow: none !important;
}

.chat-rocket-btn:active:not(:disabled) {
  background: var(--color-ink);
  transform: translateY(1px) scale(0.97);
  box-shadow: none !important;
}

.chat-rocket-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none !important;
}

.chat-dock .disclaimer-line {
  text-align: center;
  margin: var(--space-4) 0 0;
  font-size: 11.5px;
}

@media (max-width: 767px) {
  .workbench {
    flex-direction: column;
  }

  .app-header {
    gap: var(--space-12);
    padding-inline: var(--space-16);
  }

  .header-actions-wrap {
    gap: var(--space-4);
  }

  .header-search {
    width: clamp(7rem, 31vw, 10rem);
  }

  .nav-pane {
    display: flex;
    width: 100%;
    max-height: 40vh;
    margin: 0;
    height: auto;
  }

  .stage {
    padding: var(--space-16);
  }
}

/* ============================================================================
   Stage 2F surfaces: OCR routing notes, corrections, obligations, versions,
   comparison, playbook, knowledge. Tokens only — every value here resolves to
   DESIGN.md through the custom properties at the top of this file.
   ============================================================================ */

/* --- Upload: how to read the document (DEPTH-03A) --- */

.fieldset-plain {
  border: none;
  margin: 0;
  padding: 0;
}

.fieldset-plain legend {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  padding: 0;
  margin-bottom: var(--space-8);
}

.radio-row {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  margin-bottom: var(--space-12);
}

.radio-row input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.radio-row label {
  font-weight: 500;
  margin-bottom: 0;
}

.radio-row .muted {
  margin: 2px 0 0;
}

/* --- How the source was read (DEPTH-03A) ---
   Never styled as an error: the analysis is real, its input is what is uncertain. */

.source-quality-note {
  border: 1px solid var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
  border-radius: var(--radius-panel);
  padding: var(--space-12) var(--space-16);
  margin-bottom: var(--space-16);
}

.source-quality-review {
  border-color: var(--color-border);
  background: var(--color-requires-review-bg);
  color: var(--color-requires-review);
}

.source-quality-title {
  font-weight: 600;
  margin: 0 0 var(--space-4);
}

.source-quality-note p {
  margin: 0;
}

.source-quality-warnings {
  margin: var(--space-8) 0 0;
  padding-left: var(--space-20);
  font-size: 12px;
}

/* --- Human decisions on a finding (DEPTH-04) --- */

.correction-controls {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-12);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.correction-state {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.correction-controls.is-decided {
  border-top-style: dashed;
}

.correction-error {
  flex-basis: 100%;
  margin: var(--space-4) 0 0;
}

.correction-prompt-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  flex-wrap: wrap;
}

.correction-reason-input {
  flex: 1 1 240px;
  min-width: 180px;
  height: 32px;
  padding: 4px 10px;
  font-size: 13px;
}

.correction-prompt-actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* --- Obligations (DEPTH-05) --- */

.obligation-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-8) var(--space-16);
  margin: var(--space-12) 0 0;
}

.obligation-facts div {
  min-width: 0;
}

.obligation-facts dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.obligation-facts dd {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--color-text);
}

.obligation-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-12);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.obligation-actions label {
  margin-bottom: 0;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.obligation-feedback {
  font-size: 12px;
  color: var(--color-text-muted);
}

.obligation-history {
  margin-top: var(--space-12);
  font-size: 12px;
}

.obligation-history summary {
  cursor: pointer;
  color: var(--color-action);
}

/* An unverified owner or deadline: demoted, never styled as a confirmed finding. */
.status-flag-unverified {
  background: var(--color-requires-review-bg);
  color: var(--color-requires-review);
  border: 1px solid var(--color-border);
}

/* --- Status chips: workflow state, never the severity ramp --- */

.badge-status-open,
.badge-status-queued,
.badge-status-parsing,
.badge-status-indexing,
.badge-status-analyzing,
.badge-status-ocr_processing {
  background: var(--color-info-bg);
  color: var(--color-info);
  border: 1px solid var(--color-info-border);
}

.badge-status-in_progress {
  background: var(--color-medium-bg);
  color: var(--color-medium);
  border: 1px solid var(--color-medium-border);
}

.badge-status-completed {
  background: var(--color-low-bg);
  color: var(--color-low);
  border: 1px solid var(--color-low-border);
}

.badge-status-waived,
.badge-status-failed {
  background: var(--color-requires-review-bg);
  color: var(--color-requires-review);
  border: 1px solid var(--color-border);
}

/* --- Versions (DEPTH-08) --- */

.version-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.version-switcher label {
  margin-bottom: 0;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.inline-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-12);
  flex-wrap: wrap;
  margin-top: var(--space-16);
}

.inline-form .field {
  margin-bottom: 0;
}

/* A stray helper/warning paragraph as a direct child of a horizontal form (not nested inside a
   `.field`) claims its own full-width row rather than being squeezed between the fields and the
   submit button — the same technique `.export-note` already uses for the same reason. */
.inline-form>.field-help {
  flex-basis: 100%;
  margin-top: 0;
}

/* A settings form with several short, single-line fields (a profile, an SSO configuration) reads
   as a 2-3 column grid rather than one field per full-width row — `.form-inline`/`.inline-form`
   both assume a *short* form; this is for a *long* one made of short fields, kept firmly separate
   from any field that isn't single-line (a textarea, a fieldset of checkboxes), which stays
   outside the grid as its own full-width block. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-16);
  margin-bottom: var(--space-16);
}

.form-grid .field {
  margin-bottom: 0;
}

#contracts-filters {
  margin-bottom: var(--space-24);
}

.list-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

/* The same bordered, quiet-icon-submit recipe as the header's global search (`.header-search`) —
   deliberately not that same class, since this one sits full-width in a page toolbar rather than
   at a fixed header size, but built to be indistinguishable in look from it. A quick, page-local
   filter (contract title) rather than the cross-cutting Search page's job. */
.list-search {
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  max-width: 26rem;
  height: 36px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-xs);
}

.list-search:focus-within {
  border-color: var(--color-action);
  box-shadow: 0 0 0 2px var(--color-action-tint);
}

.list-search input {
  min-width: 0;
  flex: 1 1 auto;
  height: 100%;
  padding: 0 0 0 var(--space-12);
  color: var(--color-text);
  border: none;
  background: transparent;
  box-shadow: none;
}

.list-search input:focus-visible {
  outline: none;
}

.list-search input::placeholder {
  color: var(--color-text-muted);
}

.list-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  border: none;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.list-search-submit:hover {
  background: var(--color-surface-subtle);
  color: var(--color-action);
}

/* The tag form remains fixed above a separately scrollable catalog, so creating a label never
   requires losing the current place in a long list. */
.contracts-tag-manager {
  display: grid;
  gap: var(--space-16);
  margin-top: var(--space-12);
  font-size: 13px;
}

/* The contract detail header's organization strip: Workspace, Cases, and Tags on one labelled
   line, with a compact themed editor on its own row when opened. */
.contract-organization {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-16);
  margin-top: var(--space-8);
  font-size: 13px;
}

.contract-organization-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.contract-organization-label {
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}

#contract-organization-form {
  flex: 1 1 100%;
  align-items: stretch;
  padding: var(--space-16);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}

#contract-organization-form > .field {
  flex: 1 1 220px;
}

#contract-organization-form > fieldset.field,
#contract-organization-form > .error-message {
  flex-basis: 100%;
}

#contract-organization-cases,
#upload-case-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
}

.taxonomy-create-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-12);
}

.taxonomy-create-form .field {
  min-width: 0;
  margin: 0;
}

.taxonomy-create-form .btn {
  align-self: end;
}

.taxonomy-list-region {
  max-block-size: min(46vh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-default);
}

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

.taxonomy-list-region .empty-state {
  margin: 0;
  padding: var(--space-24);
}

.taxonomy-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-12);
  background: var(--color-surface);
}

.taxonomy-list li+li {
  border-top: 1px solid var(--color-border);
}

.taxonomy-name {
  overflow-wrap: anywhere;
}

.row-actions {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}

/* --- Tables. A table never clips silently at the viewport edge (DESIGN.md). --- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead th {
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: left;
  height: 28px;
  padding: 0 var(--space-12);
  border-bottom: 1px solid var(--color-border-strong);
  white-space: nowrap;
}

.data-table tbody th,
.data-table tbody td {
  padding: var(--space-8) var(--space-12);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-weight: 400;
  vertical-align: top;
}

.data-table tbody th {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.data-table tbody tr:hover {
  background: var(--color-surface-subtle);
}

.data-table .code-cell {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* --- Comparison (DEPTH-09) ---
   Colour never carries the meaning alone: each item also has a text label, and
   removed/added carry strike-through and underline. */

.diff-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: var(--space-12) var(--space-16);
  margin-bottom: var(--space-12);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.diff-item-head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin: 0 0 var(--space-8);
}

.diff-sides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-16);
}

.diff-side-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

.badge-diff-removed {
  background: var(--color-critical-bg);
  color: var(--color-critical);
  border: 1px solid var(--color-critical-border);
}

.badge-diff-added {
  background: var(--color-low-bg);
  color: var(--color-low);
  border: 1px solid var(--color-low-border);
}

.badge-diff-modified {
  background: var(--color-medium-bg);
  color: var(--color-medium);
  border: 1px solid var(--color-medium-border);
}

.diff-removed .diff-side:first-child .source-quote {
  background: var(--color-critical-bg);
  text-decoration: line-through;
}

.diff-added .diff-side:last-child .source-quote {
  background: var(--color-low-bg);
  text-decoration: underline;
}

.diff-modified .source-quote {
  background: var(--color-medium-bg);
}

.ai-summary {
  border: 1px solid var(--color-ai);
  background: var(--color-ai-tint);
  border-radius: var(--radius-panel);
  padding: var(--space-12) var(--space-16);
  margin-bottom: var(--space-16);
}

.ai-summary p {
  margin: var(--space-8) 0 0;
}

/* --- Playbook and knowledge (DEPTH-07 / DEPTH-07A) --- */

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.nav-section.nav-section-primary {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.nav-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-chrome-text-muted);
  margin: 0 0 var(--space-4);
  padding: 0 var(--space-8);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.15s ease, height 0.2s ease, margin 0.2s ease, padding 0.2s ease;
}

.nav-section-link {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-default);
  color: var(--color-chrome-text);
  text-decoration: none !important;
  font-size: 13px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease, width 0.25s cubic-bezier(0.2, 0, 0, 1), padding 0.25s cubic-bezier(0.2, 0, 0, 1);
  width: 100%;
}

.nav-section-link svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.nav-section-link:hover {
  background: var(--color-chrome-raised);
  color: var(--color-chrome-text);
  text-decoration: none !important;
}

.nav-section-link:hover svg {
  opacity: 1;
}

.nav-section-link.is-active {
  background: var(--color-chrome-selected);
  color: #ffffff;
  font-weight: 500;
}

.nav-section-link.is-active svg {
  opacity: 1;
}

.nav-link-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  transition: opacity 0.15s ease, transform 0.18s ease;
}

/* Collapsed nav item adaptations: perfectly aligned icons, hidden text */
.workbench.is-collapsed .nav-section-title {
  display: none !important;
  height: 0;
  margin: 0;
  padding: 0;
}

.workbench.is-collapsed .nav-link-label,
.workbench.is-collapsed .nav-contracts-badge {
  display: none !important;
}

.workbench.is-collapsed .nav-section-link {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  margin: 0 auto 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-control) !important;
  box-sizing: border-box !important;
  gap: 0 !important;
}

.workbench.is-collapsed .nav-section-link svg {
  margin: 0 !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

.rule-card-head h3,
.knowledge-card-head h3 {
  margin: 0;
  font-family: var(--font-headline);
  font-size: 16px;
}

.knowledge-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

/* Every other card resets its own `<p>` margins (.finding-card p, .chat-message p, ...) — this one
   was missing that, so its "Active version N" / "No active version" line fell back to the
   browser's default `1em 0` and puffed the whole card out well past its actual content. */
.knowledge-card-head + p.muted {
  margin: var(--space-4) 0;
}

/* Roles & permissions: the built-in/custom pill reads as metadata about the card itself, not part
   of the title line, so it is pinned to the card's own corner instead of sitting in the header's
   flex row. `padding-right` on the whole header (not just the title) reserves room so the title
   *and* its edit-menu trigger both wrap clear of the pill, rather than running under it.
   `display: flex; flex-direction: column` plus the meta row's own `margin-top: auto` below is what
   actually pins "N permissions"/"N assigned" to the card's bottom edge — without it, a longer
   description on one card would leave its chips sitting higher than a shorter card's right next to
   it in the same `.card-grid` row. */
.role-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.role-card-badge {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
}

.role-card .knowledge-card-head {
  padding-right: 84px;
}

/* The "N permissions" / "N assigned" chips read as one row of equal-weight facts about the role,
   so they split the row evenly rather than stacking — `flex: 1 1 0` (not a literal `width: 50%`)
   so the even split still holds once the row's `gap` is subtracted. */
.role-card-meta {
  display: flex;
  flex-direction: row;
  gap: var(--space-8);
  margin-top: auto;
  padding-top: var(--space-8);
}

.role-card-meta > * {
  flex: 1 1 0;
  min-width: 0;
}

/* Icon beside the bare count, no "permission"/"assigned" word — the label still exists for a
   screen reader via `aria-label` on the element itself, just not on screen. Padding and icon/text
   size match the app's own compact scale (`.chip-button`'s base padding, the 13px `.muted`-grade
   text size used elsewhere for secondary numbers) rather than a one-off larger size. */
.chip-button-stacked {
  flex-direction: row;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
}

.chip-button-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

/* The non-clickable "assigned" fallback (no `user:read`) reuses `.chip-button`'s look for visual
   consistency with the permissions chip beside it, but it is a `<span>`, not a `<button>` — so it
   shouldn't borrow the pointer cursor that implies it can be clicked. */
span.chip-button {
  cursor: default;
}

/* A one-icon action menu: one button, a small popover of plain-text items anchored under it.
   First used for a role card's edit/delete pair (replacing two always-visible buttons under the
   chips), reused as-is by a member row's five actions (replacing five buttons that wrapped onto a
   second line) — the naming is generic on purpose so the next row of buttons that gets cramped can
   reach for this instead of inventing another one-off menu. */
.action-menu-wrap {
  position: relative;
  display: inline-flex;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  cursor: pointer;
}

.icon-button:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}

.action-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-4));
  right: 0;
  min-width: 140px;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-md);
}

.action-menu-item {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  background: transparent;
  border: none;
  border-radius: var(--radius-control);
  text-align: left;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
}

.action-menu-item:hover {
  background: var(--color-surface-subtle);
}

/* People & access: a member row's action cell is a right-aligned menu trigger, not a left-aligned
   list of buttons — `.row-actions`'s own `flex-wrap` is what used to let five buttons spill onto a
   second line per row. */
.people-actions-cell {
  text-align: right;
}

/* Extra clearance above the Invitations section — it reads as a new section of the page, not a
   continuation of the member table right above it. */
.people-invitations {
  margin-top: var(--space-32);
}

.rule-card {
  margin-bottom: var(--space-12);
}

#playbook-rule-summaries,
#rule-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

#playbook-rule-summaries .card,
#rule-list .card,
.playbook-summary-card,
.playbook-rule-card {
  padding: var(--space-12) var(--space-16);
  margin-bottom: 0;
}

#playbook-rule-summaries summary,
.playbook-summary-card summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--color-text);
  user-select: none;
}

#playbook-rule-summaries summary:hover,
.playbook-summary-card summary:hover {
  color: var(--color-action);
}

.rule-card textarea,
#knowledge-content {
  width: 100%;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  padding: var(--space-8);
  resize: vertical;
}

.rule-card textarea:focus,
#knowledge-content:focus {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.knowledge-excerpt {
  font-family: var(--font-headline);
  font-size: 15px;
  line-height: 26px;
  background: var(--color-surface-subtle);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-control);
  margin: var(--space-8) 0 var(--space-12);
  padding: var(--space-8) var(--space-12);
  white-space: pre-wrap;
}

.knowledge-history {
  margin-top: var(--space-12);
  font-size: 12px;
}

.knowledge-history summary {
  cursor: pointer;
  color: var(--color-action);
}

.knowledge-history li {
  margin-bottom: var(--space-8);
}

.knowledge-add-version {
  margin-top: var(--space-12);
  font-size: 12px;
}

.knowledge-add-version summary {
  cursor: pointer;
  color: var(--color-action);
}

.knowledge-version-form {
  margin-top: var(--space-8);
}

/* --- Lifecycle (DEPTH-10) ---
   Lifecycle state is workflow, not severity, so it uses the neutral/status palette throughout.
   `expired` and `renewal_pending` borrow the medium tint because they are states a reader needs to
   notice — never the critical red, which in DESIGN.md means "how bad is this". An expired contract
   is a fact about the agreement, not a risk rating of it. */

.badge-lifecycle-draft,
.badge-lifecycle-review,
.badge-lifecycle-negotiation,
.badge-lifecycle-approval,
.badge-lifecycle-execution {
  background: var(--color-info-bg);
  color: var(--color-info);
  border: 1px solid var(--color-info-border);
}

.badge-lifecycle-active {
  background: var(--color-low-bg);
  color: var(--color-low);
  border: 1px solid var(--color-low-border);
}

.badge-lifecycle-renewal_pending,
.badge-lifecycle-expired {
  background: var(--color-medium-bg);
  color: var(--color-medium);
  border: 1px solid var(--color-medium-border);
}

.badge-lifecycle-terminated,
.badge-lifecycle-archived {
  background: var(--color-requires-review-bg);
  color: var(--color-requires-review);
  border: 1px solid var(--color-border);
}

/* A date this system calculated rather than read. Carries the AI accent because it is a value the
   system produced, and the same visual weight as the unverified flag beside it, because both give
   the reader the same instruction: check this one. */
.status-flag-derived {
  background: var(--color-ai-tint);
  color: var(--color-ai-text);
  border: 1px solid var(--color-ai);
}

.lifecycle-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-16) 0;
}

.lifecycle-feedback {
  color: var(--color-text-muted);
  font-size: 13px;
}

.lifecycle-dates {
  display: grid;
  gap: var(--space-16);
  margin: 0;
}

.lifecycle-date dt {
  font-weight: 600;
  color: var(--color-text-secondary);
  font-size: 13px;
}

.lifecycle-date dd {
  margin: var(--space-4) 0 0;
}

.lifecycle-raw {
  margin: var(--space-4) 0 0;
  font-size: 12px;
}

.lifecycle-source-type {
  font-family: var(--font-mono);
  font-size: 11px;
}

/* --- Notes: something the reader needs to know about the data, never styled as an error --- */

.note-panel {
  margin: var(--space-16) 0;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-info-border);
  border-left: 3px solid var(--color-info);
  border-radius: var(--radius-default);
  background: var(--color-info-bg);
  color: var(--color-text-secondary);
  font-size: 13px;
}

.note-panel p {
  margin: 0 0 var(--space-8);
}

.note-panel p:last-child {
  margin-bottom: 0;
}

/* --- Deadlines (DEPTH-10) --- */

.deadline-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.deadline-controls .muted {
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

/* Urgency is carried by a left border *plus* the "N days overdue" text in the row itself — never by
   colour alone (DESIGN.md). */
.data-table tbody tr.deadline-overdue td:first-child {
  border-left: 3px solid var(--color-critical);
}

.data-table tbody tr.deadline-due_soon td:first-child {
  border-left: 3px solid var(--color-medium);
}

.data-table tbody tr.deadline-upcoming td:first-child {
  border-left: 3px solid var(--color-border);
}

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

.deadline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-8);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border);
}

.deadline-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-secondary);
  min-width: 6.5rem;
}

.deadline-label {
  font-weight: 500;
}

.deadline-remaining {
  color: var(--color-text-muted);
  font-size: 12px;
}

.deadline-row.deadline-overdue .deadline-remaining {
  color: var(--color-critical);
  font-weight: 600;
}

/* --- Search (DEPTH-11) --- */

.search-filters {
  margin-bottom: var(--space-16);
  padding: var(--space-16);
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-xs);
}

.search-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-16);
  margin-top: var(--space-12);
}

.search-filter-grid label {
  display: block;
  margin-top: var(--space-8);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.search-filter-grid select,
.search-filter-grid input {
  width: 100%;
}

.search-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
  margin-top: var(--space-16);
}

/* Removable filter chips (ENT-20 search filters): a dropdown checklist that closes to a row of
   removable chips, replacing a native `<select multiple>`. Level-3 elevation per DESIGN.md
   (white, `--color-border`, `--shadow-md`, default 10px radius) for the panel. */
.multiselect {
  position: relative;
}

.multiselect-label {
  display: block;
  margin-bottom: var(--space-4);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.multiselect-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  width: 100%;
  height: 36px;
  padding: 0 var(--space-12);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
}

.multiselect-trigger:hover {
  border-color: var(--color-border-strong);
}

.multiselect-trigger[aria-expanded="true"] {
  border-color: var(--color-action);
  box-shadow: 0 0 0 2px var(--color-action-tint);
}

.multiselect-trigger-text {
  flex: 1 1 auto;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multiselect-trigger svg {
  flex: 0 0 auto;
  color: var(--color-text-muted);
}

.multiselect-panel {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: 0;
  z-index: 20;
  min-width: 100%;
  max-height: 220px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-default);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
}

.multiselect-panel .checkbox-label {
  display: flex;
  padding: var(--space-4) var(--space-8);
  white-space: nowrap;
}

.multiselect-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.multiselect-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: 22px;
  padding: 0 var(--space-4) 0 var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--color-surface-container);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 12px;
}

.multiselect-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  cursor: pointer;
}

.multiselect-chip-remove:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

.search-summary {
  margin: 0 0 var(--space-12);
  color: var(--color-text-secondary);
  font-size: 13px;
}

.search-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

/* A bordered icon-toggle button for revealing a collapsible filter panel — shared by Search and
   the Contracts page rather than named after whichever one happened to build it first. */
.filters-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-xs);
}

.filters-toggle-btn:hover,
.filters-toggle-btn[aria-expanded="true"] {
  border-color: var(--color-action);
  background: var(--color-action-tint);
  color: var(--color-action);
}

.search-hits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-12);
}

.search-hit {
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.search-hit-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  margin: 0 0 var(--space-8);
  font-weight: 600;
}

.search-snippet {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 13px;
}

.search-hit-meta {
  margin: var(--space-8) 0 0;
  font-size: 12px;
}

/* --- Dashboard metrics (DEPTH-12) --- */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-16);
  margin-bottom: var(--space-24);
}

.metric-card {
  padding: var(--space-20);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.metric-value {
  margin: 0;
  font-family: var(--font-headline);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-text);
}

.metric-label {
  margin: var(--space-8) 0 var(--space-8);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
}

/* AI-written columns are marked once, in the header: it is a property of the column, and repeating
   it on every row is noise a reader learns to ignore. Uses the AI accent, never the action accent —
   the action accent means "you can do something here" (DESIGN.md). */
.ai-marker {
  padding: 0 var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-ai-tint);
  color: var(--color-ai-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* --- Export (DEPTH-13) --- */

.export-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-16);
}

.export-note {
  flex-basis: 100%;
  margin: var(--space-4) 0 0;
  font-size: 12px;
}

/* Same details/summary popover shape as `.contract-more-menu` — one shared idiom for "click a
   button to reveal a short list of actions," not a second implementation of it. */
.export-menu {
  position: relative;
}

.export-menu>summary {
  list-style: none;
  cursor: pointer;
}

.export-menu>summary::-webkit-details-marker {
  display: none;
}

.export-menu-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-4));
  right: 0;
  display: grid;
  min-width: 140px;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-md);
}

.export-menu-action {
  padding: var(--space-8) var(--space-12);
  color: var(--color-text);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  text-decoration: none !important;
}

.export-menu-action:hover {
  background: var(--color-surface-subtle);
}

/* --- Harvey-inspired structural pass: icons, queue groups, status dots, checklist, donut,
   review-queue bar, tag chips. Every one of these restyles or groups data already being shown —
   see the redesign plan's "firm boundary": no fabricated numbers, no redlining, nothing removed. --- */

/* Icons: `[data-icon]` marks any element app.js has injected an `AcxIcons.svg(...)` into. Written
   last in the cascade on purpose — `.nav-section-link`/`.btn` already set their own `display`, and
   an attribute selector ties with a single class on specificity, so source order is what decides. */
[data-icon] {
  /* `flex`, not `inline-flex`: most elements this attaches to (`.nav-section-link`, the nav
     upload button) are block-level in normal flow, and `inline-flex` was putting them in the
     inline formatting context instead - several nav links then sat side by side and wrapped like
     words instead of stacking one per line. A flex item inside an already-flex parent (`.btn` in
     `.header-user`) lays out identically either way, so this is safe everywhere `data-icon` is used. */
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

[data-icon] svg {
  flex: 0 0 auto;
  opacity: 0.8;
}

.nav-section-link.is-active svg {
  opacity: 1;
}

/* --- Queue/bucket groups: a flat status column becomes a status section with a count. The
   compact nav-sidebar variant reuses `.nav-section-title` directly (DESIGN.md's existing nav
   group heading) rather than inventing a second heading style for the same narrow column. --- */

.queue-group {
  margin-bottom: var(--space-24);
}

.queue-group:last-child {
  margin-bottom: 0;
}

.queue-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0 0 var(--space-12);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.queue-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-surface-container);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

/* The nav pane's own contract-status groups sit directly above its existing "Repository" etc.
   section headings — tightened to the same rhythm as `.nav-section-title` rather than the bigger
   page-content spacing the same component uses elsewhere. */
.nav-pane .queue-group {
  margin-bottom: var(--space-16);
}

.nav-pane .queue-group-header {
  font-size: 11px;
  margin-bottom: var(--space-8);
}

/* --- Status dot: a lighter, workflow-only status vocabulary. Deliberately not a `.badge` variant
   — severity/outcome badges keep their exact documented colors and pill shape (DESIGN.md hard
   rules 1/2/6); this is for plain state (current device, pending invite) that carries no risk or
   compliance meaning at all. --- */

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 12px;
  color: var(--color-text-secondary);
}

.status-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--dot-color, var(--color-text-muted));
}

.status-dot-active {
  --dot-color: var(--color-low);
}

.status-dot-current {
  --dot-color: var(--color-action);
}

.status-dot-warning {
  --dot-color: var(--color-medium);
}

.status-dot-neutral {
  --dot-color: var(--color-text-muted);
}

/* --- Tag chip: icon + label, lighter than a `.badge` — for a role/kind shown alongside a status,
   never for severity or compliance. --- */

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 12px;
  color: var(--color-text-secondary);
}

.tag-chip svg {
  flex: 0 0 auto;
  opacity: 0.7;
}

/* --- Vertical processing checklist: the same stage data `.stage-stepper` already computes,
   shown as a Harvey-style vertical list instead of (or, on request, alongside) the horizontal one.
   Collapses to one line once the job reaches a terminal state, rather than vanishing outright. --- */

.stage-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.stage-checklist-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding-bottom: var(--space-16);
}

.stage-checklist-item:last-child {
  padding-bottom: 0;
}

.stage-checklist-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 20px;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
}

.stage-checklist-item-done:not(:last-child)::after {
  background: var(--color-low);
}

.stage-checklist-glyph {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-container);
  color: var(--color-text-muted);
  position: relative;
  z-index: 1;
}

.stage-checklist-glyph svg {
  width: 12px;
  height: 12px;
}

.stage-checklist-item-done .stage-checklist-glyph {
  background: var(--color-low);
  color: var(--color-action-contrast);
}

.stage-checklist-item-current .stage-checklist-glyph {
  background: var(--color-action);
  color: var(--color-action-contrast);
  animation: acx-stage-pulse 1.6s ease-out infinite;
}

.stage-checklist-item-failed .stage-checklist-glyph {
  background: var(--color-critical);
  color: var(--color-action-contrast);
}

.stage-checklist-label {
  font-size: 13px;
  color: var(--color-text);
  padding-top: 1px;
}

.stage-checklist-item-upcoming .stage-checklist-label {
  color: var(--color-text-muted);
}

.stage-checklist-item-failed .stage-checklist-label {
  color: var(--color-error);
  font-weight: 500;
}

@keyframes acx-stage-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(51, 96, 143, 0.35);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(51, 96, 143, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-checklist-item-current .stage-checklist-glyph {
    animation: none;
  }
}

.stage-checklist-summary-wrap {
  margin-bottom: var(--space-8);
}

.stage-checklist-summary {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-secondary);
  list-style: none;
}

.stage-checklist-summary::-webkit-details-marker {
  display: none;
}

.stage-checklist-summary::marker {
  content: "";
}

/* --- Column chart: pure CSS bars for a real time series (contracts added, risk findings
   identified, one bar per calendar month) — magnitude only, in the same single neutral
   `--color-action` a `.trend-bar`/distribution-row bar already uses; never a color borrowed from
   an unrelated axis. `--column-pct` (0-100%) is computed once per instance and set inline, the
   same technique `--donut-stops` below uses. --- */

.column-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-12);
  padding-top: var(--space-20);
  overflow-x: auto;
}

.column-chart-col {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  min-width: 40px;
}

.column-chart-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
}

.column-chart-bar-track {
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 32px;
  height: 96px;
}

.column-chart-bar {
  display: block;
  width: 100%;
  height: var(--column-pct, 0%);
  min-height: 2px;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  background: var(--color-action);
}

.column-chart-label {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* --- Dual-series column chart: the same technique, paired — two bars per point (contracts added,
   risk findings identified, per day) so both real series compare directly at a glance. Each
   series keeps one fixed, non-reserved color (never a severity/status/AI-generated color) rather
   than per-value color the way a donut or distribution row would use one. With many points (a
   30-day window) there is no room for an always-on value label per bar, so each column carries its
   exact numbers in a `title` tooltip instead. */
.dual-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
  padding-top: var(--space-12);
  overflow-x: auto;
}

.dual-chart-col {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  min-width: 20px;
}

.dual-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 96px;
}

.dual-chart-bar {
  display: block;
  width: 7px;
  height: var(--bar-pct, 0%);
  min-height: 2px;
  border-radius: 2px 2px 0 0;
}

.dual-chart-bar-a {
  background: var(--color-action);
}

.dual-chart-bar-b {
  background: var(--color-ink);
}

.dual-chart-label {
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.dual-chart-legend {
  list-style: none;
  display: flex;
  gap: var(--space-16);
  margin: var(--space-12) 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.dual-chart-legend-item {
  position: relative;
  padding-left: var(--space-16);
}

.dual-chart-legend-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.dual-chart-legend-item-a::before {
  background: var(--color-action);
}

.dual-chart-legend-item-b::before {
  background: var(--color-ink);
}

/* --- Donut chart: pure CSS `conic-gradient`, no library. `--donut-stops` is computed per instance
   and set inline (the same technique `.progress-fill`'s `style="width:{n}%"` already uses in
   contract.js — dynamic per-instance geometry, not a style scattered in place of a token). --- */

.donut-chart-row {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  flex-wrap: wrap;
}

.donut-chart {
  position: relative;
  width: 140px;
  height: 140px;
  flex: 0 0 auto;
}

.donut-chart-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--donut-stops, var(--color-surface-container) 0 100%));
}

.donut-chart-hole {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.donut-chart-value {
  font-family: var(--font-headline);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-text);
}

.donut-chart-caption {
  margin-top: 2px;
  font-size: 11px;
  color: var(--color-text-muted);
}

.donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  flex: 1 1 220px;
}

.donut-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  text-decoration: none;
  color: var(--color-text);
  font-size: 13px;
}

.donut-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: 0 0 auto;
  background: var(--swatch-color, var(--color-text-muted));
}

.donut-legend-value {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* --- Review-queue bar: a live count above the Risks section, computed from data the Analysis tab
   already fetches (`listCorrections` + the finding list). Additive only — every finding-card below
   it keeps its own Approve/Reject controls exactly as before. --- */

.review-queue-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-16) var(--space-20);
  margin-bottom: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-xs);
}

.review-queue-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review-queue-stat-value {
  font-family: var(--font-headline);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-text);
}

.review-queue-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

/* --- Modal / dialog (Level 4): a centered confirm surface. DESIGN.md specified this shape from
   the start; `dialog.js`'s `AcxDialog.confirm()` is the first thing to actually build it, so every
   destructive/consequential action from here on shares one focus-trapped, Esc-closes,
   focus-returns-to-trigger implementation instead of each screen inventing its own. --- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-overlay-backdrop);
  /* A soft blur on the page behind every modal, confirm/prompt included — the one part of a
     "premium" popup treatment that reads as more polish everywhere, not less clarity for a
     destructive confirm (the dialog surface itself, not the dimmed page behind it, is where that
     clarity actually lives). */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
  z-index: 1050;
}

.modal {
  width: 100%;
  max-width: 440px;
  background: var(--color-surface);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
  padding: var(--space-24);
}

/* A wider Level-4 surface for a whole form (`AcxDialog.panel()`) rather than confirm/prompt's one
   sentence or field — the create-contract flow is the first caller. Its own header carries the
   title plus an explicit close control, since "back out without deciding" is a normal action here
   in a way it usually isn't for a yes/no confirm. */
.modal-panel {
  max-width: 560px;
  max-height: calc(100vh - var(--space-24) * 2);
  display: flex;
  flex-direction: column;
}

.modal-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
}

.modal-panel-head .modal-title {
  margin: 0;
}

.modal-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  cursor: pointer;
}

.modal-close:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

.modal-panel-body {
  overflow-y: auto;
}

/* --- Consolidated settings workspace --- */

.settings-page>.page-header {
  margin-bottom: var(--space-24);
}

.settings-content {
  min-width: 0;
}

.settings-content .page-header {
  margin-bottom: var(--space-12);
}

.settings-content .page-header h2,
.settings-content .page-header-text h2 {
  margin: 0;
}

.settings-section {
  margin-bottom: 0;
}

.settings-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
}

.settings-content-header h2,
.settings-content-header p {
  margin: 0;
}

.settings-content-header p {
  margin-top: var(--space-4);
}

.settings-primary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.settings-panel {
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-xs);
}

.settings-panel+.settings-panel {
  margin-top: var(--space-16);
}

.settings-panel>h3 {
  margin-top: 0;
}

.settings-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-16);
  margin: var(--space-16) 0 0;
}

.settings-facts-grid div {
  min-width: 0;
}

.settings-facts-grid dt {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.settings-facts-grid dd {
  margin: var(--space-4) 0 0;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.modal-form>p,
.modal-form .field,
.modal-form .form-grid {
  margin-block: 0;
}

.modal-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-16);
}

@media (max-width: 768px) {
  .settings-content-header {
    flex-direction: column;
  }

  .settings-primary-actions {
    justify-content: flex-start;
  }

  .contract-deadline-summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* --- Contract repository: portfolio -> workspace/case -> contract --- */

.repository-page,
.repository-cases-table {
  width: 100%;
}

.repository-page-header {
  margin-bottom: var(--space-16);
}

.repository-content,
.repository-section,
.repository-detail {
  min-width: 0;
}

.repository-section-header,
.repository-panel-heading,
.repository-entity-card-head,
.repository-entity-title-row,
.repository-header-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
}

.repository-section-header {
  margin-bottom: var(--space-16);
}

.repository-section-header h2,
.repository-section-header p,
.repository-panel-heading h3,
.repository-panel-heading p,
.repository-entity-card h3,
.repository-entity-card p {
  margin: 0;
}

.repository-section-header p,
.repository-panel-heading p,
.repository-entity-card p {
  margin-top: var(--space-4);
}

.repository-entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-16);
}

/* Flex column so a row-mate stretched taller by the grid's default `align-items: stretch` (see
   `.repository-entity-grid`) has somewhere for that leftover height to go: `.repository-card-stats`
   below claims it via `margin-top: auto`, landing at the same bottom edge on every card in the row
   regardless of whether its own description took one line or two. */
.repository-entity-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-xs);
}

/* A flex item's default min-width is `auto`, meaning it refuses to shrink below its content's
   intrinsic width — so a long, unbroken description forced the row wider than the card instead of
   wrapping inside it, and dragged the "Open" button (the row's other flex item, `align-items:
   flex-start`) along with it. Same fix for the workspace/case detail header, which shares the
   identical structure — there `flex: 1 1 auto` additionally claims the header row's remaining
   width explicitly, the same split `.page-header-text`/`.page-header-actions` already use, so the
   action-button cluster next to it reserves exactly its own content width instead of being
   squeezed into wrapping across extra rows by a long description competing for the same space. */
.repository-entity-card-head>div:first-child {
  min-width: 0;
}

.repository-detail-header>div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

/* Clamped rather than left to grow: two cards in the same grid row should end at the same height
   regardless of whose description happens to be longer — the row-mate-height rule the dashboard
   grid already follows (see DESIGN.md's thirteenth revision), applied here to a card grid instead. */
.repository-entity-card p.muted {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.repository-entity-card.is-archived {
  background: var(--color-surface-subtle);
}

.repository-entity-title-row {
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.repository-entity-title-row h2,
.repository-entity-title-row h3 {
  margin: 0;
}

.repository-card-stats,
.repository-overview-stats,
.repository-facts-grid {
  display: grid;
  margin: var(--space-16) 0 0;
}

.repository-card-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-12);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border);
  /* Claims the card's leftover stretched height (see `.repository-entity-card`'s own comment)
     instead of sitting wherever the head block's content happens to end. */
  margin-top: auto;
}

.repository-overview-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-16);
  padding: var(--space-16);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
}

.repository-facts-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-16);
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
}

.repository-card-stats div,
.repository-overview-stats div,
.repository-facts-grid div {
  min-width: 0;
}

.repository-card-stats dt,
.repository-overview-stats dt,
.repository-facts-grid dt {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.repository-card-stats dd,
.repository-overview-stats dd,
.repository-facts-grid dd {
  margin: var(--space-4) 0 0;
  color: var(--color-text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.repository-overview-stats dd {
  font-size: 18px;
}

.repository-back-link {
  display: inline-block;
  margin-bottom: var(--space-12);
  color: var(--color-text-secondary);
  font-size: 13px;
  text-decoration: none;
}

.repository-back-link:hover {
  color: var(--color-action);
}

.repository-detail-header {
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.repository-header-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  /* Reserves exactly its own buttons' width rather than being squeezed narrower by however much
     room the header's text column happens to claim — the same split `.page-header-actions` uses
     opposite `.page-header-text`'s `flex: 1 1 auto`. */
  flex: 0 0 auto;
}

.repository-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  margin-top: var(--space-16);
}

.repository-detail-grid > .settings-panel,
.repository-detail-grid > .settings-panel + .settings-panel {
  margin-top: 0;
}

.repository-detail-wide {
  grid-column: 1 / -1;
}

.repository-panel-heading {
  align-items: center;
  margin-bottom: var(--space-12);
}

.repository-case-description {
  margin-top: var(--space-16);
}

.repository-person-list,
.repository-linked-list {
  display: grid;
  gap: var(--space-8);
  padding: 0;
  margin: 0;
  list-style: none;
}

.repository-person-list li,
.repository-linked-list li {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  padding: var(--space-8);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-control);
}

.repository-person-list li>span:nth-child(2),
.repository-linked-list li>span:first-child {
  display: grid;
  min-width: 0;
  margin-right: auto;
}

.repository-person-list small,
.repository-linked-list small {
  color: var(--color-text-muted);
}

.repository-person-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  color: var(--color-action-active);
  font-size: 12px;
  font-weight: 700;
  background: var(--color-action-tint);
  border-radius: var(--radius-pill);
}

.portfolio-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.portfolio-toolbar-actions,
.active-filter-row,
.contract-utility-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

/* The page-local search box and the filter-panel toggle read as one control, not two stacked
   rows — `.portfolio-toolbar-actions` above wraps by default for the other contexts it's shared
   with, but here `.list-search`'s own flex-shrink already keeps the input usable at any width, so
   there is no good reason for the icon button to ever drop to a second line beneath it. */
.portfolio-toolbar-actions {
  flex-wrap: nowrap;
}

.active-filter-row {
  margin-bottom: var(--space-12);
}

.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  color: var(--color-text-secondary);
  font-size: 12px;
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

.active-filter-chip button {
  width: 20px;
  height: 20px;
  padding: 0;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.taxonomy-dialog-grid {
  align-items: start;
}

.taxonomy-rename-form {
  width: 100%;
}

.taxonomy-delete-confirm {
  width: 100%;
}

.taxonomy-delete-confirm>span {
  display: grid;
  min-width: 0;
  margin-right: auto;
}

.taxonomy-delete-confirm small {
  color: var(--color-text-muted);
}

.upload-destination {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4) var(--space-8);
  padding: var(--space-12);
  margin-bottom: var(--space-16);
  background: var(--color-action-tint);
  border: 1px solid var(--color-action);
  border-radius: var(--radius-control);
}

.upload-destination-label {
  grid-column: 1 / -1;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.upload-organization-details {
  padding: var(--space-12);
  margin-bottom: var(--space-16);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}

.upload-organization-details summary {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}

.upload-organization-details summary::-webkit-details-marker {
  display: none;
}

/* A small rotating chevron in place of the native disclosure triangle, so the control reads as
   part of the field system (theme colors, consistent sizing) instead of a raw browser default. */
.upload-organization-details summary::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--color-text-muted);
  border-bottom: 1.5px solid var(--color-text-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.upload-organization-details[open] summary::before {
  transform: rotate(45deg);
}

.upload-organization-fields {
  display: grid;
  gap: var(--space-16);
  margin-top: var(--space-16);
}

/* `.field` already carries its own `margin-bottom` for stacking in a plain form; inside this grid
   that would double up with `gap` and blow out the space before the next control (Cases/Tags) —
   the grid gap alone is the source of truth for spacing here. */
.upload-organization-fields > .field {
  margin-bottom: 0;
}

.contract-header-status {
  margin: var(--space-8) 0;
}

.contract-more-menu {
  position: relative;
}

.contract-more-menu>summary {
  list-style: none;
  cursor: pointer;
}

.contract-more-menu>summary::-webkit-details-marker {
  display: none;
}

.contract-more-menu-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-4));
  right: 0;
  display: grid;
  min-width: 190px;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-md);
}

.contract-menu-action {
  padding: var(--space-8) var(--space-12);
  color: var(--color-text);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  cursor: pointer;
}

.contract-menu-action:hover {
  background: var(--color-surface-subtle);
}

.contract-menu-action.is-danger {
  color: var(--color-error);
}

@media (max-width: 768px) {

  .repository-section-header,
  .repository-entity-card-head,
  .repository-detail-header,
  .repository-panel-heading,
  .portfolio-toolbar {
    flex-direction: column;
  }

  .repository-header-actions,
  .portfolio-toolbar-actions {
    justify-content: flex-start;
  }

  /* `.portfolio-toolbar` switches to a column above, so without a width this row (the page-local
     search box plus the filter toggle) shrinks to its own content size and centers inside the
     column via the toolbar's own `align-items: center` — landing the search box adrift in the
     middle of the page instead of flush left where the rest of the page's content sits. */
  .portfolio-toolbar-actions {
    width: 100%;
  }

  .repository-overview-stats,
  .repository-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .repository-card-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .repository-detail-wide {
    grid-column: auto;
  }
}

/* The "premium glassmorphism" surface: a frosted, translucent pane over the blurred backdrop
   above, rather than the flat opaque `--color-surface` every other Level-4 dialog uses. Built from
   the same warm palette DESIGN.md already specifies for Level 4 (`--shadow-lg`, `--radius-panel`,
   `--color-border`) — only the surface itself gains translucency and blur; the elevation, corner
   radius, and shadow stay exactly the system's own Level-4 values, so this reads as "the same
   modal, in glass" rather than a different component. Reserved for compositional/creation flows
   (see `dialog.js`'s `panel({ glass })`) — a destructive confirm should look certain, not decorative. */
.modal-glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.modal-title {
  margin: 0 0 var(--space-12);
  font-family: var(--font-headline);
  font-size: 20px;
  color: var(--color-text);
}

.modal-body {
  color: var(--color-text-secondary);
  font-size: 14px;
  margin-bottom: var(--space-20);
}

.modal-body p {
  margin: 0 0 var(--space-8);
}

.modal-body p:last-child {
  margin-bottom: 0;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
}

.modal-actions .btn {
  width: auto;
}

/* --- Loading skeletons: a shape where the content will be, instead of the word "Loading…".
   Two reasons beyond looks — the page does not jump when content lands, and a reader can tell a
   slow screen from an empty one, which bare text cannot. Announced politely, never as an alert. --- */

.skeleton {
  background: linear-gradient(90deg,
      var(--color-surface-container) 0%,
      var(--color-surface-subtle) 50%,
      var(--color-surface-container) 100%);
  background-size: 200% 100%;
  animation: acx-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-control);
}

@keyframes acx-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}

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

.skeleton-line {
  height: 12px;
}

.skeleton-line-title {
  height: 24px;
  width: 40%;
  margin-bottom: var(--space-8);
}

.skeleton-line-short {
  width: 55%;
}

.skeleton-card {
  height: 104px;
  border-radius: var(--radius-panel);
}

/* --- Command-Center dashboard --- */

.dashboard-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.dashboard-stage .page-header {
  margin-bottom: 0;
}

.dashboard-stage .page-header>p.muted {
  margin: 0;
}

.dashboard-stage .metric-grid {
  margin-bottom: 0;
}

.dashboard-stage .note-panel {
  margin: 0;
}

/* `display: flex; flex-direction: column` so a panel paired in `.dashboard-grid` with a taller
   sibling (stretched to match it — see that rule) ends at the same bottom edge as its neighbor
   instead of leaving the row's leftover height as a gap between it and the next section below.
   Content still stacks exactly as it did as a block container; only a trailing
   `.dashboard-panel-link`, if the panel has one, behaves differently (see its own rule). */
.dashboard-panel {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-sm);
  padding: var(--space-24);
}

.dashboard-panel h2 {
  margin: 0 0 var(--space-12);
}

/* `margin-top: auto` claims whatever leftover height the flex column above gives it (e.g. a
   shorter list next to a taller row-mate) so the link still sits flush with the panel's own
   bottom edge rather than floating right under a short list with dead space beneath it;
   `padding-top` keeps a real minimum gap for the common case where there is no leftover height
   to claim (a panel with no taller sibling this render). */
.dashboard-panel-link {
  display: inline-block;
  margin-top: auto;
  padding-top: var(--space-12);
  font-size: 13px;
  color: var(--color-action);
  text-decoration: none;
}

.dashboard-panel-link:hover {
  text-decoration: underline;
}

.dashboard-attention-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dashboard-attention-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-12);
  border-radius: var(--radius-default);
  text-decoration: none;
  color: var(--color-text);
}

/* Scoped to the anchor, the way `a.distribution-row:hover` already is: these rows render as a
   plain `<span>` whenever the metric behind them has nowhere honest to drill to, and an unclickable
   row must not light up under the cursor as though it were a link. */
a.dashboard-attention-row:hover {
  background: var(--color-surface-subtle);
}

/* The one attention row that is a real action (opening the notification panel) rather than a link
   — reset to match `a.dashboard-attention-row` exactly, since a bare `<button>` otherwise brings its
   own border, background, and font. */
button.dashboard-attention-row {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.dashboard-attention-row:hover {
  background: var(--color-surface-subtle);
}

.dashboard-attention-row-label {
  font-size: 13px;
}

.dashboard-attention-row-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* A short, soonest-first preview nested under the "Deadlines due soon" attention row (DEPTH-12
   Module 2) — indented one step further than the row it previews, so it reads as "part of that
   row's detail" rather than a sibling item at the same level. */
.dashboard-attention-preview {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0 var(--space-12) 0 calc(var(--space-12) + var(--space-16));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dashboard-attention-preview-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  font-size: 12px;
}

.dashboard-attention-preview-row a {
  color: var(--color-text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-attention-preview-row a:hover {
  text-decoration: underline;
}

/* A 2-up grid of panels once there is room for two, one column below that — the same `auto-fit`
   idiom `.metric-grid` already uses, so no new breakpoint to keep in sync with the layout.
   `align-items` is left at grid's own default (stretch) rather than `start`: two panels sharing a
   row rarely have the same amount of content (a 2-row list next to a 5-row one), and top-aligning
   them left the shorter one's card ending far above its row-mate, so the row's actual height only
   showed up as an inconsistent gap before the next section. Stretching both to the row's own
   height instead keeps their bottom edges flush with each other. */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--space-16);
}

/* --- Distribution list: a ranked bar list for a breakdown with no reserved per-value color
   (contract type, lifecycle state) — see `distributionListHtml`'s own comment in
   `source-viewer.js` for why this isn't a donut. Bar length is the value's share of the largest
   row shown, in the same neutral `--color-action` a progress bar already uses elsewhere. --- */

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

.distribution-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: var(--space-12);
  text-decoration: none;
  color: var(--color-text);
  border-radius: var(--radius-default);
}

a.distribution-row:hover {
  background: var(--color-surface-subtle);
}

.distribution-row-label {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.distribution-row-bar-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-container);
  overflow: hidden;
}

.distribution-row-bar-fill {
  display: block;
  height: 100%;
  background: var(--color-action);
}

.distribution-row-value {
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: right;
  min-width: 2ch;
}

.distribution-more {
  margin: var(--space-8) 0 0;
  font-size: 12px;
}

/* --- Responsive: below 768px tables become stacked records (DESIGN.md) --- */

@media (max-width: 768px) {
  .diff-sides {
    grid-template-columns: 1fr;
  }

  .inline-form {
    align-items: stretch;
  }

  .obligation-facts {
    grid-template-columns: 1fr;
  }

  /* 44x44 minimum touch targets below 1024px. */
  .btn-small {
    min-height: 44px;
    padding: var(--space-8) var(--space-16);
  }
}

.modal-panel.modal-panel-wide {
  max-width: 920px;
}

.contract-deadline-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.contract-deadline-summary h2 {
  margin: 0;
}

.contract-deadline-eyebrow {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}