/* ════════════════════════════════════════════
   MELLIO — Design System
════════════════════════════════════════════ */
:root {
  --ink:         #16140e;
  --ink-2:       #46423a;
  --ink-3:       #969086;
  --cream:       #faf7f2;
  --cream-2:     #f2ece0;
  --cream-3:     #e6dece;
  --line:        #dbd4c6;
  --line-lt:     #ede8de;
  --white:       #ffffff;
  --green:       #1a4a38;
  --green-2:     #256348;
  --green-lt:    #e8f2ec;
  --green-rule:  #b8d4c4;
  --amber:       #c47c2a;
  --amber-lt:    #fdf3e4;
  --danger:      #b84130;
  --danger-light:#fef2f2;
  --serif:       'Fraunces', serif;
  --sans:        'DM Sans', sans-serif;
  --mono:        'JetBrains Mono', monospace;

  /* Compat aliases */
  --bg: var(--cream);
  --surface: var(--white);
  --surface-hover: var(--cream-2);
  --border: var(--line);
  --border-light: var(--line-lt);
  --text: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --accent: var(--green);
  --accent-light: var(--green-lt);
  --accent-hover: var(--green-2);
  --handoff-action: var(--ink);
  --success: var(--green);
  --success-light: var(--green-lt);
  --shadow-sm: 0 1px 2px rgba(22,20,14,0.04);
  --shadow-md: 0 4px 16px rgba(22,20,14,0.08);
  --shadow-lg: 0 8px 32px rgba(22,20,14,0.12);
  --radius: 10px;
  --radius-sm: 6px;
  --transition: 0.15s ease;

  /* Role colors */
  --role-data: #f0fdf4; --role-data-border: #86efac; --role-data-text: #166534;
  --role-header: #eff6ff; --role-header-border: #93c5fd; --role-header-text: #1e40af;
  --role-spanheader: #fefce8; --role-spanheader-border: #fde047; --role-spanheader-text: #854d0e;
  --role-sectiontitle: #faf5ff; --role-sectiontitle-border: #c084fc; --role-sectiontitle-text: #6b21a8;
  --role-stub: #fff7ed; --role-stub-border: #fdba74; --role-stub-text: #9a3412;
  --role-delete: #fef2f2; --role-delete-border: #fca5a5; --role-delete-text: #991b1b;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--cream); }
body { font-family: var(--sans); background: var(--cream); color: var(--ink); min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.03em; }
button, input, select, textarea { font-family: var(--sans); }

/* ── View switcher ── */
.view { display: none; }
.view.on { display: block; }
/* Limit reflow scope when switching sections — the browser can confine
   layout/paint work to inside each view container instead of cascading
   across the whole document. Free perf win on every section switch. */
#editor, #hub { contain: layout paint; }
#tableMode, #statsMode, #figureMode, #writerMode { contain: layout paint; }

/* ════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════ */
.btn {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  border-radius: 6px; padding: 8px 18px;
  cursor: pointer; border: none; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.15s; white-space: nowrap;
}
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.btn-ghost:hover { background: var(--cream-2); }
.btn-green-outline { background: transparent; border: 1px solid var(--green); color: var(--green); }
.btn-green-outline:hover { background: var(--green); color: #fff; }
.btn-solid { background: var(--green); color: white; }
.btn-solid:hover { background: var(--green-2); }
.btn-lg { font-size: 14px; padding: 11px 22px; }
.btn-ai { background: var(--green-lt); color: var(--green); border: 1px solid var(--green-rule); }
.btn-ai:hover { background: #d6ebe0; }
.btn-ai-sm { color: var(--green) !important; }


/* ════════════════════════════════════════════
   APP SHELL
════════════════════════════════════════════ */
.app-wrap { height: 100vh; display: flex; overflow: hidden; }

/* Left rail */
.rail {
  width: 56px; background: var(--ink); display: flex; flex-direction: column;
  align-items: center; padding: 14px 0; gap: 2px; flex-shrink: 0; z-index: 50;
}
.rail-brand {
  font-family: var(--serif); font-size: 14px; font-weight: 600;
  font-style: italic; color: white; letter-spacing: -0.02em;
  margin-bottom: 16px; cursor: pointer;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.rail-brand span { color: #7fc4b0; }
.ri {
  width: 38px; height: 38px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: rgba(255,255,255,0.35); font-size: 16px;
  border: none; background: none; transition: all 0.15s; position: relative;
}
.ri:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); }
.ri.active { background: #4a6886; color: white; }
.ri-tip {
  position: absolute; left: 50px; top: 50%; transform: translateY(-50%);
  background: var(--ink); color: white; font-size: 11px; font-weight: 500;
  padding: 4px 10px; border-radius: 5px; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 200;
  border: 1px solid rgba(255,255,255,0.1);
}
.ri:hover .ri-tip { opacity: 1; }
.rail-div { width: 28px; height: 1px; background: rgba(255,255,255,0.08); margin: 6px 0; }
.rail-sp { flex: 1; }

/* Help button — Mellio green, bigger, entrance pulse */
.ri.ri-help {
  color: #7fc4b0;
  width: 42px; height: 42px;
  animation: helpPulse 2s ease 1.5s both;
}
.ri-help-icon {
  font-family: var(--serif); font-weight: 600; font-style: italic;
  font-size: 22px; line-height: 1;
}
.ri.ri-help:hover { color: #a8dece; background: rgba(127,196,176,0.12); }
@keyframes helpPulse {
  0%   { transform: scale(1); }
  15%  { transform: scale(1.25); }
  30%  { transform: scale(1); }
  45%  { transform: scale(1.18); }
  60%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* App main area */
.app-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }


/* ════════════════════════════════════════════
   EDITOR
════════════════════════════════════════════ */
#editor .view { display: block; }
#editor .app-wrap { height: 100vh; }

/* Mode containers */
#tableMode { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#figureMode { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
/* Match tableMode/figureMode: a proper flex column container so children
   that use `height: 100%` (notably .stats-card-view) have a determinate
   parent height to resolve against. Previously this was `block + overflow-y: auto`,
   which made height: 100% resolve circularly — the child collapsed to 0
   height until a resize forced a relayout. Inner scrolling lives in
   .editor-body (line 9925), so overflow: hidden here is safe. */
#statsMode { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* Top bar */
.e-top {
  height: 44px; background: var(--cream); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; padding: 0 32px; gap: 16px; flex-shrink: 0;
  position: sticky; top: 0; z-index: 10;
}
.e-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6a6460; padding-right: 16px; border-right: none; }
.e-breadcrumb span { font-family: system-ui, sans-serif; font-size: 14px; font-weight: 700; color: #3a3530; }
.e-breadcrumb svg { color: #c5bfb5; }
.e-breadcrumb strong { font-family: system-ui, sans-serif; color: #6a6460; font-weight: 400; font-size: 13px; }
.e-stepper { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.e-st {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: #8a8070; cursor: pointer;
  padding: 3px 10px; border-radius: 20px;
  transition: all 0.15s;
}
.e-st.done { color: var(--ink-2); }
.e-st.active {
  background: #2d5a27; color: white;
}
.e-st-n {
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  background: #c5bfb5; color: #8a8070; flex-shrink: 0;
}
.e-st.done .e-st-n { background: var(--green); color: white; }
.e-st.active .e-st-n { background: rgba(255,255,255,0.25); color: white; }
.e-st-info { display: flex; flex-direction: column; }
.e-st-label { font-family: system-ui, sans-serif; font-weight: 500; font-size: 11px; }
.e-st-sub { font-family: system-ui, sans-serif; font-size: 10px; color: #8a8070; font-weight: 300; }
.e-st.active .e-st-sub { color: rgba(255,255,255,0.6); }
.e-st-conn { width: 0; height: 0; margin: 0; background: none; }
.e-top-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Smart Repair button — only visible in Step 2 */
.smart-repair-btn {
  display: none; /* hidden by default (Step 1) */
  font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #2d5a27 0%, #3a7a32 50%, #2d5a27 100%);
  background-size: 200% 200%;
  border: none; border-radius: 20px;
  padding: 6px 16px; cursor: pointer;
  align-items: center; gap: 5px;
  box-shadow: 0 1px 4px rgba(45,90,39,0.3), 0 0 8px rgba(45,90,39,0.15);
  transition: box-shadow 0.2s, transform 0.15s, background-position 0.4s;
  animation: smartRepairShimmer 3s ease-in-out infinite;
}
@keyframes smartRepairShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.smart-repair-btn:hover {
  box-shadow: 0 2px 8px rgba(45,90,39,0.4), 0 0 14px rgba(45,90,39,0.2);
  transform: translateY(-1px);
}
.smart-repair-btn:active { transform: translateY(0); }
.smart-repair-btn:disabled { opacity: 0.6; cursor: default; box-shadow: none; animation: none; }
.app-main.is-edit .smart-repair-btn { display: inline-flex; }

/* Cycling text animation for AI Parse hint */
.cycle-text {
  display: inline-block;
  height: 1.2em;
  overflow: hidden;
  vertical-align: middle;
}
.cycle-text .cycle-line {
  display: block;
  height: 1.2em;
  line-height: 1.2em;
  animation: cycleSlide 4s ease-in-out infinite;
}
.cycle-text.paused .cycle-line { animation: none; }
@keyframes cycleSlide {
  0%, 42%   { transform: translateY(0); }
  50%, 92%  { transform: translateY(-100%); }
  100%      { transform: translateY(0); }
}

.btn-xs {
  font-family: var(--sans); font-size: 12px; font-weight: 400;
  padding: 6px 12px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--line); background: var(--white); color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 5px; transition: all 0.1s;
}
.btn-xs:hover { background: var(--cream-2); }
.btn-xs-green {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  padding: 6px 14px; border-radius: 4px; cursor: pointer;
  border: none; background: var(--green); color: white;
  display: flex; align-items: center; gap: 5px; transition: all 0.1s;
}
.btn-xs-green:hover { background: var(--green-2); }

/* Step panels */
.step-panel { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.step-panel.active { display: flex; }

/* Options bar */
.e-opts-bar {
  height: auto; min-height: 40px; background: var(--cream-2); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; padding: 6px 14px; gap: 10px; flex-shrink: 0; flex-wrap: wrap;
}
.ob-group { display: flex; align-items: center; gap: 6px; padding-right: 10px; border-right: 1px solid var(--line); }
.ob-group:last-of-type { border-right: none; }
.ob-label { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.ob-sel {
  font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: 4px;
  padding: 4px 8px; cursor: pointer;
}
select.ob-sel { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23969086'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; padding-right: 20px; }
.ob-check { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.ob-check input { accent-color: var(--green); }
.ob-spacer { flex: 1; }
.ob-wide { flex: 1; min-width: 120px; }

/* Toolbar */
.e-toolbar {
  height: 34px; background: var(--white); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; padding: 0 10px; gap: 2px; flex-shrink: 0;
}
.tb {
  font-family: var(--sans); font-size: 11.5px; font-weight: 400;
  color: var(--ink-2); background: transparent; border: 1px solid transparent;
  border-radius: 3px; padding: 3px 8px; cursor: pointer; white-space: nowrap; transition: all 0.1s;
  display: inline-flex; align-items: center; gap: 4px;
}
.tb:hover { background: var(--cream-2); border-color: var(--line); }
.tb.red { color: var(--danger); }
.tb-sep { width: 1px; height: 14px; background: var(--line); margin: 0 3px; }
.tb-sp { flex: 1; }
.tb-ghost { font-family: var(--sans); font-size: 11.5px; color: var(--ink-3); background: none; border: none; cursor: pointer; padding: 3px 7px; }
.tb-ai-fix { color: var(--green) !important; font-weight: 500; }
.tb-ai-fix:hover { background: var(--green-lt) !important; border-color: var(--green-rule) !important; }

/* AI strip */
.e-ai {
  background: var(--green-lt); border-bottom: 1px solid var(--green-rule);
  padding: 7px 14px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.e-ai-l { display: flex; align-items: center; gap: 8px; }
.e-ai-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.e-ai-title { font-size: 12px; font-weight: 500; color: var(--green); }
.e-ai-sub { font-size: 11px; font-weight: 300; color: var(--green-2); margin-left: 3px; }
.e-ai-r { display: flex; gap: 6px; }
.e-ai-clr { font-family: var(--sans); font-size: 11px; background: white; color: var(--ink-2); border: 1px solid var(--line); border-radius: 3px; padding: 4px 9px; cursor: pointer; }

/* Table header section (cover sheet above grid) */
.e-table-header {
  background: var(--white); border-bottom: 1px solid var(--line);
  padding: 10px 14px 8px; flex-shrink: 0;
}
.e-th-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.e-th-row:last-child { margin-bottom: 0; }
.e-th-group { display: flex; align-items: center; gap: 6px; }
.e-th-grow { flex: 1; }
.e-th-grow input { flex: 1; width: 100%; }

/* Body: grid + resize handle + preview (stacked vertically) */
.e-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.e-grid-panel { flex: 0 0 auto; display: flex; flex-direction: column; overflow: hidden; position: relative; min-height: 80px; max-height: 60vh; }
.e-grid-scroll { flex: 1; overflow: auto; background: var(--cream); padding-bottom: 72px; /* ~3 empty rows of breathing room */ }

/* Resize handle between grid and preview */
.e-resize-handle {
  height: 8px; flex-shrink: 0; cursor: ns-resize;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}
.e-resize-handle:hover, .e-resize-handle.active { background: var(--green-lt); }
.e-resize-line {
  width: 32px; height: 2px; border-radius: 1px; background: var(--ink-3); opacity: 0.4;
}
.e-resize-handle:hover .e-resize-line { opacity: 0.7; background: var(--green); }

/* Preview panel (full width, below grid) */
.e-preview { flex: 1; min-height: 120px; display: flex; flex-direction: column; overflow: hidden; background: var(--cream); }
.e-prev-head { padding: 10px 14px; background: var(--cream-2); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.e-prev-left { display: flex; align-items: center; gap: 8px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #4caf7d; animation: pulse 2s infinite; }
.e-prev-label { font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.e-prev-body { flex: 1; overflow: auto; padding: 24px; background: var(--cream); }

/* Paper effect for preview content */
.live-preview-frame {
  background: var(--white); max-width: 720px; margin: 0 auto;
  padding: 32px 36px; border-radius: 4px;
  box-shadow: 0 1px 4px rgba(22,20,14,0.08), 0 4px 16px rgba(22,20,14,0.04);
  min-height: 120px;
}

/* Bottom drawer */
.e-drawer { border-top: 1px solid var(--line); background: var(--white); flex-shrink: 0; }
.e-drawer-tabs {
  display: flex; align-items: center; height: 34px; border-bottom: 1px solid var(--line);
  background: var(--cream-2); padding: 0 10px; gap: 2px;
}
.dt {
  font-family: var(--sans); font-size: 11.5px; font-weight: 400; color: var(--ink-3);
  background: none; border: none; padding: 0 10px; height: 100%; cursor: pointer;
  border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 5px;
}
.dt.active { color: var(--green); border-bottom-color: var(--green); font-weight: 500; }
.dt-cnt { font-size: 9.5px; font-weight: 500; background: var(--green-lt); color: var(--green); padding: 1px 6px; border-radius: 8px; }
.dt-sp { flex: 1; }
.dt-toggle { font-family: var(--sans); font-size: 11px; color: var(--ink-3); background: none; border: none; cursor: pointer; padding: 3px 8px; }
.e-drawer-body { height: 180px; overflow-x: auto; overflow-y: hidden; padding: 12px 14px; }
.drawer-cards { display: flex; gap: 12px; height: 100%; align-items: stretch; transition: gap 0.2s ease; cursor: grab; }

/* Drawer cards */
.dc-card {
  min-width: 200px; max-width: 220px; flex-shrink: 0;
  background: var(--white); border: 1.5px solid var(--line); border-radius: 8px;
  overflow: hidden; cursor: pointer; transition: all 0.18s ease;
  display: flex; flex-direction: column; position: relative;
}
.dc-card:hover {
  border-color: var(--green-rule);
  box-shadow: 0 4px 18px rgba(26,74,56,0.14), 0 0 0 2px rgba(26,74,56,0.06);
  transform: translateY(-2px) scale(1.02);
}
.dc-card-head {
  padding: 7px 10px; border-bottom: 1px solid var(--line-lt); background: var(--cream-2);
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.dc-card-name { font-size: 11px; font-weight: 500; color: var(--ink); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-badge-num { font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--green); background: var(--green-lt); border: 1px solid var(--green-rule); padding: 1px 6px; border-radius: 3px; flex-shrink: 0; }
.dc-badge-style { font-family: var(--mono); font-size: 9px; color: var(--ink-3); background: var(--cream-3); padding: 1px 5px; border-radius: 3px; flex-shrink: 0; }
.dc-card-body { flex: 1; overflow: hidden; padding: 6px 8px; min-height: 60px; }
.dc-mini-table { transform: scale(0.25); transform-origin: top left; pointer-events: none; max-height: 200px; overflow: hidden; }
.dc-fig-thumb { max-width: 100%; max-height: 60px; object-fit: contain; display: block; margin: 0 auto; }
.dc-mini-text { font-size: 10px; line-height: 1.4; color: var(--ink-2); overflow: hidden; max-height: 60px; }
.dc-card-foot { padding: 5px 10px; font-size: 10px; color: var(--ink-3); border-top: 1px solid var(--line-lt); flex-shrink: 0; }

/* Currently editing badge */
.dc-card.dc-editing { border-color: var(--green); border-width: 2px; }
.dc-editing-badge { font-size: 9px; font-weight: 600; color: white; background: var(--green); padding: 1px 7px; border-radius: 10px; flex-shrink: 0; }

/* Delete icon on hover */
.dc-card-delete {
  position: absolute; bottom: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 4px;
  background: var(--white); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity 0.15s;
  color: var(--ink-3); z-index: 2;
}
.dc-card:hover .dc-card-delete { opacity: 1; }
.dc-card-delete:hover { background: #fde8e8; color: #c0392b; border-color: #c0392b; }

/* Drag to reorder */
.dc-card { cursor: grab; }
.dc-card:active { cursor: grabbing; }
.dc-card.dc-dragging { opacity: 0.4; cursor: grabbing; }

/* Force grabbing cursor everywhere during custom drag (overrides all child cursors) */
body.custom-dragging, body.custom-dragging * { cursor: grabbing !important; }

.dc-card.dc-drag-over { border-color: var(--green); box-shadow: 0 0 0 2px rgba(45,90,39,0.15); }

/* Expand gaps between cards during drag for better drop guidance */
.drawer-cards.dc-drag-active { gap: 24px; cursor: grabbing; }

.dc-drop-indicator {
  width: 6px; min-height: 40px; flex-shrink: 0; border-radius: 3px;
  background: var(--green); align-self: stretch; pointer-events: none;
  margin: 0 2px;
  box-shadow: 0 0 8px rgba(26, 74, 56, 0.45);
  animation: dc-indicator-pulse 1s ease-in-out infinite;
}
@keyframes dc-indicator-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(26, 74, 56, 0.45); }
  50%      { box-shadow: 0 0 14px rgba(26, 74, 56, 0.7); }
}

/* Tray folder pills */
.tray-folder-pills { display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto; }
.tray-pill {
  font-family: system-ui, sans-serif; font-size: 11px; font-weight: 500;
  padding: 3px 12px; border-radius: 20px; border: 1px solid var(--line);
  background: transparent; color: var(--ink-3); cursor: pointer;
  white-space: nowrap; transition: all 0.15s;
}
.tray-pill:hover { background: var(--cream-2); }
.tray-pill.active { background: var(--green); color: white; border-color: var(--green); }

/* Bottom bar */
.e-bottom {
  height: 44px; background: var(--white); border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; padding: 0 14px; flex-shrink: 0;
}
.e-bot-r { display: flex; gap: 7px; }

/* Export dropdown */
.export-wrap { position: relative; }
.export-menu {
  position: absolute; bottom: 44px; right: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(22,20,14,0.14); min-width: 220px; z-index: 100;
}
.em-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px;
  cursor: pointer; border-bottom: 1px solid var(--line-lt); transition: background 0.1s;
}
.em-item:last-child { border-bottom: none; }
.em-item:hover { background: var(--cream-2); }
.em-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.em-name { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.em-desc { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.em-item.special { background: var(--green-lt); }
.em-item.special .em-name { color: var(--green); }
.em-item.special:hover { background: #daeee5; }


/* ════════════════════════════════════════════
   PASTE STEP
════════════════════════════════════════════ */
#step-paste {
  padding: 12vh 40px 70px; max-width: 700px; margin: 0 auto; width: 100%;
  justify-content: flex-start; align-items: stretch; overflow-y: auto;
}
/* .paste-icon kept — Figures dropzone reuses it. */
.paste-icon { margin-bottom: 12px; display: flex; align-items: center; justify-content: center; }

.parse-status { margin-top: 12px; font-size: 12px; color: var(--ink-3); }


/* ════════════════════════════════════════════
   STEP 2: EDIT & EXPORT — Scoped Redesign
════════════════════════════════════════════ */

/* Scroll area fills available space */
#step-edit .edit-scroll {
  flex: 1; overflow: auto;
  background: var(--cream);
}

/* Centered content column */
#step-edit .edit-content {
  max-width: 700px; margin: 0 auto; width: 100%; min-width: fit-content;
  padding: 12vh 32px 160px;
}

/* ── Style Controls Row ── */
#step-edit .style-controls {
  display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 36px;
}
#step-edit .sc-group {
  display: flex; flex-direction: column; gap: 4px;
}
#step-edit .sc-label {
  font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600;
  color: #8a8070; text-transform: uppercase; letter-spacing: 0.06em;
}
#step-edit .sc-label em { font-style: italic; }
#step-edit .sc-select-wrap {
  position: relative; display: inline-flex;
}
#step-edit .sc-select {
  font-family: system-ui, sans-serif; font-size: 13px; font-weight: 400;
  color: #3a3530; background: #f5f2eb;
  border: 1.5px solid #d4cec4; border-radius: 8px;
  padding: 5px 28px 5px 10px;
  appearance: none; -webkit-appearance: none;
  cursor: pointer; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#step-edit .sc-select:focus {
  border-color: rgba(45,90,39,0.4);
  box-shadow: 0 0 0 1.5px rgba(45,90,39,0.15);
}
#step-edit .sc-chevron {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: #8a8070; pointer-events: none;
}
#step-edit .sc-icon-btn {
  background: #f5f2eb; border: 1.5px solid #d4cec4; border-radius: 8px;
  padding: 5px 8px; cursor: pointer; color: #6a6460;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
#step-edit .sc-icon-btn:hover {
  background: #ebe7de; border-color: #c5bfb5;
}
#step-edit .sc-icon-btn.active {
  background: rgba(45,90,39,0.1); border-color: rgba(45,90,39,0.3); color: #2d5a27;
}

/* ── Label Picker ── */
.label-swatch {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid #b0aaa0; background: transparent; transition: all 0.15s;
}
.label-swatch[data-color]:not([data-color=""]) { border-color: transparent; }
.label-picker {
  position: absolute; top: 100%; left: 0; margin-top: 6px;
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px; display: flex; gap: 6px; z-index: 30;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.lp-color {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: all 0.12s; flex-shrink: 0; padding: 0;
}
.lp-color:hover { transform: scale(1.15); }
.lp-color.active { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px #6a6460; }
.lp-none {
  background: #f5f2eb; border: 1.5px solid #d4cec4; position: relative;
}
.lp-none::after {
  content: ''; position: absolute; top: 50%; left: -1px; right: -1px;
  height: 1.5px; background: #c0392b; transform: rotate(-45deg);
}

/* ── Card Color Label Stripe ── */
.dc-card[data-label] { border-left: 3.5px solid var(--card-label); }
#tableMode .saved-tray .dc-card[data-label] { border-left: 3.5px solid var(--card-label); }
.hcard[data-label] { border-left: 3.5px solid var(--card-label); }

/* ── Table Number + Title ── */
#step-edit .table-meta {
  margin-bottom: 18px;
}
#step-edit .table-num-row {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 4px; margin-left: 8px;
}
#step-edit .table-num-label {
  font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600;
  color: #6a6460; letter-spacing: 0.06em;
}
#step-edit .table-num-input {
  width: 36px; font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600;
  color: #6a6460;
}
#step-edit .table-title-input {
  width: 100%; font-family: 'Georgia', serif; font-size: 15px; font-style: italic;
  color: #2a2520; line-height: 1.4; margin-left: 8px;
}

/* ── Editable Field Component ── */
#step-edit .edit-field {
  background: transparent; border: none; outline: none;
  padding: 4px 8px; margin: 0 -8px;
  border-radius: 6px; transition: all 0.15s;
  font-family: inherit; font-size: inherit; color: inherit;
}
#step-edit .edit-field:hover {
  background: rgba(45, 90, 39, 0.05);
  box-shadow: 0 0 0 1.5px rgba(45,90,39,0.15);
}
#step-edit .edit-field:focus {
  background: rgba(45, 90, 39, 0.05);
  box-shadow: 0 0 0 1.5px rgba(45,90,39,0.35);
}
#step-edit .edit-field::placeholder { color: #9a9490; }

/* ── Paper Card (overrides .paper-editor / .paper-surface) ── */
#step-edit .paper-editor {
  flex: none; overflow: visible; padding: 0;
  background: transparent;
  display: block; position: relative;
  margin-bottom: 0;
}
#step-edit .paper-surface {
  background: #fdfcf8; min-width: 100%; width: fit-content;
  padding: 32px 40px 18px; border-radius: 14px;
  box-shadow: 0 2px 4px rgba(70,55,25,0.08), 0 8px 24px rgba(70,55,25,0.08);
  min-height: 200px; position: relative; border: 2px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#step-edit .paper-surface.drop-target-active {
  border-color: var(--green);
  box-shadow: 0 0 0 4px var(--green-lt), 0 2px 4px rgba(70,55,25,0.08), 0 8px 24px rgba(70,55,25,0.08);
}
#fig-step-edit .fig-preview-surface.drop-target-active {
  border: 2px solid var(--green);
  box-shadow: 0 0 0 4px var(--green-lt);
  border-radius: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.paper-drop-overlay {
  position: absolute; inset: 0; z-index: 100;
  background: rgba(46, 96, 69, 0.08);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: all;
}
.paper-drop-label {
  background: var(--green); color: white;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  padding: 8px 20px; border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* Paper surface editable fields — match EditableField spec */
#step-edit .paper-surface .paper-label,
#step-edit .paper-surface .paper-title,
#step-edit .paper-surface .paper-note,
#step-edit .paper-surface .paper-source {
  padding: 4px 8px; margin-left: -8px; margin-right: -8px;
  border-radius: 6px; transition: all 0.15s;
  background: transparent;
}
#step-edit .paper-surface .paper-label:hover,
#step-edit .paper-surface .paper-title:hover,
#step-edit .paper-surface .paper-note:hover,
#step-edit .paper-surface .paper-source:hover {
  background: rgba(45, 90, 39, 0.05);
  box-shadow: 0 0 0 1.5px rgba(45,90,39,0.15);
}
#step-edit .paper-surface .paper-label:focus,
#step-edit .paper-surface .paper-title:focus,
#step-edit .paper-surface .paper-note:focus,
#step-edit .paper-surface .paper-source:focus {
  background: rgba(45, 90, 39, 0.05);
  box-shadow: 0 0 0 1.5px rgba(45,90,39,0.35);
}
/* Paper surface table typography */
#step-edit .paper-surface .paper-table {
  font-family: 'Georgia', serif; font-size: 13px; color: #2a2520;
  min-width: 620px;
}
#step-edit .paper-surface .paper-cell {
  font-family: 'Georgia', serif; font-size: 13px;
  padding: 5px 8px;
}

/* ── Note Field (below paper) ── */
#step-edit .note-field-wrap {
  margin-top: 32px;
}
#step-edit .note-textarea {
  width: 100%; min-height: 24px; resize: none;
  font-family: system-ui, sans-serif; font-size: 13px; font-weight: 400;
  color: #3a3530; line-height: 1.6;
  overflow: hidden;
}

/* ── Source Field ── */
#step-edit .source-field-wrap {
  margin-top: 12px;
}
#step-edit .source-input {
  width: 100%;
  font-family: system-ui, sans-serif; font-size: 13px;
  color: #3a3530;
}

/* ── Formatting Options (collapsible) ── */
#step-edit .formatting-section {
  margin-top: 28px;
}
#step-edit .formatting-toggle {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 4px 0;
}
#step-edit .formatting-arrow {
  font-size: 9px; color: #9a9490;
  display: inline-block; transition: transform 0.2s;
}
#step-edit .formatting-arrow.open {
  transform: rotate(90deg);
}
#step-edit .formatting-toggle-label {
  font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600;
  color: #8a8070; letter-spacing: 0.05em;
}
#step-edit .formatting-panel {
  background: #f0ece3; border: 1px solid #ddd8ce; border-radius: 10px;
  padding: 18px 24px; margin-top: 12px;
}
#step-edit .fmt-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px;
}
#step-edit .fmt-option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 0; cursor: pointer;
}
#step-edit .fmt-checkbox {
  width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px;
  border-radius: 3px; cursor: pointer;
  accent-color: #2d5a27;
}
#step-edit .fmt-text {
  display: flex; flex-direction: column;
}
#step-edit .fmt-label {
  font-family: system-ui, sans-serif; font-size: 13px; font-weight: 400;
  color: #3a3530; line-height: 1.3;
}
#step-edit .fmt-desc {
  font-family: system-ui, sans-serif; font-size: 12px; font-weight: 400;
  color: #9a9490; line-height: 1.4; margin-top: 2px;
}

/* ── Bottom Bar (fixed) ── */
#tableMode .e-bottom {
  position: fixed; bottom: 0; left: 56px; right: 0;
  height: 50px; background: var(--cream); border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; z-index: 20;
}
#tableMode .eb-btn {
  font-family: system-ui, sans-serif; font-size: 13px; font-weight: 400;
  color: #6a6460; background: transparent;
  border: 1px solid #c5bfb5; border-radius: 8px;
  padding: 6px 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: all 0.15s;
}
#tableMode .eb-btn:hover { background: rgba(0,0,0,0.03); }
#tableMode .eb-btn-green {
  font-family: system-ui, sans-serif; font-size: 13px; font-weight: 500;
  color: white; background: #2d5a27;
  border: none; border-radius: 8px;
  padding: 6px 18px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: all 0.15s;
}
#tableMode .eb-btn-green:hover { background: #245020; }
#tableMode .eb-center {
  position: absolute; left: 50%; transform: translateX(-50%);
}
#tableMode .eb-tray-toggle {
  font-family: system-ui, sans-serif; font-size: 13px; font-weight: 600;
  color: #3a3530; background: none; border: none;
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 4px 8px;
}
#tableMode .eb-tray-badge {
  font-family: system-ui, sans-serif; font-size: 10px; font-weight: 600;
  color: white; background: #2d5a27;
  padding: 1px 7px; border-radius: 10px;
}
#tableMode .eb-tray-arrow {
  font-size: 16px; color: #9a9490; line-height: 1;
}
#tableMode .eb-right {
  display: flex; gap: 8px; align-items: center;
}

/* ── Saved Tables Tray ── */
#tableMode .saved-tray {
  position: fixed; bottom: 50px; left: 56px; right: 0;
  height: 160px;
  background: var(--cream); border-top: 1px solid var(--line);
  padding: 14px 32px 12px; z-index: 19;
  display: flex; flex-direction: column;
}

/* Tray resize handle — sits on top edge */
.tray-resize-handle {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: ns-resize; z-index: 3;
}
.tray-resize-pill {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--line); transition: all 0.15s;
}
.tray-resize-handle:hover .tray-resize-pill,
.tray-resize-handle.tray-dragging .tray-resize-pill {
  background: var(--ink-3); width: 44px;
}
#tableMode .saved-tray .saved-tray-body {
  overflow-x: auto; overflow-y: hidden;
  flex: 1; min-height: 0;
}
#tableMode .saved-tray .drawer-cards {
  display: flex; gap: 8px; align-items: start; height: 100%;
}
/* Override drawer card styles inside tray */
#tableMode .saved-tray .dc-card {
  min-width: calc(210px * var(--tray-scale, 1)); max-width: calc(240px * var(--tray-scale, 1));
  background: #fdfcf8; border: 1px solid #d4cec4; border-radius: 8px;
  padding: 4px 4px;
  box-shadow: 0 2px 8px rgba(70,55,25,0.08);
  display: flex; flex-direction: column;
}
#tableMode .saved-tray .dc-card-head {
  border-bottom: none; background: transparent; padding: 0 0 4px;
}
#tableMode .saved-tray .dc-card-name {
  font-family: system-ui, sans-serif; font-size: 10px; font-weight: 600; color: #3a3530;
}
#tableMode .saved-tray .dc-badge-style {
  font-size: 9px; color: #9a9490;
}
#tableMode .saved-tray .dc-card-body {
  padding: 0; min-height: 0; max-height: calc(80px * var(--tray-scale, 1)); overflow: hidden;
}
#tableMode .saved-tray .dc-mini-table {
  width: calc(200% / var(--tray-scale, 1));
  transform: scale(calc(0.5 * var(--tray-scale, 1))); transform-origin: top left;
}
#tableMode .saved-tray .dc-card-foot {
  font-size: 9px; color: #b0aaa0; border-top: none; padding: 4px 0 0; margin-top: 4px;
}

/* Export menu positioning for fixed bottom bar */
#tableMode .export-wrap { position: relative; }
#tableMode .export-menu {
  position: absolute; bottom: 44px; right: 0;
  background: #fdfcf8; border: 1px solid #d4cec4; border-radius: 8px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(70,55,25,0.14); min-width: 220px; z-index: 100;
}


/* ════════════════════════════════════════════
   PAPER EDITOR (WYSIWYG table editing)
════════════════════════════════════════════ */
.paper-editor {
  flex: 1; overflow-y: auto; padding: 24px;
  background: var(--cream);
  display: flex; justify-content: center; align-items: flex-start;
  position: relative;
}
.paper-surface {
  background: var(--white); max-width: 760px; width: 100%;
  padding: 40px 48px; border-radius: 4px;
  box-shadow: 0 1px 4px rgba(22,20,14,0.08), 0 4px 16px rgba(22,20,14,0.04);
  min-height: 200px; position: relative;
}

/* Label + title on the paper */
.paper-surface .paper-label,
.paper-surface .paper-title,
.paper-surface .paper-note,
.paper-surface .paper-source {
  outline: none; cursor: text;
  border-radius: 3px; transition: background 0.15s;
  padding: 2px 4px; margin-left: -4px; margin-right: -4px;
}
.paper-surface .paper-label:hover,
.paper-surface .paper-title:hover,
.paper-surface .paper-note:hover,
.paper-surface .paper-source:hover {
  background: rgba(250, 247, 242, 0.4);
}
.paper-surface .paper-label:focus,
.paper-surface .paper-title:focus,
.paper-surface .paper-note:focus,
.paper-surface .paper-source:focus {
  background: var(--green-lt);
  box-shadow: inset 0 0 0 1px var(--green-rule);
}

/* Editable table cells */
.paper-surface:focus { outline: none; }
.paper-surface .paper-cell {
  cursor: default; outline: none;
  transition: background 0.12s;
  border-radius: 0;
  min-width: 32px;
  position: relative;
  border: none;
  user-select: none;
  -webkit-user-select: none;
}
.paper-surface .paper-cell:hover {
  background: rgba(250, 247, 242, 0.6);
}

/* Cell drag grip — three small dots stacked, matches the three-line
   grip language at a smaller scale. Appears on cell hover. */
.cell-drag-grip {
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  width: 10px;
  height: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px 0;
  opacity: 0;
  cursor: grab;
  border-radius: 3px;
  transition: opacity 0.12s, background-color 0.12s;
  user-select: none;
  z-index: 2;
  pointer-events: none;
  background-color: transparent;
}
.cell-drag-grip > i {
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--ink-3);
  transition: background 0.12s;
}
.paper-cell:hover .cell-drag-grip { opacity: 0.55; pointer-events: auto; }
.cell-drag-grip:hover { opacity: 1 !important; background-color: var(--cream-2); }
.cell-drag-grip:hover > i { background: var(--ink); }
.cell-drag-grip:active { cursor: grabbing; }
.paper-surface .paper-cell.paper-cell-focus,
.paper-surface .paper-cell:focus {
  background: var(--green-lt);
  box-shadow: inset 0 0 0 1px var(--green-rule);
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}

/* Drag states */
.paper-surface .paper-cell.paper-cell-dragging {
  opacity: 0.35;
}
.paper-surface .paper-cell.paper-cell-drop-target {
  background: var(--green-lt);
  box-shadow: inset 0 0 0 2px var(--green);
}
.paper-surface .paper-cell.paper-col-drag-group,
.paper-surface .paper-cell.paper-row-drag-group {
  opacity: 0.35;
  background: rgba(26, 74, 56, 0.06);
}
.paper-surface .paper-cell.paper-row-drag-target {
  background: rgba(26, 74, 56, 0.08);
}
.paper-surface .paper-cell.paper-cell-assign-target {
  background: rgba(100, 60, 180, 0.08);
  box-shadow: inset 0 0 0 2px rgba(100, 60, 180, 0.35);
}
@keyframes swap-flash {
  0% { background: rgba(100, 60, 180, 0.18); }
  100% { background: transparent; }
}
.paper-surface .paper-cell.paper-cell-swap-flash {
  animation: swap-flash 0.5s ease;
}

/* Column drag insertion line */
.paper-insertion-line {
  position: absolute;
  width: 2px;
  background: var(--green);
  pointer-events: none;
  z-index: 12;
  border-radius: 1px;
  transition: left 0.08s ease;
}
.paper-insertion-line::before,
.paper-insertion-line::after {
  content: '';
  position: absolute;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}
.paper-insertion-line::before { top: -4px; }
.paper-insertion-line::after { bottom: -4px; }

/* Row drag insertion line (horizontal) */
.paper-row-insertion-line {
  position: absolute;
  height: 2px;
  background: var(--green);
  pointer-events: none;
  z-index: 12;
  border-radius: 1px;
  transition: top 0.08s ease;
}
.paper-row-insertion-line::before,
.paper-row-insertion-line::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}
.paper-row-insertion-line::before { left: -4px; }
.paper-row-insertion-line::after { right: -4px; }

/* Row/column add/remove controls */
.paper-row-ctrl,
.paper-col-ctrl {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  z-index: 5; opacity: 0; transition: opacity 0.15s;
}
.paper-surface:hover .paper-row-ctrl,
.paper-surface:hover .paper-col-ctrl {
  opacity: 1;
}
.paper-add-btn,
.paper-remove-btn {
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; cursor: pointer;
  border: none; padding: 0;
  transition: transform 0.1s, background 0.1s;
}
.paper-add-btn {
  background: var(--green); color: white;
}
.paper-add-btn:hover {
  background: var(--green-2); transform: scale(1.15);
}
.paper-remove-btn {
  background: var(--cream-3); color: var(--ink-3);
  margin-left: 3px;
}
.paper-remove-btn:hover {
  background: #e8635a; color: white; transform: scale(1.15);
}

/* Compact control bar above paper */
.paper-controls {
  height: 44px; background: var(--white); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; padding: 0 14px; gap: 10px; flex-shrink: 0;
}
.paper-controls .e-th-group { display: flex; align-items: center; gap: 5px; }
.paper-controls .e-th-grow { flex: 1; }
.paper-controls .ob-group { display: flex; align-items: center; gap: 5px; }


/* Grid mode — show all cell borders */
.paper-surface.grid-mode .paper-cell {
  border: 1px solid var(--line-lt);
}
.paper-surface.grid-mode .paper-cell:hover {
  border-color: var(--line);
}

/* Selected cell range for merging */
.paper-surface .paper-cell.paper-cell-selected {
  background: rgba(26, 74, 56, 0.08);
  box-shadow: inset 0 0 0 1px var(--green-rule);
}

/* Row border indicator */
.paper-surface tr.has-row-border td {
  border-bottom: 1px solid black !important;
}

/* Handle overlay — lives inside .paper-editor, positioned relative to .paper-surface */
.paper-handle-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; z-index: 10;
}
.paper-handle-overlay > * { pointer-events: auto; }

/* Row / column hover handles — three-line grip */
.paper-row-handle-hover,
.paper-col-handle-hover {
  position: absolute;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  padding: 3px 4px; gap: 2.5px;
  cursor: grab; border-radius: 4px;
  background-color: transparent;
  transition: background-color 0.12s, opacity 0.12s;
  user-select: none; z-index: 11;
}
.paper-row-handle-hover { flex-direction: column; }
.paper-col-handle-hover { flex-direction: row; }
.paper-row-handle-hover > i,
.paper-col-handle-hover > i {
  display: block;
  border-radius: 1px;
  background: var(--ink-2);
  transition: background 0.12s;
}
.paper-row-handle-hover > i { width: 9px; height: 1.4px; }
.paper-col-handle-hover > i { width: 1.4px; height: 9px; }
.paper-row-handle-hover:hover,
.paper-col-handle-hover:hover {
  background-color: var(--cream-2);
}
.paper-row-handle-hover:hover > i,
.paper-col-handle-hover:hover > i {
  background: var(--ink);
}
.paper-row-handle-hover:active,
.paper-col-handle-hover:active {
  cursor: grabbing;
  background-color: var(--cream-3);
}

/* Group header inline input */
.group-header-input {
  height: 28px; padding: 4px 10px; font-size: 12px; font-family: var(--sans);
  border: 1.5px solid var(--green); border-radius: 5px;
  background: var(--white); color: var(--ink);
  box-shadow: 0 3px 12px rgba(26,74,56,0.15);
  outline: none;
}
.group-header-input::placeholder { color: var(--ink-3); }
.group-header-input:focus {
  box-shadow: 0 3px 12px rgba(26,74,56,0.2), 0 0 0 3px var(--green-lt);
}

/* Floating toolbar (appears on cell selection) */
.paper-floating-toolbar {
  position: fixed; z-index: 1001;
  display: flex; align-items: center; gap: 2px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px; padding: 3px;
  box-shadow: 0 4px 16px rgba(22,20,14,0.12), 0 1px 3px rgba(22,20,14,0.08);
  font-family: var(--sans);
  animation: pft-fadein 0.12s ease;
}
@keyframes pft-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.paper-floating-toolbar.drag-active {
  pointer-events: none;
  opacity: 0;
}
.pft-btn {
  height: 28px; border: none; border-radius: 5px;
  background: transparent; color: var(--ink-2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 4px; padding: 0 8px; font-size: 12px; font-family: var(--sans);
  transition: background 0.1s, color 0.1s; white-space: nowrap;
}
.pft-btn:hover { background: var(--cream); color: var(--ink); }
.pft-btn-active { background: #e8edf3; color: #46607a; }
.pft-btn-active:hover { background: #e8edf3; color: #46607a; }
.pft-btn-danger:hover { background: var(--danger-light); color: var(--danger); }
.pft-btn svg { width: 14px; height: 14px; }
.pft-caret { font-size: 8px; color: var(--ink-3); margin-left: 1px; }
.pft-sep { width: 1px; height: 18px; background: var(--line-lt); margin: 0 2px; }

/* Border picker dropdown */
.pft-border-picker { position: relative; }
.pft-border-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px);
  margin-top: 4px; background: var(--white);
  border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(22,20,14,0.12);
  padding: 4px 0; min-width: 160px; z-index: 1002;
  opacity: 0; transition: opacity 0.12s ease, transform 0.12s ease;
}
.pft-border-dropdown.pft-dropdown-open {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.pft-border-opt {
  padding: 6px 12px; font-size: 12px; color: var(--ink-2);
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  transition: background 0.1s;
}
.pft-border-opt:hover { background: var(--cream); color: var(--ink); }
.bdr-icon { width: 16px; text-align: center; font-size: 13px; color: var(--ink-3); }

/* Color picker dropdown */
.pft-color-picker { position: relative; }
.pft-color-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px);
  margin-top: 4px; background: var(--white);
  border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(22,20,14,0.12);
  padding: 6px; min-width: 140px; z-index: 1002;
  opacity: 0; transition: opacity 0.12s ease, transform 0.12s ease;
}
.pft-color-dropdown.pft-dropdown-open {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.pft-color-opt {
  padding: 4px 6px; font-size: 11px; color: var(--ink-2);
  cursor: pointer; border-radius: 4px; margin-bottom: 4px;
  transition: background 0.1s;
}
.pft-color-opt:hover { background: var(--cream); color: var(--ink); }
.pft-color-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.pft-color-swatch {
  width: 24px; height: 24px; border-radius: 4px; cursor: pointer;
  display: block; transition: transform 0.1s, box-shadow 0.1s;
}
.pft-color-swatch:hover {
  transform: scale(1.15); box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Alignment picker dropdown */
.pft-align-picker { position: relative; }
.pft-align-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px);
  margin-top: 4px; background: var(--white);
  border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(22,20,14,0.12);
  padding: 4px; display: flex; gap: 2px; z-index: 1002;
  opacity: 0; transition: opacity 0.12s ease, transform 0.12s ease;
}
.pft-align-dropdown.pft-dropdown-open {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.pft-align-opt {
  width: 28px; height: 28px; border: none; border-radius: 5px;
  background: transparent; color: var(--ink-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s, color 0.1s;
}
.pft-align-opt:hover { background: var(--cream); color: var(--ink); }
.pft-align-opt svg { width: 14px; height: 14px; }
.pft-align-opt.pft-btn-active { background: #e8edf3; color: #46607a; }
/* Main align button: show only the icon group matching the current state */
.pft-btn[data-action="align"] .pft-align-svg .pa-left,
.pft-btn[data-action="align"] .pft-align-svg .pa-center,
.pft-btn[data-action="align"] .pft-align-svg .pa-right { display: none; }
.pft-btn[data-action="align"][data-current="left"] .pft-align-svg .pa-left,
.pft-btn[data-action="align"][data-current="center"] .pft-align-svg .pa-center,
.pft-btn[data-action="align"][data-current="right"] .pft-align-svg .pa-right,
.pft-btn[data-action="align"][data-current="mixed"] .pft-align-svg .pa-center { display: inline; }

/* Group picker dropdown */
.pft-group-dropdown {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(22,20,14,0.12);
  padding: 4px 0;
  min-width: 200px;
  max-width: 300px;
  animation: pft-fadein 0.12s ease;
}
.pft-group-opt {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pft-group-opt:hover { background: var(--cream); color: var(--ink); }
.pft-group-opt .grp-icon { width: 16px; text-align: center; font-size: 13px; color: var(--ink-3); flex-shrink: 0; }
.pft-group-opt-sep { height: 1px; background: var(--line-lt); margin: 4px 0; }

/* Grid mode toggle button */
.ob-btn-icon {
  width: 28px; height: 28px; border-radius: 4px;
  border: 1px solid var(--line); background: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s; color: var(--ink-3);
  flex-shrink: 0;
}
.ob-btn-icon:hover { border-color: var(--ink-3); color: var(--ink-2); }
.ob-btn-icon.active {
  background: var(--green-lt); border-color: var(--green-rule); color: var(--green);
}

/* Insert picker dropdown */
.pft-insert-picker { position: relative; }
.pft-insert-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px);
  margin-top: 4px; background: var(--white);
  border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(22,20,14,0.12);
  padding: 4px 0; min-width: 150px; z-index: 1002;
  opacity: 0; transition: opacity 0.12s ease, transform 0.12s ease;
}
.pft-insert-dropdown.pft-dropdown-open {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.pft-insert-opt {
  padding: 6px 12px; font-size: 12px; color: var(--ink-2);
  cursor: pointer; transition: background 0.1s;
}
.pft-insert-opt:hover { background: var(--cream); color: var(--ink); }

/* Delete picker dropdown */
.pft-delete-picker { position: relative; }
.pft-delete-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px);
  margin-top: 4px; background: var(--white);
  border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(22,20,14,0.12);
  padding: 4px 0; min-width: 140px; z-index: 1002;
  opacity: 0; transition: opacity 0.12s ease, transform 0.12s ease;
}
.pft-delete-dropdown.pft-dropdown-open {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.pft-delete-opt {
  padding: 6px 12px; font-size: 12px; color: var(--danger);
  cursor: pointer; transition: background 0.1s;
}
.pft-delete-opt:hover { background: var(--danger-light); }

/* ════════════════════════════════════════════
   STATS FORMATTER
════════════════════════════════════════════ */
.stats-panel { padding: 12vh 40px 40px; max-width: 700px; margin: 0 auto; width: 100%; }
.stats-panel-header { margin-bottom: 24px; }
.stats-panel-header h3 { font-family: var(--serif); font-size: 24px; margin-bottom: 8px; }
.stats-panel-header p { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.stats-controls { display: flex; gap: 12px; margin-bottom: 16px; }
.stats-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.stats-input { display: flex; flex-direction: column; }
.stats-input label { font-size: 11px; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.stats-input textarea {
  flex: 1; min-height: 200px; padding: 12px; font-family: var(--mono); font-size: 12px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink);
  resize: vertical; outline: none; line-height: 1.6;
}
.stats-input textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-lt); }
.stats-output { display: flex; flex-direction: column; }
.stats-output-header { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.text-output-frame {
  flex: 1; min-height: 200px; padding: 16px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--white); overflow: auto; font-size: 13px; line-height: 1.7;
  box-shadow: 0 1px 4px rgba(22,20,14,0.06);
}
.stats-privacy { font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.stats-actions { display: flex; gap: 8px; }


/* ════════════════════════════════════════════
   STATS CARD DETAIL VIEW — R bridge results
   Mirrors the Tables/Figures editor shell. Most styles are inherited
   from #editor .doc-bar / .split / .source / .editor-main. This block
   only adds the layout container that fills the available area.
════════════════════════════════════════════ */
.stats-card-view {
  display: flex;
  flex-direction: column;
  /* Use flex: 1 instead of height: 100% so we share #statsMode's height
     correctly with the (sometimes visible) #statsEditorTabs sibling above.
     height: 100% would request the parent's full height regardless of the
     tab strip, overflowing when tabs are present. */
  flex: 1 1 0%;
  min-height: 0;
  /* Layout containment isolates the card view's layout calculations from
     the rest of the page. During window/sidebar resize this prevents the
     card's heavy rcard content from being re-flowed redundantly as part
     of the ancestor reflow chain — the browser can compute the card's
     internal layout once per resize step instead of cascading from every
     ancestor change. Eliminates the "fragile" feel on first R load where
     async state (font load, tab strip insertion) was triggering nested
     reflows during resize. */
  contain: layout style;
}
.combined-source-content.stats-card-view {
  display: block;
  flex: 0 1 auto;
  height: auto;
  min-height: 0;
}
.stats-card-view .split {
  flex: 1;
  min-height: 0;
}
.stats-card-editor-placeholder {
  padding: 40px 0;
  text-align: center;
  color: var(--ink-3);
  font-style: italic;
}

/* ── MULTI library/tray preview HTML ──────────────────────────────── */
.stat-multi-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-multi-preview-head {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 12.5px;
  color: var(--ink-3, #888);
  margin: 0;
}
.stat-multi-preview-list {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-2, #555);
  line-height: 1.45;
}
.stat-multi-preview-list strong {
  font-weight: 500;
  color: var(--ink-1, #222);
}

/* ── MULTI children accordion (source pane) ──────────────────────── */
.multi-children-block {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.multi-children-key {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3, #888);
  font-weight: 500;
  padding: 0;
}
.multi-children-key .meta {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-3, #888);
  font-weight: 400;
}
.multi-children-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.multi-child-meta {
  border: 1px solid var(--line, #e5e5e5);
  border-radius: 8px;
  background: var(--white, #fff);
}
.multi-child-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ink-1, #222);
  user-select: none;
}
.multi-child-summary::-webkit-details-marker { display: none; }
.multi-child-summary::before {
  content: '›';
  display: inline-block;
  width: 12px;
  color: var(--ink-3, #888);
  transition: transform 0.12s;
  text-align: center;
  font-size: 13px;
}
.multi-child-meta[open] .multi-child-summary::before { transform: rotate(90deg); }
.multi-child-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-3, #888);
  background: var(--tint, #f6f4ee);
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
.multi-child-name {
  font-weight: 500;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.multi-child-type {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-3, #888);
  flex-shrink: 0;
}
.multi-child-body {
  padding: 6px 12px 12px;
  border-top: 1px solid var(--line-soft, #f3f3f3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.multi-child-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
}
.multi-child-key {
  color: var(--ink-3, #888);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.multi-child-val {
  color: var(--ink-2, #555);
  word-break: break-word;
}
.multi-child-script-card {
  gap: 5px;
}
.multi-child-script-field {
  border-radius: 8px;
}
.multi-child-script-field .source-script-path {
  font-size: 11px;
  padding: 7px 9px;
}
.multi-child-copy {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  margin: 4px 4px 4px 0;
}
.multi-child-val code,
.multi-child-call,
.multi-child-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-2, #555);
  background: var(--tint, #f6f4ee);
  padding: 1px 4px;
  border-radius: 3px;
}

/* ── RCARD MULTI — combined card holding several children ────────── */
.rcard-multi {
  max-width: 720px;
  margin: 24px auto 24px;
}
.rcard-multi .rcard {
  margin: 0 auto;
  max-width: 100%;
}
.rcard-multi-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  color: var(--ink-2, #555);
  text-align: center;
  margin: 0 0 6px;
  letter-spacing: 0.02em;
}
.rcard-multi-heading em { font-style: italic; }
.rcard-multi-child {
  display: block;
  margin: 0 0 8px;
  position: relative;
}
.rcard-multi-child .rcard-head {
  padding-right: 56px;
}
.rcard-multi-child-remove {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line, #e5e5e5);
  background: var(--white, #fff);
  color: var(--ink-2, #555);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
  padding: 0;
  z-index: 2;
}
.rcard-multi-child-remove:focus { opacity: 1; }
.rcard-multi-child-remove:hover {
  background: var(--tint, #f6f4ee);
  border-color: var(--ink-3, #999);
  color: var(--ink-1, #222);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.rcard-multi-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px auto 14px;
  max-width: 540px;
  color: var(--ink-3, #999);
}
.rcard-multi-divider-line {
  flex: 1;
  height: 1px;
  background: var(--line, #e5e5e5);
}
.rcard-multi-divider-label {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-2, #555);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.rcard-multi-divider-heading .rcard-multi-divider-line { display: none; }
.rcard-multi-divider-heading {
  justify-content: flex-start;
  margin-top: 22px;
}
.rcard-multi-divider-heading .rcard-multi-divider-label {
  font-size: 14px;
  color: var(--ink-1, #222);
  font-style: normal;
  font-weight: 500;
}
.rcard-multi-divider-page-break {
  border-top: 2px dashed var(--line, #e5e5e5);
  padding-top: 18px;
}
.rcard-multi-divider-page-break .rcard-multi-divider-line { display: none; }

/* ── RCARD — the Result Card itself ───────────────────────────────── */
.rcard {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  overflow: hidden;
  margin: 24px auto 24px;
  max-width: 720px;
  /* Layout containment isolates the rcard's internal layout from the
     surrounding flex chain. Combined with .stats-card-view's containment,
     this makes the card area fully self-contained: resize events reflow
     the surrounding chrome (sidebar, doc-bar, tab strip) without
     cascading into the card's many nested sections. Eliminates the
     "fragile" feel during resize on first R load. */
  contain: layout style;
}
.rcard-head {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line-soft, #f3f3f3);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.rcard-type {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.rcard-id {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-left: auto;
}
.rcard-call {
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  background: var(--cream, #fafaf9);
  border-bottom: 1px solid var(--line-soft, #f3f3f3);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  margin: 0;
  max-width: 100%;
  scrollbar-gutter: stable;
}
.rcard-workbook-source-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  margin-bottom: 9px;
}
.rcard-workbook-source-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink);
}
.rcard-workbook-source-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
}
.rcard-workbook-preview {
  max-height: 188px;
  overflow: auto;
  border: 1px solid var(--line, #e8e6df);
  border-radius: 8px;
  background: #fff;
}
.rcard-workbook-preview table {
  border-collapse: collapse;
  width: 100%;
  min-width: 280px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}
.rcard-workbook-preview td {
  border-right: 1px solid var(--line-soft, #f3f3f3);
  border-bottom: 1px solid var(--line-soft, #f3f3f3);
  padding: 6px 7px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rcard-workbook-preview tr:last-child td { border-bottom: none; }
.rcard-workbook-preview td:last-child { border-right: none; }
.rcard-workbook-preview-empty,
.rcard-workbook-preview-truncated {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-3);
}
.rcard-workbook-preview-empty {
  padding: 10px;
  border: 1px solid var(--line, #e8e6df);
  border-radius: 8px;
  background: #fff;
}
.rcard-workbook-preview-truncated {
  margin-top: 6px;
}
.rcard-section {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line-soft, #f3f3f3);
}
.rcard-section:last-of-type { border-bottom: none; }
.rcard-sectionlabel {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 10px;
}
.rcard-sectionlabel .meta {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-3);
  font-size: 11.5px;
  margin-left: 6px;
}
.rcard-fields-label,
.rcard-table-label,
.rcard-structural-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.rcard-fields-label > span:first-child,
.rcard-table-label > span:first-child,
.rcard-structural-label > span:first-child {
  min-width: 0;
}
.rcard-section-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-left: auto;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}
.rcard-section-actions .rbtn {
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}
.rcard-section-actions .rcard-table-menu {
  position: relative;
  display: inline-flex;
}
.rcard-section-actions .rcard-table-menu > summary {
  list-style: none;
}
.rcard-section-actions .rcard-table-menu > summary::-webkit-details-marker {
  display: none;
}
.rcard-section-actions .rcard-table-menu[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: #000;
  border-color: #000;
  box-shadow: none;
}
.rcard-table-menu-caret {
  width: 0.55em;
  height: 0.55em;
  border-right: 1.35px solid currentColor;
  border-bottom: 1.35px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  margin: -2px 0 0 1px;
  opacity: 0.92;
}
.rcard-table-menu-pop {
  position: absolute;
  top: calc(100% - 1px);
  right: 0;
  z-index: 50;
  min-width: 100%;
  width: max-content;
  padding: 4px;
  border: 1px solid #000;
  border-top: 0;
  border-radius: 0 0 7px 7px;
  background: #000;
  box-shadow: 0 8px 18px rgba(20, 20, 20, 0.12);
  transform-origin: top right;
}
.rcard-table-menu[open] .rcard-table-menu-pop {
  animation: stats-table-menu-drop 130ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
}
.rcard-table-menu-item {
  width: 100%;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--white);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  text-align: left;
  padding: 7px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.rcard-table-menu-item:hover,
.rcard-table-menu-item:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.12);
}
@keyframes stats-table-menu-drop {
  from {
    opacity: 0;
    transform: translateY(-3px) scaleY(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rcard-table-menu[open] .rcard-table-menu-pop {
    animation: none;
  }
}
.rcard-section-actions .rbtn:hover,
.rcard-section-actions .rbtn:focus-visible {
  background: #000;
  border-color: #000;
  color: var(--white);
  outline: none;
  box-shadow: 0 0 0 2px rgba(40,40,40,0.05);
}
.rcard .rbtn.rbtn-handoff-action,
.rcard-section-actions .rbtn.rbtn-handoff-action,
.rcard-structural .param-group-actions .rbtn.rbtn-handoff-action {
  min-height: 26px;
  padding: 5px 9px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--handoff-action) 8%, transparent);
  color: var(--handoff-action);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.14s, color 0.14s, transform 0.14s, box-shadow 0.14s;
}
.rcard .rbtn.rbtn-handoff-action:hover,
.rcard .rbtn.rbtn-handoff-action:focus-visible,
.rcard-section-actions .rbtn.rbtn-handoff-action:hover,
.rcard-section-actions .rbtn.rbtn-handoff-action:focus-visible,
.rcard-structural .param-group-actions .rbtn.rbtn-handoff-action:hover,
.rcard-structural .param-group-actions .rbtn.rbtn-handoff-action:focus-visible {
  background: color-mix(in srgb, var(--handoff-action) 15%, transparent);
  border-color: transparent;
  color: var(--ink);
  box-shadow: none;
  outline: none;
  transform: translateY(-1px);
  text-decoration: none;
}
.rcard .rbtn.rbtn-handoff-action:hover .rbtn-handoff-label,
.rcard .rbtn.rbtn-handoff-action:focus-visible .rbtn-handoff-label,
.rcard-section-actions .rbtn.rbtn-handoff-action:hover .rbtn-handoff-label,
.rcard-section-actions .rbtn.rbtn-handoff-action:focus-visible .rbtn-handoff-label,
.rcard-structural .param-group-actions .rbtn.rbtn-handoff-action:hover .rbtn-handoff-label,
.rcard-structural .param-group-actions .rbtn.rbtn-handoff-action:focus-visible .rbtn-handoff-label {
  text-decoration: none;
}
.rcard .rbtn.rbtn-handoff-action .rbtn-icon {
  flex-shrink: 0;
  color: currentColor;
}
.rcard-section-actions .rcard-table-menu[open] > summary.rbtn-handoff-action {
  background: color-mix(in srgb, var(--handoff-action) 15%, transparent);
  border-color: transparent;
  color: var(--ink);
  box-shadow: none;
}
.rcard-section-actions .rcard-table-menu.rcard-handoff-menu .rcard-table-menu-pop {
  top: calc(100% + 7px);
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  box-shadow: 0 8px 18px rgba(20, 20, 20, 0.10);
}
.rcard-section-actions .rcard-table-menu.rcard-handoff-menu .rcard-table-menu-item {
  color: var(--handoff-action);
  text-transform: none;
  letter-spacing: 0;
}
.rcard-section-actions .rcard-table-menu.rcard-handoff-menu .rcard-table-menu-item:hover,
.rcard-section-actions .rcard-table-menu.rcard-handoff-menu .rcard-table-menu-item:focus-visible {
  background: color-mix(in srgb, var(--handoff-action) 10%, transparent);
  color: var(--ink);
  text-decoration: none;
}
.rcard-preview-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rcard-fields {
  display: grid;
  grid-template-columns: minmax(112px, 148px) 1fr;
  column-gap: 16px;
  row-gap: 6px;
  font-size: 13px;
}
.rcard-fields .k {
  color: var(--ink-3);
  font-family: var(--serif);
  font-style: italic;
}
.rcard-fields .v {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rcard-fields .v .ci {
  color: var(--ink-3);
  margin-left: 4px;
  font-size: 12px;
}
.rcard-fields .field-subkey {
  color: var(--ink-3);
  font-family: var(--serif);
  font-style: italic;
}
.rcard-assumption-section {
  color: var(--ink);
}
.rcard-assumption-summary {
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.rcard-assumption-summary::-webkit-details-marker {
  display: none;
}
.rcard-assumption-summary::before {
  content: "›";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border: 1px solid var(--line, #e7e2d9);
  border-radius: 5px;
  background: var(--cream, #fafaf9);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-style: normal;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .14s ease;
}
.rcard-assumption-section[open] > .rcard-assumption-summary::before {
  transform: rotate(90deg);
}
.rcard-assumption-body {
  display: grid;
  gap: 12px;
  padding-top: 11px;
  font-size: 12.5px;
}
.rcard-assumption-title,
.rcard-assumption-title-row {
  color: var(--ink-3);
  font-family: var(--serif);
  font-style: italic;
}
.rcard-assumption-title {
  margin-bottom: 6px;
}
.rcard-assumption-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.rcard-assumption-table-wrap {
  overflow-x: auto;
}
.rcard-assumption-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 12.5px;
}
.rcard-assumption-table th,
.rcard-assumption-table td {
  padding: 5px 8px 5px 0;
  border-bottom: 1px solid var(--line, #e7e2d9);
  text-align: left;
  vertical-align: top;
  line-height: 1.3;
}
.rcard-assumption-table th {
  color: var(--ink-3);
  font-weight: 600;
}
.rcard-assumption-table th:nth-child(3),
.rcard-assumption-table th:nth-child(4),
.rcard-assumption-table td:nth-child(3),
.rcard-assumption-table td:nth-child(4) {
  text-align: right;
  white-space: nowrap;
}
.rcard-assumption-muted {
  color: var(--ink-3);
  font-size: 11px;
}
.rcard-assumption-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.rcard-assumption-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: baseline;
  line-height: 1.35;
}
.rcard-assumption-list li span:first-child {
  color: var(--ink-3);
}
.rcard-assumption-list li span:only-child {
  grid-column: 1 / -1;
  color: var(--ink);
}
.rcard-assumption-figure-list li {
  grid-template-columns: 1fr;
}
.rcard-fields .field-origin {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(45,74,110,0.07);
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
}
.rcard-formatted {
  font-family: 'Charter', 'Times New Roman', Georgia, serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream, #fafaf9);
  border: 1px solid var(--line-soft, #f3f3f3);
  border-radius: 6px;
  padding: 14px 16px;
}
.rcard-preview-section {
  background: linear-gradient(180deg, rgba(45,74,110,0.025), transparent 64%);
}
.rcard-preview-card {
  border-color: rgba(45,74,110,0.16);
  background: var(--white);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.rcard-report-label {
  align-items: center;
}
.rcard-report-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
}
.rcard-report-edited-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border: 1px solid rgba(45,74,110,0.16);
  border-radius: 999px;
  background: rgba(45,74,110,0.045);
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.rcard-report-edited-badge.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.rcard-report-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.rcard-report-segments {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
  min-width: 224px;
  padding: 2px;
  border: 1px solid rgba(45,74,110,0.14);
  border-radius: 8px;
  background: var(--cream, #fafaf9);
}
.rcard-report-segment {
  height: 28px;
  min-width: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 0 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.rcard-report-segment:hover {
  color: var(--ink);
}
.rcard-report-segment.active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(26,26,26,0.08);
}
.rcard-report-segment:focus-visible {
  outline: 2px solid rgba(45,74,110,0.22);
  outline-offset: 2px;
}
.rcard-report-action {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}
.rcard-report-action svg {
  flex: 0 0 auto;
}
.rcard-report-action:hover {
  background: var(--cream, #fafaf9);
  border-color: var(--ink-3);
  color: var(--ink);
}
.rcard-report-action.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
  box-shadow: none;
}
.rcard-report-action:disabled {
  border-color: var(--line);
  background: var(--white);
  color: rgba(26,26,26,0.34);
  cursor: default;
  opacity: 1;
}
.rcard-report-action:disabled:hover {
  border-color: var(--line);
  background: var(--white);
  color: rgba(26,26,26,0.34);
}
.rcard-report-action:focus-visible {
  outline: 2px solid rgba(45,74,110,0.22);
  outline-offset: 2px;
}
.rcard-report-edit {
  min-width: 86px;
}
.rcard-report-reset {
  min-width: 72px;
}
.rcard-report-copy {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 8px;
}
.rcard-report-card {
  padding: 0;
  overflow: hidden;
}
.rcard-report-text {
  display: block;
  width: 100%;
  min-height: 94px;
  max-height: 340px;
  resize: none;
  overflow: auto;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  padding: 16px 18px;
  white-space: pre-wrap;
}
.rcard-report-text.is-readonly {
  cursor: default;
  user-select: text;
}
.rcard-report-text.is-editing {
  background: rgba(45,74,110,0.025);
  cursor: text;
}
.rcard-report-text:focus {
  outline: none;
  box-shadow: inset 3px 0 0 rgba(45,74,110,0.28);
}
.rcard-report-text p {
  margin: 0 0 10px;
}
.rcard-report-text p:last-child {
  margin-bottom: 0;
}
.rcard-report-text .rcard-apa-list {
  margin: 0;
}
/* Stats model warnings now render through the shared `.mledger` ledger
   (see the #editor .mledger block). The old hairline-callout styles were
   removed when the renderer moved to MellioLedger. */
@media (max-width: 720px) {
  .rcard-report-label {
    align-items: flex-start;
    flex-direction: column;
  }
  .rcard-report-tools {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }
  .rcard-report-segments {
    flex: 1 1 100%;
    min-width: 0;
  }
  .rcard-report-segment {
    padding: 0 6px;
    font-size: 11px;
  }
  .rcard-report-action {
    flex: 1 1 auto;
  }
}
.rcard-preview-copyline {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.rcard-preview-content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.rcard-preview-copyline.is-multiline {
  align-items: flex-start;
}
.rcard-preview-copyline.is-multiline .rcard-preview-copy {
  margin-top: 1px;
}
.rcard-formatted em { font-style: italic; }
.rcard-apa-list {
  margin: 0;
  padding-left: 20px;
}
.rcard-apa-list li {
  margin: 0 0 6px;
}
.rcard-apa-list li:last-child {
  margin-bottom: 0;
}
.rcard-table-note {
  border: 1px solid var(--line-soft, #f3f3f3);
  background: rgba(45,74,110,0.04);
  color: var(--ink-3);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.45;
}
.rcard-context-actions {
  display: flex;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}
.rcard-action-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rcard-context-actions .rbtn {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.rcard-context-actions .rbtn:hover {
  border-color: var(--ink-3);
  color: var(--ink);
  background: var(--cream, #fafaf9);
}
.rcard-context-actions .rbtn-prominent {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}
.rcard-context-actions .rbtn-prominent:hover {
  border-color: var(--ink);
  background: var(--ink-2);
  color: var(--white);
}
.rcard-context-actions .rbtn-icon {
  flex-shrink: 0;
}
.rcard-table-scroll-frame {
  position: relative;
  display: flex;
  flex-direction: column;
}
.rcard-table-wrap {
  width: 100%;
  overflow-x: auto;
  scrollbar-gutter: stable;
}
/* Overflowing tables dissolve under the card edge while more columns
   remain — the content itself signals that it continues. */
@property --tblFadeL { syntax: '<length>'; initial-value: 0px; inherits: false; }
@property --tblFadeR { syntax: '<length>'; initial-value: 0px; inherits: false; }
.rcard-table-scroll-frame.has-horizontal-overflow .rcard-table-wrap {
  --tblFadeL: 0px;
  --tblFadeR: 0px;
  transition: --tblFadeL 0.25s ease, --tblFadeR 0.25s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--tblFadeL), #000 calc(100% - var(--tblFadeR)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--tblFadeL), #000 calc(100% - var(--tblFadeR)), transparent 100%);
}
.rcard-table-scroll-frame.has-horizontal-overflow:not(.is-scrolled-start) .rcard-table-wrap { --tblFadeL: 36px; }
.rcard-table-scroll-frame.has-horizontal-overflow:not(.is-scrolled-end) .rcard-table-wrap { --tblFadeR: 44px; }
/* The cue is a miniature scrollbar: proportional thumb that tracks
   scroll position; click jumps, drag scrubs. */
.rcard-table-scroll-cue {
  display: none;
  order: -1;
  align-self: flex-end;
  position: relative;
  width: 84px;
  height: 5px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: rgba(26, 29, 36, 0.09);
  cursor: pointer;
  touch-action: none;
}
.rcard-table-scroll-cue::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: calc(var(--cue-left, 0) * 1%);
  width: calc(var(--cue-width, 40) * 1%);
  border-radius: 999px;
  background: rgba(26, 29, 36, 0.38);
  transition: background 0.15s ease;
}
.rcard-table-scroll-cue:hover::before,
.rcard-table-scroll-cue.is-dragging::before {
  background: rgba(26, 29, 36, 0.6);
}
.rcard-table-scroll-frame.has-horizontal-overflow .rcard-table-scroll-cue {
  display: block;
}
.rcard-result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.rcard-result-table th {
  text-align: left;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  padding: 5px 8px;
  white-space: nowrap;
}
.rcard-result-table td {
  border-bottom: 1px dashed var(--line-soft, #f3f3f3);
  color: var(--ink);
  padding: 5px 8px;
  white-space: nowrap;
}
.rcard-result-table tr:last-child td { border-bottom: none; }
.rcard-result-table .table-cell-text {
  font-family: var(--mono);
  font-size: 11.5px;
}
.rcard-result-table .table-cell-num {
  text-align: right;
  font-family: var(--mono);
  font-size: 11.5px;
}
.rbtn-note {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 8px;
  color: var(--ink-3);
  font-size: 12px;
}
.rcard-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--cream, #fafaf9);
  border-top: 1px solid var(--line-soft, #f3f3f3);
}
.rcard-actions .rbtn {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.rcard-actions .rbtn:hover {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink);
}
.rcard-actions .rbtn.primary {
  color: var(--data, #2d4a6e);
  background: rgba(45,74,110,0.07);
  border-color: rgba(45,74,110,0.22);
}
.rcard-actions .rbtn.primary:hover {
  background: rgba(45,74,110,0.12);
}
.rcard-actions-spacer { flex: 1; }
.rcard-actions .rbtn .check {
  width: 12px; height: 12px;
  display: inline-block;
  color: currentColor;
  flex-shrink: 0;
}
/* ── STRUCTURAL CARD (lavaan / SEM) ─────────────────────────────── */
.rcard-structural .fit-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rcard-structural .fit-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: baseline;
  gap: 14px;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--line-soft, #f3f3f3);
}
.rcard-structural .fit-row:last-child { border-bottom: none; }
.rcard-structural .fit-threshold-note {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.45;
}
.rcard-structural .fit-name {
  font-family: 'Charter', 'Times New Roman', Georgia, serif;
  color: var(--ink);
}
.rcard-structural .fit-value {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rcard-structural .fit-value .ci {
  color: var(--ink-3);
  font-size: 12px;
  margin-left: 4px;
}
.rcard-structural .fit-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--ink-3);
  font-size: 11px;
  cursor: help;
}
.rcard-structural .fit-mark.fit-good::before {
  content: "●";
}
.rcard-structural .fit-mark.fit-acceptable::before {
  content: "◐";
}
.rcard-structural .fit-mark.fit-poor::before {
  content: "○";
  color: var(--ink-4);
}
.rcard-structural .estimator-chip {
  display: inline-block;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 3px;
  border: 1px solid var(--line-1, rgba(0, 0, 0, 0.12));
  color: var(--ink-3);
  background: transparent;
  vertical-align: 1px;
  white-space: nowrap;
}
.rcard-structural .mediation-results-grid {
  display: grid;
  gap: 16px;
}
.rcard-structural .mediation-result-card {
  min-width: 0;
}
.rcard-structural .mediation-result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.rcard-structural .mediation-result-head h4 {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ink);
}
.rcard-structural .mediation-result-note {
  margin-top: 9px;
}
/* Mediation inference warnings now render through the shared `.mledger`
   ledger (see the #editor .mledger block). */
.rcard-structural .rcard-empty {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-3);
  font-size: 12.5px;
}
.rcard-structural .fit-just-identified-banner {
  font-family: var(--serif);
  font-size: 12.5px;
  color: var(--ink-2, #2d2d2d);
  background: var(--cream-2, rgba(0, 0, 0, 0.035));
  border: 1px solid var(--line-1, rgba(0, 0, 0, 0.12));
  border-radius: 4px;
  padding: 7px 12px;
  margin: 0 0 10px;
  line-height: 1.45;
}
.rcard-structural .fit-just-identified-banner strong {
  font-weight: 600;
  margin-right: 2px;
}
.rcard-structural .fit-diagnostic-banner {
  font-family: var(--serif);
  font-size: 12.5px;
  color: var(--ink-2, #2d2d2d);
  background: var(--cream-2, rgba(0, 0, 0, 0.035));
  border: 1px solid var(--line-1, rgba(0, 0, 0, 0.12));
  border-radius: 4px;
  padding: 7px 12px;
  margin: 0 0 10px;
  line-height: 1.45;
}
.rcard-structural .fit-diagnostic-banner strong {
  font-weight: 600;
  margin-right: 2px;
}
.rcard-structural .rcard-fit-diagnostics .rcard-inspect-summary {
  align-items: flex-start;
}
.rcard-structural .fit-diagnostics-summary-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-top: 1px;
}
.rcard-structural .fit-diagnostics-summary-copy {
  font-family: var(--serif);
  font-size: 12.2px;
  font-style: italic;
  line-height: 1.35;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0;
}
.rcard-structural .rcard-inspect {
  margin: 4px 0 0;
}
.rcard-structural .rcard-inspect-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}
.rcard-structural .rcard-inspect-summary .rcard-sectionlabel {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  line-height: 1;
  margin-bottom: 0;
}
.rcard-structural .rcard-inspect-summary .rcard-sectionlabel .meta {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.rcard-structural .rcard-inspect-summary .rcard-inspect-summary-btn {
  margin-left: auto;
  flex: 0 0 auto;
}
.rcard-structural .rcard-inspect-summary .rcard-model-detail-actions {
  margin-left: auto;
}
.rcard-structural .rcard-inspect-summary::-webkit-details-marker { display: none; }
.rcard-structural .rcard-inspect-toggle {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
}
.rcard-structural .rcard-inspect-summary:hover .rcard-inspect-toggle,
.rcard-structural .rcard-inspect-summary:focus-visible .rcard-inspect-toggle {
  background: var(--cream, #fafaf9);
  border-color: var(--ink-3);
  color: var(--ink);
}
.rcard-structural .rcard-inspect-toggle svg {
  display: block;
}
.rcard-structural .rcard-inspect[open] .rcard-inspect-toggle {
  transform: rotate(90deg);
}
.rcard-structural .rcard-inspect-summary:hover .rcard-sectionlabel {
  color: var(--ink);
}
.rcard-structural .rcard-inspect-body {
  overflow: hidden;
}
.rcard-structural .rcard-inspect.is-animating .rcard-inspect-body {
  transition: height 220ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 160ms ease,
              transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: height, opacity, transform;
}
.rcard-structural .rcard-inspect-body-inner {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rcard-structural .rcard-inspect-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}
.rcard-structural .rcard-inspect-filter-btn {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-soft, #f3f3f3);
  background: var(--white);
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.rcard-structural .rcard-inspect-filter-btn:hover,
.rcard-structural .rcard-inspect-filter-btn:focus-visible {
  background: var(--cream, #fafaf9);
  border-color: var(--line);
  color: var(--ink);
  outline: none;
}
.rcard-structural .rcard-inspect-filter-btn.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}
.rcard-structural .rcard-inspect-filter.has-active .rcard-inspect-filter-btn:not(.is-active) {
  color: var(--ink-4);
}
.rcard-structural .rcard-inspect-filter-btn span {
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.rcard-structural .rcard-inspect-filter-btn.is-active span {
  color: rgba(255, 255, 255, 0.72);
}
@media (prefers-reduced-motion: reduce) {
  .rcard-structural .rcard-inspect.is-animating .rcard-inspect-body {
    transition: none;
  }
}
.rcard-structural .param-group {
  scroll-margin-top: 36px;
}
.rcard-structural .param-group-label {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0 0 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.rcard-structural .param-group-title {
  flex: 0 1 auto;
}
.rcard-structural .param-group-meta {
  font-family: var(--sans);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.rcard-structural .param-group-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.rcard-structural .param-group-actions .rbtn {
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.rcard-structural .param-group-actions .rbtn:hover,
.rcard-structural .param-group-actions .rbtn:focus-visible {
  background: #000;
  border-color: #000;
  color: var(--white);
  outline: none;
}
/* Compact icon-only variant for secondary diagnostic blocks. Blocks that
   researchers commonly export keep the full label; lower-priority
   diagnostics stay visually de-emphasized. */
.rcard-structural .param-group-actions .rbtn.param-group-table-btn-compact {
  background: transparent;
  border-color: var(--line-1, rgba(0, 0, 0, 0.16));
  color: var(--ink-3, #565b63);
  padding: 4px 6px;
  gap: 0;
}
.rcard-structural .param-group-actions .rbtn.param-group-table-btn-compact:hover,
.rcard-structural .param-group-actions .rbtn.param-group-table-btn-compact:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}
.rcard-structural .param-group-actions .rbtn.rbtn-handoff-action.param-group-table-btn-compact {
  min-width: 26px;
  padding: 5px 7px;
  border: 0;
  color: var(--handoff-action);
}
.rcard-structural .param-group-actions .rbtn.rbtn-handoff-action.param-group-table-btn-compact:hover,
.rcard-structural .param-group-actions .rbtn.rbtn-handoff-action.param-group-table-btn-compact:focus-visible {
  background: color-mix(in srgb, var(--handoff-action) 15%, transparent);
  border-color: transparent;
  color: var(--ink);
}
.rcard-structural .param-group-meta code {
  font-family: var(--mono);
  font-size: 10.5px;
  background: var(--cream, #fafaf9);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--line);
  text-transform: none;
}
.rcard-structural .param-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.rcard-structural .param-table th {
  text-align: left;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--ink-3);
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
}
.rcard-structural .param-table th.param-num-col { text-align: right; }
.rcard-structural .param-table td {
  padding: 4px 8px;
  border-bottom: 1px dashed var(--line-soft, #f3f3f3);
  color: var(--ink);
}
.rcard-structural .param-table tr:last-child td { border-bottom: none; }
.rcard-structural .param-table .param-name {
  font-family: var(--mono);
  font-size: 11.5px;
}
.rcard-structural .param-table .param-name .op {
  color: var(--ink-3);
  margin: 0 2px;
}
.rcard-structural .param-table .param-num {
  text-align: right;
  font-family: var(--mono);
  font-size: 11.5px;
}
.rcard-structural .param-fixed-note {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-3);
  margin-left: 3px;
}
.rcard-structural .param-na-note {
  color: var(--ink-3);
  cursor: help;
}
.rcard-structural .param-table .param-action,
.rcard-structural .param-table .param-action-col {
  width: 28px;
  text-align: right;
}
.rcard-structural .param-table .param-group-col,
.rcard-structural .param-table .param-group-cell {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
  white-space: nowrap;
  padding-right: 12px;
}
.rcard-structural .focal-star {
  background: transparent;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--ink-3);
  border-radius: 4px;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.rcard-structural .focal-star:hover {
  color: #b08818;
  background: rgba(176, 136, 24, 0.08);
  border-color: rgba(176, 136, 24, 0.25);
}
.rcard-structural .focal-star.focal-on {
  color: #b08818;
}
.rcard-structural .focal-off { opacity: 0.55; }
.rcard-structural .param-table .row-focal { background: rgba(176, 136, 24, 0.04); }
.rcard-structural .param-table .row-focal td { font-weight: 500; }
.rcard-structural .reliability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.rcard-structural .reliability-card {
  border: 1px solid var(--line-soft, #f3f3f3);
  border-radius: 7px;
  padding: 9px 11px;
  background: var(--white);
}
.rcard-structural .reliability-name {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  margin-bottom: 5px;
}
.rcard-structural .reliability-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.rcard-structural .reliability-row span {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-3);
}
.rcard-structural .reliability-row strong {
  font-weight: 400;
  color: var(--ink);
}
.rcard-structural .modification-note {
  margin-top: 7px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.45;
}
@media (max-width: 760px) {
  .rcard-structural .param-group-label {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .rcard-structural .param-group-actions {
    width: 100%;
    margin-left: 0;
  }
  .rcard-structural .param-table {
    min-width: 560px;
  }
  .rcard-structural .param-group {
    overflow-x: auto;
  }
}
.rcard-focal-section {
  background: rgba(45, 74, 110, 0.04);
  border-bottom: 1px solid var(--line-soft, #f3f3f3);
}
.rcard-structural .rcard-focal-label {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.rcard-structural .rcard-focal-label-text {
  flex: 1 1 auto;
  min-width: 0;
}
.rcard-structural .rcard-focal-summary-btn {
  flex: 0 0 auto;
}
.rcard-structural .focal-table {
  margin-top: 8px;
}
.rcard-structural .focal-table .focal-star {
  color: #b08818;
}
.rcard-actions #statsCardSaveBtn .check {
  width: auto;
  font-size: 12px;
  margin-right: 4px;
  color: #4a7a55;
}

/* Toast for copy feedback */
.stats-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--white);
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
}
.stats-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.stats-toast .check {
  color: #8fae7a;
  font-size: 14px;
}
.stats-card-view .source-empty-hint {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
  padding-top: 8px;
}
.stats-card-view .doc-btn-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--cream, #fafaf9);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1px 6px;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
.stats-library-view {
  max-width: 720px;
  margin: 24px auto;
  padding: 0 4px;
}
.stats-library-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.stats-library-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0;
}
.stats-library-meta {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-left: auto;
}
.stats-library-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stats-library-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  align-items: center;
}
.stats-library-search {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.12s;
}
.stats-library-search:focus {
  border-color: var(--ink-3);
}
.stats-library-type {
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
}
.stats-library-source-filter {
  margin-left: 0;
}
.stats-library-clear {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 12px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.stats-library-clear:hover {
  background: var(--cream, #fafaf9);
  color: var(--ink);
  border-color: var(--ink-3);
}
/* ── Format menu (Stats card) ───────────────────────────────────── */
.stats-format-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
}
.stats-format-row.stats-format-checkbox {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}
.stats-format-label {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.stats-format-checkbox .stats-format-label {
  font-weight: 500;
}
.stats-format-checkbox input[type="checkbox"] {
  margin: 0 6px 0 0;
  cursor: pointer;
}
.stats-format-hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-left: 22px;
  font-weight: 400;
}
.stats-format-input {
  font-family: var(--mono);
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  cursor: pointer;
}
.stats-format-input:focus { border-color: var(--ink-3); outline: none; }

/* ── Library actions row (Methods, Export) ───────────────────────── */
.stats-library-action {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  margin-left: 6px;
}
.stats-library-action:hover {
  background: var(--cream, #fafaf9);
  color: var(--ink);
  border-color: var(--ink-3);
}

/* ── Methods panel ───────────────────────────────────────────────── */
.stats-methods-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  margin-bottom: 18px;
  overflow: hidden;
}
.stats-methods-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft, #f3f3f3);
  background: var(--cream, #fafaf9);
}
.stats-methods-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.stats-methods-meta {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-3);
  margin-left: auto;
}
.stats-methods-close {
  background: transparent;
  border: none;
  color: var(--ink-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  font-family: var(--sans);
}
.stats-methods-close:hover { color: var(--ink); }
.stats-methods-body {
  padding: 18px 20px;
  font-family: 'Charter', 'Times New Roman', Georgia, serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink);
  white-space: pre-wrap;
}
.stats-methods-pkgs {
  padding: 10px 20px 14px;
  border-top: 1px dashed var(--line-soft, #f3f3f3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stats-methods-pkg-row {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-2);
}
.stats-methods-pkg-row code {
  font-family: var(--mono);
  background: var(--cream, #fafaf9);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--line);
}
.stats-methods-pkg-row .ver {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-left: 4px;
}
.stats-methods-pkg-row .cite {
  font-style: italic;
  margin-left: 4px;
  color: var(--ink-3);
}
.stats-methods-foot {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft, #f3f3f3);
  background: var(--cream, #fafaf9);
}

/* ── Export menu (Library) ───────────────────────────────────────── */
.stats-export-menu {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  padding: 6px;
  z-index: 20;
  min-width: 260px;
  margin-top: 4px;
}
.stats-library-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.06s;
}
.stats-library-item:hover {
  border-color: var(--ink-3);
  background: var(--cream, #fafaf9);
}
.stats-library-item:active { transform: translateY(1px); }
.stats-library-item-main {
  min-width: 0;
}
.stats-library-item-name {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.stats-library-item-type {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-3);
}
.stats-library-item-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
}
.stats-library-source {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: 1;
  color: var(--ink-3);
  background: var(--cream, #fafaf9);
}
.stats-library-source-r {
  color: #4d6f6a;
  border-color: rgba(77,111,106,0.24);
  background: rgba(77,111,106,0.07);
}
.stats-library-source-excel {
  color: #315f45;
  border-color: rgba(49,95,69,0.25);
  background: rgba(49,95,69,0.08);
}
.stats-library-source-paste,
.stats-library-source-ai {
  color: #6f6658;
  border-color: rgba(111,102,88,0.22);
  background: rgba(111,102,88,0.06);
}
.stats-library-item-id {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
}
.stats-library-item-date {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
}
.stats-library-item-del {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--ink-3);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.stats-library-item:hover .stats-library-item-del { opacity: 1; }
.stats-library-item-del:hover {
  background: rgba(184,73,58,0.08);
  color: #b8493a;
}
.stats-library-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 24px 48px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--cream, #fafaf9);
}
.stats-library-empty-icon {
  color: var(--ink-3);
  opacity: 0.55;
  margin-bottom: 18px;
}
.stats-library-empty-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 8px 0;
  letter-spacing: -0.005em;
}
.stats-library-empty-sub {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 380px;
  margin: 0 0 24px 0;
}
.stats-library-empty-sub em {
  font-style: italic;
  color: var(--ink);
}
.stats-library-empty-example {
  width: 100%;
  max-width: 460px;
  text-align: left;
}
.stats-library-empty-example-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 6px;
}
.stats-library-empty-code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0;
  line-height: 1.55;
  overflow-x: auto;
}
.stats-library-empty-code .c-com { color: var(--ink-3); font-style: italic; }
.stats-library-empty-code .c-fn  { color: var(--green, #4a7a55); }
.stats-card-view .source-empty-hint code {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  background: var(--white);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--line);
}
.stats-card-view .source-input {
  width: 100%;
  min-height: 200px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  resize: vertical;
  outline: none;
  line-height: 1.6;
  margin-bottom: 10px;
}
.stats-card-view .source-input:focus { border-color: var(--ink-3); }
.stats-card-view .source-summary {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.85;
  padding: 10px 12px;
  margin-top: 8px;
  border-top: 1px dashed var(--line);
}
.stats-card-view .source-summary .sum-head {
  color: var(--ink);
  margin-bottom: 4px;
}
.stats-card-view .source-summary .sum-row { display: flex; }
.stats-card-view .source-summary .sum-key {
  color: var(--ink-3);
  width: 60px;
  flex-shrink: 0;
}
.stats-card-view .source-summary .sum-val { color: var(--ink-2); }
.stats-card-view .parse-status .parse-err {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  color: #b8493a;
  background: rgba(184, 73, 58, 0.06);
  border: 1px solid rgba(184, 73, 58, 0.25);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
}
/* Fallback CTA shown alongside the parse error. Lets the user save
   the paste as a raw-text card instead of dead-ending. */
.stats-card-view .parse-status .parse-fallback {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.stats-card-view .parse-status .parse-fallback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.stats-card-view .parse-status .parse-fallback-btn {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  min-height: 32px;
  padding: 7px 13px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.stats-card-view .parse-status .parse-fallback-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}
.stats-card-view .parse-status .parse-fallback-secondary {
  color: var(--ink-3);
}
.stats-card-view .parse-status .parse-fallback-btn:hover {
  background: var(--cream, #fafaf9);
  border-color: var(--ink-3);
  color: var(--ink);
}
.stats-card-view .parse-status .parse-fallback-primary:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: var(--white);
}
.stats-card-view .parse-status .parse-fallback-hint {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.4;
}
/* Raw-text card body — preserve whitespace + monospace so pasted
   console output stays readable. */
.rcard-raw-text-body {
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 12px;
  color: var(--ink);
  background: var(--cream, #fafaf9);
  padding: 14px 16px;
  margin: 0;
  border-radius: 6px;
  white-space: pre-wrap;
  overflow-x: auto;
  line-height: 1.55;
  max-height: 480px;
  overflow-y: auto;
}
.rcard-unsupported-message {
  margin: 0 0 10px;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
}
.rcard-unsupported-suggestions {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line, #e5e3dd);
  border-radius: 6px;
  background: #fff;
  font-family: var(--sans);
}
.rcard-unsupported-suggestions-title {
  margin-bottom: 8px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rcard-unsupported-suggestion + .rcard-unsupported-suggestion {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft, #f3f3f3);
}
.rcard-unsupported-suggestion-title {
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}
.rcard-unsupported-suggestion-detail {
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.45;
}
.rcard-unsupported-suggestion-code {
  display: inline-block;
  margin-top: 7px;
  padding: 4px 6px;
  border-radius: 5px;
  background: var(--cream, #fafaf9);
  color: var(--ink);
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 11px;
  white-space: pre-wrap;
}
.rcard-unsupported-body {
  border: 1px solid var(--line, #e5e3dd);
}
.stats-card-view .source-meta-row {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft, #f3f3f3);
}
.stats-card-view .source-meta-row:last-child { border-bottom: none; }
.stats-card-view .source-meta-key {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 4px;
}
.stats-card-view .source-meta-val {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}
.stats-card-view .source-meta-val-flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.prov-r-val {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.bridge-update-pill {
  display: inline-flex;
  align-items: center;
}
.bridge-update-pill-btn {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 11px;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease, transform 140ms ease;
}
.bridge-update-pill-btn:hover,
.bridge-update-pill-btn:focus-visible {
  border-color: var(--ink-3);
  color: var(--ink-2);
  background: var(--cream, #fafaf9);
  transform: translateY(-1px);
  outline: none;
}
.bridge-update-pill-btn-flash {
  color: var(--ink);
  border-color: var(--ink-3);
  background: var(--cream, #fafaf9);
}
.source-restore-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
}
.source-restore-txt {
  font-family: var(--sans);
  font-size: 12px;
  font-style: italic;
  color: var(--ink-3);
}
.source-restore-btn {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 11px;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease, transform 140ms ease;
}
.source-restore-btn:hover,
.source-restore-btn:focus-visible {
  border-color: var(--ink-3);
  color: var(--ink-2);
  background: var(--cream, #fafaf9);
  transform: translateY(-1px);
  outline: none;
}

/* Boot splash: neutral app-shell treatment used while route and first
   workspace data resolve. The italic "o" orbits the wordmark as the
   intentional loading signal. */
#appBootSplash,
.mellio-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #1a1a1a;
  transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0ms linear 280ms;
}
#appBootSplash.hidden,
.mellio-loader-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.mellio-loader-shell {
  display: grid;
  justify-items: center;
  gap: 18px;
  transform: translateY(-4vh);
}
.boot-mark {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  padding-right: 0.55em;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 64px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}
.boot-mark-word {
  display: inline-block;
}
.boot-mark-orbit {
  position: absolute;
  left: calc(100% - 0.40em);
  top: 50%;
  width: 0.72em;
  height: 0.72em;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 50%;
  transform: translate(-50%, -48%);
}
.boot-mark-o {
  position: absolute;
  left: 50%;
  top: 50%;
  font-style: italic;
  font-weight: 500;
  font-size: 0.9em;
  line-height: 1;
  color: #1e4d3a;
  animation: boot-mark-orbit 1.85s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.boot-loader-rule {
  position: relative;
  display: block;
  width: 168px;
  height: 1px;
  overflow: hidden;
  background: #ebebeb;
}
.boot-loader-rule::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -48px;
  width: 48px;
  background: linear-gradient(90deg, #1a1a1a, #1e4d3a);
  animation: boot-rule-sweep 1.85s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes boot-mark-orbit {
  0% {
    opacity: 1;
    transform: translate(-50%, -52%) rotate(0deg) translateX(0.23em) rotate(0deg);
  }
  50% {
    opacity: 0.74;
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -52%) rotate(360deg) translateX(0.23em) rotate(-360deg);
  }
}
@keyframes boot-rule-sweep {
  0%   { transform: translateX(0); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(216px); opacity: 0; }
}
@media (max-width: 520px) {
  .boot-mark {
    font-size: 48px;
  }
  .boot-loader-rule {
    width: 132px;
  }
  @keyframes boot-rule-sweep {
    0%   { transform: translateX(0); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateX(180px); opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .boot-mark-orbit {
    border-color: transparent;
  }
  .boot-mark-o {
    animation: none;
    color: #1e4d3a;
    transform: translate(-50%, -52%) translateX(0.23em);
  }
  .boot-loader-rule::after {
    animation: none;
    left: 0;
    right: 0;
    width: auto;
    opacity: 0.65;
  }
}
.stats-card-view .source-meta-mono {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
}
.stats-card-view .source-call {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px 10px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}
.stats-card-view .source-call.source-workbook-call {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  white-space: normal;
  word-break: normal;
}
.stats-card-view .source-workbook-preview {
  display: grid;
  gap: 12px;
  min-width: 0;
  font-family: var(--sans);
}
.stats-card-view .source-workbook-card,
.stats-card-view .source-workbook-preview-card {
  min-width: 0;
  border: 1px solid var(--line, #e8e6df);
  border-radius: 9px;
  background: #fff;
  padding: 12px;
}
.stats-card-view .source-workbook-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.stats-card-view .source-workbook-glyph {
  width: 38px;
  height: 38px;
  min-width: 38px;
}
.stats-card-view .source-workbook-glyph svg {
  width: 22px;
  height: 22px;
}
.stats-card-view .source-workbook-main {
  flex: 1 1 auto;
  min-width: 0;
}
.stats-card-view .source-workbook-title {
  display: block;
  color: var(--ink);
  font-size: 16px;
  font-weight: 750;
  line-height: 1.15;
}
.stats-card-view .source-workbook-file {
  display: block;
  min-width: 0;
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-card-view .source-workbook-facts {
  display: grid;
  grid-template-columns: minmax(92px, .85fr) minmax(0, 1.15fr);
  gap: 7px 12px;
  align-items: baseline;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft, #f3f3f3);
}
.stats-card-view .source-workbook-facts span {
  color: var(--ink-3);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.25;
  text-transform: uppercase;
}
.stats-card-view .source-workbook-facts b {
  min-width: 0;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.3;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-card-view .source-workbook-preview .rcard-workbook-source-head {
  display: grid;
  gap: 3px;
  margin-bottom: 8px;
}
.stats-card-view .source-workbook-preview .rcard-workbook-source-title,
.stats-card-view .source-workbook-preview .rcard-workbook-source-meta {
  display: block;
}
.stats-card-view .source-workbook-preview .rcard-workbook-preview {
  max-height: 164px;
  background: #fbfcfc;
}
.stats-card-view .source-workbook-preview .rcard-workbook-preview table {
  min-width: 100%;
  font-size: 10.5px;
}
.stats-card-view .source-workbook-preview .rcard-workbook-preview td {
  max-width: 130px;
  padding: 5px 6px;
}
.stats-card-view .stats-workbook-source-controls {
  min-width: 0;
}
.stats-card-view .stats-workbook-source-controls:empty {
  display: none;
}
.stats-card-view .stats-workbook-switcher {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line, #e8e6df);
  border-radius: 9px;
  background: #ffffff;
}
.stats-card-view .stats-workbook-switcher-title {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 650;
  color: var(--ink);
}
.stats-card-view .stats-workbook-switcher-row {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-3);
}
.stats-card-view .stats-workbook-switcher-row select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line, #e8e6df);
  border-radius: 7px;
  background: #fbfcfc;
  color: var(--ink);
  font: 11.5px var(--sans);
  padding: 6px 8px;
}
.stats-card-view .stats-workbook-switcher-open {
  justify-self: start;
  border: 1px solid var(--ink);
  border-radius: 7px;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 650;
  padding: 7px 10px;
  cursor: pointer;
}
.stats-card-view .stats-workbook-switcher-open:hover {
  opacity: .9;
}
.stats-card-view .stats-workbook-switcher-status {
  min-height: 14px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-3);
}
.stats-card-view .git-sep   { color: var(--ink-3); margin: 0 2px; }
.stats-card-view .git-sha   {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--cream, #fafaf9); padding: 1px 5px;
  border-radius: 3px; border: 1px solid var(--line);
}
.stats-card-view .source-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--ink);
  color: var(--white);
  font-size: 11.5px;
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}
.stats-card-view .source-copy-btn:hover,
.stats-card-view .source-copy-btn:focus-visible {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: var(--white);
  outline: none;
  box-shadow: 0 0 0 2px rgba(40,40,40,0.08);
}
.stats-card-view .source-copy-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.stats-card-view .source-copy-btn.is-copied {
  background: var(--green, #2d5a27);
  border-color: var(--green, #2d5a27);
  color: var(--white);
}
.stats-card-view .source-copy-btn.is-copied svg {
  display: none;
}
.stats-card-view .source-copy-btn.is-copied::before {
  content: "✓";
  font-size: 13px;
  line-height: 1;
}
.stats-card-view .source-script-edit {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink-2);
}
.stats-card-view .source-script-edit:hover,
.stats-card-view .source-script-edit:focus-visible {
  background: var(--cream, #fafaf9);
  border-color: var(--ink-3);
  color: var(--ink);
}
.stats-card-view .source-script-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
}
.stats-card-view .source-script-card {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.stats-card-view .source-script-field {
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  overflow: hidden;
}
.stats-card-view .source-script-path {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}
.stats-card-view .source-script-field .source-copy-btn {
  margin: 5px 5px 5px 0;
}
.stats-card-view .source-script-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.stats-card-view .source-script-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  box-sizing: border-box;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--cream, #fafaf9);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
}
.stats-card-view .source-script-pill code {
  color: var(--ink-2);
  font-family: inherit;
  font-size: inherit;
}
.stats-card-view .source-script-pill-edited {
  color: #8b6a12;
  background: rgba(176,136,24,0.08);
  border-color: rgba(176,136,24,0.22);
  font-family: var(--sans);
  font-style: italic;
}
.stats-card-view .source-script-empty {
  color: var(--ink-3);
  font-family: var(--sans);
  font-style: italic;
}
.stats-card-view .source-location-edit-slot {
  margin-bottom: 14px;
}
.stats-card-view .source-location-edit-card {
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line-soft, #f3f3f3);
  background: transparent;
}
.stats-card-view .source-location-edit-title {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 10px;
}
.stats-card-view .source-location-field {
  display: grid;
  gap: 5px;
  margin-bottom: 8px;
}
.stats-card-view .source-location-field.compact {
  max-width: 96px;
}
.stats-card-view .source-location-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.stats-card-view .source-location-input {
  width: 100%;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 9px;
}
.stats-card-view .source-location-input:focus {
  outline: none;
  border-color: var(--ink-3);
}
.stats-card-view .source-location-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}
.stats-card-view .source-location-btn {
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-2);
}
.stats-card-view .source-location-btn.primary {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.stats-card-view .source-path-chip,
.stats-card-view .source-hash-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  box-sizing: border-box;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-2);
}
.stats-card-view .source-path-chip {
  flex: 1;
  min-width: 0;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-card-view .source-hash-chip {
  flex: 0 0 auto;
  padding: 0 7px;
}
.stats-card-view .source-chip-sep {
  flex: 0 0 auto;
  color: var(--ink-3);
}
.stats-card-view .git-dirty {
  color: #b08818; font-style: italic; font-size: 11.5px;
}
/* Whole-row "click to open in RStudio" affordance. The Script meta row
   gets a subtle hover lift + the .rstudio-hint at the right edge
   becomes the visible call-to-action. Keyboard-focusable too. */
.stats-card-view .source-meta-row.source-meta-clickable {
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  margin: 0 -8px 14px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 4px;
}
.stats-card-view .source-meta-row.source-meta-clickable:hover,
.stats-card-view .source-meta-row.source-meta-clickable:focus-visible {
  background: rgba(45,74,110,0.04);
  outline: none;
}
.stats-card-view .source-meta-row.source-meta-clickable:hover .rstudio-hint,
.stats-card-view .source-meta-row.source-meta-clickable:focus-visible .rstudio-hint {
  color: var(--white);
  background: var(--ink-2);
  border-color: var(--ink-2);
}
.stats-card-view .rstudio-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--ink);
  color: var(--white);
  font-size: 11.5px;
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.stats-card-view .rstudio-hint svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
/* Soft hint shown when an R-sourced card came in without a script
   block. Lives between the source-meta-rows; muted serif italic so
   it reads as an aside, not a warning. */
.stats-card-view .source-script-hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  padding: 6px 0 2px;
  margin: 0 0 6px;
}
.stats-card-view .stats-card-label-btn .stats-label-swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--ed-bg, #fff);
  border: 1.5px solid var(--ed-text-subtle, #b0aaa0);
  flex-shrink: 0;
}
.stats-stale-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px auto 16px;
  max-width: 720px;
  padding: 10px 14px;
  background: rgba(176,136,24,0.10);
  border: 1px solid rgba(176,136,24,0.35);
  border-radius: 8px;
  font-size: 13px;
}
.stats-stale-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #b08818;
  flex-shrink: 0;
}
.stats-stale-msg {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink);
  flex: 1;
  line-height: 1.5;
}
.stats-stale-msg em {
  font-style: italic;
  color: var(--ink);
}
.stats-stale-msg code {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11.5px;
  background: var(--white);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--line);
}
.stats-stale-msg .stale-hashes {
  font-style: normal;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-3);
  margin-left: 4px;
}
.stats-stale-dismiss {
  background: transparent;
  border: none;
  color: var(--ink-3);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  font-family: var(--sans);
}
.stats-stale-dismiss:hover { color: var(--ink); }

.stats-card-view .source-raw {
  margin-top: 6px;
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}
.stats-card-view .source-raw-summary {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  user-select: none;
}
.stats-card-view .source-raw-summary::-webkit-details-marker { display: none; }
.stats-card-view .source-raw-summary::before {
  content: '▸';
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  transition: transform 0.12s;
  transform: translateY(1px);
}
.stats-card-view .source-raw[open] .source-raw-summary::before {
  transform: translateY(1px) rotate(90deg);
}
.stats-card-view .source-raw-summary:hover { color: var(--ink); }
.stats-card-view .source-raw-summary .meta {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-3);
  font-size: 11px;
  margin-left: 6px;
}
.stats-card-view .source-raw-pre {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 10px 12px;
  margin: 6px 0 0 0;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 360px;
  overflow-y: auto;
}
.stats-card-view .source-raw-edit {
  display: block;
  width: 100%;
  min-height: 180px;
  max-height: 380px;
  box-sizing: border-box;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 6px 0 0 0;
  line-height: 1.55;
  resize: vertical;
}
.stats-card-view .source-raw-edit:focus {
  outline: none;
  border-color: rgba(45,74,110,0.32);
  box-shadow: 0 0 0 2px rgba(45,74,110,0.08);
}
.stats-card-view .source-raw-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}
.stats-card-view .source-raw-btn {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-2);
  border-radius: 7px;
  padding: 6px 10px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}
.stats-card-view .source-raw-btn:hover {
  background: var(--cream, #fafaf9);
  border-color: var(--ink-3);
  color: var(--ink);
}
.stats-card-view .source-raw-btn.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}
.stats-card-view .source-raw-btn.primary:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: var(--white);
}


/* ════════════════════════════════════════════
   LIBRARY (Hub view) — v9 design system
   Internally still #hub (storage/IDs unchanged).
════════════════════════════════════════════ */

/* Design tokens — scoped to #hub so they don't pollute global */
#hub {
  --hub-bg:           #ffffff;
  --hub-surface:      #ffffff;
  --hub-surface-alt:  #ffffff;
  --hub-sidebar-bg:   #f4f6f8;
  --hub-border:       #e3e7ec;
  --hub-border-soft:  #eef1f4;
  --hub-text-pri:     #1b1e24;
  --hub-text-sec:     #545a64;
  --hub-text-muted:   #878d97;
  --hub-text-subtle:  #b9bec6;
  --hub-hover-bg:     #eef1f5;
  --hub-tint:         #e9edf1;
  --hub-data:         #46607a;
  --hub-shadow-hover: 0 6px 24px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

/* Reset internal layout — drop the .app-wrap / rail / hub-main flex chain */
#hub.view {
  background: var(--hub-bg);
  color: var(--hub-text-pri);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  overflow: hidden;
}
#hub.view { display: none; }
#hub.view.on { display: flex; flex-direction: column; }
#hub .app-wrap { display: contents; height: auto; }
#hub .rail { display: none; }

/* ── TOP BAR ───────────────────────────────────────────────────────── */
#hub .lib-topbar {
  height: 64px;
  display: flex;
  align-items: baseline;
  padding: 22px 32px 0;
  background: var(--hub-bg);
  position: relative;
  z-index: 2;
  gap: 56px;
  flex-shrink: 0;
}
#hub .lib-brand {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--hub-text-pri);
  line-height: 1;
  cursor: pointer;
}
#hub .lib-brand em { font-style: italic; font-weight: 500; }
#hub .lib-topbar-spacer { flex: 1; }

#hub .ch-tabs { display: flex; gap: 28px; align-items: baseline; }
#hub .ch-tab {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--hub-text-muted);
  cursor: pointer;
  padding-bottom: 4px;
  line-height: 1.2;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: color 0.12s, border-color 0.12s;
  letter-spacing: -0.005em;
}
#hub .ch-tab .num {
  font-style: italic;
  color: var(--hub-text-subtle);
  margin-right: 6px;
  font-size: 12.5px;
}
#hub .ch-tab:hover { color: var(--hub-text-pri); }
#hub .ch-tab.active {
  color: var(--hub-text-pri);
  border-bottom-color: var(--hub-text-pri);
}
#hub .ch-tab.active .num { color: var(--hub-text-sec); }

#hub .lib-avatar-wrap { position: relative; }
#hub .lib-avatar {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--hub-text-sec);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  border: none;
  background: transparent;
  transition: color 0.12s;
}
#hub .lib-avatar:hover { color: var(--hub-text-pri); }
#hub .lib-avatar-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--hub-surface);
  border: 1px solid var(--hub-border);
  border-radius: 8px;
  box-shadow: var(--hub-shadow-hover);
  padding: 6px;
  display: none;
  z-index: 50;
}
#hub .lib-avatar-menu.open { display: block; }
#hub .lib-avatar-menu-info {
  padding: 8px 10px 8px;
  font-size: 12.5px;
  color: var(--hub-text-muted);
  border-bottom: 1px solid var(--hub-border-soft);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#hub .lib-avatar-menu-info:empty { display: none; }
#hub .lib-avatar-menu-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--hub-text-pri);
  cursor: pointer;
  line-height: 1.3;
  transition: background 0.12s;
}
#hub .lib-avatar-menu-btn:hover { background: var(--hub-hover-bg); }

/* ── SHELL ─────────────────────────────────────────────────────────── */
#hub .lib-shell {
  --library-sidebar-width: 320px;
  display: grid;
  grid-template-columns: var(--library-sidebar-width) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

/* ── SIDEBAR ───────────────────────────────────────────────────────── */
#hub .lib-sidebar {
  background: var(--hub-sidebar-bg);
  border-right: 1px solid var(--hub-border);
  padding: 24px 22px 24px 26px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

#hub .mellio-sidebar-resize,
#editor .mellio-sidebar-resize {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--hub-text-subtle, var(--ed-text-subtle, #c5c5c5));
  cursor: col-resize;
  touch-action: none;
}
#hub .mellio-sidebar-resize::before,
#editor .mellio-sidebar-resize::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 1px;
  background: currentColor;
  opacity: 0.18;
  transition: opacity 0.12s, background 0.12s;
}
#hub .mellio-sidebar-resize::after,
#editor .mellio-sidebar-resize::after {
  content: '';
  width: 4px;
  height: 34px;
  border-radius: 999px;
  background:
    radial-gradient(circle, currentColor 1.1px, transparent 1.4px)
    center 5px / 4px 7px repeat-y;
  opacity: 0.34;
  transition: opacity 0.12s;
}
#hub .mellio-sidebar-resize:hover,
#hub .mellio-sidebar-resize:focus-visible,
#editor .mellio-sidebar-resize:hover,
#editor .mellio-sidebar-resize:focus-visible {
  color: var(--hub-text-muted, var(--ed-text-muted, #a0a0a0));
  outline: none;
}
#hub .mellio-sidebar-resize:hover::before,
#hub .mellio-sidebar-resize:focus-visible::before,
#hub .mellio-sidebar-resize:hover::after,
#hub .mellio-sidebar-resize:focus-visible::after,
#editor .mellio-sidebar-resize:hover::before,
#editor .mellio-sidebar-resize:focus-visible::before,
#editor .mellio-sidebar-resize:hover::after,
#editor .mellio-sidebar-resize:focus-visible::after,
body.mellio-sidebar-is-resizing #hub .mellio-sidebar-resize::before,
body.mellio-sidebar-is-resizing #hub .mellio-sidebar-resize::after,
body.mellio-sidebar-is-resizing #editor .mellio-sidebar-resize::before,
body.mellio-sidebar-is-resizing #editor .mellio-sidebar-resize::after {
  opacity: 1;
}
body.mellio-sidebar-is-resizing {
  cursor: col-resize;
  user-select: none;
}
body.mellio-sidebar-is-resizing * {
  cursor: col-resize !important;
}
/* ════════════════════════════════════════════
   RESIZE PAINT-COST FIX — backdrop-filter on inactive overlays
   ════════════════════════════════════════════
   Diagnosed via DevTools paint-flashing: on every window resize step,
   the entire page was painting green. Cause: ~20 full-viewport overlay
   elements (confirm dialogs, modals, drag-dialog containers, lib
   compare, settings, fig format, saved tables overlays) all sit in
   the DOM with `position: fixed; inset: 0; opacity: 0; backdrop-filter:
   blur(...)`. Even though they're invisible via opacity, the browser
   still computes the backdrop blur on every paint — and on resize, the
   blur recalculates for the new viewport area. With ~20 of these
   running per frame, every resize repaints the whole page.

   Fix: disable backdrop-filter entirely when the overlay is NOT in its
   `.open` state. The blur only matters when the overlay is visible to
   the user. opacity:0 + pointer-events:none keeps closed overlays
   invisible and non-interactive; removing backdrop-filter eliminates
   the paint cost. Result: resize repaints only the elements actually
   changing size, not the entire page. */
.confirm-overlay:not(.open),
.drag-dialog-overlay:not(.open),
.saved-tables-overlay:not(.open),
.lib-compare-overlay:not(.open),
.fig-format-overlay:not(.open),
.settings-overlay:not(.open),
.memo-drawer-overlay:not(.open) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Loaded stats cards can contain wide, structured result content that flickers
   during resize. Suppress transitions in the editor pane only; the source pane
   must keep the shared Tables/Figures collapse motion. */
body.mellio-stats-loaded #statsMode #statsCardSplit > .editor-main,
body.mellio-stats-loaded #statsMode #statsCardSplit > .editor-main * {
  transition: none !important;
  animation: none !important;
}
body.mellio-stats-loaded #statsMode .rcard-structural .rcard-inspect.is-animating .rcard-inspect-body {
  transition: height 220ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 160ms ease,
              transform 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
@media (prefers-reduced-motion: reduce) {
  body.mellio-stats-loaded #statsMode .rcard-structural .rcard-inspect.is-animating .rcard-inspect-body {
    transition: none !important;
  }
}

/* Resize-time transition suppression.
   Two resize sources fire transitions on the layout chain:
     1) `mellio-sidebar-is-resizing` — user dragging a source-pane handle,
        changes the `--source-pane-width` variable, which changes
        `.split`'s grid-template-columns.
     2) `mellio-window-is-resizing` — viewport resize, changes the
        resolved width of `.split`'s `minmax(0, 1fr)` track and any
        intrinsic-sized children below it.
   Both fire `.split`'s `transition: grid-template-columns` continuously
   and produce a visible flash. Suppress transitions on the affected
   elements while either resize is active. JS toggles the body classes
   (sidebar in app.js sidebar-drag handler, window via the debounced
   resize listener added in this file). */
body.mellio-sidebar-is-resizing #hub .lib-shell,
body.mellio-sidebar-is-resizing #editor .split,
body.mellio-sidebar-is-resizing #editor .source,
body.mellio-sidebar-is-resizing .stats-card-view,
body.mellio-sidebar-is-resizing .stats-card-view *,
body.mellio-window-is-resizing #hub .lib-shell,
body.mellio-window-is-resizing #editor .split,
body.mellio-window-is-resizing #editor .source,
body.mellio-window-is-resizing .stats-card-view,
body.mellio-window-is-resizing .stats-card-view * {
  transition: none !important;
  animation: none !important;
}
#hub .lib-sidebar-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  background: transparent;
  border: 1px solid var(--hub-border);
  border-radius: 8px;
  margin-bottom: 30px;
  color: var(--hub-text-muted);
  font-size: 13px;
  transition: border-color 0.12s, background 0.12s;
}
#hub .lib-sidebar-search:hover,
#hub .lib-sidebar-search:focus-within {
  background: var(--hub-hover-bg);
  border-color: var(--hub-text-muted);
}
#hub .lib-sidebar-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  color: var(--hub-text-pri);
  min-width: 0;
}
#hub .lib-sidebar-search input::placeholder { color: var(--hub-text-muted); }
#hub .lib-sidebar-search-icon { opacity: 0.5; flex-shrink: 0; }

#hub .nav-group { display: flex; flex-direction: column; gap: 1px; }

/* Top-level filter rows */
#hub .nav-item {
  --nav-type-accent: var(--hub-text-pri);
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 10px;
  border-radius: 7px;
  font-size: 13.5px;
  color: var(--hub-text-sec);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  line-height: 1.4;
  border: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
}
#hub .nav-item[data-hub-tab="tables"] { --nav-type-accent: #3f735c; }
#hub .nav-item[data-hub-tab="figures"] { --nav-type-accent: #7b5aa6; }
#hub .nav-item[data-hub-tab="stats"] { --nav-type-accent: #c65f3d; }
#hub .nav-item:hover { background: var(--hub-hover-bg); color: var(--hub-text-pri); }
#hub .nav-item.active {
  background: var(--hub-tint);
  color: var(--hub-text-pri);
  font-weight: 500;
}
#hub .nav-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hub-text-muted);
  transition: color 0.12s;
}
#hub .nav-item[data-hub-tab="tables"] .nav-icon,
#hub .nav-item[data-hub-tab="figures"] .nav-icon,
#hub .nav-item[data-hub-tab="stats"] .nav-icon {
  color: color-mix(in srgb, var(--nav-type-accent) 74%, var(--hub-text-muted));
}
#hub .nav-item:hover .nav-icon,
#hub .nav-item.active .nav-icon { color: var(--nav-type-accent); }
#hub .nav-count {
  font-size: 11.5px;
  color: var(--hub-text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
#hub .nav-item[data-hub-tab="tables"] .nav-count,
#hub .nav-item[data-hub-tab="figures"] .nav-count,
#hub .nav-item[data-hub-tab="stats"] .nav-count {
  color: color-mix(in srgb, var(--nav-type-accent) 58%, var(--hub-text-muted));
}

/* ── PROJECTS (renamed from Folders for UI) ──────────────────────── */
#hub .proj-item {
  display: grid;
  grid-template-columns: 20px 18px minmax(0, 1fr) minmax(28px, auto);
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 7px 10px 7px 6px;
  border-radius: 7px;
  font-size: 13.5px;
  color: var(--hub-text-sec);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  line-height: 1.4;
  border: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
  position: relative;
}
#hub .proj-item:hover { background: var(--hub-hover-bg); color: var(--hub-text-pri); }
#hub .proj-item[data-reorderable="true"] { cursor: grab; }
#hub .proj-item.project-dragging {
  opacity: 0.42;
  cursor: grabbing;
}
#hub .proj-item.project-drop-before::after,
#hub .proj-item.project-drop-after::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  border-radius: 999px;
  background: var(--hub-text-pri);
  box-shadow: 0 0 0 2px var(--hub-bg);
  pointer-events: none;
}
#hub .proj-item.project-drop-before::after { top: -2px; }
#hub .proj-item.project-drop-after::after { bottom: -2px; }
#hub .proj-item.active {
  background: var(--hub-tint);
  color: var(--hub-text-pri);
  font-weight: 500;
}
#hub .proj-chevron {
  color: var(--hub-text-subtle);
  font-size: 15px;
  line-height: 1;
  text-align: center;
  transition: transform 0.15s, color 0.12s;
  user-select: none;
  cursor: pointer;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#hub .proj-item.has-children .proj-chevron { color: var(--hub-text-muted); background: rgba(0,0,0,0.035); }
#hub .proj-item:hover .proj-chevron,
#hub .proj-item.active .proj-chevron { color: var(--hub-text-pri); }
#hub .proj-chevron.expanded { transform: rotate(90deg); }
#hub .proj-chevron.empty { visibility: hidden; background: transparent; }

/* Project glyph: outline when uncolored, filled with the project color
   when set. fill/stroke inherit through the <use> shadow tree. */
#hub .proj-ico {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  fill: none;
  stroke: var(--hub-text-subtle);
  stroke-width: 1.3px;
  stroke-linejoin: round;
}
#hub .proj-ico svg { width: 15px; height: 15px; }
#hub .proj-item:not(.proj-colored):hover .proj-ico { stroke: var(--hub-text-muted); }
#hub .proj-item.proj-colored .proj-ico { fill: var(--fc); stroke: var(--fc); }

#hub .proj-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Trailing slot: item count at rest, ⋯ actions button on hover/focus. */
#hub .proj-trail {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 28px;
  height: 21px;
}
#hub .proj-count {
  font-size: 11.5px;
  color: var(--hub-text-muted);
  font-variant-numeric: tabular-nums;
}
#hub .proj-more {
  display: none;
  width: 21px;
  height: 21px;
  border-radius: 5px;
  align-items: center;
  justify-content: center;
  color: var(--hub-text-muted);
  cursor: pointer;
}
#hub .proj-more svg { width: 15px; height: 15px; }
#hub .proj-more:hover { background: rgba(0,0,0,0.07); color: var(--hub-text-pri); }
#hub .proj-item:hover .proj-count,
#hub .proj-item:focus-within .proj-count { display: none; }
#hub .proj-item:hover .proj-more,
#hub .proj-item:focus-within .proj-more { display: flex; }

/* One recursive wrapper; padding-left compounds the indent per level. */
#hub .proj-children {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--hub-border-soft);
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
#hub .proj-children.collapsed { max-height: 0; }
#hub .proj-children .proj-item {
  font-size: 12.5px;
  color: var(--hub-text-muted);
}
#hub .proj-children .proj-item::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  width: 12px;
  border-top: 1px solid var(--hub-border-soft);
}
#hub .proj-children .proj-item:hover { color: var(--hub-text-pri); }
#hub .proj-children .proj-item.active { color: var(--hub-text-pri); font-weight: 500; }
#hub .proj-children .proj-count { font-size: 11px; }

#hub .lib-section-label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hub-text-muted);
  padding: 0 14px;
  margin: 28px 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 1;
}
#hub .lib-section-add {
  color: var(--hub-text-muted);
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  padding: 0 4px;
  background: transparent;
  border: none;
}
#hub .lib-section-add:hover { color: var(--hub-text-pri); }

#hub .lib-side-footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--hub-border-soft);
}

#hub .lib-quota {
  margin-top: auto;
  padding: 24px 14px 0;
  border-top: 1px solid var(--hub-border-soft);
}
#hub .lib-quota-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hub-text-muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
#hub .lib-quota-bar {
  height: 3px;
  background: var(--hub-border);
  border-radius: 2px;
  overflow: hidden;
}
#hub .lib-quota-fill {
  height: 100%;
  background: var(--hub-text-sec);
  width: 32%;
}

/* ── MAIN ──────────────────────────────────────────────────────────── */
#hub .lib-main {
  padding: 22px 56px 80px;
  overflow-y: auto;
  min-width: 0;
}

#hub .lib-h-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 24px;
  flex-wrap: wrap;
}
#hub .lib-h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--hub-text-pri);
  line-height: 1.05;
}
#hub .lib-h-actions { display: flex; gap: 18px; align-items: center; }
#hub .lib-h-spacer { flex: 1; }

/* ── Library multi-select ─────────────────────────────────────────── */
#hub .lib-card { position: relative; }
#hub .lib-card-select {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 21px;
  height: 21px;
  border: 1.5px solid color-mix(in srgb, var(--hub-text-muted, #9b9891) 54%, var(--hub-border, #d4d0c8));
  border-radius: 5px;
  background: rgba(255,255,255,0.96);
  color: transparent;
  cursor: pointer;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.78;
  transition: opacity 0.14s, background 0.12s, border-color 0.12s, color 0.12s;
}
#hub .lib-card:hover .lib-card-select { opacity: 1; }
#hub .lib-card-select:hover {
  border-color: var(--hub-text-pri, #2a2620);
  background: #fff;
  opacity: 1;
}
#hub .lib-card-select.checked {
  background: var(--hub-text-pri, #2a2620);
  border-color: var(--hub-text-pri, #2a2620);
  color: #fff;
  opacity: 1;
}
#hub .lib-card.is-selected {
  outline: 2px solid var(--hub-text-pri, #2a2620);
  outline-offset: -2px;
}
#hub .lib-card.is-selected .lib-card-select { opacity: 1; }

#hub .lib-sel-bar {
  position: fixed;
  left: 320px;
  right: 56px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 10px 12px;
  background: rgba(255,255,255,0.94);
  color: var(--hub-text-pri, #1a1a1a);
  border: 1px solid var(--hub-border, #ebebeb);
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
  backdrop-filter: blur(16px);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}
#hub .lib-sel-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#hub .lib-sel-bar-close {
  background: transparent;
  border: 1px solid var(--hub-border, #ebebeb);
  color: inherit;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#hub .lib-sel-bar-close:hover { background: var(--hub-hover-bg, #f5f5f5); }
#hub .lib-sel-bar-count {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
#hub .lib-sel-bar-types {
  color: var(--hub-text-sec, #6e6e6e);
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
}
#hub .lib-sel-bar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
#hub .lib-sel-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--hub-border, #ebebeb);
  border-radius: 6px;
  color: inherit;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s;
}
#hub .lib-sel-bar-btn:hover {
  background: var(--hub-hover-bg, #f5f5f5);
  border-color: var(--hub-text-subtle, #c5c5c5);
}
#hub .lib-sel-bar-btn.primary {
  background: var(--hub-text-pri, #1a1a1a);
  border-color: var(--hub-text-pri, #1a1a1a);
  color: #fff;
}
#hub .lib-sel-bar-btn.primary:hover {
  background: #000;
  border-color: #000;
}
#hub .lib-sel-bar-btn.danger {
  color: #7b2e2e;
}
#hub .lib-sel-bar-btn.danger:hover {
  background: #fff7f7;
  border-color: #e3b8b8;
}
#hub .lib-sel-bar-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lib-bulk-label-menu {
  position: fixed;
  z-index: 80;
  width: 244px;
  padding: 10px;
  background: rgba(255,255,255,0.98);
  color: var(--hub-text-pri, #1a1a1a);
  border: 1px solid var(--hub-border, #ebebeb);
  border-radius: 8px;
  box-shadow: 0 18px 46px rgba(0,0,0,0.16), 0 2px 10px rgba(0,0,0,0.08);
  font-family: 'Inter', sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(0.985);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.lib-bulk-label-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.lib-bulk-label-head {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
}
.lib-bulk-label-sub {
  color: var(--hub-text-sec, #6e6e6e);
  font-size: 11.5px;
  line-height: 1.35;
  margin-bottom: 10px;
}
.lib-bulk-label-swatches {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lib-bulk-label-color {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  flex-shrink: 0;
}
.lib-bulk-label-color:hover {
  transform: scale(1.12);
}
.lib-bulk-label-color.active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--hub-text-pri, #1a1a1a);
}
.lib-bulk-label-none {
  background: #f5f2eb;
  border-color: #d4cec4;
  position: relative;
}
.lib-bulk-label-none::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 1px;
  right: 1px;
  height: 1.5px;
  background: #b8493a;
  transform: rotate(-45deg);
}

@media (max-width: 760px) {
  #hub .lib-sel-bar {
    left: 12px;
    right: 12px;
    bottom: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #hub .lib-sel-bar-actions {
    width: 100%;
    overflow-x: auto;
  }
  #hub .lib-sel-bar-btn {
    justify-content: center;
    min-height: 34px;
    flex: 1;
  }
}

.lib-sel-ctx-menu .lib-sel-ctx-header {
  padding: 6px 14px 4px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ed-text-muted, #888);
  font-weight: 500;
}

/* ── Library Quick Compare modal ─────────────────────────────────── */
body.lib-compare-open {
  overflow: hidden;
}
.lib-compare-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(18, 18, 18, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  backdrop-filter: blur(4px);
}
.lib-compare-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.lib-compare-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 151;
  width: min(1180px, calc(100vw - 40px));
  height: min(760px, calc(100vh - 40px));
  transform: translate(-50%, -48%) scale(0.985);
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  color: #1a1a1a;
  border: 1px solid #e7e4df;
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(0,0,0,0.24), 0 4px 18px rgba(0,0,0,0.10);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.lib-compare-modal.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.lib-compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid #ece9e3;
  background: linear-gradient(180deg, #fff 0%, #fbfaf8 100%);
  flex-shrink: 0;
}
.lib-compare-kicker {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8f8a82;
  font-weight: 600;
  margin-bottom: 4px;
}
.lib-compare-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  line-height: 1.1;
  color: #1a1a1a;
}
.lib-compare-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lib-compare-ghost,
.lib-compare-close,
.lib-compare-open-btn {
  border: 1px solid #e7e4df;
  background: #fff;
  color: #34312d;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.lib-compare-ghost,
.lib-compare-open-btn {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
}
.lib-compare-close {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}
.lib-compare-ghost:hover,
.lib-compare-open-btn:hover,
.lib-compare-close:hover {
  background: #f6f5f2;
  border-color: #cfcac0;
}
.lib-compare-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  background: #f7f6f3;
}
.lib-compare-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid #e7e4df;
}
.lib-compare-panel:last-child {
  border-right: none;
}
.lib-compare-panel-head {
  padding: 16px 18px 13px;
  border-bottom: 1px solid #ece9e3;
  flex-shrink: 0;
}
.lib-compare-panel-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
.lib-compare-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid #e5e1da;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: #4d4840;
  background: #fbfaf8;
}
.lib-compare-type .lib-card-meta-icon {
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.lib-compare-type .lib-card-meta-icon svg {
  width: 12px;
  height: 12px;
}
.lib-compare-side {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 12.5px;
  font-style: italic;
  color: #8f8a82;
}
.lib-compare-panel-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 21px;
  line-height: 1.18;
  color: #1a1a1a;
  overflow-wrap: anywhere;
  margin-bottom: 12px;
}
.lib-compare-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
}
.lib-compare-meta-row {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #5f5b54;
}
.lib-compare-meta-k {
  flex: 0 0 auto;
  color: #9a948a;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.lib-compare-meta-v {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lib-compare-meta-label {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.12);
  flex: 0 0 auto;
}
.lib-compare-preview-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 22px;
  background:
    linear-gradient(90deg, rgba(247,246,243,0.9), rgba(255,255,255,0) 36px),
    #fff;
}
.lib-compare-preview {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.lib-compare-preview-inner {
  width: 100%;
  max-width: 560px;
}
.lib-compare-preview-inner table {
  width: 100%;
  border-collapse: collapse;
}
.lib-compare-preview-inner th,
.lib-compare-preview-inner td {
  white-space: normal;
}
.lib-compare-preview-inner img {
  max-width: 100%;
  height: auto;
}
.lib-compare-table,
.lib-compare-stat,
.lib-compare-figure,
.lib-compare-document {
  width: 100%;
}
.lib-compare-stat {
  font-size: 14px;
  line-height: 1.65;
}
.lib-compare-stat .rcard {
  max-width: none;
}
.lib-compare-document {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  line-height: 1.65;
  color: #34312d;
  white-space: pre-wrap;
}
.lib-compare-empty {
  width: 100%;
  padding: 42px 20px;
  border: 1px dashed #ddd7cd;
  border-radius: 8px;
  color: #8f8a82;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  text-align: center;
}
.lib-compare-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid #ece9e3;
  background: #fbfaf8;
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .lib-compare-modal {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
  }
  .lib-compare-head {
    align-items: flex-start;
    padding: 14px;
  }
  .lib-compare-title {
    font-size: 20px;
  }
  .lib-compare-grid {
    grid-template-columns: 1fr;
    overflow: auto;
  }
  .lib-compare-panel {
    min-height: 560px;
    border-right: none;
    border-bottom: 1px solid #e7e4df;
  }
  .lib-compare-panel:last-child {
    border-bottom: none;
  }
  .lib-compare-meta {
    grid-template-columns: 1fr;
  }
  .lib-compare-preview-scroll {
    padding: 16px;
  }
}

#hub .lib-h-action {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--hub-text-sec);
  background: transparent;
  border: 1px solid var(--hub-border);
  border-radius: 7px;
  padding: 8px 14px;
  cursor: pointer;
  align-self: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
#hub .lib-h-action:hover {
  background: var(--hub-hover-bg, rgba(0,0,0,0.03));
  border-color: var(--hub-text-muted);
  color: var(--hub-text-pri);
}
#hub .lib-search-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid var(--hub-border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--hub-text-muted);
  min-width: 320px;
  transition: border-color 0.12s, background 0.12s;
}
#hub .lib-search-bar:focus-within {
  border-color: var(--hub-text-muted);
  background: var(--hub-hover-bg);
}
#hub .lib-search-bar input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  color: var(--hub-text-pri);
  min-width: 0;
}
#hub .lib-search-bar input::placeholder { color: var(--hub-text-muted); }
#hub .lib-search-bar svg { opacity: 0.55; flex-shrink: 0; }

/* ── FILTERS ───────────────────────────────────────────────────────── */
#hub .lib-filters {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-bottom: 36px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hub-border-soft);
  flex-wrap: wrap;
}
#hub .lib-color-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#hub .lib-color-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  background: #ffffff;
  border: 1px solid var(--hub-border);
  border-radius: 10px;
  cursor: pointer;
  padding: 0 8px 0 12px;
  user-select: none;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 13px;
  color: var(--hub-text-pri);
  transition: color 0.12s, border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
#hub .lib-color-toggle:hover {
  border-color: var(--hub-text-muted);
  background: var(--hub-hover-bg);
}
#hub .lib-color-toggle.has-active-filter,
#hub .lib-memo-filter.active {
  border-color: var(--hub-text-pri);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.04);
}
#hub .lib-memo-filter {
  gap: 6px;
  padding-right: 10px;
}
#hub .lib-memo-filter svg {
  width: 13px;
  height: 13px;
  color: var(--hub-text-muted);
}
#hub .lib-memo-filter.active svg,
#hub .lib-memo-filter:hover svg {
  color: var(--hub-text-pri);
}
#hub .lib-memo-filter:disabled {
  opacity: 0.55;
  cursor: default;
}
#hub .lib-memo-filter:disabled:hover {
  border-color: var(--hub-border);
  background: #ffffff;
}
#hub .lib-color-toggle-label {
  font-weight: 500;
  letter-spacing: 0;
  color: var(--hub-text-pri);
}
#hub .lib-color-toggle-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--hub-text-muted);
  font-size: 12px;
  white-space: nowrap;
}
#hub .lib-color-toggle-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  flex-shrink: 0;
}
#hub .lib-color-toggle .chev {
  font-style: normal;
  width: 18px;
  height: 18px;
  border: 1px solid var(--hub-border);
  border-radius: 50%;
  background: #fff;
  font-size: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transform: none;
  transition: color 0.16s, border-color 0.16s, background 0.16s;
  color: var(--hub-text-sec);
}
#hub .lib-color-toggle .chev::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translate(-58%, -50%) rotate(-45deg);
  transform-origin: center;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#hub .lib-color-toggle:hover .chev {
  border-color: var(--hub-text-muted);
  color: var(--hub-text-pri);
}
#hub .lib-color-toggle.open .chev {
  border-color: var(--hub-text-muted);
  background: var(--hub-hover-bg);
  color: var(--hub-text-pri);
}
#hub .lib-color-toggle.open .chev::before {
  transform: translate(-50%, -58%) rotate(45deg);
}

/* Animated horizontal accordion for the dot panel */
#hub .lib-color-panel {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: max-width 0.28s ease-out, opacity 0.18s 0.04s ease-out, padding 0.2s ease-out;
  padding-left: 0;
}
#hub .lib-color-panel.open {
  max-width: 720px;
  opacity: 1;
  padding-left: 4px;
}
#hub .lib-color-panel > div {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

#hub .lib-color-chip {
  height: 28px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--hub-text-sec);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  transition: color 0.12s, background 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
#hub .lib-color-chip:hover {
  color: var(--hub-text-pri);
  background: var(--hub-hover-bg);
  transform: translateY(-1px);
}
#hub .lib-color-chip.active {
  color: var(--hub-text-pri);
  background: #ffffff;
  border-color: var(--hub-text-pri);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.04);
}
#hub .lib-color-chip-swatch {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10);
  flex-shrink: 0;
}
#hub .lib-color-chip-count {
  min-width: 1ch;
  text-align: left;
}

#hub .lib-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: currentColor;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  padding: 0;
  flex-shrink: 0;
}
#hub .lib-color-dot:hover { transform: scale(1.15); }
#hub .lib-color-dot.active {
  border-color: var(--hub-text-pri);
  box-shadow: 0 0 0 2px var(--hub-bg);
}
#hub .lib-color-clear {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--hub-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  margin-left: 2px;
  padding: 4px;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.12s, text-decoration-color 0.12s;
}
#hub .lib-color-clear:hover { color: var(--hub-text-pri); text-decoration-color: currentColor; }
#hub .lib-color-empty-hint {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--hub-text-muted);
  white-space: nowrap;
}
#hub .lib-filter-spacer { flex: 1; }
#hub .lib-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--hub-border);
  border-radius: 8px;
  background: rgba(255,255,255,0.72);
}
#hub .lib-view-btn {
  width: 28px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--hub-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
#hub .lib-view-btn:hover { color: var(--hub-text-pri); background: rgba(0,0,0,0.035); }
#hub .lib-view-btn.active {
  color: var(--hub-text-pri);
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
#hub .lib-sort-wrap { display: inline-flex; }
#hub .menu-wrap { position: relative; }
#hub .lib-sort {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--hub-text-sec);
  cursor: pointer;
  user-select: none;
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--hub-border);
  border-radius: 8px;
}
#hub .lib-sort span { color: var(--hub-text-muted); }
#hub .lib-sort em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--hub-text-pri);
  white-space: nowrap;
}
#hub .lib-sort .chev-icon { width: 11px; height: 11px; color: var(--hub-text-muted); }
#hub .lib-sort:hover { color: var(--hub-text-pri); }
#hub .menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: var(--hub-bg);
  border: 1px solid var(--hub-border);
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(20, 20, 18, 0.12);
  padding: 6px;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.14s, transform 0.14s;
}
#hub .menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#hub .menu::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 18px;
  width: 11px;
  height: 11px;
  background: var(--hub-bg);
  border-top: 1px solid var(--hub-border);
  border-left: 1px solid var(--hub-border);
  transform: rotate(45deg);
}
#hub .menu-item {
  width: 100%;
  min-height: 32px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--hub-text-sec);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.1;
  text-align: left;
  cursor: pointer;
}
#hub .menu-item:hover {
  background: rgba(0,0,0,0.04);
  color: var(--hub-text-pri);
}
#hub .menu-item.current {
  background: rgba(0,0,0,0.055);
  color: var(--hub-text-pri);
  font-weight: 500;
}
#hub .menu-item.current::after {
  content: '✓';
  color: var(--hub-text-muted);
  font-size: 12px;
}
#hub .lib-sort-menu { min-width: 200px; }

/* ── BUCKETS + GRID ────────────────────────────────────────────────── */
#hub .lib-bucket-label {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  font-weight: 400;
  color: var(--hub-text-muted);
  margin-bottom: 18px;
  line-height: 1;
  letter-spacing: -0.005em;
}
#hub .lib-bucket-label .bullet { color: var(--hub-text-subtle); margin: 0 8px; }
#hub .lib-bucket { margin-bottom: 56px; }
#hub .lib-bucket.no-label { margin-top: 4px; }
#hub .lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

/* ── CARDS (replaces .hcard) ─────────────────────────────────────── */
#hub .lib-card {
  --lib-type-accent: var(--hub-text-muted);
  background: var(--hub-surface);
  border: 1px solid var(--hub-border);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#hub .lib-card[data-card-type="table"] {
  --lib-type-accent: #347a83;
}
#hub .lib-card[data-card-type="figure"] {
  --lib-type-accent: #806b9a;
}
#hub .lib-card[data-card-type="stat"] {
  --lib-type-accent: #b35d49;
}
#hub .lib-card:hover {
  transform: translateY(-1px);
  border-color: var(--hub-text-muted);
  box-shadow: var(--hub-shadow-hover);
}
#hub .lib-card-thumb {
  background: var(--hub-surface);
  height: 130px;
  padding: 22px 22px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
#hub .lib-card-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
#hub .lib-card-thumb .lib-thumb-table {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--hub-text-pri);
}
#hub .lib-card-thumb .lib-thumb-table::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--hub-surface));
  pointer-events: none;
}
/* Same trick as the tray preview — paperRerender bakes inline 12pt
   font sizes, so transform-scale the whole tree to thumbnail size. */
#hub .lib-card-thumb .lib-thumb-table > * {
  position: absolute;
  top: var(--lib-thumb-top, 12px);
  left: var(--lib-thumb-left, 16px);
  width: var(--lib-thumb-width, 218%);       /* 1 / 0.46 */
  transform: scale(var(--lib-thumb-scale, 0.46));
  transform-origin: top left;
  pointer-events: none;
}
#hub .lib-card-thumb .lib-thumb-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 10.5px;
  line-height: 1.35;
}
#hub .lib-card-thumb .lib-thumb-table caption,
#hub .lib-card-thumb .lib-thumb-table p { display: none; }
#hub .lib-card-thumb .lib-thumb-table thead {
  border-top: 1.2px solid var(--hub-text-sec);
  border-bottom: 0.6px solid var(--hub-text-muted);
}
#hub .lib-card-thumb .lib-thumb-table tbody { border-bottom: 1.2px solid var(--hub-text-sec); }
#hub .lib-card-thumb .lib-thumb-table th,
#hub .lib-card-thumb .lib-thumb-table td {
  padding: 3px 4px;
  text-align: right;
  font-weight: 400;
  white-space: nowrap;
}
#hub .lib-card-thumb .lib-thumb-table th:first-child,
#hub .lib-card-thumb .lib-thumb-table td:first-child { text-align: left; }
.mellio-combined-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.mellio-combined-section {
  break-inside: avoid;
  page-break-inside: avoid;
}
.mellio-combined-heading {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hub-text-muted, #8f8f8f);
  margin: 0 0 8px;
}
.mellio-combined-body > :first-child { margin-top: 0; }
.mellio-combined-body > :last-child { margin-bottom: 0; }
#hub .lib-card-thumb .lib-thumb-stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.7;
  color: var(--hub-text-sec);
  width: 100%;
}
#hub .lib-card-thumb .lib-thumb-stat .num { color: var(--hub-data); font-weight: 500; }
#hub .lib-card-thumb .lib-thumb-stat-card {
  position: absolute;
  inset: 14px;
  padding: 11px 12px 12px;
  border: 1px solid var(--hub-border);
  border-radius: 8px;
  background: var(--hub-bg);
  color: var(--hub-text-pri);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#hub .lib-card-thumb .lib-thumb-stat-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  font-family: 'Charter', 'Times New Roman', Georgia, serif;
  font-size: 12.5px;
  line-height: 1.48;
  color: var(--hub-text-pri);
}
#hub .lib-card-thumb .lib-thumb-stat-body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--hub-bg));
  pointer-events: none;
}
#hub .lib-card-thumb .lib-thumb-stat-body p {
  margin: 0;
}
#hub .lib-card-thumb .lib-thumb-stat-card.is-compact .lib-thumb-stat-body {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 1.42;
}
#hub .lib-card-thumb .lib-thumb-stat-card.is-compact .lib-thumb-stat-body::after {
  display: none;
}
#hub .lib-card-thumb .lib-thumb-stat-card.is-compact .lib-thumb-stat-body > * {
  width: 100%;
}
#hub .lib-card-thumb .lib-thumb-stat-body ol {
  margin: 0;
  padding-left: 17px;
}
#hub .lib-card-thumb .lib-thumb-stat-body li {
  margin: 0 0 3px;
}
/* Real saved figures store frozen preview HTML (image + caption) under
   `html`, like Tables. Scaled-down with the same transform pattern. */
#hub .lib-card-thumb .lib-thumb-figure {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--hub-text-pri);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14px 18px;
}
#hub .lib-card-thumb .lib-thumb-figure > * {
  position: static;
  width: auto;
  transform: none;
  pointer-events: none;
}
#hub .lib-card-thumb .lib-thumb-figure img {
  display: block;
  max-width: 100%;
  max-height: 102px;
  object-fit: contain;
  margin: 0 auto;
  transform: scale(var(--lib-figure-thumb-scale, 1));
  transform-origin: top center;
}
#hub .lib-card-thumb .lib-thumb-figure .fig-preview-caption {
  display: none;
  font-family: 'Charter', 'Iowan Old Style', 'Times New Roman', Times, serif;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--hub-text-pri);
  margin-top: 4px;
}
#hub .lib-card-thumb .lib-thumb-figure .fig-preview-note {
  display: none;
  font-size: 9.5px;
  color: var(--hub-text-sec);
  margin-top: 3px;
}
#hub .lib-card-thumb .lib-thumb-figure .mellio-combined-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
#hub .lib-card-thumb .lib-thumb-figure .mellio-combined-heading {
  display: none;
}
#hub .lib-card-thumb .lib-thumb-figure .mellio-combined-section {
  min-width: 0;
  overflow: hidden;
}
#hub .lib-card-thumb .lib-thumb-figure .mellio-combined-section img {
  max-height: 52px;
  transform: none;
}

/* Demo placeholder figures (line-chart / bar-chart inline SVG). Keep the
   pre-existing centered-fit treatment so the demo cards still look clean. */
#hub .lib-card-thumb .lib-thumb-figure-svg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#hub .lib-card-thumb .lib-thumb-figure-svg svg { width: 100%; height: 100%; max-height: 90px; }

#hub .lib-card-content { padding: 10px 22px 22px; }
#hub .lib-card-meta {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hub-text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
  gap: 8px;
}
#hub .lib-card-meta-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 62%;
  color: color-mix(in srgb, var(--lib-type-accent) 76%, var(--hub-text-muted));
  background: color-mix(in srgb, var(--lib-type-accent) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--lib-type-accent) 16%, transparent);
  border-radius: 999px;
  padding: 2px 7px 2px 6px;
  line-height: 1;
}
#hub .lib-card-meta-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#hub .lib-card-meta-icon {
  width: 12px;
  height: 12px;
  color: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#hub .lib-card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  color: var(--hub-text-pri);
  line-height: 1.32;
  letter-spacing: 0;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#hub .lib-grid .lib-card-title,
#hub .lib-grid .lib-card-project {
  box-sizing: border-box;
  width: calc(100% - 26px);
  max-width: calc(100% - 26px);
  padding-right: 0;
}
#hub .lib-grid .lib-card-project {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}

/* Library card flash highlight (when navigating from tray "View in Library") */
@keyframes hub-card-flash {
  0%, 100% { box-shadow: 0 0 0 1px var(--hub-border); }
  50%      { box-shadow: 0 0 0 2px var(--hub-data); }
}
#hub .lib-card.lib-card-flash {
  animation: hub-card-flash 0.6s ease-in-out 2;
}

/* Color label — small dot in the card meta line. Quieter and more
   content-led than a Trello-style edge stripe. */
#hub .lib-card-meta-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.card-memo-indicator {
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, currentColor 5%, transparent);
  color: var(--hub-text-muted, #7d858c);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.card-memo-indicator:hover,
.card-memo-indicator:focus-visible {
  color: var(--hub-text-pri, #1a1d24);
  background: color-mix(in srgb, currentColor 9%, transparent);
  border-color: color-mix(in srgb, currentColor 28%, transparent);
  outline: none;
}
.card-memo-indicator svg {
  width: 13px;
  height: 13px;
  pointer-events: none;
}
#hub .lib-card-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
#hub .lib-card-project {
  font-size: 12.5px;
  color: var(--hub-text-sec);
  line-height: 1.4;
  word-break: break-word;
}
#hub .lib-card-project .crumb { color: var(--hub-text-muted); }
#hub .lib-card-project .sep { color: var(--hub-text-subtle); margin: 0 5px; }

/* ── LIST VIEW ─────────────────────────────────────────────────────── */
#hub .lib-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#hub .lib-list-head {
  display: grid;
  grid-template-columns: 28px minmax(260px, 2.8fr) 84px minmax(104px, 0.85fr) 78px 28px 132px 84px;
  gap: 12px;
  align-items: center;
  padding: 0 14px 6px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hub-text-muted);
}
#hub .lib-list-head span {
  min-width: 0;
  justify-self: start;
}
#hub .lib-list-head span:nth-child(3),
#hub .lib-list-head span:nth-child(5),
#hub .lib-list-head span:nth-child(6),
#hub .lib-list-head span:nth-child(7) {
  justify-self: center;
  text-align: center;
}
#hub .lib-list-head span:last-child {
  justify-self: end;
}
#hub .lib-list-card {
  min-height: 48px;
  display: grid;
  grid-template-columns: 28px minmax(260px, 2.8fr) 84px minmax(104px, 0.85fr) 78px 28px 132px 84px;
  align-items: center;
  gap: 12px;
  padding: 5px 14px;
  overflow: visible;
}
#hub .lib-list-card:hover {
  transform: none;
}
#hub .lib-list-card .lib-card-select {
  position: static;
  justify-self: center;
  opacity: 0.92;
}
#hub .lib-list-main {
  min-width: 0;
}
#hub .lib-list-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
#hub .lib-list-title {
  min-width: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14.5px;
  color: var(--hub-text-pri);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#hub .lib-list-memo {
  width: 22px;
  height: 22px;
}
#hub .lib-list-project {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: var(--hub-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#hub .lib-list-type {
  justify-self: center;
  max-width: 100%;
}
#hub .lib-list-source {
  justify-self: center;
  min-width: 0;
  max-width: 100%;
  height: 22px;
  border: 1px solid var(--hub-border);
  border-radius: 999px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: var(--hub-text-sec);
  background: rgba(255,255,255,0.68);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#hub .lib-list-source-r {
  color: #4d6f6a;
  border-color: rgba(77,111,106,0.24);
  background: rgba(77,111,106,0.07);
}
#hub .lib-list-source-excel {
  color: #315f45;
  border-color: rgba(49,95,69,0.25);
  background: rgba(49,95,69,0.08);
}
#hub .lib-list-source-stats {
  color: #375f79;
  border-color: rgba(55,95,121,0.24);
  background: rgba(55,95,121,0.07);
}
#hub .lib-list-source-paste,
#hub .lib-list-source-ai {
  color: #6f6658;
  border-color: rgba(111,102,88,0.22);
  background: rgba(111,102,88,0.06);
}
#hub .lib-list-source-upload,
#hub .lib-list-source-drop,
#hub .lib-list-source-combined {
  color: #6f5f80;
  border-color: rgba(111,95,128,0.22);
  background: rgba(111,95,128,0.06);
}
#hub .lib-list-label {
  min-width: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
}
#hub .lib-list-label-empty {
  color: var(--hub-text-subtle);
  font-size: 12px;
}
#hub .lib-list-date {
  justify-self: center;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--hub-text-sec);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#hub .lib-list-created {
  color: var(--hub-text-muted);
}
#hub .lib-list-actions {
  display: inline-flex;
  justify-self: end;
  justify-content: flex-end;
  gap: 5px;
}
#hub .lib-list-actions .lib-card-act {
  background: transparent;
}

@media (max-width: 1180px) {
  #hub .lib-list-head,
  #hub .lib-list-card {
    grid-template-columns: 28px minmax(200px, 1fr) 82px minmax(88px, 0.65fr) 72px 26px 122px 84px;
  }
}

@media (max-width: 820px) {
  #hub .lib-list-head { display: none; }
  #hub .lib-list-card {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px;
  }
  #hub .lib-list-type,
  #hub .lib-list-project,
  #hub .lib-list-source,
  #hub .lib-list-label,
  #hub .lib-list-date { display: none; }
  #hub .lib-list-actions .lib-card-act:not(.lib-card-act-icon) { display: none; }
}

/* Hover-revealed actions */
#hub .lib-card-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.14s, transform 0.14s;
  z-index: 2;
}
#hub .lib-card:hover .lib-card-actions { opacity: 1; transform: translateY(0); }
#hub .lib-card-act {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--hub-border);
  color: var(--hub-text-sec);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  transition: color 0.12s, border-color 0.12s;
}
#hub .lib-card-act:hover { color: var(--hub-text-pri); border-color: var(--hub-text-muted); }
#hub .lib-card-act-icon { width: 28px; padding: 0; font-size: 14px; font-weight: 600; }
#hub .lib-card-act-icon.selection-disabled,
#hub .lib-card-act-icon.selection-disabled:hover {
  opacity: 0.38;
  cursor: not-allowed;
  color: var(--hub-text-muted);
  border-color: var(--hub-border);
  background: rgba(255,255,255,0.72);
}
#hub .lib-card.is-trash-card {
  cursor: default;
}
#hub .lib-card.is-trash-card .lib-card-actions {
  opacity: 1;
  transform: none;
}
#hub .lib-card.is-trash-card .lib-card-thumb {
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 68%, rgba(255,255,255,0.86) 100%),
    var(--hub-surface);
}
#hub .lib-trash-restore {
  color: var(--hub-text-sec);
}
#hub .lib-trash-restore:hover {
  color: #fff;
  background: #1a1a1a;
  border-color: #1a1a1a;
}
#hub .lib-trash-delete {
  color: var(--hub-text-sec);
}
#hub .lib-trash-delete:hover {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}
/* Trash list rows need more room for the two action buttons than the
   default 84px actions column — widen actions + trim the date column
   slightly so Restore/Delete don't overlap the Deleted timestamp. */
#hub .lib-trash-list-head,
#hub .lib-trash-list-card {
  grid-template-columns: 28px minmax(240px, 2.4fr) 84px minmax(104px, 0.85fr) 78px 28px 108px 160px;
}
@media (max-width: 1180px) {
  #hub .lib-trash-list-head,
  #hub .lib-trash-list-card {
    grid-template-columns: 28px minmax(180px, 1fr) 78px minmax(82px, 0.6fr) 70px 26px 100px 156px;
  }
}
@media (max-width: 820px) {
  #hub .lib-trash-list-card .lib-list-actions .lib-card-act {
    display: inline-flex;
  }
}

/* Empty state */
#hub .lib-empty {
  grid-column: 1 / -1;
  padding: 64px 0;
  text-align: center;
  color: var(--hub-text-muted);
}
#hub .lib-empty-title {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: var(--hub-text-pri);
  font-weight: 400;
  margin-bottom: 10px;
}
#hub .lib-empty-sub {
  font-size: 13.5px;
  line-height: 1.65;
  max-width: 420px;
  margin: 0 auto;
  color: var(--hub-text-sec);
}
#hub .lib-empty-sub em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--hub-text-pri);
}

/* ── New folder/project input row ──────────────────────────────────── */
#hub .lib-new-proj-row {
  display: flex;
  gap: 6px;
  padding: 6px 12px;
  align-items: center;
}
#hub .lib-new-proj-row input {
  flex: 1;
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--hub-border);
  border-radius: 6px;
  padding: 6px 10px;
  outline: none;
  background: var(--hub-bg);
  color: var(--hub-text-pri);
}
#hub .lib-new-proj-row input:focus { border-color: var(--hub-text-muted); }
#hub .lib-new-proj-row button {
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--hub-border);
  border-radius: 6px;
  padding: 6px 10px;
  background: var(--hub-bg);
  color: var(--hub-text-pri);
  cursor: pointer;
}
#hub .lib-new-proj-row button:hover { background: var(--hub-hover-bg); }

/* ════════════════════════════════════════════
   GRID EDITOR (preserved from existing)
════════════════════════════════════════════ */
.grid-container {
  overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm);
  min-height: 100px; position: relative; max-width: 100%; min-width: 200px;
}
.edit-grid { border-collapse: collapse; table-layout: auto; width: 100%; user-select: none; }
.edit-grid th {
  background: var(--cream-2); padding: 3px 5px; font-size: 0.65rem; font-weight: 600;
  color: var(--text-muted); border: 1px solid var(--border-light); text-align: center;
  position: sticky; top: 0; z-index: 2; white-space: nowrap; user-select: none;
}
.edit-grid th.col-header { cursor: grab; user-select: none; }
.edit-grid th.col-header:hover { background: var(--surface-hover); color: var(--text); }
.edit-grid th.col-header.drag-source { background: var(--accent); color: white; opacity: 0.7; }
.edit-grid th.col-header.drag-over { background: var(--accent-light); outline: 2px solid var(--accent); }
.edit-grid th.row-num {
  width: 70px; min-width: 70px; background: var(--cream-2);
  position: sticky; left: 0; z-index: 3; cursor: grab; user-select: none;
  padding: 2px 4px; text-align: left;
}
.edit-grid th.row-num:hover { background: var(--surface-hover); }
.edit-grid th.row-num.drag-source { background: var(--accent); opacity: 0.7; }
.edit-grid th.row-num.drag-over { background: var(--accent-light); outline: 2px solid var(--accent); }
.edit-grid th.corner { position: sticky; left: 0; z-index: 4; width: 70px; min-width: 70px; }

.row-badge { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.4; }
.badge-data { background: var(--role-data); color: var(--role-data-text); }
.badge-header { background: var(--role-header); color: var(--role-header-text); }
.badge-spanheader { background: var(--role-spanheader); color: var(--role-spanheader-text); }
.badge-sectiontitle { background: var(--role-sectiontitle); color: var(--role-sectiontitle-text); }
.badge-stub { background: var(--role-stub); color: var(--role-stub-text); }
.badge-delete { background: var(--role-delete); color: var(--role-delete-text); }
.badge-unassigned { background: #fee2e2; color: #991b1b; }

.edit-grid td { padding: 0; border: 1px solid var(--border-light); position: relative; transition: background var(--transition); cursor: default; }
.edit-grid td.selected { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 1; }
.edit-grid td.merged-cell { border: 2px solid var(--role-spanheader-border); }
.edit-grid td.bottom-line-on { border-bottom: 2px solid #4ade80; }
.edit-grid td.bottom-line-off { border-bottom: 2px dashed #e11d48; }
.edit-grid td .cell-text {
  display: block; padding: 2px 5px; font-size: 0.7rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 20px; line-height: 1.3; pointer-events: none;
}
.edit-grid td .cell-input {
  width: 100%; padding: 2px 5px; border: none; font-size: 0.7rem; font-family: inherit;
  background: #fff; outline: none; color: var(--text); box-shadow: inset 0 0 0 2px var(--accent); min-height: 20px; line-height: 1.3;
}
.edit-grid td.drag-source { opacity: 0.4; }
.edit-grid td.drag-over { outline: 2px dashed var(--accent); }

/* Cell role backgrounds */
.edit-grid td[data-role="header"] { background: var(--role-header); }
.edit-grid td[data-role="spanheader"] { background: var(--role-spanheader); }
.edit-grid td[data-role="sectiontitle"] { background: var(--role-sectiontitle); }
.edit-grid td[data-role="data"] { background: var(--white); }
.edit-grid td[data-role="stub"] { background: var(--role-stub); }
.edit-grid td[data-role="delete"] { background: var(--role-delete); text-decoration: line-through; }

/* Shimmer animation on entering edit mode */
.grid-container.shimmer-active {
  animation: gridShimmer 0.6s ease;
}
@keyframes gridShimmer {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* Drawer collapsed state */
.e-drawer.collapsed .e-drawer-body { display: none; }


/* ════════════════════════════════════════════
   CONTEXT MENUS
════════════════════════════════════════════ */
.context-menu {
  position: fixed; z-index: 9999; display: none;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px; min-width: 200px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.context-menu.visible { display: block; }
.context-menu-title {
  padding: 6px 10px; font-size: 10px; font-weight: 600;
  color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase;
}
.context-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px; background: none; border: none;
  font-size: 12.5px; color: var(--ink-2); cursor: pointer;
  border-radius: 4px; transition: background 0.1s; text-align: left;
}
.context-item:hover { background: var(--cream-2); }
.context-item.context-danger { color: var(--danger); }
.context-item.context-danger:hover { background: var(--danger-light); }
.context-item.active-format { background: var(--green-lt); color: var(--green); }
.context-divider { height: 1px; background: var(--line); margin: 4px 6px; }
.ctx-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ctx-spanheader { background: var(--role-spanheader-border); }
.ctx-header { background: var(--role-header-border); }
.ctx-sectiontitle { background: var(--role-sectiontitle-border); }
.ctx-data { background: var(--role-data-border); }
.ctx-stub { background: var(--role-stub-border); }
.ctx-role-wrapper { position: relative; }
.ctx-tooltip {
  display: none; position: absolute; left: 100%; top: 0; margin-left: 4px;
  background: var(--ink); color: white; font-size: 11px; padding: 8px 10px;
  border-radius: 6px; width: 220px; line-height: 1.5; z-index: 10000;
}
.ctx-role-wrapper:hover .ctx-tooltip { display: block; }
.ctx-label { flex: 1; }

/* ── Context submenu (inline expandable) ── */
.context-submenu-wrapper { position: relative; }
.context-submenu-wrapper .context-item .ctx-chevron {
  margin-left: auto; transition: transform 0.15s; opacity: 0.5;
}
.context-submenu-wrapper.open .context-item .ctx-chevron {
  transform: rotate(180deg);
}
.context-submenu {
  padding: 2px 6px 6px; max-height: 180px; overflow-y: auto;
}
.context-submenu::-webkit-scrollbar { width: 4px; }
.context-submenu::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.ctx-folder-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 10px; background: none; border: none;
  font-size: 12px; color: var(--ink-2); cursor: pointer;
  border-radius: 4px; text-align: left; transition: background 0.1s;
}
.ctx-folder-item:hover { background: var(--cream-2); }
.ctx-folder-item.current { color: var(--green); font-weight: 500; }
.ctx-folder-check { width: 14px; flex-shrink: 0; font-size: 11px; text-align: center; color: var(--green); }
.ctx-folder-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-new-folder-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; cursor: pointer; border-radius: 4px;
  font-size: 12px; color: var(--green); font-weight: 500;
  background: none; border: none; width: 100%;
}
.ctx-new-folder-item:hover { background: var(--green-lt); }
.ctx-new-folder-input-row {
  display: flex; align-items: center; gap: 4px; padding: 4px 6px;
}
.ctx-new-folder-input-row input {
  flex: 1; font-family: var(--sans); font-size: 12px;
  padding: 4px 8px; border: 1px solid var(--line);
  border-radius: 4px; outline: none; background: var(--cream);
  min-width: 0;
}
.ctx-new-folder-input-row input:focus { border-color: var(--green); }
.ctx-new-folder-input-row button {
  padding: 4px 8px; font-size: 11px; font-family: var(--sans);
  background: var(--green); color: white; border: none;
  border-radius: 4px; cursor: pointer; white-space: nowrap;
}

/* ── Context menu color label row ── */
.context-label-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
}
.ctx-label-text {
  font-size: 11px; color: var(--ink-3); font-weight: 500;
  white-space: nowrap; min-width: 32px;
}
.ctx-label-swatches { display: flex; gap: 5px; align-items: center; }
.ctx-lp-color {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: all 0.12s; flex-shrink: 0; padding: 0;
}
.ctx-lp-color:hover { transform: scale(1.2); }
.ctx-lp-color.active { box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px #6a6460; }
.ctx-lp-none {
  background: #f5f2eb; border: 1.5px solid #d4cec4; position: relative;
}
.ctx-lp-none::after {
  content: ''; position: absolute; top: 50%; left: -1px; right: -1px;
  height: 1.5px; background: #c0392b; transform: rotate(-45deg);
}

/* ── Hub sidebar new-folder input ── */
.hf-new-folder-row {
  display: flex; align-items: center; gap: 4px; padding: 4px 10px 8px;
}
.hf-new-folder-input {
  flex: 1; font-family: var(--sans); font-size: 12px;
  padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 5px; outline: none; background: var(--cream); min-width: 0;
}
.hf-new-folder-input:focus { border-color: var(--green); }
.hf-new-folder-confirm {
  padding: 5px 10px; font-size: 11px; font-family: var(--sans); font-weight: 500;
  background: var(--green); color: white; border: none;
  border-radius: 5px; cursor: pointer; white-space: nowrap;
}


/* ════════════════════════════════════════════
   DIALOGS & OVERLAYS
════════════════════════════════════════════ */
.drag-dialog-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(22,20,14,0.4); display: none;
  align-items: center; justify-content: center;
}
.drag-dialog-overlay.visible { display: flex; }
.drag-dialog {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; padding: 24px; max-width: 400px; width: 90%;
  box-shadow: var(--shadow-lg);
}
.drag-dialog p { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.drag-dialog-sub { font-size: 12.5px; color: var(--ink-3); font-weight: 300 !important; line-height: 1.6; }
.drag-dialog-actions { display: flex; gap: 8px; margin-top: 16px; }
.save-name-input {
  width: 100%; padding: 8px 12px; margin: 8px 0 4px;
  font-family: system-ui, sans-serif; font-size: 14px;
  border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--white); color: var(--ink);
  outline: none; transition: border-color 0.15s;
  box-sizing: border-box;
}
.save-name-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(45,90,39,0.1);
}

.drag-dialog.move-folder-dialog {
  --mf-bg: #ffffff;
  --mf-border: #ebebeb;
  --mf-border-soft: #f3f3f3;
  --mf-text: #1a1a1a;
  --mf-text-sec: #6e6e6e;
  --mf-text-muted: #a0a0a0;
  --mf-text-subtle: #c5c5c5;
  --mf-hover: #f5f5f5;
  --mf-tint: #efefef;
  width: min(640px, calc(100vw - 32px));
  max-width: 640px;
  max-height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--mf-border);
  border-radius: 8px;
  background: var(--mf-bg);
  color: var(--mf-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  box-shadow: 0 24px 80px rgba(0,0,0,0.12), 0 3px 10px rgba(0,0,0,0.06);
}
.drag-dialog.move-folder-dialog > p:not(.drag-dialog-sub) {
  margin: 0 0 5px;
  color: var(--mf-text);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 21px;
  font-weight: 450;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.move-folder-dialog .drag-dialog-sub {
  margin: 0;
  max-width: 48ch;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  color: var(--mf-text-sec);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400 !important;
  line-height: 1.45;
}
.move-folder-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--mf-border);
  border-radius: 8px;
  color: var(--mf-text-muted);
  background: transparent;
  transition: border-color 0.12s, background 0.12s;
}
.move-folder-search:hover,
.move-folder-search:focus-within {
  border-color: var(--mf-text-muted);
  background: var(--mf-hover);
}
.move-folder-search svg {
  flex-shrink: 0;
  opacity: 0.58;
}
.move-folder-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--mf-text);
}
.move-folder-search input::placeholder { color: var(--mf-text-muted); }
.move-folder-list {
  max-height: min(420px, 48vh);
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--mf-border);
  border-radius: 8px;
  background: var(--mf-bg);
}
.move-folder-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--mf-text-sec);
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.35;
  transition: background 0.12s, color 0.12s;
}
.move-folder-item:hover {
  background: var(--mf-hover);
  color: var(--mf-text);
}
.move-folder-item.current {
  color: var(--mf-text);
  background: var(--mf-tint);
  font-weight: 500;
}
.move-folder-item.project-browser-item {
  display: grid;
  grid-template-columns: 18px 18px minmax(0, 1fr) minmax(28px, auto);
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px 7px 6px;
  position: relative;
}
.move-folder-check {
  width: 14px;
  flex-shrink: 0;
  color: var(--mf-text);
  font-size: 12px;
  text-align: center;
}
.move-folder-toggle {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mf-text-subtle);
  font-size: 15px;
  line-height: 1;
  transition: transform 0.15s, background 0.12s, color 0.12s;
}
.move-folder-item.has-children .move-folder-toggle {
  background: rgba(0,0,0,0.035);
  color: var(--mf-text-muted);
}
.move-folder-item.has-children .move-folder-toggle:hover {
  background: var(--mf-hover);
  color: var(--mf-text);
}
.move-folder-item.is-expanded .move-folder-toggle {
  transform: rotate(90deg);
}
.move-folder-toggle.empty {
  visibility: hidden;
  pointer-events: none;
}
.move-folder-glyph {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  fill: none;
  stroke: var(--mf-text-subtle);
  stroke-width: 1.3px;
  stroke-linejoin: round;
}
.move-folder-glyph svg {
  width: 15px;
  height: 15px;
}
.move-folder-item:hover .move-folder-glyph,
.move-folder-item.current .move-folder-glyph {
  stroke: var(--mf-text);
}
.move-folder-item.proj-colored .move-folder-glyph {
  fill: var(--fc);
  stroke: var(--fc);
}
.move-folder-item-main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.move-folder-name {
  font-size: 13px;
  font-weight: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.move-folder-path {
  font-size: 11px;
  color: var(--mf-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}
.move-folder-count {
  flex-shrink: 0;
  min-width: 24px;
  text-align: right;
  font-size: 11.5px;
  color: var(--mf-text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
.move-folder-count.is-zero { color: var(--mf-text-subtle); }
.move-folder-item.current .move-folder-count {
  color: var(--mf-text);
  font-size: 12px;
  font-weight: 500;
}
.move-folder-children {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--mf-border-soft);
  overflow: hidden;
}
.move-folder-children .project-browser-item {
  color: var(--mf-text-muted);
  font-size: 12.5px;
}
.move-folder-children .project-browser-item::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  width: 12px;
  border-top: 1px solid var(--mf-border-soft);
}
.move-folder-children .project-browser-item:hover,
.move-folder-children .project-browser-item.current {
  color: var(--mf-text);
}
.move-folder-item.is-disabled:not(.current) {
  color: var(--mf-text-subtle);
}
.move-folder-item.is-disabled:not(.current) .move-folder-glyph {
  stroke: var(--mf-text-subtle);
}
.move-folder-item.is-disabled:not(.current).proj-colored .move-folder-glyph {
  opacity: 0.48;
}
.move-folder-item.is-disabled:not(.current):hover {
  background: transparent;
}
.move-folder-divider {
  height: 1px;
  background: var(--mf-border-soft);
  margin: 6px 4px;
}
.move-folder-empty {
  padding: 18px;
  text-align: center;
  color: var(--mf-text-muted);
  font-size: 13px;
}
.move-folder-new {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--mf-border-soft);
}
.move-folder-new input {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--mf-border);
  border-radius: 6px;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  color: var(--mf-text);
  outline: none;
  background: var(--mf-bg);
  transition: border-color 0.12s, background 0.12s;
}
.move-folder-new input:focus {
  border-color: var(--mf-text-muted);
  background: var(--mf-hover);
}
.move-folder-new button {
  min-height: 34px;
  border: 1px solid var(--mf-text);
  border-radius: 6px;
  padding: 0 14px;
  background: var(--mf-text);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.move-folder-new button:hover {
  background: #000;
  border-color: #000;
}
.drag-dialog.move-folder-dialog .move-folder-cancel {
  background: var(--mf-bg);
  border-color: var(--mf-border);
  color: var(--mf-text-sec);
}
.drag-dialog.move-folder-dialog .move-folder-cancel:hover {
  background: var(--mf-hover);
  border-color: var(--mf-text-muted);
  color: var(--mf-text);
}
.move-folder-spacer {
  flex: 1;
}
.move-folder-dialog .drag-dialog-actions {
  margin-top: 12px;
}
@media (max-width: 560px) {
  .move-folder-new {
    grid-template-columns: 1fr;
  }
  .move-folder-new button {
    width: 100%;
    justify-content: center;
  }
}

/* ── Graphite popups/menus for the refreshed Hub and card actions ── */
.context-menu {
  background: #ffffff;
  border-color: #e1e4ea;
  border-radius: 9px;
  padding: 6px;
  min-width: 218px;
  max-width: min(360px, calc(100vw - 16px));
  box-shadow: 0 18px 44px rgba(26,29,36,0.16);
}

.context-menu-title {
  padding: 8px 10px 6px;
  color: #8b94a0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.context-item {
  min-height: 32px;
  border-radius: 6px;
  color: #5b6571;
  font-family: "IBM Plex Sans", var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 0 10px;
}

.context-item:hover {
  background: #f7f8fa;
  color: #1a1d24;
}

.context-item.context-danger {
  color: #b94336;
}

.context-item.context-danger:hover {
  background: #fdf0ee;
  color: #9f3327;
}

.context-divider {
  background: #edf0f3;
  margin: 6px 8px;
}

.context-submenu {
  padding: 2px 6px 8px;
}

.ctx-folder-item,
.ctx-new-folder-item {
  min-height: 30px;
  border-radius: 6px;
  color: #5b6571;
  font-family: "IBM Plex Sans", var(--sans);
  font-size: 12.5px;
  font-weight: 500;
}

.ctx-folder-item:hover,
.ctx-new-folder-item:hover {
  background: #f7f8fa;
  color: #1a1d24;
}

.ctx-folder-item.current,
.ctx-folder-check,
.ctx-new-folder-item {
  color: #3d6a8a;
}

.ctx-new-folder-input-row input {
  background: #f7f8fa;
  border-color: #e1e4ea;
  color: #1a1d24;
  font-family: "IBM Plex Sans", var(--sans);
  border-radius: 6px;
}

.ctx-new-folder-input-row input:focus {
  border-color: #3d6a8a;
  box-shadow: 0 0 0 3px rgba(61,106,138,0.12);
}

.ctx-new-folder-input-row button {
  background: #1a1d24;
  border-radius: 6px;
  font-family: "IBM Plex Sans", var(--sans);
}

.context-label-row {
  padding: 8px 10px;
}

.ctx-label-text {
  color: #8b94a0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ctx-lp-color.active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #7e8994;
}

/* ── Card memo drawer ─────────────────────────────────────────────── */
.memo-drawer-overlay {
  position: fixed;
  top: 64px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9996;
  display: block;
  background: rgba(16, 22, 29, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.memo-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.memo-drawer {
  position: fixed;
  top: 78px;
  right: 18px;
  bottom: 18px;
  z-index: 9997;
  --memo-drawer-width: 420px;
  width: min(var(--memo-drawer-width), calc(100vw - 28px));
  display: flex;
  flex-direction: column;
  background: var(--ed-bg, #ffffff);
  color: var(--ed-text-pri, #1a1d24);
  border: 1px solid var(--ed-border, #e1e4ea);
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(26, 29, 36, 0.18), 0 4px 16px rgba(26, 29, 36, 0.08);
  opacity: 0;
  transform: translate3d(28px, 0, 0) scale(0.985);
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.2s ease,
    visibility 0s linear 0.28s;
  font-family: "IBM Plex Sans", var(--sans);
}
.memo-drawer-resize {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 12px;
  z-index: 3;
  cursor: ew-resize;
  touch-action: none;
  color: var(--ed-text-subtle, #b7bec6);
}
.memo-drawer-resize::before {
  content: '';
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 5px;
  width: 1px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.22;
  transition: opacity 0.12s, background 0.12s;
}
.memo-drawer-resize::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  width: 5px;
  height: 36px;
  transform: translateY(-50%);
  border-radius: 999px;
  background:
    radial-gradient(circle, currentColor 1.1px, transparent 1.4px)
    center 5px / 5px 7px repeat-y;
  opacity: 0;
  transition: opacity 0.12s;
}
.memo-drawer-resize:hover,
.memo-drawer-resize:focus-visible {
  color: var(--ed-text-muted, #8b94a0);
  outline: none;
}
.memo-drawer-resize:hover::before,
.memo-drawer-resize:focus-visible::before,
.memo-drawer-resize:hover::after,
.memo-drawer-resize:focus-visible::after,
body.card-memo-resizing .memo-drawer-resize::before,
body.card-memo-resizing .memo-drawer-resize::after {
  opacity: 1;
}
body.card-memo-resizing {
  cursor: ew-resize;
  user-select: none;
}
body.card-memo-resizing * {
  cursor: ew-resize !important;
}
.memo-drawer.open {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.2s ease,
    visibility 0s linear 0s;
}
.memo-drawer-head {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--ed-border-soft, #edf0f3);
}
.memo-drawer-title-wrap {
  min-width: 0;
  flex: 1;
}
.memo-drawer-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ed-text-muted, #8b94a0);
  margin-bottom: 5px;
}
.memo-drawer-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ed-text-pri, #1a1d24);
}
.memo-drawer-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ed-text-muted, #8b94a0);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.memo-drawer-close:hover,
.memo-drawer-close:focus-visible {
  color: var(--ed-text-pri, #1a1d24);
  background: var(--ed-hover-bg, #f7f8fa);
  border-color: var(--ed-border-soft, #edf0f3);
  outline: none;
}
.memo-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ed-border-soft, #edf0f3);
  background: color-mix(in srgb, var(--ed-bg, #fff) 92%, var(--ed-tint, #f7f8fa));
}
.memo-tool {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ed-text-sec, #5b6571);
  cursor: pointer;
  padding: 0;
  font-family: "IBM Plex Sans", var(--sans);
  font-size: 13px;
  line-height: 1;
}
.memo-tool:hover,
.memo-tool:focus-visible,
.memo-tool.active {
  color: var(--ed-text-pri, #1a1d24);
  background: var(--ed-bg, #fff);
  border-color: var(--ed-border, #e1e4ea);
  outline: none;
}
.memo-tool svg {
  width: 14px;
  height: 14px;
}
.memo-toolbar-divider {
  width: 1px;
  height: 20px;
  background: var(--ed-border-soft, #edf0f3);
  margin: 0 3px;
}
.memo-editor-shell {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}
.memo-editor {
  min-height: 100%;
  outline: none;
  font-family: "Times New Roman", Times, serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ed-text-pri, #1a1d24);
  letter-spacing: 0;
}
.memo-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--ed-text-subtle, #b7bec6);
}
.memo-editor p,
.memo-editor div {
  margin: 0 0 10px;
}
.memo-editor ul,
.memo-editor ol {
  margin: 0 0 10px;
  padding-left: 22px;
}
.memo-editor li {
  margin: 0 0 4px;
}
.memo-editor sub,
.memo-editor sup {
  line-height: 0;
}
.memo-mention {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  vertical-align: baseline;
  padding: 1px 6px 2px;
  margin: 0 1px;
  border: 1px solid color-mix(in srgb, var(--ed-data, #6a86c4) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ed-data, #6a86c4) 9%, transparent);
  color: var(--ed-text-pri, #1a1d24);
  font-family: "IBM Plex Sans", var(--sans);
  font-size: 12.5px;
  line-height: 1.35;
  white-space: nowrap;
  user-select: none;
}
.memo-mention[data-mention-pinned="true"]::after {
  content: '';
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 38%, 68% 38%, 68% 100%, 32% 100%, 32% 38%, 0 38%);
  opacity: 0.5;
  flex: 0 0 auto;
  transform: translateY(1px) rotate(28deg);
}
.memo-mention.missing {
  border-color: var(--ed-border, #e1e4ea);
  background: var(--ed-tint, #f7f8fa);
  color: var(--ed-text-muted, #8b94a0);
}
.memo-mention-popover {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 48px;
  z-index: 2;
  max-height: min(320px, calc(100% - 160px));
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--ed-border, #e1e4ea);
  border-radius: 10px;
  background: var(--ed-bg, #fff);
  box-shadow: 0 16px 42px rgba(26, 29, 36, 0.16), 0 2px 10px rgba(26, 29, 36, 0.06);
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.2s;
}
.memo-mention-popover.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0s;
}
.memo-mention-option {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 7px 9px;
  color: var(--ed-text-sec, #5b6571);
  font-family: "IBM Plex Sans", var(--sans);
  text-align: left;
  cursor: pointer;
}
.memo-mention-option:hover,
.memo-mention-option.active {
  background: var(--ed-hover-bg, #f7f8fa);
  color: var(--ed-text-pri, #1a1d24);
}
.memo-mention-option-type {
  width: 44px;
  flex-shrink: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ed-text-muted, #8b94a0);
}
.memo-mention-option-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.memo-mention-option-title,
.memo-mention-option-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memo-mention-option-title {
  font-size: 13px;
  color: currentColor;
}
.memo-mention-option-sub {
  font-size: 11.5px;
  color: var(--ed-text-muted, #8b94a0);
}
.memo-mention-option-memo {
  flex-shrink: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--ed-data, #6a86c4);
}
.memo-mention-empty {
  padding: 12px;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ed-text-muted, #8b94a0);
}
.memo-mention-hint {
  margin: 4px 6px 2px;
  padding: 8px 9px 6px;
  border-top: 1px solid var(--ed-border-soft, #edf0f3);
  color: var(--ed-text-muted, #8b94a0);
  font-family: "IBM Plex Sans", var(--sans);
  font-size: 11.5px;
  line-height: 1.35;
}
.memo-ref-preview {
  position: fixed;
  top: 78px;
  left: 18px;
  width: min(620px, calc(100vw - 476px));
  height: min(640px, calc(100vh - 96px));
  min-width: min(380px, calc(100vw - 36px));
  min-height: min(420px, calc(100vh - 96px));
  z-index: 9998;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ed-border, #e1e4ea);
  border-radius: 12px;
  background: var(--ed-bg, #fff);
  box-shadow: 0 24px 64px rgba(26, 29, 36, 0.20), 0 5px 18px rgba(26, 29, 36, 0.10);
  opacity: 0;
  transform: translateY(6px) scale(0.985);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.18s;
}
.memo-ref-preview.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.14s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0s;
}
.memo-ref-preview-head {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--ed-border-soft, #edf0f3);
  flex-shrink: 0;
}
.memo-ref-preview-title-wrap {
  min-width: 0;
  flex: 1;
}
.memo-ref-preview-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ed-text-muted, #8b94a0);
  margin-bottom: 4px;
}
.memo-ref-preview-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
  line-height: 1.2;
  color: var(--ed-text-pri, #1a1d24);
}
.memo-ref-preview-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.memo-ref-preview-open {
  min-width: 54px;
  height: 28px;
  border: 1px solid var(--ed-border, #e1e4ea);
  border-radius: 7px;
  background: var(--ed-bg, #fff);
  color: var(--ed-text-sec, #5b6571);
  font-family: "IBM Plex Sans", var(--sans);
  font-size: 12px;
  cursor: pointer;
}
.memo-ref-preview-close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ed-text-muted, #8b94a0);
  cursor: pointer;
  padding: 0;
}
.memo-ref-preview-open:hover,
.memo-ref-preview-open:focus-visible,
.memo-ref-preview-close:hover,
.memo-ref-preview-close:focus-visible {
  color: var(--ed-text-pri, #1a1d24);
  background: var(--ed-hover-bg, #f7f8fa);
  border-color: var(--ed-border-soft, #edf0f3);
  outline: none;
}
.memo-ref-preview-meta {
  padding: 8px 12px;
  border-bottom: 1px solid var(--ed-border-soft, #edf0f3);
  color: var(--ed-text-muted, #8b94a0);
  font-size: 11.5px;
  line-height: 1.35;
  flex-shrink: 0;
}
.memo-ref-preview-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  background: color-mix(in srgb, var(--ed-bg, #fff) 94%, var(--ed-tint, #f7f8fa));
}
.memo-ref-preview-note {
  max-height: 66px;
  overflow: auto;
  padding: 10px 12px;
  border-top: 1px solid var(--ed-border-soft, #edf0f3);
  color: var(--ed-text-sec, #5b6571);
  font-size: 12px;
  line-height: 1.45;
  flex-shrink: 0;
}
.memo-ref-preview-empty {
  color: var(--ed-text-muted, #8b94a0);
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
}
.memo-ref-preview-table,
.memo-ref-preview-figure,
.memo-ref-preview-stat {
  min-width: 0;
  color: var(--ed-text-pri, #1a1d24);
}
.memo-ref-preview-table {
  font-size: 12px;
}
.memo-ref-preview-table table {
  width: max-content;
  max-width: none;
  border-collapse: collapse;
}
.memo-ref-preview-table th,
.memo-ref-preview-table td {
  padding: 4px 7px;
}
.memo-ref-preview-figure img,
.memo-ref-preview-figure svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.memo-ref-preview-stat .lib-thumb-stat-card {
  border: 1px solid var(--ed-border, #e1e4ea);
  border-radius: 8px;
  background: var(--ed-bg, #fff);
  color: var(--ed-text-pri, #1a1d24);
  padding: 12px;
  max-height: none;
  overflow: visible;
}
.memo-ref-preview-stat .lib-thumb-stat-body {
  font-family: "Charter", "Times New Roman", Georgia, serif;
  font-size: 13px;
  line-height: 1.5;
}
.memo-stat-snapshot {
  min-width: 0;
  font-family: "IBM Plex Sans", var(--sans);
}
.memo-stat-snapshot .rcard,
.memo-stat-snapshot .rcard-multi {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border: 1px solid var(--ed-border, #e1e4ea);
  border-radius: 9px;
  background: var(--ed-bg, #fff);
  color: var(--ed-text-pri, #1a1d24);
  overflow: hidden;
}
.memo-stat-snapshot .rcard + .rcard,
.memo-stat-snapshot .rcard-multi-child + .rcard-multi-child {
  margin-top: 12px;
}
.memo-stat-snapshot .rcard-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--ed-border-soft, #edf0f3);
}
.memo-stat-snapshot .rcard-type {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.2;
  color: var(--ed-text-pri, #1a1d24);
}
.memo-stat-snapshot .rcard-call {
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ed-border-soft, #edf0f3);
  background: var(--ed-source-bg, #f7f8fa);
  color: var(--ed-text-sec, #5b6571);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.memo-stat-snapshot .rcard-section {
  padding: 13px 14px;
  border-bottom: 1px solid var(--ed-border-soft, #edf0f3);
}
.memo-stat-snapshot .rcard-section:last-child {
  border-bottom: 0;
}
.memo-stat-snapshot .rcard-sectionlabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  color: var(--ed-text-muted, #8b94a0);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  line-height: 1.35;
  text-transform: uppercase;
}
.memo-stat-snapshot .rcard-sectionlabel .meta,
.memo-stat-snapshot .rcard-report-edited-badge {
  font-family: "IBM Plex Sans", var(--sans);
  text-transform: none;
  color: var(--ed-text-muted, #8b94a0);
}
.memo-stat-snapshot .rcard-formatted {
  border: 1px solid var(--ed-border, #e1e4ea);
  border-radius: 8px;
  background: var(--ed-bg, #fff);
  color: var(--ed-text-pri, #1a1d24);
  padding: 11px 12px;
  font-family: "IBM Plex Sans", var(--sans);
  font-size: 14px;
  line-height: 1.55;
}
.memo-stat-snapshot .rcard-report-text {
  outline: none;
}
.memo-stat-snapshot .rcard-report-text p,
.memo-stat-snapshot .rcard-formatted p {
  margin: 0;
}
.memo-stat-snapshot .rcard-fields {
  display: grid;
  grid-template-columns: minmax(110px, 150px) 1fr;
  gap: 7px 12px;
  font-size: 12.5px;
  line-height: 1.45;
}
.memo-stat-snapshot .rcard-fields .k,
.memo-stat-snapshot .field-subkey,
.memo-stat-snapshot .ci {
  color: var(--ed-text-muted, #8b94a0);
}
.memo-stat-snapshot .rcard-fields .v,
.memo-stat-snapshot .fit-value {
  color: var(--ed-text-pri, #1a1d24);
}
.memo-stat-snapshot .rcard-table-wrap,
.memo-stat-snapshot .fit-table-wrap,
.memo-stat-snapshot .param-table-wrap {
  overflow: auto;
}
.memo-stat-snapshot .rcard-result-table,
.memo-stat-snapshot .fit-table,
.memo-stat-snapshot .param-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 1.45;
}
.memo-stat-snapshot .rcard-result-table th,
.memo-stat-snapshot .rcard-result-table td,
.memo-stat-snapshot .fit-table th,
.memo-stat-snapshot .fit-table td,
.memo-stat-snapshot .param-table th,
.memo-stat-snapshot .param-table td {
  padding: 5px 7px;
  border-bottom: 1px solid var(--ed-border-soft, #edf0f3);
  text-align: left;
  vertical-align: top;
}
.memo-stat-snapshot .table-cell-num,
.memo-stat-snapshot .fit-value,
.memo-stat-snapshot .param-table td {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.memo-stat-snapshot .rcard-multi {
  border: 0;
  background: transparent;
  overflow: visible;
}
.memo-stat-snapshot .rcard-multi-heading,
.memo-stat-snapshot .rcard-multi-divider {
  margin: 0 0 9px;
  color: var(--ed-text-muted, #8b94a0);
  font-family: "Fraunces", Georgia, serif;
  font-size: 13px;
}
.memo-stat-snapshot .rcard-multi-child {
  position: relative;
}
@media (max-width: 780px) {
  .memo-ref-preview {
    top: 70px !important;
    left: 8px !important;
    right: 8px;
    width: calc(100vw - 16px) !important;
    height: min(520px, calc(100vh - 88px)) !important;
    min-width: 0;
    min-height: 320px;
    border-radius: 12px;
  }
}
.memo-drawer-foot {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-top: 1px solid var(--ed-border-soft, #edf0f3);
  color: var(--ed-text-muted, #8b94a0);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
@media (max-width: 520px) {
  .memo-drawer-overlay {
    top: 64px;
  }
  .memo-drawer {
    top: 70px;
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
    border-radius: 12px;
  }
  .memo-drawer-head {
    padding: 14px 16px 12px;
  }
  .memo-editor-shell {
    padding: 16px;
  }
}

.drag-dialog-overlay,
.saved-tables-overlay {
  background: rgba(16, 22, 29, 0.34);
  backdrop-filter: blur(5px);
}

.drag-dialog,
.saved-tables-panel {
  background: #ffffff;
  border: 1px solid #e1e4ea;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(26,29,36,0.18);
}

.drag-dialog {
  max-width: 420px;
  padding: 26px;
}

.drag-dialog p {
  color: #1a1d24;
  font-family: "Newsreader", var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}

.drag-dialog-sub {
  color: #5b6571;
  font-family: "IBM Plex Sans", var(--sans);
  font-size: 13px;
  font-weight: 400 !important;
}

.drag-dialog-actions {
  justify-content: flex-end;
  gap: 10px;
}

.drag-dialog .btn,
.saved-tables-panel .btn {
  min-height: 34px;
  border-radius: 7px;
  border-color: #e1e4ea;
  font-family: "IBM Plex Sans", var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 0 14px;
}

.drag-dialog .btn-solid,
.saved-tables-panel .btn-solid {
  background: #1a1d24;
  border-color: #1a1d24;
  color: #fff;
}

.drag-dialog .btn-ghost,
.saved-tables-panel .btn-ghost {
  background: #fff;
  color: #5b6571;
}

.save-name-input {
  background: #f7f8fa;
  border-color: #e1e4ea;
  border-radius: 8px;
  color: #1a1d24;
  font-family: "IBM Plex Sans", var(--sans);
}

.save-name-input:focus {
  border-color: #3d6a8a;
  box-shadow: 0 0 0 3px rgba(61,106,138,0.12);
}

/* Saved tables / texts overlay */
.saved-tables-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(22,20,14,0.4); display: none;
  align-items: center; justify-content: center;
}
.saved-tables-overlay.visible { display: flex; }
.saved-tables-panel {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; width: 90%; max-width: 600px; max-height: 80vh;
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
}
.saved-tables-header {
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 600;
}
.saved-tables-list { flex: 1; overflow-y: auto; padding: 12px; }
.saved-tables-footer { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }

/* Doc assembly within overlay */
.doc-assembly-panel { max-width: 650px; }
.doc-assembly-upload { padding: 16px; }
.doc-assembly-intro { font-size: 13px; color: var(--ink-2); margin-bottom: 16px; line-height: 1.6; }
.doc-assembly-intro code { font-family: var(--mono); font-size: 11px; background: var(--amber-lt); color: var(--amber); padding: 1px 5px; border-radius: 3px; }
.doc-assembly-figures-section { margin-bottom: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; }
.doc-assembly-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.doc-assembly-section-title { font-size: 13px; font-weight: 600; }
.doc-assembly-figures-list { display: flex; flex-direction: column; gap: 6px; }
.doc-assembly-drop-zone {
  border: 1.5px dashed var(--line); border-radius: 6px; padding: 20px;
  text-align: center; cursor: pointer; transition: all 0.15s;
  font-size: 13px; color: var(--ink-3);
}
.doc-assembly-drop-zone:hover { border-color: var(--green-rule); background: var(--green-lt); }
.doc-assembly-privacy { font-size: 11px; color: var(--ink-3); margin-top: 10px; text-align: center; }
.doc-assembly-scanning { text-align: center; padding: 40px; }
.doc-assembly-spinner { width: 32px; height: 32px; border: 3px solid var(--line); border-top-color: var(--green); border-radius: 50%; animation: spin 0.7s linear infinite; margin: 0 auto 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
.doc-assembly-summary { padding: 12px 16px; font-size: 13px; }
.doc-assembly-matches { padding: 0 16px; max-height: 340px; overflow-y: auto; }
.doc-assembly-footer { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }

/* Match items */
.doc-assembly-match-item { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 8px; }
.doc-assembly-match-item.matched { border-color: var(--green-rule); background: var(--green-lt); }
.doc-assembly-match-item.unmatched { border-color: #e8c888; background: var(--amber-lt); }
.doc-assembly-match-header { display: flex; align-items: center; justify-content: space-between; }
.doc-assembly-checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.doc-assembly-checkbox input { accent-color: var(--green); }
.doc-assembly-ph-name { font-family: var(--mono); font-size: 12px; }
.doc-assembly-match-status { font-size: 11px; font-weight: 500; }
.doc-assembly-status-ok { color: var(--green); }
.doc-assembly-status-warn { color: var(--amber); }
.doc-assembly-match-detail { margin-top: 6px; font-size: 12px; color: var(--ink-2); }
.doc-assembly-select { font-family: var(--sans); font-size: 12px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); width: 100%; }

/* Instructions */
.da-instructions { margin-bottom: 16px; }
.da-instructions-title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.da-steps { margin: 0; padding-left: 20px; font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
.da-steps code { background: var(--cream-2); padding: 1px 5px; border-radius: 3px; font-size: 11.5px; }

/* Redesigned placeholder cards */
.da-guidance { font-size: 12px; color: var(--ink-3); padding: 8px 0 12px; line-height: 1.5; }
.da-placeholder-card { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 8px; }
.da-placeholder-card.da-matched { border-color: var(--green-rule); background: var(--green-lt); }
.da-placeholder-card.da-unmatched { border-color: #e8c888; background: var(--amber-lt); }
.da-ph-header { display: flex; align-items: center; justify-content: space-between; }
.da-ph-checkbox { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.da-ph-checkbox input { accent-color: var(--green); }
.da-ph-name { font-size: 12px; color: var(--ink); }
.da-status { font-size: 11px; font-weight: 500; }
.da-status-ok { color: var(--green); }
.da-status-warn { color: var(--amber); }
.da-ph-match-info { margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.da-ph-select-area { margin-top: 6px; }
.da-select-label { display: block; font-size: 11px; color: var(--ink-3); margin-bottom: 4px; }
.da-no-tables { color: var(--amber); font-style: italic; }
.da-select { font-family: var(--sans); font-size: 12px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); width: 100%; }
.da-summary-text { font-size: 13px; color: var(--ink-2); }
.da-no-placeholders { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.da-no-placeholders code { background: var(--cream-2); padding: 1px 5px; border-radius: 3px; font-size: 11.5px; }

/* Figure form */
.doc-assembly-figure-form { padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--cream); }
.doc-assembly-figure-form input, .doc-assembly-figure-form textarea {
  width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px;
  font-family: var(--sans); font-size: 12px; margin-bottom: 8px; background: var(--white);
}
.doc-assembly-figure-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.doc-assembly-figure-thumb { width: 36px; height: 36px; border-radius: 3px; object-fit: cover; }
.doc-assembly-figure-info { flex: 1; }
.doc-assembly-figure-info strong { font-size: 12px; display: block; }
.doc-assembly-figure-info span { font-size: 11px; color: var(--ink-3); }


/* ════════════════════════════════════════════
   HELP WINDOW (floating card)
════════════════════════════════════════════ */
.help-drawer {
  position: fixed;
  bottom: 72px;
  left: 80px;
  width: 520px;
  height: 460px;
  background: linear-gradient(135deg, var(--green-lt) 0%, var(--white) 60%);
  border: 1.5px solid var(--green-rule);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(26, 74, 56, 0.12), 0 2px 8px rgba(22, 20, 14, 0.06);
  z-index: 10000;
  display: flex; flex-direction: column;
  opacity: 0;
  transform: scale(0.85) translate(-10px, 10px);
  transform-origin: bottom left;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}
.help-drawer.open {
  opacity: 1;
  transform: scale(1) translate(0, 0);
  pointer-events: auto;
}

/* Header */
.help-drawer-header {
  padding: 12px 16px 10px; border-bottom: 1px solid var(--green-rule);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
  background: rgba(232, 242, 236, 0.3);
}
.help-drawer-header h3 {
  font-family: var(--serif); font-size: 16px; font-weight: 600;
  color: var(--green); margin: 0;
}
.help-drawer-close {
  width: 28px; height: 28px; border: none; background: none;
  font-size: 20px; color: var(--ink-3); cursor: pointer;
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.help-drawer-close:hover { background: var(--green-lt); color: var(--green); }

/* Topic pills */
.help-topic-pills {
  display: flex; gap: 6px; padding: 8px 16px;
  overflow-x: auto; border-bottom: 1px solid var(--green-rule); flex-shrink: 0;
  scrollbar-width: none;
}
.help-topic-pills::-webkit-scrollbar { display: none; }
.help-topic-pill {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  padding: 5px 12px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--cream);
  color: var(--ink-2); cursor: pointer; white-space: nowrap;
  transition: all var(--transition);
}
.help-topic-pill:hover { border-color: var(--green-rule); color: var(--green); }
.help-topic-pill.active {
  background: var(--green); border-color: var(--green); color: var(--white);
  font-weight: 600; box-shadow: 0 2px 8px rgba(26, 74, 56, 0.18);
}

/* Body */
.help-drawer-body { flex: 1; overflow-y: auto; padding: 12px 16px; }

/* Topic content */
.help-topic-content {}
.help-visual { margin-bottom: 14px; }
.help-svg {
  width: 100%; height: auto; border-radius: var(--radius-sm);
  background: var(--cream); border: 1px solid var(--line-lt); padding: 6px;
}
.help-text {
  font-family: var(--sans); font-size: 12.5px; line-height: 1.6;
  color: var(--ink-2); margin-bottom: 10px;
}
.help-text strong { color: var(--ink); font-weight: 600; }
.help-text em { color: var(--ink-3); }
.help-steps {
  font-family: var(--sans); font-size: 12px; line-height: 1.6;
  color: var(--ink-2); padding-left: 18px; margin: 0;
}
.help-steps li { margin-bottom: 4px; }
.help-steps li strong { color: var(--ink); font-weight: 600; }

/* Footer nav */
.help-drawer-footer {
  padding: 8px 16px; border-top: 1px solid var(--green-rule);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.help-nav-btn {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  padding: 6px 14px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--white);
  color: var(--ink-2); cursor: pointer; transition: all var(--transition);
}
.help-nav-btn:hover:not(:disabled) { border-color: var(--green-rule); color: var(--green); background: var(--green-lt); }
.help-nav-btn:disabled { opacity: 0.35; cursor: default; }
.help-nav-counter {
  font-family: var(--sans); font-size: 11px; color: var(--ink-3); font-weight: 500;
}

/* Start Tutorial link (in reference footer) */
.help-start-tutorial-link {
  padding: 6px 16px 10px; text-align: center;
}
.help-start-tutorial-btn {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  color: var(--white); background: var(--green); border: none;
  cursor: pointer; padding: 7px 18px; border-radius: 20px;
  transition: background var(--transition), box-shadow var(--transition);
  box-shadow: 0 2px 8px rgba(26, 74, 56, 0.15);
}
.help-start-tutorial-btn:hover { background: #145a3a; box-shadow: 0 3px 12px rgba(26, 74, 56, 0.25); }
.help-switch-mode-btn {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  color: var(--green); background: none; border: none;
  cursor: pointer; padding: 2px 0; transition: color var(--transition);
}
.help-switch-mode-btn:hover { color: var(--ink); text-decoration: underline; }

/* ── SVG Help Animations ──────────────────── */

/* Drop animation (paste clipboard) */
.help-anim-drop {
  animation: helpDrop 2.5s ease infinite;
}
@keyframes helpDrop {
  0%, 15% { transform: translateY(-16px); opacity: 0; }
  35% { transform: translateY(0); opacity: 1; }
  75%, 100% { transform: translateY(0); opacity: 1; }
}

/* Pulse cell (start from scratch) */
.help-anim-pulse-cell {
  animation: helpPulseCell 2s ease infinite;
}
@keyframes helpPulseCell {
  0%, 100% { fill-opacity: 0.3; }
  50% { fill-opacity: 0.8; }
}

/* Blink cursor */
.help-anim-blink {
  animation: helpBlink 1s steps(2) infinite;
}
@keyframes helpBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Cell select highlight */
.help-anim-select {
  animation: helpSelect 3s ease infinite;
}
@keyframes helpSelect {
  0%, 20% { fill-opacity: 0; stroke-opacity: 0; }
  40%, 80% { fill-opacity: 0.5; stroke-opacity: 1; }
  100% { fill-opacity: 0; stroke-opacity: 0; }
}

/* Cursor click */
.help-anim-cursor-click {
  animation: helpCursorClick 3s ease infinite;
}
@keyframes helpCursorClick {
  0%, 20% { opacity: 0; }
  30% { opacity: 1; transform: scale(1); }
  40% { transform: scale(0.8); }
  45% { transform: scale(1); }
  50% { transform: scale(0.8); }
  55%, 80% { transform: scale(1); opacity: 1; }
  100% { opacity: 0; }
}

/* Pulse grip icon */
.help-anim-pulse-grip {
  animation: helpPulseGrip 2s ease infinite;
}
@keyframes helpPulseGrip {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Drag cell movement */
.help-anim-drag-cell {
  animation: helpDragCell 3s ease infinite;
}
@keyframes helpDragCell {
  0%, 20% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(-8px); opacity: 1; }
  80%, 100% { transform: translateY(0); opacity: 0.6; }
}

/* Toolbar appear */
.help-anim-toolbar-appear {
  animation: helpToolbarAppear 0.4s ease both;
}
@keyframes helpToolbarAppear {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Row drag arrow */
.help-anim-row-drag {
  animation: helpRowDrag 2.5s ease infinite;
}
@keyframes helpRowDrag {
  0%, 25% { opacity: 0; }
  40%, 75% { opacity: 1; }
  100% { opacity: 0; }
}

/* Column drag arrow */
.help-anim-col-drag {
  animation: helpColDrag 2.5s ease infinite;
}
@keyframes helpColDrag {
  0%, 25% { opacity: 0; }
  40%, 75% { opacity: 1; }
  100% { opacity: 0; }
}

/* Swap animation */
.help-anim-swap {
  animation: helpSwap 3s ease infinite;
}
@keyframes helpSwap {
  0%, 20% { opacity: 0; }
  35%, 75% { opacity: 1; }
  100% { opacity: 0; }
}

/* Responsive: below 768px → stretch to fill width */
@media (max-width: 768px) {
  .help-drawer {
    left: 12px; right: 12px; bottom: 12px;
    width: auto; max-height: 50vh;
  }
}

/* ── Tutorial Walkthrough Styles ──────────── */

.tut-progress-bar {
  padding: 10px 16px 8px; border-bottom: 1px solid var(--green-rule);
  display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
}
.tut-step-label {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  color: var(--ink-2);
}
.tut-dots { display: flex; gap: 8px; }
.tut-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--line); background: transparent;
  transition: all 0.3s ease;
}
.tut-dot.done { background: var(--green); border-color: var(--green); }
.tut-dot.active { border-color: var(--green); animation: tutDotPulse 1.5s ease infinite; }
.tut-dot.pending { border-color: var(--line); }

@keyframes tutDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26,74,56,0.3); }
  50% { box-shadow: 0 0 0 4px rgba(26,74,56,0.1); }
}

/* Step content */
.tut-step-body { }
.tut-instruction {
  font-family: var(--sans); font-size: 14px; line-height: 1.65;
  color: var(--ink); margin-bottom: 12px;
}
.tut-instruction strong { color: var(--green); font-weight: 600; }
.tut-hint {
  font-family: var(--sans); font-size: 12px; line-height: 1.5;
  color: var(--ink-3); padding: 8px 12px;
  background: var(--cream); border-radius: var(--radius-sm);
  border-left: 3px solid var(--green-rule);
}

/* Footer */
.tut-footer { gap: 8px; }
.tut-footer-right { display: flex; gap: 6px; align-items: center; }
.tut-nav-btn {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  padding: 6px 14px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--white);
  color: var(--ink-2); cursor: pointer; transition: all var(--transition);
}
.tut-nav-btn:hover:not(:disabled) { border-color: var(--green-rule); color: var(--green); background: var(--green-lt); }
.tut-nav-btn:disabled { opacity: 0.35; cursor: default; }
.tut-skip-btn {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  padding: 6px 14px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--white);
  color: var(--ink-3); cursor: pointer; transition: all var(--transition);
}
.tut-skip-btn:hover { border-color: var(--line); color: var(--ink-2); background: var(--cream); }
.tut-skip-all { border: none; }

/* Success animation */
.tut-success {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 20px 0; gap: 10px;
}
.tut-check-svg {
  width: 56px; height: 56px;
  animation: tutCheckAppear 0.5s ease both;
}
.tut-check-mark {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: tutCheckDraw 0.4s ease 0.3s forwards;
}
.tut-success-text {
  font-family: var(--serif); font-size: 16px; font-weight: 600;
  color: var(--green); animation: tutFadeIn 0.3s ease 0.5s both;
}

@keyframes tutCheckAppear {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes tutCheckDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes tutFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Completion screen */
.tut-completion {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 16px 0; gap: 10px;
}
.tut-trophy-svg {
  width: 60px; height: 60px;
  animation: tutCheckAppear 0.6s ease both;
}
.tut-congrats {
  font-family: var(--serif); font-size: 20px; font-weight: 600;
  color: var(--green); margin: 4px 0 0;
  animation: tutFadeIn 0.3s ease 0.4s both;
}
.tut-congrats-text {
  font-family: var(--sans); font-size: 13px; line-height: 1.6;
  color: var(--ink-2); max-width: 260px; margin: 0;
  animation: tutFadeIn 0.3s ease 0.6s both;
}
.tut-completion-actions {
  display: flex; gap: 10px; margin-top: 12px;
  animation: tutFadeIn 0.3s ease 0.8s both;
}
.tut-completion-actions .btn { font-size: 13px; padding: 8px 20px; }


/* ════════════════════════════════════════════
   ORIGINAL PASTE OVERLAY
════════════════════════════════════════════ */
.original-paste-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; flex-direction: column; background: #fafafa;
  border: 1px solid var(--line); overflow: hidden;
}
.original-paste-overlay.hidden { display: none; }
.original-paste-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 10px; font-size: 0.7rem; font-weight: 600;
  color: var(--ink-3); background: var(--cream-2); border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.original-paste-close { background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--ink-3); padding: 0 2px; line-height: 1; }
.original-paste-close:hover { color: var(--ink); }
.original-paste-content {
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.5;
  padding: 8px 10px; margin: 0; white-space: pre; overflow: auto;
  flex: 1; color: var(--ink-2); tab-size: 8; user-select: text;
}


/* ════════════════════════════════════════════
   TOAST
════════════════════════════════════════════ */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px);
  background: var(--ink); color: white; padding: 10px 20px;
  border-radius: 8px; font-size: 13px; font-weight: 500;
  z-index: 99999; opacity: 0; transition: all 0.3s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.signin-prompt-toast { pointer-events: auto; font-family: var(--sans); }
.signin-prompt-toast a { color: var(--green); font-weight: 600; text-decoration: underline; }


/* ════════════════════════════════════════════
   PLACEHOLDER & MISC
════════════════════════════════════════════ */
.placeholder { color: var(--ink-3); font-size: 13px; padding: 20px; text-align: center; }
.placeholder-sm { font-size: 12px; padding: 12px; }

/* Live preview frame APA table styles */
.live-preview-frame table { border-collapse: collapse; width: 100% !important; max-width: 100% !important; }
.live-preview-frame { font-size: 13px; line-height: 1.6; }

/* Saved item in overlay */
.saved-item {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px;
  margin-bottom: 8px; background: var(--cream);
}
.saved-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.saved-item-name { font-size: 13px; font-weight: 500; }
.saved-item-preview { max-height: 120px; overflow: hidden; font-size: 12px; }
.saved-item-actions { display: flex; gap: 6px; margin-top: 8px; }

/* Clear all button */
.saved-tables-list .btn-clear-all { margin-top: 8px; }

/* View transitions */
/* viewFadeIn removed — was causing a visible flash on every view switch
   because the body content faded 0→1 each time. With the top bar lifted
   to a single global element (see .app-topbar below), the only thing
   that swaps now is the view body, and an instant swap reads cleaner
   than a forced fade. */

/* Preview paper wrapper */
.preview-paper { font-size: 13px; line-height: 1.6; }
.preview-paper table { border-collapse: collapse; width: 100% !important; max-width: 100% !important; }

/* Collapsed preview — keep header visible so user can restore */
.e-preview.collapsed { flex: 0 0 auto; min-height: auto; }
.e-preview.collapsed .e-prev-body { display: none; }

/* Parse status states */
.parse-status.success { color: var(--green); }
.parse-status.error { color: var(--danger); }

/* Button loading/success states */
.btn-loading { opacity: 0.85; pointer-events: none; }
.btn-parse-success { background: var(--green) !important; color: white !important; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
.btn-spinner { animation: spin 0.7s linear infinite; }

/* Tab fade animation */
@keyframes tabFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Drag-over on drop zones */
.ha-upload.drag-over { border-color: var(--green); background: var(--green-lt); }
.doc-assembly-drop-zone.drag-over { border-color: var(--green); background: var(--green-lt); }

/* Helper: saved-table-item (used by overlays) */
.saved-table-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px;
  margin-bottom: 6px; background: var(--cream);
}
.saved-table-info { flex: 1; }
.saved-table-info strong { font-size: 13px; display: block; }
.saved-table-date { font-size: 11px; color: var(--ink-3); }
.saved-table-actions { display: flex; gap: 5px; }
.btn-sm { font-family: var(--sans); font-size: 11px; padding: 4px 8px; }

/* ════════════════════════════════════════
   FIGURE EDITOR
════════════════════════════════════════ */

/* Inline dropzone (inside preview surface) */
.fig-inline-dropzone {
  text-align: center; padding: 48px 24px 32px;
  border: 1.5px dashed var(--line); border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.fig-inline-dropzone:hover,
.fig-inline-dropzone.drag-over {
  border-color: var(--green); background: var(--green-lt);
}
.fig-upload-main {
  font-size: 14px; color: var(--ink); margin: 12px 0 6px; font-weight: 500;
}
.fig-upload-sub {
  font-size: 12px; color: var(--ink-3); margin-bottom: 16px;
}

/* Preview surface */
.fig-preview-surface {
  padding: 24px; min-height: 350px;
  overflow: visible;
  background: var(--white); border: 1px solid var(--line); border-radius: 6px;
}
.fig-preview-surface img {
  display: block; margin: 0 auto; max-width: 100%;
  max-height: 400px; object-fit: contain;
  border-radius: 2px;
}
.fig-preview-caption {
  font-family: var(--serif); line-height: 1.6;
  user-select: text;
  cursor: text;
}
.fig-caption-header {
  margin-bottom: 10px;
}
.fig-caption-notes {
  margin-top: 10px;
}
.fig-preview-label {
  font-size: 12pt; margin-bottom: 2px;
}
.fig-preview-title {
  font-size: 12pt;
}
.fig-preview-note {
  color: var(--ink-2);
}
.fig-preview-source {
  color: var(--ink-2);
}
.fig-preview-label,
.fig-preview-title,
.fig-preview-note,
.fig-preview-source {
  border-radius: 3px;
  transition: background 0.15s;
  padding: 2px 4px;
  margin-left: -4px;
  margin-right: -4px;
}
.fig-preview-label:hover,
.fig-preview-title:hover,
.fig-preview-note:hover,
.fig-preview-source:hover {
  background: rgba(250, 247, 242, 0.4);
}

/* ── Figure editor styles ── */
#fig-step-edit .edit-scroll { flex: 1; overflow: auto; background: var(--cream); }
#fig-step-edit .edit-content { max-width: 700px; margin: 0 auto; width: 100%; min-width: 0; padding: 12vh 32px 160px; }
#fig-step-edit .style-controls { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 36px; }
#fig-step-edit .sc-group { display: flex; flex-direction: column; gap: 4px; }
#fig-step-edit .sc-label { font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600; color: #8a8070; text-transform: uppercase; letter-spacing: 0.06em; }
#fig-step-edit .sc-select-wrap { position: relative; display: inline-flex; }
#fig-step-edit .sc-select { font-family: system-ui, sans-serif; font-size: 13px; font-weight: 400; color: #3a3530; background: #f5f2eb; border: 1.5px solid #d4cec4; border-radius: 8px; padding: 5px 28px 5px 10px; appearance: none; -webkit-appearance: none; cursor: pointer; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
#fig-step-edit .sc-select:focus { border-color: rgba(45,90,39,0.4); box-shadow: 0 0 0 1.5px rgba(45,90,39,0.15); }
#fig-step-edit .sc-chevron { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; color: #8a8070; pointer-events: none; }
#fig-step-edit .sc-icon-btn { background: #f5f2eb; border: 1.5px solid #d4cec4; border-radius: 8px; padding: 5px 8px; cursor: pointer; color: #6a6460; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, background 0.15s; }
#fig-step-edit .sc-icon-btn:hover { background: #ebe7de; border-color: #c5bfb5; }
#fig-step-edit .table-meta { margin-bottom: 18px; }
#fig-step-edit .table-num-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; margin-left: 8px; }
#fig-step-edit .table-num-label { font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600; color: #6a6460; letter-spacing: 0.06em; }
#fig-step-edit .table-num-input { width: 36px; font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600; color: #6a6460; }
#fig-step-edit .table-title-input { width: 100%; font-family: 'Georgia', serif; font-size: 15px; font-style: italic; color: #2a2520; line-height: 1.4; margin-left: 8px; }
#fig-step-edit .edit-field { background: transparent; border: none; outline: none; padding: 4px 8px; margin: 0 -8px; border-radius: 6px; transition: all 0.15s; font-family: inherit; font-size: inherit; color: inherit; }
#fig-step-edit .edit-field:hover { background: rgba(45, 90, 39, 0.05); box-shadow: 0 0 0 1.5px rgba(45,90,39,0.15); }
#fig-step-edit .edit-field:focus { background: rgba(45, 90, 39, 0.05); box-shadow: 0 0 0 1.5px rgba(45,90,39,0.35); }
#fig-step-edit .edit-field::placeholder { color: #9a9490; }
#fig-step-edit .paper-editor { flex: none; overflow: visible; padding: 0; background: transparent; display: block; position: relative; margin-bottom: 0; }

/* Single-mode action bar below image */
.fig-single-actions {
  justify-content: center;
  padding: 8px 0 4px;
}
#fig-step-edit .fig-note-wrap { margin-top: 12px; }
#fig-step-edit .fig-note-wrap:first-of-type { margin-top: 32px; }
#fig-step-edit .fig-note-label { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3, #8a8070); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
#fig-step-edit .note-textarea { width: 100%; min-height: 24px; resize: none; font-family: system-ui, sans-serif; font-size: 13px; font-weight: 400; color: #3a3530; line-height: 1.6; overflow: hidden; }
#fig-step-edit .source-field-wrap { margin-top: 12px; }
#fig-step-edit .source-input { width: 100%; font-family: system-ui, sans-serif; font-size: 13px; color: #3a3530; }
#fig-step-edit .fig-more-notes-section { margin-top: 20px; }
#fig-step-edit .fig-more-notes-section .formatting-toggle { display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 4px 0; }
#fig-step-edit .fig-more-notes-section .formatting-arrow { font-size: 9px; color: #9a9490; display: inline-block; transition: transform 0.2s; }
#fig-step-edit .fig-more-notes-section .formatting-arrow.open { transform: rotate(90deg); }
#fig-step-edit .fig-more-notes-section .formatting-toggle-label { font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600; color: #8a8070; letter-spacing: 0.05em; }
#fig-step-edit .fig-more-notes-panel { margin-top: 8px; }
#fig-step-edit .e-bottom { position: fixed; bottom: 0; left: 56px; right: 0; height: 50px; background: var(--cream); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 32px; z-index: 20; }
#fig-step-edit .eb-btn { font-family: system-ui, sans-serif; font-size: 13px; font-weight: 400; color: #6a6460; background: transparent; border: 1px solid #c5bfb5; border-radius: 8px; padding: 6px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all 0.15s; }
#fig-step-edit .eb-btn:hover { background: rgba(0,0,0,0.03); }
#fig-step-edit .eb-btn-green { font-family: system-ui, sans-serif; font-size: 13px; font-weight: 500; color: white; background: #2d5a27; border: none; border-radius: 8px; padding: 6px 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all 0.15s; }
#fig-step-edit .eb-btn-green:hover { background: #245020; }
#fig-step-edit .eb-center { position: absolute; left: 50%; transform: translateX(-50%); }
#fig-step-edit .eb-tray-toggle { font-family: system-ui, sans-serif; font-size: 13px; font-weight: 600; color: #3a3530; background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 4px 8px; }
#fig-step-edit .eb-tray-badge { font-family: system-ui, sans-serif; font-size: 10px; font-weight: 600; color: white; background: #2d5a27; padding: 1px 7px; border-radius: 10px; }
#fig-step-edit .eb-tray-arrow { font-size: 16px; color: #9a9490; line-height: 1; }
#fig-step-edit .eb-right { display: flex; gap: 8px; align-items: center; }
#fig-step-edit .saved-tray { position: fixed; bottom: 50px; left: 56px; right: 0; height: 160px; background: var(--cream); border-top: 1px solid var(--line); padding: 14px 32px 12px; z-index: 19; display: flex; flex-direction: column; }
#fig-step-edit .saved-tray .saved-tray-body { overflow-x: auto; overflow-y: hidden; flex: 1; min-height: 0; }
#fig-step-edit .saved-tray .drawer-cards { display: flex; gap: 8px; align-items: start; height: 100%; transition: gap 0.2s ease; cursor: grab; }
#fig-step-edit .saved-tray .drawer-cards.dc-drag-active { gap: 20px; cursor: grabbing; }
#fig-step-edit .saved-tray .dc-card { min-width: calc(210px * var(--tray-scale, 1)); max-width: calc(240px * var(--tray-scale, 1)); background: #fdfcf8; border: 1px solid #d4cec4; border-radius: 8px; padding: 4px 4px; box-shadow: 0 2px 8px rgba(70,55,25,0.08); display: flex; flex-direction: column; cursor: pointer; }
#fig-step-edit .saved-tray .dc-card-head { border-bottom: none; background: transparent; padding: 0 0 4px; }
#fig-step-edit .saved-tray .dc-card-name { font-family: system-ui, sans-serif; font-size: 10px; font-weight: 600; color: #3a3530; }
#fig-step-edit .saved-tray .dc-card-body { padding: 0; min-height: 0; max-height: calc(80px * var(--tray-scale, 1)); overflow: hidden; }
#fig-step-edit .saved-tray .dc-fig-thumb { width: 100%; height: calc(72px * var(--tray-scale, 1)); object-fit: cover; border-radius: 4px; }
#fig-step-edit .saved-tray .dc-card-foot { font-size: 9px; color: #b0aaa0; border-top: none; padding: 4px 0 0; margin-top: 4px; }
#fig-step-edit .saved-tray .dc-card { cursor: grab; }
#fig-step-edit .saved-tray .dc-card.dc-dragging { cursor: grabbing; }
#fig-step-edit .saved-tray .dc-card[data-label] { border-left: 3.5px solid var(--card-label); }
#fig-step-edit .export-wrap { position: relative; }
#fig-step-edit .export-menu { position: absolute; bottom: 44px; right: 0; background: #fdfcf8; border: 1px solid #d4cec4; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 32px rgba(70,55,25,0.14); min-width: 220px; z-index: 100; }

/* ════════════════════════════════════════
   FIGURE ANNOTATION TOOLBAR
════════════════════════════════════════ */
.fig-annotation-toolbar {
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px 10px; margin-bottom: 10px;
  background: rgba(245, 242, 235, 0.95); border: 1px solid #d4cec4; border-radius: 8px;
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.fig-toolbar-row { display: flex; align-items: center; gap: 6px; }
.fig-toolbar-buttons { height: 36px; justify-content: space-between; }
.fig-toolbar-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.fig-toolbar-options { display: flex; align-items: center; gap: 6px; height: 34px; min-height: 34px; overflow: visible; }
.fig-tool-group { display: flex; gap: 2px; }
/* Tools relocated into the Format panel: lay out as an even row of buttons. */
.fig-tool-group-panel { gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.fig-tool-group-panel .fig-tool-btn { flex: 1 1 0; min-width: 72px; justify-content: center; }
.fig-tool-divider { width: 1px; height: 22px; background: #d4cec4; margin: 0 4px; }
.fig-tool-btn {
  width: 32px; height: 32px;
  border: 1px solid transparent; border-radius: 6px;
  background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #6a6460; transition: all 0.15s;
}
.fig-tool-btn:hover { background: #ebe7de; color: #3a3530; }
.fig-tool-btn.active { color: #2d5a27; background: none; border-bottom: 2px solid #2d5a27; border-radius: 4px 4px 0 0; }
.fig-tool-btn-del { color: #c0392b; }
.fig-tool-btn-del:hover { background: rgba(192,57,43,0.1); color: #e74c3c; }
.fig-tool-select {
  font-family: system-ui, sans-serif; font-size: 12px;
  background: #fff; border: 1px solid #d4cec4; border-radius: 6px;
  padding: 4px 8px; color: #3a3530; cursor: pointer; outline: none;
}
.fig-tool-select:focus { border-color: rgba(45,90,39,0.4); }
.fig-tool-color {
  width: 26px; height: 26px; border: 1px solid #d4cec4;
  border-radius: 6px; padding: 0; cursor: pointer; background: none;
}
/* Pill button group (replaces <select> dropdowns) */
.fig-pill-group {
  display: flex; gap: 2px;
  background: #ebe7de; border-radius: 6px; padding: 2px;
}
.fig-pill-btn {
  height: 26px; padding: 0 8px;
  border: 1px solid transparent; border-radius: 4px;
  background: none; cursor: pointer;
  font-family: system-ui, sans-serif; font-size: 11px; font-weight: 500;
  color: #6a6460; white-space: nowrap;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.fig-pill-btn:hover { background: rgba(255,255,255,0.6); color: #3a3530; }
.fig-pill-btn.active {
  background: #fff; border-color: rgba(45,90,39,0.3);
  color: #2d5a27; box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.fig-pill-stroke { padding: 0 4px; }
/* Wide tool button with label */
.fig-tool-btn-wide {
  width: auto; padding: 0 8px; gap: 4px;
}
.fig-tool-btn-label {
  font-size: 11px; font-weight: 500;
}
/* Tool group label */
.fig-tool-group-label {
  font-family: system-ui, sans-serif; font-size: 10px; font-weight: 600;
  color: #9a9490; text-transform: uppercase; letter-spacing: 0.5px;
  margin-right: 2px;
}
.fig-tool-label {
  font-family: system-ui, sans-serif; font-size: 11px; font-weight: 500;
  color: #6a6460; white-space: nowrap;
}
.fig-bgremove-options {
  display: flex; align-items: center; gap: 6px;
}
.fig-bgremove-options .fig-adj-range { width: 70px; }
.fig-bgremove-options .fig-adj-value { font-size: 11px; min-width: 18px; text-align: center; }
.fig-bgremove-submode {
  display: flex; gap: 2px;
  background: #ebe7de; border-radius: 6px; padding: 2px;
}
.fig-bgremove-submode-btn {
  height: 26px;
  border: 1px solid transparent; border-radius: 4px;
  background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  color: #6a6460; transition: all 0.15s;
}
.fig-bgremove-submode-btn:hover { background: rgba(255,255,255,0.6); color: #3a3530; }
.fig-bgremove-submode-btn.active {
  background: #fff; border-color: rgba(45,90,39,0.3);
  color: #2d5a27; box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* ════════════════════════════════════════
   FIGURE ADJUSTMENTS DROPDOWN (inside toolbar)
════════════════════════════════════════ */
.fig-adj-dropdown {
  position: absolute; top: 100%; right: 0; margin-top: 4px;
  background: #fdfcf8; border: 1px solid #d4cec4; border-radius: 8px;
  padding: 8px 12px; min-width: 280px; z-index: 30;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.fig-adj-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 0;
}
.fig-adj-row label {
  font-family: system-ui, sans-serif; font-size: 12px; font-weight: 500;
  color: #6a6460; min-width: 80px;
}
.fig-adj-value {
  font-weight: 400; color: #9a9490; margin-left: 4px;
}
.fig-bg-options { display: flex; gap: 4px; align-items: center; }
.fig-bg-btn {
  width: 24px; height: 24px; border: 1.5px solid #d4cec4;
  border-radius: 5px; cursor: pointer; transition: all 0.15s;
}
.fig-bg-btn:hover { border-color: #2d5a27; }
.fig-bg-btn.active { border-color: #2d5a27; box-shadow: 0 0 0 1.5px rgba(45,90,39,0.3); }
.fig-adj-range {
  width: 100px; height: 4px; accent-color: #2d5a27; cursor: pointer;
}
.fig-adj-row .fig-tool-select {
  height: 30px; /* matches .fig-pill-group height (26px btn + 2px padding × 2) */
  min-width: 130px; /* match visual weight of pill group controls */
}

/* Toggle switch */
.fig-toggle { position: relative; width: 36px; height: 20px; display: inline-block; }
.fig-toggle input { opacity: 0; width: 0; height: 0; }
.fig-toggle-slider {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: #d4cec4; border-radius: 20px; cursor: pointer;
  transition: background 0.2s;
}
.fig-toggle-slider::before {
  content: ''; position: absolute; width: 16px; height: 16px;
  left: 2px; bottom: 2px; background: white; border-radius: 50%;
  transition: transform 0.2s;
}
.fig-toggle input:checked + .fig-toggle-slider { background: #2d5a27; }
.fig-toggle input:checked + .fig-toggle-slider::before { transform: translateX(16px); }

/* Canvas overlay */
#figAnnotationCanvas { pointer-events: auto; }
.fig-anno-text-input {
  font-family: system-ui, sans-serif; box-sizing: border-box;
}

/* ════════════════════════════════════════
   MULTI-PANEL TOGGLE
════════════════════════════════════════ */
.fig-multi-toggle.active {
  background: var(--green-lt); border-color: var(--green);
  color: var(--green-dk);
}
.fig-tool-btn.fig-tool-disabled {
  opacity: 0.35; pointer-events: none;
}
.fig-tools-disabled {
  opacity: 0.35; pointer-events: none;
}

/* Multi-panel grid */
.fig-multi-grid {
  display: grid; gap: 8px; min-height: 200px;
}
.fig-multi-slot {
  position: relative; background: var(--white);
  border: 1.5px dashed #d4cec4; border-radius: 6px;
  display: flex; flex-direction: column;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
  overflow: hidden; min-height: 280px;
}
.fig-multi-slot:not(.has-image) { align-items: center; justify-content: center; }
.fig-multi-slot:hover { border-color: #2d5a27; background: rgba(45,90,39,0.02); }
.fig-multi-slot.has-image { border-style: solid; border-color: #d4cec4; cursor: default; }
.fig-multi-slot img {
  width: 100%; flex: 1; object-fit: contain; display: block; min-height: 0;
}
.fig-multi-slot-label {
  font-family: system-ui, sans-serif; font-size: 13px; font-weight: 700;
  color: #3a3530; padding: 4px 8px 2px; flex-shrink: 0;
}
.fig-multi-slot-placeholder {
  font-family: system-ui, sans-serif; font-size: 12px;
  color: #9a9490; text-align: center; padding: 12px;
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.fig-multi-slot-placeholder svg { display: block; margin: 0 auto 6px; }
.fig-slot-actions {
  display: flex; gap: 3px; justify-content: flex-end;
  padding: 4px 4px 2px; z-index: 4;
}
.fig-slot-btn {
  background: rgba(255,255,255,0.85); border: 1px solid #d0d0d0;
  border-radius: 4px; padding: 3px 5px; cursor: pointer;
  display: flex; align-items: center; color: #555;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fig-slot-btn:hover { background: #fff; color: #2d5a27; border-color: #2d5a27; }
.fig-slot-btn-danger:hover { color: #c0392b; border-color: #c0392b; }
.fig-multi-slot-active {
  border: 2px solid #2d5a27 !important; border-style: solid !important;
  box-shadow: 0 0 0 2px rgba(45,90,39,0.2);
}

/* ── Figure Dimensions Bar ── */
.fig-dimensions-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 6px 12px; margin-top: 8px;
  font-family: system-ui, -apple-system, sans-serif; font-size: 11px;
  color: #8a8070; background: rgba(245,242,235,0.6); border-radius: 6px;
}
.fig-dims-text { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.fig-dims-dpi-wrap { display: flex; align-items: center; gap: 2px; }
.fig-dims-dpi-label { font-size: 10px; color: #9a9490; }
.fig-dims-dpi-select {
  font-family: system-ui, -apple-system, sans-serif; font-size: 11px;
  color: #6a6460; background: #fff; border: 1px solid #d4cec4;
  border-radius: 4px; padding: 1px 4px; cursor: pointer; outline: none;
}
.fig-dims-dpi-select:focus { border-color: rgba(45,90,39,0.4); }

/* ── Crop Tool Options ── */
.fig-crop-options { display: flex; align-items: center; gap: 6px; }
.fig-crop-dims {
  font-family: system-ui, -apple-system, sans-serif; font-size: 11px;
  color: #6a6460; font-variant-numeric: tabular-nums; min-width: 80px;
}
.fig-pill-btn-action {
  background: #2d5a27 !important; color: #fff !important;
  border-color: #2d5a27 !important; gap: 4px;
}
.fig-pill-btn-action:hover {
  background: #245020 !important; color: #fff !important;
}
.fig-pill-btn-action svg { stroke: #fff; }

/* ════════════════════════════════════════════
   AUTH UI
════════════════════════════════════════════ */

/* Auth & account overlays — smooth fade + slide-up animation */
#authOverlay, #accountSettingsOverlay, #signOutOverlay, #syncChoiceOverlay {
  display: flex; opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}
#authOverlay.visible, #accountSettingsOverlay.visible, #signOutOverlay.visible, #syncChoiceOverlay.visible {
  opacity: 1; pointer-events: auto; visibility: visible;
}
#authOverlay .auth-dialog, #accountSettingsOverlay .acct-dialog, #signOutOverlay .signout-dialog, #syncChoiceOverlay .acct-dialog {
  transform: translateY(16px); opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
#authOverlay.visible .auth-dialog, #accountSettingsOverlay.visible .acct-dialog, #signOutOverlay.visible .signout-dialog, #syncChoiceOverlay.visible .acct-dialog {
  transform: translateY(0); opacity: 1;
}
/* Auth redirect fade overlay */
.auth-redirect-fade {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--white); opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
}
.auth-redirect-fade.active { opacity: 1; pointer-events: auto; }
/* Auth spinner */
.auth-spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid var(--line); border-top-color: var(--green);
  border-radius: 50%; animation: authSpin 0.6s linear infinite;
  margin-right: 8px; vertical-align: middle;
}
@keyframes authSpin { to { transform: rotate(360deg); } }

/* Sign-out confirmation dialog */
.signout-dialog {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; padding: 28px 32px; max-width: 340px; width: 90%;
  box-shadow: 0 16px 48px rgba(22,20,14,0.15); text-align: center;
}
.signout-header {
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  color: var(--ink); margin-bottom: 8px;
}
.signout-desc {
  font-family: var(--sans); font-size: 13px; color: var(--ink-3);
  margin-bottom: 20px;
}
.signout-actions {
  display: flex; gap: 10px; justify-content: center;
}

/* Auth modal — extends the existing .drag-dialog-overlay pattern */
.auth-dialog {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; padding: 32px; max-width: 400px; width: 90%;
  box-shadow: 0 16px 48px rgba(22,20,14,0.15); position: relative;
}
.auth-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; font-size: 22px;
  color: var(--ink-3); cursor: pointer; padding: 4px;
  line-height: 1;
}
.auth-close:hover { color: var(--ink); }
.auth-header { text-align: center; margin-bottom: 24px; }
.auth-logo {
  font-family: var(--serif); font-size: 24px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.03em;
}
.auth-logo em { font-style: italic; color: var(--green); }
.auth-header h3 {
  font-family: var(--serif); font-size: 20px; font-weight: 600;
  color: var(--ink); margin-top: 12px;
}
.auth-sub {
  font-size: 13px; color: var(--ink-3); margin-top: 4px;
  font-family: var(--sans);
}

/* Google button */
.btn-google {
  width: 100%; padding: 10px 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: 8px; font-family: var(--sans); font-size: 14px;
  font-weight: 500; color: var(--ink); cursor: pointer;
  transition: all 0.15s;
}
.btn-google:hover { background: var(--cream-2); border-color: var(--ink-3); }
.btn-google svg { flex-shrink: 0; }

/* Divider */
.auth-divider {
  display: flex; align-items: center; gap: 16px;
  margin: 20px 0; color: var(--ink-3); font-size: 12px;
  font-family: var(--sans);
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* Form inputs */
.auth-dialog input[type="email"],
.auth-dialog input[type="password"],
.auth-dialog input[type="text"] {
  width: 100%; padding: 10px 14px; margin-bottom: 10px;
  font-family: var(--sans); font-size: 14px;
  border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--white); color: var(--ink);
  outline: none; transition: border-color 0.15s;
  box-sizing: border-box;
}
.auth-dialog input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(26,74,56,0.08);
}

/* Submit button */
.auth-submit {
  width: 100%; margin-top: 4px; justify-content: center;
  display: flex; padding: 10px 16px; font-size: 14px;
}
.auth-submit:disabled {
  opacity: 0.6; cursor: not-allowed;
}

/* Error message */
.auth-error {
  font-size: 12.5px; color: var(--danger, #b84130);
  text-align: center; margin-top: 8px; min-height: 18px;
  font-family: var(--sans);
}

/* Footer toggle */
.auth-footer {
  text-align: center; margin-top: 20px;
  font-size: 13px; color: var(--ink-3);
  font-family: var(--sans);
}
.auth-footer a {
  color: var(--green); font-weight: 500;
  text-decoration: none;
}
.auth-footer a:hover { text-decoration: underline; }

/* Forgot password link */
.auth-forgot-link {
  display: block; text-align: right;
  font-family: var(--sans); font-size: 12px;
  color: var(--ink-3); text-decoration: none;
  margin: -4px 0 10px; cursor: pointer;
}
.auth-forgot-link:hover { color: var(--green); text-decoration: underline; }

/* Back to sign in link */
.auth-back-link {
  display: block; font-family: var(--sans); font-size: 13px;
  color: var(--green); text-decoration: none;
  font-weight: 500; margin-top: 4px;
}
.auth-back-link:hover { text-decoration: underline; }

/* Error links */
.auth-error a {
  color: var(--green); font-weight: 500; text-decoration: underline;
}
.auth-error a:hover { opacity: 0.8; }

/* Email opt-in checkbox */
.auth-opt-in, .acct-opt-in {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 13px; color: var(--ink-2);
  cursor: pointer; margin: 4px 0 8px;
}
.auth-opt-in input, .acct-opt-in input {
  accent-color: var(--green); width: 16px; height: 16px; cursor: pointer;
}

/* Account profile section */
.acct-profile-row { margin-bottom: 12px; }
.acct-label {
  display: block; font-family: var(--sans); font-size: 12px;
  color: var(--ink-3); margin-bottom: 4px; font-weight: 500;
}
.acct-input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--cream-3);
  border-radius: 6px; font-family: var(--sans); font-size: 14px;
  color: var(--ink-1); background: var(--cream-0);
}
.acct-input:focus { outline: none; border-color: var(--green); }

/* Confirmation state (shown after signup) */
.auth-confirm-state { text-align: center; padding: 16px 0 8px; }
.auth-confirm-icon { margin-bottom: 16px; }
.auth-confirm-title {
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  color: var(--ink); margin-bottom: 8px;
}
.auth-confirm-desc {
  font-family: var(--sans); font-size: 13px; color: var(--ink-3);
  line-height: 1.5; margin-bottom: 20px;
}
.auth-confirm-desc strong { color: var(--ink); font-weight: 500; }
.auth-resend-btn {
  margin: 0 auto; display: inline-block; font-size: 13px;
  font-family: var(--sans); color: var(--green); font-weight: 500;
  background: none; border: 1.5px solid var(--line); border-radius: 8px;
  padding: 8px 20px; cursor: pointer; transition: all 0.15s;
}
.auth-resend-btn:hover { border-color: var(--green); background: rgba(26,74,56,0.04); }
.auth-resend-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Mode switch fade transitions */
.auth-header, .auth-footer {
  transition: opacity 0.15s ease;
}
.auth-header.fade-out, .auth-footer.fade-out { opacity: 0; }
.auth-body > form,
.auth-body > .auth-confirm-state,
.auth-body > .auth-error {
  transition: opacity 0.15s ease;
}
.auth-body.fade-out > form,
.auth-body.fade-out > .auth-confirm-state,
.auth-body.fade-out > .auth-error { opacity: 0; }
.auth-body.switching { pointer-events: none; }

/* ── Nav user menu ──────────────────────────────────────────── */
.nav-user-menu { position: relative; display: inline-flex; }
.nav-user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--green); color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  border: none; cursor: pointer; transition: opacity 0.15s;
}
.nav-user-avatar:hover { opacity: 0.85; }
.nav-user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px; min-width: 200px;
  box-shadow: 0 8px 24px rgba(22,20,14,0.12); display: none;
  z-index: 1000;
}
.nav-user-dropdown.open { display: block; }
.nav-user-email {
  font-size: 12.5px; color: var(--ink-3); padding: 6px 10px;
  border-bottom: 1px solid var(--line-lt); margin-bottom: 4px;
  font-family: var(--sans); word-break: break-all;
}
.nav-dd-btn {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; font-size: 13px; font-family: var(--sans);
  color: var(--ink-2); background: none; border: none;
  border-radius: 6px; cursor: pointer; transition: background 0.1s;
}
.nav-dd-btn:hover { background: var(--cream-2); color: var(--ink); }

/* ── Rail user button ───────────────────────────────────────── */
.rail-user-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--green); color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 10px; font-weight: 600;
}
/* Rail user dropdown */
.rail-user-dropdown {
  position: fixed; display: none; z-index: 10001;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px; min-width: 200px;
  box-shadow: 0 8px 24px rgba(22,20,14,0.12);
}
.rail-user-dropdown.open { display: block; }

/* ── Migration banner ───────────────────────────────────────── */
.migration-banner {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 20px;
  box-shadow: 0 8px 24px rgba(22,20,14,0.12);
  display: flex; align-items: center; gap: 16px;
  z-index: 9000; font-family: var(--sans); font-size: 13px;
  max-width: 500px;
}
.migration-info { flex: 1; }
.migration-info strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.migration-info span { color: var(--ink-3); font-size: 12px; }
.migration-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-sm { padding: 6px 14px; font-size: 12px; }

/* ── Account settings dialog ───────────────────────────────── */
.acct-dialog {
  background: var(--white); border-radius: 14px;
  padding: 32px 36px; width: 440px; max-width: 92vw;
  position: relative; font-family: var(--sans);
  box-shadow: 0 20px 60px rgba(22,20,14,0.18);
}
.acct-header h3 {
  font-family: var(--serif); font-size: 20px;
  font-weight: 600; color: var(--ink); margin: 0 0 4px;
}
.acct-email {
  font-size: 13px; color: var(--ink-3); margin: 0;
  word-break: break-all;
}
.acct-body { margin-top: 24px; }
.acct-section {
  padding: 18px 0; border-top: 1px solid var(--line-lt);
}
.acct-section h4 {
  font-size: 14px; font-weight: 600; color: var(--ink);
  margin: 0 0 6px;
}
.acct-desc {
  font-size: 13px; color: var(--ink-3); margin: 0 0 12px;
  line-height: 1.5;
}
.acct-danger h4 { color: #c0392b; }
.acct-danger .acct-desc { color: var(--ink-3); }
.acct-delete-confirm {
  margin-top: 12px; padding: 14px; background: #fdf2f2;
  border: 1px solid #f5c6cb; border-radius: 8px;
}
.acct-warn {
  font-size: 13px; color: #c0392b; margin: 0 0 8px;
}
.acct-confirm-input {
  display: block; width: 100%; padding: 8px 10px;
  font-size: 13px; font-family: var(--sans);
  border: 1px solid var(--line); border-radius: 6px;
  margin-bottom: 10px; box-sizing: border-box;
}
.acct-confirm-input:focus {
  outline: none; border-color: #c0392b;
}
.btn-danger {
  padding: 8px 18px; font-size: 13px; font-family: var(--sans);
  font-weight: 600; color: white; background: #c0392b;
  border: none; border-radius: 8px; cursor: pointer;
  transition: background 0.15s;
}
.btn-danger:hover { background: #a93226; }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost-danger {
  color: #c0392b; border-color: #f5c6cb;
}
.btn-ghost-danger:hover {
  background: #fdf2f2; color: #a93226;
}
.acct-manage-btns {
  display: flex; flex-direction: column; gap: 8px;
}
.acct-manage-btns .btn {
  justify-content: flex-start; text-align: left; width: 100%;
}
.acct-manage-btns .btn span {
  font-weight: 400; opacity: 0.7; margin-left: 4px;
}
.acct-sync-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
}
.acct-sync-head h4 {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
}
.acct-sync-status {
  display: inline-flex; align-items: center;
  min-height: 20px; padding: 2px 8px; border-radius: 999px;
  background: var(--cream-2); color: var(--ink-3);
  font-size: 11px; font-weight: 600; font-family: var(--sans);
}
.acct-sync-status.is-on {
  background: var(--green-lt); color: var(--green);
}
.acct-switch {
  position: relative; display: inline-flex; width: 42px; height: 24px;
  flex: 0 0 auto; cursor: pointer;
}
.acct-switch input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.acct-switch span {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--cream-3); transition: background 0.16s ease;
}
.acct-switch span::before {
  content: ''; position: absolute; width: 18px; height: 18px;
  left: 3px; top: 3px; border-radius: 50%;
  background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 0.16s ease;
}
.acct-switch input:checked + span { background: var(--green); }
.acct-switch input:checked + span::before { transform: translateX(18px); }
.acct-switch input:disabled + span { opacity: 0.55; cursor: progress; }
.acct-confirm-actions {
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
}
.sync-choice-dialog {
  width: 500px;
}
.sync-choice-actions {
  display: grid; gap: 10px; margin-top: 22px;
}
.sync-choice-card {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  background: var(--white); color: var(--ink); cursor: pointer;
  padding: 14px 16px; text-align: left; font-family: var(--sans);
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.sync-choice-card:hover,
.sync-choice-card:focus-visible {
  border-color: var(--green); background: var(--green-lt);
  transform: translateY(-1px); outline: none;
}
.sync-choice-card strong {
  font-size: 14px; font-weight: 600;
}
.sync-choice-card span {
  color: var(--ink-3); font-size: 12.5px; line-height: 1.45;
}
.sync-choice-card.recommended {
  border-color: rgba(26,74,56,0.28);
}
/* ── Export folder selector ───────────────────────────────── */
.acct-export-folders {
  margin-bottom: 12px; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--line-lt); border-radius: 8px; padding: 6px 0;
}
.acct-export-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; font-size: 13px; font-family: var(--sans);
  color: var(--ink); cursor: pointer;
}
.acct-export-row:hover { background: var(--cream-2); }
.acct-export-row input[type="checkbox"] { accent-color: var(--green); flex-shrink: 0; }
.acct-export-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-export-count { font-size: 11px; color: var(--ink-3); flex-shrink: 0; }
.acct-export-all {
  border-bottom: 1px solid var(--line-lt); margin-bottom: 4px; padding-bottom: 8px; font-weight: 600;
}
.acct-export-sep {
  border-top: 1px solid var(--line-lt); margin-top: 4px; padding-top: 8px;
}

/* ── Auth responsive ────────────────────────────────────────── */
@media (max-width: 600px) {
  .auth-dialog { padding: 24px 20px; margin: 16px; }
  .acct-dialog { padding: 24px 20px; margin: 16px; }
  .migration-banner { left: 16px; right: 16px; transform: none; flex-direction: column; }
}

/* ════════════════════════════════════════════
   EDITOR (Tables) — v9 design system
   Internally still #editor (storage/IDs unchanged).
   Mirrors #hub palette; scoped to avoid pollution.
════════════════════════════════════════════ */

#editor.view {
  --ed-bg:           #ffffff;
  --ed-surface:      #ffffff;
  --ed-source-bg:    #f4f6f8;
  --ed-border:       #e3e7ec;
  --ed-border-soft:  #eef1f4;
  --ed-border-strong:#d2d8df;
  --ed-text-pri:     #1b1e24;
  --ed-text-sec:     #545a64;
  --ed-text-muted:   #878d97;
  --ed-text-subtle:  #b9bec6;
  --ed-hover-bg:     #eef1f5;
  --ed-tint:         #e9edf1;
  --ed-data:         #46607a;
  --ed-danger:       #b8493a;
  /* Ledger diagnostics — quiet glyph vocabulary (no stripes). Bronze is the
     only hazard colour; ok/miss/note stay in the cool silver family. */
  --ed-haz:          #9a6a23;
  --ed-haz-soft:     #b98a3e;
  --ed-haz-bg:       #faf5ec;
  --ed-ok:           #5a7384;
  --ed-miss:         #98a0ab;
  --ed-note:         #878d97;
  --ed-shadow-pop:   0 14px 36px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.05);
  --ed-shadow-soft:  -8px 0 24px rgba(0,0,0,0.06);
  --ed-panel-motion: 0.42s;
  --ed-panel-fade:   0.28s;
  --ed-panel-ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --ed-tray-motion:  0.62s;
  --ed-tray-fade:    0.36s;
}

/* Override legacy shell: column flex with topbar at top, app-wrap below. */
#editor.view {
  background: var(--ed-bg);
  color: var(--ed-text-pri);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  overflow: hidden;
}
#editor.view ::selection { background: rgba(45,74,110,0.18); }
#editor.view.on { display: flex; flex-direction: column; }

/* Hide legacy editor chrome — chapter tabs replace .rail and .e-top. */
#editor .rail,
#editor #editorTopBar { display: none; }

/* .app-wrap: take remaining height after topbar. */
#editor .app-wrap {
  height: auto;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
}
#editor .app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

/* #tableMode fills .app-main when active. */
#editor #tableMode {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* When tableMode is hidden (Figures/Stats active), reset the override
   so legacy modes flow naturally. */
#editor #tableMode[style*="display:none"],
#editor #tableMode[style*="display: none"] { display: none !important; }

#editor #figureMode[style*="display:none"],
#editor #figureMode[style*="display: none"] { display: none !important; }

/* ── TOP BAR (chapter tabs, shared with Library) ──────────────────── */
#editor .lib-topbar {
  height: 64px;
  display: flex;
  align-items: baseline;
  padding: 22px 32px 0;
  background: var(--ed-bg);
  position: relative;
  z-index: 2;
  gap: 56px;
  flex-shrink: 0;
}
#editor .lib-brand {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ed-text-pri);
  line-height: 1;
  cursor: pointer;
}
#editor .lib-brand em { font-style: italic; font-weight: 500; }
#editor .lib-topbar-spacer { flex: 1; }
#editor .ch-tabs { display: flex; gap: 28px; align-items: baseline; }
#editor .ch-tab {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--ed-text-muted);
  cursor: pointer;
  padding-bottom: 4px;
  line-height: 1.2;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: color 0.12s, border-color 0.12s;
  letter-spacing: -0.005em;
}
#editor .ch-tab .num {
  font-style: italic;
  color: var(--ed-text-subtle);
  margin-right: 6px;
  font-size: 12.5px;
}
#editor .ch-tab:hover { color: var(--ed-text-pri); }
#editor .ch-tab.active {
  color: var(--ed-text-pri);
  border-bottom-color: var(--ed-text-pri);
}
#editor .ch-tab.active .num { color: var(--ed-text-sec); }
#editor .lib-avatar-wrap { position: relative; }
#editor .lib-avatar {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--ed-text-sec);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  border: none;
  background: transparent;
  transition: color 0.12s;
}
#editor .lib-avatar:hover { color: var(--ed-text-pri); }

/* ── DOC BAR ───────────────────────────────────────────────────────── */
#editor .doc-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--ed-border-soft);
  flex-shrink: 0;
}
#editor .doc-breadcrumb {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: var(--ed-text-muted);
  min-width: 0;
  flex: 1;
}
#editor .doc-project {
  color: var(--ed-text-muted);
  white-space: nowrap;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  border-bottom: 1px dashed transparent;
  background: transparent;
  border-top: none; border-left: none; border-right: none;
  font-family: inherit; font-size: inherit;
}
#editor .doc-project:hover { color: var(--ed-text-pri); border-bottom-color: var(--ed-text-subtle); }
#editor .doc-project.doc-project-static {
  cursor: default;
  border-bottom-color: transparent !important;
}
#editor .doc-project.doc-project-static:hover {
  color: var(--ed-text-muted);
  background: transparent;
}
#editor .doc-btn[disabled],
#editor .doc-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
#editor .doc-breadcrumb .sep { color: var(--ed-text-subtle); }
#editor .doc-title {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--ed-text-pri);
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  letter-spacing: -0.005em;
  min-width: 0;
  flex: 0 1 320px;  /* don't grow past the title; leave room for inline status */
}
#editor .doc-title::placeholder { color: var(--ed-text-subtle); }
#editor .doc-status {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ed-text-muted);
  user-select: none;
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Pill is hidden entirely when there's nothing to say (cold/new state).
   JS sets the inner HTML to empty when no committed save / no edit. */
#editor .doc-status:empty { display: none; }
/* Separator chip before the status — only shown when there's content,
   visually attaching the status to the title that precedes it. */
#editor .doc-status:not(:empty)::before {
  content: '·';
  color: var(--ed-text-subtle);
  margin-right: 6px;
  font-style: normal;
}
#editor .doc-status.flash { animation: ed-status-flash 0.6s ease-out; }
@keyframes ed-status-flash {
  0%   { color: var(--ed-text-pri); }
  100% { color: var(--ed-text-muted); }
}
/* Dirty state — a quiet ink-blue dot prefix calls out unsaved changes. */
#editor .doc-status.dirty {
  color: var(--ed-data);
}
#editor .doc-status.dirty em { color: var(--ed-data); }
#editor .doc-status kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--ed-text-sec);
  background: var(--ed-tint);
  padding: 1px 5px;
  border-radius: 3px;
  font-style: normal;
  margin-left: 2px;
}
#editor .doc-actions { display: flex; gap: 4px; align-items: center; margin-left: auto; }

/* ── EDITOR TABS — per-section open-cards strip ──────────────────── */
#editor .editor-tabs {
  position: relative;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--ed-border-soft);
  background: var(--ed-bg);
  flex-shrink: 0;
  min-height: 36px;
}
#editor .editor-tabs-scroll {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  flex: 1;
  padding: 0 4px 0 12px;
  scrollbar-width: none;
}
#editor .editor-tabs-scroll::-webkit-scrollbar { display: none; }
#editor .editor-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 12px;
  margin: 4px 2px 4px 0;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--ed-text-sec);
  background: transparent;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 220px;
  user-select: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
#editor .editor-tab[draggable="true"] { cursor: grab; }
#editor .editor-tab.dragging {
  opacity: 0.45;
  cursor: grabbing;
}
#editor .editor-tab.drag-over-before::before,
#editor .editor-tab.drag-over-after::after {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--ed-data, #6a86c4);
}
#editor .editor-tab.drag-over-before::before { left: -3px; }
#editor .editor-tab.drag-over-after::after { right: -3px; }
#editor .editor-tab:hover {
  background: var(--ed-hover-bg);
  color: var(--ed-text-pri);
}
#editor .editor-tab.active {
  background: var(--ed-tint);
  color: var(--ed-text-pri);
  border-color: var(--ed-border);
}
#editor .editor-tab-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}
#editor .editor-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border: none;
  background: transparent;
  color: var(--ed-text-muted);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
#editor .editor-tab:hover .editor-tab-close,
#editor .editor-tab.active .editor-tab-close { opacity: 1; }
#editor .editor-tab-close:hover {
  background: var(--ed-border-soft);
  color: var(--ed-text-pri);
}
#editor .editor-tab-dirty {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ed-data, #6a86c4);
  display: inline-block;
  flex-shrink: 0;
}
#editor .editor-tab-multi-icon {
  display: inline-flex;
  width: 12px;
  height: 12px;
  color: var(--ed-text-muted);
  flex-shrink: 0;
}
#editor .editor-tab.active .editor-tab-multi-icon { color: var(--ed-text-pri); }
#editor .editor-tab-drop-indicator {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--ed-text-pri, #1f1b16);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 2px 8px rgba(0, 0, 0, 0.16);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: transform 0.06s ease-out, opacity 0.08s ease-out;
}
#editor .editor-tab-drop-indicator.visible { opacity: 1; }

#editor .editor-tabs-overflow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  border: none;
  border-left: 1px solid var(--ed-border-soft);
  background: var(--ed-bg);
  color: var(--ed-text-muted);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
#editor .editor-tabs-overflow:hover {
  background: var(--ed-hover-bg);
  color: var(--ed-text-pri);
}
#editor .editor-tabs-overflow-count {
  font-weight: 600;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
#editor .editor-tabs-overflow-menu {
  position: absolute;
  top: 100%;
  right: 8px;
  min-width: 220px;
  max-width: 320px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--ed-bg);
  border: 1px solid var(--ed-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  z-index: 50;
  padding: 4px 0;
}
#editor .editor-tabs-overflow-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--ed-text-pri);
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}
#editor .editor-tabs-overflow-item:hover { background: var(--ed-hover-bg); }
#editor .editor-tabs-overflow-item.active { background: var(--ed-tint); }
#editor .editor-tab-ctx-menu,
.editor-tab-ctx-menu {
  position: fixed;
  min-width: 180px;
  background: var(--ed-bg, #fff);
  border: 1px solid var(--ed-border, #dedad2);
  border-radius: 10px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  z-index: 70;
  padding: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
}
#editor .editor-tab-ctx-menu::before,
.editor-tab-ctx-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--ctx-notch-left, 18px);
  width: 10px;
  height: 10px;
  background: var(--ed-bg, #fff);
  border-left: 1px solid var(--ed-border, #dedad2);
  border-top: 1px solid var(--ed-border, #dedad2);
  transform: rotate(45deg);
}
#editor .editor-tab-ctx-item,
.editor-tab-ctx-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 7px;
  text-align: left;
  color: var(--ed-text-pri, #1f1f1f);
  cursor: pointer;
  font-size: 12.5px;
}
#editor .editor-tab-ctx-item:hover,
.editor-tab-ctx-item:hover { background: var(--ed-hover-bg, #f5f3ef); }
#editor .editor-tab-ctx-item:disabled,
.editor-tab-ctx-item:disabled { color: var(--ed-text-muted, #8a8580); cursor: default; }
#editor .editor-tab-ctx-item:disabled:hover,
.editor-tab-ctx-item:disabled:hover { background: transparent; }
#editor .editor-tab-ctx-divider,
.editor-tab-ctx-divider { height: 1px; background: var(--ed-border-soft, #eeeae4); margin: 4px 0; }
#editor .doc-btn {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ed-text-sec);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  line-height: 1;
  white-space: nowrap;
}
#editor .doc-btn:hover { background: var(--ed-hover-bg); color: var(--ed-text-pri); }
#editor .memo-doc-btn {
  position: relative;
}
#editor .memo-doc-btn.has-memo {
  color: var(--ed-text-pri);
  background: var(--ed-tint);
  border-color: var(--ed-border);
}
#editor .memo-doc-btn.has-memo::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ed-data, #6a86c4);
  box-shadow: 0 0 0 2px var(--ed-tint);
}
#editor .memo-doc-btn.active {
  color: var(--ed-text-pri);
  border-color: var(--ed-text-subtle);
}
#editor .doc-btn.primary {
  background: var(--ed-text-pri);
  color: var(--ed-bg);
  border-color: var(--ed-text-pri);
}
#editor .doc-btn.primary:hover { background: #000; }
#editor .doc-btn .chev-icon {
  width: 11px; height: 11px;
  color: currentColor; opacity: 0.75; flex-shrink: 0;
}

/* ── MENUS (anchored, with notch) ─────────────────────────────────── */
#editor .menu-wrap { position: relative; display: inline-flex; }
#editor .menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  background: var(--ed-bg);
  border: 1px solid var(--ed-border-strong);
  border-radius: 10px;
  box-shadow: var(--ed-shadow-pop);
  padding: 6px;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s;
}
#editor .menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
#editor .menu::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 18px;
  width: 11px;
  height: 11px;
  background: var(--ed-bg);
  border-top: 1px solid var(--ed-border-strong);
  border-left: 1px solid var(--ed-border-strong);
  transform: rotate(45deg);
}
#editor .menu-head {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ed-text-muted);
  font-weight: 500;
  padding: 6px 12px 8px;
}
#editor .menu-search {
  width: calc(100% - 12px);
  margin: 0 6px 6px;
  background: var(--ed-source-bg);
  border: 1px solid var(--ed-border);
  border-radius: 6px;
  padding: 7px 10px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ed-text-pri);
  outline: none;
}
#editor .menu-search:focus { border-color: var(--ed-text-muted); background: var(--ed-bg); }
#editor .menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  background: transparent;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ed-text-pri);
  cursor: pointer;
  transition: background 0.12s;
}
#editor .menu-item:hover { background: var(--ed-hover-bg); }
#editor .menu-item.current { background: var(--ed-tint); font-weight: 500; }
#editor .menu-item-count {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ed-text-muted);
  font-variant-numeric: tabular-nums;
}
#editor .menu-item-count.is-zero { color: var(--ed-text-subtle); }
#editor .menu-project-item {
  display: grid;
  grid-template-columns: calc(10px + var(--project-indent, 0px)) 18px 18px minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 42px;
  align-items: center;
}
#editor .menu-project-section {
  padding: 10px 12px 4px;
  color: var(--ed-text-muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}
#editor .menu-project-rail {
  position: relative;
  align-self: stretch;
}
#editor .menu-project-item.is-child .menu-project-rail::before {
  content: '';
  position: absolute;
  right: 2px;
  top: -8px;
  bottom: 50%;
  width: 10px;
  border-left: 1px solid var(--ed-border);
  border-bottom: 1px solid var(--ed-border);
  border-radius: 0 0 0 5px;
}
#editor .menu-project-chevron {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ed-text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s, background 0.12s, color 0.12s;
}
#editor .menu-project-item.has-children .menu-project-chevron:not(.empty) {
  background: rgba(0,0,0,0.035);
  color: var(--ed-text-muted);
}
#editor .menu-project-item:hover .menu-project-chevron:not(.empty),
#editor .menu-project-chevron:not(.empty):hover {
  background: var(--ed-hover-bg);
  color: var(--ed-text-pri);
}
#editor .menu-project-item.is-expanded .menu-project-chevron {
  transform: rotate(90deg);
}
#editor .menu-project-chevron.empty {
  visibility: hidden;
  background: transparent;
  cursor: default;
}
#editor .menu-project-glyph {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  fill: none;
  stroke: var(--ed-text-muted);
  stroke-width: 1.3px;
  stroke-linejoin: round;
}
#editor .menu-project-item.has-children .menu-project-glyph,
#editor .menu-project-item.current .menu-project-glyph {
  stroke: var(--ed-text-pri);
}
#editor .menu-project-glyph svg { width: 15px; height: 15px; }
#editor .menu-project-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#editor .menu-project-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#editor .menu-project-path {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--ed-text-muted);
  font-weight: 400;
}
#editor .menu-empty {
  padding: 12px;
  color: var(--ed-text-muted);
  font-size: 12.5px;
}
#editor .menu-item-content { flex: 1; }
#editor .menu-item-content .menu-item-name { font-size: 13px; color: var(--ed-text-pri); }
#editor .menu-item-desc { font-size: 11.5px; color: var(--ed-text-muted); margin-top: 1px; }
#editor .menu-divider { height: 1px; background: var(--ed-border-soft); margin: 4px 6px; }
#editor .menu-action {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  border-radius: 5px;
  background: transparent;
  border: none;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--ed-text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
#editor .menu-action:hover { color: var(--ed-text-pri); background: var(--ed-hover-bg); }
#editor .menu-project-browse {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  padding: 8px 12px;
}
#editor .menu-project-browse-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ed-text-muted);
}
#editor .menu-project-browse-icon svg {
  width: 13px;
  height: 13px;
}
#editor .menu-project-browse-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
#editor .menu-project-browse-name {
  font-size: 13px;
  color: var(--ed-text-pri);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#editor .menu-project-browse-desc {
  font-size: 11px;
  color: var(--ed-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#editor .menu-project-browse-arrow {
  color: var(--ed-text-muted);
  font-size: 16px;
  line-height: 1;
  text-align: right;
}

/* Action-style menu item — icon + label + kbd shortcut. Slightly more
   prominent than plain .menu-action; used for "Save as a new table" */
#editor .menu-item-action {
  gap: 10px;
}
#editor .menu-item-action .menu-item-icon {
  color: var(--ed-text-sec);
  flex-shrink: 0;
}
#editor .menu-item-action:hover .menu-item-icon {
  color: var(--ed-text-pri);
}
#editor .menu-item-action .menu-item-label {
  flex: 1;
  font-size: 13px;
  color: var(--ed-text-pri);
}
#editor .menu-item-action .menu-item-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--ed-text-muted);
  background: var(--ed-tint);
  padding: 2px 6px;
  border-radius: 3px;
  font-style: normal;
  letter-spacing: 0.02em;
}

/* ── SPLIT (source / editor panes) ────────────────────────────────── */
#editor .split {
  --source-pane-width: 380px;
  flex: 1;
  display: grid;
  grid-template-columns: var(--source-pane-width) minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  transition: grid-template-columns var(--ed-panel-motion) var(--ed-panel-ease);
  position: relative;
}
#editor .split.source-collapsed { grid-template-columns: 0 minmax(0, 1fr); }

/* ── SOURCE PANE ──────────────────────────────────────────────────── */
#editor .source {
  width: var(--source-pane-width);
  max-width: var(--source-pane-width);
  background: #f7f8f8;
  border-right: 1px solid #e1e4e4;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  position: relative;
  transform: translateX(0);
  opacity: 1;
  transition:
    transform var(--ed-panel-motion) var(--ed-panel-ease),
    opacity var(--ed-panel-fade) ease,
    border-color var(--ed-panel-fade) ease;
  will-change: transform, opacity;
}
#editor .split.source-collapsed .source {
  border-right-color: transparent;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(-1 * var(--source-pane-width)));
}
#editor .source-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  flex-shrink: 0;
}
#editor .source-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ed-text-muted);
  font-weight: 500;
}
#editor .source-collapse-pill {
  background: var(--ed-bg);
  border: 1px solid #dde1e1;
  border-radius: 6px;
  padding: 6px 12px;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--ed-text-sec);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
#editor .source-collapse-pill:hover {
  color: var(--ed-text-pri);
  border-color: #c8d0d0;
  background: #fbfcfc;
}
#editor .source-collapse-pill .arrow { width: 11px; height: 11px; color: currentColor; flex-shrink: 0; }

#editor .source-body { flex: 1; overflow-y: auto; padding: 0 22px 22px; }
#editor .source-input {
  width: 100%;
  min-height: 200px;
  background: #ffffff;
  border: 1px solid #dfe3e3;
  border-radius: 10px;
  outline: none;
  resize: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ed-text-sec);
  white-space: pre;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
#editor .source-input:focus {
  border-color: #c6ced1;
  background: #fbfcfc;
  box-shadow: 0 0 0 3px rgba(45,74,110,0.06);
}
#editor #tableMode .table-paste-internal,
#editor #tableMode .table-paste-legacy-ui {
  display: none !important;
}
#editor .source-empty-hint {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 12px;
  line-height: 1.55;
  color: #7a8184;
  margin-top: 0;
  margin-bottom: 16px;
}
#editor .source-empty-hint a {
  color: var(--ed-text-sec);
  text-decoration: none;
  border-bottom: 1px dashed var(--ed-text-subtle);
  cursor: pointer;
}
#editor .source-empty-hint a:hover { color: var(--ed-text-pri); border-bottom-color: var(--ed-text-muted); }
#editor .source-empty-hint .screenshot-hint {
  display: block;
  margin-top: 5px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 12px;
  color: var(--ed-text-sec);
  letter-spacing: 0;
}
#editor .source-empty-hint .screenshot-hint strong {
  font-weight: 600;
  color: var(--ed-text-pri);
  font-style: normal;
}
#editor .source-empty-hint .screenshot-hint .aside {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ed-text-muted);
  margin-left: 4px;
  text-transform: uppercase;
}

#editor #tableMode .workbook-upload-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #dfe3e3;
  border-radius: 10px;
  background: #ffffff;
  padding: 11px 12px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}
#editor #tableMode .workbook-upload-card:hover {
  border-color: #c6ced1;
  background: #fbfcfc;
}
#editor #tableMode .workbook-upload-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#editor #tableMode .workbook-upload-kicker,
#editor #tableMode .workbook-panel-sub,
#editor #tableMode .workbook-field span {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ed-text-muted);
}
#editor #tableMode .workbook-upload-title,
#editor #tableMode .workbook-panel-title {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ed-text-pri);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#editor #tableMode .table-source-routes {
  border: 1px solid #edf0f0;
  border-radius: 8px;
  background: #fbfcfc;
  padding: 10px;
  margin: -2px 0 12px;
  font-family: 'Inter', sans-serif;
}
#editor #tableMode .table-source-routes-title {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ed-text-muted);
  margin-bottom: 8px;
}
#editor #tableMode .table-source-route {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ed-text-sec);
}
#editor #tableMode .table-source-route + .table-source-route {
  margin-top: 7px;
}
#editor #tableMode .table-source-route-label {
  color: var(--ed-text-muted);
  font-weight: 600;
}
#editor #tableMode .table-source-route code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--ed-text-pri);
  background: #ffffff;
  border: 1px solid #edf0f0;
  border-radius: 5px;
  padding: 1px 4px;
  white-space: nowrap;
}
#editor #tableMode .table-source-route em {
  color: var(--ed-text-pri);
  font-style: normal;
  font-weight: 600;
}
#editor #tableMode .workbook-upload-btn,
#editor #statsMode .workbook-upload-btn,
#editor #tableMode .workbook-panel-clear,
#editor #tableMode .workbook-open-btn {
  border: 1px solid #d9dfdf;
  background: #fbfcfc;
  color: var(--ed-text-sec);
  border-radius: 7px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 9px;
  cursor: pointer;
  white-space: nowrap;
}
#editor #tableMode .workbook-upload-btn:hover,
#editor #statsMode .workbook-upload-btn:hover,
#editor #tableMode .workbook-panel-clear:hover,
#editor #tableMode .workbook-open-btn:hover {
  border-color: #c6ced1;
  color: var(--ed-text-pri);
}
#editor #tableMode .workbook-panel {
  border: 1px solid #dfe3e3;
  border-radius: 10px;
  background: #ffffff;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}
#editor #tableMode .workbook-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
#editor #tableMode .workbook-panel-head > div {
  min-width: 0;
  flex: 1;
}
#editor #tableMode .workbook-panel-clear {
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 500;
}
#editor #tableMode .workbook-field {
  display: grid;
  gap: 5px;
  margin: 9px 0;
}
#editor #tableMode .workbook-field select,
#editor #tableMode .workbook-field input {
  width: 100%;
  border: 1px solid #dfe3e3;
  border-radius: 7px;
  background: #fbfcfc;
  color: var(--ed-text-sec);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  padding: 7px 8px;
  outline: none;
}
#editor #tableMode .workbook-field select:focus,
#editor #tableMode .workbook-field input:focus {
  border-color: #c6ced1;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(45,74,110,0.06);
}
#editor #tableMode .workbook-preview {
  max-height: 164px;
  overflow: auto;
  border: 1px solid #edf0f0;
  border-radius: 8px;
  background: #fbfcfc;
  margin: 10px 0;
}
#editor #tableMode .workbook-preview table {
  border-collapse: collapse;
  width: 100%;
  min-width: 260px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--ed-text-sec);
}
#editor #tableMode .workbook-preview td {
  border-right: 1px solid #edf0f0;
  border-bottom: 1px solid #edf0f0;
  padding: 5px 6px;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#editor #tableMode .workbook-preview tr:last-child td { border-bottom: none; }
#editor #tableMode .workbook-preview td:last-child { border-right: none; }
#editor #tableMode .workbook-preview-empty {
  padding: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: var(--ed-text-muted);
}
#editor #tableMode .workbook-saved-source {
  border: 1px solid #edf0f0;
  border-radius: 8px;
  background: #fbfcfc;
  padding: 10px;
  margin: 10px 0;
  font-family: 'Inter', sans-serif;
}
#editor #tableMode .workbook-saved-source-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ed-text-pri);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#editor #tableMode .workbook-saved-source-line {
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ed-text-sec);
}
#editor #tableMode .workbook-saved-source-status {
  margin-top: 7px;
  font-size: 11px;
  color: var(--ed-text-muted);
}
#editor #tableMode .workbook-open-btn {
  width: 100%;
  background: rgba(45,74,110,0.06);
  border-color: rgba(45,74,110,0.18);
  color: var(--ed-data);
}

#editor #figureMode .workbook-upload-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #dfe3e3;
  border-radius: 10px;
  background: #ffffff;
  padding: 11px 12px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}
#editor #figureMode .workbook-upload-card:hover {
  border-color: #c6ced1;
  background: #fbfcfc;
}
#editor #figureMode .workbook-upload-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#editor #figureMode .workbook-upload-kicker,
#editor #figureMode .workbook-panel-sub,
#editor #figureMode .workbook-field span,
#editor #figureMode .figure-workbook-chart-note {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ed-text-muted);
}
#editor #figureMode .workbook-upload-title,
#editor #figureMode .workbook-panel-title {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ed-text-pri);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#editor #figureMode .workbook-upload-btn,
#editor #figureMode .workbook-panel-clear,
#editor #figureMode .workbook-open-btn {
  border: 1px solid #d9dfdf;
  background: #fbfcfc;
  color: var(--ed-text-sec);
  border-radius: 7px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 9px;
  cursor: pointer;
  white-space: nowrap;
}
#editor #figureMode .workbook-upload-btn:hover,
#editor #figureMode .workbook-panel-clear:hover,
#editor #figureMode .workbook-open-btn:hover {
  border-color: #c6ced1;
  color: var(--ed-text-pri);
}
#editor #figureMode .workbook-panel {
  border: 1px solid #dfe3e3;
  border-radius: 10px;
  background: #ffffff;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}
#editor #figureMode .workbook-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
#editor #figureMode .workbook-panel-head > div {
  min-width: 0;
  flex: 1;
}
#editor #figureMode .workbook-panel-clear {
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 500;
}
#editor #figureMode .workbook-field {
  display: grid;
  gap: 5px;
  margin: 9px 0;
}
#editor #figureMode .workbook-field select,
#editor #figureMode .workbook-field input {
  width: 100%;
  border: 1px solid #dfe3e3;
  border-radius: 7px;
  background: #fbfcfc;
  color: var(--ed-text-sec);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  padding: 7px 8px;
  outline: none;
}
#editor #figureMode .workbook-field select:focus,
#editor #figureMode .workbook-field input:focus {
  border-color: #c6ced1;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(45,74,110,0.06);
}
#editor #figureMode .workbook-preview {
  max-height: 164px;
  overflow: auto;
  border: 1px solid #edf0f0;
  border-radius: 8px;
  background: #fbfcfc;
  margin: 10px 0;
}
#editor #figureMode .workbook-preview table {
  border-collapse: collapse;
  width: 100%;
  min-width: 260px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--ed-text-sec);
}
#editor #figureMode .workbook-preview td {
  border-right: 1px solid #edf0f0;
  border-bottom: 1px solid #edf0f0;
  padding: 5px 6px;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#editor #figureMode .workbook-preview tr:last-child td { border-bottom: none; }
#editor #figureMode .workbook-preview td:last-child { border-right: none; }
#editor #figureMode .workbook-preview-empty {
  padding: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: var(--ed-text-muted);
}
/* ── Ledger diagnostics (shared) ──────────────────────────────────────
   One quiet vocabulary for every "what we found / what's missing" note,
   used by both the Figures source pane and the Stats result card. A thin
   glyph in a fixed gutter carries severity; no left-stripes, no per-row
   boxes. Bronze (caution) is the only colour; ok/miss/note stay silver. */
#editor .mledger {
  display: grid;
  margin: 11px 0 2px;
}
#editor .mledger-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 9px;
  padding: 9px 1px;
}
#editor .mledger-row + .mledger-row {
  border-top: 1px solid var(--ed-border-soft);
}
#editor .mledger-glyph {
  margin-top: 1px;
  display: flex;
  color: var(--ed-note);
}
#editor .mledger-glyph svg { width: 15px; height: 15px; display: block; }
#editor .mledger-title {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ed-text-pri);
}
#editor .mledger-detail {
  margin-top: 2px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ed-text-sec);
}
#editor .mledger-row.is-caution .mledger-glyph { color: var(--ed-haz-soft); }
#editor .mledger-row.is-caution .mledger-title { color: var(--ed-haz); }
#editor .mledger-row.is-ok   .mledger-glyph { color: var(--ed-ok); }
#editor .mledger-row.is-miss .mledger-glyph { color: var(--ed-miss); }
#editor .mledger-row.is-note .mledger-glyph { color: var(--ed-note); }

#editor #figureMode .workbook-saved-source .mledger { margin: 8px 0 0; }
#editor #figureMode .workbook-saved-source {
  border: 1px solid #edf0f0;
  border-radius: 8px;
  background: #fbfcfc;
  padding: 10px;
  margin: 10px 0;
  font-family: 'Inter', sans-serif;
}
#editor #figureMode .workbook-saved-source-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ed-text-pri);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#editor #figureMode .workbook-saved-source-line {
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ed-text-sec);
}
#editor #figureMode .workbook-saved-source-status {
  margin-top: 7px;
  font-size: 11px;
  color: var(--ed-text-muted);
}
#editor #figureMode .workbook-action-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
#editor #figureMode .workbook-action-row .workbook-open-btn {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}
#editor #figureMode .workbook-open-btn {
  width: 100%;
  background: rgba(45,74,110,0.06);
  border-color: rgba(45,74,110,0.18);
  color: var(--ed-data);
}
#editor #figureMode .workbook-open-btn.workbook-secondary-btn {
  background: #ffffff;
  border-color: var(--ed-border-strong);
  color: var(--ed-text-sec);
}
#editor #figureMode .workbook-open-btn:disabled {
  cursor: default;
  opacity: 0.55;
  background: #fbfcfc;
  color: var(--ed-text-muted);
}
#editor #figureMode .figure-workbook-chart-note {
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  margin: 9px 2px 7px;
  color: var(--ed-text-sec);
}

/* Image-staged state — hide the textarea + empty hint while a screenshot
   is queued for AI parse. The pasteImagePreview thumbnail takes over. */
#editor .source-input.has-image-staged,
#editor .source-empty-hint.has-image-staged { display: none; }

/* Drag-over visual when an image file is being dragged into the source body. */
#editor .source-body.drop-active {
  outline: 1.5px dashed rgba(45,74,110,0.48);
  outline-offset: -8px;
  background: rgba(45,74,110,0.055);
}

/* Image-paste state inside source pane (from legacy pasteImagePreview) */
#editor .source-image-preview {
  position: relative;
  margin: 0 0 16px;
  border: 1px solid #dfe3e3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ed-bg);
}
#editor .source-image-preview img {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  background: var(--ed-bg);
}
#editor .source-image-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#editor .source-image-remove:hover { background: rgba(0,0,0,0.78); }

#editor .source-summary {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--ed-text-muted);
  line-height: 1.7;
  padding: 0;
  border: 1px solid #dfe3e3;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}
#editor .source-summary .sum-head {
  color: var(--ed-text-sec);
  padding: 9px 11px;
  border-bottom: 1px solid #edf0f0;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#editor .source-summary .sum-row {
  display: flex;
  padding: 7px 11px;
  border-bottom: 1px solid #edf0f0;
}
#editor .source-summary .sum-row:last-child { border-bottom: none; }
#editor .source-summary .sum-key { color: var(--ed-text-muted); width: 86px; flex-shrink: 0; }
#editor .source-summary .sum-val { color: var(--ed-text-sec); }

/* ── Direction A · Tables/Figures source pane ────────────────────────
   Cool the warm chrome onto the silver tokens, whisper the all-caps
   labels, and give the "R and Stats sources" guide real breathing room
   so it reads as a calm reference card, not a crammed help blob. */
#editor .source-label,
#editor #tableMode .workbook-upload-kicker,
#editor #tableMode .workbook-panel-sub,
#editor #tableMode .workbook-field span,
#editor #figureMode .workbook-field span {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--ed-text-muted);
}
#editor .source-collapse-pill { border-color: var(--ed-border); }
#editor #tableMode .workbook-panel-clear,
#editor #tableMode .workbook-open-btn {
  border-color: var(--ed-border-strong);
  background: var(--ed-source-bg);
  font-family: var(--sans);
}

/* Unified premium action button — soft-blue pill across Tables + Figures.
   Appended last so it wins over the divergent neutral/tinted variants above.
   Quiet at rest, lifts on hover. */
#editor #tableMode .workbook-open-btn,
#editor #figureMode .workbook-open-btn {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 38px;
  border-radius: 9px;
  border: 1px solid var(--ed-border-strong);
  background: var(--ed-tint);
  color: var(--ed-data);
  font-weight: 650;
  transition: background 0.16s, border-color 0.16s, box-shadow 0.16s, transform 0.12s;
}
#editor #tableMode .workbook-open-btn:hover:not(:disabled),
#editor #figureMode .workbook-open-btn:hover:not(:disabled) {
  background: #eef2f7;
  border-color: var(--ed-data);
  box-shadow: 0 8px 20px rgba(70, 96, 122, 0.14);
  transform: translateY(-1px);
}
#editor #tableMode .workbook-open-btn:active:not(:disabled),
#editor #figureMode .workbook-open-btn:active:not(:disabled) {
  transform: translateY(0);
}
#editor #tableMode .workbook-open-btn:disabled,
#editor #figureMode .workbook-open-btn:disabled {
  opacity: 0.5;
  box-shadow: none;
  transform: none;
  cursor: default;
}

/* Advanced range fallback — manual entry hidden by default; the resolved
   range stays visible read-only in the workbook meta line. */
#editor .wb-advanced {
  margin-top: 10px;
  border-top: 1px dashed var(--ed-border);
  padding-top: 10px;
}
#editor .wb-advanced > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ed-text-muted);
  transition: color 0.14s;
}
#editor .wb-advanced > summary::-webkit-details-marker { display: none; }
#editor .wb-advanced > summary::marker { content: ""; }
#editor .wb-advanced > summary:hover { color: var(--ed-data); }
#editor .wb-advanced-chev { width: 11px; height: 11px; transition: transform 0.2s ease; }
#editor .wb-advanced[open] .wb-advanced-chev { transform: rotate(90deg); }
#editor .wb-advanced .workbook-field { margin-top: 10px; }

/* One-result selector — compact stepper over the (hidden) native <select>.
   One result active at a time; arrows + dots replace the bare dropdown. */
#editor .wb-result { display: block; }
#editor .wb-result-caption {
  display: block; margin-bottom: 6px;
  font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600; color: var(--ed-text-muted);
}
#editor .wb-stepper {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--ed-border); border-radius: 9px;
  background: var(--ed-source-bg); padding: 5px;
  min-width: 0; max-width: 100%; box-sizing: border-box;
}
#editor .wb-step-native { display: none; }
#editor .wb-step-arrow {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; flex: 0 0 auto;
  border: 1px solid var(--ed-border); border-radius: 7px; background: var(--ed-bg);
  color: var(--ed-text-sec); display: grid; place-items: center; cursor: pointer;
  transition: box-shadow 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
#editor .wb-step-arrow:hover:not(:disabled) {
  color: var(--ed-data); border-color: #d3e0ea; box-shadow: 0 6px 16px rgba(70, 96, 122, 0.12);
}
#editor .wb-step-arrow:active:not(:disabled) { transform: scale(0.92); }
#editor .wb-step-arrow:disabled { opacity: 0.4; cursor: default; }
#editor .wb-step-arrow svg { width: 13px; height: 13px; display: block; }
#editor .wb-step-main { flex: 1; min-width: 0; text-align: center; line-height: 1.2; }
#editor .wb-step-main b {
  display: block; font-size: 12px; font-weight: 600; color: var(--ed-text-pri);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#editor .wb-step-main span { display: block; margin-top: 2px; font: 10.5px/1 var(--mono); color: var(--ed-text-muted); }
#editor .wb-step-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 8px; max-width: 100%; overflow: hidden; }
#editor .wb-step-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ed-border-strong); transition: background 0.2s, width 0.2s; }
#editor .wb-step-dots i.on { width: 16px; border-radius: 3px; background: var(--ed-data); }

/* ── Excel source card · D1 spreadsheet plate ──────────────────────
   A green spreadsheet glyph signals the file type; the whole card is the
   dropzone and the arrow slides on hover. Quiet at rest. */
#editor #tableMode .workbook-upload-card,
#editor #figureMode .workbook-upload-card {
  border-color: var(--ed-border);
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
#editor #tableMode .workbook-upload-card:hover,
#editor #figureMode .workbook-upload-card:hover {
  border-color: #cfe2d7;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(33,115,70,.10);
  transform: translateY(-1px);
}
#editor .workbook-upload-glyph {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 9px;
  background: #eef4f0;
  border: 1px solid #cfe2d7;
  display: flex; align-items: center; justify-content: center;
}
#editor .workbook-upload-glyph svg { width: 22px; height: 22px; display: block; }
#editor #tableMode .workbook-upload-kicker,
#editor #figureMode .workbook-upload-kicker { color: #1f6e41; }
#editor .workbook-upload-formats {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ed-text-muted);
}

/* Structured paste entry. It sits with upload in the source pane and uses the
   same quiet data-blue language as Analyzer controls. */
#editor .structured-paste-card {
  border: 1px solid var(--ed-border);
  border-radius: 10px;
  background: #fbfcfd;
  padding: 12px;
  margin: 0 0 12px;
  font-family: var(--sans);
}
#editor .structured-paste-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
#editor .structured-paste-glyph {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--ed-data-soft, #eaf0f7);
  border: 1px solid #d6e0eb;
  color: var(--ed-data, #2d4a6e);
  display: flex;
  align-items: center;
  justify-content: center;
}
#editor .structured-paste-glyph svg {
  width: 21px;
  height: 21px;
  display: block;
}
#editor .structured-paste-titleblock {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#editor .structured-paste-kicker {
  font-size: 9.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--ed-data, #2d4a6e);
}
#editor .structured-paste-title {
  font-size: 13px;
  font-weight: 650;
  color: var(--ed-text-pri);
}
#editor .structured-paste-input {
  display: block;
  width: 100%;
  min-height: 132px;
  border: 1px solid #d8e0ea;
  border-radius: 9px;
  background: #ffffff;
  color: var(--ed-text-sec);
  font: 11.5px/1.55 var(--mono);
  padding: 10px 11px;
  resize: vertical;
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
#editor .structured-paste-input::placeholder {
  color: var(--ed-text-muted, #8b94a0);
  opacity: 1;
}
#editor .structured-paste-input:focus {
  border-color: var(--ed-data, #2d4a6e);
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--ed-data-soft, rgba(45,74,110,.10));
}
#editor .structured-paste-select-field {
  display: grid;
  gap: 5px;
  margin-top: 9px;
}
#editor .structured-paste-select-field span {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--ed-text-muted);
}
#editor .structured-paste-select-field select {
  width: 100%;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ed-text-sec);
  font: 600 11.5px/1.3 var(--sans);
  padding: 8px 9px;
  outline: none;
}
#editor .structured-paste-select-field select:focus {
  border-color: var(--ed-data, #2d4a6e);
  box-shadow: 0 0 0 3px var(--ed-data-soft, rgba(45,74,110,.10));
}
#editor .structured-paste-btn {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 34px;
  margin-top: 9px;
  border: 1px solid #cdd9e6;
  border-radius: 8px;
  background: var(--ed-data-soft, #eaf0f7);
  color: var(--ed-data, #2d4a6e);
  font: 650 12px/1 var(--sans);
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
}
#editor .structured-paste-btn:hover,
#editor .structured-paste-btn:focus-visible {
  background: #dfe8f3;
  border-color: var(--ed-data, #2d4a6e);
  box-shadow: 0 8px 18px rgba(45,74,110,.12);
  transform: translateY(-1px);
}
#editor .structured-paste-btn:active { transform: translateY(0); }
#editor .structured-paste-status {
  min-height: 0;
  margin-top: 8px;
  color: var(--ed-text-muted);
  font-size: 11.5px;
  line-height: 1.45;
}
#editor .structured-paste-status.is-success { color: #2f6f4e; }
#editor .structured-paste-status.is-warning { color: var(--ed-data, #2d4a6e); }
#editor .structured-paste-status.is-error { color: var(--ed-danger); }
#editor .structured-paste-status b {
  color: var(--ed-text-pri);
  font-weight: 650;
}
#editor .structured-paste-inline-btn {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-left: 6px;
  padding: 0 8px;
  border: 1px solid #cdd9e6;
  border-radius: 6px;
  background: var(--ed-data-soft, #eaf0f7);
  color: var(--ed-data, #2d4a6e);
  font: 650 11.5px/1 var(--sans);
  cursor: pointer;
  vertical-align: baseline;
}
#editor .structured-paste-inline-btn:hover,
#editor .structured-paste-inline-btn:focus-visible {
  background: #dfe8f3;
  border-color: var(--ed-data, #2d4a6e);
  outline: none;
}

#editor .source-replace-btn {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 30px;
  margin: 10px 0;
  border: 1px solid #cdd9e6;
  border-radius: 8px;
  background: var(--ed-data-soft, #eaf0f7);
  color: var(--ed-data, #2d4a6e);
  font: 650 11.5px/1 var(--sans);
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
#editor .source-replace-btn:hover,
#editor .source-replace-btn:focus-visible {
  background: #dfe8f3;
  border-color: var(--ed-data, #2d4a6e);
  outline: none;
}
#editor .source-replace-btn-card {
  margin: 10px 0 0;
}
#editor #statsMode .source-replace-btn {
  margin-top: 0;
}

/* ── Stats unified upload — one xlsx path + Detected as / Use as ────── */
/* Mirror the Tables/Figures upload card exactly (same radius/padding/hover). */
#editor #statsMode .stats-upload-card {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--ed-border); border-radius: 10px;
  background: var(--ed-bg); padding: 11px 12px; cursor: pointer;
  box-shadow: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
#editor #statsMode .stats-upload-card:hover {
  border-color: #cfe2d7; background: #fff;
  box-shadow: 0 4px 14px rgba(33,115,70,.10); transform: translateY(-1px);
}
#editor #statsMode .workbook-upload-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
#editor #statsMode .workbook-upload-kicker {
  font-family: var(--sans); font-size: 9.5px; letter-spacing: .15em;
  text-transform: uppercase; font-weight: 600; color: #1f6e41;
}
#editor #statsMode .workbook-upload-title {
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ed-text-pri);
}
#editor #statsMode .stats-upload-detect {
  margin-top: 12px; border: 1px solid var(--ed-border); border-radius: 11px;
  background: var(--ed-source-bg); padding: 13px 13px 14px;
}
#editor #statsMode .su-file {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11.5px; color: var(--ed-text-sec);
  padding-bottom: 10px; margin-bottom: 11px; border-bottom: 1px solid var(--ed-border-soft);
}
#editor #statsMode .su-file-main {
  min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px;
}
#editor #statsMode .su-file-name {
  font-family: var(--sans); font-size: 13px; font-weight: 650;
  color: var(--ed-text-pri); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#editor #statsMode .su-file-meta {
  font-family: var(--mono); font-size: 11px; color: var(--ed-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#editor #statsMode .su-clear {
  flex: 0 0 auto; border: 1px solid var(--ed-border); border-radius: 8px;
  background: var(--ed-bg); color: var(--ed-text-sec); padding: 6px 8px;
  font-family: var(--sans); font-size: 11.5px; cursor: pointer;
}
#editor #statsMode .su-clear:hover {
  border-color: var(--ed-border-strong); color: var(--ed-text-pri);
}
#editor #statsMode .su-detlabel {
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  color: var(--ed-text-subtle); margin-bottom: 6px;
}
#editor #statsMode .su-dettype {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--ed-text-pri);
}
#editor #statsMode .su-mk { width: 16px; height: 16px; color: var(--ed-ok); display: flex; }
#editor #statsMode .su-dettype-unrecognized .su-mk { color: #b26a00; }
#editor #statsMode .su-mk svg { width: 16px; height: 16px; }
#editor #statsMode .su-sub { margin: 4px 0 0 24px; font-size: 11.5px; color: var(--ed-text-muted); }
#editor #statsMode .su-guidance {
  margin-top: 12px; padding: 10px 11px 10px 12px;
  border-left: 3px solid #d7b46a; background: #fffaf0;
  font-family: var(--sans); color: var(--ed-text-sec);
}
#editor #statsMode .su-guidance-compact {
  padding-top: 8px; padding-bottom: 8px; background: #fffdf8;
}
#editor #statsMode .su-guidance-title {
  font-size: 12px; font-weight: 650; color: var(--ed-text-pri);
}
#editor #statsMode .su-guidance-body,
#editor #statsMode .su-guidance-foot {
  margin-top: 4px; font-size: 11.5px; line-height: 1.35; color: var(--ed-text-muted);
}
#editor #statsMode .su-guidance-table {
  margin-top: 9px; overflow-x: auto;
  border-top: 1px solid rgba(178,106,0,.22);
  border-bottom: 1px solid rgba(178,106,0,.18);
}
#editor #statsMode .su-guidance-row {
  display: grid; grid-template-columns: .65fr 1.4fr .65fr .65fr .7fr .65fr .85fr .85fr;
  min-width: 680px; border-top: 1px solid rgba(178,106,0,.12);
}
#editor #statsMode .su-guidance-row:first-child { border-top: none; }
#editor #statsMode .su-guidance-row span {
  padding: 6px 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-family: var(--mono); font-size: 10.5px; color: var(--ed-text-sec);
}
#editor #statsMode .su-guidance-head span {
  font-family: var(--sans); font-size: 10px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ed-text-pri);
}
#editor #statsMode .su-preview {
  margin-top: 12px; border: 1px solid var(--ed-border); border-radius: 9px;
  overflow: auto; max-height: 180px; background: #fbfcfc;
}
#editor #statsMode .su-preview table {
  border-collapse: collapse; width: 100%; min-width: 260px;
  font-family: var(--mono); font-size: 10.5px; color: var(--ed-text-sec);
}
#editor #statsMode .su-preview td {
  border-right: 1px solid var(--ed-border); border-bottom: 1px solid var(--ed-border);
  padding: 5px 7px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#editor #statsMode .su-preview tr:last-child td { border-bottom: none; }
#editor #statsMode .su-preview td:last-child { border-right: none; }
/* Text-line fallback (used only when no parsed grid is available). */
#editor #statsMode .su-preview-row {
  padding: 7px 9px; border-bottom: 1px solid var(--ed-border-soft);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.35;
  color: var(--ed-text-sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#editor #statsMode .su-preview-row:last-child { border-bottom: none; }
#editor #statsMode .su-preview-more {
  padding: 6px 8px; font: 10.5px/1 var(--mono); color: var(--ed-text-muted);
  border-top: 1px solid var(--ed-border-soft);
}
#editor #statsMode .su-source-picker {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px;
}
#editor #statsMode .su-source-row {
  display: flex; align-items: center; gap: 9px;
}
#editor #statsMode .su-source-row .su-select {
  min-width: 0;
}
#editor #statsMode .su-useas { display: flex; align-items: center; gap: 9px; margin-top: 14px; }
#editor #statsMode .su-useas-lbl { font-size: 11.5px; color: var(--ed-text-muted); }
#editor #statsMode .su-select {
  flex: 1; border: 1px solid var(--ed-border-strong); border-radius: 8px;
  background: var(--ed-bg); padding: 7px 9px; font-family: var(--sans);
  font-size: 12px; color: var(--ed-text-pri); cursor: pointer;
}
#editor #statsMode .su-cta {
  -webkit-appearance: none; appearance: none;
  margin-top: 14px; width: 100%; min-height: 38px;
  border: 1px solid var(--ed-border-strong); border-radius: 9px;
  background: var(--ed-tint); color: var(--ed-data);
  padding: 0 12px; font-family: var(--sans); font-size: 12.5px; font-weight: 650; cursor: pointer;
  transition: background 0.16s, border-color 0.16s, box-shadow 0.16s, transform 0.12s;
}
#editor #statsMode .su-cta:hover {
  background: #eef2f7; border-color: var(--ed-data);
  box-shadow: 0 8px 20px rgba(70, 96, 122, 0.14); transform: translateY(-1px);
}
#editor #statsMode .su-cta:active { transform: translateY(0); }
#editor #statsMode .stats-upload-status {
  margin-top: 9px; font-size: 11.5px; color: var(--ed-text-muted); min-height: 1em;
}
/* "Or send from R" — the alternative input, so people know it exists. */
#editor #statsMode .stats-r-hint {
  display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; row-gap: 4px; align-items: center;
  margin-top: 14px; padding: 13px;
  border: 1px solid var(--ed-border); border-radius: 11px; background: var(--ed-source-bg);
}
#editor #statsMode .stats-r-hint-badge {
  grid-column: 1; grid-row: 1; align-self: center;
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: #eaf0f6; color: var(--ed-data); border: 1px solid #d6e0eb;
}
#editor #statsMode .stats-r-hint-badge svg { width: 16px; height: 16px; display: block; }
#editor #statsMode .stats-r-hint-title {
  grid-column: 2; grid-row: 1; align-self: center;
  font: 600 12px/1.3 var(--sans); color: var(--ed-text-pri);
}
#editor #statsMode .stats-r-hint-desc {
  grid-column: 2; grid-row: 2;
  font: 400 12px/1.5 var(--sans); color: var(--ed-text-sec);
}
#editor #statsMode .stats-r-hint-desc code {
  font-family: var(--mono); font-size: 10.5px; color: var(--ed-text-pri);
  background: var(--ed-bg); border: 1px solid var(--ed-border); border-radius: 5px; padding: 1.5px 5px;
}

#editor #statsMode .stats-r-entry {
  border: 1px solid var(--ed-border);
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfcfd 0%, var(--ed-source-bg) 100%);
  padding: 14px;
  font-family: var(--sans);
  color: var(--ed-text-sec);
}
#editor #statsMode .stats-r-entry-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
#editor #statsMode .stats-r-entry-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ed-data);
  background: #eaf0f6;
  border: 1px solid #d6e0eb;
}
#editor #statsMode .stats-r-entry-badge svg {
  width: 19px;
  height: 19px;
  display: block;
}
#editor #statsMode .stats-r-entry-kicker {
  display: block;
  margin-bottom: 3px;
  font-size: 9.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--ed-text-muted);
}
#editor #statsMode .stats-r-entry-title {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 650;
  color: var(--ed-text-pri);
}
#editor #statsMode .stats-r-entry-copy {
  margin-top: 13px;
  padding: 10px 11px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--ed-border-soft);
  font-size: 12px;
  line-height: 1.45;
}
#editor #statsMode .stats-r-entry code {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ed-text-pri);
  background: #f6f8fa;
  border: 1px solid var(--ed-border);
  border-radius: 5px;
  padding: 1.5px 5px;
}
#editor #statsMode .stats-r-expect {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}
#editor #statsMode .stats-r-expect div {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 0 1px;
}
#editor #statsMode .stats-r-expect b {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ed-text-subtle);
}
#editor #statsMode .stats-r-expect span {
  font-size: 11.5px;
  line-height: 1.38;
  color: var(--ed-text-sec);
}
#editor #statsMode .stats-r-examples {
  margin-top: 13px;
  border-top: 1px solid var(--ed-border-soft);
  padding-top: 10px;
}
#editor #statsMode .stats-r-examples summary {
  cursor: pointer;
  list-style: none;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--ed-data);
}
#editor #statsMode .stats-r-examples summary::-webkit-details-marker { display: none; }
#editor #statsMode .stats-r-examples summary::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 8px 1px 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .14s;
}
#editor #statsMode .stats-r-examples[open] summary::before {
  transform: rotate(45deg);
  margin-bottom: 3px;
}
#editor #statsMode .stats-r-example-list {
  margin-top: 10px;
  display: grid;
  gap: 7px;
}
#editor #statsMode .stats-r-example-list code {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#editor #statsMode .stats-source-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 17px 0 13px;
  color: var(--ed-text-subtle);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 650;
}
#editor #statsMode .stats-source-separator::before,
#editor #statsMode .stats-source-separator::after {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--ed-border-strong);
}
#editor #statsMode .stats-analyzer-route {
  display: grid;
  gap: 11px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #d7e0ea;
  background: #f7fafc;
}
#editor #statsMode .stats-analyzer-route-title {
  font-size: 13px;
  font-weight: 650;
  color: var(--ed-text-pri);
}
#editor #statsMode .stats-analyzer-route-copy {
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ed-text-sec);
}
#editor #statsMode .stats-analyzer-route-btn {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--ed-data);
  border-radius: 8px;
  background: var(--ed-data);
  color: #fff;
  font: 650 12px/1 var(--sans);
  cursor: pointer;
  transition: background .14s, border-color .14s, transform .12s, box-shadow .14s;
}
#editor #statsMode .stats-analyzer-route-btn:hover,
#editor #statsMode .stats-analyzer-route-btn:focus-visible {
  background: #243f5d;
  border-color: #243f5d;
  box-shadow: 0 8px 18px rgba(45, 74, 110, .16);
  transform: translateY(-1px);
  outline: none;
}

/* Analyze launcher reads as a distinct pill in the "data" blue (the same
   colour as the selected analysis in the panel). It keeps that identity when
   disabled (just greyed via opacity), and fills solid when the panel is open. */
#editor #statsMode .stats-analyze-toggle {
  border-radius: 999px;
  border-color: var(--wba-data, #2d4a6e);
  background: var(--wba-data-soft, #eaf0f7);
  color: var(--wba-data, #2d4a6e);
  margin-left: 6px;
}
#editor #statsMode .stats-analyze-toggle:hover {
  background: #dfe8f3;
  border-color: var(--wba-data, #2d4a6e);
  color: var(--wba-data, #2d4a6e);
}
#editor #statsMode .stats-analyze-toggle.is-active {
  background: var(--wba-data, #2d4a6e);
  border-color: var(--wba-data, #2d4a6e);
  color: #fff;
}
#editor #statsMode .stats-analyze-toggle:disabled {
  opacity: .45;
}
#editor #tableMode .workbook-upload-go,
#editor #figureMode .workbook-upload-go,
#editor #statsMode .workbook-upload-go {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ed-text-subtle);
  transition: color .15s, transform .15s;
}
#editor #tableMode .workbook-upload-go svg,
#editor #figureMode .workbook-upload-go svg,
#editor #statsMode .workbook-upload-go svg { width: 16px; height: 16px; }
#editor #tableMode .workbook-upload-card:hover .workbook-upload-go,
#editor #figureMode .workbook-upload-card:hover .workbook-upload-go,
#editor #statsMode .workbook-upload-card:hover .workbook-upload-go {
  color: #1f6e41;
  transform: translateX(2px);
}

/* R and Stats sources — calm reference card with typed badges */
#editor #tableMode .table-source-routes,
#editor #figureMode .table-source-routes {
  border-color: var(--ed-border);
  background: var(--ed-source-bg);
  border-radius: 10px;
  padding: 14px 14px 15px;
  margin: -2px 0 14px;
  font-family: var(--sans);
}
#editor #tableMode .table-source-routes-title,
#editor #figureMode .table-source-routes-title {
  font-size: 9.5px;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--ed-text-muted);
  margin-bottom: 12px;
}
#editor #tableMode .table-source-route,
#editor #figureMode .table-source-route {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ed-text-sec);
}
#editor #tableMode .table-source-route + .table-source-route,
#editor #figureMode .table-source-route + .table-source-route {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--ed-border-soft);
}
#editor #tableMode .table-source-route-badge,
#editor #figureMode .table-source-route-badge {
  grid-column: 1; grid-row: 1; align-self: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
#editor #tableMode .table-source-route-badge svg,
#editor #figureMode .table-source-route-badge svg { width: 16px; height: 16px; display: block; }
#editor #tableMode .route-badge-r,
#editor #figureMode .route-badge-r {
  background: #eaf0f6; color: var(--ed-data); border: 1px solid #d6e0eb;
}
#editor #tableMode .route-badge-stats,
#editor #figureMode .route-badge-stats {
  background: #eef4f0; color: #1f6e41; border: 1px solid #cfe2d7;
  font-size: 13px;
}
#editor #tableMode .table-source-route-label,
#editor #figureMode .table-source-route-label {
  grid-column: 2; grid-row: 1; align-self: center;
  color: var(--ed-text-pri);
  font-weight: 600;
  font-size: 12px;
}
#editor #tableMode .table-source-route-desc,
#editor #figureMode .table-source-route-desc { grid-column: 2; grid-row: 2; color: var(--ed-text-sec); }
#editor #tableMode .table-source-route code,
#editor #figureMode .table-source-route code {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ed-text-pri);
  background: var(--ed-bg);
  border: 1px solid var(--ed-border);
  border-radius: 5px;
  padding: 1.5px 5px;
}
#editor #tableMode .table-source-route em,
#editor #figureMode .table-source-route em {
  font-style: normal; font-weight: 600; color: var(--ed-text-pri);
}
/* # Detected / # Image fingerprint — silver, calmer */
#editor .source-summary {
  border-color: var(--ed-border);
  background: var(--ed-source-bg);
}
#editor .source-summary .sum-head {
  border-bottom-color: var(--ed-border-soft);
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  color: var(--ed-text-muted);
}
#editor .source-summary .sum-row { border-bottom-color: var(--ed-border-soft); }

#editor .source-foot {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  border-top: 1px solid #e1e4e4;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  flex-shrink: 0;
}
#editor .source-foot-btn {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--ed-text-sec);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  min-height: 32px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
  white-space: nowrap;
}
#editor .source-foot-btn:disabled {
  cursor: default;
  opacity: 0.56;
}
#editor .source-foot-btn:hover {
  background: #fbfcfc;
  border-color: #dfe3e3;
  color: var(--ed-text-pri);
}
#editor .source-foot-btn .icon {
  width: 14px;
  height: 14px;
  color: currentColor;
  flex-shrink: 0;
  transform-origin: center;
}
#editor .source-foot-btn.primary {
  color: #ffffff;
  background: #171717;
  border-color: #171717;
  box-shadow: none;
}
#editor .source-foot-btn.primary:hover {
  border-color: #000000;
  background: #000000;
}
#editor .source-foot-btn.primary .icon {
  width: 15px;
  height: 15px;
}
/* When primary button has been used (table exists), revert to ghost style */
#editor .source-foot-btn.primary.used {
  color: var(--ed-text-sec);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
#editor .source-foot-btn.primary.used:hover {
  background: #fbfcfc;
  border-color: #dfe3e3;
  color: var(--ed-text-pri);
}
#editor .source-foot-btn.ai {
  color: var(--ed-data);
  background: rgba(45,74,110,0.04);
  border-color: rgba(45,74,110,0.18);
}
#editor .source-foot-btn.ai .icon { color: var(--ed-data); }
#editor .source-foot-btn.ai:hover {
  background: rgba(45,74,110,0.08);
  border-color: rgba(45,74,110,0.3);
}
#editor .source-foot-btn.is-ready-cued {
  animation: source-ready-pulse 1.45s cubic-bezier(0.2, 0.75, 0.18, 1);
}
#editor .source-foot-btn.cue-parse .icon {
  animation: source-ready-spin 0.95s cubic-bezier(0.24, 0.78, 0.28, 1);
}
#editor .source-foot-btn.cue-send .icon {
  animation: source-ready-nudge 1.05s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#editor .source-foot-btn.source-foot-btn-working .icon {
  animation: source-ready-spin 0.82s linear infinite;
}
#editor .source-foot-btn.source-foot-btn-done {
  color: var(--ed-text-pri);
  border-color: rgba(74,122,85,0.34);
  background: rgba(74,122,85,0.08);
}
#editor .source-ready-drop {
  position: absolute;
  left: -16px;
  top: -9px;
  width: 32px;
  height: 18px;
  border-radius: 9px;
  pointer-events: none;
  z-index: 8;
  color: var(--ed-data);
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(45,74,110,0.18);
  box-shadow:
    0 0 0 4px rgba(45,74,110,0.055),
    0 8px 18px rgba(31,37,45,0.12);
}
#editor .source-ready-drop::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 5px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  box-shadow:
    0 4px 0 rgba(45,74,110,0.28),
    0 8px 0 rgba(45,74,110,0.18);
}
#editor .source-ready-drop.send {
  color: var(--ed-data);
  border-color: rgba(45,74,110,0.24);
  box-shadow:
    0 0 0 4px rgba(45,74,110,0.08),
    0 8px 18px rgba(31,37,45,0.12);
}
@keyframes source-ready-pulse {
  0% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 rgba(45,74,110,0);
    border-color: rgba(45,74,110,0.16);
    background: #ffffff;
    color: var(--ed-data);
  }
  28% {
    transform: translateY(-1px);
    box-shadow: 0 0 0 4px rgba(45,74,110,0.10);
    border-color: rgba(45,74,110,0.34);
    background: rgba(45,74,110,0.075);
    color: var(--ed-data);
  }
  54% {
    transform: translateY(0);
    box-shadow: 0 0 0 1px rgba(45,74,110,0.08);
    border-color: rgba(45,74,110,0.22);
    background: #ffffff;
    color: var(--ed-data);
  }
  72% {
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgba(45,74,110,0.08);
    border-color: rgba(45,74,110,0.30);
    background: rgba(45,74,110,0.055);
    color: var(--ed-data);
  }
  100% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 rgba(45,74,110,0);
    border-color: rgba(45,74,110,0.16);
    background: #ffffff;
    color: var(--ed-data);
  }
}
@keyframes source-ready-spin {
  0% { transform: rotate(0deg); }
  70% { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}
@keyframes source-ready-nudge {
  0%, 100% { transform: translateX(0); }
  26% { transform: translateX(5px); }
  48% { transform: translateX(-1px); }
  68% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  #editor .source-foot-btn.is-ready-cued,
  #editor .source-foot-btn.cue-parse .icon,
  #editor .source-foot-btn.cue-send .icon,
  #editor .source-foot-btn.source-foot-btn-working .icon {
    animation: none;
  }
  #editor .source-foot-btn.is-ready-cued {
    border-color: rgba(45,74,110,0.34);
  }
}
#editor .source-foot-btn.danger:hover {
  background: rgba(184,73,58,0.06);
  border-color: rgba(184,73,58,0.25);
  color: var(--ed-danger);
}
#editor .source-foot-btn.danger:hover .icon { color: var(--ed-danger); }
#editor .source-foot-spacer { flex: 1; }
#editor .source-foot-info {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--ed-border);
  color: var(--ed-text-muted);
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  background: var(--ed-bg);
  position: relative;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}
#editor .source-foot-info:hover { color: var(--ed-text-pri); border-color: var(--ed-text-muted); }
#editor .source-foot-info svg {
  display: block;
  color: currentColor;
  pointer-events: none;
}
#editor .source-foot-info[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 240px;
  padding: 8px 10px;
  background: var(--ed-text-pri);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.5;
  border-radius: 6px;
  text-align: left;
  pointer-events: none;
  z-index: 10;
}
.editor-tips-popover {
  position: fixed;
  z-index: 30000;
  width: 286px;
  max-width: calc(100vw - 24px);
  padding: 10px 11px 11px;
  border: 1px solid var(--ed-border, #e2e0dc);
  border-radius: 8px;
  background: var(--ed-bg, #fff);
  color: var(--ed-text-pri, #202020);
  box-shadow: 0 10px 28px rgba(20, 20, 20, 0.10);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
.editor-tips-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.editor-tips-close {
  width: 22px;
  height: 22px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ed-text-muted, #777);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.editor-tips-close:hover,
.editor-tips-close:focus-visible {
  color: var(--ed-text-pri, #202020);
  border-color: var(--ed-border, #e2e0dc);
  outline: none;
}
.editor-tips-head h3 {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0;
}
.editor-tips-group + .editor-tips-group {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--ed-border, #e2e0dc);
}
.editor-tips-group h4 {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ed-text-pri, #202020);
  text-transform: none;
  letter-spacing: 0;
}
.editor-tips-group ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.editor-tips-group li {
  display: grid;
  grid-template-columns: minmax(88px, max-content) 1fr;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ed-text-sec, #4d4d4d);
}
.editor-tips-group kbd {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 18px;
  padding: 1px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ed-text-muted, #777);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.25px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: none;
}

/* Floating "Open source" button (visible when collapsed) */
#editor .source-open {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 10;
  background: var(--ed-bg);
  border: 1px solid var(--ed-border);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--ed-text-sec);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  display: inline-flex;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
  transition:
    color 0.12s,
    border-color 0.12s,
    opacity 0.18s ease,
    transform 0.22s ease;
  align-items: center;
  gap: 6px;
}
#editor .source-open:hover { color: var(--ed-text-pri); border-color: var(--ed-text-muted); }
#editor .source-open .arrow { width: 11px; height: 11px; color: currentColor; }
#editor .split.source-collapsed .source-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  transition:
    color 0.12s,
    border-color 0.12s,
    opacity 0.2s ease 0.22s,
    transform 0.24s ease 0.22s;
}

/* ── EDITOR PANE (form + preview, all white) ──────────────────────── */
#editor .editor-main {
  background: var(--ed-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
#editor .editor-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 0 64px;
  display: flex;
  justify-content: center;
}
#editor .paper {
  width: 100%;
  max-width: 760px;
  padding: 0 56px 48px;
}
#editor .paper.has-wide-table {
  max-width: min(1120px, 100%);
}
#editor #figureMode .paper {
  box-sizing: border-box;
  max-width: min(1240px, 100%);
}
#editor #figureMode .paper-preview {
  padding-left: 0;
  padding-right: 0;
}
#editor #figureMode .fig-editor-sticky-head {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-top: -8px;
  margin-bottom: 14px;
  padding: 8px 0 12px;
  background: var(--ed-bg);
  border-bottom: 1px solid var(--ed-border-soft);
}
#editor #figureMode .fig-editor-sticky-head .paper-options {
  position: static;
  z-index: auto;
  margin-top: 0;
  margin-bottom: 10px;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 0;
  background: transparent;
  box-shadow: none;
}
#editor #figureMode .paper-form {
  gap: 8px;
}
#editor #figureMode .paper-divider {
  margin: 18px 0 20px;
}

/* Options row at top of paper */
#editor .paper-options {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ed-border-soft);
}
#editor .paper-options-spacer { flex: 1; }
#editor .paper-style-btn,
#editor .paper-label-btn,
#editor .paper-settings-btn {
  border-radius: 6px;
  padding: 6px 11px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  line-height: 1;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

/* Style + Label: quiet, transparent at rest. */
#editor .paper-style-btn,
#editor .paper-label-btn {
  background: transparent;
  border: 1px solid var(--ed-border);
}
#editor .paper-style-btn { color: var(--ed-text-pri); }
#editor .paper-style-btn:hover {
  background: var(--ed-hover-bg);
  border-color: var(--ed-text-muted);
}
#editor .paper-style-btn .label-key {
  color: var(--ed-text-muted);
  font-weight: 400;
  margin-right: 2px;
}
#editor .paper-style-btn .chev-icon {
  width: 10px; height: 10px;
  color: var(--ed-text-muted);
  flex-shrink: 0;
}
#editor .paper-label-btn { color: var(--ed-text-sec); }
#editor .paper-label-btn:hover {
  background: var(--ed-hover-bg);
  border-color: var(--ed-text-muted);
  color: var(--ed-text-pri);
}
#editor .paper-label-btn .chev-icon {
  width: 10px; height: 10px;
  color: var(--ed-text-muted);
  flex-shrink: 0;
}
#editor .paper-label-btn .swatch {
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--ed-bg);
  border: 1.5px solid var(--ed-text-subtle);
  flex-shrink: 0;
}
#editor .paper-label-btn .swatch[data-color="1"] { background: #b8493a; border-color: #b8493a; }
#editor .paper-label-btn .swatch[data-color="2"] { background: #c47c2a; border-color: #c47c2a; }
#editor .paper-label-btn .swatch[data-color="3"] { background: #b09418; border-color: #b09418; }
#editor .paper-label-btn .swatch[data-color="4"] { background: #4a7a55; border-color: #4a7a55; }
#editor .paper-label-btn .swatch[data-color="5"] { background: #3d6a8a; border-color: #3d6a8a; }
#editor .paper-label-btn .swatch[data-color="6"] { background: #6f4a78; border-color: #6f4a78; }

/* Format: primary, matches "Open in Tables." */
#editor .paper-settings-btn {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--white);
}
#editor .paper-settings-btn:hover,
#editor .paper-settings-btn.active {
  background: var(--ink-2, #2a2723);
  border-color: var(--ink-2, #2a2723);
  color: var(--white);
}
#editor .paper-settings-btn .icon { width: 14px; height: 14px; color: currentColor; }

/* ── FORM AREA (utilitarian, compact) ────────────────────────────── */
#editor .paper-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 0;
}
#editor .paper-form-row {
  display: grid;
  grid-template-columns: auto 80px auto 1fr;
  gap: 12px;
  align-items: center;
}
#editor .paper-form-row.combined-title-only {
  grid-template-columns: auto minmax(0, 1fr);
}
#editor .paper-form-row.single { grid-template-columns: auto 1fr; }
#editor .paper-form-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ed-text-muted);
  font-weight: 500;
  user-select: none;
}
#editor .paper-form-input {
  background: transparent;
  border: 1px solid var(--ed-border);
  border-radius: 6px;
  padding: 7px 11px;
  font: inherit;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  color: var(--ed-text-pri);
  outline: none;
  transition: border-color 0.12s, background 0.12s;
  width: 100%;
}
#editor .paper-form-input:focus { border-color: var(--ed-text-muted); background: var(--ed-bg); }
#editor .paper-form-input::placeholder { color: var(--ed-text-subtle); font-style: italic; }
#editor .paper-form-input.num {
  width: 80px;
  font-family: 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
#editor .paper-form-textarea { min-height: 36px; resize: vertical; line-height: 1.5; }
#editor .note-field { min-width: 0; }
#editor #tableNoteBar.paper-form-textarea,
#editor #figNoteBar.paper-form-textarea {
  height: 74px; /* three lines at rest; the grip below adjusts and persists */
  min-height: 56px;
  max-height: 360px;
  resize: none;
  overflow-y: auto;
  line-height: 1.45;
  white-space: pre-wrap;
  display: block;
}
#editor .note-resize-grip {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 12px;
  margin-top: -1px;
  cursor: ns-resize;
  touch-action: none;
  color: var(--ed-text-subtle);
  user-select: none;
}
#editor .note-resize-grip::before {
  content: "";
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  transition: background 0.15s, width 0.15s;
}
#editor .note-resize-grip:hover::before,
#editor .note-resize-grip.dragging::before {
  background: var(--ed-text-muted);
  width: 46px;
}

/* Divider between form and preview */
#editor .paper-divider {
  margin: 28px 0 32px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ed-text-muted);
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 12px;
}
#editor .paper-divider::before,
#editor .paper-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ed-border-soft);
}

/* ── PREVIEW AREA (hero rendered output) ─────────────────────────── */
/* `.paper-preview` and the inner `#paperSurface` reuse the legacy
   `.paper-editor` / `.paper-surface` classes so the renderer's overlay
   anchor and cell-hover CSS keep working. The rules below strip the
   legacy paper-card chrome (cream wrap, white card with shadow, flex
   centering, scrollable container) for v9's flat-page look. */
#editor .paper-preview {
  padding: 8px 36px 8px;
  box-sizing: border-box;
  flex: initial;
  overflow-x: auto;
  overflow-y: visible;
  background: transparent;
  display: block;
  /* position: relative kept from .paper-editor (overlay anchor). */
}
#editor .paper-preview.has-wide-table {
  scrollbar-gutter: stable;
}
#editor #paperSurface.paper-surface {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  width: auto;
  min-height: 0;
}
#editor .paper-surface .paper-table {
  min-width: 620px;
}
#editor .paper-surface.has-wide-table .paper-table {
  max-width: none !important;
}
#editor .paper-surface .paper-cell.cell-nowrap {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}
#editor .paper-surface .paper-cell.cell-pvalue {
  min-width: 4.5em;
}
#editor .paper-surface .paper-cell.cell-ci {
  min-width: 9.5em;
}
/* Renderer emits Add row / Add column buttons under the table. We hide
   them — those operations live in the cell context menu instead. */
#editor .paper-table-controls { display: none !important; }
#editor .paper-preview-num {
  font-family: 'Charter', 'Times New Roman', Georgia, 'Source Serif Pro', serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--ed-text-pri);
  margin-bottom: 4px;
}
#editor .paper-preview-num:empty { display: none; }
#editor .paper-preview-title {
  font-family: 'Charter', 'Times New Roman', Georgia, 'Source Serif Pro', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--ed-text-pri);
  line-height: 1.35;
  margin-bottom: 18px;
}
#editor .paper-preview-title:empty { display: none; }

/* Empty placeholder (shown until paperRerender produces output) */
#editor .paper-preview-empty {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ed-text-muted);
  text-align: center;
  padding: 48px 0;
  line-height: 1.6;
}

/* ── PER-STYLE TRANSFORMATIONS (driven by data-style on #editor) ─── */
#editor[data-style="IEEE"] .paper-preview-num {
  text-transform: uppercase; text-align: center;
}
#editor[data-style="IEEE"] .paper-preview-title {
  font-style: normal;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.08em;
  font-weight: 500;
}
/* Source row visibility */
#editor .paper-form-row.source-row { display: none; }

/* ── DRAFT CONFIRM MODAL ──────────────────────────────────────────── */
#editor .confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31,31,31,0.08);
  backdrop-filter: blur(1.5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
  z-index: 60;
}
#editor .confirm-overlay.open { opacity: 1; pointer-events: auto; }
#editor .confirm-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 480px;
  max-width: calc(100vw - 32px);
  background: var(--ed-bg);
  border: 1px solid var(--ed-border-strong);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
  padding: 24px 26px 22px;
  z-index: 61;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.22s var(--ed-panel-ease);
  transform: translate(-50%, -45%);
}
#editor .confirm-modal.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
#editor .confirm-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ed-text-pri);
  margin-bottom: 8px;
}
#editor .confirm-body {
  font-size: 13.5px;
  color: var(--ed-text-sec);
  line-height: 1.55;
  margin-bottom: 22px;
}
#editor .confirm-body em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--ed-text-pri);
}
#editor .confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
#editor .confirm-btn {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--ed-border);
  background: var(--ed-bg);
  color: var(--ed-text-pri);
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
  line-height: 1;
}
#editor .confirm-btn:hover { background: var(--ed-hover-bg); border-color: var(--ed-text-muted); }
#editor .confirm-btn.primary {
  background: var(--ed-text-pri);
  color: var(--ed-bg);
  border-color: var(--ed-text-pri);
}
#editor .confirm-btn.primary:hover { background: #000; }
#editor .confirm-btn.danger {
  color: var(--ed-danger);
  border-color: rgba(184,73,58,0.25);
  background: transparent;
}
#editor .confirm-btn.danger:hover {
  color: #fff;
  background: var(--ed-danger);
  border-color: var(--ed-danger);
}
#editor .confirm-spacer { flex: 1; }

/* ── SETTINGS PANEL (floating drawer, replaces legacy formatting collapsible) ── */
#editor .settings-panel,
#editor .fig-format-panel {
  position: fixed;
  top: 78px;
  right: 18px;
  bottom: 18px;
  height: auto;
  background: var(--ed-bg);
  border: 1px solid var(--ed-border);
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(26, 29, 36, 0.16), 0 4px 16px rgba(26, 29, 36, 0.08);
  opacity: 0;
  transform: translate3d(28px, 0, 0) scale(0.985);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.2s ease,
    visibility 0s linear 0.28s;
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#editor .settings-panel { width: 360px; }
#editor .settings-panel.open,
#editor .fig-format-panel.open {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.2s ease,
    visibility 0s linear 0s;
}
#editor .settings-head {
  padding: 24px 28px 16px;
  display: flex;
  align-items: baseline;
  border-bottom: 1px solid var(--ed-border-soft);
}
#editor .settings-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ed-text-pri);
}
#editor .settings-close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--ed-text-muted);
  cursor: pointer;
  font-size: 16px;
}
#editor .settings-close:hover { background: var(--ed-hover-bg); color: var(--ed-text-pri); }
#editor .settings-body { flex: 1; overflow-y: auto; padding: 16px 28px 32px; }
#editor .settings-section { margin-bottom: 22px; }
#editor .settings-section-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ed-text-muted);
  font-weight: 500;
  margin-bottom: 8px;
}
#editor .settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--ed-text-sec);
  gap: 12px;
}
#editor .settings-row.is-muted {
  opacity: 0.45;
}
#editor .settings-row.is-muted:hover {
  opacity: 0.72;
}
#editor .settings-row.is-muted input,
#editor .settings-row.is-muted select {
  cursor: not-allowed;
}
#editor .settings-row .row-label { flex: 1; }
#editor .settings-row .row-label em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--ed-text-pri);
}
#editor .settings-row .row-desc {
  font-size: 11.5px;
  color: var(--ed-text-muted);
  margin-top: 2px;
}
#editor .settings-row .row-desc em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--ed-text-sec);
}
#editor .settings-select {
  background: var(--ed-bg);
  border: 1px solid var(--ed-border);
  border-radius: 6px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ed-text-pri);
  cursor: pointer;
}
#editor .settings-toggle {
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: var(--ed-border);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
  flex-shrink: 0;
}
#editor .settings-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ed-bg);
  transition: transform 0.18s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
#editor .settings-toggle.on { background: var(--ed-text-pri); }
#editor .settings-toggle.on::after { transform: translateX(14px); }
#editor .settings-overlay,
#editor .fig-format-overlay {
  position: fixed;
  top: 64px;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  background: rgba(16, 22, 29, 0.10);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  z-index: 49;
}
#editor .settings-overlay.open,
#editor .fig-format-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
#editor .fig-format-overlay.show {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 520px) {
  #editor .settings-panel,
  #editor .fig-format-panel {
    top: 70px;
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
    border-radius: 12px;
  }
}

/* ── EDITOR FOOT STRIP + SAVED-TABLES TRAY ────────────────────────── */
#editor #tableMode,
#editor #figureMode,
#editor #statsMode { position: relative; }

#editor .editor-foot {
  flex-shrink: 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--ed-border-soft);
  background: var(--ed-bg);
  z-index: 5;
}
#editor .editor-foot-toggle {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ed-text-sec);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
#editor .editor-foot-toggle:hover {
  background: var(--ed-hover-bg);
  color: var(--ed-text-pri);
}
#editor .editor-foot-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ed-text-muted);
  background: var(--ed-tint);
  padding: 1px 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  text-align: center;
}
#editor .editor-foot-toggle .chev {
  color: var(--ed-text-muted);
  transition: transform 0.18s;
}
#editor.tray-open .editor-foot-toggle .chev { transform: rotate(180deg); }

/* Drawer — slides up from below the foot strip. Sits absolutely so the
   split + paper layout above don't reflow when it opens. */
#editor .saved-tray-v9 {
  --saved-tray-height: 280px;
  position: absolute;
  left: 0; right: 0;
  bottom: 36px;
  height: var(--saved-tray-height);
  overflow: hidden;
  background: var(--ed-bg);
  border-top: 1px solid var(--ed-border);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.04);
  z-index: 6;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(100% + 36px));
  visibility: hidden;
  transition:
    transform var(--ed-tray-motion) var(--ed-panel-ease),
    opacity var(--ed-tray-fade) ease,
    visibility 0s linear var(--ed-tray-motion);
  will-change: transform, opacity;
}
#editor.tray-open .saved-tray-v9 {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
  transition:
    transform var(--ed-tray-motion) var(--ed-panel-ease),
    opacity var(--ed-tray-fade) ease,
    visibility 0s;
}

#editor .saved-tray-v9-head {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  padding: 16px 32px 10px;
  gap: 12px;
}
#editor .saved-tray-v9-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ed-text-muted);
  font-weight: 500;
}
/* Possible duplicates: tab pattern next to Saved stats. Inherits all
   visuals from .saved-tray-v9-label; only adds click affordance + state
   opacity so the inactive / faded tabs read as secondary without
   introducing new design tokens. */
#editor .saved-tray-v9-tab { cursor: pointer; transition: opacity 0.12s; }
#editor .saved-tray-v9-tab:not(.active) { opacity: 0.55; }
#editor .saved-tray-v9-tab:not(.active):hover { opacity: 0.85; }
#editor .saved-tray-v9-tab.faded { opacity: 0.30; }
#editor .saved-tray-v9-tab.faded:hover { opacity: 0.55; }
#editor .saved-tray-v9-tab-count { margin-left: 5px; opacity: 0.7; font-weight: 400; }
#editor .saved-tray-v9-tab.faded .saved-tray-v9-tab-count { display: none; }
#editor .saved-tray-v9-spacer { flex: 1; }
#editor .saved-tray-v9-hint {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ed-text-muted);
}
#editor .saved-tray-v9-close {
  width: 24px; height: 24px;
  border: none; background: transparent; color: var(--ed-text-muted);
  cursor: pointer; font-size: 16px; line-height: 1;
  border-radius: 4px;
}
#editor .saved-tray-v9-close:hover { background: var(--ed-hover-bg); color: var(--ed-text-pri); }
#editor .saved-tray-v9-action {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ed-text-sec);
  background: transparent;
  border: 1px solid var(--ed-border);
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
#editor .saved-tray-v9-action:hover {
  background: var(--ed-hover-bg);
  border-color: var(--ed-text-muted);
  color: var(--ed-text-pri);
}

#editor .confirm-modal.confirm-modal-wide {
  width: 560px;
}

/* The stats merge modals are relocated to <body> at init so they work
   cross-view (Hub Library → Combine, etc.). Their CSS was previously
   scoped to #editor — these rules restore the same styling outside that
   wrapper for the four merge-related IDs. */
body > .confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31,31,31,0.08);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
  z-index: 60;
}
body > .confirm-overlay.open { opacity: 1; pointer-events: auto; }
body > .confirm-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 480px;
  max-width: calc(100vw - 32px);
  background: var(--ed-bg, #fff);
  border: 1px solid var(--ed-border-strong, #ddd);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
  padding: 24px 26px 22px;
  z-index: 61;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.22s var(--ed-panel-ease, ease-out);
  transform: translate(-50%, -45%);
}
body > .confirm-modal.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
body > .confirm-modal.confirm-modal-wide { width: 560px; }
body > .confirm-modal .confirm-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ed-text-pri, #222);
  margin-bottom: 8px;
}
body > .confirm-modal .confirm-body {
  font-size: 13.5px;
  color: var(--ed-text-sec, #555);
  line-height: 1.55;
  margin-bottom: 22px;
}
body > .confirm-modal .confirm-body em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--ed-text-pri, #222);
}
body > .confirm-modal .confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
body > .confirm-modal .confirm-spacer { flex: 1; }
body > .confirm-modal .confirm-btn {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--ed-border, #e5e5e5);
  background: var(--ed-bg, #fff);
  color: var(--ed-text-pri, #222);
  white-space: nowrap;
  line-height: 1;
}
body > .confirm-modal .confirm-btn:hover { background: var(--ed-hover-bg, rgba(0,0,0,0.04)); border-color: var(--ed-text-muted, #999); }
body > .confirm-modal .confirm-btn.primary {
  background: var(--ed-text-pri, #222);
  color: var(--ed-bg, #fff);
  border-color: var(--ed-text-pri, #222);
}
body > .confirm-modal .confirm-btn.primary:hover { background: #000; }
body > .confirm-modal .confirm-btn.danger {
  color: var(--ed-danger, #b8493a);
  border-color: rgba(184,73,58,0.25);
  background: transparent;
}
body > .confirm-modal .confirm-btn.danger:hover {
  color: #fff;
  background: var(--ed-danger, #b8493a);
  border-color: var(--ed-danger, #b8493a);
}
body > .confirm-modal .confirm-btn.confirm-btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--ed-text-muted, #999);
  padding: 8px 6px;
}
body > .confirm-modal .confirm-btn.confirm-btn-link:hover { background: transparent; color: var(--ed-text-pri, #222); }
body > .confirm-modal .paper-form { margin-bottom: 16px; }
body > .confirm-modal .stats-merge-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--ed-border, #e5e5e5);
  border-radius: 6px;
  margin: 12px 0 18px;
}
body > .confirm-modal .stats-merge-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ed-border-soft, rgba(0,0,0,0.04));
  cursor: pointer;
  font-size: 13px;
  user-select: none;
}
body > .confirm-modal .stats-merge-item:last-child { border-bottom: none; }
body > .confirm-modal .stats-merge-item:hover { background: var(--ed-hover-bg, rgba(0,0,0,0.04)); }
body > .confirm-modal .stats-merge-item-body {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
}
body > .confirm-modal .stats-merge-item-name {
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body > .confirm-modal .stats-merge-item-meta {
  font-size: 11.5px; color: var(--ed-text-muted, #999);
  font-family: 'Fraunces', Georgia, serif; font-style: italic;
}
body > .confirm-modal .stats-merge-empty {
  padding: 18px 14px; text-align: center; font-size: 13px; color: var(--ed-text-muted, #999);
}
body > .confirm-modal .lib-include-list {
  margin-top: 14px;
}
body > .confirm-modal .lib-include-item-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--ed-tint, rgba(0,0,0,0.035));
  color: var(--ed-text-muted, #777);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body > .confirm-modal .lib-include-warning {
  margin: 10px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(184,73,58,0.18);
  border-radius: 6px;
  color: var(--ed-danger, #b8493a);
  background: rgba(184,73,58,0.045);
  font-size: 12px;
}
body > .confirm-modal .stats-merge-count {
  font-size: 12px; color: var(--ed-text-muted, #999);
  font-family: 'Fraunces', Georgia, serif; font-style: italic; flex: 1;
}
body > .confirm-modal .stats-unmerge-mode {
  margin: 14px 0 18px; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; background: var(--ed-tint, rgba(0,0,0,0.03));
  border-radius: 6px; border: 1px solid var(--ed-border-soft, rgba(0,0,0,0.05));
}
body > .confirm-modal .stats-unmerge-mode-label {
  font-size: 12px; color: var(--ed-text-muted, #999);
  font-family: 'Fraunces', Georgia, serif; font-style: italic;
}
body > .confirm-modal .stats-unmerge-mode-option {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  font-size: 13px; color: var(--ed-text-pri, #222);
}
body > .confirm-modal .stats-unmerge-mode-option input[type="radio"] { margin: 3px 0 0; }
body > .confirm-modal .stats-unmerge-mode-option strong { font-weight: 500; }
body > .confirm-modal .paper-form-row.single {
  display: flex; flex-direction: column; gap: 6px;
}
body > .confirm-modal .paper-form-label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ed-text-muted, #999); font-weight: 500;
}
body > .confirm-modal .paper-form-input {
  font-family: 'Inter', sans-serif; font-size: 13px;
  padding: 8px 12px; border-radius: 6px;
  border: 1px solid var(--ed-border, #e5e5e5); background: var(--ed-bg, #fff);
}
body > .confirm-modal .paper-form-input:focus {
  outline: none; border-color: var(--ed-text-muted, #999);
}
body > .confirm-modal.fig-composite-modal {
  width: min(920px, calc(100vw - 32px));
}
body > .confirm-modal .fig-composite-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}
body > .confirm-modal .fig-composite-controls label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  font-size: 11px;
  color: var(--ed-text-muted, #777);
}
body > .confirm-modal .fig-composite-controls span {
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body > .confirm-modal .fig-composite-controls select {
  width: 100%;
  border: 1px solid var(--ed-border, #ddd);
  border-radius: 6px;
  padding: 7px 8px;
  background: #fff;
  color: var(--ed-text-pri, #222);
  font: inherit;
}
body > .confirm-modal .fig-composite-meta {
  min-height: 18px;
  font-size: 12px;
  color: var(--ed-text-muted, #777);
  margin-bottom: 8px;
}
body > .confirm-modal .fig-composite-preview {
  border: 1px solid var(--ed-border, #e1e1e1);
  background: #f8f8f8;
  border-radius: 8px;
  padding: 12px;
  max-height: 52vh;
  overflow: auto;
}
body > .confirm-modal .fig-composite-preview svg {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  box-shadow: 0 1px 5px rgba(15,23,42,.08);
}
@media (max-width: 760px) {
  body > .confirm-modal .fig-composite-controls {
    grid-template-columns: 1fr;
  }
}

/* ── Stats field override editor ─────────────────────────────────── */
.stats-field-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  background: rgba(31,31,31,0.08);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s;
}
.stats-field-overlay.open { opacity: 1; pointer-events: auto; }
.stats-field-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10021;
  width: 680px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  background: var(--ed-bg, #fff);
  border: 1px solid var(--ed-border-strong, #d8d4cc);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -46%);
  transition: opacity 0.16s, transform 0.18s var(--ed-panel-ease, ease-out);
}
.stats-field-modal.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
.stats-field-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--ed-border-soft, #eee);
}
.stats-field-title {
  font-family: 'Inter', var(--sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--ed-text-pri, #222);
  line-height: 1.15;
}
.stats-field-sub {
  margin-top: 5px;
  color: var(--ed-text-sec, #666);
  font-size: 13px;
  line-height: 1.45;
}
.stats-field-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border: 1px solid var(--ed-border, #e5e5e5);
  border-radius: 6px;
  background: transparent;
  color: var(--ed-text-muted, #777);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}
.stats-field-icon-btn:hover {
  background: var(--ed-hover-bg, rgba(0,0,0,0.04));
  color: var(--ed-text-pri, #222);
}
.stats-field-body {
  overflow: auto;
  padding: 18px 24px 20px;
}
.stats-field-section + .stats-field-section { margin-top: 20px; }
.stats-field-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--ed-text-muted, #777);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}
.stats-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}
.stats-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
}
.stats-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ed-text-sec, #555);
  font-size: 12px;
  font-weight: 500;
}
.stats-field-reset,
.stats-field-small-btn {
  border: 1px solid var(--ed-border, #e5e5e5);
  border-radius: 5px;
  background: transparent;
  color: var(--ed-text-muted, #777);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 5px 7px;
}
.stats-field-reset {
  border-color: transparent;
  padding: 3px 0;
}
.stats-field-reset:hover,
.stats-field-small-btn:hover {
  color: var(--ed-text-pri, #222);
  background: var(--ed-hover-bg, rgba(0,0,0,0.04));
}
.stats-field-input {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid var(--ed-border, #e5e5e5);
  border-radius: 6px;
  background: var(--ed-bg, #fff);
  color: var(--ed-text-pri, #222);
  font: 13px/1.2 'Inter', var(--sans);
  padding: 0 10px;
}
.stats-field-input:focus {
  outline: none;
  border-color: var(--ed-text-muted, #999);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.04);
}
.stats-field-original {
  color: var(--ed-text-muted, #888);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-field-terms {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stats-field-term-head {
  display: grid;
  grid-template-columns: minmax(110px, 1.1fr) minmax(110px, 1.1fr) minmax(88px, 0.8fr) minmax(96px, 0.8fr) 74px 30px;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
  color: var(--ed-text-muted, #888);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
}
.stats-field-term-row {
  display: grid;
  grid-template-columns: minmax(110px, 1.1fr) minmax(110px, 1.1fr) minmax(88px, 0.8fr) minmax(96px, 0.8fr) 74px 30px;
  gap: 8px;
  align-items: center;
}
.stats-field-term-origin {
  justify-self: start;
  color: var(--ed-text-muted, #888);
  font-size: 11px;
  line-height: 1;
}
.stats-field-term-origin.edited,
.stats-field-term-origin.user { color: var(--ed-text-sec, #555); }
.stats-field-remove-term {
  width: 30px;
  min-width: 30px;
}
.stats-field-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--ed-border-soft, #eee);
}
.stats-field-actions .confirm-spacer { flex: 1; }
.stats-field-modal .confirm-btn {
  font-family: 'Inter', var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--ed-border, #e5e5e5);
  background: var(--ed-bg, #fff);
  color: var(--ed-text-pri, #222);
  white-space: nowrap;
  line-height: 1;
}
.stats-field-modal .confirm-btn:hover {
  background: var(--ed-hover-bg, rgba(0,0,0,0.04));
  border-color: var(--ed-text-muted, #999);
}
.stats-field-modal .confirm-btn.primary {
  background: var(--ed-text-pri, #222);
  color: var(--ed-bg, #fff);
  border-color: var(--ed-text-pri, #222);
}
.stats-field-modal .confirm-btn.primary:hover { background: #000; }
.stats-field-modal .confirm-btn.confirm-btn-link {
  border-color: transparent;
  background: transparent;
  color: var(--ed-text-muted, #888);
  padding-left: 0;
}
.stats-field-modal .confirm-btn.confirm-btn-link:hover {
  color: var(--ed-text-pri, #222);
  background: transparent;
}
.stats-field-choice-body {
  padding: 18px 24px;
  color: var(--ed-text-sec, #555);
  font-size: 13.5px;
  line-height: 1.55;
}
@media (max-width: 720px) {
  .stats-field-grid { grid-template-columns: 1fr; }
  .stats-field-term-head { display: none; }
  .stats-field-term-row { grid-template-columns: 1fr 1fr; }
  .stats-field-term-origin { grid-column: 1; }
  .stats-field-remove-term {
    grid-column: 2;
    justify-self: end;
  }
  .stats-field-actions { flex-wrap: wrap; }
}
#editor .confirm-btn.confirm-btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--ed-text-muted);
  padding: 8px 6px;
}
#editor .confirm-btn.confirm-btn-link:hover {
  background: transparent;
  color: var(--ed-text-pri);
}
#editor .stats-unmerge-mode {
  margin: 14px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--ed-tint);
  border-radius: 6px;
  border: 1px solid var(--ed-border-soft);
}
#editor .stats-unmerge-mode-label {
  font-size: 12px;
  color: var(--ed-text-muted);
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  margin-bottom: 2px;
}
#editor .stats-unmerge-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ed-text-pri);
  user-select: none;
}
#editor .stats-unmerge-mode-option input[type="radio"] {
  margin: 3px 0 0;
}
#editor .stats-unmerge-mode-option strong { font-weight: 500; }
#editor .stats-merge-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--ed-border);
  border-radius: 6px;
  margin: 12px 0 18px;
  background: var(--ed-bg-soft, transparent);
}
#editor .stats-merge-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ed-border-soft, rgba(0,0,0,0.04));
  cursor: pointer;
  font-size: 13px;
  color: var(--ed-text-pri);
  user-select: none;
}
#editor .stats-merge-item:last-child { border-bottom: none; }
#editor .stats-merge-item:hover { background: var(--ed-hover-bg); }
#editor .stats-merge-item input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}
#editor .stats-merge-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
#editor .stats-merge-item-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#editor .stats-merge-item-meta {
  font-size: 11.5px;
  color: var(--ed-text-muted);
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
}
#editor .stats-merge-item.is-multi { opacity: 0.5; cursor: not-allowed; }
#editor .stats-merge-item.is-multi .stats-merge-item-meta::after {
  content: ' · already combined';
}
#editor .stats-merge-empty {
  padding: 18px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--ed-text-muted);
}
#editor .stats-merge-count {
  font-size: 12px;
  color: var(--ed-text-muted);
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  flex: 1;
}

#editor .saved-tray-v9-cards {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 32px 28px;
  display: flex;
  gap: 14px;
  align-items: stretch;
  min-height: 0;
}
#editor .saved-tray-v9-cards::-webkit-scrollbar { height: 6px; }
#editor .saved-tray-v9-cards::-webkit-scrollbar-thumb { background: var(--ed-border); border-radius: 3px; }

/* Empty state */
#editor .saved-tray-v9-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ed-text-muted);
}

/* Card — new layout: TABLE N + date / single-line title / scaled
   table preview / project chip. Mirrors the Library lib-card pattern. */
#editor .tray-card {
  position: relative;
  flex-shrink: 0;
  width: 240px;
  height: 196px;
  display: flex;
  flex-direction: column;
  padding: 10px 14px 10px;
  background: var(--ed-bg);
  border: 1px solid var(--ed-border);
  border-radius: 8px;
  cursor: grab;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  user-select: none;
  overflow: visible; /* popover anchors here */
}
#editor .tray-card:hover {
  border-color: var(--ed-text-subtle);
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  transform: translateY(-1px);
}
#editor .tray-card:active { cursor: grabbing; }
#editor .tray-card.dragging { opacity: 0.4; }
#editor .tray-card.current {
  border-color: var(--ed-text-pri);
  box-shadow: 0 0 0 1px var(--ed-text-pri);
}

#editor .tray-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-shrink: 0;
}
#editor .tray-card-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ed-text-muted);
  font-weight: 500;
}
#editor .tray-card-spacer { flex: 1; }
#editor .tray-card-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ed-text-subtle);
  font-variant-numeric: tabular-nums;
}
#editor .tray-card-memo {
  width: 22px;
  height: 22px;
  margin-right: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ed-border-soft);
  border-radius: 6px;
  background: var(--ed-tint);
  color: var(--ed-text-muted);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
#editor .tray-card-memo:hover,
#editor .tray-card-memo:focus-visible {
  background: var(--ed-hover-bg);
  border-color: var(--ed-border);
  color: var(--ed-text-pri);
  outline: none;
}
#editor .tray-card-memo svg {
  width: 12px;
  height: 12px;
  pointer-events: none;
}
#editor .tray-card-delete {
  width: 22px;
  height: 22px;
  margin-left: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ed-text-subtle);
  cursor: pointer;
  opacity: 0.62;
  transition: opacity 0.12s, color 0.12s, background 0.12s, border-color 0.12s;
}
#editor .tray-card-delete:hover,
#editor .tray-card-delete:focus-visible {
  opacity: 1;
  color: var(--ed-danger, #b8493a);
  background: rgba(184,73,58,0.08);
  border-color: rgba(184,73,58,0.18);
}
#editor .tray-card-delete svg {
  width: 12px;
  height: 12px;
  pointer-events: none;
}

#editor .tray-card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ed-text-pri);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin-bottom: 8px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Preview — paperRerender bakes inline `font-size: 12pt` into the
   rendered HTML, so font-size CSS alone won't shrink it. We
   transform-scale the whole rendered tree instead, then expand the
   width compensation so the table fills the card. */
#editor .tray-card-preview {
  flex: 1;
  overflow: hidden;
  position: relative;
  pointer-events: none;
  color: var(--ed-text-pri);
  background: linear-gradient(to bottom, transparent 70%, var(--ed-bg));
  margin: 0 -2px;
}
#editor .tray-card-preview > *:first-child {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 333%;       /* 1 / 0.30 */
  transform: scale(0.30);
  transform-origin: top left;
  pointer-events: none;
}
/* Hide the rendered title / number / note <p> tags inside the preview —
   the card already shows TABLE N + title above; the preview area is for
   the actual data. */
#editor .tray-card-preview p { display: none !important; }
/* Tighten the table-controls strip if it slips through */
#editor .tray-card-preview .paper-table-controls { display: none !important; }
#editor .tray-card-preview-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 11px;
  color: var(--ed-text-subtle);
}

#editor .tray-card-stat {
  cursor: pointer;
}
#editor .tray-card-stat .tray-card-preview {
  background: var(--ed-bg);
  border: 1px solid var(--ed-border-soft);
  border-radius: 7px;
  padding: 10px 11px;
  margin: 0;
}
#editor .tray-card-stat .tray-card-preview > *:first-child {
  position: static;
  width: auto;
  transform: none;
}
#editor .tray-card-stat .tray-card-preview p {
  display: block !important;
  margin: 0;
}
#editor .tray-card-stat .tray-card-preview ol {
  margin: 0;
  padding-left: 18px;
}
#editor .tray-card-stat .tray-card-preview li {
  margin: 0 0 3px;
}
#editor .tray-card-stat-preview-inner {
  max-height: 80px;
  overflow: hidden;
  font-family: 'Charter', 'Times New Roman', Georgia, serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ed-text-pri);
}

#editor .tray-card-bot {
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
#editor .tray-card-project {
  background: var(--ed-tint);
  color: var(--ed-text-sec);
  padding: 2px 8px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Click popover — fixed-positioned (body-anchored) so the tray's
   overflow:hidden can't clip it. JS sets top/left after measuring. */
.tray-card-popover {
  position: fixed;
  min-width: 170px;
  background: #fff;
  border: 1px solid var(--ed-border, #dedad2);
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  padding: 6px;
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s;
}
.tray-card-popover::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #fff;
  border-color: var(--ed-border, #dedad2);
  border-style: solid;
  border-width: 0;
  transform: translateX(-50%) rotate(45deg);
}
.tray-card-popover.is-above::before {
  bottom: -6px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}
.tray-card-popover.is-below::before {
  top: -6px;
  border-left-width: 1px;
  border-top-width: 1px;
}
.tray-card-popover.open {
  opacity: 1;
  pointer-events: auto;
}
.tray-card-popover-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  background: transparent;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: #1a1a1a;
  cursor: pointer;
  transition: background 0.12s;
}
.tray-card-popover-item:hover { background: #f5f5f5; }
.tray-card-popover-item.danger {
  color: var(--ed-danger, #b8493a);
}
.tray-card-popover-item.danger:hover {
  background: rgba(184,73,58,0.08);
}

/* Drop target (editor-main) when a tray card is being dragged */
#editor .editor-main.drop-target {
  outline: 1.5px dashed rgba(45,74,110,0.45);
  outline-offset: -16px;
  background: rgba(45,74,110,0.025);
}

/* ════════════════════════════════════════════
   FIGURE EDITOR v9 — chrome scaffolding
   Sits alongside Tables v9 styles. Sidebar reuses .source-* classes
   defined for #editor; rules below add figures-only elements:
   image card / info block / panel cards / annotation toolbar (v9
   override of #fig-step-edit legacy) / preview caption / multi-cell
   render / Format slide-out (#figFormatPanel — parallel to
   #settingsPanel; see docs/FIGURES-PORT-HANDOFF.md "Cleanup
   follow-ups" for the eventual merge).
════════════════════════════════════════════ */

/* ── SIDEBAR · single-image card ─────────────────────────────── */
#editor #figureMode .fig-image-card {
  border: 1px solid #dfe3e3;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
  margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}
#editor #figureMode .fig-image-card:hover {
  border-color: #c6ced1;
  background: #fbfcfc;
}
#editor #figureMode .fig-image-card-thumb {
  background: #fbfcfc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  height: 150px;
  border-bottom: 1px solid #edf0f0;
}
#editor #figureMode .fig-image-card-thumb img,
#editor #figureMode .fig-image-card-thumb svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
#editor #figureMode .fig-image-card-name {
  padding: 10px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--ed-text-pri);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar empty placeholder (inside .fig-image-card-thumb when no image) */
#editor #figureMode .fig-sidebar-empty {
  text-align: center;
  color: var(--ed-text-muted);
}
#editor #figureMode .fig-sidebar-empty-main {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ed-text-pri);
  margin-bottom: 4px;
}
#editor #figureMode .fig-sidebar-empty-sub {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 11.5px;
  color: var(--ed-text-muted);
}

/* Preview-surface inline empty state — purely visual; upload happens in the sidebar */
#editor #figureMode .fig-inline-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 24px;
  width: 100%;
  min-height: 280px;
  border: 1px dashed var(--ed-border);
  border-radius: 8px;
  background: var(--ed-bg);
  color: var(--ed-text-muted);
  cursor: default;
  pointer-events: none;
}
/* Staged state — image uploaded to sidebar, awaiting "Send to editor" */
#editor #figureMode .fig-inline-dropzone.fig-dropzone-staged {
  border-style: solid;
  border-color: var(--ed-data);
  background: rgba(45,74,110,0.025);
  cursor: default;
}
#editor #figureMode .fig-inline-dropzone.fig-dropzone-staged .fig-dropzone-icon {
  color: var(--ed-data);
}
#editor #figureMode .fig-inline-dropzone.fig-dropzone-staged .fig-dropzone-main {
  color: var(--ed-text-pri);
}
#editor #figureMode .fig-dropzone-icon {
  margin-bottom: 14px;
  color: var(--ed-text-muted);
}
#editor #figureMode .fig-dropzone-main {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ed-text-sec);
  margin-bottom: 6px;
  line-height: 1.5;
}
#editor #figureMode .fig-dropzone-sub {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ed-text-muted);
}

/* ── SIDEBAR · image info block (mirrors .source-summary shape) ── */
#editor #figureMode .fig-info {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.2px;
  color: var(--ed-text-muted);
  line-height: 1.38;
  padding: 0;
  border: 1px solid #dfe3e3;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  margin-bottom: 16px;
}
#editor #figureMode .fig-info-head {
  color: var(--ed-text-sec);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  padding: 7px 10px;
  border-bottom: 1px solid #edf0f0;
}
#editor #figureMode .fig-info-row {
  display: flex;
  align-items: baseline;
  padding: 4px 10px;
  border-bottom: 1px solid #edf0f0;
}
#editor #figureMode .fig-info-row:last-child { border-bottom: none; }
#editor #figureMode .fig-info-key {
  color: var(--ed-text-muted);
  width: 86px;
  flex: 0 0 86px;
}
#editor #figureMode .fig-info-val {
  color: var(--ed-text-sec);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#editor #figureMode .fig-info-val.muted { color: var(--ed-text-muted); font-style: italic; }

/* ── SIDEBAR · multi-panel cards (vertical stack of uploads) ───── */
#editor #figureMode .panel-card {
  border: 1px solid var(--ed-border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  background: white;
  cursor: grab;
  display: flex;
  gap: 10px;
  position: relative;
  transition: border-color 0.12s;
}
#editor #figureMode .panel-card:hover { border-color: var(--ed-border-strong); }
#editor #figureMode .panel-card.active {
  border: 2px solid var(--ed-data);
  padding: 9px;
}
#editor #figureMode .panel-card-thumb {
  flex: 0 0 80px;
  height: 56px;
  background: var(--ed-bg);
  border-radius: 4px;
  border: 1px solid var(--ed-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#editor #figureMode .panel-card-thumb img,
#editor #figureMode .panel-card-thumb svg {
  width: 92%;
  height: 92%;
  object-fit: contain;
}
#editor #figureMode .panel-card-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
#editor #figureMode .panel-card-label {
  font-family: 'Charter', 'Iowan Old Style', 'Times New Roman', Times, serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ed-text-pri);
}
#editor #figureMode .panel-card.active .panel-card-label { color: var(--ed-data); }
#editor #figureMode .panel-card-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--ed-text-sec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#editor #figureMode .panel-card-specs {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--ed-text-muted);
}
#editor #figureMode .panel-card-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  background: white;
  border: 1px solid var(--ed-border);
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  line-height: 14px;
  color: var(--ed-text-muted);
  opacity: 0;
  transition: opacity 0.12s, color 0.12s, border-color 0.12s;
  padding: 0;
}
#editor #figureMode .panel-card:hover .panel-card-remove { opacity: 1; }
#editor #figureMode .panel-card-remove:hover {
  color: var(--ed-danger);
  border-color: var(--ed-danger);
}

/* Source-empty-hint inside #figureMode — Tables uses margin-top: -8px to
   tuck the hint under a textarea, but figures has no textarea above so
   the negative margin pulls the hint above the source-body's scroll
   origin and clips its first line. Override to a positive margin. */
#editor #figureMode .source-empty-hint {
  margin-top: 4px;
}

/* ── ANNOTATION TOOLBAR v9 ─────────────────────────────────────── */
/* Explicitly resets every property the unscoped legacy
   .fig-annotation-toolbar / .fig-tool-btn rules at line ~3439 set —
   width, flex-direction, position, backdrop-filter, sticky, etc. —
   because those rules aren't scoped to #fig-step-edit and leak
   through. Quick override now; properly scoping the legacy block is
   a Phase 4 cleanup task. */
#editor #figureMode .fig-annotation-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 6px;
  border: 1px solid var(--ed-border);
  border-radius: 6px;
  margin-top: 8px;
  margin-bottom: 6px;
  background: white;
  flex-wrap: nowrap;
  position: static;
  top: auto;
  z-index: auto;
  min-height: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
#editor #figureMode .fig-annotation-toolbar.fig-tools-disabled {
  opacity: 0.45;
  pointer-events: none;
}
#editor #figureMode .fig-toolbar-row {
  display: flex;
  align-items: center;
  min-width: 0;
}
#editor #figureMode .fig-toolbar-buttons {
  width: 100%;
  gap: 6px;
  flex-wrap: nowrap;
}
#editor #figureMode .fig-tool-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: 0 1 auto;
  flex-wrap: nowrap;
}
#editor #figureMode .fig-toolbar-actions {
  display: inline-flex;
  gap: 0;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 0;
}
/* Unified toolbar button — every button (tool, undo/redo, delete) shares
   the same shape and rhythm so the row reads as one. Labels everywhere;
   icons + labels keep the same gap; same hover + active treatment.
   Explicit width:auto + border:none overrides the unscoped legacy
   .fig-tool-btn rules at line ~3454 (width:32px, border, etc.). */
#editor #figureMode .fig-tool-btn {
  width: auto;
  height: 32px;
  min-width: 32px;
  padding: 0 10px;
  border: 1px solid transparent;
  background: none;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ed-text-sec);
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
#editor #figureMode .fig-tool-btn.active {
  background: rgba(45,74,110,0.08);
  color: var(--ed-data);
  border-color: transparent;
  border-bottom-color: transparent;
}
#editor #figureMode .fig-tool-btn:hover {
  background: var(--ed-hover-bg);
  color: var(--ed-text-pri);
}
#editor #figureMode .fig-tool-btn.active {
  background: rgba(45,74,110,0.08);
  color: var(--ed-data);
}
#editor #figureMode .fig-tool-btn-label { font-size: 12px; line-height: 1; }
#editor #figureMode .fig-tool-btn svg { flex-shrink: 0; }
#editor #figureMode .fig-tool-btn-del:hover {
  color: var(--ed-danger);
  background: rgba(184,73,58,0.06);
}
/* Disabled / faded state — used for the always-visible trash icon when
   no annotation is selected (see figUpdateToolOptions / onSelectionChange). */
#editor #figureMode .fig-tool-btn.disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}
#editor #figureMode .fig-tool-btn.disabled:hover {
  background: none;
  color: var(--ed-text-sec);
}
#editor #figureMode .fig-tool-divider {
  width: 1px;
  height: 16px;
  background: var(--ed-border);
  margin: 0 4px;
  flex-shrink: 0;
}
#editor #figureMode .fig-toolbar-buttons > .fig-tool-divider {
  margin-left: auto;
}

/* Tool-options strip — drawer-animated reveal when a tool with options
   activates. Hidden state has 0 height + 0 opacity so there's no empty
   space when no tool with options is selected. */
#editor #figureMode .fig-toolbar-options {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 6px;
  padding: 0 4px;
  margin-bottom: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  flex-wrap: wrap;
  transition: max-height 0.18s ease-out, opacity 0.18s ease-out, padding 0.18s ease-out, margin-bottom 0.18s ease-out;
  border-top: 1px solid transparent;
  background: transparent;
}

@media (max-width: 980px) {
  #editor #figureMode .fig-toolbar-actions .fig-tool-btn-label {
    display: none;
  }
}

@media (max-width: 760px) {
  #editor #figureMode .fig-tool-group .fig-tool-btn-label {
    display: none;
  }
  #editor #figureMode .fig-tool-btn {
    padding: 0 8px;
  }
}
#editor #figureMode .fig-toolbar-options.is-open {
  max-height: 96px;
  opacity: 1;
  overflow: visible;
  padding: 8px 4px 2px;
  margin: 4px 0 0;
  border-top-color: var(--ed-border-soft);
}
#editor #figureMode .fig-toolbar-options-key {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ed-text-muted);
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  margin-right: 4px;
}

#editor #figureMode .fig-toolbar-options:empty { display: none; }
#editor #figureMode .fig-tool-label {
  font-size: 10px;
  color: var(--ed-text-muted);
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
}

/* Significance dropdown — replaces three rows of inline pills */
#editor #figureMode .fig-sig-dropdown-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
#editor #figureMode .fig-pill-btn-dropdown {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px 5px 11px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ed-text-pri);
  background: white;
  border: 1px solid var(--ed-border);
  border-radius: 5px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
#editor #figureMode .fig-pill-btn-dropdown:hover {
  border-color: var(--ed-border-strong);
  background: var(--ed-hover-bg);
}
#editor #figureMode .fig-sig-menu-section-label {
  padding: 8px 12px 4px;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ed-text-muted);
  font-weight: 500;
  font-family: 'Inter', sans-serif;
}

/* Pills (significance, bracket-label, color-mode, stroke-width).
   Resets the legacy unscoped .fig-pill-group background/padding from
   line ~3475. */
#editor #figureMode .fig-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  flex-wrap: wrap;
}
#editor #figureMode .fig-pill-btn {
  height: 28px;
  min-width: 32px;
  padding: 0 10px;
  border: 1px solid var(--ed-border);
  background: transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ed-text-sec);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  line-height: 1;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
#editor #figureMode .fig-pill-btn:hover {
  background: var(--ed-hover-bg);
  border-color: var(--ed-text-muted);
  color: var(--ed-text-pri);
}
#editor #figureMode .fig-pill-btn.active {
  background: rgba(45,74,110,0.08);
  color: var(--ed-data);
  border-color: rgba(45,74,110,0.45);
}
#editor #figureMode .fig-bracket-label-wrap {
  display: inline-flex;
  align-items: center;
  min-width: 96px;
}
#editor #figureMode .fig-bracket-label-wrap .fig-anno-text-input {
  width: 128px;
  height: 28px;
  border: 1px solid var(--ed-border);
  border-radius: 6px;
  background: #fff;
  color: var(--ed-text-pri);
  font: 12px/1 'JetBrains Mono', ui-monospace, monospace;
  padding: 0 8px;
}
#editor #figureMode .fig-bracket-label-wrap .fig-anno-text-input:focus {
  outline: none;
  border-color: rgba(45,74,110,0.45);
  box-shadow: 0 0 0 3px rgba(45,74,110,0.08);
}
#editor #figureMode .fig-pill-stroke { padding: 0 8px; }
#editor #figureMode .fig-pill-btn-action {
  background: var(--ed-text-pri);
  color: white;
  border-color: var(--ed-text-pri);
}
#editor #figureMode .fig-pill-btn-action:hover { background: #000; border-color: #000; }

/* Bg-remove sub-mode buttons */
#editor #figureMode .fig-bgremove-options {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
#editor #figureMode .fig-bgremove-submode {
  display: inline-flex;
  gap: 3px;
}
#editor #figureMode .fig-bgremove-submode-btn {
  height: 28px;
  min-width: 0;
  padding: 0 10px;
  gap: 6px;
  color: var(--ed-text-sec);
}
#editor #figureMode .fig-bgremove-submode-btn:hover { background: var(--ed-hover-bg); }
#editor #figureMode .fig-bgremove-submode-btn.active { background: var(--ed-hover-bg); color: var(--ed-text-pri); }

/* Range slider (tolerance / border / padding) */
#editor #figureMode .fig-adj-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 2px;
  background: var(--ed-border-strong);
  border-radius: 1px;
  outline: none;
}
#editor #figureMode .fig-adj-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ed-text-pri);
  cursor: pointer;
}
#editor #figureMode .fig-adj-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ed-text-muted);
  min-width: 28px;
  text-align: right;
}

/* Crop options */
#editor #figureMode .fig-crop-options {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
#editor #figureMode .fig-crop-dims {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ed-text-muted);
  min-height: 28px;
  padding: 0 8px;
  border-left: 1px solid var(--ed-border-soft);
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.fig-crop-action-bar {
  z-index: 10002;
  gap: 7px;
}
.fig-crop-action-title {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ed-text-muted, #a0a0a0);
  font-weight: 650;
  padding: 0 2px;
}
.fig-crop-action-bar .fig-crop-dims {
  min-width: 78px;
  min-height: 28px;
  padding: 0 8px;
  border-left: 1px solid var(--ed-border-soft, #f0f0f0);
  border-right: 1px solid var(--ed-border-soft, #f0f0f0);
  color: var(--ed-text-sec, #6e6e6e);
}
.fig-crop-action-bar .fig-crop-apply-btn {
  background: var(--ed-data, #2d4a6e);
  border-color: var(--ed-data, #2d4a6e);
  color: #fff;
}
.fig-crop-action-bar .fig-crop-apply-btn:hover {
  background: #213a58;
  border-color: #213a58;
}

/* Annotation color picker — trigger swatch + dropdown of 5 colors. The
   dropdown is closed by default (is-open class shows it); click-outside
   handler is wired in app.js. */
#editor #figureMode .fig-anno-color-btn {
  height: 28px;
  padding: 0 7px 0 5px;
  border: 1px solid var(--ed-border);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ed-text-muted);
}
#editor #figureMode .fig-anno-color-btn:hover { border-color: var(--ed-border-strong); }
#editor #figureMode .fig-anno-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
#editor #figureMode .fig-anno-color-chev { color: var(--ed-text-muted); }

#editor #figureMode .fig-anno-color-picker {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: white;
  border: 1px solid #d6d6d6;
  border-radius: 6px;
  padding: 6px;
  display: none;
  gap: 4px;
  z-index: 30;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
#editor #figureMode .fig-anno-color-picker.is-open { display: flex; }
#editor #figureMode .fig-anno-color-opt {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  transition: transform 80ms ease;
}
#editor #figureMode .fig-anno-color-opt.is-white {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
}
#editor #figureMode .fig-anno-color-opt:hover { transform: scale(1.08); }
#editor #figureMode .fig-anno-color-opt.active {
  outline: 1.5px solid #1f1f1f;
  outline-offset: 2px;
}

/* ── PREVIEW · rendered caption (Figure 1, italic title, Note.) ── */
#editor #figureMode .fig-cap-num {
  font-family: 'Charter', 'Iowan Old Style', 'Times New Roman', Times, serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ed-text-pri);
  margin-bottom: 4px;
}
#editor #figureMode .fig-cap-title {
  font-family: 'Charter', 'Iowan Old Style', 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ed-text-pri);
  margin-bottom: 14px;
  line-height: 1.5;
}
#editor #figureMode .fig-cap-note {
  font-family: 'Charter', 'Iowan Old Style', 'Times New Roman', Times, serif;
  font-size: 12.5px;
  color: var(--ed-text-pri);
  line-height: 1.55;
  margin-top: 14px;
}
#editor #figureMode .fig-cap-note .lab { font-style: italic; }

/* Preview image host — single image + multi-cell variants */
#editor #figureMode .fig-image-host {
  display: block;
  margin: 0 auto;
  position: relative;
}
#editor #figureMode .fig-image-host img,
#editor #figureMode .fig-image-host > svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  max-height: 360px;
}
#editor #figureMode .fig-image-host.is-stats-figure {
  width: 100%;
  max-width: 100%;
  overflow-x: visible;
}
#editor #figureMode .fig-image-host.is-stats-figure img,
#editor #figureMode .fig-image-host.is-stats-figure > svg {
  width: auto;
  max-width: 100%;
  max-height: min(42vh, 460px);
  object-fit: contain;
}
#editor #figureMode .fig-image-host.is-stats-figure[data-diagram-workspace="expanded"] {
  overflow: auto;
  max-height: min(72vh, 900px);
}
#editor #figureMode .fig-image-host.is-stats-figure[data-diagram-workspace="expanded"] img,
#editor #figureMode .fig-image-host.is-stats-figure[data-diagram-workspace="expanded"] > svg {
  max-width: none;
  max-height: none;
}
#editor #figureMode .fig-image-host.is-stats-figure #figPreviewImg {
  cursor: pointer;
}
#editor #figureMode .fig-stats-context-highlight {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
#editor #figureMode .fig-stats-context-box {
  position: absolute;
  border: 1.5px solid rgba(45,74,110,0.62);
  border-radius: 5px;
  background: rgba(45,74,110,0.075);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.88),
    0 8px 22px rgba(45,74,110,0.08);
}
#editor #figureMode .fig-stats-context-highlight[data-context="labels"] .fig-stats-context-box {
  border-style: dashed;
}
#editor #figureMode .fig-stats-context-highlight[data-context="color"] .fig-stats-context-box {
  border-color: rgba(0,114,178,0.58);
  background: rgba(0,114,178,0.07);
}
#editor #figureMode .fig-stats-context-tag {
  position: absolute;
  top: -10px;
  left: -1px;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--ed-data);
  color: white;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
/* v3 inline-SVG figure: real element-selection chrome (replaces canned boxes) */
#editor #figureMode .fig-image-host.is-stats-figure > svg { display: block; }
#editor #figureMode .fig-image-host.is-stats-figure #figPreviewSvg [data-fig-role] {
  cursor: pointer;
}
#editor #figureMode .fig-image-host.is-stats-figure #figPreviewSvg .fig-editor-ghost-edge {
  opacity: 0.28;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
}
#editor #figureMode .fig-image-host.is-stats-figure #figPreviewSvg .fig-editor-ghost-label {
  opacity: 0.38;
  fill: #5f6f85;
}
#editor #figureMode .fig-image-host.is-stats-figure #figPreviewSvg .fig-editor-ghost-label-bg {
  opacity: 0.16;
  fill: #dbeafe;
  stroke: #5f8fd5;
  stroke-dasharray: 2 3;
}
#editor #figureMode .fig-image-host.is-stats-figure #figPreviewSvg [data-fig-role^="legend"],
#editor #figureMode .fig-image-host.is-stats-figure #figPreviewSvg [data-fig-node],
#editor #figureMode .fig-image-host.is-stats-figure #figPreviewSvg [data-fig-role="diagram-object-box"],
#editor #figureMode .fig-image-host.is-stats-figure #figPreviewSvg [data-fig-role="diagram-object-text"],
#editor #figureMode .fig-image-host.is-stats-figure #figPreviewSvg [data-fig-role="diagram-object-arrow"],
#editor #figureMode .fig-image-host.is-stats-figure #figPreviewSvg [data-fig-role="edge-arrow"] {
  cursor: grab;
}
#editor #figureMode .fig-image-host.fig-hover-editable,
#editor #figureMode .fig-image-host.fig-hover-editable #figPreviewSvg,
#editor #figureMode .fig-image-host.fig-hover-editable #figAnnotationCanvas {
  cursor: pointer !important;
}
#editor #figureMode .fig-image-host.fig-hover-grab,
#editor #figureMode .fig-image-host.fig-hover-grab #figPreviewSvg,
#editor #figureMode .fig-image-host.fig-hover-grab #figAnnotationCanvas {
  cursor: grab !important;
}
#editor #figureMode .fig-svg-select-overlay {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}
#editor #figureMode .fig-svg-select-outline {
  opacity: 0.9;
  stroke-dasharray: 3 3;
  filter: drop-shadow(0 0 2px rgba(0, 114, 178, 0.3));
}
#editor #figureMode .fig-svg-select-rail {
  opacity: 0.95;
}
#editor #figureMode .fig-svg-hover-overlay {
  z-index: 4;
  opacity: 0.76;
}
#editor #figureMode .fig-svg-hover-overlay .fig-svg-select-outline {
  stroke-dasharray: 3 4;
  filter: drop-shadow(0 0 1px rgba(0, 114, 178, 0.22));
}
#editor #figureMode .fig-svg-hover-overlay .fig-svg-hover-row-label {
  pointer-events: none;
}
#editor #figureMode .fig-svg-hover-overlay .fig-svg-hover-row-label rect {
  fill: rgba(27, 31, 35, 0.88);
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
#editor #figureMode .fig-svg-hover-overlay .fig-svg-hover-row-label text {
  fill: #ffffff;
  font-family: "Source Sans 3", Inter, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}
#editor #figureMode .fig-svg-multi-selection-overlay {
  z-index: 6;
}
#editor #figureMode .fig-svg-multi-resize-frame {
  fill: rgba(0, 114, 178, 0.025);
  stroke: rgba(0, 114, 178, 0.84);
  stroke-width: 1.25;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(0, 114, 178, 0.22));
  pointer-events: none;
}
#editor #figureMode .fig-svg-multi-resize-handle-group {
  pointer-events: all;
}
#editor #figureMode .fig-svg-multi-resize-handle-group[data-sem-multi-resize-handle="n"],
#editor #figureMode .fig-svg-multi-resize-handle-group[data-sem-multi-resize-handle="s"] {
  cursor: ns-resize;
}
#editor #figureMode .fig-svg-multi-resize-handle-group[data-sem-multi-resize-handle="e"],
#editor #figureMode .fig-svg-multi-resize-handle-group[data-sem-multi-resize-handle="w"] {
  cursor: ew-resize;
}
#editor #figureMode .fig-svg-multi-resize-handle-group[data-sem-multi-resize-handle="nw"],
#editor #figureMode .fig-svg-multi-resize-handle-group[data-sem-multi-resize-handle="se"] {
  cursor: nwse-resize;
}
#editor #figureMode .fig-svg-multi-resize-handle-group[data-sem-multi-resize-handle="ne"],
#editor #figureMode .fig-svg-multi-resize-handle-group[data-sem-multi-resize-handle="sw"] {
  cursor: nesw-resize;
}
#editor #figureMode .fig-svg-multi-resize-handle {
  fill: #ffffff;
  stroke: #0072B2;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 2px rgba(0, 114, 178, 0.26));
}
#editor #figureMode .fig-svg-multi-resize-tick {
  stroke: #0072B2;
  stroke-width: 1.15;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
#editor #figureMode .fig-svg-drag-guide-overlay {
  z-index: 6;
}
#editor #figureMode .fig-svg-drag-guide-line {
  opacity: 0.78;
  stroke: #0072B2;
  stroke-width: 1.15;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}
#editor #figureMode .fig-svg-drag-preview {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  border-radius: 7px;
  box-sizing: border-box;
}
#editor #figureMode .fig-svg-drag-origin {
  border: 1.5px dashed rgba(49, 74, 108, 0.38);
  background: rgba(255, 255, 255, 0.18);
}
#editor #figureMode .fig-svg-drag-live {
  border: 2px dashed rgba(0, 114, 178, 0.9);
  box-shadow: 0 0 0 2px rgba(0, 114, 178, 0.08);
}
#editor #figureMode .fig-svg-anchor-dot {
  fill: #fff;
  stroke: #0072B2;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(0, 114, 178, 0.28));
}
#editor #figureMode .fig-svg-arrow-handle {
  fill: #ffffff;
  stroke: #0072B2;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(0, 114, 178, 0.32));
}
#editor #figureMode .fig-svg-arrow-handle-end {
  fill: #e8f4ff;
}
#editor #figureMode .fig-svg-hover-overlay .fig-svg-anchor-dot {
  opacity: 0.82;
}
#editor #figureMode .fig-svg-sel {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  border: 1.5px solid var(--ed-data);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
}
#editor #figureMode .fig-svg-sel-focus {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  border: 1.5px dashed var(--ed-data);
  border-radius: 7px;
  background: rgba(0, 114, 178, 0.08);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85);
}
#editor #figureMode .fig-svg-sel-tag {
  position: absolute;
  top: -10px;
  left: -1px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--ed-data);
  color: #fff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}
/* Direct-manipulation floating toolbar (appears below the clicked element) */
.fig-direct-tb {
  position: absolute;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  max-width: calc(100vw - 16px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 7px;
  background: #fff;
  border: 1px solid var(--ed-border-strong, #d6d6d6);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(20,30,45,0.16), 0 2px 8px rgba(20,30,45,0.08);
  font-family: 'DM Sans', -apple-system, system-ui, sans-serif;
  white-space: nowrap;
  scrollbar-width: none;
}
.fig-direct-tb::-webkit-scrollbar { display: none; }
.fig-direct-tb > * { flex: 0 0 auto; }
.fig-direct-tb .fig-dtb-kind {
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ed-text-muted, #a0a0a0); font-weight: 600; padding-right: 2px;
}
.fig-direct-tb .fig-dtb-btn {
  appearance: none; border: 1px solid var(--ed-border, #ebebeb); background: #fff;
  font: inherit; font-size: 11.5px; padding: 5px 10px; border-radius: 7px; cursor: pointer;
  color: var(--ed-text-pri, #1a1a1a);
}
.fig-direct-tb .fig-dtb-btn:hover { border-color: var(--ed-border-strong, #d6d6d6); }
.fig-direct-tb .fig-dtb-ic {
  appearance: none; border: 1px solid var(--ed-border, #ebebeb); background: #fff;
  width: 30px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 12px;
  color: var(--ed-text-sec, #6e6e6e); display: inline-flex; align-items: center; justify-content: center;
}
.fig-direct-tb .fig-dtb-ic svg { display: block; }
.fig-direct-tb .fig-dtb-ic.on { background: var(--ed-data-soft, rgba(45,74,110,0.08)); border-color: var(--ed-data-line, rgba(45,74,110,0.45)); color: var(--ed-data, #2d4a6e); }
.fig-direct-tb input.fig-dtb-color {
  width: 28px; height: 28px; padding: 0; border: 1px solid var(--ed-border-strong, #d6d6d6);
  border-radius: 7px; background: none; cursor: pointer;
}
.fig-direct-tb button.fig-dtb-color {
  width: 28px; height: 28px; padding: 0; border: 1px solid var(--ed-border-strong, #d6d6d6);
  border-radius: 7px; background: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.fig-direct-tb button.fig-dtb-color:hover { border-color: var(--ed-data, #2d4a6e); }
.fig-dtb-color-dot { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.18); display: block; }
.fig-color-pop {
  position: fixed; z-index: 10001; display: flex; gap: 7px; padding: 9px 10px;
  background: #fff; border: 1px solid var(--ed-border, #ebebeb); border-radius: 11px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.fig-color-sw {
  width: 22px; height: 22px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.12); transition: transform 0.08s ease;
}
.fig-color-sw:hover { transform: scale(1.14); box-shadow: 0 0 0 2px rgba(45, 74, 110, 0.18); }
.fig-svg-hover {
  position: fixed; z-index: 9998; pointer-events: none; border-radius: 5px;
  border: 1.5px solid rgba(45, 74, 110, 0.55); background: rgba(45, 74, 110, 0.07);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}
#editor #figureMode #figPreviewSvg .fig-svg-hover-target {
  filter: drop-shadow(0 0 2px rgba(0, 114, 178, 0.58));
}
.fig-direct-tb .fig-dtb-note { font-size: 10.5px; color: var(--snap, #c2703d); }
.fig-direct-tb .fig-dtb-seg { display: inline-flex; border: 1px solid var(--ed-border, #ebebeb); border-radius: 7px; overflow: hidden; }
.fig-direct-tb .fig-dtb-seg button {
  appearance: none; border: 0; border-right: 1px solid var(--ed-border, #ebebeb); background: #fff;
  font: inherit; font-size: 11px; padding: 5px 9px; cursor: pointer; color: var(--ed-text-sec, #6e6e6e);
}
.fig-direct-tb .fig-dtb-seg button:last-child { border-right: 0; }
.fig-direct-tb .fig-dtb-seg button.on { background: var(--ed-data-soft, rgba(45,74,110,0.08)); color: var(--ed-data, #2d4a6e); }
.fig-direct-tb input.fig-dtb-range { width: 64px; accent-color: var(--ed-data, #2d4a6e); }
.fig-direct-tb input.fig-dtb-font-range { width: 80px; }
.fig-direct-tb input.fig-dtb-line-range { width: 58px; }
.fig-direct-tb input.fig-dtb-point-range { width: 58px; }
.fig-direct-tb input.fig-dtb-node-size-range { width: 62px; }
.fig-direct-tb input.fig-dtb-node-text-range { width: 70px; }
.fig-direct-tb input.fig-dtb-diagram-size-range { width: 62px; }
.fig-direct-tb input.fig-dtb-opacity-range { width: 54px; }
.fig-direct-tb .fig-dtb-value {
  min-width: 38px;
  padding: 0 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--ed-text-sec, #6e6e6e);
  text-align: right;
}
.fig-direct-tb .fig-dtb-reset {
  width: 28px;
  height: 28px;
  padding: 0;
  flex: 0 0 auto;
}
.fig-direct-tb .fig-dtb-point-value { min-width: 34px; }
.fig-direct-tb .fig-dtb-line-value { min-width: 34px; }
.fig-direct-tb .fig-dtb-opacity-value { min-width: 32px; }
.fig-direct-tb .fig-dtb-node-size-value { min-width: 44px; }
.fig-direct-tb .fig-dtb-node-text-value { min-width: 38px; }
.fig-direct-tb .fig-dtb-shapes {
  display: inline-flex;
  border: 1px solid var(--ed-border, #ebebeb);
  border-radius: 7px;
  overflow: hidden;
  background: #fff;
}
.fig-direct-tb .fig-dtb-node-shapes {
  display: inline-flex;
  border: 1px solid var(--ed-border, #ebebeb);
  border-radius: 7px;
  overflow: hidden;
  background: #fff;
}
.fig-direct-tb .fig-dtb-shape-btn {
  appearance: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-right: 1px solid var(--ed-border, #ebebeb);
  background: #fff;
  color: var(--ed-text-sec, #6e6e6e);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.fig-direct-tb .fig-dtb-shape-btn:last-child { border-right: 0; }
.fig-direct-tb .fig-dtb-shape-btn:hover,
.fig-direct-tb .fig-dtb-shape-btn.on {
  background: var(--ed-data-soft, rgba(45,74,110,0.08));
  color: var(--ed-data, #2d4a6e);
}
.fig-direct-tb .fig-dtb-shape-icon {
  display: block;
  width: 12px;
  height: 12px;
  background: currentColor;
}
.fig-direct-tb .fig-dtb-shape-circle { border-radius: 50%; }
.fig-direct-tb .fig-dtb-shape-square { border-radius: 2px; }
.fig-direct-tb .fig-dtb-shape-diamond { transform: rotate(45deg); border-radius: 1px; }
.fig-direct-tb .fig-dtb-shape-triangle {
  width: 0;
  height: 0;
  background: transparent;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 13px solid currentColor;
}
.fig-direct-tb .fig-dtb-node-shape-icon {
  display: block;
  width: 14px;
  height: 12px;
  border: 2px solid currentColor;
  background: transparent;
}
.fig-direct-tb .fig-dtb-node-shape-rect { border-radius: 1px; }
.fig-direct-tb .fig-dtb-node-shape-rounded { border-radius: 5px; }
.fig-direct-tb .fig-dtb-node-shape-oval { border-radius: 50%; }
.fig-direct-tb .fig-dtb-node-shape-note {
  position: relative;
  border-radius: 2px;
}
.fig-direct-tb .fig-dtb-node-shape-note::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 5px;
  height: 5px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  background: #fff;
}
.fig-direct-tb select.fig-dtb-select {
  appearance: auto; border: 1px solid var(--ed-border, #ebebeb); background: #fff;
  font: inherit; font-size: 11.5px; padding: 4px 5px; border-radius: 7px; cursor: pointer;
  color: var(--ed-text-pri, #1a1a1a);
}
.fig-direct-tb .fig-dtb-density-select { width: 94px; }
.fig-direct-tb .fig-dtb-heatmap-select { width: 96px; }
.fig-direct-tb .fig-dtb-heatmap-palette { width: 126px; }
.fig-direct-tb .fig-dtb-edge-style-select { width: 92px; }
.fig-direct-tb .fig-dtb-edge-route-select { width: 112px; }
input.fig-inline-edit {
  position: absolute; z-index: 65; font-family: 'DM Sans', -apple-system, system-ui, sans-serif;
  border: 1.5px solid var(--ed-data, #2d4a6e); border-radius: 4px; padding: 1px 5px;
  background: #fff; outline: none; box-shadow: 0 0 0 3px var(--ed-data-soft, rgba(45,74,110,0.08));
  color: var(--ed-text-pri, #1a1a1a);
}
#editor #figureMode .fig-image-host.is-stats-figure[data-canvas-size="wide"] img,
#editor #figureMode .fig-image-host.is-stats-figure[data-canvas-size="wide"] > svg {
  max-height: min(48vh, 540px);
}
#editor #figureMode .fig-image-host.is-stats-figure[data-canvas-size="presentation"] img,
#editor #figureMode .fig-image-host.is-stats-figure[data-canvas-size="presentation"] > svg {
  max-height: min(54vh, 620px);
}
#editor #figureMode .fig-image-host.multi-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
#editor #figureMode .fig-image-host.multi-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
#editor #figureMode .fig-image-host.multi-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
#editor #figureMode .multi-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#editor #figureMode .multi-cell-label {
  font-family: 'Charter', 'Iowan Old Style', 'Times New Roman', Times, serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--ed-text-pri);
  margin-bottom: 6px;
  align-self: flex-start;
}
#editor #figureMode .multi-cell img,
#editor #figureMode .multi-cell svg {
  max-width: 100%;
  height: auto;
  max-height: 240px;
}

/* ── FORMAT SLIDE-OUT (#figFormatPanel) ────────────────────────── */
/* TODO(v9-cleanup): merge into shared #settingsPanel.
   See docs/FIGURES-PORT-HANDOFF.md "Cleanup follow-ups". */
#editor .fig-format-panel {
  width: 384px;
  display: block;
  background: var(--ed-bg);
  overflow-y: auto;
  overflow-x: hidden;
}
#editor .fig-format-panel.is-stats-figure #figCanvasMarginRow {
  display: none;
}
@media (max-width: 520px) {
  #editor .fig-format-panel { width: calc(100vw - 16px); }
}
#editor .fig-format-head {
  padding: 14px 18px 11px;
  border-bottom: 1px solid var(--ed-border-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  background: var(--ed-bg);
  position: sticky;
  top: 0;
  z-index: 2;
}
#editor .fig-format-head-copy {
  flex: 1 1 auto;
  min-width: 0;
}
#editor .fig-format-kicker {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ed-text-muted);
  font-weight: 500;
  margin-bottom: 8px;
}
#editor .fig-format-title {
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ed-text-pri);
  font-weight: 600;
  text-transform: none;
}
#editor .fig-format-sub {
  margin-top: 6px;
  color: var(--ed-text-muted);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1.38;
}
#editor .fig-format-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--ed-text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  margin-top: 2px;
}
#editor .fig-format-close:hover { color: var(--ed-text-pri); }
#editor .fig-format-context-nav {
  flex: 0 0 100%;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-top: 1px;
  scrollbar-width: none;
}
#editor .fig-format-context-nav::-webkit-scrollbar {
  display: none;
}
#editor .fig-format-panel:not(.is-stats-figure) .fig-format-context-nav {
  display: none;
}
#editor .fig-format-context-btn {
  flex: 1 0 auto;
  min-width: 0;
  border: 1px solid var(--ed-border);
  border-radius: 6px;
  background: white;
  color: var(--ed-text-sec);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  line-height: 1;
  padding: 6px 7px;
}
#editor .fig-format-context-btn.is-context-unavailable {
  display: none;
}
#editor .fig-format-context-icon {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  color: currentColor;
  opacity: 0.75;
  box-sizing: border-box;
}
#editor .fig-format-context-btn[data-fig-format-context="all"] .fig-format-context-icon {
  border: 1.2px solid currentColor;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 3px rgba(31,31,31,0.04),
    0 0 0 1px rgba(31,31,31,0.02);
}
#editor .fig-format-context-btn[data-fig-format-context="layout"] .fig-format-context-icon {
  border: 1.2px solid currentColor;
  border-radius: 3px;
  background:
    linear-gradient(currentColor, currentColor) 50% 0 / 1px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat;
}
#editor .fig-format-context-btn[data-fig-format-context="data"] .fig-format-context-icon {
  background:
    linear-gradient(currentColor, currentColor) 1px 7px / 2px 4px no-repeat,
    linear-gradient(currentColor, currentColor) 5px 4px / 2px 7px no-repeat,
    linear-gradient(currentColor, currentColor) 9px 2px / 2px 9px no-repeat;
  border-bottom: 1.2px solid currentColor;
}
#editor .fig-format-context-btn[data-fig-format-context="labels"] .fig-format-context-icon {
  border: 1.2px solid currentColor;
  border-radius: 4px 4px 4px 1px;
  transform: rotate(-6deg);
}
#editor .fig-format-context-btn[data-fig-format-context="annotation"] .fig-format-context-icon {
  background:
    linear-gradient(currentColor, currentColor) 1px 9px / 9px 1.2px no-repeat,
    linear-gradient(currentColor, currentColor) 1px 5px / 1.2px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 9px 5px / 1.2px 5px no-repeat;
}
#editor .fig-format-context-btn[data-fig-format-context="color"] .fig-format-context-icon {
  border-radius: 50%;
  background: conic-gradient(#0072B2 0 34%, #009E73 34% 67%, #D55E00 67% 100%);
  box-shadow: inset 0 0 0 1px rgba(31,31,31,0.15);
  opacity: 0.9;
}
#editor .fig-format-context-btn:hover {
  border-color: var(--ed-border-strong);
}
#editor .fig-format-context-btn.active {
  background: rgba(45,74,110,0.08);
  border-color: rgba(45,74,110,0.45);
  color: var(--ed-data);
}
#editor .fig-format-panel .is-context-hidden {
  display: none !important;
}
#editor .fig-format-section {
  padding: 15px 18px;
  border-bottom: 1px solid var(--ed-border-soft);
}
#editor .fig-format-section:last-child { border-bottom: none; }
#editor .stats-figure-format-section {
  padding: 0;
}
#editor .stats-figure-format-section > .fig-format-section-label {
  display: none;
}
#editor .fig-format-subsection {
  padding: 15px 18px;
  border-bottom: 1px solid var(--ed-border-soft);
}
#editor .fig-format-subsection:last-child {
  border-bottom: none;
}
#editor .fig-format-subsection-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ed-text-muted);
  margin-bottom: 12px;
  font-weight: 500;
}
#editor .fig-format-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ed-text-muted);
  margin-bottom: 12px;
  font-weight: 500;
}
#editor .fig-format-subsection-label::before,
#editor .fig-format-section-label::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  color: currentColor;
  opacity: 0.72;
  box-sizing: border-box;
}
#editor .fig-format-subsection[data-section="layout"] > .fig-format-subsection-label::before,
#editor .fig-format-section[data-section="layout"] > .fig-format-section-label::before {
  border: 1.3px solid currentColor;
  border-radius: 3px;
  background:
    linear-gradient(currentColor, currentColor) 50% 0 / 1px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat;
}
#editor .fig-format-subsection[data-section="data"] > .fig-format-subsection-label::before,
#editor .fig-format-section[data-section="data"] > .fig-format-section-label::before {
  background:
    linear-gradient(currentColor, currentColor) 1px 7px / 2px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 5px 4px / 2px 8px no-repeat,
    linear-gradient(currentColor, currentColor) 9px 2px / 2px 10px no-repeat;
  border-bottom: 1.3px solid currentColor;
}
#editor .fig-format-subsection[data-section="labels"] > .fig-format-subsection-label::before,
#editor .fig-format-section[data-section="labels"] > .fig-format-section-label::before {
  border: 1.3px solid currentColor;
  border-radius: 4px 4px 4px 1px;
  transform: rotate(-6deg);
  background:
    radial-gradient(circle at 3px 3px, currentColor 0 1.3px, transparent 1.4px);
}
#editor .fig-format-subsection[data-section="color"] > .fig-format-subsection-label::before,
#editor .fig-format-section[data-section="color"] > .fig-format-section-label::before {
  border-radius: 50%;
  background: conic-gradient(#0072B2 0 34%, #009E73 34% 67%, #D55E00 67% 100%);
  box-shadow: inset 0 0 0 1px rgba(31,31,31,0.16);
  opacity: 0.88;
}
#editor .fig-format-section[data-section="annotation"] > .fig-format-section-label::before {
  background:
    linear-gradient(currentColor, currentColor) 1px 10px / 11px 1.3px no-repeat,
    linear-gradient(currentColor, currentColor) 1px 6px / 1.3px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 11px 6px / 1.3px 5px no-repeat;
}
#editor .fig-format-section[data-section="output"] > .fig-format-section-label::before {
  border: 1.3px solid currentColor;
  border-radius: 3px;
  box-shadow: inset 0 0 0 3px rgba(31,31,31,0.06);
}
#editor .fig-format-section[data-section="treatment"] > .fig-format-section-label::before {
  border-radius: 3px;
  background:
    linear-gradient(90deg, #0072B2 0 33%, #56B4E9 33% 66%, #2D4A6E 66% 100%) 0 0 / 100% 4px no-repeat,
    linear-gradient(90deg, #5a5a5a 0 33%, #a2a2a2 33% 66%, #444 66% 100%) 0 5px / 100% 4px no-repeat,
    linear-gradient(90deg, #111 0 33%, #777 33% 66%, #ddd 66% 100%) 0 10px / 100% 3px no-repeat;
  box-shadow: 0 0 0 1px rgba(31,31,31,0.08);
  opacity: 0.92;
}
#editor .fig-format-section-intro {
  font-size: 11.5px;
  color: var(--ed-text-muted);
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  line-height: 1.42;
  margin: -2px 0 12px;
}
#editor .fig-format-section-empty {
  font-size: 11px;
  color: var(--ed-text-subtle);
  font-style: italic;
}
#editor .fig-format-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 10px;
}
#editor .fig-format-row:last-child { margin-bottom: 0; }
#editor .fig-format-row-stacked {
  display: block;
}
#editor .fig-format-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
#editor .fig-format-row-stacked .fig-format-row-head {
  display: block;
  margin-bottom: 0;
}
#editor .fig-format-row-label {
  font-size: 12px;
  color: var(--ed-text-sec);
  flex: 1;
}
#editor .fig-format-row-stacked .fig-format-row-label {
  display: block;
  margin-bottom: 6px;
}
#editor .fig-format-text {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--ed-border);
  border-radius: 6px;
  padding: 6px 8px;
  color: var(--ed-text-pri);
  background: white;
  font-size: 12px;
}
#editor .fig-format-text:focus {
  outline: none;
  border-color: var(--ed-border-strong);
}
#editor .fig-format-row-note {
  margin: 5px 0 0;
  font-size: 11px;
  color: var(--ed-text-muted);
  line-height: 1.38;
}
#editor .fig-format-pill-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
#editor .fig-format-pill {
  padding: 5px 8px;
  border: 1px solid var(--ed-border);
  background: white;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.1;
  color: var(--ed-text-sec);
  cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
#editor .fig-format-pill:hover { border-color: var(--ed-border-strong); }
#editor .fig-format-pill.active {
  background: rgba(45,74,110,0.08);
  color: var(--ed-data);
  border-color: rgba(45,74,110,0.45);
}
#editor .fig-format-pill:disabled,
#editor .fig-format-pill.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
#editor .fig-format-swatch-group {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
#editor .fig-format-swatch {
  width: 27px;
  height: 27px;
  border: 1px solid rgba(31,31,31,0.18);
  border-radius: 7px;
  cursor: pointer;
  padding: 0;
}
#editor .fig-format-swatch.is-white {
  background:
    linear-gradient(135deg, transparent 47%, rgba(31,31,31,0.14) 48%, rgba(31,31,31,0.14) 52%, transparent 53%),
    #fff !important;
}
#editor .fig-format-swatch.active {
  outline: 2px solid rgba(45,74,110,0.55);
  outline-offset: 2px;
}
#editor .stats-figure-format-section .fig-format-row-head {
  align-items: flex-start;
}
#editor .fig-format-palette .fig-format-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#editor .fig-color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
}
#editor .stats-fig-row-list {
  display: grid;
  gap: 4px;
}
#editor .stats-fig-row-empty {
  color: var(--ed-text-muted);
  font-size: 11px;
  padding: 4px 0;
}
#editor .stats-fig-row-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border: 1px solid var(--ed-border);
  border-radius: 5px;
  background: white;
  color: var(--ed-text-sec);
  font-size: 11px;
  text-align: left;
}
#editor .stats-fig-row-item:hover { border-color: var(--ed-border-strong); }
#editor .stats-fig-row-item.is-hidden {
  opacity: 0.58;
}
#editor .stats-fig-row-toggle,
#editor .stats-fig-row-icon-btn {
  color: inherit;
  cursor: pointer;
}
#editor .stats-fig-row-toggle {
  flex: 0 0 auto;
  min-width: 34px;
  height: 20px;
  border: 1px solid var(--ed-border);
  border-radius: 4px;
  background: var(--ed-hover-bg);
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#editor .stats-fig-row-toggle .row-eye {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--ed-text-muted);
  flex: 0 0 auto;
}
#editor .stats-fig-row-toggle:hover {
  border-color: var(--ed-border-strong);
  color: var(--ed-text-pri);
}
#editor .stats-fig-row-item.is-hidden .stats-fig-row-toggle {
  background: white;
}
#editor .stats-fig-row-item.is-hidden .row-label {
  text-decoration: line-through;
}
#editor .stats-fig-row-item .row-label {
  display: block;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#editor .stats-fig-row-role {
  flex: 0 0 auto;
  min-width: 40px;
  padding: 2px 5px;
  border: 1px solid var(--ed-border);
  border-radius: 4px;
  color: var(--ed-text-muted);
  background: var(--ed-bg);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  line-height: 1.1;
  text-align: center;
}
#editor .stats-fig-row-role-control {
  background: rgba(45,74,110,0.05);
}
#editor .stats-fig-row-icon-btn {
  border: 0;
  background: transparent;
  padding: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ed-text-muted);
  border-radius: 4px;
  flex: 0 0 auto;
}
#editor .stats-fig-row-icon-btn:hover:not(:disabled) {
  color: var(--ed-text-pri);
  background: var(--ed-hover-bg);
}
#editor .stats-fig-row-icon-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}
#editor .stats-fig-row-label-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--ed-border-strong);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  color: var(--ed-text-pri);
}

/* Color treatment 2×2 variant grid */
#editor .fig-format-panel .variant-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
#editor .fig-format-panel .variant {
  border: 1px solid var(--ed-border);
  border-radius: 7px;
  background: white;
  padding: 7px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s;
}
#editor .fig-format-panel .variant.active {
  border-color: rgba(45,74,110,0.45);
  background: rgba(45,74,110,0.08);
}
#editor .fig-format-panel .variant:hover:not(.active) { border-color: var(--ed-border-strong); }
#editor .fig-format-panel .variant-thumb {
  width: 100%;
  height: 42px;
  background: var(--ed-bg);
  border: 1px solid rgba(31,31,31,0.08);
  border-radius: 6px;
  margin-bottom: 7px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#editor .fig-format-panel .variant-thumb.empty::before {
  content: "";
  width: 36px;
  height: 24px;
  border: 1px solid var(--ed-border-strong);
  border-radius: 3px;
  background:
    linear-gradient(135deg, transparent 58%, rgba(31,31,31,0.18) 59%, rgba(31,31,31,0.18) 62%, transparent 63%),
    linear-gradient(160deg, transparent 45%, rgba(31,31,31,0.12) 46%, rgba(31,31,31,0.12) 50%, transparent 51%);
}
#editor .fig-format-panel .variant-thumb img,
#editor .fig-format-panel .variant-thumb svg {
  width: 92%;
  height: 92%;
  object-fit: contain;
}
#editor .fig-format-panel .variant-thumb.gray img,
#editor .fig-format-panel .variant-thumb.gray svg { filter: grayscale(1); }
#editor .fig-format-panel .variant-thumb.bw img,
#editor .fig-format-panel .variant-thumb.bw svg { filter: grayscale(1) contrast(1.6) brightness(1.05); }
#editor .fig-format-panel .variant-thumb.cb img,
#editor .fig-format-panel .variant-thumb.cb svg { filter: hue-rotate(150deg) saturate(0.75); }
#editor .fig-format-panel .variant-label {
  font-size: 12px;
  color: var(--ed-text-pri);
  font-weight: 600;
  line-height: 1.2;
}
#editor .fig-format-panel .variant.active .variant-label { color: var(--ed-data); }
#editor .fig-format-panel .variant-note {
  margin-top: 3px;
  font-size: 10.75px;
  line-height: 1.3;
  color: var(--ed-text-muted);
}
#editor .fig-format-footnote {
  display: flex;
  gap: 10px;
  padding: 12px 22px 16px;
  color: var(--ed-text-muted);
  font-size: 11.5px;
  line-height: 1.45;
  border-top: 1px solid var(--ed-border-soft);
  background: rgba(31,31,31,0.015);
}
#editor .fig-format-footnote strong {
  color: var(--ed-text-sec);
  font-weight: 600;
}
#editor .fig-format-footnote-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 1px solid var(--ed-border-strong);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ed-text-muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  margin-top: 1px;
}

/* ════════════════════════════════════════════
   GLOBAL APP TOP BAR (lifted out of #hub / #editor)
   Single element shared by Library + Editor.
   This is what makes view-to-view switches feel stable — only the
   body content swaps, the chrome above stays put.
════════════════════════════════════════════ */

.app-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  z-index: 30;
  background: #ffffff;
  display: none;
  align-items: baseline;
  padding: 22px 32px 0;
  gap: 56px;
  box-sizing: border-box;
}
.app-topbar.visible { display: flex; }
.app-topbar .lib-brand {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  line-height: 1;
  cursor: pointer;
}
.app-topbar .lib-brand em { font-style: italic; font-weight: 500; }
.app-topbar .lib-topbar-spacer { flex: 1; }
.app-topbar .ch-tabs {
  display: flex;
  gap: 28px;
  align-items: baseline;
  position: relative;
}
.app-topbar .ch-tab {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-weight: 400;
  color: #a0a0a0;
  cursor: pointer;
  padding-bottom: 4px;
  line-height: 1.2;
  border: none;
  background: transparent;
  transition: color 0.08s ease;
  letter-spacing: -0.005em;
}
.app-topbar .ch-tab .num {
  font-style: italic;
  color: #c5c5c5;
  margin-right: 6px;
  font-size: 12.5px;
}
.app-topbar .ch-tab:hover { color: #1a1a1a; }
.app-topbar .ch-tab.active { color: #1a1a1a; }
.app-topbar .ch-tab.active .num { color: #6e6e6e; }
/* Single sliding underline that animates between active tabs. JS sets
   left/width from the active .ch-tab's box; CSS handles the motion. */
.app-topbar .ch-tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 0;
  background: #1a1a1a;
  transform: translateX(0);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              width 200ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 120ms ease;
  pointer-events: none;
  opacity: 0;
}
.app-topbar .ch-tab-indicator.visible { opacity: 1; }
.app-topbar .lib-avatar-wrap { position: relative; }
.app-topbar .lib-avatar {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: #6e6e6e;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  border: none;
  background: transparent;
  transition: color 0.12s;
}
.app-topbar .lib-avatar:hover { color: #1a1a1a; }
.app-topbar .lib-avatar-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: #ffffff;
  border: 1px solid #ebebeb;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  padding: 6px;
  display: none;
  z-index: 50;
}
.app-topbar .lib-avatar-menu.open { display: block; }
.app-topbar .lib-avatar-menu-info {
  padding: 8px 10px;
  font-size: 12.5px;
  color: #a0a0a0;
  border-bottom: 1px solid #f3f3f3;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-topbar .lib-avatar-menu-info:empty { display: none; }
.app-topbar .lib-avatar-menu-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #1a1a1a;
  cursor: pointer;
  line-height: 1.3;
  transition: background 0.12s;
}
.app-topbar .lib-avatar-menu-btn:hover { background: #f5f5f5; }

/* Reserve space below the fixed top bar when on Library or Editor.
   */
#hub.view.on,
#editor.view.on {
  padding-top: 64px;
  box-sizing: border-box;
}
/* Library and Editor are height-constrained to the viewport — the
   100vh becomes the effective frame, and padding-top: 64px reserves
   room for the topbar inside that frame. */

/* ════════════════════════════════════════════
   STATS EDITOR ALIGNMENT
   Keeps Result Cards on the same compact editor system as Tables/Figures.
════════════════════════════════════════════ */

#editor #statsMode {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--ed-bg);
}
#editor #statsMode[style*="display:none"],
#editor #statsMode[style*="display: none"] {
  display: none !important;
}
#editor #statsMode .stats-card-view {
  flex: 1;
  height: auto;
  min-height: 0;
  background: var(--ed-bg);
}
#editor #statsMode .doc-bar {
  min-height: 60px;
  padding: 13px 32px;
  gap: 10px;
}
#editor #statsMode .doc-breadcrumb {
  max-width: none;
}
#editor #statsMode .doc-title {
  letter-spacing: 0;
}
#editor #statsMode .doc-btn svg:not(.chev-icon) {
  width: 14px;
  height: 14px;
  color: currentColor;
  flex-shrink: 0;
}
#editor #statsMode .doc-btn-count {
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 8px;
  border: 1px solid var(--ed-border);
  background: var(--ed-tint);
  color: var(--ed-text-sec);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-left: 1px;
}
#editor #statsMode .editor-body {
  padding: 28px 0 64px;
  /* Reserve scrollbar gutter even when no scrollbar is needed, so resize
     never flips the scrollbar on/off at content-height thresholds. Without
     this, a few pixels of content height oscillation during resize causes
     the scrollbar to appear/disappear, which shifts the entire card area
     horizontally each frame — reads as flashing. */
  scrollbar-gutter: stable;
}
#editor #statsMode .paper {
  max-width: 820px;
  padding: 0 48px 48px;
}
#editor #statsMode .stats-paper-options {
  margin-bottom: 16px;
}
#editor #statsMode .stats-card-name-form {
  margin-bottom: 18px;
}
#editor #statsMode .stats-card-name-form .paper-form-row {
  grid-template-columns: auto minmax(0, 1fr);
}
#editor #statsMode .stats-card-name-form .paper-form-input {
  min-width: 0;
}
/* Empty state for the Stats Card preview — mirrors the Tables/Figures
   ".paper-preview-empty" look: no dashed slot, no grey fill, just a
   quiet italic line of guidance so the eye reads it as "the card lands
   here when ready" rather than "this slot is broken/empty". */
#editor #statsCardEditor.stats-card-editor-placeholder {
  display: block;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  min-height: 0;
}
#editor #statsCardEditor.stats-card-editor-placeholder .placeholder {
  margin: 0 auto;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ed-text-muted);
  text-align: center;
  padding: 48px 24px;
  max-width: 520px;
}
#editor #statsCardEditor.stats-card-editor-placeholder .placeholder code {
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-style: normal;
  font-size: 12.5px;
  color: var(--ed-text-pri);
  background: var(--ed-tint);
  padding: 1px 6px;
  border-radius: 3px;
}

#editor #statsMode .rcard {
  max-width: 100%;
  margin: 0 auto 24px;
  border: 1px solid var(--ed-border);
  border-radius: 8px;
  background: var(--ed-bg);
  box-shadow: none;
}
#editor #statsMode .rcard-head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--ed-border-soft);
  gap: 12px;
}
#editor #statsMode .rcard-type {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--ed-text-pri);
}
#editor #statsMode .rcard-id {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--ed-text-muted);
}
#editor #statsMode .rcard-call {
  padding: 11px 16px;
  background: var(--ed-source-bg);
  border-bottom: 1px solid var(--ed-border-soft);
  color: var(--ed-text-sec);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-gutter: stable;
}
#editor #statsMode .rcard-section {
  padding: 15px 16px;
  border-bottom: 1px solid var(--ed-border-soft);
}
#editor #statsMode .rcard-sectionlabel,
#editor #statsMode .stats-library-empty-example-label,
#editor #statsMode .source-meta-key,
#editor #statsMode .source-raw-summary,
#editor #statsMode .param-group-meta,
#editor #statsMode .fig-tool-label {
  letter-spacing: 0;
}
#editor #statsMode .rcard-sectionlabel {
  color: var(--ed-text-muted);
  font-size: 10.5px;
  margin-bottom: 10px;
}
#editor #statsMode .rcard-sectionlabel .meta {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ed-text-muted);
  font-size: 11.5px;
}
#editor #statsMode .source-copy-btn {
  border-color: var(--ed-text-pri);
  background: var(--ed-text-pri);
  color: var(--ed-bg);
}
#editor #statsMode .source-copy-btn:hover,
#editor #statsMode .source-copy-btn:focus-visible {
  border-color: #000;
  background: #000;
  color: var(--ed-bg);
}
#editor #statsMode .source-copy-btn.is-copied {
  border-color: var(--green, #2d5a27);
  background: var(--green, #2d5a27);
  color: var(--ed-bg);
}
#editor #statsMode .rcard-structural .rcard-inspect-toggle {
  border-color: var(--ed-border);
  background: var(--ed-bg);
  color: var(--ed-text-muted);
}
#editor #statsMode .rcard-structural .rcard-inspect-summary:hover .rcard-inspect-toggle,
#editor #statsMode .rcard-structural .rcard-inspect-summary:focus-visible .rcard-inspect-toggle {
  border-color: var(--ed-text-muted);
  background: var(--ed-source-bg);
  color: var(--ed-text-pri);
}
#editor #statsMode .rcard-structural .rcard-inspect-summary .rcard-sectionlabel {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  line-height: 1;
  margin-bottom: 0;
}
#editor #statsMode .rcard-structural .rcard-inspect-summary .rcard-sectionlabel .meta {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
#editor #statsMode .rcard-structural .fit-diagnostics-summary-copy {
  color: var(--ed-text-muted);
}
#editor #statsMode .rcard-structural .fit-diagnostic-banner {
  color: var(--ed-text-sec);
  background: var(--ed-source-bg);
  border-color: var(--ed-border-soft);
}
#editor #statsMode .source-script-edit {
  border-color: var(--ed-border);
  background: var(--ed-bg);
  color: var(--ed-text-sec);
}
#editor #statsMode .source-script-edit:hover,
#editor #statsMode .source-script-edit:focus-visible {
  border-color: var(--ed-text-muted);
  background: var(--ed-hover-bg);
  color: var(--ed-text-pri);
}
#editor #statsMode .rcard-fields {
  grid-template-columns: minmax(104px, 148px) 1fr;
  font-size: 13px;
}
#editor #statsMode .rcard-fields .k,
#editor #statsMode .rcard-fields .v .ci,
#editor #statsMode .rcard-fields .field-subkey {
  color: var(--ed-text-muted);
}
#editor #statsMode .rcard-fields .v,
#editor #statsMode .fit-value,
#editor #statsMode .param-table td {
  color: var(--ed-text-pri);
}
#editor #statsMode .rcard-formatted {
  border-radius: 8px;
  border-color: var(--ed-border);
  background: var(--ed-source-bg);
  color: var(--ed-text-pri);
  font-size: 14.5px;
}
#editor #statsMode .rcard-preview-section {
  background: linear-gradient(180deg, rgba(0,0,0,0.018), transparent 70%);
}
#editor #statsMode .rcard-preview-card {
  background: var(--ed-bg);
  border-color: var(--ed-border);
}
#editor #statsMode .rcard-report-segments {
  border-color: var(--ed-border);
  background: var(--ed-source-bg);
}
#editor #statsMode .rcard-report-segment {
  color: var(--ed-text-muted);
}
#editor #statsMode .rcard-report-segment:hover {
  color: var(--ed-text-pri);
}
#editor #statsMode .rcard-report-segment.active {
  background: var(--ed-bg);
  color: var(--ed-text-pri);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
#editor #statsMode .rcard-report-edited-badge {
  border-color: var(--ed-border);
  background: rgba(74,122,85,0.08);
  color: var(--ed-text-muted);
}
#editor #statsMode .rcard-report-action {
  border-color: var(--ed-border);
  background: var(--ed-bg);
  color: var(--ed-text-pri);
}
#editor #statsMode .rcard-report-action:hover {
  border-color: rgba(74,122,85,0.35);
  background: var(--ed-hover-bg);
  color: var(--ed-text-pri);
}
#editor #statsMode .rcard-report-action.active {
  border-color: var(--ed-text-pri);
  background: var(--ed-text-pri);
  color: var(--ed-bg);
}
#editor #statsMode .rcard-report-action:disabled,
#editor #statsMode .rcard-report-action:disabled:hover {
  border-color: var(--ed-border);
  background: var(--ed-bg);
  color: var(--ed-text-subtle);
}
#editor #statsMode .rcard-report-text {
  color: var(--ed-text-pri);
}
#editor #statsMode .rcard-report-text.is-editing {
  background: rgba(74,122,85,0.045);
}
#editor #statsMode .rcard-report-text:focus {
  box-shadow: inset 3px 0 0 rgba(74,122,85,0.36);
}
#editor #statsMode .rcard-table-note {
  border-color: var(--ed-border);
  background: var(--ed-source-bg);
  color: var(--ed-text-muted);
}
#editor #statsMode .rcard-table-scroll-cue {
  background: var(--ed-source-bg);
}
#editor #statsMode .rcard-table-scroll-cue::before {
  background: var(--ed-text-muted);
}
#editor #statsMode .rcard-result-table th {
  color: var(--ed-text-muted);
  border-bottom-color: var(--ed-border);
}
#editor #statsMode .rcard-result-table td {
  color: var(--ed-text-pri);
  border-bottom-color: var(--ed-border-soft);
}
#editor #statsMode .rcard-result-table .table-cell-text,
#editor #statsMode .rcard-result-table .table-cell-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
#editor #statsMode .rbtn-note {
  color: var(--ed-text-muted);
}
#editor #statsMode .rcard-actions,
#editor #statsMode .stats-methods-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--ed-source-bg);
  border-top: 1px solid var(--ed-border-soft);
}
#editor #statsMode .rbtn,
#editor #statsMode .stats-library-action,
#editor #statsMode .stats-library-clear {
  min-height: 32px;
  padding: 7px 11px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ed-text-sec);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
#editor #statsMode .rbtn:hover,
#editor #statsMode .stats-library-action:hover,
#editor #statsMode .stats-library-clear:hover {
  background: var(--ed-hover-bg);
  border-color: var(--ed-border);
  color: var(--ed-text-pri);
}
#editor #statsMode .rbtn.primary {
  background: var(--ed-text-pri);
  border-color: var(--ed-text-pri);
  color: var(--ed-bg);
}
#editor #statsMode .rbtn.primary:hover {
  background: #000;
  border-color: #000;
}
#editor #statsMode .rcard-context-actions {
  margin-top: 12px;
}
#editor #statsMode .rcard-action-group {
  gap: 8px;
}
#editor #statsMode .rbtn-prominent {
  background: var(--ed-text-pri);
  border-color: var(--ed-text-pri);
  color: var(--ed-bg);
}
#editor #statsMode .rbtn-prominent:hover {
  background: #000;
  border-color: #000;
  color: var(--ed-bg);
}
#editor #statsMode .rcard-structural .rbtn.rbtn-compact,
#editor #statsMode .rcard-structural .param-group-actions .rbtn:not(.param-group-table-btn-compact) {
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 11.5px;
  line-height: 1;
  gap: 6px;
}
#editor #statsMode .rcard-structural .param-group-actions .rbtn {
  border-color: var(--ed-text-pri);
  background: var(--ed-text-pri);
  color: var(--ed-bg);
}
#editor #statsMode .rcard-structural .param-group-actions .rbtn:hover,
#editor #statsMode .rcard-structural .param-group-actions .rbtn:focus-visible {
  background: #000;
  border-color: #000;
  color: var(--ed-bg);
}
#editor #statsMode .rcard-section-actions .rbtn {
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 7px;
  border-color: var(--ed-text-pri);
  background: var(--ed-text-pri);
  color: var(--ed-bg);
  font-size: 11.5px;
  gap: 6px;
}
#editor #statsMode .rcard-section-actions .rbtn:hover,
#editor #statsMode .rcard-section-actions .rbtn:focus-visible {
  background: #000;
  border-color: #000;
  color: var(--ed-bg);
}
#editor #statsMode .rbtn.rbtn-handoff-action,
#editor #statsMode .rcard-section-actions .rbtn.rbtn-handoff-action,
#editor #statsMode .rcard-structural .param-group-actions .rbtn.rbtn-handoff-action {
  min-height: 26px;
  padding: 5px 9px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--handoff-action) 8%, transparent);
  color: var(--handoff-action);
  box-shadow: none;
  gap: 6px;
}
#editor #statsMode .rbtn.rbtn-handoff-action:hover,
#editor #statsMode .rbtn.rbtn-handoff-action:focus-visible,
#editor #statsMode .rcard-section-actions .rbtn.rbtn-handoff-action:hover,
#editor #statsMode .rcard-section-actions .rbtn.rbtn-handoff-action:focus-visible,
#editor #statsMode .rcard-structural .param-group-actions .rbtn.rbtn-handoff-action:hover,
#editor #statsMode .rcard-structural .param-group-actions .rbtn.rbtn-handoff-action:focus-visible {
  background: color-mix(in srgb, var(--handoff-action) 15%, transparent);
  border-color: transparent;
  color: var(--ink);
  box-shadow: none;
  transform: translateY(-1px);
  text-decoration: none;
}
#editor #statsMode .rbtn.rbtn-handoff-action:hover .rbtn-handoff-label,
#editor #statsMode .rbtn.rbtn-handoff-action:focus-visible .rbtn-handoff-label,
#editor #statsMode .rcard-section-actions .rbtn.rbtn-handoff-action:hover .rbtn-handoff-label,
#editor #statsMode .rcard-section-actions .rbtn.rbtn-handoff-action:focus-visible .rbtn-handoff-label,
#editor #statsMode .rcard-structural .param-group-actions .rbtn.rbtn-handoff-action:hover .rbtn-handoff-label,
#editor #statsMode .rcard-structural .param-group-actions .rbtn.rbtn-handoff-action:focus-visible .rbtn-handoff-label {
  text-decoration: none;
}
@media (max-width: 640px) {
  .rcard-fields-label,
  .rcard-table-label,
  .rcard-structural-label {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .rcard-section-actions {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
  .rcard-structural .rcard-inspect-summary .rcard-model-detail-actions {
    width: auto;
    justify-content: flex-end;
    margin-left: auto;
  }
}
#editor #statsMode .git-sha,
#editor #statsMode .source-empty-hint code,
#editor #statsMode .stats-methods-pkg-row code {
  border-radius: 4px;
  border: 1px solid var(--ed-border);
  background: var(--ed-bg);
  color: var(--ed-text-sec);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

#editor #statsMode .stats-library-view {
  max-width: 100%;
  margin: 0 auto 24px;
  padding: 0;
}
#editor #statsMode .stats-library-head {
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--ed-border-soft);
}
#editor #statsMode .stats-library-title {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--ed-text-pri);
}
#editor #statsMode .stats-library-meta {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 12px;
  color: var(--ed-text-muted);
  margin-left: auto;
}
#editor #statsMode .stats-library-list {
  gap: 8px;
}
#editor #statsMode .stats-library-filters {
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
#editor #statsMode .stats-library-search,
#editor #statsMode .stats-library-type,
#editor #statsMode .stats-format-input {
  min-height: 32px;
  border: 1px solid var(--ed-border);
  border-radius: 8px;
  background: var(--ed-bg);
  color: var(--ed-text-pri);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12.5px;
}
#editor #statsMode .stats-library-search {
  padding: 7px 10px;
}
#editor #statsMode .stats-library-type,
#editor #statsMode .stats-format-input {
  padding: 6px 8px;
}
#editor #statsMode .stats-library-search:focus,
#editor #statsMode .stats-library-type:focus,
#editor #statsMode .stats-format-input:focus {
  border-color: var(--ed-border-strong);
  outline: none;
}
#editor #statsMode .stats-library-item {
  grid-template-columns: minmax(0, 1fr) auto auto 32px;
  gap: 12px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--ed-border);
  border-radius: 8px;
  background: var(--ed-bg);
  transition: background 0.12s, border-color 0.12s;
}
#editor #statsMode .stats-library-item:hover {
  border-color: var(--ed-border-strong);
  background: var(--ed-hover-bg);
}
#editor #statsMode .stats-library-item:active {
  transform: none;
}
#editor #statsMode .stats-library-item-name,
#editor #statsMode .stats-library-item-id {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
#editor #statsMode .stats-library-item-name {
  font-size: 12.5px;
  color: var(--ed-text-pri);
}
#editor #statsMode .stats-library-item-type,
#editor #statsMode .stats-library-item-date {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--ed-text-muted);
}
#editor #statsMode .stats-library-item-del {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--ed-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#editor #statsMode .stats-library-item-del:hover {
  background: rgba(184,73,58,0.06);
  border-color: rgba(184,73,58,0.25);
}
#editor #statsMode .stats-library-empty {
  min-height: 220px;
  padding: 40px 24px;
  border: 1px dashed var(--ed-border);
  border-radius: 8px;
  background: var(--ed-source-bg);
  color: var(--ed-text-muted);
  justify-content: center;
}
#editor #statsMode .stats-library-empty-compact {
  min-height: 120px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 13px;
}
#editor #statsMode .stats-library-empty-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--ed-text-pri);
}
#editor #statsMode .stats-library-empty-sub {
  max-width: 320px;
  margin: 0;
  color: var(--ed-text-muted);
}

#editor #statsMode .stats-methods-panel,
#editor #statsMode .stats-export-menu {
  border: 1px solid var(--ed-border);
  border-radius: 8px;
  background: var(--ed-bg);
  box-shadow: none;
}
#editor #statsMode .stats-methods-panel {
  margin: 0 0 16px;
}
#editor #statsMode .stats-methods-head {
  padding: 12px 14px;
  background: var(--ed-source-bg);
  border-bottom: 1px solid var(--ed-border-soft);
}
#editor #statsMode .stats-methods-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  letter-spacing: 0;
}
#editor #statsMode .stats-methods-meta,
#editor #statsMode .stats-methods-pkg-row,
#editor #statsMode .stats-methods-pkg-row .ver,
#editor #statsMode .stats-methods-pkg-row .cite {
  color: var(--ed-text-muted);
}
#editor #statsMode .stats-methods-body {
  color: var(--ed-text-pri);
}

#editor #statsMode .stats-stale-banner {
  max-width: 100%;
  margin: 0 0 16px;
  border-radius: 8px;
}
#editor #statsMode .stats-stale-banner {
  background: var(--ed-haz-bg);
  border-color: #ecdcc0;
}
#editor #statsMode .stats-stale-banner .stats-stale-dot { background: var(--ed-haz-soft); }
#editor #statsMode .stats-stale-msg {
  color: var(--ed-text-pri);
  font-family: var(--sans);
}

#editor #statsMode .source-meta-row {
  margin-bottom: 0;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid #e6e9e9;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#editor #statsMode .stats-source-origin {
  order: 1;
  padding: 2px 0 14px;
  border-bottom: 1px solid #e6e9e9;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ed-text-muted);
}
#editor #statsMode .stats-source-origin b {
  color: var(--ed-text-pri);
  font-weight: 650;
}
#editor #statsMode .source-meta-key {
  color: var(--ed-text-muted);
  margin-bottom: 6px;
  padding-top: 0;
  letter-spacing: 0.14em;
  font-weight: 600;
}
#editor #statsMode .source-meta-val,
#editor #statsMode .source-call {
  color: var(--ed-text-sec);
  min-width: 0;
}
#editor #statsMode .source-call {
  border-color: #dfe3e3;
  border-radius: 10px;
  background: #ffffff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.58;
  padding: 10px 12px;
}
#editor #statsMode .source-call.source-workbook-call {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  white-space: normal;
  word-break: normal;
}
#editor #statsMode .stats-source-row-type {
  order: 2;
  margin-top: 14px;
  padding-top: 0;
}
#editor #statsMode .stats-source-row-type .source-meta-key {
  color: var(--ed-text-muted);
}
#editor #statsMode .stats-source-row-type .source-meta-val {
  color: var(--ed-text-pri);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.42;
  letter-spacing: 0;
}
#editor #statsMode .stats-source-row-call {
  order: 3;
  padding: 12px 0 14px;
}
#editor #statsMode .stats-source-row-id,
#editor #statsMode .stats-source-row-saved {
  display: none !important;
}
#editor #statsMode .stats-source-row-id,
#editor #statsMode .stats-source-row-saved,
#editor #statsMode .stats-source-row-data,
#editor #statsMode .stats-source-row-context {
  display: block;
  padding: 11px 0;
}
#editor #statsMode .stats-source-row-id .source-meta-key,
#editor #statsMode .stats-source-row-saved .source-meta-key,
#editor #statsMode .stats-source-row-data .source-meta-key,
#editor #statsMode .stats-source-row-context .source-meta-key {
  margin-bottom: 0;
}
#editor #statsMode .stats-source-row-context {
  background: transparent;
}
#editor #statsMode #statsCardSourceWdRow { order: 5; }
#editor #statsMode #statsCardSourceGitRow { order: 6; }
#editor #statsMode #statsCardSourceSenderRow { order: 7; }
#editor #statsMode .stats-source-row-data { order: 8; }
#editor #statsMode #statsCardSourceRRow { order: 9; }
#editor #statsMode #statsCardSourceRawSlot { order: 10; }
#editor #statsMode #statsCardSourceWdRow {
  margin-top: 0;
  padding-top: 11px;
}
#editor #statsMode .stats-source-row-script::before,
#editor #statsMode #statsCardSourceRawSlot:not(:empty)::before {
  display: block;
  margin: 0 0 14px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ed-text-muted);
}
#editor #statsMode .stats-source-row-script {
  order: 4;
  margin-top: 10px;
  padding: 18px 0 14px;
  border-bottom-color: #e6e9e9;
}
#editor #statsMode .stats-source-row-script::before {
  content: "Script";
}
#editor #statsMode .stats-source-row-script .source-meta-key {
  display: none;
}
#editor #statsMode #statsCardSourceRawSlot:not(:empty) {
  display: block;
  margin-top: 18px;
  width: 100%;
  min-width: 0;
}
#editor #statsMode #statsCardSourceRawSlot:not(:empty)::before {
  content: "Output";
  margin: 0 0 10px;
}
#editor #statsMode .source-path-chip,
#editor #statsMode .source-hash-chip,
#editor #statsMode .source-script-pill {
  border-color: var(--ed-border);
  background: var(--ed-bg);
  color: var(--ed-text-sec);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
#editor #statsMode .source-script-field {
  border-color: var(--ed-border);
  background: var(--ed-bg);
}
#editor #statsMode .source-script-path {
  background: transparent;
  color: var(--ed-text-sec);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  overflow-wrap: anywhere;
}
#editor #statsMode .source-script-pill {
  color: var(--ed-text-muted);
}
#editor #statsMode .source-script-pill code {
  color: var(--ed-text-sec);
}
#editor #statsMode .source-chip-sep {
  color: var(--ed-text-muted);
}
#editor #statsMode .rstudio-hint {
  border-color: var(--ed-text-pri);
  background: var(--ed-text-pri);
  color: var(--ed-bg);
}
#editor #statsMode .source-meta-row.source-meta-clickable:hover .rstudio-hint,
#editor #statsMode .source-meta-row.source-meta-clickable:focus-visible .rstudio-hint {
  border-color: #000;
  background: #000;
  color: var(--ed-bg);
}
#editor #statsMode .parse-status .parse-err {
  border-radius: 8px;
  font-family: 'Fraunces', Georgia, serif;
}

/* No enclosing card — rows sit flat on the #f7f8f8 panel like the
   Figures provenance block. The Call / Script / Output blocks keep
   their own white surface (the analog of the figure image card). */
#editor #statsMode #statsCardSourceContent {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: visible;
}

#editor #statsMode #statsCardSourceContent .source-meta-row:last-of-type {
  border-bottom: none;
}

/* ── Direction A · provenance calm ───────────────────────────────────
   The pane used to read as a debug dump: every field an equal-weight
   labelled row with its own divider. Anchor instead on the byline +
   Type / Call / Script (what a researcher acts on), let the labels
   whisper, and demote the machine rows (working dir, git, sender, R,
   data) into one tight fine-print cluster under a single hairline. */

/* Cool the dividers and let labels whisper. */
#editor #statsMode .source-meta-row { border-bottom-color: var(--ed-border-soft); }
#editor #statsMode .source-meta-key,
#editor #statsMode .stats-source-row-script::before,
#editor #statsMode #statsCardSourceRawSlot:not(:empty)::before {
  font-size: 9.5px;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--ed-text-muted);
}
#editor #statsMode .stats-source-origin { font-size: 12.5px; }
#editor #statsMode .stats-source-origin b { font-weight: 600; }

/* Environment cluster → compact inline label + value, no per-row rules,
   one hairline above the whole group. */
#editor #statsMode #statsCardSourceWdRow,
#editor #statsMode #statsCardSourceGitRow,
#editor #statsMode #statsCardSourceSenderRow,
#editor #statsMode #statsCardSourceRRow,
#editor #statsMode .stats-source-row-data {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 0;
}
#editor #statsMode #statsCardSourceWdRow {
  margin-top: 6px;
  padding-top: 13px;
  border-top: 1px solid var(--ed-border-soft);
}
#editor #statsMode #statsCardSourceWdRow .source-meta-key,
#editor #statsMode #statsCardSourceGitRow .source-meta-key,
#editor #statsMode #statsCardSourceSenderRow .source-meta-key,
#editor #statsMode #statsCardSourceRRow .source-meta-key,
#editor #statsMode .stats-source-row-data .source-meta-key {
  margin: 0;
}
#editor #statsMode #statsCardSourceWdRow .source-meta-val,
#editor #statsMode #statsCardSourceGitRow .source-meta-val,
#editor #statsMode #statsCardSourceSenderRow .source-meta-val,
#editor #statsMode #statsCardSourceRRow .source-meta-val,
#editor #statsMode .stats-source-row-data .source-meta-val {
  font-size: 11.5px;
  color: var(--ed-text-muted);
}

#editor #statsMode #statsCardSourcePlaceholder .source-input {
  min-height: 240px;
}

#editor #statsMode .source-script-card,
#editor #statsMode .source-location-edit-card,
#editor #statsMode .source-raw {
  border-color: #dfe3e3;
  background: #ffffff;
  border-radius: 10px;
}
#editor #statsMode .source-raw {
  margin-top: 0;
  padding: 0;
  border: 1px solid #dfe3e3;
  overflow: hidden;
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}
#editor #statsMode .source-raw-summary {
  padding: 12px 13px;
  background: #ffffff;
  border-bottom: 1px solid transparent;
  letter-spacing: 0.14em;
}
#editor #statsMode .source-raw[open] .source-raw-summary {
  border-bottom-color: #edf0f0;
}
#editor #statsMode .source-raw-pre,
#editor #statsMode .source-raw-edit {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #ffffff;
}
#editor #statsMode .source-raw-actions {
  margin: 0;
  padding: 8px 10px 10px;
  background: #ffffff;
}

@media (max-width: 760px) {
  #editor #statsMode .doc-bar {
    padding: 12px 16px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  #editor #statsMode .doc-breadcrumb {
    flex-basis: 100%;
    max-width: none;
  }
  #editor #statsMode .doc-status {
    display: none;
  }
  #editor #statsMode .doc-actions {
    width: 100%;
    margin-left: 0;
    overflow-x: visible;
    flex-wrap: wrap;
    row-gap: 4px;
    padding-bottom: 2px;
  }
  #editor #statsMode .split {
    --source-pane-width: min(340px, 58vw);
  }
  #editor #statsMode .editor-body {
    padding-top: 20px;
  }
  #editor #statsMode .paper {
    padding: 0 18px 40px;
  }
  #editor #statsMode .rcard-head,
  #editor #statsMode .rcard-actions,
  #editor #statsMode .stats-library-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  #editor #statsMode .rcard-id,
  #editor #statsMode .stats-library-meta {
    margin-left: 0;
  }
  #editor #statsMode .rcard-actions-spacer {
    display: none;
  }
  #editor #statsMode .rcard-fields {
    grid-template-columns: 1fr;
    row-gap: 3px;
  }
  #editor #statsMode .stats-library-filters {
    align-items: stretch;
  }
  #editor #statsMode .stats-library-search {
    flex-basis: 100%;
  }
  #editor #statsMode .stats-library-item {
    grid-template-columns: minmax(0, 1fr) 32px;
  }
  #editor #statsMode .stats-library-item-id,
  #editor #statsMode .stats-library-item-date {
    display: none;
  }
}

@media (max-width: 640px) {
  #editor .mellio-sidebar-resize {
    display: none;
  }

  #editor #statsMode .split,
  #editor #statsMode .split.source-collapsed {
    display: block;
    overflow-y: auto;
  }
  #editor #statsMode .source {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 320px;
    border-right: none;
    border-bottom: 1px solid var(--ed-border);
    transform: none;
  }
  #editor #statsMode .split.source-collapsed .source {
    display: none;
    transform: none;
  }
  #editor #statsMode .source-head {
    padding: 14px 20px 10px;
  }
  #editor #statsMode .source-body {
    max-height: 238px;
    padding: 0 20px 18px;
  }
  #editor #statsMode .source-foot {
    padding: 10px 14px;
    flex-wrap: wrap;
  }
  #editor #statsMode .source-open {
    top: 12px;
    left: 14px;
  }
  #editor #statsMode .editor-main {
    overflow: visible;
  }
  #editor #statsMode .editor-body {
    display: block;
    overflow: visible;
    padding: 20px 0 44px;
  }
  #editor #statsMode .paper {
    max-width: none;
    padding: 0 16px 36px;
  }
  #editor #statsMode .rcard {
    margin-bottom: 18px;
  }
  #editor #statsMode .rcard-head {
    display: flex;
  }
  #editor #statsMode .rcard-id {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .app-topbar {
    padding: 20px 16px 0;
    gap: 16px;
  }
  .app-topbar .lib-brand,
  .app-topbar .lib-avatar-wrap {
    flex: 0 0 auto;
  }
  .app-topbar .lib-topbar-spacer {
    display: none;
  }
  .app-topbar .ch-tabs {
    flex: 1 1 auto;
    gap: 18px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .app-topbar .ch-tabs::-webkit-scrollbar {
    display: none;
  }
  .app-topbar .ch-tab {
    flex: 0 0 auto;
  }
  .app-topbar .ch-tab .num {
    display: none;
  }
}

@media (max-width: 820px) {
  #editor #tableMode .doc-bar,
  #editor #figureMode .doc-bar {
    padding: 12px 16px;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 10px;
  }
  #editor #tableMode .doc-breadcrumb,
  #editor #figureMode .doc-breadcrumb {
    flex: 1 1 100%;
    max-width: none;
    align-items: center;
  }
  #editor #tableMode .doc-project,
  #editor #figureMode .doc-project {
    max-width: min(42vw, 180px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #editor #tableMode .doc-title,
  #editor #figureMode .doc-title {
    flex: 1 1 150px;
    max-width: none;
  }
  #editor #tableMode .doc-status,
  #editor #figureMode .doc-status {
    flex: 1 1 auto;
    max-width: 100%;
  }
  #editor #tableMode .doc-actions,
  #editor #figureMode .doc-actions {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    row-gap: 4px;
    overflow: visible;
    padding-bottom: 2px;
  }
  #editor #tableMode .split,
  #editor #figureMode .split,
  #editor #statsMode .split {
    grid-template-columns: clamp(300px, 44vw, var(--source-pane-width)) minmax(0, 1fr);
  }
  #editor #tableMode .source,
  #editor #figureMode .source,
  #editor #statsMode .source {
    width: clamp(300px, 44vw, var(--source-pane-width));
    max-width: clamp(300px, 44vw, var(--source-pane-width));
  }
  #editor #tableMode .paper,
  #editor #figureMode .paper {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (max-width: 640px) {
  #editor #tableMode .doc-status,
  #editor #figureMode .doc-status {
    display: none;
  }
  #editor #tableMode .split,
  #editor #tableMode .split.source-collapsed,
  #editor #figureMode .split,
  #editor #figureMode .split.source-collapsed,
  #editor #statsMode .split,
  #editor #statsMode .split.source-collapsed {
    display: block;
    overflow-y: auto;
  }
  #editor #tableMode .source,
  #editor #figureMode .source,
  #editor #statsMode .source {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 340px;
    border-right: none;
    border-bottom: 1px solid var(--ed-border);
    transform: none;
  }
  #editor #tableMode .split.source-collapsed .source,
  #editor #figureMode .split.source-collapsed .source,
  #editor #statsMode .split.source-collapsed .source {
    display: none;
    transform: none;
  }
  #editor #tableMode .source-head,
  #editor #figureMode .source-head,
  #editor #statsMode .source-head {
    padding: 14px 20px 10px;
  }
  #editor #tableMode .source-body,
  #editor #figureMode .source-body,
  #editor #statsMode .source-body {
    max-height: 238px;
    padding: 0 20px 18px;
  }
  #editor #tableMode .source-foot,
  #editor #figureMode .source-foot,
  #editor #statsMode .source-foot {
    padding: 10px 14px;
    flex-wrap: wrap;
  }
  #editor #tableMode .source-foot-info,
  #editor #figureMode .source-foot-info,
  #editor #statsMode .source-foot-info {
    margin-left: auto;
  }
  #editor #figureMode .fig-image-card-thumb {
    height: 110px;
  }
  #editor #figureMode .source-empty-hint {
    margin-bottom: 10px;
  }
  #editor #statsMode #statsCardSourcePlaceholder .source-input {
    min-height: 150px;
  }
  #editor #tableMode .source-open,
  #editor #figureMode .source-open,
  #editor #statsMode .source-open {
    top: 12px;
    left: 14px;
  }
  #editor #tableMode .editor-main,
  #editor #figureMode .editor-main,
  #editor #statsMode .editor-main {
    overflow: visible;
  }
  #editor #tableMode .editor-body,
  #editor #figureMode .editor-body,
  #editor #statsMode .editor-body {
    display: block;
    overflow: visible;
    padding: 20px 0 44px;
  }
  #editor #tableMode .paper,
  #editor #figureMode .paper,
  #editor #statsMode .paper {
    max-width: none;
    padding: 0 16px 36px;
  }
  #editor #tableMode .paper-options,
  #editor #figureMode .paper-options {
    flex-wrap: wrap;
  }
  #editor #figureMode .fig-toolbar-buttons,
  #editor #figureMode .fig-tool-group,
  #editor #figureMode .fig-toolbar-actions {
    flex-wrap: wrap;
  }
  #editor #figureMode .fig-toolbar-buttons > .fig-tool-divider {
    margin-left: 4px;
  }
  #editor .saved-tray-v9 {
    --saved-tray-height: min(260px, 45vh);
  }
  #editor .saved-tray-v9-head {
    padding: 12px 16px 8px;
  }
  #editor .saved-tray-v9-hint {
    display: none;
  }
  #editor .saved-tray-v9-cards {
    padding: 6px 16px 20px;
  }
}

@media (max-width: 520px) {
  .app-topbar {
    gap: 12px;
  }
  .app-topbar .lib-brand {
    font-size: 19px;
  }
  .app-topbar .ch-tabs {
    gap: 14px;
  }
  .app-topbar .ch-tab {
    font-size: 13px;
  }
  .app-topbar .lib-avatar {
    font-size: 16px;
  }
  #editor #tableMode .paper-form-row,
  #editor #figureMode .paper-form-row,
  #editor #tableMode .paper-form-row.single,
  #editor #figureMode .paper-form-row.single,
  #editor #tableMode .paper-form-row.combined-title-only,
  #editor #figureMode .paper-form-row.combined-title-only {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 6px;
  }
  #editor .paper-form-input.num {
    width: 100%;
    text-align: left;
  }
  #editor .confirm-modal,
  body > .confirm-modal {
    width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 22px 18px 18px;
  }
  #editor .confirm-actions,
  body > .confirm-modal .confirm-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
  }
  #editor .confirm-spacer,
  body > .confirm-modal .confirm-spacer {
    display: none;
  }
  #editor .confirm-btn,
  body > .confirm-modal .confirm-btn {
    width: 100%;
    min-height: 36px;
    text-align: center;
    justify-content: center;
  }
}

/* Stats APA output focus: use a calm card ring instead of the left edit stripe. */
.rcard-report-card {
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.rcard-report-card:focus-within {
  border-color: rgba(45,74,110,0.24);
  box-shadow: 0 0 0 2px rgba(45,74,110,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
}
.rcard-report-text:focus {
  outline: none;
  box-shadow: none;
}
#editor #statsMode .rcard-report-card:focus-within {
  border-color: rgba(74,122,85,0.28);
  box-shadow: 0 0 0 2px rgba(74,122,85,0.07);
}
#editor #statsMode .rcard-report-text:focus {
  box-shadow: none;
}

/* Stats extracted regression coefficients: compact aligned sublist. */
.rcard-fields .field-coef-list {
  display: grid;
  gap: 5px;
  margin: 1px 0 0;
  max-width: 720px;
}
.rcard-fields .field-coef-details {
  margin: 0;
}
.rcard-fields .field-coef-details > summary {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  cursor: pointer;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12px;
  list-style: none;
}
.rcard-fields .field-coef-details > summary::-webkit-details-marker {
  display: none;
}
.rcard-fields .field-coef-details > summary::before {
  content: "+";
  margin-right: 6px;
  color: var(--ink-4);
  font-family: var(--sans);
  font-size: 10px;
}
.rcard-fields .field-coef-details[open] > summary::before {
  content: "-";
}
.rcard-fields .field-coef-details[open] .field-coef-list {
  margin-top: 6px;
}
.rcard-fields .field-coef-row {
  display: grid;
  /* The term column needs to fit reasonable variable names verbatim —
     78px (~10 chars at 12px monospace) was clipping names like
     "caffeine_mg" to "caffeine ...". 240px gives ~33 chars at 12px
     monospace, which fits the middle-elided form (head + "..." + tail)
     for pathological names. The full name rides along in the title
     attribute for hover disclosure. */
  grid-template-columns: minmax(48px, 240px) minmax(0, 1fr);
  column-gap: 14px;
  align-items: baseline;
}
.rcard-fields .field-term-row {
  display: contents;
}
.rcard-fields .field-term-list {
  display: grid;
  grid-template-columns: minmax(0, max-content) max-content;
  align-items: center;
  column-gap: 46px;
  row-gap: 2px;
  width: max-content;
  max-width: 100%;
}
.rcard-fields .field-term-desc {
  display: inline-flex;
  min-width: 0;
  align-items: baseline;
}
.rcard-fields .field-term-desc .field-coef-term {
  max-width: 240px;
}
.rcard-fields .field-term-type {
  flex: 0 0 auto;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}
.rcard-fields .field-term-control-check,
.stats-field-term-control {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.1;
  cursor: pointer;
  user-select: none;
}
.rcard-fields .field-term-control-checkbox,
.stats-field-term-control input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #2d4a6e;
}
.rcard-fields .field-term-control-check:focus-within,
.stats-field-term-control:focus-within {
  outline: none;
  border-radius: 5px;
  box-shadow: 0 0 0 2px rgba(45,74,110,0.08);
}
#editor #statsMode .rcard-fields .field-term-control-check,
#editor #statsMode .stats-field-term-control {
  color: var(--ed-text-sec);
}
#editor #statsMode .rcard-fields .field-term-type {
  color: var(--ed-text-muted);
}
.rcard-fields .field-coef-term {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12px;
  font-style: normal;
  font-variant-numeric: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Surface hover affordance for the tooltip so users notice they can
     check the full identifier. */
  cursor: help;
}
.rcard-fields .field-coef-values {
  min-width: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}
#editor #statsMode .rcard-fields .field-coef-term {
  color: var(--ed-text-muted);
}
#editor #statsMode .rcard-fields .field-coef-values {
  color: var(--ed-text-pri);
}

/* ════════════════════════════════════════════
   R SOURCE PROVENANCE — Tables & Figures source pane (Phase 2)
   Shown when an item is opened from R with provenance. Built by
   renderProvenanceBlock() in app.js; mirrors the Stats Result-source pane.
════════════════════════════════════════════ */
.source-provenance { font-family: var(--sans); }

.prov-origin {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 0 9px;
  border-bottom: 1px solid var(--ed-border);
}
.prov-rbadge { display: none; }
.prov-origin-txt { font-size: 12.5px; color: var(--ed-text-sec); }
.prov-origin-txt b { color: var(--ed-text-pri); font-weight: 600; }
.prov-origin-when { color: var(--ed-text-muted); }

.prov-row {
  display: block;
  padding: 7px 0;
  border-bottom: 1px solid var(--ed-border);
}
.prov-row:last-of-type { border-bottom: none; }
.prov-key {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ed-text-muted); font-weight: 600; margin-bottom: 3px;
  padding-top: 0;
}
.prov-val {
  min-width: 0;
  font-size: 12.5px;
  color: var(--ed-text-pri);
  line-height: 1.34;
}
.prov-mono {
  font-family: var(--mono); font-size: 11px; color: var(--ed-text-sec);
  word-break: break-all;
}

.prov-source-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.prov-source-main {
  min-width: 0;
  flex: 1 1 auto;
}
.prov-source-title {
  color: var(--ed-text-pri);
  font-size: 12.5px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}
.prov-source-sub {
  margin-top: 2px;
  color: var(--ed-text-muted);
  font-size: 11px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.prov-open-source-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid var(--ed-border-strong);
  border-radius: 8px;
  background: var(--ed-tint);
  color: var(--ed-data);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, box-shadow 0.16s, transform 0.12s;
}
.prov-open-source-btn:hover:not(:disabled),
.prov-open-source-btn:focus-visible {
  background: #eef2f7;
  border-color: var(--ed-data);
  outline: none;
  box-shadow: 0 8px 20px rgba(70, 96, 122, 0.14);
  transform: translateY(-1px);
}
.prov-open-source-btn:active:not(:disabled) { transform: translateY(0); }
.prov-open-source-btn:disabled {
  cursor: default;
  opacity: 0.45;
}
.prov-open-source-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.prov-script-card {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.prov-script-field {
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
  border: 1px solid var(--ed-border);
  border-radius: 7px;
  background: var(--ed-bg);
  overflow: hidden;
}
.prov-script-path,
.prov-script-empty {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 9px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.38;
  white-space: normal;
  overflow-wrap: anywhere;
}
.prov-script-path { color: var(--ed-text-sec); }
.prov-script-empty {
  color: var(--ed-text-muted);
  font-family: var(--sans);
  font-style: italic;
}
.prov-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  min-width: 26px;
  margin: 4px 4px 4px 0;
  border: 1px solid var(--ed-text-pri);
  border-radius: 6px;
  background: var(--ed-text-pri);
  color: var(--white);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}
.prov-icon-btn.secondary {
  background: var(--white);
  border-color: var(--ed-border);
  color: var(--ed-text-sec);
}
.prov-icon-btn:hover,
.prov-icon-btn:focus-visible {
  background: var(--ed-text-sec);
  border-color: var(--ed-text-sec);
  color: var(--white);
  outline: none;
  box-shadow: 0 0 0 2px rgba(40,40,40,0.08);
}
.prov-icon-btn.secondary:hover,
.prov-icon-btn.secondary:focus-visible {
  background: var(--ed-hover-bg);
  border-color: var(--ed-text-muted);
  color: var(--ed-text-pri);
}
.prov-icon-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.prov-icon-btn.copied {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.prov-icon-btn.copied svg { display: none; }
.prov-icon-btn.copied::before {
  content: "\2713";
  font-size: 13px;
  line-height: 1;
}
.prov-script-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.prov-script-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 6px;
  border: 1px solid var(--ed-border);
  border-radius: 6px;
  background: var(--ed-bg);
  color: var(--ed-text-muted);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1;
}
.prov-script-pill code {
  color: var(--ed-text-sec);
  font-family: inherit;
  font-size: inherit;
}
.prov-script-pill.edited {
  color: #8b6a12;
  background: rgba(176,136,24,0.08);
  border-color: rgba(176,136,24,0.22);
  font-family: var(--sans);
  font-style: italic;
}

.prov-git { font-family: var(--mono); font-size: 11.5px; }
.prov-git-branch { color: var(--ed-text-pri); }
.prov-git-sha { color: var(--ed-text-sec); }
.prov-git-sep { color: var(--ed-text-muted); margin: 0 3px; }
.prov-git-clean { color: var(--green-2); }
.prov-git-dirty { color: #b08818; font-style: italic; }

.prov-edit-fields {
  margin: 0;
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--ed-border);
  background: transparent;
}
.prov-edit-title {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ed-text-muted);
  font-weight: 600;
  margin-bottom: 10px;
}
.prov-edit-field {
  display: grid;
  gap: 5px;
  margin-bottom: 8px;
}
.prov-edit-field.compact {
  max-width: 96px;
}
.prov-edit-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ed-text-muted);
  font-weight: 600;
}
.prov-edit-input {
  width: 100%; font-family: var(--mono); font-size: 12px;
  color: var(--ed-text-pri); background: var(--white);
  border: 1px solid var(--ed-border); border-radius: 6px; padding: 7px 9px;
}
.prov-edit-input:focus { outline: none; border-color: var(--ed-text-muted); }
.prov-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.prov-edit-btn {
  cursor: pointer; font-family: var(--sans); font-size: 11.5px;
  font-weight: 500; border-radius: 6px; padding: 7px 12px;
  border: 1px solid var(--ed-border); background: var(--white);
  color: var(--ed-text-sec);
}
.prov-edit-btn.primary {
  background: var(--ed-text-pri); color: #fff; border-color: var(--ed-text-pri);
}