@import url('https://fonts.googleapis.com/css2?family=David+Libre:wght@400;500;700&display=swap');

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

/* ═══ Design Tokens (shared with mobile) ═══ */
:root {
  --ink: #1a2332;
  --ink-light: #2a3a52;
  --gold: #c9963b;
  --gold-light: #dbb36a;
  --gold-bg: #fdf5e6;
  --cream: #faf8f5;
  --parchment: #f3efe8;
  --text: #2c2c2c;
  --text-light: #7a7068;
  --border: #e5ddd2;
  --card: #ffffff;
  --success: #5a8f5c;
  --danger: #b54a4a;
  --danger-light: #f0dcd8;

  /* Desktop-specific */
  --topbar-height: 44px;
  --sidebar-collapsed: 52px;
  --sidebar-expanded: 200px;
  --divider-width: 6px;
  --panel-min: 320px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 4px rgba(26,35,50,0.06);
  --shadow-md: 0 2px 8px rgba(201,150,59,0.12);
  --shadow-lg: 0 4px 20px rgba(201,150,59,0.2);
  --transition: all 0.2s ease;

  /* Entity type colors */
  --c-person: #3498db;
  --c-place: #2ecc71;
  --c-event: #e67e22;
  --c-org: #9b59b6;
  --c-topic: #f1c40f;
  --c-time: #c62828;

  /* Timeline: the three Stage-A families */
  --t-happened: #3a6ea5;
  --t-thought: #c9963b;
  --t-weighed: #8a6bab;
}

/* ═══ Dark Theme ═══ */
html[data-theme="dark"] {
  /* ink stays dark — used for topbar/sidebar/chrome backgrounds */
  --gold: #e8b661;
  --gold-light: #f0c875;
  --gold-dark: #b8862e;
  --gold-bg: #2d2416;
  --cream: #1a1a1e;
  --parchment: #222226;
  --text: #e8e4de;
  --text-light: #a09888;
  --border: #3a3530;
  --card: #2a2a2e;
  --success: #7aba7e;
  --danger: #d97e7e;
  --danger-light: #4a2a28;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 4px 20px rgba(0,0,0,0.4);
  --t-happened: #6fa3d8;
  --t-thought: #e8b661;
  --t-weighed: #b294cf;
}
/* Dark mode: elements using --ink as text color need override */
html[data-theme="dark"] .settings-card h2,
html[data-theme="dark"] .clarification-header h3,
html[data-theme="dark"] .section-title {
  color: var(--text);
}

/* ═══ Base ═══ */
html, body { height: 100%; overflow: hidden; }

body {
  font-family: 'David Libre', 'Segoe UI', Arial, serif;
  background: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  color: var(--text);
  direction: rtl;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
  font-size: 15px;
}
html[data-theme="dark"] body { background-image: none; }
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
  cursor: pointer;
  width: 20px; height: 20px;
}
input[type="date"] { font-size: 0.85em; }
input[type="date"]:invalid::-webkit-datetime-edit,
input[type="date"]:not(:valid)::-webkit-datetime-edit { color: var(--text-light); opacity: 0.6; }

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ═══ Auth Overlay ═══ */
.auth-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--parchment);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  display: flex; align-items: center; justify-content: center;
}
.auth-overlay.hidden { display: none; }

.auth-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  width: 400px;
  max-width: 90vw;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.auth-logo { font-size: 3em; margin-bottom: 8px; }
.auth-title {
  font-size: 1.5em; font-weight: 700;
  color: var(--gold); margin-bottom: 24px;
}
.auth-card input {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: inherit; font-size: 0.95em;
  background: var(--cream); color: var(--text);
  margin-bottom: 12px; direction: ltr; text-align: right;
}
.auth-card input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,150,59,0.15);
}
.auth-link { color: var(--gold); cursor: pointer; font-size: 0.9em; margin-top: 12px; }
.auth-link:hover { text-decoration: underline; }
.auth-error { color: var(--danger); font-size: 0.85em; margin-bottom: 8px; display: none; }

/* ═══ Top Bar ═══ */
.topbar {
  height: var(--topbar-height);
  background: var(--ink);
  border-bottom: 2px solid var(--gold);
  display: flex; align-items: center;
  padding: 0 16px; gap: 12px;
  flex-shrink: 0; z-index: 100;
}
.topbar-logo {
  font-size: 1.1em; font-weight: 700;
  color: var(--gold-light); letter-spacing: 0.5px;
  white-space: nowrap;
}
.topbar-stats {
  flex: 1; color: var(--cream); opacity: 0.7;
  font-size: 0.8em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.topbar-actions { display: flex; align-items: center; gap: 8px; }

.topbar-btn {
  background: none; border: none; color: var(--cream);
  cursor: pointer; font-size: 1.1em; padding: 4px 8px;
  border-radius: 6px; transition: var(--transition);
  font-family: inherit;
}
.topbar-btn:hover { background: rgba(255,255,255,0.1); }

.topbar-badge {
  background: var(--danger); color: white;
  font-size: 0.7em; font-weight: 700;
  padding: 1px 6px; border-radius: 8px;
  margin-right: -4px;
}

.topbar-user {
  display: flex; align-items: center; gap: 6px;
  color: var(--gold-light); font-size: 0.85em;
}

/* ═══ Journal Selector (topbar) ═══ */
.journal-selector { position: relative; flex-shrink: 0; }
.journal-current {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(201,150,59,0.3);
  color: var(--gold-light); cursor: pointer; font-family: inherit;
  font-size: 0.82em; padding: 5px 10px; border-radius: 8px;
  white-space: nowrap; transition: var(--transition);
}
.journal-current:hover { background: rgba(255,255,255,0.14); border-color: var(--gold-light); }
.journal-caret { font-size: 0.7em; opacity: 0.8; }
.journal-dropdown {
  display: none; position: absolute; top: 100%; right: 0; margin-top: 6px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  min-width: 240px; padding: 8px; z-index: 300;
}
.journal-dropdown.visible { display: block; }
.journal-dropdown-title {
  font-size: 0.75em; font-weight: 700; color: var(--gold);
  padding: 4px 6px 6px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.journal-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: right;
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 8px; cursor: pointer; font-family: inherit; font-size: 0.9em;
  color: var(--text); transition: var(--transition);
}
.journal-item:hover { background: var(--gold-bg); }
.journal-item.active { background: var(--gold-bg); border-color: var(--gold-light); }
.journal-radio { color: var(--gold); font-size: 1.05em; flex-shrink: 0; }
.journal-name { flex: 1; }
.journal-ro {
  font-size: 0.7em; color: var(--text-light);
  border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px;
}
.journal-create-row {
  display: flex; gap: 6px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--border);
}
.journal-create-input { flex: 1; font-size: 0.85em; padding: 6px 10px; }

/* Admin banner */
.admin-banner {
  background: var(--gold-bg); border-bottom: 1px solid var(--gold-light);
  padding: 4px 16px; font-size: 0.8em; color: var(--ink);
  text-align: center; display: none;
}
.admin-banner.visible { display: block; }

/* ═══ App Layout ═══ */
.app-layout { display: none; flex-direction: column; height: 100vh; }
.app-layout.visible { display: flex; }

.app-body {
  display: flex; flex: 1; overflow: hidden;
  height: calc(100vh - var(--topbar-height));
}

/* ═══ Sidebar ═══ */
.sidebar {
  width: var(--sidebar-collapsed);
  background: var(--ink);
  border-left: 1px solid rgba(201,150,59,0.2);
  display: flex; flex-direction: column;
  transition: width 0.25s ease;
  overflow: hidden; flex-shrink: 0;
  z-index: 50;
}
.sidebar.expanded { width: var(--sidebar-expanded); }

.sidebar-nav { flex: 1; padding: 8px 0; }

.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer;
  color: rgba(255,255,255,0.6); white-space: nowrap;
  transition: var(--transition); border: none;
  background: none; font-family: inherit;
  font-size: 0.9em; width: 100%; text-align: right;
}
.sidebar-item:hover { color: var(--gold-light); background: rgba(255,255,255,0.05); }
.sidebar-item.active { color: var(--gold); background: rgba(201,150,59,0.1); }
.sidebar-item .icon { font-size: 1.2em; width: 24px; text-align: center; flex-shrink: 0; }
.sidebar-item .label { opacity: 0; transition: opacity 0.2s; }
.sidebar.expanded .sidebar-item .label { opacity: 1; }

.sidebar-bottom {
  padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.1);
}

/* ═══ Panels Container ═══ */
.panels {
  display: flex; flex: 1; overflow: hidden;
}

/* ═══ Center Panel ═══ */
.center-panel {
  flex: 1; min-width: 400px;
  overflow-y: auto; padding: 20px;
  background: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ═══ Panel Divider ═══ */
.panel-divider {
  width: var(--divider-width); flex-shrink: 0;
  background: var(--parchment);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  cursor: col-resize; position: relative;
  transition: background 0.15s;
}
.panel-divider:hover, .panel-divider.dragging {
  background: var(--gold-bg);
  border-color: var(--gold-light);
}
.panel-divider::after {
  content: ''; position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2px; height: 40px;
  background: var(--border); border-radius: 1px;
}
.panel-divider:hover::after { background: var(--gold-light); }

.panel-divider .collapse-btn {
  position: absolute; top: 8px; left: 50%;
  transform: translateX(-50%);
  background: var(--parchment); border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer;
  font-size: 0.7em; padding: 2px 4px;
  color: var(--text-light); line-height: 1;
}
.panel-divider .collapse-btn:hover { background: var(--gold-bg); color: var(--gold); }

/* ═══ Left Panel (Knowledge) ═══ */
.left-panel {
  width: 480px; min-width: var(--panel-min);
  max-width: 50vw; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  transition: width 0.2s ease;
}
.left-panel.collapsed { width: 0; min-width: 0; overflow: hidden; }

/* ═══ Panel Tabs ═══ */
.panel-tabs {
  display: flex; gap: 2px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0; overflow-x: auto;
  scroll-behavior: smooth;
  /* Single row that scrolls. A soft fade marks the edge that still has more
     tabs beyond it — the fade widths are driven by JS (updateTabsScrollHint),
     so it appears only on the side(s) with hidden tabs and follows the scroll. */
  --fade-l: 0px; --fade-r: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
/* thin gold scrollbar as a secondary cue (shows only when the bar overflows) */
.panel-tabs::-webkit-scrollbar { height: 5px; }
.panel-tabs::-webkit-scrollbar-thumb { background: rgba(201,150,59,.5); border-radius: 4px; }
.panel-tabs::-webkit-scrollbar-track { background: transparent; }
.panel-tab {
  padding: 8px 14px; border: none; cursor: pointer;
  font-family: inherit; font-size: 0.85em; font-weight: 500;
  background: none; color: var(--text-light);
  border-bottom: 2px solid transparent;
  transition: var(--transition); white-space: nowrap;
  border-radius: 6px 6px 0 0;
}
.panel-tab:hover { color: var(--text); background: rgba(201,150,59,0.05); }
.panel-tab.active {
  color: var(--gold); border-bottom-color: var(--gold);
  background: rgba(201,150,59,0.08);
}

.tab-content { display: none; flex: 1; overflow-y: auto; padding: 12px; }
.tab-content.active { display: flex; flex-direction: column; }

/* ═══ Cards ═══ */
.d-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-right: 3px solid var(--gold-light);
  border-radius: var(--radius);
  padding: 14px; margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.d-card:hover {
  border-color: var(--gold);
  border-right-color: var(--gold);
  box-shadow: var(--shadow-md);
}
.d-card-title { font-weight: 600; font-size: 1em; margin-bottom: 4px; }
.d-card-meta { font-size: 0.8em; color: var(--text-light); }

/* Entity type card borders */
.d-card-person { border-right-color: var(--c-person); }
.d-card-place { border-right-color: var(--c-place); }
.d-card-event { border-right-color: var(--c-event); }
.d-card-organization { border-right-color: var(--c-org); }
.d-card-topic { border-right-color: var(--c-topic); }

/* ═══ Buttons ═══ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border: none; border-radius: var(--radius);
  cursor: pointer; font-family: inherit; font-size: 0.9em;
  font-weight: 600; transition: var(--transition);
  white-space: nowrap;
}

.btn-primary { background: var(--ink); color: var(--gold-light); }
.btn-primary:hover { background: var(--ink-light); }

.btn-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--ink); box-shadow: 0 3px 12px rgba(201,150,59,0.3);
}
.btn-gold:hover { box-shadow: 0 4px 16px rgba(201,150,59,0.4); transform: translateY(-1px); }

.btn-success { background: var(--success); color: var(--cream); }
.btn-success:hover { opacity: 0.9; }

.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { opacity: 0.9; }

.btn-ghost {
  background: var(--card); border: 1px solid var(--border);
  color: var(--text-light);
}
.btn-ghost:hover { border-color: var(--gold-light); color: var(--text); }

.btn-sm { padding: 6px 12px; font-size: 0.8em; }
.btn-icon { padding: 8px; font-size: 1.1em; }

/* ═══ Inputs ═══ */
.d-input, .d-textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: inherit; font-size: 0.95em;
  background: var(--card); color: var(--text);
  direction: rtl; line-height: 1.6;
  transition: var(--transition);
}
.d-input:focus, .d-textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,150,59,0.15);
}
.d-textarea { min-height: 80px; resize: vertical; }

/* ═══ Mode Toggle ═══ */
.mode-toggle {
  display: flex; gap: 2px;
  background: var(--parchment); border-radius: var(--radius);
  padding: 3px; margin-bottom: 16px;
  border: 1px solid var(--border);
}
.mode-btn {
  flex: 1; padding: 10px; border: none; cursor: pointer;
  font-family: inherit; font-size: 0.9em; font-weight: 600;
  background: none; color: var(--text-light);
  border-radius: 8px; transition: var(--transition);
}
.mode-btn.active {
  background: var(--ink); color: var(--gold-light);
  box-shadow: var(--shadow-sm);
}

/* ═══ Fragment List ═══ */
.fragment-item {
  background: var(--card); border: 1px solid var(--border);
  border-right: 3px solid var(--gold-light);
  border-radius: var(--radius); padding: 10px 12px;
  margin-bottom: 6px;
  font-size: 0.9em; transition: var(--transition);
  cursor: pointer;
}
.fragment-item:hover { border-color: var(--gold); }
.frag-header {
  display: flex; align-items: center; gap: 8px;
}
.frag-preview {
  flex: 1; color: var(--text-light); font-size: 0.85em;
}
.frag-body {
  line-height: 1.5; margin-top: 8px; white-space: pre-wrap;
  padding-top: 8px; border-top: 1px solid var(--border);
}
.fragment-collapsed .frag-body { display: none; }
.frag-actions { display: flex; gap: 4px; flex-shrink: 0; }
.frag-actions button {
  background: none; border: none; cursor: pointer;
  font-size: 0.9em; padding: 2px 4px; opacity: 0.5;
  transition: var(--transition);
}
.frag-actions button:hover { opacity: 1; }
.frag-num {
  background: var(--gold); color: var(--ink);
  border-radius: 50%; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75em; font-weight: 700; flex-shrink: 0;
}
/* Legacy support */
.frag-text { flex: 1; line-height: 1.5; }

/* ═══ Admin Users Table ═══ */
.admin-users-table {
  width: 100%; border-collapse: collapse; font-size: 0.9em;
}
.admin-users-table th {
  text-align: right; padding: 8px 10px; font-weight: 600;
  border-bottom: 2px solid var(--border); color: var(--text-light);
  font-size: 0.85em;
}
.admin-users-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.admin-users-table tr:hover { background: var(--surface); }
.admin-user-actions {
  display: flex; gap: 2px; justify-content: center;
}
.admin-user-actions button {
  background: none; border: none; cursor: pointer;
  font-size: 1em; padding: 4px; border-radius: 4px;
  transition: var(--transition);
}
.admin-user-actions button:hover { background: var(--surface); }
.admin-user-actions .btn-danger-icon:hover { background: #fee; }

/* ═══ Desktop User Guide ═══ */
.guide-cat {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--card);
  border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 8px; cursor: pointer;
  border-right: 3px solid var(--gold-light);
  transition: var(--transition);
}
.guide-cat:hover { border-color: var(--gold); background: var(--surface); }
.guide-cat-icon { font-size: 1.2em; }
.guide-cat-title { flex: 1; font-size: 0.95em; font-weight: 600; }
.guide-cat-count {
  background: var(--gold-bg); color: var(--gold);
  padding: 2px 8px; border-radius: 10px;
  font-size: 0.75em; font-weight: 600;
}
.guide-cat-arrow { color: var(--text-light); font-size: 0.85em; }

.guide-screen {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: var(--card);
  border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 6px; cursor: pointer;
  transition: var(--transition);
}
.guide-screen:hover { background: var(--surface); border-color: var(--gold-light); }
.guide-screen-label { font-size: 0.9em; }

/* Desktop mockup frame */
.guide-viewer-desktop {
  --mk-cream: var(--cream);
  --mk-parchment: var(--parchment);
  --mk-gold-bg: var(--gold-bg);
  --mk-text: var(--text);
  --mk-text-light: var(--text-light);
  --mk-border: var(--border);
  --mk-gold: var(--gold);
  --mk-gold-light: var(--gold-light);
  --mk-success: var(--success);
  --mk-danger: var(--danger);
  --mk-danger-light: var(--danger-light);
  --mk-card: var(--card);
  --mk-surface: var(--surface);
  --mk-ink: var(--ink);
}
.guide-viewer-desktop .screen-header { margin: 0 0 8px; padding: 0; }
.guide-viewer-desktop .screen-title {
  font-size: 0.85em; font-weight: 600; color: var(--gold); margin-bottom: 2px;
}
.guide-viewer-desktop .screen-desc {
  font-size: 0.78em; color: var(--text-light); line-height: 1.5;
}

.desktop-wrap {
  position: relative; margin: 8px 0;
}
.desktop-frame {
  border: 2px solid var(--border); border-radius: 10px;
  overflow: hidden; background: var(--cream);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  font-size: 12px; direction: rtl;
}
/* Topbar: ☰ | logo+stats | actions (❓⚙️ user 🚪) */
.dk-topbar {
  background: #1a2332; color: var(--mk-cream);
  padding: 6px 12px; display: flex; align-items: center;
  gap: 8px; height: 36px;
  border-bottom: 2px solid var(--mk-gold);
}
.dk-topbar-logo { font-weight: 700; color: var(--mk-gold-light); font-size: 1.1em; }
.dk-topbar-stats { flex: 1; font-size: 0.8em; color: #8a9bb8; }
.dk-topbar-actions { display: flex; align-items: center; gap: 6px; font-size: 0.85em; }
/* Body: sidebar(R) | center(write/record) | left-panel(tabs) */
.dk-body { display: flex; height: 380px; }
/* Sidebar: icon column on the right (RTL) */
.dk-sidebar {
  width: 40px; background: #1e2a3a; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 0; gap: 4px; border-left: 1px solid #2a3a52;
}
.dk-sidebar-icon {
  width: 28px; height: 28px; display: flex; align-items: center;
  justify-content: center; border-radius: 6px; font-size: 13px;
  cursor: default;
}
.dk-sidebar-icon.active { background: var(--mk-gold-bg); }
.dk-sidebar-sep { flex: 1; }
/* Center panel: record/write/direct + draft + pipeline + clarifications */
.dk-center {
  flex: 1; overflow-y: auto; background: var(--mk-parchment);
  padding: 10px; min-width: 0;
}
/* Mode toggle */
.dk-mode-toggle {
  display: flex; justify-content: center; margin-bottom: 8px;
}
.dk-mode-btn {
  padding: 5px 14px; font-size: 0.85em; border: 1px solid var(--mk-border);
  background: var(--mk-card); cursor: default;
}
.dk-mode-btn:first-child { border-radius: 0 16px 16px 0; }
.dk-mode-btn:last-child { border-radius: 16px 0 0 16px; }
.dk-mode-btn.active {
  background: #1a2332; color: var(--mk-gold-light); border-color: #1a2332;
}
/* Panel divider */
.dk-divider {
  width: 3px; background: var(--mk-border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: default; position: relative;
}
.dk-divider-btn {
  position: absolute; font-size: 8px; color: var(--mk-text-light);
  background: var(--mk-card); border: 1px solid var(--mk-border);
  border-radius: 4px; padding: 2px 1px;
}
/* Left panel: tabs (graph/entities/history/query) */
.dk-left-panel {
  width: 280px; border-right: 1px solid var(--mk-border);
  overflow-y: auto; background: var(--mk-cream); flex-shrink: 0;
}
.dk-panel-tabs {
  display: flex; border-bottom: 1px solid var(--mk-border);
  background: var(--mk-parchment); flex-wrap: wrap;
}
.dk-panel-tab {
  padding: 6px 10px; font-size: 0.85em; cursor: default;
  border-bottom: 2px solid transparent;
}
.dk-panel-tab.active { border-bottom-color: var(--mk-gold); color: var(--mk-gold); font-weight: 600; }
/* Legacy: dk-right-panel maps to dk-center */
.dk-right-panel {
  flex: 1; overflow-y: auto; background: var(--mk-parchment);
  padding: 10px;
}

/* Desktop annotations */
.desktop-wrap .anno {
  position: absolute; font-size: 0.72em; line-height: 1.4;
  padding: 4px 8px; background: var(--gold-bg);
  border: 1px solid rgba(201,150,59,0.3); border-radius: 6px;
  color: var(--text); max-width: 180px; z-index: 2;
}
.desktop-wrap .anno.right { right: -190px; }
.desktop-wrap .anno.left { left: -190px; }
.desktop-wrap .anno.top { top: -40px; }
.desktop-wrap .anno.bottom { bottom: -40px; }

/* Annotation list (linear) */
.guide-anno-list-desktop {
  margin: 8px 0; padding: 12px 16px;
  background: var(--gold-bg);
  border: 1px solid rgba(201,150,59,0.3);
  border-radius: 8px;
}
.guide-anno-list-desktop .guide-anno-title {
  font-size: 0.85em; font-weight: 600;
  color: var(--gold); margin-bottom: 8px;
}
.guide-anno-list-desktop .guide-anno-item {
  font-size: 0.82em; color: var(--text);
  padding: 6px 0; border-bottom: 1px solid var(--border);
  line-height: 1.5;
}
.guide-anno-list-desktop .guide-anno-item:last-child { border-bottom: none; }

/* ═══ Pipeline Tracker ═══ */
.pipeline-section { display: none; margin-top: 16px; }
.pipeline-section.visible { display: block; }

.pipeline-steps {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; padding: 16px; direction: ltr;
  background: var(--card); border-radius: var(--radius);
  border: 1px solid var(--border);
}
.pipeline-step {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  cursor: pointer; padding: 6px 10px;
  border-radius: 8px; transition: var(--transition);
}
.pipeline-step:hover { background: var(--gold-bg); }

.step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7em; font-weight: 700;
  border: 2px solid var(--border); color: var(--text-light);
  transition: var(--transition);
}
.step-dot.pending { border-color: var(--border); color: var(--text-light); }
.step-dot.running { border-color: var(--gold); color: var(--gold); animation: pulse-step 1.5s infinite; }
.step-dot.success { border-color: var(--success); background: var(--success); color: white; }
.step-dot.error { border-color: var(--danger); background: var(--danger); color: white; }
.step-dot.warning { border-color: var(--gold); background: var(--gold); color: var(--ink); }
.step-dot.skipped { border-color: var(--border); background: var(--parchment); color: var(--text-light); }

.step-label { font-size: 0.65em; color: var(--text-light); white-space: nowrap; }

.step-arrow { color: var(--border); font-size: 0.8em; }

.module-details {
  display: none; margin-top: 8px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px;
  font-size: 0.85em;
}
.module-details.visible { display: block; }

/* ═══ Clarification Cards ═══ */
.clarification-section { display: none; margin-top: 16px; }
.clarification-section.visible { display: block; }

.clarification-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.clarification-header h3 { font-size: 1em; color: var(--ink); }

.clarification-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
  margin-bottom: 10px; box-shadow: var(--shadow-sm);
}
.clarification-card .q-text { font-weight: 600; margin-bottom: 8px; }
.clarification-card .q-type {
  display: inline-block; font-size: 0.7em; font-weight: 600;
  padding: 2px 8px; border-radius: 8px; margin-bottom: 6px;
}
.q-type-VALUE_CONFLICT { background: #fce4ec; color: #c62828; }
.q-type-STATE_CHANGE { background: #fff3e0; color: #e65100; }
.q-type-TEMPORAL_CONFLICT { background: #e3f2fd; color: #1565c0; }

.clarification-card .new-fact {
  background: var(--gold-bg); border-radius: 6px;
  padding: 8px; font-size: 0.85em; margin-bottom: 8px;
}
.clarification-card .old-facts { margin-bottom: 8px; }
.clarification-card .old-fact-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0; font-size: 0.85em;
}
.clarification-card .old-fact-item input[type="checkbox"] { accent-color: var(--gold); }

.clarification-card .actions {
  display: flex; gap: 8px; margin-top: 8px;
}
.clarification-card textarea {
  width: 100%; padding: 8px; border: 1px solid var(--border);
  border-radius: 8px; font-family: inherit; font-size: 0.85em;
  min-height: 40px; margin-bottom: 8px; resize: vertical;
}

/* ═══ Query / Chat ═══ */
.chat-messages {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.chat-bubble {
  max-width: 85%; padding: 10px 14px;
  border-radius: 14px; font-size: 0.9em; line-height: 1.5;
}
.chat-bubble.user {
  background: var(--ink); color: var(--gold-light);
  border-bottom-right-radius: 4px; align-self: flex-end;
}
.chat-bubble.bot {
  background: var(--card); border: 1px solid var(--border);
  color: var(--text); border-bottom-left-radius: 4px;
  align-self: flex-start;
  max-width: 100%; width: 100%;
}
.chat-input-row {
  display: flex; gap: 8px; padding: 8px 12px;
  border-top: 1px solid var(--border);
}
.chat-input-row textarea { flex: 1; color: var(--text); background: var(--card); font-family: inherit; }

/* Source citations */
.source-ref {
  background: var(--gold);
  color: var(--ink, #1a1a1e);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: 700;
  cursor: pointer;
}
.source-ref:hover { opacity: 0.8; }
.d-sources-section {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.d-sources-header {
  font-size: 0.8em;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 6px;
}
.d-source-item {
  border-bottom: 1px solid var(--border);
  padding: 6px 0;
  cursor: pointer;
}
.d-source-item:last-child { border-bottom: none; }
.d-source-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85em;
}
.source-tag {
  background: var(--gold);
  color: var(--ink, #1a1a1e);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: 700;
}
.d-source-title { flex: 1; font-weight: 500; }
.d-source-date { color: var(--text-light); font-size: 0.85em; }
.d-source-toggle { color: var(--text-light); font-size: 0.8em; }
.d-source-content {
  display: none;
  font-size: 0.85em;
  color: var(--text-light);
  padding: 8px 0 4px;
  white-space: pre-wrap;
  direction: rtl;
  unicode-bidi: plaintext;
  max-height: 250px;
  overflow-y: auto;
}
.d-source-cited { border-right: 3px solid var(--gold); padding-right: 6px; }
.source-tag-bg { background: var(--border); color: var(--text-light); }
.d-source-highlight {
  background: var(--gold-bg, rgba(232,182,97,0.15));
  transition: background 0.3s;
}

/* ═══ Entity List ═══ */
.entity-search {
  display: flex; gap: 8px; margin-bottom: 8px;
}
.entity-filters {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px;
}
.entity-filter-btn, .filter-btn {
  padding: 4px 10px; border: 1px solid var(--border);
  border-radius: 16px; font-size: 0.75em; font-weight: 600;
  background: var(--card); color: var(--text); cursor: pointer;
  font-family: inherit; transition: var(--transition);
}
.entity-filter-btn:hover, .filter-btn:hover { border-color: var(--gold-light); }
.entity-filter-btn.active, .filter-btn.active { background: var(--ink); color: var(--gold-light); border-color: var(--ink); }
html[data-theme="dark"] .entity-filter-btn, html[data-theme="dark"] .filter-btn { color: #8a8580; }
html[data-theme="dark"] .entity-filter-btn.active, html[data-theme="dark"] .filter-btn.active { color: var(--gold-light); }

.entity-card {
  background: var(--card); border: 1px solid var(--border);
  border-right: 3px solid var(--gold-light);
  border-radius: var(--radius); padding: 10px 12px;
  margin-bottom: 6px; cursor: pointer;
  transition: var(--transition);
}
.entity-card:hover { border-right-color: var(--gold); box-shadow: var(--shadow-md); }
/* Per-type card colour is set inline from ENTITY_TYPES (static/js/entity_types.js).
   Five rules stood here and covered five of the engine's thirteen types, so a
   `concept` card — 61% of them — fell back to the default gold and looked
   deliberate. One list, one place. */

.entity-card-header {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.entity-icon { font-size: 1em; }
.entity-name { font-weight: 700; font-size: 0.9em; flex: 1; }
.entity-summary {
  font-size: 0.8em; color: var(--text-light); line-height: 1.4;
  margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.entity-meta { font-size: 0.72em; color: var(--text-light); }

.entity-type-badge {
  font-size: 0.65em; font-weight: 700; padding: 1px 6px;
  border-radius: 6px; text-transform: uppercase;
}
.badge-person { background: #e3f2fd; color: var(--c-person); }
.badge-place { background: #e8f5e9; color: var(--c-place); }
.badge-event { background: #fff3e0; color: var(--c-event); }
.badge-organization { background: #f3e5f5; color: var(--c-org); }
.badge-topic { background: #fffde7; color: #f57f17; }

/* Entity detail (in-panel) */
.entity-detail { display: none; }
.entity-detail.visible { display: flex; flex-direction: column; flex: 1; }

.entity-detail-header {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.entity-detail-back {
  background: none; border: none; cursor: pointer;
  font-size: 1.1em; color: var(--gold); padding: 4px;
}
.entity-detail-name { font-size: 1.15em; font-weight: 700; flex: 1; }
.entity-detail-stats {
  display: flex; gap: 12px; margin-bottom: 12px;
}
.entity-stat {
  text-align: center; padding: 8px 12px;
  background: var(--parchment); border-radius: 8px;
}
.entity-stat-num { font-size: 1.3em; font-weight: 700; color: var(--gold); }
.entity-stat-label { font-size: 0.7em; color: var(--text-light); }

.entity-detail-tabs {
  display: flex; gap: 2px; margin-bottom: 10px;
}
.entity-detail-tab {
  padding: 6px 12px; border: none; cursor: pointer;
  font-family: inherit; font-size: 0.8em; font-weight: 600;
  background: var(--parchment); color: var(--text-light);
  border-radius: 6px; transition: var(--transition);
}
.entity-detail-tab.active { background: var(--ink); color: var(--gold-light); }

/* ═══ Fact rows (entity detail) ═══ */
.fact-row {
  padding: 10px 12px; background: var(--card);
  border: 1px solid var(--border); border-radius: 8px;
  margin-bottom: 6px; border-right: 3px solid var(--success);
}
.fact-row.invalid { opacity: 0.6; border-right-color: var(--danger); }
/* A retired fact stays in the list it was in — dimmed AND struck through, not
   hidden behind a separate view. Opacity alone reads as "loading" or "disabled";
   the line is what says «this was removed» at a glance. */
.fact-row.invalid .fact-text { text-decoration: line-through; text-decoration-thickness: 1px; }
.fact-text { font-size: 0.85em; line-height: 1.5; }
.fact-meta { font-size: 0.72em; color: var(--text-light); margin-top: 4px; }
.fact-source { font-size: 0.72em; color: var(--text-light); margin-top: 2px; }
/* THE EVIDENCE FOR THE SENTENCE ABOVE, or the admission that there is none.
   `.unsourced` is the only one that earns a colour: a fact the engine worded itself
   is a caveat on everything the reader is about to do with it, and it reads at a
   glance rather than on inspection. A recovered quote is fine and gets grey. */
.fact-citation { font-size: 0.72em; color: var(--text-light); margin-top: 3px; line-height: 1.5; }
.fact-citation.unsourced { color: #a5762a; }
.fact-citation-tag { opacity: 0.75; }
/* The post-ingest count. Lives inside #citation-report, which carries its own frame. */
.fact-row-header { display: flex; justify-content: space-between; align-items: flex-start; }
.fact-row-content { flex: 1; min-width: 0; }
.fact-report-btn {
  background: none; border: none; cursor: pointer;
  font-size: 0.8em; padding: 2px 6px; border-radius: 4px;
  opacity: 0; transition: opacity 0.2s; flex-shrink: 0;
}
.fact-row:hover .fact-report-btn { opacity: 0.6; }
.fact-report-btn:hover { opacity: 1 !important; background: var(--gold-bg); }
.fact-report-inner {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border);
}
.fact-report-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ═══ History ═══ */
.history-filters {
  display: flex; gap: 8px; margin-bottom: 10px;
  align-items: center;
}
.history-card {
  background: var(--card); border: 1px solid var(--border);
  border-right: 3px solid var(--gold-light);
  border-radius: var(--radius); padding: 12px 14px;
  margin-bottom: 8px; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.history-card:hover { border-right-color: var(--gold); box-shadow: var(--shadow-md); }
.history-card.deletion-event { border-right-color: var(--danger); opacity: 0.85; }
.history-card.deletion-event:hover { border-right-color: var(--danger); }
.history-card-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;
}
.history-date { font-size: 0.72em; color: var(--text-light); }
.history-meta { font-size: 0.72em; color: var(--text-light); }
.history-title {
  font-size: 0.88em; font-weight: 600; line-height: 1.4; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Episode/sub-episode actions (P2 skeleton — pending engine write-loop) */
.history-card-actions { display: flex; gap: 6px; margin-top: 8px; }
/* Read-only journal (e.g. חנה סנש): hide all write actions */
body.journal-ro .history-card-actions { display: none !important; }
body.journal-ro .fact-report-btn { display: none !important; }
.history-card-actions .btn { padding: 4px 10px; }
.btn.p2-skel { border-style: dashed; opacity: 0.85; }
.history-sub-badge {
  display: inline-block; margin-right: 6px; font-size: 0.7em; font-weight: 700;
  color: #ff4da6; background: rgba(255,77,166,0.15); padding: 1px 7px; border-radius: 8px;
}

/* ═══ Graph ═══ */
/* ═══ Info Popover ═══ */
.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--parchment); border: 1px solid var(--border);
  font-size: 0.7em; font-weight: 700; font-style: normal;
  cursor: pointer; position: relative; color: var(--text-light);
  vertical-align: middle; margin-right: 4px;
}
.info-btn:hover, .info-btn.active { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.info-popover {
  display: none; position: absolute; top: 100%; left: 0; right: auto;
  z-index: 200;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; min-width: 200px; max-width: 300px;
  box-shadow: var(--shadow-lg); margin-top: 6px;
  font-size: 0.85rem; text-align: right;
}
.info-popover.visible { display: block; }
.info-popover-title {
  font-weight: 700; font-size: 0.9em; margin-bottom: 6px;
  padding-bottom: 4px; border-bottom: 1px solid var(--border);
  color: var(--gold);
}
.info-popover-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 2px 0; font-size: 0.85em;
}
.info-popover-key { color: var(--text-light); white-space: nowrap; }
.info-popover-val { color: var(--text); font-weight: 500; text-align: left; word-break: break-all; }

.graph-controls {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.graph-zoom-btn {
  width: 32px; height: 32px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--card); color: var(--text); cursor: pointer;
  font-size: 1em; display: flex; align-items: center;
  justify-content: center; transition: var(--transition);
}
.graph-zoom-btn:hover { border-color: var(--gold); }
.graph-zoom-label { font-size: 0.8em; color: var(--text-light); min-width: 40px; text-align: center; }

.graph-fullscreen-btn {
  margin-right: auto; background: none; border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px; cursor: pointer;
  font-size: 0.8em; color: var(--text-light);
  font-family: inherit; transition: var(--transition);
}
.graph-fullscreen-btn:hover { border-color: var(--gold); color: var(--gold); }

.graph-container {
  flex: 1; min-height: 200px; overflow: hidden;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
}

/* When graph tab is active, expand left panel to full width */
.left-panel.graph-expanded {
  flex: 1 !important;
  width: auto !important;
  max-width: none !important;
}
.app-body.graph-mode .panel-divider {
  display: none !important;
}
.app-body.graph-mode .center-panel {
  display: none !important;
}

/* Graph fullscreen overlay */
.graph-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(26,35,50,0.9); display: none;
  flex-direction: column; padding: 20px;
}
.graph-overlay.visible { display: flex; }
.graph-overlay-close {
  align-self: flex-end; background: none; border: none;
  color: var(--gold-light); font-size: 1.5em; cursor: pointer;
  margin-bottom: 8px;
}
.graph-overlay .graph-container {
  flex: 1; border: none; border-radius: var(--radius-lg);
}

/* ═══ Toast ═══ */
.toast-container {
  position: fixed; top: 60px; left: 50%;
  transform: translateX(-50%); z-index: 2000;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  padding: 10px 20px; border-radius: var(--radius);
  font-size: 0.85em; font-weight: 600;
  box-shadow: var(--shadow-lg); animation: fadeIn 0.3s ease;
  display: flex; align-items: center; gap: 8px;
}
.toast-success { background: var(--success); color: white; }
.toast-error { background: var(--danger); color: white; }
.toast-info { background: var(--ink); color: var(--gold-light); }

/* ═══ Settings Overlay ═══ */
.settings-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(26,35,50,0.5);
  display: none; align-items: center; justify-content: center;
}
.settings-overlay.visible { display: flex; }
.settings-card {
  background: var(--card); border-radius: var(--radius-lg);
  padding: 24px; width: 500px; max-width: 90vw;
  max-height: 80vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.settings-card h2 { margin-bottom: 16px; color: var(--ink); }

.settings-section { margin-bottom: 20px; }
.settings-section-title {
  font-size: 0.85em; font-weight: 600; color: var(--gold-dark);
  padding: 8px 4px 6px; border-bottom: 1px solid var(--border); margin-bottom: 8px;
}
.setting-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--parchment);
}
.setting-info { flex: 1; }
.setting-desc { font-size: 0.85em; font-weight: 500; }
.setting-default { font-size: 0.72em; color: var(--text-light); }
.setting-control { display: flex; align-items: center; gap: 6px; }
.setting-input {
  width: 70px; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 6px; font-family: inherit; font-size: 0.85em;
  text-align: center; background: var(--card); color: var(--text);
}
.setting-reset {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; cursor: pointer; font-size: 0.9em;
  color: var(--text-light); transition: var(--transition);
}
.setting-reset:hover { border-color: var(--danger); color: var(--danger); }
.btn-save-settings {
  width: 100%; padding: 12px; margin-top: 12px; border: none;
  border-radius: 8px; background: var(--gold); color: var(--ink);
  font-size: 0.9em; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: var(--transition);
}
.btn-save-settings:hover { background: var(--gold-dark); }

/* ═══ Section Headers ═══ */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.section-title {
  font-size: 1.05em; font-weight: 700; color: var(--ink);
}
.section-badge {
  background: var(--gold); color: var(--ink);
  font-size: 0.7em; font-weight: 700;
  padding: 1px 8px; border-radius: 8px;
}

/* ═══ Batch Panel ═══ */
.batch-panel {
  background: var(--gold-bg); border: 1px solid var(--gold-light);
  border-radius: var(--radius); padding: 14px;
  margin-bottom: 12px; display: none;
}
.batch-panel.visible { display: block; }

/* ═══ Blast Radius (Episode Delete) ═══ */
.blast-panel {
  background: var(--danger-light); border: 1px solid var(--danger);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
}
.blast-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 12px;
}
.blast-stat {
  text-align: center; padding: 8px; border-radius: 6px;
  background: var(--card-bg);
}
.blast-stat .number { font-size: 1.5em; font-weight: bold; }
.blast-stat.danger .number { color: var(--danger); }
.blast-stat.safe .number { color: var(--success); }
.blast-facts-list { max-height: 200px; overflow-y: auto; }
.blast-fact {
  padding: 6px 8px; border-bottom: 1px solid var(--border);
  font-size: 0.9em;
}
.blast-fact.orphan { color: var(--danger); opacity: 0.7; }
.blast-fact.shared { color: var(--success); background: rgba(90,143,92,0.15); border-radius: 6px; font-weight: 600; }
.blast-actions {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px;
}
.blast-actions .btn {
  padding: 8px 20px; font-size: 0.95em; font-weight: 600;
}

/* ═══ Draft Editor ═══ */
.draft-editor { display: none; margin-top: 12px; }
.draft-editor.visible { display: block; }

.draft-editor-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}

/* ═══ Recording ═══ */
.record-area { text-align: center; padding: 20px; }
.record-btn {
  width: 72px; height: 72px; border-radius: 50%;
  border: 3px solid var(--gold);
  background: linear-gradient(145deg, var(--cream) 0%, var(--parchment) 100%);
  cursor: pointer; font-size: 1.8em;
  box-shadow: 0 4px 20px rgba(201,150,59,0.2),
              inset 0 2px 4px rgba(201,150,59,0.1),
              0 0 0 8px rgba(201,150,59,0.08);
  transition: all 0.3s;
}
.record-btn:hover { transform: scale(1.05); box-shadow: 0 6px 25px rgba(201,150,59,0.35); }
.record-btn.recording {
  background: var(--gold); border-color: var(--danger);
  animation: pulse 1.5s infinite;
}
.record-timer {
  font-size: 1.3em; font-weight: 700;
  color: var(--gold); margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.record-hint { font-size: 0.8em; color: var(--text-light); margin-top: 4px; }

/* ═══ Scrollbar ═══ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-light); }

/* ═══ Animations ═══ */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,150,59,0.4); }
  50% { box-shadow: 0 0 0 20px rgba(201,150,59,0); }
}
@keyframes pulse-step {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ Processing Overlay ═══ */
.processing-overlay {
  position: absolute; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
}
.processing-overlay.hidden { display: none !important; }
.processing-content { text-align: center; padding: 40px; }
/* A COLUMN: the sentence naming the current stage, then the row of dots under it.
   It was a `flex-wrap` ROW when the six fake dots lived here and they were its only
   children. Adding a full-width sentence and a nested row to that turned the dots into a
   vertical stack pushed out of the overlay — a nested flex row inside a shrink-to-fit
   wrapping row has no width to lay itself out in. Caught on screen, not by a test:
   nothing here asserts geometry, and the markup was correct the whole time. */
.processing-steps {
  display: flex; flex-direction: column; align-items: center; margin-top: 12px;
}
.processing-now {
  margin-bottom: 10px; color: var(--text); font-size: 0.9em;
}
.processing-dots {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.processing-step {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 0.75em; color: var(--text-light); min-width: 50px;
}
.processing-step .step-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--border); transition: background 0.3s;
}
.processing-step .step-dot.active {
  background: var(--gold); box-shadow: 0 0 8px var(--gold);
}
.processing-step .step-dot.done { background: var(--success); }
.processing-step .step-dot.error { background: var(--danger); }
.loading-spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--border); border-top-color: var(--gold);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}

/* inline spinner shown inside a button while its action is running */
.btn-spinner {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin 0.7s linear infinite;
  vertical-align: -1px; margin-inline-end: 5px;
}
.btn:disabled { cursor: progress; opacity: .7; }

/* ═══ Utilities ═══ */
.hidden { display: none !important; }
.text-gold { color: var(--gold); }
.text-muted { color: var(--text-light); }
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.gap-8 { gap: 8px; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* ═══ API status banner (no_journal / engine unreachable) ═══
   Injected by static/js/api_status.js. Fixed strip under the topbar; RTL like
   the rest of the app. Colours come from the theme vars, so dark mode is
   inherited from html[data-theme="dark"] with no extra rules. */
.api-status-banner {
  display: none;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  font-size: 0.88em;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.api-status-banner.visible { display: flex; }
.api-status-banner .api-status-text { flex: 1; line-height: 1.5; }

/* In flow as body's first child, not fixed. `html, body` are height:100% with
   overflow:hidden, so a fixed strip would sit on top of the panels, and a
   100vh .app-layout pushed down would have its bottom clipped outright. body is
   already a flex column, so while the banner is up the app pane stops being a
   rigid 100vh and takes whatever is left. api_status.js toggles the class. */
body.api-status-open .app-layout {
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* no_journal: actionable, not a failure — gold/informational, never red. */
.api-status-banner.is-warn {
  background: var(--gold-bg);
  color: var(--text);   /* not --ink: that stays dark in dark mode (it is a chrome bg) */
  border-bottom-color: rgba(201, 150, 59, 0.35);
}
/* engine down: a real fault, but upstream and transient. */
.api-status-banner.is-error {
  background: var(--danger-light);
  color: var(--text);   /* not --ink: that stays dark in dark mode (it is a chrome bg) */
  border-bottom-color: rgba(181, 74, 74, 0.35);
}

.api-status-banner .api-status-action {
  flex: none;
  padding: 4px 14px;
  border-radius: var(--radius);
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.api-status-banner.is-warn .api-status-action { color: var(--gold); }
.api-status-banner.is-error .api-status-action { color: var(--danger); }
.api-status-banner .api-status-action:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
}
.api-status-banner .api-status-action:disabled { opacity: 0.6; cursor: default; }

.api-status-banner .api-status-close {
  flex: none;
  border: none;
  background: transparent;
  color: var(--text-light);
  font-size: 1em;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}
.api-status-banner .api-status-close:hover { color: var(--text); }

/* ═══ Timeline tab ═══ */
#tab-timeline { gap: 0; }
.tl-body { flex: 1; min-height: 0; overflow-y: auto; padding-left: 4px; }
.tl-body-full {
  background: var(--cream); border-radius: var(--radius-lg);
  padding: 18px 22px; height: calc(100vh - 80px);
}

.tl-h {
  font-family: 'David Libre', serif; font-size: 1.02em; font-weight: 700;
  color: var(--text); margin: 22px 0 4px;
}
.tl-h:first-of-type { margin-top: 14px; }
.tl-sub { font-size: 0.82em; color: var(--text-light); line-height: 1.6; margin: 0 0 10px; }

.tl-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.tl-stat {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 12px; min-width: 92px;
}
.tl-stat b { display: block; font-size: 1.35em; line-height: 1.25; color: var(--text); }
.tl-stat span { font-size: 0.72em; color: var(--text-light); }
.tl-stat.warn b { color: var(--danger); }

.tl-meter {
  height: 24px; border-radius: 6px; overflow: hidden;
  display: flex; border: 1px solid var(--border);
}
.tl-meter-default {
  background: repeating-linear-gradient(135deg,
    rgba(122,112,104,.25) 0 5px, transparent 5px 11px), var(--parchment);
  display: flex; align-items: center; justify-content: center;
}
.tl-meter-default span {
  background: var(--card); border-radius: 999px; padding: 1px 12px;
  font-size: 0.74em; color: var(--text); white-space: nowrap;
}

.tl-scroll { overflow-x: auto; margin: 6px 0; }
.tl-scroll::-webkit-scrollbar { height: 5px; }
.tl-scroll::-webkit-scrollbar-thumb { background: rgba(201,150,59,.5); border-radius: 4px; }
.tl-fig {
  display: block; min-width: 620px; width: 100%; height: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
}

.tl-axis, .tl-tick { stroke: var(--text-light); stroke-width: 1; }
.tl-epline { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
.tl-tlabel { fill: var(--text-light); font-size: 10px; text-anchor: middle; }
.tl-eplabel { fill: var(--text-light); font-size: 11px; text-anchor: middle; }
.tl-eplabel.tl-answer { fill: var(--gold); }
.tl-count { fill: var(--text); font-size: 10.5px; font-weight: 700; text-anchor: middle; }
.tl-expr { fill: var(--text-light); font-size: 10px; direction: rtl; }
.tl-drift { stroke: var(--danger); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .75; }
.tl-win { fill: var(--gold); opacity: .45; }
.tl-stored { fill: var(--danger); }

.tl-legend, .tl-svg-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 4px; }
.tl-key {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.76em; color: var(--text-light);
}
.tl-key i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.tl-key i.tl-dot-stored { background: var(--danger); }
.tl-key i.tl-dot-win { background: var(--gold); opacity: .55; border-radius: 2px; }

.tl-note {
  background: var(--gold-bg); border-right: 3px solid var(--gold);
  padding: 8px 12px; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.79em; color: var(--text); line-height: 1.6; margin: 6px 0 0;
}

.tl-table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 0.78em; }
.tl-table th, .tl-table td {
  border-bottom: 1px solid var(--border); padding: 5px 8px;
  text-align: right; vertical-align: top;
}
.tl-table th { color: var(--text-light); font-weight: 600; font-size: 0.92em; white-space: nowrap; }
.tl-table tbody tr:hover { background: var(--gold-bg); }
/* Dates and ranges are LTR runs inside an RTL table — isolate them or BiDi
   reorders "from → to" on screen and the arrow reads backwards. */
.tl-mono {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.94em; white-space: nowrap;
  direction: ltr; unicode-bidi: isolate; text-align: right;
}
.tl-kind { display: block; font-size: 0.85em; color: var(--text-light); }
.tl-claim { color: var(--text-light); }
.tl-mult {
  display: inline-block; margin-inline-start: 4px; padding: 0 5px;
  border-radius: 999px; background: var(--gold-bg); border: 1px solid var(--gold-light);
  color: var(--text-light); font-size: 0.88em;
}

/* Timeline: episode filter + per-fact inspection */
.tl-chips { margin-bottom: 6px; }
.tl-chips .filter-btn { font-weight: 500; }
.tl-filtered {
  font-size: 0.78em; color: var(--text-light); margin: 0 0 8px;
}
.tl-filtered a { font-weight: 600; }

.tl-pick { cursor: default; }
.tl-dot { opacity: .82; cursor: pointer; transition: opacity .12s; }
.tl-dot:hover { opacity: 1; }
.tl-dot.tl-sel { stroke: var(--text); stroke-width: 1.6; opacity: 1; }
.tl-eplabel[data-ep] { cursor: pointer; }
.tl-eplabel[data-ep]:hover { fill: var(--gold); font-weight: 700; }

.tl-tip {
  position: fixed; z-index: 900; display: none; pointer-events: none;
  max-width: 340px; padding: 7px 11px; border-radius: 8px;
  background: var(--ink); color: var(--cream);
  border: 1px solid var(--gold-light); box-shadow: var(--shadow-lg);
  font-size: 0.78em; line-height: 1.5; direction: rtl;
}
.tl-tip b { color: var(--gold-light); }

.tl-detail { margin: 8px 0 4px; }
.tl-detail-empty {
  font-size: 0.78em; color: var(--text-light);
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 10px 12px; text-align: center;
}
.tl-detail-card {
  position: relative;
  background: var(--card); border: 1px solid var(--gold-light);
  border-right: 3px solid var(--gold);
  border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-sm);
}
.tl-detail-close {
  position: absolute; top: 6px; left: 8px;
  background: none; border: none; color: var(--text-light);
  font-size: 0.95em; cursor: pointer; font-family: inherit; padding: 2px 4px;
}
.tl-detail-close:hover { color: var(--danger); }
.tl-claim-big {
  font-size: 1.02em; line-height: 1.55; color: var(--text);
  margin: 0 0 10px; padding-left: 22px;
}
.tl-mark { background: var(--gold-bg); border-bottom: 2px solid var(--gold); color: inherit; padding: 0 2px; }
.tl-drow {
  font-size: 0.79em; color: var(--text); line-height: 1.7;
  border-top: 1px solid var(--border); padding-top: 4px; margin-top: 4px;
}
.tl-drow > span:first-child {
  display: inline-block; min-width: 108px; color: var(--text-light);
}
.tl-drow em { color: var(--text-light); }
.tl-arrow { color: var(--text-light); }
.tl-swatch {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block; margin-inline-end: 5px;
}

.tl-trow { cursor: pointer; }
.tl-trow.tl-sel, .tl-table tbody tr.tl-sel { background: var(--gold-bg); }

/* Timeline: notes on a fact */
.tl-notes { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
.tl-note-item {
  font-size: 0.79em; line-height: 1.6; color: var(--text);
  background: var(--parchment); border-right: 3px solid var(--gold-light);
  border-radius: 0 8px 8px 0; padding: 6px 10px; margin-bottom: 6px;
}
.tl-note-item b { color: var(--text-light); font-weight: 600; margin-inline-end: 4px; }

.tl-note-form { margin-top: 4px; }
.tl-note-modes { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.tl-note-time {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 0.78em; color: var(--text-light); margin-bottom: 8px;
}
.tl-note-time label { display: flex; align-items: center; gap: 5px; }
.tl-note-time .d-input { width: auto; padding: 4px 8px; }
.tl-nt-check { cursor: pointer; }
.tl-note-form .d-textarea { width: 100%; padding: 8px 10px; font-size: 0.85em; }
.tl-note-buttons { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
#tl-nt-status { font-size: 0.78em; }
.tl-note-hint {
  font-size: 0.74em; color: var(--text-light); line-height: 1.6; margin-top: 8px;
}
.tl-note-hint code {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.94em;
  background: var(--parchment); padding: 0 4px; border-radius: 4px;
}

.tl-dot.tl-noted { stroke: var(--gold); stroke-width: 1.6; }
.tl-dot.tl-asked { stroke: var(--text-light); stroke-width: 1.2; stroke-dasharray: 2 1.6; }
.tl-dot.tl-sel { stroke: var(--text); stroke-dasharray: none; }
.tl-key i.tl-ring-note {
  background: transparent; border: 2px solid var(--gold); box-sizing: border-box;
}
.tl-key i.tl-ring-ask {
  background: transparent; border: 2px dashed var(--text-light); box-sizing: border-box;
}

/* ═══ Clarification mode tabs ═══
   These reuse .panel-tabs/.panel-tab so they are literally the same control as the
   גרף · ציר זמן · ספר bar — that shared vocabulary is what tells the reader the panel
   is about to be replaced. Only the two things that differ from the main bar are set
   here: each tab takes half the width (there are exactly two, and a page-switcher that
   hugs its labels reads as a pair of buttons), and the type is a step up because this
   bar sits inside a panel rather than at the top of one. */
.clar-mode-tabs { margin: 10px 0 12px; padding: 0; }
.clar-mode-tabs .panel-tab { flex: 1; font-size: 0.95em; font-weight: 600; padding: 10px 14px; }

/* «נוצרה מפיצול» — provenance of a node that was separated out of another one, with
   the way back on it. It sits under the entity name because that is where a writer
   looking at two nodes sharing one name is already looking, and because the undo
   token the engine minted at the split is gone by the time anyone reconsiders. */
.split-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 6px 0 10px; padding: 6px 10px;
  background: var(--gold-bg); border-radius: 8px;
  font-size: 0.78em; color: var(--text-light);
}
.split-undo-btn {
  margin-inline-start: auto; padding: 3px 10px;
  background: transparent; border: 1px solid var(--border); border-radius: 12px;
  font-size: 1em; font-family: inherit; color: var(--text); cursor: pointer;
}
.split-undo-btn:hover { background: var(--card); }

/* «הצג גם N עובדות שהוסרו» — above the facts list, not inside the toolbar with the
   filters that fetch. This one only changes what is already on the page. */
.retired-filter {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 8px; padding: 5px 8px;
  font-size: 0.8em; color: var(--text-light); cursor: pointer;
}
.retired-filter input { cursor: pointer; accent-color: var(--gold); }
.retired-all-note { padding: 14px 8px; font-size: 0.85em; color: var(--text-light); }

/* Why the badge above this panel counts more than the «הכל» pill inside it. Directly
   under the pills, because that is where the two numbers are read one after the other. */
.clar-elsewhere {
  margin: 0 0 8px; padding: 6px 10px;
  border-inline-start: 3px solid var(--border); border-radius: 0 6px 6px 0;
  font-size: 0.75em; line-height: 1.5; color: var(--text-light);
}

/* ═══ The manual split: a process, not a button ═══════════════════════════════
   The visual rules carry the same weight as the code ones:
     · the HINT is highlighted and NOT selected — a border, never a fill;
     · a decided row recedes, so what is left to do is what stands out;
     · the counter is the state of the work, and turns green only at complete. */
.split-open-btn {
    margin-inline-start: auto;
    background: none; border: 1px solid var(--border);
    border-radius: 6px; padding: 4px 10px;
    font-size: 0.85em; color: var(--text-light); cursor: pointer;
}
.split-open-btn:hover { border-color: var(--gold); color: var(--gold); }

.split-card { max-width: 900px; width: 92vw; max-height: 88vh; display: flex; flex-direction: column; }
.split-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.split-head h2 { margin: 0; font-size: 1.1em; }

.split-targets-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.split-chip {
    padding: 3px 10px; border-radius: 999px;
    background: var(--parchment); border: 1px solid var(--border); font-size: 0.85em;
}
.split-chip.origin { border-color: var(--gold); color: var(--gold); }
.split-name-input {
    padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 0.85em; min-width: 160px;
}
.split-hint-note { font-size: 0.78em; color: var(--text-light); margin: 8px 0 4px; }

.split-rows { overflow-y: auto; flex: 1; margin: 4px 0 12px; }
.split-group { margin-bottom: 14px; }
.split-group-head {
    font-size: 0.85em; font-weight: 600; padding: 4px 0;
    border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.split-group-date { font-weight: 400; color: var(--text-light); }

.split-row {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 7px 4px; border-bottom: 1px dashed var(--border);
}
/* Decided rows recede rather than disappear: she must be able to see a decision
   again to change it, and a row that vanished would look like work lost. */
.split-row.decided { opacity: 0.55; }
.split-row-text { flex: 1; font-size: 0.88em; line-height: 1.5; }
.split-row-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.split-role {
    display: inline-block; margin-inline-end: 6px; padding: 1px 6px;
    border-radius: 4px; background: var(--parchment);
    font-size: 0.78em; color: var(--text-light);
}
.split-other { color: var(--text-light); }
.split-written { color: var(--gold); font-weight: 600; }

.split-opt {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 6px; font-size: 0.83em;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
}
/* THE HINT. An outline, never a fill and never a checked radio — the difference
   between «the entry said this» and «the system decided this» is the whole
   operation, and it has to be visible at a glance. */
.split-opt.hint { border-color: var(--gold); }
.split-opt.chosen { background: var(--gold); color: #fff; }

.split-foot {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--border); padding-top: 10px;
}
.split-foot-actions { display: flex; gap: 8px; }
.split-counter { font-size: 0.9em; color: var(--text-light); }
.split-counter.done { color: var(--success); font-weight: 600; }
.split-hint-note.warn { color: var(--danger); }

/* ═══ The zero-token sandbox ═══════════════════════════════════════════════════
   The expectation is styled as prominently as the description, because reading it
   BEFORE pressing «הרץ» is what makes the run a check rather than a demo. */
.sandbox-note { font-size: 0.8em; color: var(--text-light); margin-bottom: 10px; line-height: 1.5; }
.sandbox-card {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 10px; margin-bottom: 8px;
}
.sandbox-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sandbox-what { font-size: 0.83em; color: var(--text-light); margin-top: 6px; line-height: 1.5; }
.sandbox-expect {
    font-size: 0.83em; margin-top: 6px; line-height: 1.5;
    padding: 6px 8px; border-radius: 6px;
    background: var(--gold-bg); border-inline-start: 3px solid var(--gold);
}
.sandbox-status { font-size: 0.83em; margin-top: 8px; line-height: 1.5; }

/* The type picker on the entity card. Sized to sit beside the badge rather than under
   it: the badge says what the engine decided and the select says it can be changed, and
   splitting them across two lines reads as two separate facts about the node. */
.type-picker {
  font-size: 0.72em; padding: 2px 6px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  cursor: pointer; max-width: 11em;
}
.type-picker:disabled { opacity: 0.5; cursor: progress; }

/* The type-review list on the entities screen. Collapsed by default: the screen is for
   reading the graph, and a correction queue opened over it every visit turns a journal
   into a form. */
.type-review { margin: 6px 0 10px; }
.type-review-head {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; font-size: 0.82em; color: var(--text);
  cursor: pointer; text-align: start; font-family: inherit;
}
.type-review-caret { opacity: 0.6; }
/* Never dimmed to the point of being skippable: «22 to check» without «79 never looked
   at» says the rest of the graph is fine, and it is not. */
.type-review-note { opacity: 0.75; font-size: 0.92em; }
.type-review-body {
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 10px 10px; padding: 4px 0;
}
/* ONE LINE PER ROW. The first version wrapped: `flex-wrap: wrap` with a `flex: 1 1 auto`
   reason pushed the picker onto its own line on every row long enough to matter, so
   twenty-one questions were forty-two lines and the control the writer is looking for
   moved up and down the row depending on how long the entity's name was. The reason is
   the part that can be cut — it repeats — so it is the part that truncates. */
.type-review-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  padding: 7px 12px; border-bottom: 1px solid var(--border);
}
.type-review-row:last-child { border-bottom: none; }
.type-review-row.answered { opacity: 0.55; }
/* THE SEPARATOR MOVES UP TO THE ITEM once a row has sentences under it. Left on the row,
   the line drew BETWEEN a name and its own quotes — which reads as the sentences
   belonging to the next question down, on a screen whose entire point is that they
   belong to this one. */
.type-review-item { border-bottom: 1px solid var(--border); }
.type-review-item:last-child { border-bottom: none; }
.type-review-item > .type-review-row { border-bottom: none; padding-bottom: 2px; }
.type-review-sents { padding: 0 12px 8px; }
/* Adjacent sibling rather than `:has`, so the sentences dim with the row they belong to
   on the browsers this app is actually opened in. */
.type-review-row.answered + .type-review-sents,
.type-review-row.dropped + .type-review-sents { opacity: 0.55; }
.type-review-ask { font-size: 0.72em; opacity: 0.6; margin: 2px 0 4px; }
/* WRAPPED, unlike everything else in this panel. The name and the reason truncate because
   they repeat and a glance is enough; a sentence is the thing being judged, and half of
   one is not a smaller version of the question. */
.type-review-sent {
  font-size: 0.78em; line-height: 1.5; opacity: 0.9;
  padding: 1px 0 1px 0; border-inline-start: 2px solid var(--border);
  padding-inline-start: 8px; margin-bottom: 3px;
}
.type-review-sent.more { opacity: 0.55; font-size: 0.72em; border-color: transparent; }
/* WHAT THE PRESS DOES NOT TAKE, set apart from what it does. Filtering is on the subject
   end alone, so these stay whatever she answers — and a list showing only the losses
   makes every press look bigger than it is. Seven exist across the twelve live
   questions, and on four rows they are most of the context there is. */
.type-review-stays { margin-top: 6px; padding-top: 4px; border-top: 1px dashed var(--border); }
.type-review-stays .type-review-sent { opacity: 0.62; }
/* NOT IN QUOTATION MARKS AND MARKED, because `inferred` is the engine's own wording in a
   quote field. Attributing it to the writer on the screen that asks «are these your
   words?» is the one thing this row must never do. */
.type-review-sent.paraphrase { font-style: italic; }
.type-review-prov { font-size: 0.82em; opacity: 0.6; font-style: normal; }
.type-review-where {
  display: block; font-size: 0.78em; opacity: 0.5; font-style: normal; margin-top: 1px;
}
.type-review-mute {
  padding: 2px 12px 6px; font-size: 0.76em; opacity: 0.72; line-height: 1.7;
}
.type-review-mute-note { padding: 0 12px 8px; font-size: 0.7em; opacity: 0.6; line-height: 1.5; }
/* «הצג במקור ▾». Quiet and inline: 5 of 20 sentences need it and 15 do not, so it must
   not compete with the two controls that decide the row. */
.type-review-src-btn {
  background: none; border: none; color: var(--accent, #3498db);
  cursor: pointer; font-size: 0.72em; padding: 1px 4px; margin-inline-start: 4px;
  text-decoration: underline; font-family: inherit;
}
.type-review-src-btn:disabled { opacity: 0.4; cursor: default; text-decoration: none; }
/* The entry itself, and it keeps its line breaks — the diary is written in paragraphs and
   reflowing it into one block is a different text from the one she wrote. Bounded and
   scrollable so an entry of any length cannot push the next question off the screen. */
.type-review-src {
  white-space: pre-wrap; font-size: 0.76em; line-height: 1.7; opacity: 0.85;
  max-height: 15em; overflow-y: auto; margin: 4px 0 2px;
  padding: 8px 10px; border-radius: 6px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid var(--border);
}
.type-review-src mark {
  background: color-mix(in srgb, var(--accent, #3498db) 30%, transparent);
  color: inherit; border-radius: 3px; padding: 0 2px;
}
/* THE NAME IS THE LAST THING TO SHRINK, and that is the whole point of these two
   rules. The row carries two controls now, and with the name at `max-width: 45%` and
   the reason at `flex: 1 1 auto` the free space went to the REASON: on a narrow panel
   «הונגרית» rendered as «הו…» beside a fully legible «חוזר ביותר מרשומה…». A list of
   questions whose subject is unreadable is not a list of questions.
   The shrink factors say which one gives way: the reason yields 8x faster, so it
   ellipsises to nothing before the name loses its first letter. */
.type-review-name {
  font-weight: 600; font-size: 0.86em; flex: 1 1 auto; min-width: 4em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.type-review-why {
  font-size: 0.74em; opacity: 0.7; flex: 0 8 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.type-review-row .type-picker { flex: 0 0 auto; }
/* The two answers sit together at the end of the row, and the row stays ONE LINE — the
   earlier version wrapped every row in two the moment a second control appeared. */
.type-review-act { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* AND ITS CHILDREN DO NOT SHRINK EITHER. `flex: 0 0 auto` on the group stops the GROUP
   giving way; inside it the buttons still defaulted to `flex: 0 1 auto`, so on an 800px
   panel «לא שייכים» measured 59px and painted 41 — «לא שיי…», a control whose label the
   writer cannot read. A button is not the reason text: it does not repeat, and half of it
   is not a shorter version of it. The name above has `min-width: 4em` and an ellipsis and
   is the thing designed to give way. */
.type-review-act > * { flex: 0 0 auto; }
/* «זו לא ישות». Deliberately quiet rather than red: it is reversible, and a destructive
   colour on an undoable press reads as a warning the writer then learns to ignore. */
.type-review-drop {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: inherit; opacity: 0.65; cursor: pointer;
  font-size: 0.72em; padding: 3px 8px; white-space: nowrap;
}
.type-review-drop:hover { opacity: 1; }
.type-review-drop:disabled { opacity: 0.3; cursor: default; }
/* «✓ אשר». The affirmative press, so it reads as one — the rejection beside it is
   deliberately quiet. Shown only while a proposal is unconfirmed. */
.type-review-ok {
  background: none; border: 1px solid var(--accent, #3498db); border-radius: 6px;
  color: var(--accent, #3498db); cursor: pointer;
  font-size: 0.72em; padding: 3px 8px; white-space: nowrap;
}
.type-review-ok:disabled { opacity: 0.4; cursor: default; }
/* THE ONLY THING ON THE ROW SAYING «NOBODY HAS CONFIRMED THIS». A pre-filled select
   looks exactly like a saved one, and a writer who reads a proposal she agrees with and
   scrolls on would believe she had answered it. The outline comes off on confirm. */
.type-picker-proposed {
  border-style: dashed !important; border-width: 1.5px !important;
  border-color: var(--accent, #3498db) !important; opacity: 0.85;
}
/* A rejected row keeps its place, like an answered one — see `mountReviewRow`. Struck
   through rather than removed, so she can see what she just did. */
.type-review-row.dropped .type-review-name { text-decoration: line-through; opacity: 0.6; }
.type-review-gone { font-size: 0.72em; opacity: 0.6; white-space: nowrap; }
.type-review-undo {
  background: none; border: none; color: var(--accent, #3498db);
  cursor: pointer; font-size: 0.74em; padding: 2px 4px; text-decoration: underline;
}
.type-review-dropped-head {
  padding: 8px 12px 4px; font-size: 0.74em; opacity: 0.7;
  border-top: 1px solid var(--border);
}
.type-review-foot { padding: 8px 12px; font-size: 0.72em; opacity: 0.7; line-height: 1.5; }

/* A toast that waits to be read needs a way to be closed, and a target big enough to
   press without aiming. */
.toast { cursor: pointer; }
.toast-close {
  background: none; border: none; color: inherit; opacity: 0.75;
  font-size: 1.05em; line-height: 1; cursor: pointer; padding: 0 2px; margin-inline-start: 4px;
}
.toast-close:hover { opacity: 1; }