:root {
  --zinc-50: #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;

  --bg-app: #fafafa;
  --bg-surface: #ffffff;
  --bg-subtle: #f4f4f5;
  --bg-hover: #f4f4f5;
  --border-color: #e4e4e7;
  --border-subtle: #f4f4f5;
  --text-primary: #18181b;
  --text-secondary: #3f3f46;
  --text-muted: #71717a;
  --text-dim: #a1a1aa;

  --emerald-50: #ecfdf5;
  --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;

  --amber-50: #fffbeb;
  --amber-200: #fde68a;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-700: #b45309;
  --amber-800: #92400e;

  --red-50: #fef2f2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-600: #dc2626;
  --red-700: #b91c1c;

  --blue-50: #eff6ff;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;

  --violet-50: #f5f3ff;
  --violet-200: #ddd6fe;
  --violet-700: #6d28d9;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03);
  --shadow-md: 0 10px 30px rgb(24 24 27 / 0.12);
  --shadow-lg: 0 24px 64px rgb(24 24 27 / 0.18);
}

/* ---------------------------------------------------------------------------
   The --color-* family.

   Twenty-two of these were referenced across the stylesheet and not one was
   ever declared, so every `var(--color-surface, #fff)` quietly resolved to its
   light literal -- in both themes. That is why dark mode turned the page black
   and left the cards, the chat box and the mode pill white, and painted the
   hero heading #0D1B2A on #09090b.

   They are defined once here in terms of the themed --zinc/--bg/--text/accent
   families above. Those are already flipped under [data-theme="dark"] on the
   same element, and a custom property that contains var() re-resolves when what
   it points at changes -- so this single block is theme-aware and there is one
   source of truth rather than two vocabularies drifting apart.

   Keep the literal fallbacks in the rules below. They are now dead weight, but
   they are also the only thing standing between a typo'd token name and an
   unstyled control.
--------------------------------------------------------------------------- */
:root {
  --color-bg:          var(--bg-app);
  --color-surface:     var(--bg-surface);
  --color-paper:       var(--bg-hover);
  --color-paper-2:     var(--bg-subtle);

  --color-fg:          var(--text-primary);
  /* Strongest text -- headings and card titles. NOT a background: see
     --color-inverted below, which is what the dark chips and buttons use. */
  --color-ink:         var(--text-primary);
  --color-muted:       var(--text-muted);
  --color-subtle:      var(--text-dim);

  --color-line:        var(--border-color);
  --color-line-strong: var(--zinc-300);

  --color-accent:      var(--blue-600);

  /* An inverted control: dark chip, light label in light mode, and the other
     way round in dark. These two must always be set together -- the pairs
     below used to hardcode `color: #fff` beside a --color-ink background,
     which in dark mode would have put white text on a near-white chip. */
  --color-inverted:    var(--zinc-900);
  --color-inverted-2:  var(--zinc-800);
  --color-on-inverted: var(--bg-surface);

  --color-ok:          var(--emerald-700);
  --color-ok-bright:   var(--emerald-500);
  --color-ok-bg:       var(--emerald-50);
  --color-warn:        var(--amber-700);
  --color-warn-bg:     var(--amber-50);
  --color-warn-line:   var(--amber-200);
  --color-danger:      var(--red-600);
  --color-danger-bg:   var(--red-50);
  --color-info:        var(--blue-700);
  --color-info-bg:     var(--blue-50);
}


[data-theme="dark"] {
  --zinc-50: #09090b;
  --zinc-100: #141417;
  --zinc-200: #222226;
  --zinc-300: #333338;
  --zinc-400: #71717a;
  --zinc-500: #a1a1aa;
  --zinc-600: #d4d4d8;
  --zinc-700: #e4e4e7;
  --zinc-800: #f4f4f5;
  --zinc-900: #ffffff;

  --bg-app: #09090b;
  --bg-surface: #141417;
  --bg-subtle: #1c1c21;
  --bg-hover: #222226;
  --border-color: #27272a;
  --border-subtle: #1e1e24;
  --text-primary: #f4f4f5;
  --text-secondary: #d4d4d8;
  --text-muted: #a1a1aa;
  --text-dim: #71717a;

  --emerald-50: rgba(5, 150, 105, 0.15);
  --emerald-200: rgba(16, 185, 129, 0.3);
  --emerald-300: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #34d399;
  --emerald-700: #6ee7b7;

  --amber-50: rgba(217, 119, 6, 0.15);
  --amber-200: rgba(245, 158, 11, 0.3);
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-700: #fbbf24;
  --amber-800: #fde68a;

  --red-50: rgba(220, 38, 38, 0.15);
  --red-200: rgba(239, 68, 68, 0.3);
  --red-300: #f87171;
  --red-600: #f87171;
  --red-700: #fca5a5;

  --blue-50: rgba(37, 99, 235, 0.15);
  --blue-200: rgba(59, 130, 246, 0.3);
  --blue-300: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #60a5fa;
  --blue-700: #93c5fd;

  --violet-50: rgba(109, 40, 217, 0.15);
  --violet-200: rgba(139, 92, 246, 0.3);
  --violet-700: #c084fc;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
  --shadow-md: 0 10px 30px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 24px 64px rgb(0 0 0 / 0.6);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  transition: background-color 0.2s ease, color 0.2s ease;
}

button,
input {
  font-family: inherit;
  font-size: inherit;
}

a {
  color: inherit;
}

/* ── layout ─────────────────────────────────────────────────── */

.header {
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.header-inner {
  max-width: 90rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: block;
  flex: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.brand h1 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-primary);
}

.brand-badge {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--blue-600);
  background: var(--blue-50);
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  white-space: nowrap;
}

.brand p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-muted);
  padding: 0.45rem;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.theme-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.engine-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.engine-label .engine-hint {
  font-size: 0.65rem;
  color: var(--text-dim);
  font-weight: 400;
}
.processing-banner {
  border-color: var(--blue-200);
  background: var(--blue-50);
}
.processing-banner .inner {
  padding: 0.75rem 1rem;
}
.failure-banner {
  border-color: var(--red-200);
  background: var(--red-50);
}
.failure-banner .inner {
  padding: 0.75rem 1rem;
}
.failure-banner .inner p:first-child {
  color: var(--red-700);
}

.subnav {
  display: flex;
  gap: 0.25rem;
  max-width: 90rem;
  margin: 0 auto;
  padding: 0.5rem 1.5rem 0;
}
.subnav-btn {
  border: none;
  background: transparent;
  border-radius: 0.4rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
}
.subnav-btn:hover {
  color: var(--text-primary);
  background: var(--bg-subtle);
}
.subnav-btn.active {
  color: var(--text-primary);
  background: var(--bg-surface);
  box-shadow: 0 0 0 1px var(--border-color);
}

.main {
  max-width: 90rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lucide {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.btn-icon {
  width: 0.95rem;
  height: 0.95rem;
}

/* ── primitives ─────────────────────────────────────────────── */

.card {
  border-radius: 0.75rem;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.75rem 1rem;
}

.card-header h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.card-header .extra {
  font-size: 0.75rem;
  color: var(--text-muted);
}

select {
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  padding: 0.375rem 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

select:focus {
  border-color: var(--text-muted);
  outline: none;
}

select:disabled {
  opacity: 0.5;
}
#model-select {
  max-width: 13.5rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 999px;
  border: 1px solid;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.badge-green {
  background: var(--emerald-50);
  color: var(--emerald-700);
  border-color: var(--emerald-200);
}
.badge-blue {
  background: var(--blue-50);
  color: var(--blue-700);
  border-color: var(--blue-200);
}
.badge-amber {
  background: var(--amber-50);
  color: var(--amber-700);
  border-color: var(--amber-200);
}
.badge-red {
  background: var(--red-50);
  color: var(--red-700);
  border-color: var(--red-200);
}
.badge-zinc {
  background: var(--zinc-100);
  color: var(--zinc-600);
  border-color: var(--zinc-200);
}
.badge-violet {
  background: var(--violet-50);
  color: var(--violet-700);
  border-color: var(--violet-200);
}
.badge-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.badge-pulse {
  animation: pulse 1.6s ease-in-out infinite;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  border: 1px solid transparent;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-default {
  border-color: var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
}
.btn-default:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.btn-primary {
  background: var(--text-primary);
  color: var(--bg-app);
  border-color: var(--text-primary);
}
.btn-primary:hover:not(:disabled) {
  opacity: 0.9;
}
.btn-green {
  background: var(--emerald-600);
  color: #fff;
  border-color: var(--emerald-600);
}
.btn-green:hover:not(:disabled) {
  background: var(--emerald-500);
}
.btn-amber {
  background: var(--amber-500);
  color: #fff;
  border-color: var(--amber-500);
}
.btn-amber:hover:not(:disabled) {
  background: var(--amber-400);
}
.btn-ghost {
  color: var(--text-muted);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.5rem;
  background: var(--bg-subtle);
  padding: 0.25rem;
}

.tab-btn {
  border: none;
  background: transparent;
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.tab-btn:hover {
  color: var(--text-primary);
}
.tab-btn.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  opacity: 0.7;
}
.spinner-sm {
  width: 0.75rem;
  height: 0.75rem;
  border-width: 1.5px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 3rem 1rem;
  text-align: center;
}
.empty-state .title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--zinc-500);
}
.empty-state .hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--zinc-400);
}

.kv-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.375rem 1rem;
  padding: 0.75rem 1rem;
}
.kv-grid dt {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--zinc-400);
}
.kv-grid dd {
  margin: 0;
  font-size: 0.75rem;
  color: var(--zinc-800);
  word-break: break-word;
}
.kv-empty {
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  color: var(--zinc-400);
}

/* ── upload zone ────────────────────────────────────────────── */

.upload-zone {
  display: flex;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border: 2px dashed var(--border-color);
  background: var(--bg-surface);
  padding: 2.5rem 1.5rem;
  transition: border-color 0.15s, background-color 0.15s;
  text-align: center;
}
.upload-zone:hover {
  border-color: var(--text-dim);
  background: var(--bg-subtle);
}
.upload-zone.dragging {
  border-color: var(--text-muted);
  background: var(--bg-hover);
}
.upload-zone .icon {
  width: 2rem;
  height: 2rem;
  color: var(--text-dim);
  transition: transform 0.15s;
}
.upload-zone.dragging .icon {
  transform: scale(1.1);
  color: var(--text-secondary);
}
.upload-zone .title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.upload-zone .hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.upload-chips {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.upload-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 999px;
  border: 1px solid;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
}
.upload-chip.uploading {
  border-color: var(--blue-200);
  background: var(--blue-50);
  color: var(--blue-700);
}
.upload-chip.done {
  border-color: var(--emerald-200);
  background: var(--emerald-50);
  color: var(--emerald-700);
}
.upload-chip.error {
  border-color: var(--red-200);
  background: var(--red-50);
  color: var(--red-700);
}

/* ── documents table ────────────────────────────────────────── */

.doc-table-card {
  overflow: hidden;
}
.doc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.doc-table thead {
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.doc-table th {
  padding: 0.7rem 1rem;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-color);
}
.doc-table td {
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.doc-table-row {
  cursor: pointer;
}
.doc-table-row:hover td {
  background: var(--bg-hover);
}
.doc-table-row:focus {
  outline: none;
}
.doc-table-row:focus-visible td {
  background: var(--blue-50);
}
.doc-col-name {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 14rem;
}
.doc-col-name .file-icon {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--text-dim);
  flex: 0 0 auto;
}
.doc-col-name .file-icon.is-pdf,
.doc-link-icon.is-pdf {
  color: var(--red-600);
}
.doc-name-stack {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}
.doc-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 26rem;
  font-weight: 500;
  color: var(--text-primary);
}
.doc-table td .badge + .badge {
  margin-left: 0.3rem;
}
.type-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: capitalize;
}
.doc-col-journey {
  min-width: 11rem;
}
.kind-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 0.45rem;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  flex: 0 0 auto;
}
.kind-mark.kind-credit_card {
  background: var(--violet-50);
  color: var(--violet-700);
}
.kind-mark.kind-deposit {
  background: var(--blue-50);
  color: var(--blue-700);
}
.kind-mark.kind-loan {
  background: var(--amber-50);
  color: var(--amber-800);
}
.kind-icon {
  width: 0.95rem;
  height: 0.95rem;
}
.icon-btn {
  border: none;
  background: transparent;
  padding: 0.2rem;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 0.3rem;
  display: inline-flex;
}
.icon-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.header-extra-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.text-center {
  text-align: center;
}
.doc-col-account .doc-period {
  margin-top: 0.15rem;
  font-size: 0.7rem;
  color: var(--text-dim);
}
.doc-col-time {
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 0.75rem;
}
.doc-id-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.short-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 0.25rem;
  padding: 0 0.28rem;
}
.file-kind {
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.doc-col-links {
  white-space: nowrap;
}
.file-pair {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.file-pair-line {
  width: 0.85rem;
  height: 2px;
  background: var(--border-color);
  flex: 0 0 auto;
}
.icon-btn.is-original {
  color: var(--text-primary);
}
.icon-btn.is-dup {
  opacity: 0.45;
}
.icon-btn.is-dup:hover {
  opacity: 0.85;
}
.upload-pick {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  justify-content: center;
}

.queue-banner {
  padding: 0.75rem 1rem 0.35rem;
}
.queue-track {
  height: 4px;
  border-radius: 99px;
  background: var(--border-color);
  overflow: hidden;
}
.queue-fill {
  height: 100%;
  width: 40%;
  border-radius: 99px;
  background: var(--blue-500);
  animation: queue-slide 1.4s ease-in-out infinite;
}
.queue-copy {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.queue-live {
  font-weight: 600;
  color: var(--blue-700);
}
.doc-table-row.is-running td {
  background: var(--blue-50);
}
.doc-table-row.is-queued td {
  color: var(--text-muted);
}
@keyframes queue-slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

.doc-col-when {
  white-space: nowrap;
}
.when-abs {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.when-rel {
  margin-top: 0.1rem;
  font-size: 0.68rem;
  color: var(--text-muted);
}
.doc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-right: 0.5rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-decoration: none;
}
.doc-link:hover {
  color: var(--text-primary);
}
.doc-link-icon {
  width: 0.8rem;
  height: 0.8rem;
}
.linkish {
  border: none;
  background: none;
  padding: 0;
  color: var(--blue-700);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.linkish:hover {
  text-decoration: underline;
}
.txn-icon {
  width: 0.85rem;
  height: 0.85rem;
  vertical-align: -0.15rem;
  margin-right: 0.2rem;
}
.txn-icon.debit {
  color: var(--red-600);
}
.txn-icon.credit {
  color: var(--emerald-600);
}
.drawer-dialog {
  max-height: 80vh;
  overflow: auto;
}
.drawer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.drawer-h {
  margin: 1rem 0 0.4rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.drawer-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.6rem;
  border: none;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  padding: 0.45rem 0;
  text-align: left;
  cursor: pointer;
}
.drawer-row:hover {
  background: var(--bg-subtle);
}
.doc-col-status {
  max-width: 16rem;
}
.doc-error {
  margin-top: 0.3rem;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--red-700);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── high-level document journey ────────────────────────────── */

.journey {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 10.5rem;
}
.journey-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1.85rem;
  flex: 0 0 auto;
}
.journey-dot {
  display: flex;
  width: 1.85rem;
  height: 1.85rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-dim);
}
.journey-icon {
  width: 1rem;
  height: 1rem;
}
.journey-label {
  display: none;
}
.journey-line {
  width: 0.7rem;
  height: 1.5px;
  background: var(--border-color);
  flex: 0 0 auto;
}
.journey-dot.status-ok {
  border-color: var(--emerald-500);
  background: var(--emerald-50);
  color: var(--emerald-600);
}
.journey-dot.status-running {
  border-color: var(--blue-500);
  background: var(--blue-50);
  color: var(--blue-600);
  animation: pulse 1.6s ease-in-out infinite;
}
.journey-dot.status-error {
  border-color: var(--red-600);
  background: var(--red-50);
  color: var(--red-600);
}
.journey-dot.status-warning {
  border-color: var(--amber-500);
  background: var(--amber-50);
  color: var(--amber-700);
}
.journey-dot.status-skipped {
  border-color: var(--border-color);
  background: var(--bg-subtle);
  color: var(--text-dim);
}
.journey-dot.status-stopped {
  border-color: var(--red-600);
  background: var(--red-50);
  color: var(--red-600);
}
.journey-step.status-ok .journey-label,
.journey-step.status-warning .journey-label {
  color: var(--text-muted);
}
.journey-step.status-running .journey-label {
  color: var(--blue-600);
}
.journey-line.status-ok {
  background: var(--emerald-300);
}
.journey-line.status-running {
  background: var(--blue-300);
}
.journey-line.status-error,
.journey-line.status-stopped {
  background: var(--red-300);
}
.status-stop {
  color: var(--red-700);
  font-weight: 500;
}
.status-detail {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--text-muted);
  max-width: 18rem;
  white-space: normal;
  line-height: 1.3;
  margin-top: 0.15rem;
}

.telemetry-tip {
  position: fixed;
  z-index: 80;
  min-width: 18rem;
  max-width: 26rem;
  padding: 0.65rem 0.75rem 0.75rem;
  border-radius: 0.65rem;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
  pointer-events: auto;
}
.telemetry-tip-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.telemetry-tip-icon {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--text-dim);
}
.telemetry-tip-error {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--red-700);
}
.telemetry-tip-table {
  width: 100%;
}
.telemetry-tip-table th,
.telemetry-tip-table td {
  padding: 0.28rem 0.35rem;
  font-size: 0.68rem;
  border-top: 1px solid var(--border-subtle);
  vertical-align: top;
}
.telemetry-tip-table thead {
  background: transparent;
}
.telemetry-tip-table th {
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.6rem;
  border-top: none;
}
.telemetry-stage-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-primary);
}
.telemetry-stage-detail {
  margin-top: 0.1rem;
  color: var(--text-muted);
  line-height: 1.35;
  word-break: break-word;
}
.tip-status {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-muted);
}
.tip-status.ok {
  color: var(--emerald-700);
}
.tip-status.running {
  color: var(--blue-700);
}
.tip-status.stopped,
.tip-status.error {
  color: var(--red-700);
}
.tip-status.warning {
  color: var(--amber-700);
}
.tip-status.skipped,
.tip-status.pending {
  color: var(--text-dim);
}

/* ── upload modal ───────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 1.25rem 2rem;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}
.modal-overlay.hidden {
  display: none;
}
.modal-dialog {
  width: min(40rem, 100%);
  border-radius: 0.9rem;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  padding: 1.1rem 1.15rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.modal-head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.modal-sub {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.modal-model-hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.modal-close:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}
.modal-close .lucide {
  width: 1.1rem;
  height: 1.1rem;
}
.upload-zone-modal {
  padding: 1.75rem 1.25rem;
}
.upload-live {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 18rem;
  overflow: auto;
}
.upload-live-row {
  border: 1px solid var(--border-color);
  border-radius: 0.65rem;
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.upload-live-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.upload-live-copy {
  min-width: 0;
}
.upload-live-name {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}
.upload-live-state {
  margin: 0.1rem 0 0;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.upload-live-row.error .upload-live-state {
  color: var(--red-600);
}
.upload-next {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-secondary);
}
.upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.modal-foot {
  margin: 0;
  font-size: 0.7rem;
  color: var(--text-dim);
}

/* ── agent journey graph (LTR) ──────────────────────────────── */

.stepper.graph-journey {
  padding: 1rem 1.25rem 1.25rem;
}
.graph-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.graph-title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.6875rem;
  color: var(--text-muted);
}
.graph-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.graph-legend .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  display: inline-block;
}
.graph-legend .dot.agent {
  background: var(--blue-500);
}
.graph-legend .dot.tool {
  background: var(--text-dim);
  border: 1px dashed var(--text-muted);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--text-dim);
}
.graph-legend .dot.pipeline {
  background: var(--emerald-500);
}
.graph-scroll {
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.graph-row {
  display: flex;
  align-items: center;
  min-width: min-content;
  gap: 0;
}
.graph-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  flex: 0 0 auto;
  text-align: center;
  cursor: help;
}
.graph-circle {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 2px solid;
}
.graph-node.kind-tool .graph-circle {
  border-radius: 0.55rem;
  border-style: dashed;
}
.graph-node.kind-pipeline .graph-circle {
  border-radius: 0.65rem;
}
.graph-circle svg {
  width: 1.35rem;
  height: 1.35rem;
}
.graph-circle.ok {
  border-color: var(--emerald-500);
  background: var(--emerald-50);
  color: var(--emerald-600);
}
.graph-circle.running {
  border-color: var(--blue-500);
  background: var(--blue-50);
  color: var(--blue-600);
  animation: pulse 1.6s ease-in-out infinite;
}
.graph-circle.error {
  border-color: var(--red-600);
  background: var(--red-50);
  color: var(--red-600);
}
.graph-circle.warning {
  border-color: var(--amber-500);
  background: var(--amber-50);
  color: var(--amber-700);
}
.graph-circle.pending {
  border-color: var(--border-color);
  background: var(--bg-subtle);
  color: var(--text-dim);
}
.graph-labels {
  display: none;
}
.graph-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-word;
  line-height: 1.25;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.graph-label .ellipsis {
  font-weight: 400;
  color: var(--blue-500);
}
.graph-sub {
  margin: 0.1rem 0 0;
  font-size: 0.625rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.graph-meta {
  margin: 0.1rem 0 0;
  font-size: 0.625rem;
  color: var(--text-muted);
  line-height: 1.2;
}
.graph-edge {
  display: flex;
  align-items: center;
  width: 1.35rem;
  flex: 0 0 auto;
  padding-top: 0;
}
.graph-edge-line {
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--border-color);
}
.graph-edge.ok .graph-edge-line {
  background: var(--emerald-300);
}
.graph-edge.running .graph-edge-line {
  background: var(--blue-300);
}
.graph-edge.error .graph-edge-line {
  background: var(--red-300);
}

/* ── document detail ───────────────────────────────────────── */

.detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.detail-head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 1024px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
  .split.layout-full {
    grid-template-columns: 1fr;
  }
}

.doc-pane {
  display: flex;
  min-height: 32rem;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .doc-pane {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
  }
}
.doc-pane-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.5rem 0.75rem;
}
.doc-pane-tab-group,
.doc-layout-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.doc-pane-tabs button {
  border: none;
  background: transparent;
  border-radius: 0.375rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.doc-pane-tabs button:hover {
  background: var(--bg-hover);
}
.doc-pane-tabs button.active {
  background: var(--text-primary);
  color: var(--bg-app);
}
.doc-layout-toggle {
  border-left: 1px solid var(--border-color);
  padding-left: 0.5rem;
}
.doc-pane .doc-preview,
.doc-pane iframe {
  height: 42rem;
  width: 100%;
  flex: 1;
  border: none;
  background: var(--bg-surface);
}
.split.layout-full .doc-pane .doc-preview,
.split.layout-full .doc-pane iframe {
  height: 52rem;
}
.doc-pane .text-view {
  height: 42rem;
  flex: 1;
  overflow: auto;
  background: var(--bg-subtle);
  padding: 1rem;
}
.doc-pane .text-view pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.doc-pane .text-empty {
  padding: 2rem 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.review-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.review-banner {
  border-color: var(--amber-200);
  background: var(--amber-50);
}
.review-banner .inner {
  padding: 0.75rem 1rem;
}
.review-banner p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--amber-800);
}
.review-banner ul {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.75rem;
  color: var(--amber-700);
}

.confidence-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}
.confidence-track {
  height: 0.5rem;
  flex: 1;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg-subtle);
}
.confidence-fill {
  height: 100%;
  border-radius: 999px;
}
.confidence-pct {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.confidence-reason {
  margin: 0 0 0.75rem 1rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.balance-card.pass {
  border-color: var(--emerald-200);
}
.balance-card.fail {
  border-color: var(--red-200);
}
.balance-card .inner {
  border-radius: 0 0 0.75rem 0.75rem;
  padding: 0.75rem 1rem;
}
.balance-card.pass .inner {
  background: var(--emerald-50);
}
.balance-card.fail .inner {
  background: var(--red-50);
}
.balance-card p {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.balance-card p + p {
  margin-top: 0.25rem;
}
.balance-card .muted {
  color: var(--text-dim);
}
.balance-card .status-pass {
  color: var(--emerald-600);
  font-weight: 600;
}
.balance-card .status-fail {
  color: var(--red-600);
  font-weight: 600;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 1280px) {
  .grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.facts-table th,
.facts-table td {
  white-space: nowrap;
}
.facts-table th {
  text-transform: capitalize;
  font-weight: 500;
}
.doc-table-row.is-open td {
  background: var(--bg-hover);
}
.fact-expand td {
  background: var(--bg-subtle);
  padding: 0.85rem 1rem 1rem;
  white-space: normal;
}
.recon {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.recon-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(6.5rem, 1fr));
  gap: 0.55rem 1rem;
}
.recon-item dt {
  margin: 0;
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.recon-item dd {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  color: var(--text-primary);
}
.recon-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.recon-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.3rem 0.5rem;
  border-radius: 0.4rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  max-width: 12rem;
}
.recon-chip em {
  font-style: normal;
  font-size: 0.62rem;
  color: var(--text-muted);
  text-transform: capitalize;
}
.recon-chip strong {
  font-weight: 500;
  font-size: 0.75rem;
}
.recon-open {
  align-self: flex-start;
  font-size: 0.75rem;
}
@media (max-width: 900px) {
  .recon-row {
    grid-template-columns: repeat(3, minmax(5rem, 1fr));
  }
}

.txn-scroll {
  max-height: 24rem;
  overflow: auto;
  border-radius: 0 0 0.75rem 0.75rem;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.75rem;
}
thead {
  position: sticky;
  top: 0;
  background: var(--bg-subtle);
  color: var(--text-muted);
}
th {
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
td {
  padding: 0.375rem 0.75rem;
  border-top: 1px solid var(--border-subtle);
  vertical-align: top;
}
tbody tr:hover {
  background: var(--bg-hover);
}
.text-right {
  text-align: right;
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.text-debit {
  color: var(--red-600);
}
.text-credit {
  color: var(--emerald-600);
}
.text-muted {
  color: var(--text-dim);
}
.nowrap {
  white-space: nowrap;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 10rem;
}

.notes p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.notes {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.decision-bar {
  padding: 0.75rem 1rem;
}
.decision-bar-fail {
  border-color: var(--red-200);
}
.decision-copy .label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}
.decision-blurb {
  margin: 0.25rem 0 0.75rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.ready-banner {
  border-color: var(--emerald-200);
  background: var(--emerald-50);
}
.ready-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
}
.ready-note p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--emerald-700);
}
.ready-note-icon {
  width: 1rem;
  height: 1rem;
  color: var(--emerald-600);
  flex-shrink: 0;
}
.decision-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.decision-row .label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}
.decision-row input[type="text"] {
  min-width: 12rem;
  flex: 1;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  padding: 0.375rem 0.75rem;
  color: var(--text-primary);
}
.decision-row input[type="text"]::placeholder {
  color: var(--text-dim);
}
.decision-row input[type="text"]:focus {
  border-color: var(--text-muted);
  outline: none;
}
.decision-btns {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.decision-status {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.decision-error {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--red-600);
}

/* ── agent activity ─────────────────────────────────────────── */

.activity-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: none;
  background: transparent;
  padding: 0.75rem 1rem;
  text-align: left;
  cursor: pointer;
}
.activity-toggle .title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}
.activity-toggle .count {
  margin-left: 0.5rem;
  font-weight: 400;
  color: var(--text-dim);
}
.activity-toggle .chev {
  width: 1rem;
  height: 1rem;
  color: var(--text-dim);
  transition: transform 0.15s;
}
.activity-toggle .chev.open {
  transform: rotate(180deg);
}
.activity-body {
  max-height: 28rem;
  overflow: auto;
  border-top: 1px solid var(--border-subtle);
}
.activity-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-dim);
}
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
}
.activity-item .time {
  width: 4rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  color: var(--text-dim);
}
.activity-item .kind {
  flex-shrink: 0;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-dim);
}
.activity-item pre {
  flex: 1;
  min-width: 0;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.activity-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--zinc-400);
}
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--zinc-50);
}
.activity-item .time {
  width: 4rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  color: var(--zinc-400);
}
.activity-item .kind {
  flex-shrink: 0;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--zinc-400);
}
.activity-item pre {
  flex: 1;
  min-width: 0;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--zinc-700);
}

/* ── evals ──────────────────────────────────────────────────── */

.eval-log {
  max-height: 18rem;
  overflow: auto;
  background: #09090b;
  margin: 0;
  padding: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #f4f4f5;
  border-radius: 0 0 0.75rem 0.75rem;
}

.overflow-x {
  overflow-x: auto;
}

/* ── utility ────────────────────────────────────────────────── */

.hidden {
  display: none !important;
}
.flex-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.center-py {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
  color: var(--zinc-400);
}

.studio-layout {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.studio-list {
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  background: var(--bg-surface);
  overflow: hidden;
}
.studio-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--border-color);
}
.studio-list-head h3 {
  margin: 0;
  font-size: 0.9rem;
}
.studio-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.studio-item:hover {
  background: var(--bg-hover);
}
.studio-item.is-on {
  background: var(--blue-50);
}
.studio-item-label {
  font-size: 0.82rem;
  font-weight: 550;
}
.studio-item-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.studio-lead,
.studio-meta,
.studio-role-blurb,
.studio-hint,
.studio-notice {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.studio-notice {
  color: var(--blue-700);
}
.studio-live {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--emerald-700);
}
.studio-form,
.studio-detail {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.studio-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.studio-field input,
.studio-field select,
.studio-editor {
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: var(--bg-surface);
  color: var(--text-primary);
  padding: 0.4rem 0.6rem;
  font: inherit;
}
.studio-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
}
.studio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.studio-model-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}
.studio-model-head h3 {
  margin: 0 0 0.2rem;
}
.studio-pack-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}
.studio-roles,
.studio-preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.studio-role {
  border: 1px solid var(--border-color);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  cursor: pointer;
}
.studio-role.is-on {
  background: var(--zinc-900);
  border-color: var(--zinc-900);
  color: var(--zinc-50);
}
.studio-preview,
.studio-editor {
  min-height: 18rem;
  max-height: 36rem;
  overflow: auto;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.45;
}
.studio-preview {
  margin: 0;
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  background: var(--bg-subtle);
}
@media (max-width: 800px) {
  .studio-layout {
    grid-template-columns: 1fr;
  }
}

.log-table-wrap {
  display: flex;
  flex-direction: column;
}
.log-table-head,
.log-table-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(10rem, 1.4fr) minmax(8rem, 1fr) 4.5rem minmax(8rem, 1fr) 5.5rem;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.65rem 1rem;
}
.log-table-head {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
}
.log-table-row {
  font-size: 0.82rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
}
.log-table-row:last-child {
  border-bottom: 0;
}
.log-when em {
  font-style: normal;
  color: var(--text-muted);
}
.log-file {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-tokens,
.log-cost {
  color: var(--text-secondary);
}
.log-extraction_failed,
.log-ingest_error {
  color: var(--red-700);
}
@media (max-width: 800px) {
  .log-table-head {
    display: none;
  }
  .log-table-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 0.75rem;
  }
}

/* ── Sign in ──────────────────────────────────────────────────────────────
   Design language from the product prototype (product.taxowl.world/#prototype):
   Inter, white-paper surfaces, 12–16px radii, #0D1B2A ink, #3B82F6 accent. */

.login-root {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(59, 130, 246, .10), transparent 70%),
    var(--color-bg, #F8FAFC);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-line, #e2e8f0);
  border-radius: 16px;
  padding: 28px 26px 22px;
  box-shadow: 0 0 0 1px rgba(13, 27, 42, .04), 0 12px 32px -12px rgba(13, 27, 42, .18);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.login-brand-text { min-width: 0; }
.login-title {
  font-size: 20px; font-weight: 800; letter-spacing: -.02em;
  color: var(--color-ink, #0D1B2A); line-height: 1.1;
}
.login-sub { font-size: 12px; color: var(--color-muted, #64748b); line-height: 1.35; }

.login-label {
  font-size: 12px; font-weight: 700; color: var(--color-fg, #1E293B);
  margin-top: 6px;
}
.login-hint { font-size: 11.5px; color: var(--color-muted, #64748b); margin-top: -4px; }

.login-input {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;
  color: var(--color-fg, #1E293B);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-line-strong, #cbd5e1);
  border-radius: 10px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.login-input:focus {
  border-color: var(--color-accent, #3B82F6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
}
.login-otp {
  letter-spacing: .5em;
  text-align: center;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 20px;
  padding-left: .5em; /* offset the trailing letter-spacing so digits look centred */
}

.login-btn {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: background .12s, border-color .12s, opacity .12s;
}
.login-btn:disabled { opacity: .6; cursor: default; }

.login-btn.primary {
  background: var(--color-inverted, #0D1B2A);
  color: var(--color-on-inverted, #fff);
}
.login-btn.primary:not(:disabled):hover { background: var(--color-inverted-2, #1e2d42); }

.login-btn.google {
  background: var(--color-surface, #fff);
  color: var(--color-fg, #1E293B);
  border-color: var(--color-line-strong, #cbd5e1);
}
.login-btn.google:not(:disabled):hover { background: var(--color-paper-2, #f1f5f9); }

.login-btn.link {
  background: none;
  color: var(--color-muted, #64748b);
  font-weight: 500;
  font-size: 13px;
  padding: 4px;
}
.login-btn.link:hover { color: var(--color-fg, #1E293B); text-decoration: underline; }

.login-or {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--color-subtle, #94a3b8);
  text-transform: uppercase; letter-spacing: .08em;
  margin: 6px 0 2px;
}
.login-or::before, .login-or::after {
  content: ""; flex: 1; height: 1px; background: var(--color-line, #e2e8f0);
}

.login-error {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-danger, #b42318);
  background: var(--color-danger-bg, #fde8e6);
  border: 1px solid rgba(180, 35, 24, .18);
  border-radius: 10px;
  padding: 9px 11px;
}

.login-foot {
  font-size: 11px;
  color: var(--color-subtle, #94a3b8);
  text-align: center;
  margin-top: 6px;
  line-height: 1.4;
}

/* Signed-in chip in the header */

/* The shell is hidden until there is a session. */
body.signed-out > header,
body.signed-out > nav,
body.signed-out > main,
body.signed-out .subnav,
body.signed-out #content { display: none !important; }
#login:empty { display: none; }

/* ── Ask (chat) ───────────────────────────────────────────────────────────
   The entry screen: one question, one input, three grounded cards. */

.chat-root { padding: 8px 0 40px; }

.chat-hero {
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.chat-owl { width: 44px; height: 44px; border-radius: 12px; display: block; margin: 0 auto; }
.chat-heading {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--color-ink, #0D1B2A);
  text-align: center;
  margin: 0;
}

.chat-input {
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-line, #e2e8f0);
  border-radius: 16px;
  padding: 12px 12px 12px 16px;
  box-shadow: 0 1px 2px rgba(13, 27, 42, .04), 0 8px 24px -16px rgba(13, 27, 42, .3);
  transition: border-color .12s, box-shadow .12s;
}
.chat-input:focus-within {
  border-color: var(--color-accent, #3B82F6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .14);
}
.chat-input.large { padding: 18px 16px; }

.chat-textarea {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-fg, #1E293B);
  max-height: 200px;
}
.chat-textarea::placeholder { color: var(--color-subtle, #94a3b8); }

.chat-send {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border: none; border-radius: 10px;
  background: var(--color-accent, #3B82F6);
  color: #fff;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .12s, opacity .12s;
}
.chat-send svg { width: 16px; height: 16px; }
.chat-send:disabled { opacity: .45; cursor: default; }
.chat-send:not(:disabled):hover { background: #2f6fd0; }

.chat-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.chat-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-line, #e2e8f0);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-card-icon { color: var(--color-accent, #3B82F6); margin-bottom: 6px; }
.chat-card-icon svg { width: 22px; height: 22px; }
.chat-card-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-accent, #3B82F6);
}
.chat-card-title {
  font-size: 15px; font-weight: 700; color: var(--color-ink, #0D1B2A);
}
/* Tone is applied only when the tenant's position warrants it -- an overdue
   filing must not look like the routine reminder next to it. */
/* Tinted briefing cards, through the themed palette rather than pastel
   literals. Hardcoded #fef2f2 kept the overdue card pink in dark mode while
   its title -- which does use a token -- turned light, so the headline went
   invisible on its own card. --red-50 and friends are already translucent
   under [data-theme="dark"], so the tint sits over the dark surface instead
   of replacing it. */
.chat-card.tone-danger {
  border-color: var(--red-200);
  background: var(--red-50);
}
.chat-card.tone-danger .chat-card-eyebrow,
.chat-card.tone-danger .chat-card-icon svg { color: var(--red-600); }
.chat-card.tone-warn {
  border-color: var(--amber-200);
  background: var(--amber-50);
}
.chat-card.tone-warn .chat-card-eyebrow,
.chat-card.tone-warn .chat-card-icon svg { color: var(--amber-700); }
.chat-card.tone-ok .chat-card-eyebrow,
.chat-card.tone-ok .chat-card-icon svg { color: var(--emerald-600); }
.chat-card-body {
  font-size: 12.5px; line-height: 1.5; color: var(--color-muted, #64748b);
}

/* thread */
.chat-convo {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.chat-turn { display: flex; flex-direction: column; gap: 8px; }
.chat-turn.user { align-items: flex-end; }
.chat-turn.bot { align-items: flex-start; }
.chat-bubble {
  max-width: 82%;
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.chat-turn.user .chat-bubble {
  background: var(--color-inverted, #0D1B2A);
  color: var(--color-on-inverted, #fff);
  border-bottom-right-radius: 5px;
}
.chat-turn.bot .chat-bubble {
  background: var(--color-paper-2, #f1f5f9);
  color: var(--color-fg, #1E293B);
  border-bottom-left-radius: 5px;
}
.chat-bubble.thinking { color: var(--color-subtle, #94a3b8); font-style: italic; }

.chat-footer {
  max-width: 780px;
  margin: 0 auto;
  padding: 8px 20px 0;
  position: sticky;
  bottom: 12px;
}
.chat-error {
  max-width: 780px; margin: 8px auto 0;
  font-size: 12.5px; color: var(--color-danger, #b42318);
  background: var(--color-danger-bg, #fde8e6);
  border: 1px solid rgba(180, 35, 24, .18);
  border-radius: 10px; padding: 9px 12px;
}

/* ── EDF ──────────────────────────────────────────────────────────────── */

.edf-page { padding: 8px 0 40px; }
.edf-page-head { margin-bottom: 14px; }
.edf-page-title {
  font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  color: var(--color-ink, #0D1B2A); margin: 0 0 4px;
}
.edf-page-sub {
  font-size: 12.5px; color: var(--color-muted, #64748b); margin: 0; max-width: 62ch;
}

.edf-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 16px;
  background: var(--color-paper-2, #f1f5f9);
  border: 1px solid var(--color-line, #e2e8f0);
  border-radius: 12px;
}
.edf-toolbar-label { font-size: 12.5px; color: var(--color-muted, #64748b); }
.edf-month {
  font: inherit; font-size: 13px; padding: 7px 10px;
  border: 1px solid var(--color-line-strong, #cbd5e1);
  border-radius: 9px; background: var(--color-surface, #fff);
  color: var(--color-fg, #1E293B);
}
.edf-generate {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 15px; border: none; border-radius: 9px;
  background: var(--color-inverted, #0D1B2A);
  color: var(--color-on-inverted, #fff); cursor: pointer;
}
.edf-generate:disabled { opacity: .5; cursor: default; }

.edf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.edf-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-line, #e2e8f0);
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.edf-card.compact { max-width: 380px; }
.edf-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.edf-form-no {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 12px; font-weight: 700; color: var(--color-ink, #0D1B2A);
}
.edf-period { font-size: 12px; color: var(--color-muted, #64748b); }
.edf-status {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 3px 8px; border-radius: 999px;
  background: var(--color-paper-2, #f1f5f9); color: var(--color-muted, #64748b);
}
.edf-status.ready { background: var(--color-ok-bg, #e7f4ec); color: var(--color-ok, #1f7a4d); }
.edf-status.draft { background: var(--color-warn-bg, #fbf3d8); color: var(--color-warn, #9a6700); }

.edf-total {
  font-size: 25px; font-weight: 800; letter-spacing: -.02em;
  color: var(--color-ink, #0D1B2A);
}
.edf-meta {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px;
  padding-top: 10px; border-top: 1px solid var(--color-line, #e2e8f0);
}
.edf-meta-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-subtle, #94a3b8);
}
.edf-meta-value { font-size: 12.5px; color: var(--color-fg, #1E293B); }
.edf-open {
  /* A <button> now, not an <a>: buttons inherit neither the page font nor a
     transparent background, so both are set here rather than left to the UA. */
  display: block; width: 100%; text-align: center;
  font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: none;
  padding: 8px 12px; border-radius: 9px; cursor: pointer;
  background: transparent;
  border: 1px solid var(--color-line-strong, #cbd5e1);
  color: var(--color-fg, #1E293B);
}
.edf-open:hover:not(:disabled) { background: var(--color-paper-2, #f1f5f9); }
.edf-open:disabled { opacity: .6; cursor: default; }
.edf-note {
  font-size: 11px; line-height: 1.4; color: var(--color-warn, #9a6700);
}
.edf-empty {
  padding: 40px 20px; text-align: center; color: var(--color-muted, #64748b);
  border: 1px dashed var(--color-line-strong, #cbd5e1); border-radius: 12px;
}
.edf-error {
  font-size: 12.5px; color: var(--color-danger, #b42318);
  background: var(--color-danger-bg, #fde8e6);
  border: 1px solid rgba(180, 35, 24, .18);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 12px;
}

/* ── Ledger ───────────────────────────────────────────────────────────── */

.ledger-page { padding: 8px 0 40px; }
.ledger-head { margin-bottom: 12px; }
.ledger-title {
  font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  color: var(--color-ink, #0D1B2A); margin: 0 0 4px;
}
.ledger-sub { font-size: 12.5px; color: var(--color-muted, #64748b); margin: 0; }
.ledger-note {
  font-size: 12.5px; color: var(--color-muted, #64748b);
  margin: 0 0 12px; max-width: 76ch; line-height: 1.5;
}

.ledger-tabs {
  display: inline-flex; gap: 4px; padding: 3px; margin-bottom: 14px;
  background: var(--color-paper-2, #f1f5f9);
  border-radius: 10px;
}
.ledger-tab {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 14px; border: none; border-radius: 8px;
  background: transparent; color: var(--color-muted, #64748b); cursor: pointer;
}
.ledger-tab.active {
  background: var(--color-surface, #fff); color: var(--color-ink, #0D1B2A);
  box-shadow: 0 1px 2px rgba(13, 27, 42, .08);
}

.ledger-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ledger-chip {
  font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-line, #e2e8f0);
  background: var(--color-surface, #fff); color: var(--color-muted, #64748b);
}
.ledger-chip.active {
  background: var(--color-inverted, #0D1B2A);
  color: var(--color-on-inverted, #fff);
  border-color: var(--color-ink, #0D1B2A);
}

.ledger-scroll { overflow-x: auto; border-radius: 12px; border: 1px solid var(--color-line, #e2e8f0); }
.ledger-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ledger-table th {
  text-align: left; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-subtle, #94a3b8);
  padding: 9px 10px; white-space: nowrap;
  background: var(--color-paper-2, #f1f5f9);
  border-bottom: 1px solid var(--color-line, #e2e8f0);
}
.ledger-table td {
  padding: 9px 10px; border-bottom: 1px solid var(--color-line, #e2e8f0);
  color: var(--color-fg, #1E293B); vertical-align: middle;
}
.ledger-table tbody tr:last-child td { border-bottom: none; }
.ledger-table tbody tr:hover { background: var(--color-paper, #F8FAFC); }
/* A withdrawal is your own money moving, not a client payment. */
.ledger-table tr.is-withdrawal td { background: rgba(59, 130, 246, .035); }
.ledger-table .num { text-align: right; white-space: nowrap; }
/* A UTR is one number. Wrapped across three lines it reads as three. */
.ledger-table .mono {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  white-space: nowrap;
}
.ledger-table .small { font-size: 11.5px; }
.ledger-client { font-weight: 600; max-width: 230px; }
.fee-pct { color: var(--color-subtle, #94a3b8); font-size: 11px; }

.via-pill {
  /* nowrap and inline-block, exactly like .ledger-status below. Without them
     the table -- which is width:100% over eleven columns -- squeezed this cell
     until "PLATFORM" broke one or two letters to a line, turning the badge
     into a five-row column. A table cannot shrink below its min-content
     width, so keeping the word whole is also what makes .ledger-scroll
     scroll instead of shredding the narrowest column. */
  display: inline-block; white-space: nowrap;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 3px 7px; border-radius: 6px;
  background: var(--color-paper-2, #f1f5f9); color: var(--color-muted, #64748b);
}
.via-pill.platform { background: var(--red-50); color: var(--red-700); }
.via-pill.bank { background: var(--emerald-50); color: var(--emerald-700); }
.via-pill.file, .via-pill.chat { background: var(--blue-50); color: var(--blue-700); }

.ledger-status {
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
  padding: 3px 8px; border-radius: 999px;
  background: var(--color-paper-2, #f1f5f9); color: var(--color-muted, #64748b);
}
.ledger-status.closed { background: var(--color-ok-bg, #e7f4ec); color: var(--color-ok, #1f7a4d); }
.ledger-status.in-edf { background: var(--color-info-bg, #e6f1fb); color: var(--color-info, #185fa5); }
.ledger-status.awaiting-invoice,
.ledger-status.awaiting-firc { background: var(--color-warn-bg, #fbf3d8); color: var(--color-warn, #9a6700); }
.ledger-status.needs-review { background: var(--color-danger-bg, #fde8e6); color: var(--color-danger, #b42318); }

.payer-kind {
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
  padding: 3px 8px; border-radius: 999px;
}
.payer-kind.end_client { background: var(--color-ok-bg, #e7f4ec); color: var(--color-ok, #1f7a4d); }
.payer-kind.intermediary { background: var(--color-info-bg, #e6f1fb); color: var(--color-info, #185fa5); }

.ledger-empty {
  padding: 40px 20px; text-align: center; color: var(--color-muted, #64748b);
  border: 1px dashed var(--color-line-strong, #cbd5e1); border-radius: 12px;
}
.ledger-more {
  padding: 9px 12px; font-size: 11.5px; color: var(--color-muted, #64748b);
  background: var(--color-paper-2, #f1f5f9);
}
.ledger-error {
  font-size: 12.5px; color: var(--color-danger, #b42318);
  background: var(--color-danger-bg, #fde8e6);
  border: 1px solid rgba(180, 35, 24, .18);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 12px;
}

/* ── Team (CA & Ops onboarding) ───────────────────────────────────────── */

.team-page { padding: 8px 0 40px; }

.team-invite {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-line, #e2e8f0);
  border-radius: 14px; padding: 18px; margin-bottom: 18px;
}
.team-invite-title {
  font-size: 14px; font-weight: 700; color: var(--color-ink, #0D1B2A);
}
.team-invite-sub {
  font-size: 12.5px; color: var(--color-muted, #64748b);
  margin: 4px 0 14px; max-width: 68ch; line-height: 1.5;
}
.team-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-bottom: 14px;
}
.team-field { display: flex; flex-direction: column; gap: 5px; }
.team-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--color-subtle, #94a3b8);
}
.team-input {
  font: inherit; font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--color-line-strong, #cbd5e1);
  border-radius: 9px; background: var(--color-surface, #fff);
  color: var(--color-fg, #1E293B); outline: none;
}
.team-input:focus {
  border-color: var(--color-accent, #3B82F6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}
.team-btn {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 16px; border: none; border-radius: 9px;
  background: var(--color-inverted, #0D1B2A);
  color: var(--color-on-inverted, #fff); cursor: pointer;
}
.team-btn:disabled { opacity: .5; cursor: default; }

.team-member {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-line, #e2e8f0);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 10px;
}
.team-member-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap;
}
.team-member-name { font-size: 14px; font-weight: 700; color: var(--color-ink, #0D1B2A); }
.team-member-meta { font-size: 12px; color: var(--color-muted, #64748b); }
.team-member-tags { display: flex; gap: 6px; align-items: center; }
.team-status {
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: var(--color-paper-2, #f1f5f9); color: var(--color-muted, #64748b);
}
.team-status.active { background: var(--color-ok-bg, #e7f4ec); color: var(--color-ok, #1f7a4d); }
.team-status.invited { background: var(--color-warn-bg, #fbf3d8); color: var(--color-warn, #9a6700); }

.team-clients {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--color-line, #e2e8f0);
}
.team-clients-empty {
  margin-top: 12px; padding-top: 12px; font-size: 12px;
  color: var(--color-subtle, #94a3b8);
  border-top: 1px solid var(--color-line, #e2e8f0);
}
.team-client {
  font: inherit; font-size: 12px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--color-line-strong, #cbd5e1);
  background: var(--color-surface, #fff); color: var(--color-muted, #64748b);
  cursor: pointer;
}
.team-client.on {
  background: var(--color-ok-bg, #e7f4ec); color: var(--color-ok, #1f7a4d);
  border-color: var(--color-ok-bright, #6ee7b7);
}
.team-client:disabled { opacity: .5; cursor: default; }

.team-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.team-stat {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-line, #e2e8f0);
  border-radius: 12px; padding: 14px;
}
.team-stat-value {
  font-size: 24px; font-weight: 800; letter-spacing: -.02em;
  color: var(--color-ink, #0D1B2A);
}
.team-stat-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-subtle, #94a3b8); margin-top: 2px;
}

.ladder {
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
}
.ladder.l2 { background: var(--color-info-bg, #e6f1fb); color: var(--color-info, #185fa5); }
.ladder.l3 { background: var(--color-warn-bg, #fbf3d8); color: var(--color-warn, #9a6700); }

/* Attach + speech, in the chat prompt */

.chat-attach-wrap { display: inline-flex; flex-shrink: 0; }
.chat-file { display: none; }
.chat-attach {
  width: 32px; height: 32px; flex-shrink: 0;
  border: none; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--color-subtle, #94a3b8);
  display: grid; place-items: center;
  transition: background .12s, color .12s;
}
.chat-attach svg { width: 17px; height: 17px; }
.chat-attach:hover:not(:disabled) {
  background: var(--color-paper-2, #f1f5f9);
  color: var(--color-fg, #1E293B);
}
.chat-attach:disabled { opacity: .4; cursor: default; }

.chat-mode {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-line, #e2e8f0);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(13, 27, 42, .04);
}
.chat-mode-btn {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 16px; border: none; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--color-muted, #64748b);
  display: inline-flex; align-items: center; gap: 6px;
}
.chat-mode-btn svg { width: 14px; height: 14px; }
.chat-mode-t { font-weight: 700; font-size: 12px; }
.chat-mode-btn.active {
  background: var(--color-accent, #3B82F6); color: #fff;
}

.chat-input.listening {
  border-color: var(--color-accent, #3B82F6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .2);
}
.chat-listening {
  font-size: 12px; color: var(--color-accent, #3B82F6); font-weight: 600;
}
.chat-listening::before {
  content: "●"; margin-right: 6px;
  animation: taxowl-pulse 1.2s ease-in-out infinite;
}
@keyframes taxowl-pulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }

/* Whole-chat drop target */
.chat-root.dropping {
  outline: 2px dashed var(--color-accent, #3B82F6);
  outline-offset: -10px; border-radius: 16px;
}

/* ── Onboarding and the account page ─────────────────────────────────────
   Both render the same field component (components/profileForm.js), so the
   input styling lives once, under .pf-*. */

body.onboarding .header,
body.onboarding .subnav,
body.onboarding .main { display: none; }

#onboarding {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background: var(--bg-app);
}

.onb-card, .prof-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 28px;
}

.onb-card { width: 100%; max-width: 560px; }
.onb-head { margin-bottom: 20px; }
.onb-title {
  margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  color: var(--text-primary);
}
.onb-blurb, .onb-section-blurb, .prof-card-blurb, .prof-intro {
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-muted);
}

.onb-steps {
  display: flex; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0;
}
.onb-step {
  display: flex; align-items: center; gap: 6px; flex: 1;
  font-size: 11.5px; font-weight: 600; color: var(--text-dim);
  padding-top: 8px; border-top: 2px solid var(--border-color);
}
.onb-step.current { color: var(--blue-600); border-top-color: var(--blue-600); }
.onb-step.done { color: var(--text-muted); border-top-color: var(--blue-300); }
.onb-step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--bg-subtle); font-size: 10.5px;
}
.onb-step.current .onb-step-no { background: var(--blue-600); color: #fff; }

.onb-section { margin-bottom: 14px; }
.onb-section-title, .prof-card-title {
  margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--text-primary);
}

.onb-fields, .prof-fields { display: flex; flex-direction: column; gap: 14px; }

.pf-field { display: flex; flex-direction: column; gap: 5px; }
.pf-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
}
.pf-required {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--blue-600); background: var(--blue-50);
  border-radius: 999px; padding: 1px 6px;
}
.pf-input {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border-color); border-radius: 10px;
  background: var(--bg-surface); color: var(--text-primary);
  padding: 9px 11px; font: inherit; font-size: 13.5px;
}
.pf-input:focus { outline: none; border-color: var(--blue-500); }
.pf-input.invalid { border-color: #dc2626; }
textarea.pf-input { resize: vertical; }
.pf-hint { font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }
.pf-error { font-size: 11.5px; line-height: 1.45; color: #dc2626; font-weight: 500; }

.onb-actions, .prof-actions {
  display: flex; align-items: center; gap: 10px; margin-top: 20px;
}
.onb-actions { justify-content: space-between; }

.onb-primary, .prof-primary {
  border: none; border-radius: 10px; padding: 9px 18px;
  background: var(--text-primary); color: var(--bg-surface);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.onb-secondary, .prof-secondary, .prof-edit {
  border: 1px solid var(--border-color); border-radius: 10px; padding: 8px 16px;
  background: var(--bg-surface); color: var(--text-secondary);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.onb-primary[disabled], .prof-primary[disabled], .prof-danger[disabled] {
  opacity: .55; cursor: default;
}
.onb-skip {
  display: block; margin: 14px auto 0; border: none; background: none;
  color: var(--text-muted); font: inherit; font-size: 12.5px;
  text-decoration: underline; cursor: pointer;
}
.onb-banner {
  border: 1px solid var(--red-200); background: var(--red-50);
  color: var(--red-700);
  border-radius: 10px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 14px;
}

/* --- the account page ---------------------------------------------------- */

.prof-root { max-width: 720px; margin: 0 auto; padding: 8px 0 48px; }
.prof-title {
  margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  color: var(--text-primary);
}
.prof-intro { margin-bottom: 18px; }
.prof-card { margin-bottom: 16px; }
.prof-card-head { display: flex; justify-content: space-between; gap: 16px; }
.prof-edit { padding: 5px 12px; font-size: 12.5px; flex: none; align-self: start; }

.prof-rows { margin-top: 14px; display: flex; flex-direction: column; }
.prof-row {
  display: flex; gap: 16px; padding: 8px 0;
  border-top: 1px solid var(--border-subtle); font-size: 13px;
}
.prof-row:first-child { border-top: none; }
.prof-row-label { flex: 0 0 190px; color: var(--text-muted); }
.prof-row-value { color: var(--text-primary); white-space: pre-wrap; }
.prof-row-empty { color: var(--text-dim); font-style: italic; }

.prof-loading { padding: 40px 0; text-align: center; color: var(--text-muted); }
.prof-banner {
  border-radius: 10px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 14px;
}
.prof-banner.good {
  border: 1px solid var(--emerald-200); background: var(--emerald-50);
  color: var(--emerald-700);
}
.prof-banner.bad {
  border: 1px solid var(--red-200); background: var(--red-50);
  color: var(--red-700);
}

.prof-card.danger { border-color: #fecaca; }
.prof-card.danger .prof-card-title { color: #b91c1c; }
.prof-confirm { margin-top: 16px; }
.prof-danger {
  border: none; border-radius: 10px; padding: 9px 18px;
  background: #dc2626; color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.prof-danger-outline {
  margin-top: 16px;
  border: 1px solid #fecaca; border-radius: 10px; padding: 8px 16px;
  background: var(--bg-surface); color: #b91c1c;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}

/* ── Long strings must not break the layout ──────────────────────────────
   Filenames, remitter narratives and payer names all come from uploaded
   documents, so their length is not ours to assume. A single unbroken run of
   characters used to push a table wider than the viewport and stretch a
   briefing card off-screen. */

.doc-table td,
.ledger-table td {
  overflow-wrap: anywhere;
}

/* Cells that must stay scannable get a hard ceiling and an ellipsis; the full
   value stays available in the title attribute and on the detail view. */
.doc-name-cell,
.ledger-client,
.doc-table td:first-child {
  max-width: 26rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-card-body,
.chat-card-title,
.prof-row-value,
.edf-form-no {
  overflow-wrap: anywhere;
}

/* The briefing card lists document names; one long name must not stretch the
   three-card grid. */
.chat-card {
  min-width: 0;
  overflow: hidden;
}

.edf-unrealised {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-muted);
}

.edf-total.foreign {
  font-size: 26px;
}

.ledger-more {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px 4px; font-size: 12.5px;
}
.ledger-more-btn {
  border: 1px solid var(--border-color); border-radius: 8px; padding: 5px 12px;
  background: var(--bg-surface); color: var(--text-secondary);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}

/* The payer directory is editable: the exporter states the SAC and country
   their platform never recorded, once per client. */
.payer-sac, .payer-country {
  border: 1px solid var(--border-color); border-radius: 7px;
  background: var(--bg-surface); color: var(--text-primary);
  padding: 3px 6px; font: inherit; font-size: 11.5px; max-width: 15rem;
}
.payer-sac:disabled, .payer-country:disabled { opacity: .5; }
.payer-country { width: 8rem; }

/* `hidden` must actually hide. A rule like `.engine-label { display: flex }`
   outranks the browser's default `[hidden] { display: none }`, so permission
   gating in app.js appeared to do nothing. */
[hidden] { display: none !important; }

/* The phone row: country picker, its dial code, then the national number.
   The picker is deliberately narrow — the flag and dial code are what the user
   checks, and the full country name would push the number field off the card. */
.login-phone-row {
  display: grid;
  grid-template-columns: 5.9rem 1fr;
  align-items: center;
  gap: 6px;
}
.login-dial {
  width: 100%;
  border: 1px solid var(--border-color, #e4e4e7);
  border-radius: 10px;
  background: var(--bg-surface, #fff);
  color: var(--text-primary, #18181b);
  padding: 11px 2px 11px 8px;
  font: inherit;
  font-size: 15px;
  /* The flag and dial code fit; the country name is there for the open
     dropdown and for screen readers. */
  text-overflow: clip;
}
.login-phone-row .login-input { margin: 0; }

.app-banner {
  border: 1px solid var(--red-200); background: var(--red-50);
  color: var(--red-700);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 16px;
  font-size: 13px;
}

/* Transient messages. Anchored to the viewport so a toast raised from a table
   cell is not clipped by the table's own overflow. */
#toast-host {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  max-width: 360px; padding: 10px 13px; border-radius: 10px;
  font-size: 13px; line-height: 1.4;
  background: var(--color-inverted, #1E293B);
  color: var(--color-on-inverted, #fff);
  box-shadow: 0 6px 20px rgba(15, 23, 42, .18);
  opacity: 1; transition: opacity .25s ease, transform .25s ease;
}
.toast-error { background: var(--color-danger, #b42318); }
.toast.is-leaving { opacity: 0; transform: translateY(4px); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* A stored filing whose numbers no longer match the ledger under it. */
.edf-stale {
  margin: 6px 0 2px; padding: 7px 9px; border-radius: 8px;
  font-size: 11.5px; line-height: 1.35;
  color: var(--color-warn, #9a6700);
  background: var(--color-warn-bg, #fff8e6);
  border: 1px solid var(--color-warn-line, #f2dfa8);
}

/* Document detail with no source pane: the extracted figures take the width. */
.detail-single { display: block; width: 100%; }

/* --- the access waitlist ------------------------------------------------- */
.toast-ok { background: var(--color-ok, #1f7a4d); }

.access-page { display: flex; flex-direction: column; gap: 16px; }
.access-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.access-stat {
  flex: 1; min-width: 130px; padding: 12px 14px; border-radius: 12px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-line, #e2e8f0);
}
.access-stat-value {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  color: var(--color-ink, #0D1B2A); font-variant-numeric: tabular-nums;
}
.access-stat-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--color-subtle, #94a3b8); margin-top: 2px;
}
.access-stat.pending .access-stat-value { color: var(--color-warn, #9a6700); }

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.access-scroll { overflow-x: auto; }
.access-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.access-table th {
  text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--color-subtle, #94a3b8);
  padding: 9px 10px; white-space: nowrap;
  border-bottom: 1px solid var(--color-line, #e2e8f0);
}
.access-table td {
  padding: 10px; border-bottom: 1px solid var(--color-line, #e2e8f0);
  color: var(--color-fg, #1E293B); vertical-align: middle;
}
.access-table tbody tr:last-child td { border-bottom: none; }
.access-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.access-identity { font-weight: 600; }
.access-sub { font-size: 11.5px; color: var(--color-muted, #64748b); }
.access-actions { text-align: right; white-space: nowrap; }
.access-action {
  font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 8px; cursor: pointer; margin-left: 6px;
  border: 1px solid var(--color-line-strong, #cbd5e1);
  background: var(--color-surface, #fff); color: var(--color-fg, #1E293B);
}
.access-action:disabled { opacity: .55; cursor: default; }
.access-action.approve:not(:disabled):hover {
  background: var(--color-ok-bg, #e7f4ec); border-color: var(--color-ok, #1f7a4d);
  color: var(--color-ok, #1f7a4d);
}
.access-action.reject:not(:disabled):hover {
  background: var(--color-danger-bg, #fde8e6); border-color: var(--color-danger, #b42318);
  color: var(--color-danger, #b42318);
}
.access-pill {
  display: inline-block; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
}
.access-pill.active { background: var(--color-ok-bg, #e7f4ec); color: var(--color-ok, #1f7a4d); }
.access-pill.rejected { background: var(--color-danger-bg, #fde8e6); color: var(--color-danger, #b42318); }

/* --- the waiting screen -------------------------------------------------- */
.pending-badge {
  align-self: flex-start; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 9px; border-radius: 999px;
  background: var(--color-warn-bg, #fbf3d8); color: var(--color-warn, #9a6700);
}
.pending-badge.rejected {
  background: var(--color-danger-bg, #fde8e6); color: var(--color-danger, #b42318);
}
.pending-title {
  font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0;
  color: var(--color-ink, #0D1B2A);
}
.pending-body {
  font-size: 13px; line-height: 1.55; color: var(--color-muted, #64748b); margin: 0;
}
.pending-who {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 9px 11px; border-radius: 10px;
  background: var(--color-paper-2, #f1f5f9);
}
.pending-who-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--color-subtle, #94a3b8);
}
.pending-who-value { font-size: 12.5px; font-weight: 600; color: var(--color-fg, #1E293B); }
.pending-note { font-size: 11.5px; line-height: 1.5; color: var(--color-subtle, #94a3b8); margin: 0; }

/* A waiting account has no tabs it could open; showing them implies otherwise. */
/* The shell is hidden while booting, signed out, or waiting for approval.
   One list, so a new "not ready" state cannot forget half of it. */
body.booting > header,
body.booting > nav,
body.booting > main,
body.booting .subnav,
body.booting #content,
body.pending-access > header,
body.pending-access > nav,
body.pending-access > main,
body.pending-access .subnav,
body.pending-access #content { display: none !important; }
.access-pill.invited { background: var(--color-info-bg, #e6f1fb); color: var(--color-info, #185fa5); }
.access-pill.closed { background: var(--color-paper-2, #f1f5f9); color: var(--color-muted, #64748b); }
.access-stat.invited .access-stat-value { color: var(--color-info, #185fa5); }

/* Role picker on the access screen. */
.access-role {
  font-family: inherit; font-size: 12px; padding: 4px 7px; border-radius: 7px;
  border: 1px solid var(--color-line-strong, #cbd5e1);
  background: var(--color-surface, #fff); color: var(--color-fg, #1E293B);
  cursor: pointer;
}
.access-role:disabled { opacity: .55; cursor: default; }
.access-role-fixed {
  font-size: 11.5px; color: var(--color-muted, #64748b);
  border-bottom: 1px dotted var(--color-line-strong, #cbd5e1); cursor: help;
}
.access-role-confirm { display: flex; flex-direction: column; gap: 6px; max-width: 280px; }
.access-role-confirm .access-action { margin-left: 0; margin-right: 6px; }