/* Field Capture — single hand-written stylesheet.
   Polished-professional visual system (light + auto dark). No preprocessor, no
   utility framework, no bundler. All class names match the templates/partials;
   this file is presentational only. Token-driven so the dark theme is a single
   prefers-color-scheme override at the bottom. */

:root {
  /* Spacing scale (8-point, multiples of 4) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Typography */
  --font-size-caption: 14px;
  --font-size-body: 16px;
  --font-size-heading: 20px;
  --font-size-display: 30px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Surfaces — page sits a step below cards so white/elevated surfaces lift */
  --color-bg: #F4F6FB;
  --color-surface: #FFFFFF;
  --color-secondary: #EEF2F8;
  --color-border: #E3E8F0;
  --color-border-strong: #CBD5E1;

  /* Accent (deep blue) with interaction shades + soft tint */
  --color-accent: #2563EB;
  --color-accent-hover: #1D4ED8;
  --color-accent-active: #1E40AF;
  --color-accent-soft: #EAF1FE;
  --color-accent-text: #FFFFFF;

  /* Text */
  --color-text: #0F172A;
  --color-muted: #64748B;
  --color-faint: #94A3B8;

  /* Status */
  --color-destructive: #DC2626;
  --color-destructive-hover: #B91C1C;
  --color-destructive-soft: #FEE2E2;
  --color-untouched: #94A3B8;
  --color-captured: #16A34A;
  --color-captured-soft: #DCFCE7;
  --color-damage: #DC2626;
  --color-warning-text: #92400E;
  --color-warning-bg: #FEF3C7;
  --color-warning-border: #FDE68A;

  /* Focus ring */
  --ring: 0 0 0 3px rgba(37, 99, 235, 0.35);

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.16);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Field-ergonomics tap targets */
  --tap-min: 48px;
  --tap-primary: 56px;

  /* App bar height — drives the sticky capture-header offset */
  --app-bar-h: 60px;

  /* Desktop review density (Phase 15). The capture PWA is phone/gloves-first;
     the document-intake + review screens are a desk/mouse tool. A 50-row review
     table at the 56px phone tap height is 2800px of scroll, so review controls
     use their own density tokens. The tap-target tokens above stay reserved to
     the capture screens. */
  --container-wide: 1180px;
  --control-h: 40px;
  --row-h: 44px;

  /* Monospace — verbatim PDF snippets and quantity inputs only. System stack,
     no web font, no network. */
  --font-family-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas,
    "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-3xl);
}

/* Typography roles */
.display {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

.heading {
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}

.body {
  font-size: var(--font-size-body);
  line-height: 1.5;
}

.caption {
  font-size: var(--font-size-caption);
  line-height: 1.4;
  color: var(--color-muted);
}

/* ============================================================
   Top app bar (base.html) — sticky brand bar above all pages
   ============================================================ */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: var(--app-bar-h);
  padding: 0 var(--space-md);
  background: color-mix(in srgb, var(--color-surface) 85%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--color-accent-text);
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-active));
  box-shadow: var(--shadow-sm);
}

.brand-mark svg {
  width: 20px;
  height: 20px;
}

.brand-name {
  font-size: var(--font-size-body);
}

.app-bar-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  min-width: 0;
}

.session-email {
  font-size: var(--font-size-caption);
  color: var(--color-muted);
  max-width: 38vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logout-form {
  margin: 0;
}

/* In-page title block (login, project list) — clean, no chrome box */
.app-header {
  margin: var(--space-sm) 0 var(--space-lg);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--tap-primary);
  padding: 0 var(--space-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, box-shadow 120ms ease,
    transform 80ms ease, border-color 120ms ease, color 120ms ease;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.btn-accent {
  background: var(--color-accent);
  color: var(--color-accent-text);
  box-shadow: var(--shadow-sm);
}

.btn-accent:hover {
  background: var(--color-accent-hover);
  box-shadow: var(--shadow-md);
}

.btn-accent:active {
  background: var(--color-accent-active);
  transform: translateY(1px);
  box-shadow: var(--shadow-sm);
}

.btn-block {
  display: flex;
  width: 100%;
  margin-top: var(--space-lg);
}

/* Subtle text button (logout, delete) — previously unstyled */
.btn-link {
  min-height: var(--tap-min);
  padding: 0 var(--space-sm);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}

.btn-link:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.btn-link:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* ============================================================
   Project list — tappable cards with progress
   ============================================================ */
.project-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0 0 var(--space-lg);
  padding: 0;
}

.project-row {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 140ms ease, transform 100ms ease,
    border-color 140ms ease;
}

.project-row:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--color-border-strong);
}

.project-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  /* leave room for the top-right delete control */
  padding: var(--space-lg) var(--space-2xl) var(--space-lg) var(--space-lg);
  text-decoration: none;
  color: inherit;
}

.project-name {
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.project-address,
.project-claim {
  color: var(--color-muted);
}

/* Per-project progress (added to the card) */
.project-progress {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.project-progress .progress-track {
  flex: 1 1 auto;
}

.project-progress .caption {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-medium);
  color: var(--color-muted);
}

.project-delete-form {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  margin: 0;
}

.project-delete-btn {
  color: var(--color-faint);
}

.project-delete-btn:hover {
  color: var(--color-destructive);
  background: var(--color-destructive-soft);
  text-decoration: none;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.empty-state .body {
  color: var(--color-muted);
  margin: var(--space-sm) 0 0;
}

.empty-state .btn-block {
  margin-top: var(--space-xl);
}

/* ============================================================
   Login / auth card + create form
   ============================================================ */
.auth-card {
  max-width: 420px;
  margin: var(--space-2xl) auto 0;
  padding: var(--space-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.auth-card .app-header {
  margin-top: 0;
  text-align: center;
}

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

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border: 0;
  padding: 0;
  margin: 0;
}

.field-label {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

.optional {
  font-weight: var(--font-weight-regular);
  color: var(--color-muted);
}

.text-input {
  min-height: var(--tap-primary);
  padding: 0 var(--space-md);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-body);
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.text-input::placeholder {
  color: var(--color-faint);
}

.text-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--ring);
}

.checklist-field {
  gap: var(--space-md);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--tap-min);
  padding: 0 var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--font-size-body);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.checkbox-row:hover {
  border-color: var(--color-border-strong);
}

.checkbox-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--color-accent);
}

.field-error {
  color: var(--color-destructive);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

/* ============================================================
   Capture page — sticky header, progress, accordion, task rows
   ============================================================ */
.capture-header {
  position: sticky;
  top: var(--app-bar-h);
  z-index: 10;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.capture-header .display {
  font-size: var(--font-size-heading);
}

.capture-address,
.capture-claim {
  margin: var(--space-xs) 0 0;
}

.capture-progress-caption {
  margin: var(--space-sm) 0 var(--space-xs);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-medium);
}

/* Progress bar component */
.progress-track {
  height: 8px;
  width: 100%;
  background: var(--color-secondary);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.capture-header .progress-track {
  background: var(--color-secondary);
}

.progress-track-sm {
  margin-top: var(--space-xs);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-captured), #22C55E);
  border-radius: var(--radius-pill);
  transition: width 240ms ease;
}

/* First-use field guide: visible without interrupting repeat inspectors. */
.capture-guide {
  margin: 0 0 var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.capture-guide > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--tap-primary);
  padding: var(--space-md);
  cursor: pointer;
  list-style: none;
}

.capture-guide > summary::-webkit-details-marker {
  display: none;
}

.capture-guide > summary span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.capture-guide-action {
  color: var(--color-accent);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.capture-guide[open] .capture-guide-action::before {
  content: "Close ";
}

.capture-guide[open] .capture-guide-action {
  font-size: 0;
}

.capture-guide[open] .capture-guide-action::before {
  font-size: var(--font-size-caption);
}

.capture-guide-body {
  padding: 0 var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.capture-guide-body > p {
  line-height: 1.55;
}

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

.capture-guide-grid section {
  padding: var(--space-md);
  background: var(--color-secondary);
  border-radius: var(--radius-sm);
}

.capture-guide-grid h2 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-body);
}

.capture-guide-grid ul {
  margin: 0;
  padding-left: var(--space-lg);
}

.capture-guide-grid li + li {
  margin-top: var(--space-xs);
}

.capture-guide-finish {
  margin-bottom: 0;
}

/* Native <details>/<summary> accordion as cards */
.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.section-summary {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  justify-content: center;
  min-height: var(--tap-primary);
  padding: var(--space-md);
  background: var(--color-surface);
  cursor: pointer;
  list-style: none;
  transition: background-color 120ms ease;
}

.section-summary:hover {
  background: var(--color-secondary);
}

.section[open] > .section-summary {
  border-bottom: 1px solid var(--color-border);
}

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

.section-summary-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.section-title {
  flex: 1 1 auto;
  font-weight: var(--font-weight-bold);
}

.section-progress-caption {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-medium);
}

.chevron {
  flex: 0 0 auto;
  color: var(--color-accent);
  transition: transform 180ms ease;
}

.section[open] > .section-summary .chevron {
  transform: rotate(90deg);
}

/* Task list inside an expanded section */
.task-list {
  background: var(--color-surface);
}

.task-row {
  padding: var(--space-lg) var(--space-md);
  border-top: 1px solid var(--color-border);
}

.task-row:first-child {
  border-top: 0;
}

.task-state-line {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.state-icon {
  flex: 0 0 auto;
}

.state-untouched {
  color: var(--color-untouched);
}

.state-captured {
  color: var(--color-captured);
}

.task-title {
  flex: 1 1 auto;
  font-weight: var(--font-weight-medium);
}

/* PHOTOS REQUIRED badge (was unstyled) */
.photos-required-badge {
  flex: 0 0 auto;
  padding: 2px var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border: 1px solid var(--color-warning-border);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Optional per-task prompt text */
.task-prompt {
  margin: var(--space-xs) 0 0 calc(24px + var(--space-sm));
  color: var(--color-muted);
}

.report-export-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.report-export-panel h2 {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-heading);
}

.report-export-panel p {
  margin: 0;
  max-width: 62ch;
}

.report-export-actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-sm);
}

.report-download-secondary {
  color: var(--color-accent);
  background: var(--color-surface);
  border-color: var(--color-accent);
}

.report-download-secondary:hover {
  background: var(--color-accent-soft);
}

/* ============================================================
   Capture controls, thumbnails, delete, upload states
   ============================================================ */
.task-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.capture-form {
  margin: 0;
}

/* "Add Photo" button */
.add-photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--tap-primary);
  padding: 0 var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color 120ms ease, box-shadow 120ms ease,
    transform 80ms ease;
}

.add-photo:hover {
  background: var(--color-accent-hover);
  box-shadow: var(--shadow-md);
}

.add-photo:active {
  background: var(--color-accent-active);
  transform: translateY(1px);
}

.add-photo:focus-within {
  outline: none;
  box-shadow: var(--ring);
}

.add-photo .camera-icon {
  flex: 0 0 auto;
}

.cap-spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: var(--color-accent-text);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.capture-form.htmx-request .add-photo {
  opacity: 0.85;
  pointer-events: none;
}

.capture-form.htmx-request .camera-icon {
  display: none;
}

.capture-form.htmx-request .cap-spinner {
  display: inline-block;
}

.capture-form.htmx-request .add-photo-label {
  font-size: 0;
}

.capture-form.htmx-request .add-photo-label::after {
  content: "Uploading\2026";
  font-size: var(--font-size-body);
}

@keyframes spin {
  from {
    transform: translateZ(0) rotate(0deg);
  }
  to {
    transform: translateZ(0) rotate(360deg);
  }
}

.upload-error {
  margin: var(--space-sm) 0 0;
  color: var(--color-destructive);
  font-weight: var(--font-weight-bold);
}

/* Thumbnail grid */
.thumb-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.thumb-tile {
  position: relative;
  width: 96px;
  height: 96px;
}

.thumb-img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: block;
}

.thumb-skeleton {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-md);
  background: linear-gradient(
    90deg,
    var(--color-secondary) 25%,
    #e2e6ea 37%,
    var(--color-secondary) 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}

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

.thumb-pending .thumb-img {
  opacity: 0.55;
}

.thumb-pending .upload-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px var(--space-xs);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  color: var(--color-accent-text);
  background: rgba(17, 24, 39, 0.72);
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  pointer-events: none;
}

.capture-pending-badge {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 1000;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  box-shadow: var(--shadow-lg);
}

.capture-pending-badge[hidden] {
  display: none;
}

.thumb-delete {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}

.trash-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-destructive);
  cursor: pointer;
}

.trash-btn .trash-icon {
  width: 20px;
  height: 20px;
  padding: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
  box-sizing: content-box;
}

/* ============================================================
   Checklist field answers — chips, yes/no pills, textarea
   ============================================================ */
.task-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.field-answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
}

.field-answer .field-label {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

.chip-row,
.yesno-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.chip,
.yesno-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-lg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease,
    color 120ms ease, box-shadow 120ms ease;
}

.chip:hover,
.yesno-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.chip-on,
.yesno-on {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-text);
  box-shadow: var(--shadow-sm);
}

.chip-on:hover,
.yesno-on:hover {
  color: var(--color-accent-text);
}

.chip:focus-within,
.yesno-btn:focus-within {
  outline: none;
  box-shadow: var(--ring);
}

.field-textarea {
  width: 100%;
  min-height: calc(var(--tap-primary) + var(--space-md));
  padding: var(--space-sm) var(--space-md);
  resize: vertical;
  line-height: 1.4;
}

.field-answer.htmx-request {
  opacity: 0.7;
  pointer-events: none;
}

/* ============================================================
   Export result fragment (hidden entry point, styled for parity)
   ============================================================ */
.export-result {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.export-target code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--color-secondary);
  font-size: var(--font-size-caption);
}

.export-warnings {
  margin-top: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-sm);
}

.export-warnings-lead {
  margin: 0 0 var(--space-sm);
  color: var(--color-warning-text);
  font-weight: var(--font-weight-bold);
}

.export-warning-list {
  margin: 0;
  padding-left: var(--space-lg);
}

.export-warning {
  color: var(--color-warning-text);
}

.export-clean {
  margin: var(--space-sm) 0 0;
  color: var(--color-captured);
  font-weight: var(--font-weight-medium);
}

/* ============================================================
   Phase 15 — document intake / review
   ============================================================
   Desktop-density surface for the local supplement pipeline (one estimator, one
   desk, one Windows machine) — the opposite ergonomic target from the capture
   PWA above. Review controls use --control-h / --row-h; the phone tap-target
   tokens stay reserved to the capture screens.

   Every color below is an ALIAS of an existing token, so the single dark-theme
   override at the bottom of this file needs zero additions.

   Color grammar, inherited from Phase 7 and extended:
     amber  = the machine did it (unconfirmed / needs input)
     green  = the human confirmed it
     blue   = work in progress (extraction bar, spinner, provenance links, CTAs)
     red    = blocking (unmapped line, failed document, hard preflight failure)
   ============================================================ */

/* ---- Layout ---- */
.container-wide {
  max-width: var(--container-wide);
}

.estimate-review {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.estimate-sheet {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.estimate-sheet > form {
  display: grid;
  gap: var(--space-md);
}

/* ---- Screen 1: document intake ---- */

/* Extraction-dependency failure. Silence is the success state — this banner is
   rendered only when something is actually wrong. */
.preflight-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
  padding: var(--space-md);
  background: var(--color-destructive-soft);
  border: 1px solid var(--color-destructive);
  border-radius: var(--radius-md);
  /* Mixed toward --color-text so 14/16px copy clears AA 4.5:1 on the soft fill
     in both themes; still an alias of the destructive token, no new hue. */
  color: color-mix(in srgb, var(--color-destructive) 75%, var(--color-text));
}

.preflight-banner svg {
  flex: 0 0 auto;
  color: var(--color-destructive);
}

.preflight-banner-title {
  margin: 0 0 var(--space-xs);
  font-weight: var(--font-weight-bold);
}

.preflight-banner-body {
  margin: 0;
}

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

/* Each tile is the <label> for its own native file input, so click-to-browse
   works with zero JS. 160px so a drop target reads as a target at a glance. */
.slot-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: 160px;
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease,
    box-shadow 120ms ease;
}

.slot-tile:focus-within {
  box-shadow: var(--ring);
}

.slot-tile-empty {
  background: var(--color-secondary);
  border-style: dashed;
  border-color: var(--color-border-strong);
}

.slot-tile-over {
  background: var(--color-accent-soft);
  border-style: solid;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.slot-tile-filled {
  background: var(--color-surface);
  border-style: solid;
  border-color: var(--color-accent);
}

.slot-tile-rejected {
  background: var(--color-surface);
  border-style: solid;
  border-color: var(--color-destructive);
}

/* Client-side "a file is picked, nothing is sent yet" state (quick 260805-vdz),
   painted by static/intake-slots.js on the input's change event. Deliberately a
   DISTINCT class from .slot-tile-filled: "chosen in the picker" and "stored on the
   server" are different facts and must stay separately styleable. */
.slot-tile-selected {
  background: var(--color-surface);
  border-style: solid;
  border-color: var(--color-accent);
}

/* The chosen client filename (quick 260805-vdz). break-all so a long name cannot
   blow out the 300px grid column. No `display` here — the script toggles the
   `hidden` attribute and a display declaration would defeat it. */
.slot-tile-chosen {
  font-weight: var(--font-weight-bold);
  word-break: break-all;
}

.slot-tile-icon {
  flex: 0 0 auto;
  color: var(--color-muted);
}

.slot-tile-label {
  font-weight: var(--font-weight-bold);
}

.slot-format-badge {
  align-self: flex-start;
  padding: 2px var(--space-sm);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.slot-tile-help,
.slot-tile-meta {
  margin: 0;
  font-size: var(--font-size-caption);
  line-height: 1.4;
  color: var(--color-muted);
}

/* Rejection reason — states the problem AND the next action. */
.slot-tile-reason {
  margin: 0;
  font-size: var(--font-size-caption);
  line-height: 1.4;
  font-weight: var(--font-weight-bold);
  color: var(--color-destructive);
}

/* ---- Screen 2: extraction progress ---- */

/* Accent fill on the inherited .progress-track. Blue = working; the green
   .progress-fill means human-confirmed capture and is deliberately NOT reused. */
.progress-fill-accent {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
  border-radius: var(--radius-pill);
  transition: width 240ms ease;
}

.source-reader-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
}

summary.section-summary {
  padding-right: 106px;
}

summary.section-summary::after {
  position: absolute;
  top: 50%;
  right: var(--space-md);
  min-width: 72px;
  padding: 3px 8px;
  transform: translateY(-50%);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-secondary);
  color: var(--color-accent);
  content: "Expand +";
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  text-align: center;
}

.section[open] > summary.section-summary::after {
  content: "Collapse −";
}

.source-reader-note > svg {
  flex: 0 0 auto;
  color: var(--color-accent);
}

.source-reader-note-title {
  margin: 0 0 var(--space-xs);
  font-weight: var(--font-weight-bold);
}

.source-reader-note .caption {
  margin: 0;
  color: var(--color-text);
}

.progress-fill-indeterminate {
  width: 38%;
  min-width: 96px;
  animation: intake-progress-sweep 1.35s ease-in-out infinite;
}

@keyframes intake-progress-sweep {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(265%); }
}

.intake-stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin: var(--space-md) 0;
  padding: 0;
  list-style: none;
}

.intake-stage {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  padding: var(--space-sm);
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.intake-stage-active {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-text);
}

.intake-stage-complete {
  background: var(--color-captured-soft);
  border-color: var(--color-captured);
  color: var(--color-text);
}

.doc-status-list {
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.doc-status-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--row-h);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-border);
}

.doc-status-row:first-child {
  border-top: 0;
}

.doc-status-row-active {
  background: var(--color-accent-soft);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.doc-status-label {
  flex: 1 1 auto;
  min-width: 0;
}

.doc-status-state {
  flex: 0 0 auto;
  font-size: var(--font-size-caption);
  line-height: 1.4;
  color: var(--color-muted);
}

/* The two accent sides make the direction legible at 16px.  ``will-change`` and
   translateZ in the shared keyframes keep the no-JS fallback on a compositor layer. */
.doc-status-spinner {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-accent);
  border-right-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  will-change: transform;
}

/* HTMX has to replace the progress fragment every two seconds. Older browsers
   briefly detach even hx-preserve nodes, which restarts a CSS animation and makes
   the small ring appear frozen. The intake script supplies one page-level angle,
   so every replacement resumes at the current phase. CSS above remains the no-JS
   fallback; reduced-motion prevents this class from being added. */
.intake-spinner-clock .doc-status-spinner {
  animation: none;
  transform: translateZ(0) rotate(var(--intake-spinner-angle, 0deg));
}

.doc-status-spinner-lg {
  width: 24px;
  height: 24px;
}

.review-preparing-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
}

.review-preparing-title {
  margin: 0 0 var(--space-xs);
  font-weight: var(--font-weight-bold);
}

.review-preparing-card .caption {
  margin: 0;
}

.btn-pending,
.btn-pending:hover {
  opacity: 0.7;
  cursor: wait;
  box-shadow: none;
  transform: none;
}

.intake-submit-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.48);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.intake-uploading .intake-submit-spinner {
  display: inline-block;
}

.intake-uploading .slot-tile-selected {
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.intake-upload-status {
  margin: var(--space-sm) 0 0;
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

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

/* ---- Screen 3: review & confirm (the human gate) ---- */

/* Pinned under the page title, above everything editable, not dismissible.
   Domain-integrity requirement, not decoration. */
.review-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  max-width: 1120px;
  margin: 0 auto var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-sm);
  color: var(--color-warning-text);
}

.review-banner svg {
  flex: 0 0 auto;
}

.review-banner-title {
  margin: 0 0 var(--space-xs);
  font-weight: var(--font-weight-bold);
}

.review-banner-body {
  margin: 0;
}

/* Xactimate-style file header and estimate table. The primary surface is the
   editable estimate; extraction diagnostics are intentionally subordinate. */
.estimate-file-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-accent-active);
  color: var(--color-accent-text);
}

.estimate-kicker {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.78;
}

.estimate-file-title {
  margin: 0;
  font-size: var(--font-size-display);
  line-height: 1.15;
}

.estimate-file-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-sm) 0 0;
  opacity: 0.84;
}

.estimate-file-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-sm);
}

.estimate-source-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-sm);
  max-width: 460px;
}

.estimate-source-links a {
  color: inherit;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
}

.review-count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  white-space: nowrap;
}

.review-count-attention {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}

.review-count-clear {
  background: var(--color-captured-soft);
  border-color: var(--color-captured);
  color: color-mix(in srgb, var(--color-captured) 70%, var(--color-text));
}

.estimate-meta,
.estimate-requirements,
.estimate-lines,
.review-support,
.approve-gate {
  margin-right: var(--space-md);
  margin-left: var(--space-md);
}

.estimate-meta {
  box-shadow: none;
}

.estimate-requirements {
  display: grid;
  gap: var(--space-sm);
  border-color: var(--color-border-strong);
  box-shadow: none;
}

.requirement-list {
  display: grid;
  gap: var(--space-sm);
}

.requirement-basis {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-secondary);
}

.requirement-row {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-secondary);
}

.requirement-row > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.requirement-row-required {
  border-left-color: var(--color-captured);
}

.requirement-row-review,
.requirement-warning {
  border-left-color: var(--color-warning-border);
}

.requirement-warning {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-sm);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.requirement-empty {
  margin: 0;
  padding: 0 var(--space-md) var(--space-md);
}

.estimate-lines {
  border-color: var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.estimate-lines-heading {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  cursor: default;
}

.estimate-line-total {
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  font-variant-numeric: tabular-nums;
}

.estimate-table-head,
.estimate-line {
  display: grid;
  grid-template-columns: 52px minmax(360px, 1fr) 82px 48px minmax(150px, 200px);
  align-items: center;
  column-gap: var(--space-sm);
}

.estimate-table-head {
  min-height: 32px;
  padding: 0 var(--space-md);
  background: var(--color-secondary);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border-strong);
  color: var(--color-muted);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.estimate-category-row {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-md);
  background: color-mix(in srgb, var(--color-secondary) 72%, var(--color-surface));
  border-top: 1px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.estimate-category-row span:last-child {
  color: var(--color-muted);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  text-transform: none;
}

.estimate-category-personal-property {
  background: var(--color-warning-bg);
  border-top-color: var(--color-warning-text);
}

.estimate-line.value-row {
  grid-template-columns: 52px minmax(360px, 1fr) 82px 48px minmax(150px, 200px);
  min-height: 48px;
  padding: var(--space-xs) var(--space-md);
}

.estimate-line-number,
.estimate-unit {
  color: var(--color-muted);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-caption);
  font-variant-numeric: tabular-nums;
}

.estimate-line-description {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.estimate-line-description label {
  font-weight: var(--font-weight-medium);
  overflow-wrap: anywhere;
  white-space: normal;
}

.estimate-line-description span {
  overflow: hidden;
  color: var(--color-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.estimate-line-description .targeted-confirmation-label {
  margin-top: var(--space-xs);
  color: var(--color-warning-text);
  font-size: 12px;
}

.estimate-line-description .targeted-confirmation-prompt {
  overflow: visible;
  color: var(--color-text);
  text-overflow: initial;
  white-space: normal;
}

.targeted-confirmation-evidence {
  display: grid;
  gap: 2px;
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-left: 3px solid var(--color-warning-text);
  color: var(--color-text);
  font-size: 12px;
}

.targeted-confirmation-evidence span {
  overflow-wrap: anywhere;
}

.estimate-qty {
  height: 34px;
  border-radius: 4px;
}

.estimate-line-status {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.estimate-source-link,
.estimate-source-detail summary {
  color: var(--color-accent);
  font-size: 12px;
}

.estimate-source-detail {
  max-width: 100%;
}

.estimate-source-detail summary {
  cursor: pointer;
}

.estimate-source-detail .prov-snippet {
  margin-top: var(--space-xs);
  max-width: 360px;
  white-space: normal;
}

.estimate-line-resolution {
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-destructive-soft);
  border-top: 1px solid var(--color-destructive);
}

.value-row-review {
  background: var(--color-warning-bg);
  box-shadow: inset 4px 0 0 var(--color-warning-text);
}

.orientation-evidence {
  display: grid;
  gap: var(--space-md);
  margin: var(--space-sm) var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-secondary);
}

.orientation-conflict {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
  box-shadow: inset 4px 0 0 var(--color-warning-text);
}

.orientation-conflict-heading,
.orientation-conclusion-title,
.orientation-choices {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.orientation-conflict-heading > svg {
  flex: 0 0 auto;
  color: var(--color-warning-text);
}

.orientation-conflict-heading p,
.orientation-conclusion p {
  margin: 0;
}

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

.orientation-conclusion {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.orientation-conclusion-title {
  justify-content: space-between;
  flex-wrap: wrap;
}

.orientation-choices {
  flex-wrap: wrap;
}

.value-row-blocking {
  background: var(--color-destructive-soft);
  box-shadow: inset 4px 0 0 var(--color-destructive);
}

.review-support {
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.review-support-summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  cursor: pointer;
  list-style: none;
}

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

.review-support-summary > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.review-support-summary-state {
  align-items: flex-end;
}

.review-support-toggle {
  display: inline-flex;
  min-width: 82px;
  justify-content: center;
  padding: 4px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}

.review-support-collapse {
  display: none;
}

.review-support[open] .review-support-expand {
  display: none;
}

.review-support[open] .review-support-collapse {
  display: inline;
}

.review-support[open] > .review-support-summary {
  border-bottom: 1px solid var(--color-border-strong);
}

.review-support-body {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-sm);
}

.review-support-body > .section {
  border-radius: var(--radius-sm);
  box-shadow: none;
}

/* The atomic unit: label | input | provenance | state. */
.value-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(120px, 180px) minmax(120px, 1fr) auto;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  min-height: var(--row-h);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-border);
}

.value-row:first-child {
  border-top: 0;
}

.value-label {
  font-size: var(--font-size-body);
  line-height: 1.5;
}

/* Quantity input. type="text" inputmode="decimal" in the markup — never
   type="number". Mono + tabular-nums makes a transposed digit visible; an
   absent value stays a genuinely empty string (Hold), never a coerced 0. */
.value-input {
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--space-sm);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-body);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.value-input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--ring);
}

.value-row-provenance {
  min-width: 0;
}

.value-row-state {
  justify-self: end;
}

/* Provenance citation. It opens the cited PDF page or EagleView JSON source in a
   new tab so the estimate remains full-width and the evidence is one click away. */
.prov-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-pill);
  color: var(--color-warning-text);
  font-size: var(--font-size-caption);
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

.prov-chip:hover {
  border-color: var(--color-accent);
}

.prov-chip:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* Verbatim source text or a JSON pointer. Mono so it reads as evidence rather than
   UI prose. Rendered through Jinja autoescape — never | safe. */
.prov-snippet {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin: var(--space-xs) 0 0;
  color: var(--color-text);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-caption);
  line-height: 1.4;
}

.prov-snippet svg {
  flex: 0 0 auto;
  color: var(--color-muted);
}

.prov-snippet span {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Every badge pairs color with an icon AND a text label in the markup, so the
   signal survives grayscale, color-blindness, and a pasted screenshot. */
.state-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  white-space: nowrap;
}

.state-badge svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

/* Default state of every extracted value: a machine read it off a PDF. */
.state-badge-unconfirmed {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}

/* No citable value came back — blocks the CTA. Same amber, bolder border. */
.state-badge-needs-input {
  background: var(--color-warning-bg);
  border-width: 2px;
  border-color: var(--color-warning-text);
  color: var(--color-warning-text);
}

/* Earned by a human edit or an explicit accept. */
.state-badge-confirmed {
  background: var(--color-captured-soft);
  border-color: var(--color-captured);
  color: color-mix(in srgb, var(--color-captured) 70%, var(--color-text));
}

/* Unmapped ledger line or failed document — blocks the CTA. */
.state-badge-blocking {
  background: var(--color-destructive-soft);
  border-color: var(--color-destructive);
  color: color-mix(in srgb, var(--color-destructive) 75%, var(--color-text));
}

/* A normal, mapped estimate row is deliberately quiet. Highlighting belongs to
   the small set of rows that need a human decision. */
.state-badge-source {
  background: var(--color-secondary);
  border-color: var(--color-border);
  color: var(--color-muted);
}

/* The approval gate. The audit is reachable only from this POST. */
.approve-gate {
  margin-top: 0;
  margin-bottom: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 800px) {
  .capture-guide-grid {
    grid-template-columns: 1fr;
  }

  .report-export-panel,
  .report-export-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .report-export-actions .btn {
    width: 100%;
  }

  .estimate-file-header {
    flex-direction: column;
  }

  .estimate-file-actions {
    align-items: flex-start;
  }

  .estimate-source-links {
    justify-content: flex-start;
  }

  .estimate-table-head {
    display: none;
  }

  .estimate-line.value-row {
    grid-template-columns: 44px minmax(0, 1fr) 94px 48px;
    row-gap: var(--space-xs);
  }

  .estimate-line-status {
    grid-column: 2 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .estimate-line-description label {
    white-space: normal;
  }

  .review-support-summary {
    align-items: flex-start;
  }
}

.approve-gate-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
}

/* A disabled CTA that won't say why is a bug — this names the blocker. */
.approve-gate-blocker {
  margin: var(--space-sm) 0 0;
  font-size: var(--font-size-caption);
  line-height: 1.4;
  color: var(--color-warning-text);
  text-align: center;
}

/* ---- Screen 4: results & downloads ---- */
.download-grid {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.download-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--row-h);
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.download-row:first-child {
  border-top: 0;
}

.download-row-meta {
  min-width: 0;
}

.download-row-name {
  font-weight: var(--font-weight-bold);
}

.download-row-help {
  margin: var(--space-xs) 0 0;
  font-size: var(--font-size-caption);
  line-height: 1.4;
  color: var(--color-muted);
}

/* Reduced-motion guard for the rules added above (mirrors the global guard). */
@media (prefers-reduced-motion: reduce) {
  .doc-status-spinner,
  .intake-submit-spinner,
  .progress-fill-indeterminate {
    animation: none;
  }

  .slot-tile,
  .progress-fill-accent {
    transition: none;
  }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   Dark theme — single token override (auto via system setting)
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0B1220;
    --color-surface: #131C2E;
    --color-secondary: #1B2740;
    --color-border: #25324B;
    --color-border-strong: #3A496B;

    --color-accent: #3B82F6;
    --color-accent-hover: #60A5FA;
    --color-accent-active: #2563EB;
    --color-accent-soft: #16233D;
    --color-accent-text: #0B1220;

    --color-text: #E6EDF7;
    --color-muted: #94A3B8;
    --color-faint: #64748B;

    --color-destructive: #F87171;
    --color-destructive-hover: #FCA5A5;
    --color-destructive-soft: #3A1A1A;
    --color-untouched: #64748B;
    --color-captured: #34D399;
    --color-captured-soft: #14331F;
    --color-warning-text: #FCD34D;
    --color-warning-bg: #3A2E12;
    --color-warning-border: #5A4715;

    --ring: 0 0 0 3px rgba(96, 165, 250, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  }

  /* The accent turns light in dark mode, so on accent fills use dark ink and
     keep the upload spinner/overlay legible. */
  .cap-spinner {
    border-color: rgba(11, 18, 32, 0.4);
    border-top-color: var(--color-accent-text);
  }

  .trash-btn .trash-icon {
    background: rgba(19, 28, 46, 0.92);
  }

  .thumb-pending .upload-overlay {
    background: rgba(0, 0, 0, 0.78);
    color: #E6EDF7;
  }

  .progress-fill {
    background: linear-gradient(90deg, var(--color-captured), #34D399);
  }
}
.generated-review-queue {
  display: grid;
  gap: .65rem;
  margin: .75rem 0 1rem;
  padding: .85rem;
  border: 1px solid var(--amber-300, #d9a441);
  border-radius: .6rem;
  background: var(--amber-50, #fff8e8);
}

.generated-review-priority {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.generated-review-priority > div {
  display: grid;
  gap: .15rem;
}