/*
 * Meridian — design tokens and layout shell.
 *
 * All visual values (colours, spacing, radius, fonts, transitions) live here
 * as CSS custom properties. No hex values, spacing values, font sizes, or
 * radii are written elsewhere in the codebase. Templates use the variables.
 *
 * Tokens lifted verbatim from the approved Phase-4 prototype
 * (meridian-phase4.html). When a new screen is built, additional component
 * classes are appended below the layout block — never duplicated tokens.
 */

/* -------------------------------------------------------------------------
 * Design tokens
 * --------------------------------------------------------------------- */

:root {
  --bg: oklch(98% 0.005 220);
  --surface: oklch(100% 0 0);
  --fg: oklch(18% 0.015 220);
  --muted: oklch(50% 0.012 220);
  --border: oklch(90% 0.008 220);
  --accent: oklch(38% 0.08 200);
  --accent-muted: oklch(38% 0.08 200 / 0.15);
  --danger: oklch(55% 0.18 25);
  --danger-muted: oklch(55% 0.18 25 / 0.12);
  --caution: oklch(70% 0.14 85);
  --caution-muted: oklch(70% 0.14 85 / 0.12);
  --success: oklch(55% 0.12 155);
  --success-muted: oklch(55% 0.12 155 / 0.12);

  --font-display: 'Iowan Old Style', 'Charter', 'Georgia', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  --transition-fast: 100ms ease;
  --transition-normal: 150ms ease;

  --left-panel-width: 380px;
  --header-height: 52px;
}

[data-theme="dark"] {
  --bg: oklch(14% 0.015 220);
  --surface: oklch(18% 0.015 220);
  --fg: oklch(92% 0.008 220);
  --muted: oklch(55% 0.012 220);
  --border: oklch(26% 0.015 220);
  --accent: oklch(58% 0.10 200);
  --accent-muted: oklch(58% 0.10 200 / 0.18);
  --danger: oklch(65% 0.16 25);
  --danger-muted: oklch(65% 0.16 25 / 0.15);
  --caution: oklch(75% 0.12 85);
  --caution-muted: oklch(75% 0.12 85 / 0.15);
  --success: oklch(65% 0.10 155);
  --success-muted: oklch(65% 0.10 155 / 0.15);
}

/* -------------------------------------------------------------------------
 * Resets and base
 * --------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  min-height: 100vh;
}
#root { min-height: 100vh; }

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

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* Global form-element styling. Uses --surface/--fg/--border so the
   theme toggle flips inputs along with the rest of the UI — without
   this rule, inputs fall back to OS defaults (white bg + black text)
   and look broken in dark mode. */
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  transition: border-color var(--transition-fast);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
}
input::placeholder, textarea::placeholder {
  color: var(--muted);
}
/* Defensive: a few user agents render the native datepicker / select
   chevron in white-on-white in dark mode. Force the colour scheme
   hint so the picker UI flips with the theme. */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  color-scheme: dark;
}

/* -------------------------------------------------------------------------
 * Type utilities
 * --------------------------------------------------------------------- */

.font-display { font-family: var(--font-display); letter-spacing: -0.01em; }
.font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.text-muted { color: var(--muted); }

/* -------------------------------------------------------------------------
 * Buttons
 * --------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 13px;
  transition: all var(--transition-fast);
  min-height: 36px;
}
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: var(--surface); border: 1px solid var(--border); color: var(--fg); }
.btn-secondary:hover { background: var(--bg); border-color: var(--muted); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { background: var(--border); color: var(--fg); }
.btn-danger { background: var(--danger-muted); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: white; }
.btn-sm { padding: 4px 10px; min-height: 28px; font-size: 12px; }
.btn-icon { padding: 6px; min-height: auto; }

/* -------------------------------------------------------------------------
 * Generic surface card (prototype line 88)
 * --------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* -------------------------------------------------------------------------
 * Inline badges
 * --------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.badge-danger { background: var(--danger-muted); color: var(--danger); }
.badge-caution { background: var(--caution-muted); color: var(--caution); }
.badge-success { background: var(--success-muted); color: var(--success); }
.badge-neutral { background: var(--border); color: var(--muted); }
.badge-accent { background: var(--accent-muted); color: var(--accent); }

/* -------------------------------------------------------------------------
 * Theme toggle (B1 header-strip)
 *
 * Single icon-only button on the nav bar. The visible icon shows the
 * theme the click will switch TO (sun in dark mode, moon in light mode).
 * Early-paint script in base.html sets data-theme on <html> from
 * localStorage before first render so dark-mode users don't see a
 * flash of the light theme.
 * --------------------------------------------------------------------- */

.theme-toggle-btn-single {
  padding: 6px 10px;
  min-height: auto;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
}
.theme-toggle-btn-single:hover {
  color: var(--fg);
  border-color: var(--border);
}
.theme-toggle-btn-single svg[hidden] { display: none; }

/* -------------------------------------------------------------------------
 * Application split layout
 * --------------------------------------------------------------------- */

.app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.left-panel {
  width: var(--left-panel-width);
  min-width: var(--left-panel-width);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header-strip {
  height: var(--header-height);
  min-height: var(--header-height);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-md);
  gap: var(--space-md);
  background: var(--surface);
}

.app-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.header-spacer { flex: 1; }

.panel-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* -------------------------------------------------------------------------
 * Tab bars (left and right panel)
 * --------------------------------------------------------------------- */

.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 var(--space-md);
  gap: var(--space-xs);
}
.tab {
  padding: var(--space-sm) var(--space-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition-fast);
}
.tab:hover { color: var(--fg); }
.tab.active { color: var(--fg); border-bottom-color: var(--accent); }

/* -------------------------------------------------------------------------
 * Case list (left panel, Cases tab)
 * --------------------------------------------------------------------- */

.case-list { padding: var(--space-sm); }

.case-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
  border: 1px solid transparent;
}
.case-item:hover { background: var(--bg); }
.case-item.selected { background: var(--accent-muted); border-color: var(--accent); }

.case-item-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.case-ref {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
}

.case-type-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--border);
  color: var(--muted);
}
.case-type-badge.gi { background: var(--accent-muted); color: var(--accent); }

.case-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 12px;
  color: var(--muted);
}

.case-days { font-family: var(--font-mono); }
.case-days.healthy { color: var(--success); font-weight: 500; }
.case-days.urgent { color: var(--caution); font-weight: 500; }
.case-days.overdue { color: var(--danger); font-weight: 600; }

/* -------------------------------------------------------------------------
 * Case header (right panel top)
 * --------------------------------------------------------------------- */

.case-header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.case-header-top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}
.case-header-main { flex: 1; }
.case-header-ref {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-xs);
}
.case-header-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 13px;
  color: var(--muted);
}
.case-header-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.status-strip {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-md) 0;
  flex-wrap: wrap;
}
.status-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.status-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.status-value {
  font-size: 13px;
  font-weight: 500;
}
.status-value.overdue { color: var(--danger); }

.pending-entries {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

/* Interview booking strip — replaces the prior pending-entries
   pills on the case header. Renders only when there's a pending
   INTERVIEW task and a booked date, so the operator can see the
   appointment at a glance. */
.interview-booking {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--accent-muted);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.interview-booking-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.interview-booking-when { font-weight: 500; }
.interview-booking-location { font-size: 12px; }
.pending-entry {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg);
  border-radius: var(--radius-md);
  font-size: 12px;
  cursor: pointer;
}
.pending-entry:hover { background: var(--accent-muted); }
.pending-entry-icon {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
}
.pending-entry-icon.polonious { background: var(--accent-muted); color: var(--accent); }
.pending-entry-icon.portal { background: var(--caution-muted); color: var(--caution); }

/* -------------------------------------------------------------------------
 * Tasks tab
 * --------------------------------------------------------------------- */

.tasks-tab { padding: var(--space-md); }
.tasks-divider {
  border-top: 1px solid var(--border);
  margin: var(--space-lg) 0;
}

.task-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}
.task-item.next { border-color: var(--accent); background: var(--accent-muted); }
.task-item.overdue { border-color: var(--danger); }
.task-item.complete { opacity: 0.5; }

.task-type-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  height: fit-content;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}
.task-item.next .task-type-badge {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.task-item.overdue .task-type-badge {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

.task-body { flex: 1; }
.task-label { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.task-item.complete .task-label { text-decoration: line-through; }
.task-meta {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  margin-bottom: 2px;
}
.task-notes { font-size: 12px; color: var(--muted); }

/* -------------------------------------------------------------------------
 * Summary tab
 * --------------------------------------------------------------------- */

.summary-tab { padding: var(--space-md); }
.case-summary {
  background: var(--bg);
  padding: var(--space-md);
  border-radius: var(--radius-md);
}
.case-summary-row {
  display: flex;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}
.case-summary-row:last-child { margin-bottom: 0; }
.case-summary-item { flex: 1; }
.case-summary-item-full { flex: 1 1 100%; }
.case-summary-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 2px;
}
.case-summary-value { font-size: 13px; line-height: 1.5; }
.summary-list { padding-left: var(--space-lg); }
.summary-list li { margin-bottom: var(--space-xs); }

/* -------------------------------------------------------------------------
 * Running Sheet tab
 * --------------------------------------------------------------------- */

.running-sheet { padding: var(--space-md); }
.running-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}
.running-sheet-title {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.running-sheet-meta {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.rse-group { margin-bottom: var(--space-lg); }
.rse-date {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-sm);
  position: sticky;
  top: 0;
  background: var(--bg);
}
.rse-entry {
  display: grid;
  grid-template-columns: 60px 1fr auto auto auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.rse-entry:last-child { border-bottom: none; }
.rse-time { font-family: var(--font-mono); color: var(--muted); }
.rse-hours {
  font-family: var(--font-mono);
  color: var(--muted);
  text-align: right;
  min-width: 50px;
}
.rse-travel {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.rse-actions {
  display: flex;
  gap: var(--space-xs);
  visibility: hidden;
}
.rse-entry:hover .rse-actions,
.rse-entry:focus-within .rse-actions { visibility: visible; }

/* -------------------------------------------------------------------------
 * Deliverables tab
 * --------------------------------------------------------------------- */

.deliverables-tab { padding: var(--space-md); }
.deliverables-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}
.deliverables-title {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.deliverable-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}
.deliverable-item.complete { background: var(--success-muted); border-color: var(--success); }
.deliverable-item.pending { background: var(--caution-muted); border-color: var(--caution); }
.deliverable-status {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  background: var(--border);
  color: var(--muted);
}
.deliverable-item.complete .deliverable-status { background: var(--success); color: white; }
.deliverable-item.pending .deliverable-status { background: var(--caution); color: white; }
.deliverable-content { flex: 1; }
.deliverable-text { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.deliverable-meta {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
 * Polonious tab
 * --------------------------------------------------------------------- */

.polonious-tab { padding: var(--space-md); }
.pol-section { margin-bottom: var(--space-xl); }
.pol-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}
.pol-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.pol-section-count {
  font-size: 11px;
  color: var(--muted);
  background: var(--border);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.pol-entry {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  overflow: hidden;
}
.pol-entry-header {
  padding: var(--space-md);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.pol-entry-type { font-weight: 600; font-size: 13px; }
.pol-entry-body { padding: var(--space-md); }
.pol-field { margin-bottom: var(--space-sm); }
.pol-field:last-child { margin-bottom: 0; }
.pol-field-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pol-field-value { font-size: 13px; margin-top: 2px; line-height: 1.5; }
.pol-entry-actions {
  padding: var(--space-md);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--space-sm);
}

/* -------------------------------------------------------------------------
 * Modal + form
 * --------------------------------------------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: oklch(0% 0 0 / 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.modal {
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Every modal in the app wraps its header/body/footer in a <form>.
   <form> defaults to display:block, which BREAKS the flex chain — the
   form would otherwise take its natural content height, .modal-body's
   flex:1 would have no effect (parent isn't flex), and .modal's
   overflow:hidden would simply clip the content past 90vh.
   This rule turns the form into a flex column itself so the chain
   continues: .modal -> form -> .modal-body. min-height: 0 lets the
   form shrink below its content height. */
.modal > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
}
.modal-header {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.modal-title {
  flex: 1;
  font-weight: 600;
  font-size: 16px;
}
.modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-lg);
}
.modal-footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}

.form-row { margin-bottom: var(--space-md); }
.form-row:last-child { margin-bottom: 0; }
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: var(--space-xs);
  color: var(--muted);
}
.form-input { width: 100%; }
textarea.form-input { resize: vertical; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.form-help {
  font-size: 11px;
  color: var(--muted);
  margin-top: var(--space-xs);
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 13px;
  margin-top: var(--space-sm);
  cursor: pointer;
}
.checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

/* Inline radio group used by the intake form's case-type selector. */
.radio-group {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.radio-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 13px;
}
.radio-item:hover { border-color: var(--muted); }
.radio-item.selected { border-color: var(--accent); background: var(--accent-muted); }
.radio-item input[type="radio"] { accent-color: var(--accent); }

/* Intake polling fragment layout. */
.modal-intake-polling { max-width: 520px; }
.intake-polling-body { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.intake-polling-state {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.intake-polling-spinner {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: meridian-spin 1s linear infinite;
}
@keyframes meridian-spin { to { transform: rotate(360deg); } }
.intake-polling-text { flex: 1; }
.intake-polling-line { font-size: 13px; margin-bottom: var(--space-xs); }

/* Intake manual link inside the step-1 form-help text. */
.intake-manual-link {
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

/* Intake review modal: per-field row, confidence dot, source expander. */
.modal-lg { max-width: 800px; }
.intake-review-body .form-help { margin-bottom: var(--space-lg); }
.review-field {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
}
.review-field:last-child { border-bottom: none; }
.review-field.must-confirm {
  background: var(--caution-muted);
  margin: 0 calc(-1 * var(--space-lg));
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  border-bottom-color: var(--caution);
}
.review-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xs);
}
.confidence-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.confidence-dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.confidence-dot.high { background: var(--success-muted); color: var(--success); }
.confidence-dot.high::before { background: var(--success); }
.confidence-dot.medium { background: var(--caution-muted); color: var(--caution); }
.confidence-dot.medium::before { background: var(--caution); }
.confidence-dot.low { background: var(--danger-muted); color: var(--danger); }
.confidence-dot.low::before { background: var(--danger); }
.confidence-pct { font-size: 11px; font-weight: 600; }

.review-confirm { margin-top: var(--space-xs); font-weight: 500; }
.review-source { margin-top: var(--space-sm); }
.review-source > summary {
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-xs) 0;
}
.review-source-body {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre-wrap;
  margin-top: var(--space-xs);
}

/* Manual fallback form. ctp-only / gi-only blocks toggled by app.js. */
.form-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-lg) 0;
}
.ctp-only, .gi-only { display: none; }
.intake-family-ctp .ctp-only { display: block; }
.intake-family-gi  .gi-only  { display: block; }

/* -------------------------------------------------------------------------
 * Call scripter (Session E)
 * --------------------------------------------------------------------- */

.modal-contact-picker { max-width: 520px; }
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.contact-pick {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.contact-pick:hover {
  border-color: var(--accent);
  background: var(--accent-muted);
}
.contact-name {
  font-weight: 500;
  font-size: 13px;
}
.contact-meta {
  font-size: 12px;
  color: var(--muted);
}
.contact-attempts {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Call script modal */
.modal-call-script { max-width: 760px; }
.call-script-body { padding: 0 var(--space-lg) var(--space-lg); }
.call-script-header {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-md);
}
.call-script-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.call-script-name {
  font-size: 16px;
  font-weight: 600;
}

.call-recording-banner {
  background: var(--danger-muted);
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-size: 13px;
  margin-bottom: var(--space-md);
}
.call-recording-banner strong { color: var(--danger); }

.call-stage {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  background: var(--surface);
  overflow: hidden;
}
.call-stage > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg);
}
.call-stage > summary::-webkit-details-marker { display: none; }
.call-stage[open] > summary {
  border-bottom: 1px solid var(--border);
}
.call-stage-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.call-stage-num {
  font-size: 11px;
  font-weight: 600;
  background: var(--accent-muted);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.call-stage-title {
  flex: 1;
  font-weight: 500;
  font-size: 14px;
}
.call-stage-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.call-block {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--border);
}
.call-block-say {
  background: var(--bg);
  border-left-color: var(--accent);
}
.call-block-note {
  background: var(--bg);
  border-left-color: var(--caution);
}
.call-block-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: var(--space-xs);
}
.call-block-text {
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.call-end-form { background: var(--accent-muted); }
.call-end-form > summary { background: var(--accent-muted); }

.call-outcome-row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.call-outcome-btn { min-width: 140px; }

/* -------------------------------------------------------------------------
 * GI Interview Conductor (Session G — full-page overlay, not a modal)
 * --------------------------------------------------------------------- */

.conductor-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.conductor-strip {
  height: var(--header-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-md);
  gap: var(--space-lg);
}
.conductor-title {
  font-size: 13px;
  color: var(--muted);
}
.conductor-spacer { flex: 1; }
.conductor-timer {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.conductor-timer-idle { color: var(--muted); }

.conductor-tabs { background: var(--surface); }

.conductor-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-xl);
}

.gi-conductor {
  max-width: 900px;
  margin: 0 auto;
}
.conductor-section { margin-bottom: var(--space-2xl); }
.conductor-section-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--border);
}
.conductor-preamble {
  background: var(--surface);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.preamble-text {
  font-size: 16px;
  line-height: 1.7;
  white-space: pre-wrap;
}
/* Inside the conductor preamble surface, the verbatim question reads from
   a slightly recessed bg block — matches prototype lines 1513–1515. */
.conductor-preamble .preamble-text {
  padding: var(--space-md) var(--space-lg);
  background: var(--bg);
  border-radius: var(--radius-md);
}

.preamble-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  position: sticky;
  top: 0;
  z-index: 1;
}
.preamble-nav-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  font-size: 12px;
  text-decoration: none;
  border: 1px solid var(--border);
  transition: all var(--transition-fast);
}
.preamble-nav-num:hover {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--accent);
}
.preamble-nav-num.completed {
  background: var(--success-muted);
  color: var(--success);
  border-color: var(--success);
}
.preamble-nav-num.current {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.preamble-note { margin-top: var(--space-sm); }

/* Pre-interview checklist (reuses .checklist-item from earlier styles
   if present; defined here defensively for the conductor context). */
.ctp-checklist {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.checklist-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.checklist-item:hover { background: var(--bg); }
.checklist-item.completed {
  background: var(--success-muted);
  border-color: var(--success);
}
.checklist-item input[type="checkbox"] { display: none; }
.checklist-checkbox {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.checklist-item.completed .checklist-checkbox {
  background: var(--success);
  border-color: var(--success);
  color: white;
}
.checklist-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
}

/* Question card used by the preamble + driving-licence sections. */
.kc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  overflow: hidden;
}
.kc-header {
  padding: var(--space-md) var(--space-lg);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  cursor: pointer;
}
.kc-header::-webkit-details-marker { display: none; }
.kc-number {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  background: var(--accent-muted);
  color: var(--accent);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.kc-title {
  flex: 1;
  font-weight: 500;
  font-size: 14px;
}
.kc-questions { padding: var(--space-lg); }
.kc-question { margin-bottom: var(--space-lg); }
.kc-question:last-child { margin-bottom: 0; }
.kc-question-text {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: var(--space-sm);
}

.conductor-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

/* -------------------------------------------------------------------------
 * GI conductor — Interview tab (Session G / Batch G2)
 * --------------------------------------------------------------------- */

.gi-conductor-interview { padding-bottom: var(--space-2xl); }

/* Banner panel — sits at the top of the Interview tab and re-renders
   from the /tick endpoint when a new threshold is crossed. */
.conductor-banners {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.conductor-banner {
  background: var(--caution-muted);
  border: 1px solid var(--caution);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.conductor-banner-extension {
  background: var(--danger-muted);
  border-color: var(--danger);
}
.conductor-banner-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.conductor-banner-label {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
}
.conductor-banner-script {
  margin-top: var(--space-sm);
  font-size: 13px;
}
.conductor-banner-script > summary {
  cursor: pointer;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.conductor-banner-text {
  margin-top: var(--space-sm);
  line-height: 1.6;
  white-space: pre-wrap;
}
.conductor-banner-text-label {
  margin-top: var(--space-md);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--muted);
}

/* Strip-level break controls (Polish session) — Break / Break Declined
   when idle; End Break when on break. The button styled with the
   .conductor-break-end class uses the success accent so it reads as
   "you're currently on a break, click to end it". */
.conductor-break-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.conductor-break-end {
  background: var(--success);
  color: #fff;
}
.conductor-break-end:hover { filter: brightness(1.1); }

/* Body-level break-panel (legacy from G2) is no longer rendered, but
   keep the class scoped for the Notes-tab break log which still uses
   the same card chrome. */
.conductor-break-panel { margin-bottom: var(--space-md); }
.conductor-break-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}
.conductor-break-card-open {
  background: var(--caution-muted);
  border-color: var(--caution);
}
.conductor-break-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.conductor-break-label {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.conductor-break-card-open .conductor-break-label { color: var(--caution); }
.conductor-break-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.conductor-break-log {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.conductor-break-log-row {
  display: flex;
  gap: var(--space-md);
  font-size: 12px;
  color: var(--muted);
}

/* Interview section + question card. Builds on .kc-card / .kc-header
   from the preamble so the visual rhythm matches. */
.conductor-iv-section .conductor-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.iv-section-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 0 var(--space-sm);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
}
.iv-section-blurb { margin-bottom: var(--space-md); }

.iv-question {
  margin-bottom: var(--space-md);
  transition: opacity var(--transition-fast);
}
/* Per prototype: done cards drop to 0.5 opacity rather than recolouring.
   Lets the operator scan unfinished questions without losing the
   record of what was covered. */
.iv-question-done { opacity: 0.5; }

/* Compact kc-header: checkbox · number · title · Notes button.
   Number + title share remaining space. The Notes button slides to the
   right edge. The textarea wrapper (.iv-notes-wrapper) sits below the
   header and toggles via the hidden attribute. */
.iv-question .kc-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}
.iv-done-check {
  width: 18px;
  height: 18px;
  accent-color: var(--success);
  margin: 0;
  flex-shrink: 0;
}
.iv-question .kc-number { flex-shrink: 0; }
.iv-question .kc-title {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}
.iv-notes-toggle { flex-shrink: 0; }
.iv-notes-wrapper { padding: 0; }
.iv-notes-wrapper .kc-question { padding: var(--space-md) var(--space-lg); }
.iv-question-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: var(--space-sm);
}
.iv-notes {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  font-family: var(--font-body);
}

/* Tick states on the timer in the conductor strip. The colour follows
   the same threshold the banners use so the operator gets two consistent
   visual cues at the 30/60/80-minute marks. */
.conductor-timer-warning { color: var(--caution); }
.conductor-timer-danger { color: var(--danger); }

/* End-interview block sits at the foot of the Interview tab. */
.conductor-end-interview { margin-top: var(--space-2xl); }

/* -------------------------------------------------------------------------
 * GI conductor — Notes tab (Session G / Batch G3)
 * --------------------------------------------------------------------- */

.gi-conductor-notes { padding-bottom: var(--space-2xl); }

.notes-summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.notes-summary-count {
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
}
.notes-summary-spacer { flex: 1; }

.notes-followup-status {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.notes-followup-status strong {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.notes-followup-status-pending {
  background: var(--caution-muted);
  border-color: var(--caution);
  color: var(--caution);
}
.notes-followup-status-complete {
  background: var(--success-muted);
  border-color: var(--success);
  color: var(--success);
}
.notes-followup-status-failed,
.notes-followup-status-timed_out {
  background: var(--danger-muted);
  border-color: var(--danger);
  color: var(--danger);
}

.notes-q-card { margin-bottom: var(--space-md); }
.notes-question-text {
  color: var(--muted);
  font-weight: 400;
  font-size: 12px;
  margin-bottom: var(--space-sm);
}
.notes-answer {
  background: var(--bg);
  border-left: 3px solid var(--accent);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.notes-break-log {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* -------------------------------------------------------------------------
 * CTP conductor (Session H)
 * --------------------------------------------------------------------- */

.ctp-conductor-overlay { background: var(--bg); }
.ctp-conductor-body { padding: var(--space-xl); }
.ctp-tab-panel[hidden] { display: none; }
.ctp-tab-panel { max-width: 900px; margin: 0 auto; }

/* Insurer toggle in the conductor strip — Allianz vs Suncorp.
   Mirrors the theme-toggle pattern. */
.ctp-insurer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.ctp-insurer-btn {
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.ctp-insurer-btn.active {
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.1);
}

/* Six-item MA checklist */
.ctp-ma-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.ctp-ma-item { position: relative; }
.ctp-allianz-note {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  margin-top: 2px;
}

/* Insurer-driven visibility — toggled by adding ctp-insurer-allianz or
   ctp-insurer-suncorp to the conductor body via JS. */
.ctp-conductor-body.ctp-insurer-allianz .suncorp-only,
.ctp-conductor-body.ctp-insurer-suncorp .allianz-only {
  display: none;
}

.ctp-form-row { margin-bottom: var(--space-md); }
.ctp-form-row[hidden] { display: none; }
.ctp-field-warn {
  background: var(--caution-muted);
  border-left: 3px solid var(--caution);
  color: var(--fg);
  font-size: 12px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  margin-top: var(--space-xs);
}

/* Statement tab — generated versions list */
.ctp-generate-row { margin-top: var(--space-md); }
.ctp-statement-versions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}
.ctp-statement-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.ctp-statement-row-latest {
  border-color: var(--accent);
  background: var(--accent-muted);
}
.ctp-statement-version {
  background: var(--accent);
  color: #fff;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
}
.ctp-statement-row-latest .ctp-statement-version { background: var(--accent); }
.ctp-statement-filename { flex: 1; font-size: 13px; }
.ctp-no-statements { margin-top: var(--space-md); }

.ctp-pre-print { margin-top: var(--space-xl); }
.ctp-pre-print-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.ctp-log-interview { margin-top: var(--space-2xl); }

/* -------------------------------------------------------------------------
 * Cowork tab (Session I) — work orders for the case grouped by status
 * --------------------------------------------------------------------- */

.cowork-tab { padding: var(--space-md); }
.cowork-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.cowork-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.cowork-section { margin-bottom: var(--space-lg); }
.cowork-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.cowork-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.cowork-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-xs);
}
.cowork-row-claimed { border-color: var(--accent); background: var(--accent-muted); }
.cowork-row-failed,
.cowork-row-timed_out { border-color: var(--danger); background: var(--danger-muted); }
.cowork-row-complete { border-color: var(--success); background: var(--success-muted); }

.cowork-row-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.cowork-job-type { font-size: 13px; font-weight: 500; }
.cowork-row-spacer { flex: 1; }
.cowork-row-when { font-size: 11px; }

.cowork-row-error {
  margin-top: var(--space-xs);
  font-size: 12px;
  color: var(--danger);
  white-space: pre-wrap;
}
.cowork-row-outputs {
  margin-top: var(--space-sm);
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.cowork-row-details { margin-top: var(--space-sm); }
.cowork-row-details > summary {
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.cowork-row-meta {
  margin-top: var(--space-sm);
  font-size: 11px;
  color: var(--muted);
}
.cowork-row-meta div { margin-bottom: 2px; }
.cowork-row-payload,
.cowork-row-result {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow-y: auto;
}

/* -------------------------------------------------------------------------
 * SMS modal (Session SMS)
 * --------------------------------------------------------------------- */

.modal-sms { max-width: 620px; }
.sms-pickers { margin-bottom: var(--space-md); }

.sms-preview-empty {
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
}

.sms-preview-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.sms-preview-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.sms-preview-label {
  font-weight: 500;
  font-size: 13px;
}
.sms-preview-spacer { flex: 1; }
.sms-preview-body {
  width: 100%;
  resize: vertical;
  background: var(--bg);
  font-family: var(--font-body);
  line-height: 1.5;
}
.sms-preview-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}
.sms-preview-actions .form-help { flex: 1; margin: 0; }

/* -------------------------------------------------------------------------
 * Contacts tab (Session Contacts)
 * --------------------------------------------------------------------- */

.contacts-tab { padding: var(--space-md); }
.contacts-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.contacts-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.contacts-header-spacer { flex: 1; }

.contacts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.contact-row-deleted {
  opacity: 0.6;
  background: var(--bg);
  border-style: dashed;
}
.contact-row-main { flex: 1; min-width: 0; }
.contact-row-name {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-xs);
}
.contact-name { font-size: 14px; font-weight: 500; }
.contact-row-meta {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}
.contact-meta-phone,
.contact-meta-email { color: var(--fg); }
.contact-row-address,
.contact-row-notes {
  margin-top: var(--space-xs);
  font-size: 12px;
  line-height: 1.45;
}
.contact-row-actions {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}
.contact-row-actions-edit {
  justify-content: flex-end;
  margin-top: var(--space-sm);
}
.contact-row-editing {
  background: var(--accent-muted);
  border-color: var(--accent);
  display: block;
}

.contacts-deleted-block { margin-top: var(--space-xl); }
.contacts-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.contacts-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
 * Close flow (Session J) — close modal, email panel, post-review form,
 * destruction banner.
 * --------------------------------------------------------------------- */

.modal-close-flow { max-width: 720px; }
.modal-post-review { max-width: 720px; }

.close-blocker-banner {
  background: var(--danger-muted);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  font-size: 13px;
}

.close-section { margin-bottom: var(--space-lg); }
.close-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}

.close-deliverable-list,
.close-entries-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.close-deliverable-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
}
.close-deliverable-item.close-deliverable-pending {
  border-color: var(--danger);
  background: var(--danger-muted);
}
.close-deliverable-type { font-weight: 500; }

.close-entries-list li {
  font-size: 13px;
  padding: var(--space-xs) 0;
}
.close-entry-hours {
  display: inline-block;
  min-width: 50px;
  text-align: right;
  margin-right: var(--space-sm);
  color: var(--muted);
}

/* Email panel — sit between modal-body and post-review */
.close-email-text {
  width: 100%;
  resize: vertical;
  background: var(--bg);
  font-family: var(--font-body);
  line-height: 1.5;
}
.close-email-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}
.close-email-actions .form-help { flex: 1; margin: 0; }

.post-review-already-saved {
  background: var(--accent-muted);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Destruction-wait banner on the case panel */
.destruction-banner {
  margin: 0 var(--space-lg) var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
}
.destruction-banner-awaiting_email,
.destruction-banner-countdown {
  border-color: var(--caution);
  background: var(--caution-muted);
}
.destruction-banner-shredder_eligible {
  border-color: var(--danger);
  background: var(--danger-muted);
}
.destruction-banner-destroyed {
  border-color: var(--success);
  background: var(--success-muted);
}
.destruction-banner-head {
  font-size: 14px;
  margin-bottom: var(--space-xs);
}
.destruction-banner-body {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: var(--space-sm);
}
.destruction-banner-actions {
  display: flex;
  gap: var(--space-sm);
}

/* -------------------------------------------------------------------------
 * DRL builder + result modals (Session F2)
 * --------------------------------------------------------------------- */

.modal-drl-builder, .modal-drl-result { max-width: 760px; }
.drl-builder-body .form-help { margin-bottom: var(--space-sm); }

/* Per-category "+ Add item" row, sits at the bottom of every category
   group. Inserts new .drl-item-custom rows just above itself when
   Raymond presses Add or Return. The added rows carry a checkbox so
   he can untick to exclude on the fly; the remove button drops the
   row entirely. */
.drl-add-item {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
}
.drl-add-item-input {
  flex: 1;
  font-size: 13px;
  padding: 4px 10px;
  min-height: 32px;
}
.drl-item-custom { background: var(--accent-muted); }
.drl-item-remove {
  background: transparent;
  color: var(--muted);
  padding: 0 var(--space-xs);
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.drl-item-remove:hover { color: var(--danger); }

.drl-category {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}
.drl-category-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}

.drl-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 13px;
  transition: background var(--transition-fast);
}
.drl-item:hover { background: var(--bg); }
.drl-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.drl-item-label { flex: 1; }
.drl-item-tags {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
 * Empty state
 * --------------------------------------------------------------------- */

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-2xl);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* -------------------------------------------------------------------------
 * Responsive overrides
 * --------------------------------------------------------------------- */

@media (max-width: 1280px) {
  :root { --left-panel-width: 320px; }
}

/* The mobile back-button only renders inside the case panel and is
   hidden by default — the mobile media query below makes it visible. */
.case-panel-back {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  width: 100%;
  text-align: left;
}
.case-panel-back svg { flex-shrink: 0; }

@media (max-width: 767px) {
  /* Mobile case-open behaviour: the case list and the open case never
     share the viewport. Default state shows the case list (left panel)
     full-screen and hides the right panel. When body.case-open is set
     (a case is selected) the panels swap — right takes the viewport,
     left is hidden, and the back button on the case panel returns to
     the list by clearing the class + the right panel content. */
  .app-layout { flex-direction: column; }
  .left-panel {
    width: 100%;
    min-width: 100%;
    height: 100vh;
    max-height: none;
    border-right: none;
    border-bottom: none;
  }
  .right-panel { width: 100%; height: 100vh; display: none; }
  body.case-open .left-panel { display: none; }
  body.case-open .right-panel { display: flex; }
  .case-panel-back { display: inline-flex; }

  /* Touch-target sizing — bump buttons, but keep btn-sm compact for icon
     and inline strips so action rows don't grow unwieldy. */
  .btn { min-height: 44px; padding: 12px 16px; }
  .btn-sm { min-height: 36px; padding: 8px 12px; }
  .btn-icon { min-height: 36px; padding: 8px; }

  /* Tab bars scroll horizontally instead of overflowing. */
  .tab-bar {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .tab {
    padding: var(--space-md);
    flex-shrink: 0;
  }

  /* Modals: keep a 16px inset on both sides so they don't kiss the edge. */
  .modal-overlay { padding: var(--space-md); }
  .modal { max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); }
  .modal-lg { max-width: calc(100vw - 32px); }
  .modal-header,
  .modal-footer { padding: var(--space-sm) var(--space-md); }
  .modal-body { padding: var(--space-md); }
  .modal-footer { flex-wrap: wrap; }

  /* Form grids stack on mobile so the two columns don't get too narrow. */
  .form-grid { grid-template-columns: 1fr; }

  /* Case header tightens. Status strip already wraps; just trim padding. */
  .case-header { padding: var(--space-md); }
  .case-header-ref { font-size: 20px; }
  .case-header-actions { flex-wrap: wrap; }

  /* Conductor (full-screen overlay) gets less padding and can scroll the
     numbered nav row horizontally. */
  .conductor-overlay { z-index: 1000; }
  .conductor-strip { padding: 0 var(--space-sm); gap: var(--space-sm); }
  .conductor-body { padding: var(--space-md); }
  .gi-conductor { max-width: 100%; }
  .preamble-nav { flex-wrap: nowrap; overflow-x: auto; }

  /* Call outcome row was right-aligned by default; on mobile, span and
     stack so each outcome button is reachable. */
  .call-outcome-row { justify-content: stretch; }
  .call-outcome-btn { flex: 1 1 100%; min-width: 0; }
}

/* -------------------------------------------------------------------------
 * Login screen (Session K)
 * --------------------------------------------------------------------- */

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: var(--bg);
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.06);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.login-title {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-align: center;
}
.login-subtitle {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-bottom: var(--space-sm);
}
.login-error {
  background: var(--danger-muted);
  color: var(--danger);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 13px;
}
.login-totp-input {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.2em;
  text-align: center;
}
.login-submit { width: 100%; min-height: 40px; }