@font-face {
  font-family: Inter;
  src: url('/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #202124;
  --muted: #6d7178;
  --line: #dfe5e1;
  --paper: #fbfcfa;
  --canvas: #f4f7f5;
  --white: #ffffff;
  --charcoal: #272b2d;
  --teal: #0f766e;
  /* Deep enough for white --text-xs kicker text (5.4:1); the old #df6b4f
     sat at 3.31:1, below the 4.5:1 floor for small type. */
  --coral: #b04a31;
  --gold: #c79a2b;
  --violet: #6f5cc2;
  --soft: #e7eee9;
  --success-soft: #f4faf7;
  --danger: #b3261e;
  /* Tinted-surface system: every mint/sage wash in the app draws from these
     four, so "selected", "tinted", and their hairlines stay one voice. */
  --surface-tint: #f5f9f6;
  --surface-selected: #edf3ef;
  --line-tint: #d2ded7;
  --line-selected: #a7c8bd;
  --text-on-tint: #31594e;
  /* Court-paper voice: the one intentionally warm island (caption previews,
     paper artifacts). Warm stays inside these tokens only. */
  --court-paper: #fffdf8;
  --court-ink: #3a3d3a;
  --court-ink-strong: #14463e;
  --court-muted: #5f5b54;
  --court-line: #c9cec9;
  --court-rule: #b9b4aa;
  --court-rule-soft: #ded8cb;
  --gold-deep: #8a6a1c;
  --shadow: 0 1px 2px rgba(39, 43, 45, 0.06), 0 6px 18px rgba(39, 43, 45, 0.05);
  /* Motion vocabulary: fast for hover/press feedback, base for content
     arriving (caption fill, result cards). One easing, one direction. */
  --motion-fast: 140ms ease;
  --motion-base: 320ms ease;
  /* Typeface roles: UI sans, hash/code mono, court-form serif, and the
     typewriter voice for values filled into form previews. */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, monospace;
  --font-serif: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-typewriter: "Courier New", Courier, monospace;
  /* 4px spacing scale: every gap/padding/margin draws from these. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  /* Type scale: labels (xs/sm), body (base/md), emphasis (lg+). */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 15px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 22px;
  --text-display: 32px;
  color-scheme: light;
  font-family: var(--font-sans);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(15, 118, 110, 0.06) 0 1px, transparent 1px 100%),
    linear-gradient(0deg, rgba(32, 33, 36, 0.04) 0 1px, transparent 1px 100%),
    var(--canvas);
  background-size: 32px 32px, 32px 32px, auto;
  color: var(--ink);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

/* Keyboard focus: one visible system across every control — a 3px teal
   ring that reads on light panels and the charcoal primary button alike.
   No border-radius override here: each control keeps its own corner so
   the ring traces the real shape (pill, 8px button, etc.). */
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

.primary-button:focus-visible {
  outline-color: var(--gold);
}

[hidden] {
  display: none !important;
}

.login-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: var(--space-6);
}

.login-form {
  display: grid;
  gap: var(--space-5);
  width: min(100%, 440px);
  padding: var(--space-7);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.login-form h1 {
  margin: 0;
  font-size: var(--text-display);
  line-height: 1.05;
  letter-spacing: 0;
}

.login-form label {
  display: grid;
  gap: var(--space-2);
}

/* Field labels: one uppercase label voice across every form. Overrides
   (e.g. checkbox row labels) come later in the file and win on order. */
.login-form label span,
.signature-fieldset legend,
.builder-form label span,
.client-request-form span,
.extraction-policy-panel > div > span,
.extraction-policy-form label > span,
.declarant-field span,
.field-editor-header {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
}

.login-form input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: var(--space-3) var(--space-3);
  background: var(--white);
  color: var(--ink);
}

.login-status {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.45;
}

.login-status-error {
  color: var(--danger);
}

/* Errors surface where the user is looking, not only in the chat feed. */
.error-toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  max-width: min(90vw, 560px);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--danger);
  border-radius: 8px;
  background: var(--white);
  color: var(--danger);
  font-size: var(--text-md);
  line-height: 1.45;
  box-shadow: var(--shadow);
  animation: toast-in var(--motion-base);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(var(--space-2));
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.app-shell {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding: var(--space-6);
  background: var(--white);
  border-right: 1px solid var(--line);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--charcoal);
  color: white;
  font-weight: 800;
}

.brand-lockup strong,
.brand-lockup span {
  display: block;
}

.brand-lockup span,
.eyebrow,
.matter-meta,
.metrics p,
.packet-copy p,
.review-list p,
.bundle-list p,
.assistant-message span,
.agent-card p,
.agent-card small,
.rail-status {
  color: var(--muted);
}

.rail-nav {
  display: grid;
  gap: var(--space-1);
}

.rail-nav a {
  color: var(--ink);
  text-decoration: none;
  padding: var(--space-3) var(--space-3);
  border-radius: 8px;
}

.rail-nav a.active,
.rail-nav a:hover {
  background: var(--soft);
}

.rail-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  font-size: var(--text-base);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
}

.workspace {
  padding: var(--space-7);
}

.topbar,
.matter-strip,
.panel-heading,
.document-stage,
.top-actions,
.packet-actions {
  display: flex;
  align-items: center;
}

.topbar,
.matter-strip,
.panel-heading {
  justify-content: space-between;
  gap: var(--space-5);
}

/* The header is the strongest thing in its block: it sits in a banded
   row, separated from the content below by a hairline so the eye lands
   on it first when scanning the long workspace. */
.panel-heading {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line-tint);
}

.panel h2 {
  font-weight: 800;
  line-height: 1.1;
}

.topbar h1,
.matter-strip h2,
.panel h2,
.packet-copy h3 {
  margin: 0;
  letter-spacing: 0;
}

.topbar h1 {
  /* App masthead, not a marketing hero: cap at the display size so the
     chrome stays calm and dense next to the work below it. */
  font-size: clamp(26px, 3vw, var(--text-display));
  line-height: 1;
}

.eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.top-actions,
.packet-actions {
  gap: var(--space-3);
  flex-wrap: wrap;
}

.primary-button,
.secondary-button,
.ghost-button {
  min-height: 40px;
  border-radius: 8px;
  padding: 0 var(--space-4);
  font-weight: 700;
  transition: transform var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast);
}

.primary-button {
  background: var(--charcoal);
  color: white;
  box-shadow: 0 2px 8px rgba(39, 43, 45, 0.18);
}

.secondary-button {
  background: var(--soft);
  color: var(--ink);
}

.link-button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.ghost-button {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

.primary-button:hover:not(:disabled),
.secondary-button:hover:not(:disabled),
.ghost-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.matter-strip {
  margin-top: var(--space-7);
  padding: var(--space-6);
  border: 1px solid var(--line);
  background: var(--white);
}

.matter-strip-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}

.matter-strip-controls select {
  min-height: 42px;
  max-width: 320px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.84);
  color: var(--ink);
  font: inherit;
}

.matter-meta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: var(--text-md);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-7);
}

/* Calm surface hierarchy: panels are bordered paper, not floating cards.
   Shadow is reserved for the few true paper artifacts (login card, caption
   preview, document stack). */
.panel {
  border: 1px solid var(--line-tint);
  background: var(--white);
}

/* Metrics read as a figure row on the canvas, not four more cards. */
.metrics article {
  padding: var(--space-4) 0;
  border-top: 2px solid var(--charcoal);
}

.metrics span {
  display: block;
  font-size: var(--text-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.metrics p {
  margin: var(--space-2) 0 0;
  font-size: var(--text-base);
}

.builder-panel {
  margin-bottom: var(--space-7);
}

/* The builder is an occasional task: collapsed by default so daily work
   (court forms, packets) leads the workspace. */
/* Collapsed, the builder summary is a single tappable row — drop the
   header band so it reads as one control, not an empty header. */
.builder-summary.panel-heading {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.builder-details[open] .builder-summary.panel-heading {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line-tint);
}

.builder-summary {
  list-style: none;
  cursor: pointer;
}

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

.builder-summary::after {
  content: '+';
  margin-left: var(--space-3);
  color: var(--muted);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1;
}

.builder-details[open] .builder-summary::after {
  content: '\2212';
}

.builder-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.builder-form label {
  display: grid;
  gap: var(--space-2);
}

.signature-fieldset {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(251, 252, 250, 0.72);
}

.signature-fieldset legend {
  padding: 0 var(--space-2);
}

.signing-field-grid {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-3);
}

.signing-field-row {
  display: grid;
  grid-template-columns: minmax(132px, auto) minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--line-tint);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  cursor: pointer;
}

.signing-field-row.active {
  border-color: var(--line-selected);
  background: var(--surface-tint);
  box-shadow: inset 0 0 0 1px var(--line-selected);
}

.signing-field-row label {
  min-width: 0;
}

.signing-field-geometry {
  grid-column: 1 / -1;
  min-width: 0;
}

.signing-field-geometry summary {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}

.signing-field-geometry-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.signing-field-toggle,
.signing-field-required {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 42px;
}

.signing-field-toggle input,
.signing-field-required input {
  width: 16px;
  min-height: 16px;
  padding: 0;
}

.signing-field-toggle span,
.signing-field-required span {
  color: var(--ink);
  text-transform: none;
}

.field-editor-panel {
  grid-column: 1 / -1;
  display: grid;
  /* Implicit grid columns size to max-content; a long readout line would
     otherwise force the whole panel past narrow viewports. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.field-editor-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.field-editor-hint {
  color: var(--muted);
  font-size: var(--text-base);
}

.field-editor-header-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.field-editor-page-nav {
  display: inline-grid;
  grid-template-columns: 30px minmax(72px, auto) 30px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-tint);
}

.field-editor-page-nav-button {
  min-height: 28px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: 0 var(--space-2);
  background: transparent;
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 800;
}

.field-editor-page-nav-button:last-child {
  border-right: 0;
  border-left: 1px solid var(--line);
}

.field-editor-page-nav-button:disabled {
  color: var(--muted);
  opacity: 0.45;
  cursor: not-allowed;
}

.field-editor-page-status {
  display: grid;
  min-height: 28px;
  place-items: center;
  padding: 0 var(--space-2);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 800;
  white-space: nowrap;
}

.field-editor-zoom {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(44px, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-tint);
}

.field-editor-zoom-button {
  min-height: 28px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: 0 var(--space-2);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 800;
}

.field-editor-zoom-button:last-child {
  border-right: 0;
}

.field-editor-zoom-button.active {
  background: var(--ink);
  color: white;
}

.field-editor-surface {
  display: grid;
  place-items: center;
  min-height: 280px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-selected);
  cursor: crosshair;
  touch-action: none;
}

.field-editor-page {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 612 / 792;
  overflow: hidden;
  border: 1px solid rgba(39, 43, 45, 0.18);
  background: var(--paper);
  box-shadow: 0 12px 28px rgba(39, 43, 45, 0.1);
}

.field-editor-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: white;
}

.field-editor-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(39, 43, 45, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39, 43, 45, 0.06) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}

.field-editor-box {
  position: absolute;
  box-sizing: border-box;
  z-index: 2;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid var(--teal);
  border-radius: 6px;
  padding: 0;
  background: rgba(15, 118, 110, 0.12);
  color: var(--teal);
  font-size: var(--text-xs);
  font-weight: 800;
  text-overflow: ellipsis;
  cursor: grab;
  touch-action: none;
}

.builder-form input,
.builder-form select,
.builder-form textarea,
.declarant-field input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: var(--space-3) var(--space-3);
  background: rgba(255, 255, 255, 0.84);
  color: var(--ink);
  font: inherit;
}

.builder-form textarea {
  resize: vertical;
  line-height: 1.45;
}

.wide-field {
  grid-column: span 2;
}

.builder-form .primary-button {
  align-self: end;
}

.workgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.85fr);
  gap: var(--space-6);
}

.panel {
  min-width: 0;
  padding: var(--space-5);
}

.panel h2 {
  font-size: var(--text-2xl);
}

.packet-panel,
#evidence {
  min-height: 330px;
}

.soft-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 var(--space-3);
  border-radius: 999px;
  background: var(--surface-selected);
  color: var(--text-on-tint);
  font-size: var(--text-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.document-stage {
  align-items: stretch;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.paper-stack {
  position: relative;
  flex: 0 0 250px;
  min-height: 280px;
}

.paper {
  position: absolute;
  width: 176px;
  min-height: 224px;
  padding: var(--space-5);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 4px 14px rgba(39, 43, 45, 0.08);
}

.paper strong,
.paper i {
  display: block;
}

.paper strong {
  margin: var(--space-5) 0;
}

.paper i {
  height: 7px;
  margin: var(--space-3) 0;
  background: var(--court-rule-soft);
}

.paper-kicker {
  display: inline-flex;
  color: white;
  background: var(--teal);
  padding: var(--space-1) var(--space-2);
  border-radius: 6px;
  font-size: var(--text-xs);
  font-weight: 800;
}

.page-a {
  left: 36px;
  top: 12px;
  transform: rotate(-4deg);
}

.page-b {
  left: 74px;
  top: 30px;
  transform: rotate(5deg);
}

.page-c {
  left: 16px;
  top: 58px;
}

.page-b .paper-kicker {
  background: var(--coral);
}

.page-c .paper-kicker {
  background: var(--violet);
}

.packet-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.packet-copy h3 {
  /* Stay below the panel h2 (20px); an h3 above its parent heading size
     inverts the visual hierarchy. */
  font-size: var(--text-xl);
}

.packet-copy p {
  max-width: 58ch;
  line-height: 1.6;
}

.assistant-panel {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  min-height: 680px;
}

.agent-manager {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.agent-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(251, 252, 250, 0.88);
  color: var(--ink);
  text-align: left;
}

.agent-card.active {
  border-color: rgba(15, 118, 110, 0.36);
  background: var(--surface-selected);
  box-shadow: inset 3px 0 0 var(--teal);
}

.agent-avatar {
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--charcoal);
  color: white;
  font-size: var(--text-sm);
  font-weight: 800;
}

.agent-card strong,
.agent-card em,
.agent-card p,
.agent-card small {
  min-width: 0;
}

.agent-card strong {
  font-size: var(--text-md);
}

.agent-card em {
  justify-self: end;
  align-self: start;
  color: var(--muted);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.agent-card p {
  grid-column: 2 / 4;
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.35;
}

.agent-card small {
  grid-column: 2 / 4;
  font-size: var(--text-sm);
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.chat-header h3 {
  margin: 0;
  font-size: var(--text-xl);
}

.assistant-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  overflow: auto;
  min-height: 170px;
}

.assistant-message {
  padding: var(--space-4);
  border: 1px solid var(--line);
  background: var(--paper);
}

.assistant-message.user {
  background: var(--surface-selected);
  border-color: var(--line-tint);
}

.assistant-message strong,
.assistant-message span {
  display: block;
}

.assistant-message span {
  margin-top: var(--space-1);
  font-size: var(--text-md);
  line-height: 1.5;
}

.quick-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.prompt-chip {
  min-height: 32px;
  border-radius: 999px;
  padding: 0 var(--space-3);
  background: var(--surface-selected);
  color: var(--text-on-tint);
  font-size: var(--text-base);
  font-weight: 700;
}

.prompt-chip:hover {
  background: var(--soft);
}

.agent-action-queue {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.agent-action,
.agent-action-empty {
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.agent-action strong,
.agent-action p,
.agent-action span,
.agent-action small {
  display: block;
  min-width: 0;
}

.agent-action strong {
  font-size: var(--text-md);
}

.agent-action p {
  margin: var(--space-2) 0 var(--space-2);
  line-height: 1.45;
  font-size: var(--text-base);
}

.agent-action small {
  margin-top: var(--space-2);
  color: var(--muted);
  line-height: 1.35;
}

.agent-action-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.agent-action-controls button {
  min-height: 34px;
}

.agent-action-empty {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-base);
}

.client-request-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.client-request-form label {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.client-request-form input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 var(--space-3);
  background: white;
  color: var(--ink);
  font: inherit;
}

.client-request-form button {
  align-self: end;
}

.assistant-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  margin-top: auto;
}

.assistant-form input {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 var(--space-3);
  background: white;
  color: var(--ink);
}

.bundle-list,
.document-list,
.client-request-list,
.review-list,
.recipient-list,
.audit-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.extraction-policy-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--line-tint);
  border-radius: 8px;
  background: var(--surface-tint);
}

.extraction-policy-panel span,
.extraction-policy-panel strong,
.extraction-policy-panel p {
  display: block;
  min-width: 0;
}

.extraction-policy-panel strong {
  margin-top: var(--space-1);
  font-size: var(--text-lg);
}

.extraction-policy-panel p {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.4;
}

.extraction-policy-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(150px, 0.55fr) minmax(150px, 0.7fr) minmax(190px, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-tint);
}

.extraction-policy-form[hidden] {
  display: none;
}

.extraction-policy-form label {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.extraction-policy-form input,
.extraction-policy-form select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 var(--space-3);
  background: white;
  color: var(--ink);
  font: inherit;
}

.extraction-policy-toggle {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 42px;
}

.extraction-policy-toggle input {
  width: 16px;
  min-height: 16px;
  padding: 0;
}

.extraction-policy-toggle span {
  color: var(--ink);
}

.bundle-item,
.document-item,
.client-request-item,
.review-item,
.recipient-item,
.audit-item {
  padding: var(--space-4);
  border: 1px solid var(--line);
  background: var(--paper);
}

.bundle-item strong,
.document-item strong,
.client-request-item strong,
.review-item strong,
.recipient-item strong,
.audit-item strong {
  display: block;
}

.bundle-item p,
.document-item p,
.client-request-item p,
.review-item p,
.recipient-item p,
.audit-item p {
  margin: var(--space-2) 0 0;
  line-height: 1.5;
  font-size: var(--text-md);
}

.client-request-item small {
  display: block;
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
}

.document-item .link-button {
  display: inline-flex;
  min-height: 34px;
  margin-top: var(--space-3);
}

.document-item > .hash,
.document-item > .recipient-state {
  display: block;
  margin-top: var(--space-2);
}

.document-item > .recipient-state {
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.document-item > .secondary-button {
  min-height: 34px;
  margin-top: var(--space-3);
  margin-left: var(--space-2);
}

.filing-rollout {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.filing-rollout p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.filing-channel-list,
.filing-package-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.filing-channel-list .recipient-state {
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef4f2;
}

.filing-package-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.filing-package-item p,
.filing-package-item .recipient-state {
  grid-column: 1;
  margin: 0;
}

.filing-package-item .secondary-button,
.filing-package-item .link-button {
  min-height: 34px;
}

.recipient-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-3);
  align-items: center;
}

.recipient-item p,
.recipient-state {
  grid-column: 1;
}

.recipient-item button {
  grid-column: 2;
  grid-row: auto;
  align-self: center;
}

.delivery-failed {
  color: var(--danger);
}

/* Status labels read as quiet uppercase metadata, not 20+ teal flags;
   the weight + caps already signal "label". */
.recipient-state {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
}

.proof-editor {
  width: 100%;
  min-height: 220px;
  margin: var(--space-5) 0 0;
  box-sizing: border-box;
  overflow: auto;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: var(--space-4);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.proof-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
}

/* Hashes are evidence metadata, not links: quiet mono in --muted with
   tabular figures so the digits line up, instead of a teal flag that
   competes with real actions. */
.hash {
  display: block;
  margin-top: var(--space-2);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.export-button {
  min-height: 34px;
  margin-top: var(--space-3);
  border-radius: 8px;
  padding: 0 var(--space-3);
  background: var(--soft);
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 800;
}

/* --- Court Forms desk ----------------------------------------------------
   The form picker reads like a shelf of Judicial Council forms; the preview
   is a miniature of the shared JC caption block that fills live from the
   matter, in a typewriter voice, before the real PDF is generated. */

/* Major sections breathe apart so the eye finds groups without reading.
   Within-section spacing stays at --space-5; between top-level blocks
   uses the wider --space-7 step. */
.court-forms-panel,
.matter-profile-panel {
  margin-bottom: var(--space-7);
}

.matter-profile-form .primary-button {
  align-self: end;
}

.form-attachment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--line-tint);
}

.form-attachment-label {
  color: var(--muted);
  font-size: var(--text-base);
}

.court-forms-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr);
  gap: var(--space-6);
  margin-top: var(--space-5);
}

.form-family-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.form-family-chip {
  min-height: 30px;
  padding: 0 var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-base);
  font-weight: 700;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}

.form-family-chip:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.form-family-chip.active {
  border-color: var(--teal);
  background: var(--teal);
  color: white;
}

.form-card-list {
  display: grid;
  gap: var(--space-2);
  max-height: 430px;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
}

.form-card {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  text-align: left;
  /* Same hover voice as chips and rail links: surface and border shift,
     no slide, no elevation — calm rows in a long list. */
  transition: background var(--motion-fast), border-color var(--motion-fast);
}

.form-card:hover {
  background: var(--surface-tint);
  border-left-color: var(--gold);
}

.form-card.selected {
  border-color: var(--teal);
  border-left: 3px solid var(--teal);
  background: var(--surface-tint);
}

.form-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.form-card-number {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
}

.form-card-title {
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.35;
}

.form-badge {
  flex-shrink: 0;
  padding: 2px var(--space-2);
  border-radius: 999px;
  background: var(--surface-selected);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* "Full auto-fill" is the common case (most cards), so it stays the
   calm default voice — a sage tint with the muted-on-tint ink, not 36
   saturated teal flags. Gold/violet still call out the exceptions. */
.form-badge-full {
  background: var(--surface-selected);
  color: var(--text-on-tint);
}

.form-badge-attachment {
  background: rgba(199, 154, 43, 0.14);
  color: var(--gold-deep);
}

.form-badge-info {
  background: rgba(111, 92, 194, 0.12);
  color: var(--violet);
}

.court-forms-stage {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.caption-preview {
  display: grid;
  gap: 0;
  padding: var(--space-6) var(--space-6);
  border: 1px solid var(--court-line);
  background:
    linear-gradient(0deg, rgba(39, 43, 45, 0.018) 0 1px, transparent 1px 100%),
    var(--court-paper);
  background-size: auto 26px, auto;
  box-shadow: 0 4px 16px rgba(39, 43, 45, 0.10);
  font-family: var(--font-serif);
}

.caption-preview small {
  /* 10px uppercase labels need more contrast headroom than body text. */
  color: var(--court-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.caption-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  border-bottom: 1.5px solid var(--court-ink);
}

.caption-attorney {
  display: grid;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-3) 0;
}

.caption-court-use {
  display: grid;
  align-content: start;
  justify-items: center;
  padding: var(--space-2);
  border-left: 1.5px solid var(--court-ink);
}

.caption-court {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1.5px solid var(--court-ink);
}

.caption-mid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  border-bottom: 1.5px solid var(--court-ink);
}

.caption-parties {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
}

.caption-case {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-3) 0 var(--space-3) var(--space-3);
  border-left: 1.5px solid var(--court-ink);
}

.caption-line {
  display: grid;
  gap: var(--space-1);
}

.caption-fill {
  color: var(--court-ink-strong);
  font-family: var(--font-typewriter);
  font-size: var(--text-base);
  font-weight: 700;
  overflow-wrap: anywhere;
  animation: caption-fill-in var(--motion-base);
}

@keyframes caption-fill-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.caption-blank {
  display: inline-block;
  min-height: 14px;
  border-bottom: 1px solid var(--court-rule);
}

.caption-blank-wide { width: 92%; }
.caption-blank-mid { width: 55%; }
.caption-blank-short { width: 30%; }

.caption-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1.5px solid var(--court-ink);
}

.caption-title-bar strong {
  font-size: var(--text-lg);
  letter-spacing: 0.01em;
}

.caption-form-number {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-3);
  border: 1.5px solid var(--court-ink);
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.caption-service-facts {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

.court-forms-controls {
  display: flex;
  align-items: end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.court-forms-controls .declarant-field {
  /* Keeps the input usable when the row wraps on narrow viewports. */
  min-width: 220px;
}

.declarant-field {
  display: grid;
  flex: 1;
  gap: var(--space-2);
}

.court-form-hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-base);
}

.court-form-result {
  display: grid;
  gap: var(--space-3);
}

.form-result-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4);
  border: 1px solid var(--line-selected);
  border-radius: 8px;
  background: var(--success-soft);
  /* New work product arriving gets the same entrance as the caption fill:
     motion marks state changes, not decoration. */
  animation: caption-fill-in var(--motion-base);
}

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

.form-result-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-base);
  overflow-wrap: anywhere;
}

.form-result-card .secondary-button {
  justify-self: start;
}

@media (max-width: 980px) {
  .court-forms-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-card-list {
    max-height: 260px;
  }

  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .rail {
    position: sticky;
    top: 0;
    z-index: 2;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    /* Grid items default to min-width:auto, so the rail's max-content nav
       (~443px) propagated to the whole page and forced horizontal scroll on
       phones. min-width: 0 keeps the scrolling inside the rail. */
    min-width: 0;
  }

  .rail-nav {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
  }

  .rail-status {
    margin-top: 0;
    margin-left: auto;
    min-width: max-content;
  }

  .workgrid,
  .metrics,
  .builder-form,
  .client-request-form,
  .extraction-policy-form {
    /* minmax(0, 1fr): a bare 1fr track has min-content minimum, so wide
       intrinsic children (the file input) force horizontal page scroll. */
    grid-template-columns: minmax(0, 1fr);
  }

  .signature-fieldset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .signing-field-geometry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wide-field {
    grid-column: span 1;
  }

  .assistant-panel {
    min-height: 620px;
  }
}

@media (max-width: 720px) {
  .rail {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .rail-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .rail-status {
    display: none;
  }

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

  .topbar,
  .matter-strip,
  .document-stage,
  .extraction-policy-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .extraction-policy-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .matter-meta {
    justify-content: flex-start;
  }

  .matter-strip-controls {
    width: 100%;
    align-items: flex-start;
  }

  .matter-strip-controls select {
    width: 100%;
    max-width: 100%;
  }

  .paper-stack {
    width: 100%;
    min-height: 260px;
  }

  .assistant-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .signature-fieldset {
    grid-template-columns: minmax(0, 1fr);
  }

  .signing-field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .signing-field-geometry-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .agent-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .agent-card em {
    grid-column: 2;
    justify-self: start;
  }

  .agent-card p,
  .agent-card small {
    grid-column: 1 / 3;
  }

  .recipient-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .recipient-item button {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  /* Phones have no cursor and fat pointers: every tappable control gets
     the 44px floor. Desktop keeps the denser chrome. */
  .primary-button,
  .secondary-button,
  .ghost-button,
  .form-family-chip,
  .prompt-chip,
  .agent-action-controls button,
  .export-button,
  .document-item .link-button,
  .field-editor-page-nav-button,
  .field-editor-zoom-button {
    min-height: 44px;
  }

  .filing-package-item {
    grid-template-columns: 1fr;
  }
}

/* Motion is feedback here (hover nudges, caption fill-in); switch it off
   for users who ask for reduced motion — including the hover offsets, so
   nothing snaps to a moved position. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .primary-button:hover:not(:disabled),
  .secondary-button:hover:not(:disabled),
  .ghost-button:hover:not(:disabled) {
    transform: none;
  }
}

/* Field tagging & review surface (the attorney authoring surface). */
.field-tagging-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

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

.field-tagging-surface {
  position: relative;
  min-height: 320px;
  cursor: crosshair;
}

/* Each recognized candidate renders as an editable, draggable box. */
.field-overlay-box {
  position: absolute;
  box-sizing: border-box;
  z-index: 2;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 2px solid var(--teal);
  border-radius: 6px;
  background: rgba(15, 118, 110, 0.1);
  color: var(--teal);
  font-size: var(--text-xs);
  font-weight: 800;
  cursor: grab;
  touch-action: none;
}

.field-overlay-box.selected {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.field-overlay-label {
  pointer-events: none;
}

.field-overlay-tag {
  position: absolute;
  top: -16px;
  left: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  pointer-events: none;
  white-space: nowrap;
}

.field-overlay-box .resize-handle {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--ink);
  cursor: nwse-resize;
}

/* Trust bands drive visual treatment (spec §2). */
.trust-band-verified {
  border-style: solid;
  border-color: var(--teal);
  background: rgba(15, 118, 110, 0.08);
}

.trust-band-proposed {
  border-style: solid;
  border-color: #6b7280;
  background: rgba(107, 114, 128, 0.08);
  color: #4b5563;
}

/* Needs-review (vision / scanned / sub-threshold): loud, dashed amber, must be touched. */
.trust-band-needs-review,
.field-overlay-box.flagged {
  border-style: dashed;
  border-color: #b45309;
  background: rgba(180, 83, 9, 0.12);
  color: #92400e;
  animation: field-tagging-pulse 1.2s ease-in-out 2;
}

.trust-band-manual {
  border-style: solid;
  border-color: var(--ink);
}

@keyframes field-tagging-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(180, 83, 9, 0); }
}

.field-tagging-inspector {
  display: grid;
  gap: var(--space-2);
}

.field-tagging-inspector label {
  display: grid;
  gap: 4px;
}

.field-tagging-unresolved {
  color: #92400e;
  font-weight: 700;
  margin: 0;
}

.field-tagging-commit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.field-tagging-required {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ===========================================================================
   Send-for-signature flow — the prominent, linear send path inside the cockpit.
   =========================================================================== */

/* The primary entry: a teal-accented CTA that reads as the one clear action. */
.send-cta {
  background: var(--teal);
  color: white;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25);
}

.send-cta:hover {
  background: var(--court-ink-strong);
}

/* Rail entry — a full-width call-to-action above the section nav. */
.rail-send-cta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: none;
  border-radius: 8px;
  background: var(--teal);
  color: white;
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25);
  transition: transform var(--motion-fast), background var(--motion-fast);
}

.rail-send-cta:hover {
  background: var(--court-ink-strong);
  transform: translateY(-1px);
}

.rail-send-cta-icon {
  font-size: var(--text-lg);
  line-height: 1;
}

/* The guided flow surface: a calm, bordered island that anchors the sequence. */
.send-flow {
  margin: var(--space-5) 0 var(--space-6);
  padding: var(--space-6);
  background: var(--surface-tint);
  border: 1px solid var(--line-selected);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.send-flow-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
}

.send-flow-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.send-flow-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-weight: 700;
  font-size: var(--text-md);
}

.send-flow-step-marker {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line-selected);
  color: var(--text-on-tint);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
}

.send-flow-step.current {
  color: var(--court-ink-strong);
}

.send-flow-step.current .send-flow-step-marker {
  background: var(--teal);
  border-color: var(--teal);
  color: white;
}

.send-flow-step.done .send-flow-step-marker {
  background: var(--court-ink-strong);
  border-color: var(--court-ink-strong);
  color: white;
}

.send-flow-hint {
  margin: var(--space-3) 0 var(--space-4);
  color: var(--text-on-tint);
  font-size: var(--text-md);
}

.send-flow-form {
  display: grid;
  gap: var(--space-4);
}

.send-flow-dropzone {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
  border: 2px dashed var(--line-selected);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}

.send-flow-dropzone:hover {
  border-color: var(--teal);
  background: var(--success-soft);
}

.send-flow-dropzone-title {
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--ink);
}

.send-flow-dropzone-hint {
  color: var(--muted);
  font-size: var(--text-base);
}

.send-flow-dropzone input[type="file"] {
  margin-top: var(--space-2);
  font-size: var(--text-base);
}

.send-flow-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}

.send-flow-fields label {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--muted);
}

.send-flow-fields input {
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
}

.send-flow-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.send-flow-status {
  color: var(--text-on-tint);
  font-size: var(--text-base);
  font-weight: 600;
}

.send-flow-guide h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--ink);
}

.send-flow-guide p {
  margin: 0 0 var(--space-3);
  color: var(--text-on-tint);
  font-size: var(--text-md);
}

.send-flow-empty {
  padding: var(--space-3) var(--space-4);
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--line-tint);
  color: var(--muted) !important;
}

/* A hard detection failure (recognition didn't run) — distinct from the muted
   "no fields detected" empty state so the attorney isn't told the document is
   clean when the request actually errored. Reads as recoverable, not neutral. */
.send-flow-error {
  padding: var(--space-3) var(--space-4);
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--danger);
  color: var(--danger) !important;
}

/* When the flow is running, recede the panels that don't serve a send so the
   eye stays on the 1-2-3 sequence. They stay reachable (and full-opacity on
   hover/focus) — just visually quieted, not removed. */
.send-flow-active #court-forms,
.send-flow-active #matter-profile,
.send-flow-active .builder-panel,
.send-flow-active .assistant-panel,
.send-flow-active #evidence,
.send-flow-active #filingPanel,
.send-flow-active #recipients,
.send-flow-active #proof-preview,
.send-flow-active #audit,
.send-flow-active #client-requests {
  opacity: 0.42;
  filter: saturate(0.7);
  transition: opacity var(--motion-base), filter var(--motion-base);
}

.send-flow-active #court-forms:hover,
.send-flow-active #court-forms:focus-within,
.send-flow-active #matter-profile:hover,
.send-flow-active #matter-profile:focus-within,
.send-flow-active .builder-panel:hover,
.send-flow-active .builder-panel:focus-within,
.send-flow-active .assistant-panel:hover,
.send-flow-active .assistant-panel:focus-within,
.send-flow-active #evidence:hover,
.send-flow-active #evidence:focus-within,
.send-flow-active #filingPanel:hover,
.send-flow-active #filingPanel:focus-within,
.send-flow-active #recipients:hover,
.send-flow-active #recipients:focus-within,
.send-flow-active #proof-preview:hover,
.send-flow-active #proof-preview:focus-within,
.send-flow-active #audit:hover,
.send-flow-active #audit:focus-within,
.send-flow-active #client-requests:hover,
.send-flow-active #client-requests:focus-within {
  opacity: 1;
  filter: none;
}

/* Lift the panels that ARE the send path so they read as the active workspace. */
.send-flow-active #packets,
.send-flow-active #fieldTagging,
.send-flow-active #documents {
  outline: 2px solid var(--line-selected);
  outline-offset: 3px;
  border-radius: 12px;
}