@font-face {
  font-family: "Geist";
  src: url("/assets/Geist-Variable-24171f7a.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("/assets/Geist-Variable-24171f7a.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/assets/GeistMono-Variable-642c6615.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #101114;
  --bg-soft: #15171b;
  --surface: #1a1d22;
  --surface-raised: #20242a;
  --surface-hover: #262b32;
  --border: #323842;
  --border-strong: #444c59;
  --text: #edf0f2;
  --text-muted: #9aa3ad;
  --text-faint: #707984;
  --accent: #5bb8a5;
  --accent-foreground: #061311;
  --accent-dim: #183b35;
  --ok: #63c174;
  --ok-dim: #17351d;
  --warn: #d9a441;
  --warn-dim: #3d2d12;
  --error: #e06969;
  --error-dim: #451b1f;
  --info: #72a7d8;
  --info-dim: #19344d;
  --nav-bg: rgba(16, 17, 20, 0.92);
  --radius: 8px;
  --radius-sm: 6px;
  --shadow-panel: 0 18px 60px rgba(0, 0, 0, 0.22);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Geist", system-ui, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(91, 184, 165, 0.12), transparent 28rem),
    linear-gradient(180deg, #121418 0%, var(--bg) 34rem);
  color: var(--text);
  min-height: 100vh;
}

/* ===== NAV BAR ===== */

.nav-bar {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: 52px;
  gap: 32px;
}

.nav-brand a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.nav-links {
  display: flex;
  gap: 4px;
}

.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: color 0.15s, background 0.15s;
}

.nav-link:hover {
  color: var(--text);
  background: var(--surface);
}

.nav-logout { margin-left: auto; }

.logout-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.8125rem;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.logout-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.nav-link.active {
  color: var(--text);
  background: var(--accent-dim);
  border-color: rgba(91, 184, 165, 0.35);
}

/* ===== MAIN CONTENT ===== */

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
}

/* ===== APP UI FOUNDATION ===== */

.app-page {
  width: min(100%, 1180px);
  margin: 0 auto;
}

.app-page-narrow {
  width: min(100%, 960px);
  margin: 0 auto;
}

.app-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.app-kicker {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.app-title {
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: 0;
}

.app-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-top: 8px;
  max-width: 720px;
}

.ui-panel {
  background: linear-gradient(180deg, rgba(32, 36, 42, 0.96), rgba(26, 29, 34, 0.96));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
}

.ui-panel-subtle {
  background: rgba(26, 29, 34, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

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

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

.ui-card-title {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ui-card-body {
  padding: 16px;
}

.ui-toolbar {
  padding: 14px;
  margin-bottom: 18px;
}

.ui-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.ui-input,
.ui-select {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.875rem;
  min-height: 38px;
  padding: 8px 11px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ui-input {
  min-width: 220px;
  flex: 1;
}

.ui-input-lg {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 1rem;
}

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

.ui-input:focus,
.ui-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91, 184, 165, 0.16);
}

.ui-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 650;
  justify-content: center;
  line-height: 1;
  min-height: 38px;
  padding: 0 14px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

.ui-button:hover {
  transform: translateY(-1px);
}

.ui-button-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-foreground);
}

.ui-button-secondary {
  background: var(--surface-raised);
  border-color: var(--border);
  color: var(--text);
}

.ui-button-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}

.ui-button-ghost:hover,
.ui-button-secondary:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.ui-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(26, 29, 34, 0.72);
}

.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.ui-table th {
  background: rgba(16, 17, 20, 0.52);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 11px 12px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.ui-table td {
  border-bottom: 1px solid rgba(50, 56, 66, 0.7);
  padding: 11px 12px;
  vertical-align: top;
}

.ui-table tbody tr:last-child td {
  border-bottom: 0;
}

.ui-table tbody tr:hover {
  background: rgba(91, 184, 165, 0.06);
}

.ui-link {
  color: var(--accent);
  text-decoration: none;
}

.ui-link:hover {
  text-decoration: underline;
}

.ui-badge {
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 9px;
  font-size: 0.73rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.ui-badge-lg {
  min-height: 28px;
  padding: 4px 12px;
  font-size: 0.82rem;
}

.ui-badge-open,
.ui-badge-info {
  background: var(--info-dim);
  border-color: rgba(114, 167, 216, 0.42);
  color: var(--info);
}

.ui-badge-in_progress,
.ui-badge-pending {
  background: var(--warn-dim);
  border-color: rgba(217, 164, 65, 0.42);
  color: var(--warn);
}

.ui-badge-resolved,
.ui-badge-approved {
  background: var(--ok-dim);
  border-color: rgba(99, 193, 116, 0.42);
  color: var(--ok);
}

.ui-badge-closed,
.ui-badge-muted {
  background: var(--surface-raised);
  border-color: var(--border);
  color: var(--text-muted);
}

.ui-mono-tag {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  display: inline-flex;
  font-family: "Geist Mono", monospace;
  font-size: 0.72rem;
  line-height: 1;
  padding: 4px 8px;
  white-space: nowrap;
}

.ui-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.ui-tab {
  align-items: center;
  border: 1px solid rgba(68, 76, 89, 0.9);
  border-radius: 999px;
  color: var(--text-muted);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 2.4rem;
  padding: 0.45rem 0.95rem;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.ui-tab:hover {
  background: rgba(38, 43, 50, 0.85);
  color: var(--text);
  transform: translateY(-1px);
}

.ui-tab.active {
  background: linear-gradient(180deg, rgba(31, 68, 61, 0.95), rgba(24, 59, 53, 0.95));
  border-color: rgba(91, 184, 165, 0.7);
  box-shadow: inset 0 0 0 1px rgba(91, 184, 165, 0.12);
  color: #d9f5ee;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.metric-card {
  padding: 16px;
}

.metric-value {
  font-size: 2rem;
  font-weight: 750;
  line-height: 1;
}

.metric-label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: 8px;
  text-transform: uppercase;
}

.metric-open .metric-value { color: var(--info); }
.metric-progress .metric-value { color: var(--warn); }
.metric-resolved .metric-value { color: var(--ok); }

.app-callout {
  background: linear-gradient(135deg, rgba(91, 184, 165, 0.14), rgba(32, 36, 42, 0.86));
  border: 1px solid rgba(91, 184, 165, 0.38);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 24px;
}

.app-callout-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.app-callout h2 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}

.app-callout p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 4px;
  max-width: 720px;
}

.app-callout-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ===== DASHBOARD ===== */

.dashboard {
  max-width: 720px;
  margin: 0 auto;
}

.dashboard-header {
  margin-bottom: 32px;
}

.dashboard-header h1 {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.subtitle {
  color: var(--text-muted);
  margin-top: 4px;
  font-size: 1rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.stat-open .stat-number { color: var(--accent); }
.stat-in-progress .stat-number { color: var(--warn); }
.stat-resolved .stat-number { color: var(--ok); }

.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 32px;
}

.status-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-ok .status-indicator { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.status-error .status-indicator { background: var(--error); box-shadow: 0 0 8px var(--error); }

.status-info h3 {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.status-info p {
  font-size: 0.95rem;
  margin-top: 2px;
}

/* ===== ROADMAP ===== */

.roadmap h2 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

.phases {
  display: flex;
  flex-direction: column;
}

.phase {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-left: 2px solid var(--border);
  padding-left: 24px;
  position: relative;
}

.phase:last-child { border-left-color: transparent; }

.phase-marker {
  position: absolute;
  left: -15px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.phase-current .phase-marker {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.phase-done .phase-marker {
  border-color: var(--ok);
  color: var(--ok);
  background: var(--ok-dim);
}

.phase-content h3 {
  font-size: 1rem;
  font-weight: 500;
}

.phase-content p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ===== PAGE HEADER ===== */

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ===== FILTER BAR ===== */

.filter-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.filter-input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 0.875rem;
  min-width: 240px;
  flex: 1;
}

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

.filter-select {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 0.875rem;
}

.btn {
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text-muted);
}

/* ===== DATA TABLE ===== */

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

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.data-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

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

.title-cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.codes-cell {
  white-space: nowrap;
}

.date-cell {
  white-space: nowrap;
  color: var(--text-muted);
}

/* ===== BADGES ===== */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.badge-lg {
  padding: 4px 12px;
  font-size: 0.85rem;
}

.badge-open {
  background: var(--accent-dim);
  color: var(--accent);
}

.badge-in_progress {
  background: var(--warn-dim);
  color: var(--warn);
}

.badge-resolved {
  background: var(--ok-dim);
  color: var(--ok);
}

.badge-closed {
  background: var(--surface);
  color: var(--text-muted);
}

/* ===== TAGS ===== */

.tag {
  display: inline-block;
  padding: 2px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: "Geist Mono", monospace;
  color: var(--text-muted);
  white-space: nowrap;
}

.tag-more {
  color: var(--accent);
}

.tag-source {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  font-family: inherit;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

/* ===== LINKS ===== */

.link {
  color: var(--accent);
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

/* ===== PAGINATION ===== */

.pagination-wrap {
  padding: 16px 0;
  display: flex;
  justify-content: center;
}

.pagination {
  display: flex;
  gap: 4px;
  list-style: none;
}

.pagination a, .pagination span {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
}

.pagination a:hover {
  background: var(--surface);
  color: var(--text);
}

.pagination .current {
  background: var(--accent);
  color: white;
}

.pagination .disabled {
  opacity: 0.3;
}

/* ===== DETAIL PAGE ===== */

.detail-page {
  max-width: 960px;
}

.detail-nav {
  margin-bottom: 16px;
}

.detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.95fr);
  align-items: start;
  gap: 1rem;
  margin-bottom: 32px;
}

.detail-header-body {
  background: linear-gradient(180deg, rgba(32, 36, 42, 0.88), rgba(20, 23, 28, 0.94));
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow-panel);
  min-width: 0;
  padding: 1.35rem 1.4rem;
}

.detail-header-title {
  font-size: clamp(1.85rem, 3vw, 2.6rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 4px 0 0;
  max-width: 14ch;
  text-wrap: balance;
}

.detail-header-aside {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: linear-gradient(180deg, rgba(26, 29, 34, 0.94), rgba(20, 22, 27, 0.98));
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow-panel);
  padding: 1rem 1.05rem;
}

.detail-header-aside-top {
  display: flex;
  justify-content: flex-end;
}

.detail-meta-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1rem;
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.meta-item {
  min-width: 0;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(68, 76, 89, 0.4);
  line-height: 1.45;
}

.meta-item strong {
  color: var(--text);
  font-weight: 500;
}

/* ===== PCS SECTION ===== */

.pcs-section {
  margin-bottom: 32px;
}

.pcs-section h2 {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 12px;
}

.pcs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.pcs-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}

.pcs-card h3 {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.pcs-card p {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ===== METADATA SECTION ===== */

.metadata-section {
  margin-bottom: 32px;
}

.metadata-section h2 {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 12px;
}

.metadata-grid {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.meta-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.meta-field p {
  font-size: 0.9rem;
}

.drb-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 0.875rem;
}

.drb-item strong {
  font-weight: 500;
}

/* ===== CONTEXT ENTRIES ===== */

.context-section h2 {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 12px;
}

.source-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
}

.tab-link {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid var(--border);
}

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

.tab-link.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}

.context-entries {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.context-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.context-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.context-title {
  font-size: 0.875rem;
  font-weight: 500;
}

.context-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-left: auto;
}

.context-content {
  padding: 16px;
  font-family: "Geist Mono", monospace;
  font-size: 0.8rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--text);
  background: none;
  border: none;
}

.empty-state {
  color: var(--text-muted);
  text-align: center;
  padding: 32px;
}

/* ===== CHARTS DASHBOARD ===== */

.charts-dashboard {
  max-width: 1200px;
  margin: 0 auto;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.chart-card {
  overflow: hidden;
}

.chart-card h3 {
  margin: 0;
}

.chart-container {
  height: 220px;
  position: relative;
}

/* ===== SEARCH PAGE ===== */

.search-page {
  max-width: 960px;
  margin: 0 auto;
}

.search-bar-wrap {
  margin-bottom: 16px;
}

.search-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 1rem;
}

.search-input:focus {
  outline: none;
  border-color: var(--accent);
}

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

.search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 24px;
}

.search-results-header {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.similarity-cell {
  white-space: nowrap;
  font-size: 0.8rem;
  font-family: "Geist Mono", monospace;
}

.similarity-high { color: var(--ok); }
.similarity-mid  { color: var(--warn); }
.similarity-low  { color: var(--text-muted); }

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
  .app-header { flex-direction: column; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .ui-form-row { flex-direction: column; align-items: stretch; }
  .ui-input,
  .ui-select,
  .ui-button { width: 100%; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-stats { grid-template-columns: repeat(2, 1fr); }
  .charts-grid { grid-template-columns: 1fr; }
  .pcs-grid { grid-template-columns: 1fr; }
  .status-grid { grid-template-columns: 1fr; }
  .filter-form { flex-direction: column; }
  .search-filters { flex-direction: column; }
  .filter-input { min-width: unset; width: 100%; }
  .detail-header {
    grid-template-columns: 1fr;
  }
  .detail-header-title {
    max-width: none;
  }
  .detail-header-aside-top {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .main-content { padding: 16px; }
  .nav-inner { padding: 0 16px; }
}

/* ===== COMMENT STATUS BADGES ===== */

.badge-pending { background: var(--warn-dim); color: var(--warn); }
.badge-approved { background: var(--ok-dim); color: var(--ok); }
.badge-rejected { background: var(--error-dim); color: var(--error); }
.badge-exported { background: var(--accent-dim); color: var(--accent); }

/* ===== CATEGORY BADGES ===== */

.badge-bug { background: var(--error-dim); color: var(--error); }
.badge-idea { background: var(--accent-dim); color: var(--accent); }
.badge-compliment { background: var(--ok-dim); color: var(--ok); }
.badge-question { background: var(--warn-dim); color: var(--warn); }

/* ===== COMMENT CAPTURE MODAL ===== */

.comment-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  max-width: 520px;
  width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
}

.comment-modal-header {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--text);
}

.comment-modal-selector {
  font-family: "Geist Mono", monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  word-break: break-all;
}

.comment-modal-preview {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  font-family: "Geist Mono", monospace;
  font-size: 0.75rem;
  max-height: 120px;
  overflow: auto;
  margin-bottom: 16px;
  white-space: pre-wrap;
  color: var(--text-muted);
}

.comment-modal-textarea {
  width: 100%;
  min-height: 100px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  color: var(--text);
  font-size: 0.875rem;
  resize: vertical;
  font-family: inherit;
}

.comment-modal-textarea:focus {
  border-color: var(--accent);
  outline: none;
}

.comment-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* ===== CATEGORY PICKER (modal) ===== */

.comment-category-picker {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.category-btn {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.category-btn.active[data-category="bug"]        { background: var(--error-dim); color: var(--error); border-color: var(--error); }
.category-btn.active[data-category="idea"]       { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.category-btn.active[data-category="compliment"] { background: var(--ok-dim); color: var(--ok); border-color: var(--ok); }
.category-btn.active[data-category="question"]   { background: var(--warn-dim); color: var(--warn); border-color: var(--warn); }

/* ===== FEEDBACK MODE (pin-to-element) ===== */

.feedback-mode-indicator {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 999;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  pointer-events: none;
  letter-spacing: 0.01em;
}

body.comment-mode,
body.comment-mode * { cursor: crosshair !important; }

.comment-mode-highlight {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ===== COMMENT TOAST ===== */

.comment-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1001;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 0.875rem;
  background: var(--ok-dim);
  color: var(--ok);
  border: 1px solid var(--ok);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s, transform 0.2s;
}

.comment-toast.visible { opacity: 1; transform: translateY(0); }
.comment-toast.error { background: var(--error-dim); color: var(--error); border-color: var(--error); }

/* ===== ADMIN COMMENTS PAGE ===== */

.comments-page { max-width: 100%; }

.comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.comments-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
}

.comment-count {
  font-size: 0.75rem;
  margin-left: 4px;
  opacity: 0.7;
}

/* ===== ADMIN COMMENT DETAIL ===== */

.comment-detail { max-width: 100%; }

.comment-context-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.comment-context-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}

.comment-context-card label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.comment-context-card .value { font-size: 0.9rem; }
.comment-context-card .value.mono {
  font-family: "Geist Mono", monospace;
  font-size: 0.8rem;
  word-break: break-all;
}

.comment-html-preview {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  font-family: "Geist Mono", monospace;
  font-size: 0.8rem;
  white-space: pre-wrap;
  overflow-x: auto;
  margin-bottom: 24px;
  max-height: 300px;
  overflow-y: auto;
}

.comment-text-section { margin-bottom: 24px; }

.comment-text-section h2 {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 12px;
}

.comment-original {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.comment-refine-form { margin-top: 8px; }

.comment-refine-textarea {
  width: 100%;
  min-height: 80px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  color: var(--text);
  font-size: 0.875rem;
  resize: vertical;
  font-family: inherit;
}

.comment-refine-textarea:focus {
  border-color: var(--accent);
  outline: none;
}

.comment-actions {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}

.btn-approve {
  background: var(--ok-dim);
  color: var(--ok);
  border: 1px solid var(--ok);
  padding: 7px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
}

.btn-reject {
  background: var(--error-dim);
  color: var(--error);
  border: 1px solid var(--error);
  padding: 7px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
}

.btn-export {
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 7px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
}

/* ===== BATCH ACTIONS ===== */

.batch-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.batch-bar.hidden { display: none; }

.batch-count {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.comment-checkbox {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ===== EXPORT PREVIEW PAGE ===== */

.export-preview-page { max-width: 100%; }
.export-preview-page .subtitle { font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; }

.export-page-heading {
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.export-page-heading h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.view-file {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: "Geist Mono", monospace;
}

.export-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 10px;
}

.export-group-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.export-selector {
  font-family: "Geist Mono", monospace;
  font-size: 0.78rem;
  color: var(--text);
  word-break: break-all;
  flex: 1;
}

.export-selector.muted {
  color: var(--text-muted);
  font-style: italic;
  font-family: inherit;
  font-size: 0.875rem;
}

.export-group-badges {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.export-element-html {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: "Geist Mono", monospace;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.export-comments-list { margin-bottom: 12px; }

.export-comment-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.875rem;
  line-height: 1.4;
}

.export-comment-item .badge { flex-shrink: 0; margin-top: 1px; }

.export-actions {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

.btn-export-lg { padding: 10px 28px; font-size: 0.95rem; cursor: pointer; }

.btn-export-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.btn-export-primary:hover { opacity: 0.88; }
.btn-export-secondary { opacity: 0.7; }
.export-reviewer-note {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.export-actions-secondary {
  margin-top: -12px;
  justify-content: flex-start;
}

/* ===== REVIEW UI (in-context feedback reviewer) ===== */

/* Break out of main-content max-width for the full-viewport split */
.main-content:has(.review-ui) {
  max-width: none;
  padding: 0;
}

.review-ui {
  display: flex;
  height: calc(100vh - 52px);
  overflow: hidden;
}

.review-iframe-pane {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--border);
}

.review-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  pointer-events: none; /* visual context only */
}

.review-sidebar {
  width: 300px;
  flex-shrink: 0;
  overflow-y: auto;
  background: var(--surface);
}

.review-sidebar-inner {
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
}

.review-sidebar-header { display: flex; flex-direction: column; gap: 10px; }

.review-queue-pos {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.review-status-tabs { display: flex; gap: 4px; flex-wrap: wrap; }

.review-tab {
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
  background: var(--surface-raised);
  border: 1px solid transparent;
  transition: background 0.1s;
}
.review-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.review-tab:hover:not(.active) { background: var(--border); }
.review-tab-count { opacity: 0.65; font-size: 0.72rem; }

.review-comment-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.review-comment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.review-date { font-size: 0.75rem; color: var(--text-muted); }

.review-comment-text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text);
}

.review-context-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.review-context-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.65rem;
  flex-shrink: 0;
}

.review-selector {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  word-break: break-all;
}

.review-notes-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-notes-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.review-notes-textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 10px;
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.45;
}

.review-notes-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.review-actions { display: flex; gap: 8px; }

.review-btn {
  flex: 1;
  text-align: center;
  padding: 9px 12px;
  font-size: 0.85rem;
}

.review-nav { display: flex; gap: 6px; }

.review-nav-btn {
  flex: 1;
  text-align: center;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  text-decoration: none;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
}
.review-nav-btn.disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.review-nav-btn:hover:not(.disabled) { background: var(--border); }

.review-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.review-link {
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: none;
}
.review-link:hover { text-decoration: underline; }

.review-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.review-export-link {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: none;
}
.review-export-link:hover { color: var(--text); }

.review-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.review-empty-inner { text-align: center; }

.review-empty-heading {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 0;
}

.comments-page-index {
  max-width: 1040px;
  margin: 0 auto;
}

.comments-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.comments-page-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comments-page-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.comments-page-main {
  min-width: 0;
}

.comments-page-title {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
}

.comments-page-path {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  word-break: break-all;
}

.comments-page-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.comments-page-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.comments-page-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.comments-page-empty {
  min-height: 260px;
}

/* Element highlight injected in iframe'd pages via __review_selector param */
.review-highlight {
  outline: 3px solid #f59e0b !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.15) !important;
  border-radius: 2px;
}

.tour-callout {
  position: fixed;
  z-index: 10002;
  width: min(360px, calc(100vw - 32px));
  background:
    linear-gradient(180deg, rgba(59, 130, 246, 0.14) 0%, rgba(59, 130, 246, 0.04) 26%, var(--surface) 26%),
    var(--surface);
  color: var(--text);
  border: 1px solid rgba(59, 130, 246, 0.42);
  border-radius: 14px;
  padding: 14px 16px 16px;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  font-size: 0.875rem;
  line-height: 1.5;
}

.tour-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.tour-callout-arrow {
  position: absolute;
  left: 32px;
  width: 14px;
  height: 14px;
  background: var(--surface);
  border-left: 1px solid rgba(59, 130, 246, 0.42);
  border-top: 1px solid rgba(59, 130, 246, 0.42);
  transform: rotate(45deg);
}

.tour-callout[data-placement="top"] .tour-callout-arrow {
  bottom: -8px;
  transform: rotate(225deg);
}

.tour-callout[data-placement="bottom"] .tour-callout-arrow {
  top: -8px;
}

.tour-callout[data-placement="center"] .tour-callout-arrow {
  display: none;
}

.tour-kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--accent);
}

.tour-step-count {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.tour-caption {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text);
}

.tour-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(59, 130, 246, 0.18);
}

.tour-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.tour-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.4);
}

.tour-dot--active {
  width: 24px;
  background: var(--accent);
}

.tour-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.tour-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, 0.24);
  background: rgba(15, 23, 42, 0.72);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.tour-btn--next {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  min-width: 104px;
}

.tour-btn:hover,
.tour-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

@media (max-width: 640px) {
  .tour-callout {
    width: calc(100vw - 32px);
    padding: 14px;
  }

  .tour-head {
    align-items: flex-start;
  }

  .tour-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .tour-nav {
    width: 100%;
    justify-content: space-between;
  }

  .tour-btn {
    flex: 1 1 0;
  }
}

body.tour-locked .cf-page,
body.tour-locked main,
body.tour-locked .case-file-page {
  cursor: default;
}

body.tour-locked main * {
  pointer-events: none !important;
}

body.tour-locked .tour-callout,
body.tour-locked .tour-callout * {
  pointer-events: auto !important;
}

/* ===== COMMENT RESPONSIVE ===== */

@media (max-width: 768px) {
  .comment-context-grid { grid-template-columns: 1fr; }
  .comments-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .comments-page-toolbar,
  .comments-page-row {
    flex-direction: column;
    align-items: stretch;
  }
  .comments-page-actions {
    align-items: stretch;
  }
}

/* ===== LEARN CARD (dashboard) ===== */

.learn-card {
  background: linear-gradient(135deg, var(--accent-dim) 0%, var(--surface) 100%);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 28px;
}

.learn-card-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.learn-card-text {
  flex: 1;
  min-width: 200px;
}

.learn-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.learn-card-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.learn-card-desc strong {
  color: var(--text);
  font-weight: 500;
}

.learn-card-links {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.learn-link {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.learn-link-primary {
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
}

.learn-link-primary:hover {
  opacity: 0.9;
}

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

.learn-link-secondary:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

/* ===== CASE FILE PLACEHOLDER ===== */

.case-file-placeholder {
  max-width: 640px;
  margin: 64px auto;
  padding: 0 24px;
  text-align: center;
}

.case-file-placeholder-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 40px 36px;
}

.placeholder-badge {
  display: inline-block;
  padding: 3px 10px;
  background: var(--warn-dim);
  color: var(--warn);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}

.case-file-placeholder h1 {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  color: var(--text);
}

.placeholder-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 28px;
}

.placeholder-scenes {
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 28px;
}

.placeholder-scene {
  padding: 10px 16px;
  font-size: 0.875rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.placeholder-scene:last-child {
  border-bottom: none;
}

.placeholder-scene::before {
  content: attr(data-n) "";
  color: var(--accent);
  margin-right: 8px;
}

.placeholder-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== FIELD GUIDE PAGE ===== */

html {
  scroll-behavior: smooth;
}

.field-guide {
  /* Remove main-content max-width for this page via override below */
}

/* The main-content wrapper is on the parent — we break out of its padding */
.main-content:has(.field-guide) {
  padding: 0;
  max-width: none;
}

.fg-mobile-nav {
  display: none;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 52px;
  z-index: 50;
}

.fg-mobile-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.875rem;
  padding: 6px 14px;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.fg-drawer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
}

.fg-drawer[aria-hidden="true"] {
  display: none;
}

.fg-drawer-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  padding: 7px 8px;
  border-radius: 6px;
}

.fg-drawer-link:hover,
.fg-drawer-link.is-active {
  color: var(--accent);
  background: var(--accent-dim);
}

.fg-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  gap: 0;
}

.fg-sidebar {
  position: sticky;
  top: 52px;
  height: calc(100vh - 52px);
  overflow-y: auto;
  padding: 32px 0 32px 0;
  border-right: 1px solid var(--border);
}

.fg-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 16px;
}

.fg-sidebar-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0 12px 12px;
}

.fg-nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 6px;
  line-height: 1.3;
  transition: color 0.12s, background 0.12s;
}

.fg-nav-link:hover {
  color: var(--text);
  background: var(--surface);
}

.fg-nav-link.is-active {
  color: var(--accent);
  background: var(--accent-dim);
}

.fg-content {
  padding: 48px 0 64px 48px;
}

.fg-section {
  max-width: 680px;
  padding-bottom: 64px;
}

.fg-section-heading {
  font-family: "Geist", system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 16px;
}

.fg-hero {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 24px;
}

.fg-body {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-muted);
}

.fg-body p {
  margin-bottom: 1.2em;
}

.fg-body strong {
  color: var(--text);
  font-weight: 600;
}

.fg-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 0 0 0;
  max-width: 680px;
}

.fg-subsection-heading {
  font-family: "Geist", system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 1rem 0 1rem;
}

.fg-subsection-heading--spaced {
  margin-top: 2rem;
}

/* Diagram wrapper */
.fg-diagram-wrap {
  margin: 28px 0 0;
}

.fg-diagram {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
}

/* Radar chart */
.fg-radar-wrap {
  margin: 28px 0 0;
  max-width: 380px;
}

.fg-radar-caption {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}

/* MRI concept table */
.fg-table-wrap {
  margin-top: 24px;
  overflow-x: auto;
}

.fg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
}

.fg-table th {
  text-align: left;
  padding: 9px 14px;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.fg-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
  line-height: 1.5;
}

.fg-table tr:last-child td {
  border-bottom: none;
}

.fg-table td:first-child {
  font-weight: 500;
  white-space: nowrap;
  color: var(--text);
}

/* Use case cards */
.fg-use-case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}

.fg-use-case-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}

.fg-use-case-active {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.fg-use-case-deferred {
  opacity: 0.6;
}

.fg-use-case-title {
  font-family: "Geist", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}

.fg-use-case-pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.fg-pillar {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: "Geist", system-ui, sans-serif;
}

.fg-pillar-done {
  background: var(--ok-dim);
  color: var(--ok);
}

.fg-pillar-pending {
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.fg-use-case-status {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* This / not this table */
.fg-this-not-this {
  display: flex;
  gap: 0;
  margin-top: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.fg-tnt-col {
  flex: 1;
  padding: 20px 24px;
}

.fg-tnt-divider {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
}

.fg-tnt-heading {
  font-family: "Geist", system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.fg-tnt-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fg-tnt-list li {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  color: var(--text);
}

.fg-tnt-list-muted li {
  color: var(--text-muted);
}

/* Open questions labels */
.fg-question-label {
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 600;
  color: var(--text);
  font-style: normal;
}

/* Footer */
.fg-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding-top: 40px;
  border-top: 1px solid var(--border);
  max-width: 680px;
}

.fg-footer-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.875rem;
}

.fg-footer-link:hover {
  text-decoration: underline;
}

.fg-footer-tagline {
  width: 100%;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 4px;
}

/* ===== FIELD GUIDE RESPONSIVE ===== */

@media (max-width: 900px) {
  .fg-mobile-nav {
    display: block;
  }

  .fg-layout {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .fg-sidebar {
    display: none;
  }

  .fg-content {
    padding: 28px 20px 48px;
  }

  .fg-use-case-grid {
    grid-template-columns: 1fr;
  }

  .fg-this-not-this {
    flex-direction: column;
  }

  .fg-tnt-divider {
    width: auto;
    height: 1px;
  }

  .learn-card-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .fg-content {
    padding: 20px 16px 40px;
  }

  .fg-section-heading {
    font-size: 1.4rem;
  }

  .fg-hero {
    font-size: 1.05rem;
  }

  .fg-body {
    font-size: 0.975rem;
  }
}

/* ===== CASE FILE PAGE ===== */

/* Break out of main-content wrapper */
.main-content:has(.cf-page) {
  padding: 0;
  max-width: none;
}

.cf-page {
  display: flex;
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
}

/* Presentation-style scroll-snap: each scene is one screen and snaps into view.
   Mandatory snap gives the crisp screen-by-screen feel; scenes are sized to fit
   the viewport so the reader is never trapped mid-section. scroll-padding-top
   clears the 52px sticky nav. Disabled below 920px (stacked mobile layout) and
   for reduced-motion users. Scoped to the Case File. */
@media (min-width: 921px) {
  html[data-motion="on"]:has(.cf-page) {
    scroll-snap-type: y mandatory;
    scroll-padding-top: 52px;
    scroll-behavior: smooth;
  }

  :where(html[data-motion="on"]) .cf-scene {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }

  /* The closing disclaimer must also be a snap target, otherwise mandatory
     snap pulls the viewport back to the last scene and it can't be reached. */
  :where(html[data-motion="on"]) .cf-disclaimer {
    scroll-snap-align: start;
  }
}

/* ── Glossary panel ── */

.cf-glossary {
  display: none; /* Always-visible sidebar removed — glossary is now click-to-popup. */
}

.cf-glossary-inner {
  padding: 24px 20px 32px;
}

.cf-glossary-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-style: italic;
}

.cf-glossary-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.cf-gloss-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cf-gloss-list dt {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 12px;
}

.cf-gloss-list dd {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-left: 0;
  margin-top: 2px;
}

.cf-gloss-domain {
  margin-top: 20px;
}

.cf-gloss-domain-toggle {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  list-style: none;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}

.cf-gloss-domain-toggle::-webkit-details-marker { display: none; }
.cf-gloss-domain-toggle::before { content: "+ "; color: var(--accent); }
details[open] .cf-gloss-domain-toggle::before { content: "− "; }

/* Translation-table launcher (pill FAB) */
.cf-glossary-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  font-size: 0.82rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(59,130,246,0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cf-glossary-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(59,130,246,0.5);
}

.cf-glossary-fab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  font-size: 0.9rem;
  font-weight: 800;
}

.cf-glossary-fab-label {
  white-space: nowrap;
}

@media (max-width: 600px) {
  .cf-glossary-fab-label { display: none; }
  .cf-glossary-fab { padding: 10px; }
}

.cf-glossary-drawer {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 200;
  width: min(320px, calc(100vw - 32px));
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  padding: 4px 0 8px;
}

/* ── Floating scene index ── */

/* A fixed left rail listing the eight scenes; the active scene is reported by
   the scroll-spy controller (IntersectionObserver). Hidden until there is
   room beside the centred 880px canvas — below 1200px it would overlap the
   content, so it collapses entirely and the reader uses scroll + the reading
   progress bar instead. */
.cf-index {
  display: none;
}

@media (min-width: 1680px) {
  .cf-index {
    display: block;
    position: fixed;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    z-index: 150;
    width: 190px;
  }
}

.cf-index-head {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 0 0 8px 14px;
}

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

.cf-index-list li {
  margin: 0;
}

.cf-index-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px 5px 12px;
  border-left: 2px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.76rem;
  line-height: 1.3;
  opacity: 0.65;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cf-index-link:hover {
  opacity: 1;
  color: var(--text);
}

.cf-index-link.is-active {
  opacity: 1;
  color: var(--text);
  border-left-color: var(--accent);
  font-weight: 600;
}

.cf-index-num {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.64rem;
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cf-index-link.is-active .cf-index-num {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.cf-index-label {
  min-width: 0;
}

/* ── Main canvas ── */

.cf-canvas {
  flex: 1;
  min-width: 0;
}

/* ── Scenes ── */

/* Each scene fills the screen and centres its content — the "slide" unit.
   min-height (not height) lets a rare over-tall scene grow instead of clipping. */
.cf-scene {
  min-height: calc(100dvh - 52px);
  display: flex;
  align-items: center;
  padding: 72px 48px;
  border-bottom: 1px solid var(--border);
}

.cf-scene--dark {
  background: var(--bg);
}

.cf-scene--alt {
  background: var(--surface);
}

.cf-scene--sentinel {
  background: var(--bg);
  text-align: center;
}

.cf-scene-content {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}

.cf-scene--centred {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 640px;
}

/* Two-column slide: narrative on the left, single artifact on the right.
   Uses the wide horizontal space on desktop; stacks on mobile. */
.cf-scene-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 56px;
  align-items: center;
  max-width: 1240px;
}

.cf-scene-narrative { min-width: 0; }
.cf-scene-narrative .cf-body { margin-bottom: 0; }

.cf-scene-visual {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Wide slide: a compact header on top, then a full-width content row below.
   For dense scenes whose visual is itself multi-part (replay, metrics, handoff). */
.cf-scene-wide {
  max-width: 1240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
}

/* Prevent flex children from overflowing the column based on intrinsic content size */
.cf-scene-wide > * { min-width: 0; }

.cf-scene-header { max-width: 820px; }
.cf-scene-header .cf-scene-heading { margin-bottom: 14px; }

.cf-body--wide { max-width: 820px; margin-bottom: 0; }

.cf-scene-row {
  display: flex;
  gap: 32px;
  align-items: stretch;
  flex-wrap: wrap;
}

.cf-scene-row > * { flex: 1 1 320px; min-width: 0; margin-bottom: 0; }

/* Scroll cue on the title slide */
.cf-scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 32px;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  animation: cf-cue-bob 1.8s ease-in-out infinite;
}

.cf-scroll-cue svg { width: 18px; height: 18px; }

@keyframes cf-cue-bob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(4px); opacity: 1; }
}

:where(html[data-motion="off"]) .cf-scroll-cue { animation: none; }

@media (max-width: 920px) {
  .cf-scene {
    min-height: auto;
    padding: 56px 22px;
    align-items: stretch;
  }

  .cf-scene-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .cf-scene-narrative .cf-body { margin-bottom: 0; }
  .cf-scene-row { gap: 24px; }
}

/* ── Fit existing widgets into the slide columns ── */

/* Narrative text shouldn't be over-wide in a column */
.cf-scene-narrative .cf-body { max-width: 520px; }

/* Visual-column artifacts fill their half rather than keeping legacy max-widths */
.cf-scene-visual .cf-triage-card,
.cf-scene-visual .cf-confidence-demo,
.cf-scene-visual .cf-term {
  flex: 0 0 auto;
  width: 100%;
  max-width: 560px;
}

.cf-scene-visual .cf-ref-grid {
  max-width: 560px;
  width: 100%;
}

.cf-scene-visual .cf-subhead {
  width: 100%;
  max-width: 560px;
}

/* Wide-row widgets stretch to fill the row */
.cf-scene-row .cf-replay {
  max-width: none;
  flex: 1 1 460px;
  height: 100%;
}

.cf-scene-row .cf-diff {
  flex: 0 1 320px;
  align-self: flex-start;
}

/* Scene 7 metrics row: grid of cards beside the radar chart */
.cf-scene-row--metrics { align-items: center; }

.cf-scene-row--metrics .cf-metrics-grid {
  flex: 1 1 460px;
  max-width: none;
  margin-bottom: 0;
  grid-template-columns: repeat(3, 1fr);
}

.cf-scene-row--metrics .cf-metrics-chart-wrap {
  flex: 0 1 320px;
  max-width: 360px;
  margin-bottom: 0;
}

.cf-metrics-chart-wrap .cf-metrics-caption {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: 10px;
}

/* Scene 8 handoff fills the row */
.cf-scene-row .cf-handoff-layout {
  max-width: none;
  flex: 1 1 100%;
  margin-bottom: 0;
}

.cf-scene-row .cf-handoff-annotation { flex: 0 0 100%; margin-top: 4px; }

@media (max-width: 1100px) {
  .cf-scene-row--metrics .cf-metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 920px) {
  .cf-scene-visual .cf-triage-card,
  .cf-scene-visual .cf-confidence-demo,
  .cf-scene-visual .cf-term,
  .cf-scene-visual .cf-ref-grid { max-width: none; }

  /* Stack wide-row artifacts vertically. As a wrapping flex row, a child with
     height:100% + flex-basis:100% makes the row's height count only the first
     line, so the second line (e.g. the ground-truth diff) overflows the bottom
     and paints over the next scene. A real column avoids that ambiguity. */
  .cf-scene-row { flex-direction: column; align-items: stretch; }
  .cf-scene-row > * { flex: 0 0 auto; width: 100%; }
  .cf-scene-row .cf-replay { height: auto; }

  /* Clear the 360px desktop cap so the chart fills the full stacked row on mobile */
  .cf-scene-row--metrics .cf-metrics-chart-wrap { max-width: none; }
}

.cf-scene-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.cf-scene-heading {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 24px;
}

.cf-body {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 680px;
  margin-bottom: 36px;
}

.cf-body p { margin-bottom: 1.2em; }
.cf-body p:last-child { margin-bottom: 0; }
.cf-body strong { color: var(--text); font-weight: 600; }

/* ── Subtitle / subhead / footnote ── */

.cf-scene-subtitle {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--text);
  max-width: 680px;
  margin: -12px 0 28px;
  font-weight: 500;
}

.cf-subhead {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.cf-scene-footnote {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 680px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.cf-hover-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.85rem;
  font-style: normal;
  color: var(--accent);
  background: var(--accent-dim, rgba(59,130,246,0.1));
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 8px;
}

.cf-hover-hint-icon { font-size: 0.9rem; }

/* ── Inline glossary term + "?" superscript ── */

.cf-gloss-link {
  color: var(--accent);
  cursor: pointer;
  border-bottom: 1px dotted var(--accent);
  font-weight: 500;
}

.cf-gloss-link:hover,
.cf-gloss-link:focus-visible {
  background: var(--accent-dim, rgba(59,130,246,0.12));
  outline: none;
}

.cf-gloss-q {
  font-size: 0.62em;
  font-weight: 700;
  vertical-align: super;
  margin-left: 1px;
  color: var(--accent);
}

/* Glossary popover (injected into body by glossary_link_controller) */
.cf-gloss-popover,
.cf-annot-popover {
  position: absolute;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
  pointer-events: none;
}

.cf-gloss-popover.is-shown,
.cf-annot-popover.is-shown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* The artifact annotation is a pure tooltip — keep it click-through so it never
   intercepts clicks on the element it points at (e.g. the replay step markers). */
.cf-annot-popover,
.cf-annot-popover.is-shown {
  pointer-events: none;
}

.cf-gloss-popover-term,
.cf-annot-popover-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}

.cf-gloss-popover-def,
.cf-annot-popover-body {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

.cf-annot-popover-title { color: var(--accent); }

/* ── Artifact hover hotspots (Scenes 2 & 6) ── */

.cf-hot,
.cf-hot-wrap {
  cursor: help;
  position: relative;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  border-radius: 6px;
}

.cf-hot:hover,
.cf-hot-wrap:hover,
.cf-hot:focus-visible,
.cf-hot-wrap:focus-visible {
  background: var(--accent-dim, rgba(59,130,246,0.1));
  box-shadow: inset 0 0 0 1px var(--accent);
  outline: none;
}

/* ── Scroll-reveal ── */

:where(html[data-motion="on"]) [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

:where(html[data-motion="on"]) [data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure no-motion users always see content */
:where(html[data-motion="off"]) [data-reveal] {
  opacity: 1;
  transform: none;
}

/* ── Terminal (Scene 1) ── */

.cf-terminal {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.cf-terminal-body {
  background: #0a0c10;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px 28px;
  font-family: "Geist Mono", monospace;
  font-size: 0.95rem;
  line-height: 1.7;
}

.cf-terminal-line {
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 1.7em;
}

/* Amber pulsing dot */
.cf-amber-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--warn);
  flex-shrink: 0;
  animation: pulse-amber 1.8s ease-in-out infinite;
}

@keyframes pulse-amber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(234, 179, 8, 0); }
}

:where(html[data-motion="off"]) .cf-amber-dot { animation: none; }

.cf-terminal-caption {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 12px;
  font-family: "Geist Mono", monospace;
}

/* Typewriter cursor blink */
.cf-terminal-line.tw-active::after {
  content: "▋";
  color: var(--accent);
  animation: blink-cursor 0.7s step-end infinite;
  margin-left: 2px;
}

@keyframes blink-cursor {
  50% { opacity: 0; }
}

/* Scene 1 divider rule */
.cf-scene-rule {
  width: 100%;
  max-width: 480px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 40px auto 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.cf-scene-rule.revealed {
  opacity: 1;
}

/* ── Triage card (Scene 2) ── */

.cf-triage-wrap {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Solo variant — card fills the column now that callouts are hover popovers */
.cf-triage-wrap--solo {
  display: block;
  max-width: 720px;
}

.cf-triage-card {
  flex: 1;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.cf-triage-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.cf-triage-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  display: block;
}

.cf-triage-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

.cf-confidence-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.cf-confidence--high   { background: var(--ok-dim);    color: var(--ok); }
.cf-confidence--medium { background: var(--warn-dim);  color: var(--warn); }
.cf-confidence--low    { background: var(--error-dim); color: var(--error); }

.cf-triage-body {
  padding: 0;
}

.cf-hyp {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.cf-hyp--top {
  background: rgba(59, 130, 246, 0.04);
  border-left: 3px solid var(--accent);
}

.cf-hyp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.cf-hyp-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.cf-hyp-pct {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
}

.cf-hyp-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.cf-hyp-evidence,
.cf-hyp-next {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 2px;
}

.cf-triage-footer-row {
  display: flex;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  flex-wrap: wrap;
}

.cf-triage-footer-row:last-child { border-bottom: none; }

.cf-footer-label {
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.cf-footer-val {
  color: var(--text);
}

/* Callout annotations */
.cf-callouts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 200px;
  max-width: 240px;
}

.cf-callout {
  display: flex;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}

.cf-callout-num {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  line-height: 1.4;
}

.cf-callout-body {
  font-size: 0.82rem;
  line-height: 1.5;
}

.cf-callout-body strong {
  color: var(--text);
  display: block;
  margin-bottom: 3px;
}

.cf-callout-body p {
  color: var(--text-muted);
  margin: 0;
}

/* ── Reference-doc cards (Scene 3) ── */

.cf-ref-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: "Geist Mono", monospace;
  margin-bottom: 16px;
}

.cf-ref-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 640px;
}

.cf-ref-card {
  background: var(--bg);
  border: 1px solid var(--accent-dim);
  border-radius: 8px;
  padding: 18px 16px;
  cursor: default;
  transition: border-color 0.15s, background 0.15s;
}

.cf-ref-card:hover {
  border-color: var(--accent);
  background: rgba(59, 130, 246, 0.04);
}

.cf-ref-icon {
  width: 20px;
  height: 20px;
  color: var(--accent);
  margin-bottom: 10px;
  display: block;
}

.cf-ref-card h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.cf-ref-card p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Tool log (Scene 4) ── */

.cf-toollog {
  background: #0a0c10;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  overflow: hidden;
  max-width: 680px;
  font-family: "Geist Mono", monospace;
}

.cf-tool-entry {
  border-bottom: 1px solid var(--border);
}

.cf-tool-entry:last-of-type {
  border-bottom: none;
}

.cf-tool-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  cursor: pointer;
  list-style: none;
  font-size: 0.82rem;
  color: var(--text);
  transition: background 0.1s;
}

.cf-tool-line::-webkit-details-marker { display: none; }

.cf-tool-line:hover {
  background: rgba(255,255,255,0.03);
}

.cf-tool-line code {
  font-family: inherit;
  color: var(--text);
  flex: 1;
}

.cf-tool-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.cf-tool-detail {
  padding: 0 20px 14px;
}

.cf-tool-detail pre {
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.6;
  white-space: pre-wrap;
  margin: 0;
}

.cf-toollog-footer {
  padding: 12px 20px;
  font-size: 0.78rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  background: rgba(59, 130, 246, 0.04);
}

/* ── Terminal-styled tool log (Scene 4) ── */

.cf-term {
  max-width: 680px;
  background: #0a0c10;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  font-family: "Geist Mono", monospace;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

.cf-term-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #15181f;
  border-bottom: 1px solid var(--border);
}

.cf-term-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cf-term-dot--red   { background: #ff5f56; }
.cf-term-dot--amber { background: #ffbd2e; }
.cf-term-dot--green { background: #27c93f; }

.cf-term-title {
  margin-left: 8px;
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.cf-term-body {
  padding: 6px 0;
}

.cf-term-entry {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.cf-term-entry:last-of-type { border-bottom: none; }

.cf-term-entry .cf-tool-line {
  padding: 10px 18px;
  align-items: baseline;
}

.cf-term-prompt {
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

.cf-term-cmd {
  font-family: inherit;
  color: #d6f5d6;
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Blinking caret while a command is being typed */
.cf-term-cmd.tw-active::after {
  content: "▋";
  color: var(--accent);
  margin-left: 1px;
  animation: cf-caret-blink 1s steps(1) infinite;
}

@keyframes cf-caret-blink {
  50% { opacity: 0; }
}

.cf-term-footer {
  padding: 12px 18px;
  font-size: 0.78rem;
  color: var(--text-muted);
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(59, 130, 246, 0.04);
  margin: 0;
}

/* ── Confidence demo (Scene 5) ── */

.cf-confidence-demo {
  max-width: 640px;
}

.cf-cd-track {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  width: fit-content;
  outline: none;
}

.cf-cd-track:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}

.cf-cd-option {
  padding: 10px 28px;
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.cf-cd-option:last-child {
  border-right: none;
}

.cf-cd-option:hover {
  background: var(--surface);
  color: var(--text);
}

.cf-cd-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cf-cd-option--active,
.cf-cd-option[aria-pressed="true"] {
  background: var(--accent-dim);
  color: var(--accent);
}

.cf-cd-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cf-cd-dot--high   { background: var(--ok); }
.cf-cd-dot--medium { background: var(--warn); }
.cf-cd-dot--low    { background: var(--error); }

/* Per-mode explainer that swaps with the panel — turns the demo into a
   guided exploration rather than a wall of body text above it. */
.cf-cd-explainer {
  border-left: 3px solid var(--accent);
  background: var(--accent-dim, rgba(59,130,246,0.08));
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin-bottom: 16px;
}

.cf-cd-panel[data-panel="high"] .cf-cd-explainer   { border-left-color: var(--ok);    background: var(--ok-dim); }
.cf-cd-panel[data-panel="medium"] .cf-cd-explainer { border-left-color: var(--warn);  background: var(--warn-dim); }
.cf-cd-panel[data-panel="low"] .cf-cd-explainer    { border-left-color: var(--error); background: var(--error-dim); }

.cf-cd-mode {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  margin: 0 0 6px;
}

.cf-cd-explain-body {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.cf-cd-panel {
  animation: panel-in 0.25s ease-out;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

:where(html[data-motion="off"]) .cf-cd-panel { animation: none; }

/* High panel */
.cf-panel-high {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 22px;
}

.cf-applied-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ok-dim);
  color: var(--ok);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 12px;
}

.cf-applied-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  flex-shrink: 0;
}

.cf-applied-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.cf-applied-reasoning {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.cf-applied-reasoning summary {
  padding: 8px 14px;
  font-size: 0.82rem;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
}

.cf-applied-reasoning summary::-webkit-details-marker { display: none; }

.cf-applied-reasoning p {
  padding: 0 14px 12px;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Medium panel */
.cf-panel-medium {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 22px;
}

.cf-staged-badge {
  display: inline-block;
  background: var(--warn-dim);
  color: var(--warn);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.cf-triage-mini {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.cf-triage-mini--dimmed {
  opacity: 0.5;
}

.cf-triage-mini-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.cf-triage-mini-header strong {
  font-size: 0.85rem;
  color: var(--text);
}

.cf-triage-mini-hyp {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 4px;
  line-height: 1.4;
}

.cf-triage-mini-ruled {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 8px;
}

.cf-review-actions {
  display: flex;
  gap: 10px;
}

.cf-btn {
  padding: 9px 20px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 0.15s;
}

.cf-btn:hover { opacity: 0.85; }

.cf-btn--approve {
  background: var(--ok);
  color: var(--bg);
  border-color: var(--ok);
}

.cf-btn--pushback {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}

/* Low panel */
.cf-panel-low {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cf-copilot-stub {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.cf-copilot-header {
  padding: 10px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.cf-copilot-msg {
  padding: 14px 16px;
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
}

.cf-copilot-input {
  width: 100%;
  background: none;
  border: none;
  padding: 12px 16px;
  color: var(--text);
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
}

.cf-copilot-input::placeholder {
  color: var(--text-muted);
}

/* ── Sentinel / Phase 3 placeholder ── */

.cf-sentinel-badge {
  display: inline-block;
  padding: 3px 12px;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

.cf-sentinel-heading {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.cf-sentinel-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  max-width: 480px;
  line-height: 1.6;
  margin-bottom: 28px;
}

.cf-sentinel-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.cf-sentinel-link {
  padding: 9px 20px;
  border-radius: 6px;
  font-size: 0.875rem;
  text-decoration: none;
  border: 1px solid var(--border);
  transition: opacity 0.15s;
}

.cf-sentinel-link:hover { opacity: 0.85; }

.cf-sentinel-link--primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.cf-sentinel-link--secondary {
  background: var(--surface);
  color: var(--text-muted);
}

/* ── Replay scrubber (Scene 6) ── */

.cf-replay {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  max-width: 780px;
  background: #0a0c10;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 32px;
  outline: none;
}

.cf-replay:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}

.cf-replay-timeline {
  width: 180px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 20px 0;
}

.cf-replay-timeline-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 0 16px 12px;
}

.cf-replay-marker {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}

.cf-replay-marker:last-child {
  border-bottom: none;
}

.cf-replay-marker:hover {
  background: rgba(255,255,255,0.04);
}

.cf-replay-marker--active .cf-marker-circle,
.cf-replay-marker[aria-pressed="true"] .cf-marker-circle {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.cf-replay-marker--warn .cf-marker-circle {
  border-color: var(--warn);
  color: var(--warn);
}

.cf-replay-marker--warn.cf-replay-marker--active .cf-marker-circle,
.cf-replay-marker--warn[aria-pressed="true"] .cf-marker-circle {
  background: var(--warn);
  color: var(--bg);
  border-color: var(--warn);
}

.cf-replay-marker--error .cf-marker-circle {
  border-color: var(--error);
  color: var(--error);
}

.cf-replay-marker--error.cf-replay-marker--active .cf-marker-circle,
.cf-replay-marker--error[aria-pressed="true"] .cf-marker-circle {
  background: var(--error);
  color: white;
  border-color: var(--error);
}

.cf-marker-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cf-marker-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  padding-top: 4px;
}

.cf-marker-annotation {
  display: block;
  font-size: 0.68rem;
  color: var(--warn);
  margin-top: 2px;
}

.cf-replay-marker--error .cf-marker-annotation {
  color: var(--error);
}

/* Detail panel */
.cf-replay-detail {
  flex: 1;
  min-width: 0;
  padding: 20px;
}

.cf-replay-step-content {
  animation: panel-in 0.2s ease-out;
}

:where(html[data-motion="off"]) .cf-replay-step-content { animation: none; }

.cf-replay-step-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 14px;
  font-family: "Geist Mono", monospace;
}

.cf-replay-what-saw,
.cf-replay-what-decided {
  margin-bottom: 14px;
}

.cf-replay-saw-title,
.cf-replay-decided-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 6px;
}

.cf-replay-pre {
  font-family: "Geist Mono", monospace;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.6;
  white-space: pre-wrap;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 10px 12px;
}

.cf-replay-decided-text {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.55;
}

.cf-replay-annotation {
  font-size: 0.78rem;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 5px;
  border-left: 3px solid;
  margin-top: 12px;
}

.cf-replay-annotation--warn {
  background: var(--warn-dim);
  color: var(--warn);
  border-left-color: var(--warn);
}

.cf-replay-annotation--error {
  background: var(--error-dim);
  color: var(--error);
  border-left-color: var(--error);
}

.cf-replay-annotation code {
  font-family: "Geist Mono", monospace;
  font-size: 0.75rem;
}

/* Ground-truth diff */
.cf-diff {
  max-width: 640px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0;
}

.cf-diff-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.cf-diff-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cf-diff-col {
  padding: 16px 20px;
}

.cf-diff-col--ai {
  border-right: 1px solid var(--border);
}

.cf-diff-col-head {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.cf-diff-col--ai .cf-diff-col-head { color: var(--error); }
.cf-diff-col--human .cf-diff-col-head { color: var(--ok); }

.cf-diff-item {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.cf-diff-callout {
  padding: 12px 20px;
  background: var(--error-dim);
  color: var(--error);
  font-size: 0.8rem;
  border-top: 1px solid var(--border);
  line-height: 1.4;
}

.cf-diff-callout code {
  font-family: "Geist Mono", monospace;
  font-size: 0.75rem;
}

/* ── Eval metrics (Scene 7) ── */

.cf-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 720px;
  margin-bottom: 32px;
}

.cf-metric-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 16px;
  cursor: default;
  transition: border-color 0.15s;
}

.cf-metric-card:hover {
  border-color: var(--accent);
}

.cf-metric-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  line-height: 1.3;
}

.cf-metric-score {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1;
}

.cf-metric-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.cf-metric-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.7s ease-out;
}

/* Animate to target width only after scroll entry fires (class added by scene_reveal_controller) */
.cf-metric-fill--animate {
  width: var(--fill, 0%);
}

.cf-metric-fill--warn { background: var(--warn); }
.cf-metric-fill--ok   { background: var(--ok); }

:where(html[data-motion="off"]) .cf-metric-fill {
  width: var(--fill, 0%);
  transition: none;
}

/* Dot variant (calibration) */
.cf-metric-bar--dots {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  height: auto;
  overflow: visible;
  margin-bottom: 8px;
}

.cf-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: none;
  flex-shrink: 0;
}

.cf-dot--filled {
  background: var(--accent);
  border-color: var(--accent);
}

.cf-metric-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Radar chart wrap */
.cf-metrics-chart-wrap {
  max-width: 400px;
  margin-bottom: 20px;
}

/* Constrain the canvas before Chart.js initialises — prevents 340px initial width
   from overflowing narrow containers on first paint */
.cf-metrics-chart-wrap canvas {
  max-width: 100%;
  display: block;
}

.cf-metrics-note {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}

.cf-metrics-caption {
  font-family: ui-serif, Georgia, serif;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 640px;
  border-left: 3px solid var(--accent-dim);
  padding-left: 16px;
  margin-top: 0;
}

/* ── Co-pilot handoff (Scene 8) ── */

.cf-handoff-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  max-width: 780px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.cf-handoff-triage {
  flex: 0 0 260px;
  min-width: 220px;
}

.cf-handoff-arrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.cf-handoff-arrow svg {
  width: 40px;
  height: 24px;
  color: var(--accent);
}

.cf-copilot-mock {
  flex: 1;
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.cf-copilot-mock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.cf-mock-badge {
  font-size: 0.68rem;
  padding: 2px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-weight: 400;
  white-space: nowrap;
}

.cf-copilot-mock-messages {
  padding: 16px;
}

.cf-copilot-system-msg {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}

.cf-copilot-system-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 8px;
}

.cf-copilot-summary-list {
  list-style: disc;
  padding-left: 18px;
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 10px;
}

.cf-copilot-summary-list li {
  margin-bottom: 2px;
}

.cf-copilot-system-q {
  font-size: 0.8rem;
  color: var(--text);
  font-style: italic;
  margin-top: 8px;
}

.cf-copilot-mock-input-row {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--border);
}

.cf-copilot-mock-input {
  flex: 1;
  background: none;
  border: none;
  padding: 12px 16px;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  cursor: not-allowed;
}

.cf-copilot-mock-input::placeholder {
  color: var(--text-muted);
}

.cf-copilot-mock-send {
  padding: 10px 14px;
  background: none;
  border: none;
  border-left: 1px solid var(--border);
  color: var(--border);
  cursor: not-allowed;
  display: flex;
  align-items: center;
}

.cf-copilot-mock-send svg {
  width: 18px;
  height: 18px;
}

.cf-handoff-annotation {
  font-family: ui-serif, Georgia, serif;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 640px;
  border-left: 3px solid var(--accent-dim);
  padding-left: 16px;
}

/* ── Closing card (Scene 9) ── */

.cf-closing-card {
  max-width: 640px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 32px;
}

.cf-closing-cols {
  display: flex;
  gap: 0;
}

.cf-closing-col {
  flex: 1;
  padding: 24px 24px 20px;
}

.cf-closing-divider {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
}

.cf-closing-col-head {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.cf-closing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cf-closing-list li {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.4;
}

.cf-closing-list--muted li {
  color: var(--text-muted);
}

.cf-closing-actions {
  display: flex;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}

.cf-btn--accent {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  text-decoration: none;
}

.cf-btn--outline {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
  text-decoration: none;
}

/* ===== CASE FILE DEEP-DIVES ===== */

.deep-dive-page {
  background: var(--bg);
  color: var(--text);
  display: block;
  min-height: 100dvh;
}

.deep-dive-topbar {
  align-items: center;
  background: rgba(16, 17, 20, 0.88);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 16px;
  height: 52px;
  justify-content: space-between;
  left: 0;
  padding: 0 24px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 210;
}

.deep-dive-back {
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 650;
  text-decoration: none;
}

.deep-dive-back:hover {
  color: var(--text);
}

.deep-dive-dots {
  display: flex;
  gap: 8px;
}

.deep-dive-dot {
  background: var(--border-strong);
  border-radius: 999px;
  display: block;
  height: 8px;
  width: 22px;
}

.deep-dive-dot.is-active {
  background: var(--accent);
}

.deep-dive-track {
  display: flex;
  height: 100dvh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.deep-dive-panel {
  align-items: center;
  border-right: 1px solid var(--border);
  display: grid;
  flex: 0 0 100vw;
  gap: 40px;
  grid-template-columns: minmax(260px, 0.36fr) minmax(0, 0.64fr);
  min-height: 100dvh;
  padding: 84px 48px 32px;
  scroll-snap-align: start;
}

.deep-dive-panel:nth-child(even) {
  background: var(--surface);
}

.deep-dive-panel--embed {
  grid-template-columns: minmax(240px, 0.33fr) minmax(0, 0.67fr);
  padding-bottom: 44px;
  padding-top: 72px;
}

.deep-dive-copy {
  max-width: 460px;
}

.deep-dive-embed-shell,
.deep-dive-intro-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  min-width: 0;
}

.deep-dive-intro-card {
  max-width: 560px;
  padding: 24px;
}

.deep-dive-intro-card p {
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 18px;
}

.deep-dive-intro-kicker {
  color: var(--accent) !important;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deep-dive-embed-shell {
  display: flex;
  flex-direction: column;
  height: min(760px, calc(100dvh - 128px));
  overflow: hidden;
  width: 100%;
}

.deep-dive-embed-bar {
  align-items: center;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  display: flex;
  font-size: 0.78rem;
  font-weight: 650;
  justify-content: space-between;
  padding: 9px 12px;
}

.deep-dive-iframe {
  background: var(--bg);
  border: 0;
  flex: 1;
  width: 100%;
}

.cf-deep-link {
  margin-top: 20px;
}

@media (max-width: 920px) {
  .deep-dive-track {
    height: auto;
    min-height: 100dvh;
    overflow-y: auto;
  }

  .deep-dive-panel {
    align-items: stretch;
    grid-template-columns: 1fr;
    min-height: 100dvh;
    padding: 76px 20px 28px;
  }

  .deep-dive-embed-shell {
    height: 68dvh;
  }
}

.cf-closing-footer {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0;
  font-style: italic;
}

/* ── Disclaimer (formerly Scene 9 — now a closing sidebar, not part of the story) ── */

.cf-disclaimer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 56px 24px 72px;
}

.cf-disclaimer-inner {
  max-width: 920px;
  margin: 0 auto;
}

.cf-disclaimer-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.cf-disclaimer-heading {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 28px;
}

.cf-disclaimer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 28px;
}

.cf-disclaimer-text p {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 1em;
}

.cf-disclaimer-text p:last-child { margin-bottom: 0; }

.cf-disclaimer .cf-closing-card {
  margin-bottom: 0;
  max-width: none;
}

.cf-disclaimer-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

@media (max-width: 760px) {
  .cf-disclaimer-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Case File responsive ── */

@media (max-width: 900px) {
  .cf-triage-wrap {
    flex-direction: column;
  }

  .cf-callouts {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: none;
  }

  .cf-callout {
    flex: 1;
    min-width: 180px;
  }

  .cf-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cf-replay {
    flex-direction: column;
  }

  .cf-replay-timeline {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 12px 0;
  }

  .cf-replay-marker {
    flex: 1;
    min-width: 120px;
    border-bottom: none;
    border-right: 1px solid var(--border);
  }

  .cf-replay-marker:last-child {
    border-right: none;
  }

  .cf-replay-timeline-label {
    width: 100%;
    padding-bottom: 8px;
  }

  .cf-diff-cols {
    grid-template-columns: 1fr;
  }

  .cf-diff-col--ai {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .cf-handoff-layout {
    flex-direction: column;
  }

  .cf-handoff-triage {
    flex: none;
    width: 100%;
  }

  .cf-copilot-mock {
    width: 100%;
    min-width: 0;
  }

  .cf-handoff-arrow {
    display: none;
  }

  .cf-closing-cols {
    flex-direction: column;
  }

  .cf-closing-divider {
    width: 100%;
    height: 1px;
  }
}

@media (max-width: 640px) {
  .cf-scene {
    padding: 48px 16px;
  }

  .cf-scene-heading {
    font-size: 1.5rem;
  }

  .cf-body {
    font-size: 0.975rem;
  }

  .cf-ref-grid {
    grid-template-columns: 1fr;
  }

  .cf-callouts {
    flex-direction: column;
  }

  .cf-cd-option {
    padding: 10px 16px;
  }

  .cf-metrics-grid {
    grid-template-columns: 1fr;
  }

  .cf-replay-timeline {
    flex-direction: column;
  }

  .cf-replay-marker {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

/* ===== PHASE 4 POLISH ===== */

/* ── Scene 8: co-pilot slide-in ──
   The parent .cf-handoff-layout has data-reveal (opacity/translateY).
   The mock adds a translateX slide on top once visible.
   We do not touch opacity here — the parent [data-reveal] handles that.
── */

:where(html[data-motion="on"]) .cf-copilot-mock {
  transform: translateX(32px);
  transition: transform 0.45s ease-out 0.15s;
}

:where(html[data-motion="on"]) .cf-copilot-mock--slide-in {
  transform: translateX(0);
}

/* Under reduced motion, no translateX is applied */
:where(html[data-motion="off"]) .cf-copilot-mock {
  transform: none;
  transition: none;
}

/* ── Glossary term links ── */

.cf-gloss-link {
  border-bottom: 1px dashed var(--accent);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}

.cf-gloss-link:hover {
  color: var(--accent);
  border-bottom-style: solid;
}

.cf-gloss-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Glossary highlight (click-to-scroll) ── */

@keyframes gloss-highlight-fade {
  0%   { background: rgba(59, 130, 246, 0.18); }
  100% { background: transparent; }
}

.cf-gloss-highlight {
  animation: gloss-highlight-fade 1.5s ease-out forwards;
  border-radius: 3px;
  padding: 1px 2px;
}

:where(html[data-motion="off"]) .cf-gloss-highlight {
  animation: none;
  background: rgba(59, 130, 246, 0.18);
}

/* ── Small scene SVG decorations ── */

.cf-scene-icon {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 16px;
  color: var(--warn);
  opacity: 0.7;
}

.cf-scene-icon--accent {
  color: var(--accent);
}

.cf-scene-icon--muted {
  color: var(--text-muted);
}

/* ── Screen-reader only utility ── */

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

/* ── Focus styles across interactive elements ── */

.cf-btn:focus-visible,
.cf-cd-option:focus-visible,
.cf-replay-marker:focus-visible,
.cf-tool-line:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Mobile: 480px pass ── */

@media (max-width: 480px) {
  /* Glossary FAB tap target ≥ 44px */
  .cf-glossary-fab {
    width: 48px;
    height: 48px;
    bottom: 20px;
    right: 16px;
  }

  /* Confidence slider tap targets */
  .cf-cd-option {
    min-height: 44px;
    padding: 12px 12px;
    font-size: 0.8rem;
  }

  /* Replay scrubber: single column, markers as compact list */
  .cf-replay-timeline {
    flex-direction: column;
    padding: 8px 0;
  }

  .cf-replay-marker {
    flex: none;
    width: 100%;
    min-height: 44px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  /* Ground-truth diff: single column */
  .cf-diff-cols {
    grid-template-columns: 1fr;
  }

  .cf-diff-col--ai {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  /* Closing card: stack columns */
  .cf-closing-cols {
    flex-direction: column;
  }

  .cf-closing-divider {
    width: 100%;
    height: 1px;
  }

  /* Triage wrap: stack on narrow */
  .cf-triage-wrap {
    flex-direction: column;
  }

  .cf-callouts {
    flex-direction: column;
    max-width: none;
  }

  /* Metrics grid: single column */
  .cf-metrics-grid {
    grid-template-columns: 1fr;
  }

  /* Co-pilot mock: full width */
  .cf-handoff-layout {
    flex-direction: column;
  }

  .cf-handoff-triage {
    flex: none;
    width: 100%;
  }

  /* Scene headings */
  .cf-scene-heading {
    font-size: 1.35rem;
  }

  .cf-scene {
    padding: 40px 14px;
  }
}

/* ── Field Guide: 480px pass ── */

@media (max-width: 480px) {
  .fg-use-case-grid {
    grid-template-columns: 1fr;
  }

  .fg-this-not-this {
    flex-direction: column;
  }

  .fg-tnt-divider {
    width: auto;
    height: 1px;
  }

  /* Table horizontal scroll on narrow */
  .fg-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Replay scrubber 375px: very narrow ── */

@media (max-width: 375px) {
  .cf-replay-marker {
    padding: 10px 12px;
  }

  .cf-marker-label {
    font-size: 0.72rem;
  }

  .cf-cd-track {
    width: 100%;
  }

  .cf-cd-option {
    flex: 1;
    padding: 12px 8px;
    font-size: 0.75rem;
  }
}

/* ════════════════════════════════════════════════════════
   DYNAMIC CONTENT — added for Field Guide & Case File
   ════════════════════════════════════════════════════════ */

/* ── Reading-progress bar (scroll-driven) ──
   A thin accent bar across the top that fills as the page scrolls.
   Pure CSS via a scroll-progress timeline; degrades to invisible
   where unsupported (graceful — the page reads fine without it). */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--ok));
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 101;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  :where(html[data-motion="on"]) .reading-progress {
    animation: reading-progress-grow linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes reading-progress-grow {
  to { transform: scaleX(1); }
}

/* ── Animated flow diagrams (Field Guide) ──
   A pulse of attention travels through the diagram nodes (WAAPI, driven
   by diagram_flow_controller) while connector lines flow (CSS below).
   The static SVG is the resting state, so nothing is hidden — the
   animation only adds transient emphasis. */
.fg-flow-node {
  transform-box: fill-box;
  transform-origin: center;
}

:where(html[data-motion="on"]) .fg-diagram-wrap.is-flowing .fg-flow-line {
  stroke-dasharray: 6 5;
  animation: fg-dash-flow 0.7s linear infinite;
}

@keyframes fg-dash-flow {
  to { stroke-dashoffset: -22; }
}

/* Replay affordance under each animated diagram */
.fg-diagram-replay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-family: inherit;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.fg-diagram-replay svg {
  width: 11px;
  height: 11px;
}

.fg-diagram-replay:hover,
.fg-diagram-replay:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

:where(html[data-motion="off"]) .fg-diagram-replay { display: none; }

/* ── Card hover polish (CSS transitions) ──
   Subtle lift + accent edge on the Field Guide reference/use-case/metric
   cards, giving the otherwise-static surfaces a sense of response. */
:where(html[data-motion="on"]) .cf-ref-card,
:where(html[data-motion="on"]) .cf-metric-card,
:where(html[data-motion="on"]) .fg-use-case-card {
  transition: transform 0.2s ease, border-color 0.2s ease,
              box-shadow 0.2s ease;
}

:where(html[data-motion="on"]) .cf-ref-card:hover,
:where(html[data-motion="on"]) .cf-metric-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 6px 20px -8px rgba(59, 130, 246, 0.45);
}

:where(html[data-motion="on"]) .fg-use-case-card.fg-use-case-active:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px -8px rgba(59, 130, 246, 0.35);
}

/* ===== CASE FILE DETAIL (abductive reasoning layout) ===== */

.case-problem {
  margin-bottom: 24px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}

.case-problem-label {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.case-problem-text {
  font-size: 0.925rem;
  line-height: 1.65;
  color: var(--text);
}

.case-reasoning {
  margin-bottom: 28px;
}

.case-reasoning-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.case-reasoning-card {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
}

.case-reasoning-card--cause  { border-left-color: var(--warn); }
.case-reasoning-card--solution { border-left-color: var(--ok); }

.case-reasoning-label {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.case-reasoning-card p {
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Evidence trail */

.evidence-section {
  margin-bottom: 28px;
}

.evidence-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.evidence-section-header h2 {
  font-size: 1rem;
  font-weight: 500;
}

.evidence-entries {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.evidence-entry {
  background: linear-gradient(180deg, rgba(33, 37, 43, 0.98), rgba(26, 29, 34, 0.98));
  border: 1px solid rgba(68, 76, 89, 0.78);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: clip;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.evidence-entry[open] {
  border-color: rgba(91, 184, 165, 0.38);
}

.evidence-entry--transfer_log   { border-left-color: var(--accent); }
.evidence-entry--logbook        { border-left-color: var(--info); }
.evidence-entry--sdt            { border-left-color: var(--warn); }
.evidence-entry--cpd_output     { border-left-color: var(--warn); }
.evidence-entry--measurement_log { border-left-color: var(--warn); }
.evidence-entry--task_log       { border-left-color: var(--info); }
.evidence-entry--tool_call      { border-left-color: #a78bfa; }
.evidence-entry--endscript      { border-left-color: #a78bfa; }
.evidence-entry--field_guide    { border-left-color: var(--ok); }
.evidence-entry--service_history { border-left-color: var(--text-faint); }
.evidence-entry--notes          { border-left-color: var(--text-faint); }
.evidence-entry--sap_parts      { border-left-color: var(--text-faint); }

.evidence-entry-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.9rem;
  padding: 0.95rem 1rem;
  cursor: pointer;
  list-style: none;
}

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

.evidence-entry-summary:hover {
  background: rgba(255, 255, 255, 0.015);
}

.evidence-entry-summary:focus-visible {
  outline: 2px solid rgba(91, 184, 165, 0.55);
  outline-offset: -2px;
}

.evidence-entry-summary-main {
  min-width: 0;
}

.evidence-entry-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.evidence-source-badge {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
}

.evidence-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
}

.evidence-preview {
  margin-top: 0.55rem;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.evidence-entry-summary-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 10rem;
}

.evidence-meta {
  font-size: 0.78rem;
  color: var(--text-faint);
  white-space: nowrap;
}

.evidence-expand-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.evidence-expand-label::before {
  content: "▸";
  font-size: 0.68rem;
  transition: transform 0.15s ease;
}

.evidence-entry[open] .evidence-expand-label::before {
  transform: rotate(90deg);
}

.evidence-entry-detail {
  padding: 0 1rem 1rem;
  border-top: 1px solid rgba(68, 76, 89, 0.5);
  background: rgba(16, 17, 20, 0.3);
}

.evidence-entry-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.95rem 0 0.8rem;
}

.evidence-detail-title {
  font-size: 0.96rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text);
}

.evidence-detail-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  color: var(--text-faint);
  font-size: 0.76rem;
}

.evidence-body {
  padding: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: "Geist", system-ui, sans-serif;
}

/* Technical references */

.case-refs {
  margin-bottom: 28px;
}

.case-refs-heading {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  margin-bottom: 10px;
}

.case-refs-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
}

.case-ref-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.case-ref-label {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  min-width: 84px;
  flex-shrink: 0;
}

/* Resolution strip */

.case-resolution {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--ok-dim);
  border: 1px solid var(--ok);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.case-resolution-label {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ok);
  flex-shrink: 0;
}

.case-resolution-detail {
  color: var(--text-muted);
}

/* ===== INLINE EDITING ===== */

.cf-editable-text {
  display: block;
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  line-height: inherit;
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  margin: -4px -6px;
  cursor: text;
  transition: color 0.1s;
}

.cf-editable-text:hover {
  color: var(--text);
}

.cf-inline-hint {
  font-size: 0.72rem;
  color: var(--text-faint);
  margin-left: auto;
}

.cf-field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.2;
}

.cf-field-label span {
  color: var(--text-faint);
  font-size: 0.68rem;
  font-weight: 500;
}

.cf-empty-field {
  font-size: 0.875rem;
  color: var(--text-faint);
  font-style: italic;
}

.cf-inline-textarea {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.65;
  padding: 8px 10px;
  resize: vertical;
  margin-bottom: 8px;
  outline: none;
}

.cf-inline-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}

.cf-inline-textarea--problem {
  min-height: 9.5rem;
  margin-bottom: 0;
  background: var(--bg-soft);
  border-color: var(--border);
  box-shadow: none;
  font-size: 0.98rem;
  line-height: 1.55;
  padding: 0.75rem 0.85rem;
  resize: vertical;
}

.cf-inline-textarea--problem:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim);
}

.cf-inline-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* turbo-frame elements are transparent to layout where needed */
.case-reasoning-grid > turbo-frame {
  display: contents;
}

/* ===== ACTIONS SECTION ===== */

.actions-section {
  margin-bottom: 28px;
}

.actions-heading {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 10px;
}

.actions-history {
  margin-top: 4px;
}

.actions-history-summary {
  font-size: 0.8rem;
  color: var(--text-faint);
  cursor: pointer;
  padding: 6px 0;
  list-style: none;
  user-select: none;
}

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

.actions-history-summary::before {
  content: "▸ ";
  font-size: 0.7rem;
}

details[open] .actions-history-summary::before {
  content: "▾ ";
}

.actions-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

/* ===== NEW ENTRY FORM ===== */

.new-entry-card {
  background: linear-gradient(180deg, rgba(30, 34, 40, 0.96), rgba(23, 26, 31, 0.98));
  border: 1px solid rgba(68, 76, 89, 0.85);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
  padding: 0.95rem 1rem 1rem;
  margin-bottom: 0.9rem;
}

.new-entry-type-row {
  margin-bottom: 8px;
}

.new-entry-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.cf-select {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  padding: 4px 8px;
  outline: none;
}

.cf-select:focus {
  border-color: var(--accent);
}

.cf-date-input {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 0.8rem;
  padding: 4px 8px;
  outline: none;
  color-scheme: dark;
}

.cf-date-input:focus {
  border-color: var(--accent);
}

/* evidence-entry--planned_action colour */
.evidence-entry--planned_action { border-left-color: var(--ok); }

/* ───────────────────────── Case file: hypotheses & action plans ───────── */

.case-file-page {
  max-width: 1080px;
  margin-inline: auto;
}

/* Top facts band: compact technical references / classification */
.facts-refs {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.facts-ref-row {
  display: grid;
  grid-template-columns: minmax(0, 6rem) minmax(0, 1fr);
  align-items: start;
  gap: 0.45rem 0.75rem;
}
.facts-ref-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  padding-top: 0.2rem;
}
.facts-ref-value {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
}

@media (max-width: 960px) {
  .detail-header {
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  }

  .detail-meta-row {
    grid-template-columns: 1fr;
  }

  .case-tab-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .case-tabs {
    align-self: flex-start;
  }

  .known-info-overview {
    grid-template-columns: 1fr;
  }

  .known-info-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .detail-header-body,
  .detail-header-aside {
    padding: 1rem;
  }

  .facts-ref-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .case-tab-bar {
    align-items: stretch;
  }

  .case-tabs {
    width: 100%;
    border-radius: var(--radius);
  }

  .known-info-shell,
  .known-info-empty {
    padding: 0.9rem;
  }

  .known-info-stats {
    grid-template-columns: 1fr;
  }

  .evidence-entry-summary {
    grid-template-columns: 1fr;
  }

  .known-info-group-head,
  .evidence-entry-detail-head {
    flex-direction: column;
  }

  .evidence-entry-summary-side,
  .evidence-detail-meta {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .evidence-entry-summary-side {
    min-width: 0;
  }

  .known-info-group-count {
    align-self: flex-start;
  }
}

/* Problem statement stacked above the overview */
.case-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 1.25rem 0;
}
.case-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}
.case-col--summary {
  border-left: 3px solid var(--accent);
  box-shadow: inset 1px 0 0 var(--accent-dim);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.case-workspace-container {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.case-tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  background: linear-gradient(180deg, rgba(30, 34, 40, 0.96), rgba(22, 25, 30, 0.98));
  border-bottom: 1px solid var(--border);
}

.case-tab-bar-copy {
  min-width: 0;
}

.case-tab-bar-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.case-workspace-container .known-info-shell,
.case-workspace-container .known-info-empty,
.case-workspace-container .case-work-grid .hyp-section,
.case-workspace-container .case-work-grid .actions-section {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.case-workspace-container [data-tabs-target="panel"] {
  padding: 1.5rem;
}

.case-workspace-container [data-tabs-target="panel"] > .work-section-head:first-child {
  margin: 0 0 1.25rem 0;
}

.case-workspace-container .known-info-board,
.case-workspace-container .case-grid,
.case-workspace-container .case-work-grid {
  margin-top: 1.25rem;
  margin-bottom: 0;
}

.case-workspace-container .case-grid {
  margin-top: 1rem;
}

.case-workspace-container .case-work-grid {
  gap: 1.5rem;
}

.case-tabs {
  margin-bottom: 0;
  padding: 0.32rem;
  gap: 0.35rem;
  background: rgba(16, 17, 20, 0.6);
  border: 1px solid rgba(50, 56, 66, 0.85);
  border-radius: 999px;
  flex-shrink: 0;
}

/* Mermaid diagram + CSS-only tab switcher */
.hyp-diagram { flex: 1; }
.hyp-tabs {
  display: block;
}
.hyp-tab-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem;
  background: rgba(16, 17, 20, 0.6);
  border: 1px solid rgba(50, 56, 66, 0.85);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}
.hyp-tab-input { position: absolute; opacity: 0; pointer-events: none; }
.hyp-tab {
  align-items: center;
  display: inline-flex;
  min-height: 2.4rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid rgba(68, 76, 89, 0.9);
  border-radius: 999px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  user-select: none;
}
.hyp-tab:hover {
  background: rgba(38, 43, 50, 0.85);
  color: var(--text);
  transform: translateY(-1px);
}
.hyp-tab-input:checked + .hyp-tab {
  background: linear-gradient(180deg, rgba(31, 68, 61, 0.95), rgba(24, 59, 53, 0.95));
  border-color: rgba(91, 184, 165, 0.7);
  box-shadow: inset 0 0 0 1px rgba(91, 184, 165, 0.12);
  color: #d9f5ee;
}
.hyp-panels { margin-top: 0.8rem; }
.hyp-panel { display: none; }
.hyp-tabs:has(.hyp-tab-input:nth-of-type(1):checked) .hyp-panel--fish { display: block; }
.hyp-tabs:has(.hyp-tab-input:nth-of-type(2):checked) .hyp-panel--quad { display: block; }
.hyp-tabs:has(.hyp-tab-input:nth-of-type(3):checked) .hyp-panel--timeline { display: block; }
.mermaid-target { width: 100%; overflow-x: auto; }
.mermaid-target svg { max-width: 100%; height: auto; }
.mermaid-error { font-size: 0.85rem; color: var(--error); }

/* Hypothesis list + cards */
.case-work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin: 1.5rem 0 1.75rem;
}

.case-work-grid .hyp-section,
.case-work-grid .actions-section {
  min-width: 0;
  margin: 0;
  background: linear-gradient(180deg, rgba(28, 32, 37, 0.96), rgba(22, 25, 30, 0.98));
  border: 1px solid rgba(68, 76, 89, 0.85);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  padding: 1rem;
}

.hyp-section { margin: 1.5rem 0; }
.work-section-head {
  margin-bottom: 0.9rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(68, 76, 89, 0.45);
}

.work-section-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.work-section-hint {
  margin-top: 0.3rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.hyp-list { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.8rem; }
.hyp-card {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  background: linear-gradient(180deg, rgba(34, 38, 44, 0.96), rgba(27, 30, 35, 0.98));
  border: 1px solid rgba(68, 76, 89, 0.8);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.8rem 0.95rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.hyp-card[draggable="true"] {
  cursor: grab;
}
.hyp-card[draggable="true"]:active {
  cursor: grabbing;
}
.hyp-card--gathering_data { border-left-color: var(--info); }
.hyp-card--excluded { border-left-color: var(--text-faint); opacity: 0.7; }
.hyp-card--excluded .hyp-claim { text-decoration: line-through; }
.hyp-card--confirmed { border-left-color: var(--ok); }
.hyp-card--editing { opacity: 1; }
.hyp-card--new { margin-bottom: 0.6rem; }

.hyp-body { flex: 1; min-width: 0; }
.hyp-claim { font-size: 0.95rem; color: var(--text); margin-bottom: 0.45rem; line-height: 1.45; }
.hyp-attrs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.hyp-bone {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  border: 1px solid rgba(68, 76, 89, 0.8);
  border-radius: 999px;
  padding: 0.14rem 0.55rem;
  background: rgba(16, 17, 20, 0.52);
}
.hyp-status {
  font-size: 0.7rem;
  border-radius: 999px;
  padding: 0.14rem 0.55rem;
  background: var(--surface-raised);
  color: var(--text-muted);
}
.hyp-status--gathering_data { background: var(--info-dim); color: var(--info); }
.hyp-status--excluded { background: var(--surface-raised); color: var(--text-faint); }
.hyp-status--confirmed { background: var(--ok-dim); color: var(--ok); }
.hyp-meta { font-size: 0.75rem; color: var(--text-muted); }

.hyp-delete, .plan-card .hyp-delete {
  align-self: flex-start;
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.1rem 0.3rem;
}
.hyp-delete:hover { color: var(--error); }

.hyp-edit-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

.hyp-inline-form {
  display: contents;
}

.hyp-claim-input {
  min-height: 3.7rem;
  margin-bottom: 0.45rem;
  background: var(--bg-soft);
  border-color: var(--border);
  font-size: 0.95rem;
  line-height: 1.45;
  padding: 0.45rem 0.55rem;
}

.hyp-attrs--editing {
  gap: 0.4rem;
}

.hyp-attrs--editing .cf-text-input,
.hyp-attrs--editing .cf-select {
  min-height: 1.75rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
}

.hyp-category-input {
  flex: 1 1 10rem;
}

.hyp-status-input,
.hyp-likelihood-input {
  flex: 0 1 8.5rem;
}

.hyp-submit-input {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 1.75rem;
  padding: 0.2rem 0.75rem;
  white-space: nowrap;
}

.cf-text-input {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  padding: 0.35rem 0.55rem;
  flex: 1;
  min-width: 8rem;
}
.cf-text-input:focus { outline: none; border-color: var(--accent); }

@media (max-width: 1350px) {
  .case-work-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .case-work-grid .hyp-section,
  .case-work-grid .actions-section {
    padding: 0.9rem;
  }
}

/* Action plans */
.plan-list { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.8rem; }
.plan-card {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  background: linear-gradient(180deg, rgba(34, 38, 44, 0.96), rgba(27, 30, 35, 0.98));
  border: 1px solid rgba(68, 76, 89, 0.8);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.8rem 0.95rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.plan-main { flex: 1; min-width: 0; }
.plan-card--editing { display: block; border-left-color: var(--border-strong); }
.plan-edit-textarea { margin-bottom: 0.5rem; }
.hyp-edit-row .cf-date-input { flex: 0 0 auto; }
.plan-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; }
.plan-status {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 0.14rem 0.55rem;
  background: var(--surface-raised);
  color: var(--text-muted);
}
.plan-status--dispatched { background: var(--info-dim); color: var(--info); }
.plan-status--awaiting { background: var(--warn-dim); color: var(--warn); }
.plan-status--done { background: var(--ok-dim); color: var(--ok); }
.plan-hyp { font-size: 0.78rem; color: var(--text-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.plan-meta { font-size: 0.72rem; color: var(--text-faint); }
.plan-body { font-size: 0.9rem; color: var(--text); line-height: 1.45; }

.plan-builder-form {
  display: grid;
  gap: 0.65rem;
}

.plan-dropzone {
  min-height: 5.25rem;
  display: grid;
  gap: 0.55rem;
  align-content: start;
  padding: 0.75rem 0.85rem;
  background: var(--bg-soft);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.12s, background 0.12s;
}

.plan-dropzone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.plan-dropzone-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.plan-dropzone-label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.plan-dropzone-hint {
  color: var(--text-faint);
  font-size: 0.75rem;
}

.plan-linked-hypotheses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* The checkbox carries the linked state but is never shown — the chip is. */
.plan-linked-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.plan-linked-chip {
  display: none;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  padding: 0.25rem 0.3rem 0.25rem 0.55rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.75rem;
}

/* A chip is only visible once its hypothesis is linked. */
.plan-linked-chip:has(.plan-linked-checkbox:checked) {
  display: inline-flex;
}

.plan-linked-claim {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-linked-remove {
  flex: none;
  padding: 0;
  width: 1.05rem;
  height: 1.05rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
}

.plan-linked-remove:hover {
  background: var(--accent-dim);
  color: var(--error);
}

.plan-hypothesis-select {
  min-height: 3.8rem;
  width: 100%;
}

.plan-effort-input {
  flex: 0 1 7rem;
}

/* ───────────────────────── Case file: tabs + Log panel ─────────────── */

/* On medium screens reserve a right gutter for the floating chat panel.
   Wide screens (≥ 1400px) use a 3-column in-flow layout instead. */
.main-content:has(.case-file-page) {
  max-width: 1560px;
  padding-right: 460px; /* 420px panel + 16px gap + 24px left-pad mirror */
}

/* Reset button appearance so <button class="ui-tab"> matches <a class="ui-tab"> */
button.ui-tab {
  background: transparent;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
}


/* Chat panel is out of flow (fixed, right). The Notes panel is in-flow on the
   left, so the layout is a two-column row: [ notes | main ]. */
.case-detail-layout {
  position: relative;
}

.case-detail-content {
  min-width: 0;
}

.case-detail-workspace {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: 0;
}

.case-detail-main {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 1080px;
}

/* ── Notes panel (left, in-flow sidebar) ─────────────────────────────── */
.case-notes-panel {
  flex: 0 0 300px;
  width: 300px;
  position: sticky;
  top: 68px;
  max-height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem;
  overflow: hidden;
}

.notes-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(68, 76, 89, 0.45);
}

.notes-header-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.notes-header h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
}

.notes-header-hint {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.notes-compose {
  flex: none;
  margin-bottom: 0.9rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(68, 76, 89, 0.45);
}

.notes-form .notes-trix {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  min-height: 4.5em;
  color: var(--text);
}

.notes-compose-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.note-edit-footer {
  gap: 0.5rem;
  align-items: center;
}

/* ── Trix editor + toolbar, dark theme ───────────────────────────────── */
trix-editor.notes-trix:empty:not(:focus)::before {
  color: var(--text-faint);
}

trix-toolbar {
  margin-bottom: 0.4rem;
}

trix-toolbar .trix-button-row {
  gap: 0.35rem;
  flex-wrap: wrap;
}

trix-toolbar .trix-button-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}

trix-toolbar .trix-button {
  background: transparent;
  border-bottom: none;
  border-color: var(--border);
  color: var(--text-muted);
}

trix-toolbar .trix-button:not(:first-child) {
  border-left: 1px solid var(--border);
}

trix-toolbar .trix-button:hover {
  background: var(--surface-hover);
}

trix-toolbar .trix-button.trix-active {
  background: var(--accent-dim);
  color: var(--text);
}

/* Trix ships near-black SVG glyphs; invert them so they read on dark. */
trix-toolbar .trix-button--icon::before {
  filter: invert(1);
  opacity: 0.65;
}

trix-toolbar .trix-button--icon:hover::before,
trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}

trix-toolbar .trix-button:disabled::before,
trix-toolbar .trix-button.trix-button--disabled::before {
  opacity: 0.25;
}

/* Link dialog */
trix-toolbar .trix-dialog {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-panel);
  color: var(--text);
}

trix-toolbar .trix-input--dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
}

trix-toolbar .trix-button--dialog {
  color: var(--text-muted);
}

trix-toolbar .trix-button--dialog:hover {
  color: var(--text);
}

.notes-list-region {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  /* Scrollable, but hide the scrollbar chrome. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.notes-list-region::-webkit-scrollbar {
  display: none;
}

.notes-list-meta {
  display: flex;
  align-items: center;
}

.notes-count {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.notes-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.notes-empty {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* ── Note card ───────────────────────────────────────────────────────── */
.note-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  padding: 0.7rem 0.75rem;
}

.note-card--agent {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.note-card--pinned {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}

.note-card-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}

.note-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.66rem;
  font-weight: 700;
  flex: none;
  background: var(--surface-raised);
  color: var(--text);
}

.note-avatar--agent {
  background: var(--accent);
  color: #fff;
}

.note-byline {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.note-author {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.note-kind-badge {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: var(--surface-raised);
  color: var(--text-muted);
}

.note-kind-badge--agent {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}

.note-pin-flag {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  font-weight: 600;
}

.note-time {
  margin-left: auto;
  font-size: 0.66rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.note-body {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text);
  word-break: break-word;
}

.note-body > *:first-child { margin-top: 0; }
.note-body > *:last-child { margin-bottom: 0; }

.note-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.note-actions form {
  display: flex;
  align-items: center;
  margin: 0;
}

.note-action,
.note-action button {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.7rem;
  line-height: 1.2;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
}

.note-action button:hover,
.note-action:hover { color: var(--text); }

.note-action--danger button:hover,
.note-action--danger:hover { color: var(--error); }

/* Wide desktop (≥ 1400px): 3-column in-flow layout — notes | workspace | chat.
   The chat panel leaves fixed/floating mode and becomes a sticky right column.
   Note: the .case-log-panel position override lives AFTER the base chat-panel
   section to win the cascade. See "Chat / Log panel" below. */
@media (min-width: 1400px) {
  .main-content:has(.case-file-page) {
    max-width: 1920px;
    padding-right: 24px;
  }

  .case-file-page {
    max-width: none;
    margin-inline: 0;
  }

  .case-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.5rem;
    align-items: start;
  }

  .case-detail-workspace {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 1.5rem;
    align-items: start;
  }

  .case-notes-panel {
    width: auto;
    max-width: none;
    flex: none;
  }

  .case-detail-main {
    max-width: none;
  }
}

/* Stack the notes panel above the case file once the viewport tightens.
   (Full mobile treatment handled separately later.) */
@media (max-width: 1180px) {
  .case-detail-workspace {
    display: block;
  }

  .case-notes-panel {
    position: static;
    width: 100%;
    flex: none;
    max-height: none;
    margin-bottom: 1.25rem;
  }

  .notes-list-region {
    overflow-y: visible;
  }
}

.known-info-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0;
}
.known-info-group-label:first-child { margin-top: 0; }

.known-info-board {
  margin: 1.2rem 0 1.6rem;
}

.known-info-shell,
.known-info-empty {
  background: linear-gradient(180deg, rgba(28, 32, 37, 0.96), rgba(22, 25, 30, 0.98));
  border: 1px solid rgba(68, 76, 89, 0.85);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  padding: 1rem;
}

.known-info-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(17rem, 1fr);
  gap: 1rem;
  align-items: start;
}

.known-info-overview-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.known-info-overview-title {
  margin-top: 0.35rem;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.known-info-overview-copy {
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 48rem;
}

.known-info-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.known-info-stat {
  background: rgba(16, 17, 20, 0.52);
  border: 1px solid rgba(68, 76, 89, 0.72);
  border-radius: var(--radius);
  padding: 0.8rem 0.85rem;
}

.known-info-stat-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.known-info-stat-value {
  display: block;
  margin-top: 0.42rem;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--text);
}

.known-info-filter-bar {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(68, 76, 89, 0.45);
}

.known-info-filter-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.6rem;
}

.known-info-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.known-info-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(68, 76, 89, 0.82);
  background: rgba(16, 17, 20, 0.52);
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.known-info-filter-chip:hover {
  border-color: rgba(91, 184, 165, 0.55);
  background: rgba(24, 59, 53, 0.38);
  color: var(--text);
  transform: translateY(-1px);
}

.known-info-filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: rgba(91, 184, 165, 0.15);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
}

.known-info-groups {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.1rem;
}

.known-info-group {
  scroll-margin-top: 5rem;
}

.known-info-group-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

.known-info-group-hint {
  margin-top: 0.28rem;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.known-info-group-count {
  flex: none;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: rgba(16, 17, 20, 0.6);
  border: 1px solid rgba(68, 76, 89, 0.75);
  color: var(--text-muted);
  font-size: 0.74rem;
}

.evidence-entries--known {
  gap: 0.85rem;
}

/* ── Chat / Log panel ───────────────────────────────────────────────── */

.case-log-panel {
  width: 420px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: fixed;
  right: 16px;
  top: 68px;
  max-height: calc(100vh - 84px);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
  z-index: 90;
}

.case-log-panel:has(.case-log-details[open]) {
  height: calc(100vh - 84px);
}

.case-log-details {
  height: 100%;
}

.case-log-details[open] {
  display: flex;
  flex-direction: column;
}

/* Newer Chromium wraps <details> content in a ::details-content pseudo that
   defaults to display:block, which breaks the flex height chain and stops the
   messages list from scrolling. Make it a constrained flex column so the inner
   .chat-messages can overflow-scroll. Harmless where the pseudo is unsupported. */
.case-log-details[open]::details-content {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.case-log-body {
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
}

body.embed-mode .case-log-panel {
  right: 16px;
  top: auto;
  bottom: 16px;
  width: min(420px, calc(100vw - 32px));
  max-height: min(70vh, 620px);
}

body.embed-mode .case-log-panel:has(.case-log-details[open]) {
  height: min(70vh, 620px);
}

body.embed-mode > main {
  padding: 24px;
}

body.embed-mode .case-file-page {
  width: min(100%, 1080px);
}

/* Tablet widths keep the log floating instead of pushing it below the case file. */
@media (max-width: 1180px) {
  .main-content:has(.case-file-page) {
    max-width: 1200px;
    padding-right: 24px;
  }

  .case-detail-main { max-width: 100%; }

  .case-log-panel {
    right: 16px;
    top: 68px;
    bottom: auto;
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100vh - 84px);
  }

  .case-log-panel:has(.case-log-details[open]) {
    height: calc(100vh - 84px);
  }
}

@media (max-width: 640px) {
  .case-log-panel {
    right: 12px;
    top: auto;
    bottom: 12px;
    width: calc(100vw - 24px);
    max-height: min(76vh, 620px);
  }

  .case-log-panel:has(.case-log-details[open]) {
    height: min(76vh, 620px);
  }
}

/* Wide desktop: pull the chat panel out of fixed/floating mode into the flow. */
@media (min-width: 1400px) {
  .case-log-panel {
    position: sticky;
    top: 68px;
    right: auto;
    width: auto;
    height: calc(100vh - 84px);
    max-height: calc(100vh - 84px);
    box-shadow: none;
    z-index: 1;
  }

  .case-log-panel:has(.case-log-details[open]) {
    height: calc(100vh - 84px);
  }
}

/* ── header ── */
.chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.chat-header::-webkit-details-marker {
  display: none;
}

.chat-header-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.chat-header h2 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 0;
}

.chat-header-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  height: 1.2rem;
  margin-left: auto;
  padding: 0 0.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-faint);
  font-family: ui-monospace, monospace;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}

.chat-header-toggle {
  position: relative;
  width: 1rem;
  height: 1rem;
  color: var(--text-muted);
  flex: 0 0 1rem;
}

.chat-header-toggle::before,
.chat-header-toggle::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transform: translateY(-50%);
}

.chat-header-toggle::after {
  transform: translateY(-50%) rotate(90deg);
}

.case-log-details[open] .chat-header-toggle::after {
  opacity: 0;
}

/* ── messages ── */
.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  /* Scrollable, but hide the scrollbar chrome. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.chat-messages::-webkit-scrollbar {
  display: none;
}

.chat-empty {
  font-size: 0.78rem;
  color: var(--text-faint);
  text-align: center;
  padding: 24px 16px;
}

.chat-date-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 4px;
}
.chat-date-sep::before,
.chat-date-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.chat-date-sep span {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  white-space: nowrap;
}

.chat-msg {
  display: flex;
  gap: 9px;
  padding: 6px 14px;
  border-radius: 4px;
  transition: background 0.1s;
}
.chat-msg:hover { background: var(--surface-hover); }

.chat-avatar {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.65rem;
  font-weight: 800;
  font-family: ui-monospace, monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  letter-spacing: 0;
}

.chat-msg-content { flex: 1; min-width: 0; }

.chat-msg-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

.chat-msg-author {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  font-family: ui-monospace, monospace;
}

.chat-msg-time {
  font-size: 0.65rem;
  color: var(--text-faint);
  font-family: ui-monospace, monospace;
  margin-left: auto;
  flex-shrink: 0;
}

.chat-msg-body {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text);
  word-break: break-word;
}

/* ── compose ── */
.chat-compose {
  border-top: 1px solid var(--border);
  padding: 10px;
  flex-shrink: 0;
  background: var(--surface);
}

.chat-input {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 0.83rem;
  line-height: 1.45;
  padding: 8px 10px;
  resize: none;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.chat-input:focus { border-color: var(--accent); }
.chat-input::placeholder { color: var(--text-faint); }

.chat-compose-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 7px;
  gap: 8px;
}

.chat-hint {
  font-size: 0.65rem;
  color: var(--text-faint);
  font-family: ui-monospace, monospace;
}