:root{
  --bg:#fafafa;--panel:#fff;--border:#e2e6eb;--accent:#3a8;--accent2:#7c3aed;
  --string:#059669;--num:#2563eb;--bool:#d97706;--gray:#666;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,Segoe UI,sans-serif;color:#222;background:var(--bg);line-height:1.55}
header{position:sticky;top:0;background:var(--panel);border-bottom:1px solid var(--border);padding:14px 20px;z-index:50}
h1{margin:0;font-size:1.4em}
h2{margin-top:0}
.subtitle{color:var(--gray);font-size:0.92em}
main{padding:20px;margin:0 auto}
/* Other dashboard pages keep their own narrower cap via `.viv-content > .page`
 * (max-width:1200px, line 862). Studies + Investigations + the Composite
 * Explorer + the embedded study-detail page fill the whole window. */
#page-studies, .viv-content > #page-studies,
#page-investigations, .viv-content > #page-investigations,
#page-composite-explore, .viv-content > #page-composite-explore
  {max-width:none;width:auto}
.viv-content:has(> #page-investigations.active){
  padding:8px 12px !important;
  width:100% !important;
  max-width:none !important;
}
#page-investigations.active{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  box-sizing:border-box;
}
#investigation-dag-shell{ width: 100% !important; }
#investigation-study-embed-panel{
  width: 100% !important; max-width: none !important;
  margin-top: 16px !important;
  /* Sticky so the embedded study iframe stays visible as the user
   * scrolls the SPA past the investigation DAG above. Without this,
   * the SPA scroll lifts the iframe off-screen and the iframe's own
   * sticky nav has no chance to engage — the bar is technically
   * pinned, but pinned to a top edge the user can no longer see. */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 5;
}
#investigation-study-embed-frame{
  width: 100% !important;
  height: 85vh !important;
  min-height: 600px !important;
}
main.study-page{max-width:none;padding:12px 16px;width:100%;box-sizing:border-box}

/* ─────────────────────────────────────────────────────────────────────
 * Studies-tab fullscreen layout.
 *
 * Problem this fixes: viv-content has padding 24px + overflow-y:auto, the
 * embedded study iframe was sized via calc(100vh - 160px), and the iframe
 * itself scrolls. That stacks 24px margins all around with one outer
 * scrollbar and one iframe scrollbar.
 *
 * Solution: when Studies is the active page, kill viv-content's own
 * padding + scroll, lay out #page-studies as a flex column, and let
 * the embedded study panel flex-grow into the remaining viewport area.
 * The iframe takes 100% of its (flex-sized) parent — no calc, no nested
 * scroll.
 * ───────────────────────────────────────────────────────────────────── */
/* `.viv-content > .page { max-width: 1200px; margin: 0 auto }` at line ~862
 * clamps the Studies content. Override with high specificity on every
 * relevant element so the layout uses the full content area. Keep block
 * flow + .viv-content's natural overflow-y:auto so the user can scroll
 * past the cards to see an embedded study below. */
.viv-content:has(> #page-studies.active){
  padding:8px 12px !important;
  width:100% !important;
  max-width:none !important;
  /* overflow:auto stays as the .viv-content default — single scrollbar. */
}
.viv-content > #page-studies.active,
#page-studies.active{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  box-sizing:border-box;
}
#page-studies.active > .page-lead{ max-width:none }
/* Cards: tight to content (no stretch-to-row-max), wider minmax than the
 * default 280px so the grid breathes on big screens. */
#page-studies.active > #investigations-grid{
  width:100% !important; max-width:none !important;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)) !important;
  align-items:start;
  gap:12px;
}
#page-studies.active .investigation-card{
  align-self:start;
}
/* Embedded study: full content width, fixed comfortable height. Iframe
 * scrolls its own content; the page scrolls past the grid to reach it.
 * Sticky in the SPA so the iframe stays in view as the user scrolls
 * past the Studies grid above — without this, the iframe scrolls off
 * the top and the .study-tabs inside it (also sticky) end up pinned
 * to an edge the user can no longer see. */
#study-detail-panel{
  width:100% !important; max-width:none !important;
  margin-top:16px !important;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 5;
}
#study-detail-frame{
  width:100% !important;
  height:85vh !important;
  min-height:600px !important;
}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:18px;margin-bottom:18px}
.guidance{background:linear-gradient(180deg,#fff7e6,#fff);border:2px solid #f5b042;display:none}
.guidance.active{display:block}
table{width:100%;border-collapse:collapse;font-size:0.92em}
th,td{padding:6px 8px;border-bottom:1px solid var(--border);text-align:left}
th{background:rgba(0,0,0,0.03)}
.tracker{display:flex;gap:6px;flex-wrap:wrap}
.tracker .pill{flex:1;min-width:120px;padding:10px;border-radius:4px;font-size:0.86em}
.pill.complete{background:#d1fae5}
.pill.in_progress{background:#fef3c7}
.pill.gate_pending{background:#fee2e2}
.pill.planned{background:#f3f4f6;color:#888}
.json-tree{font-family:ui-monospace,Menlo,monospace;font-size:0.86em}
.json-tree .key{color:var(--accent2)}
.json-tree .str{color:var(--string)}
.json-tree .num{color:var(--num)}
.json-tree .bool{color:var(--bool)}
.json-tree summary{cursor:pointer;user-select:none}
code{font-family:ui-monospace,Menlo,monospace;background:rgba(0,0,0,0.04);padding:1px 4px;border-radius:3px}
img{max-width:100%}
.stage-label{
  display:inline-block;
  font-size:0.7em;
  background:#f5b042;
  color:#fff;
  padding:2px 8px;
  border-radius:10px;
  margin-left:8px;
  vertical-align:middle;
  letter-spacing:0.05em;
}
.stage-label.optional{background:#7c7c7c}
.stage-explainer{color:var(--gray);font-size:0.92em;margin:-4px 0 12px}
.status-pill{
  font-size:0.78em; padding:2px 10px; border-radius:10px;
}
.status-pill.complete{background:#d1fae5; color:#065f46}
.status-pill.in_progress{background:#fef3c7; color:#92400e}
.status-pill.gate_pending{background:#fee2e2; color:#991b1b}
.status-pill.planned{background:#e5e7eb; color:#4b5563}
.status-pill.planning{background:#e5e7eb; color:#4b5563}
.status-pill.running{background:#dbeafe; color:#1e40af}
.status-pill.failed{background:#fee2e2; color:#991b1b}
.source-artifact{ background:#f3f4f6; padding:8px 12px; border-radius:4px;
                  font-size:0.92em; margin:0 0 12px }
.stage-track{display:flex;gap:4px;margin:8px 0;flex-wrap:wrap}
.stage-track .step{flex:1;min-width:90px;padding:8px;border-radius:4px;font-size:0.78em;text-align:center}
.stage-track .step.done{background:#d1fae5}
.stage-track .step.todo{background:#f3f4f6;color:#888}
.stage-track .step.partial{background:#fef3c7}
.stage-track .step.next{background:#fff7e6;border:2px solid #f5b042;color:#a86b00;font-weight:600}
.drop-zone{
  border:2px dashed #c0c0c0;
  border-radius:6px;
  padding:24px;
  text-align:center;
  color:#666;
  background:rgba(0,0,0,0.02);
  margin:8px 0;
  cursor:pointer;
  transition:all 0.15s ease;
}
.drop-zone.drag-over{
  border-color:#3a8;
  background:rgba(58,168,136,0.08);
  color:#3a8;
}
.drop-zone .file-info{
  font-family:ui-monospace,Menlo,monospace;
  font-size:0.85em;
  color:#333;
  margin-top:8px;
}
.drop-zone .file-hash{
  font-family:ui-monospace,Menlo,monospace;
  font-size:0.75em;
  color:#888;
  word-break:break-all;
}
.top-header{
  background:var(--panel);border-bottom:1px solid var(--border);
  padding:14px 20px;
}
.top-menu{
  display:flex; gap:4px; border-bottom:2px solid #e5e7eb;
  margin-bottom:24px; padding:0 8px;
  background:var(--panel);
}
.top-menu .menu-link{
  padding:12px 20px; text-decoration:none; color:#4b5563;
  font-weight:500; border-bottom:3px solid transparent;
  margin-bottom:-2px; transition:all 0.15s;
}
.top-menu .menu-link:hover{ color:#1f2937; background:#f9fafb }
.top-menu .menu-link.active{
  color:#1f2937; border-bottom-color:#3b82f6;
}
.page{ display:none }
.page.active{ display:block }
.page-title{ margin-top:0 }
/* Intro/lead text spans the full content width (matching the panels + cards
 * below it) instead of wrapping early at a cramped 680px. */
.page-lead{ color:#6b7280; margin-bottom:20px; max-width:none }
.count-badge{ font-size:0.78em; color:#6b7280; font-weight:normal }
.registry-schema{
  display:inline-block; max-width:480px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; vertical-align:middle; font-size:0.85em;
}
.muted{ color:#6b7280 }
.empty-state{ color:#888; font-style:italic }
.file-status{
  display:inline-block; padding:2px 8px; border-radius:4px;
  font-size:0.82em; font-weight:500; margin-right:6px;
}
.file-status.status-ok{ background:#d1fae5; color:#065f46 }
.file-status.status-missing{ background:#fee2e2; color:#991b1b }
.file-status.status-mismatch{ background:#fef3c7; color:#92400e }
.file-link{
  font-size:0.82em; color:#1e40af; text-decoration:none;
  background:#eff6ff; padding:2px 8px; border-radius:4px;
}
.file-link:hover{ background:#dbeafe; text-decoration:underline }
.module-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:14px; margin:8px 0;
}
/* Semantic-zoom module rows (Cards / Full): full-row cards, content across the
   bar — identity | description | stats | install-action. */
.mrows{ display:flex; flex-direction:column; gap:9px; margin:8px 0; }
.module-card.mrow{ width:100%; padding:11px 15px; gap:0; }
.module-card.mrow.reg-selected{ border-color:#6366f1; box-shadow:0 0 0 2px rgba(99,102,241,0.22); }
.mrow-grid{
  display:grid; grid-template-columns:minmax(160px,1fr) minmax(0,2.2fr) minmax(150px,1fr) auto;
  gap:20px; align-items:center;
}
@media (max-width:900px){ .mrow-grid{ grid-template-columns:1fr; gap:6px; } }
.mrow-identity{ min-width:0; }
/* Name truncates; the GitHub link stays visible (flex:none) instead of being
   clipped along with a long name. */
.mrow-name{ display:flex; align-items:baseline; gap:6px; min-width:0; }
.mrow-name-text{
  font-size:1.0em; color:#0f172a; font-weight:700; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mrow-name .module-link{ flex:none; white-space:nowrap; }
.mrow-desc{
  color:#475569; font-size:0.86em; line-height:1.45; min-width:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.mrow-stats{ min-width:0; }
.mrow-stats .module-stats-row{ margin:0; }
.mrow-action{ display:flex; align-items:center; justify-content:flex-end; }
.mrow-meta{ margin-top:8px; padding-top:8px; border-top:1px solid #f1f5f9; }
.module-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  padding:14px 16px; display:flex; flex-direction:column; gap:9px;
  transition:box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.module-card:hover{
  border-color:#c7d2fe;
  box-shadow:0 6px 20px -6px rgba(30,41,59,.16);
  transform:translateY(-1px);
}
.module-card-header{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.module-card-header strong{ font-size:1.06em; letter-spacing:-0.01em; color:#0f172a }
.module-link{
  font-size:0.85em; color:#1e40af; text-decoration:none;
}
.module-link:hover{ text-decoration:underline }
.module-desc{ color:#475569; font-size:0.88em; margin:0; line-height:1.45 }
.module-tags{ display:flex; gap:5px; flex-wrap:wrap }

/* Config-parameter chips — these are code identifiers, so a crisp monospace
   "code chip" reads far better than a washed-out pill. */
.param-block{ margin-top:2px }
.param-label{
  font-size:0.68em; text-transform:uppercase; letter-spacing:.06em;
  color:#94a3b8; font-weight:600; margin-bottom:5px;
  display:flex; align-items:center; gap:6px;
}
.param-count{
  background:#eef2f7; color:#64748b; border-radius:999px;
  padding:0 6px; font-size:0.95em; font-weight:600; letter-spacing:0;
}
.param-list{ display:flex; gap:5px; flex-wrap:wrap }
.param-pill{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background:#f1f5f9; border:1px solid #e2e8f0; color:#475569;
  padding:2px 7px; border-radius:6px; font-size:0.75em; line-height:1.5;
}
.param-pill:hover{ background:#e8eef6; border-color:#cbd5e1 }

/* Topic tags — colored rounded pills, distinct from the code-chip params. */
.topic-list{ margin-top:1px }
.topic-pill{
  background:#eef2ff; color:#4338ca; border:1px solid #e0e7ff;
  padding:2px 9px; border-radius:999px; font-size:0.74em; font-weight:500;
}

.tag-pill{  /* legacy — retained for any other consumers */
  background:#eff6ff; color:#1e40af; padding:2px 8px;
  border-radius:999px; font-size:0.78em;
}
.module-action{ margin-top:auto }

/* ── Visualization lifecycle (v0.4.2) ─────────────────────────────────── */
.viz-status-described{ background:#e5e7eb; color:#374151 }
.viz-status-requested{ background:#fef3c7; color:#92400e }
.viz-status-created{ background:#dbeafe; color:#1e40af }
.viz-status-added{ background:#fed7aa; color:#9a3412 }
.viz-status-committed{ background:#d1fae5; color:#065f46 }
.viz-actions{ display:flex; gap:6px; flex-wrap:wrap }
.viz-description{ max-width:480px; color:#374151; font-size:0.92em }

/* ── Suggest buttons (v0.4.8) ─────────────────────────────────────────── */
.input-with-suggest{
  display:flex; gap:6px; align-items:flex-start;
}
.input-with-suggest input,
.input-with-suggest textarea{
  flex:1; min-width:0;
}
.btn-suggest{
  background:#eff6ff; border:1px solid #3b82f6; color:#1e40af;
  border-radius:4px; padding:6px 12px; cursor:pointer; font-size:0.85em;
  white-space:nowrap; align-self:stretch;
}
.btn-suggest:hover{ background:#dbeafe }
.btn-suggest:disabled{ opacity:0.6; cursor:default }

/* ── Focus mode (v0.5.0) ──────────────────────────────────────────────── */
/* ?focus=<panel> hides the menu, strip, branch timeline, and
 * non-target pages, leaving just the requested panel visible. Useful for
 * skill-driven modal-like interactions. */
body.focus-mode header.top-header{ display:none }
body.focus-mode nav.top-menu{ display:none }
body.focus-mode .page{ display:none }
body.focus-mode .page.active{ display:block }
body.focus-mode main.pages{ padding-top:8px }
body.focus-mode .page-lead-supplement{ display:none }

/* v2 layout (viv-rail / viv-topbar): focus mode hides the whole rail +
 * topbar so the popped-out window is content-only. Explicit sizing on
 * .viv-main + .viv-content prevents the flex collapse that left popouts
 * blank when the topbar was hidden but the flex container still expected
 * a topbar-shaped child. */
body.focus-mode .viv-rail{ display:none !important }
body.focus-mode .viv-topbar{ display:none !important }
body.focus-mode .viv-layout{ height:100vh !important; display:flex !important; flex-direction:row !important }
body.focus-mode .viv-main{
  display:flex !important; flex-direction:column !important;
  flex:1 1 100% !important; width:100% !important;
  min-width:0 !important; margin:0 !important;
  overflow:hidden !important;
}
body.focus-mode .viv-content{
  flex:1 1 auto !important;
  width:100% !important; height:100% !important;
  overflow-y:auto !important;
  padding:12px 16px !important;
  display:block !important;
}
body.focus-mode .page.active{ display:block !important; min-height:0 !important }

/* …except for pages whose whole content is ONE fill-the-viewport app (the loom
 * iframe). The rules above force .viv-content to display:block, which breaks the
 * flex chain those pages size themselves with — and an iframe with height:auto
 * in a block container falls back to its intrinsic 150px, so the Composite
 * Explorer opened via ?focus=composite-explore rendered a ~150px letterbox with
 * its own scrollbar inside a page of empty space. Restore the flex column (and
 * the single-scrollbar contract) for exactly those pages. */
body.focus-mode.focus-composite-explore .viv-content{
  display:flex !important; flex-direction:column !important;
  overflow:hidden !important;
  padding:8px 12px !important;
}
body.focus-mode.focus-composite-explore .page.active{
  display:flex !important; flex-direction:column !important;
  flex:1 1 auto !important; min-height:0 !important;
}

/* ── Composite explorer diagram (v0.5.1.6) ─────────────────────────────
 * Server preserves graphviz's natural pt dimensions; CSS only shrinks
 * the SVG if the container is narrower. For wider containers, the SVG
 * renders at its natural pt size and we center it. No forced stretching.
 *
 * The lingering rendering issues (huge labels/circles) are a bigraph-viz
 * default-sizing concern; see task #85 for the upstream PR.
 */
#ce-diagram{
  max-height: 800px;
  overflow: auto;
  text-align: center;
}
#ce-diagram svg{
  max-width: 100%;
  max-height: 760px;
  width: auto;
  height: auto;
  display: inline-block;
}

/* ── Composite explorer parameters list (v0.5.2) ──────────────────────── */
#ce-parameters{ display:flex; flex-direction:column; gap:10px }
.ce-param-row{
  display:flex; flex-direction:column; gap:2px;
  padding:8px 10px; border:1px solid #e5e7eb; border-radius:4px;
  background:#fff;
}
.ce-param-label{
  display:flex; align-items:center; gap:10px; margin:0;
}
.ce-param-name{ flex:0 0 auto; min-width:180px }
.ce-param-input{ flex:1 1 auto; max-width:320px }
.ce-param-desc{ margin-left:190px }

/* ── Registry kind pickers: Emitters + Visualizations (v0.4.12) ──────── */
.picker-row{
  display:flex; gap:12px; align-items:flex-start; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid #e5e7eb;
}
.picker-row:last-child{ border-bottom:none }
.picker-row-main{ flex:1; min-width:0 }
.picker-row-main code{ font-size:0.82em }
.picker-row-main details{ margin-top:4px }
.picker-row-main details summary{ cursor:pointer; font-size:0.85em }
.picker-row-actions{ flex-shrink:0 }

/* ── Emitter Use feedback + Composite picker (v0.4.14) ───────────────── */
.apply-banner{
  background:#dbeafe; color:#1e40af; padding:8px 14px;
  border-radius:4px; margin:0 0 12px; font-size:0.9em;
  animation: fadeOut 4s ease-out forwards;
}
@keyframes fadeOut{
  0%,70% { opacity:1; }
  100%   { opacity:0; }
}
.highlight-flash{
  animation: highlightFlash 1.5s ease-out;
}
@keyframes highlightFlash{
  0%,30% { box-shadow:0 0 0 3px #fef3c7; background:#fffbeb; }
  100%   { box-shadow:none; background:transparent; }
}

/* ── Composite explorer — workbench tabs (v0.5.4) ────────────────────── */
.ce-tab-strip{
  display:flex; gap:2px; margin:12px 0; padding:0;
  border-bottom:2px solid #e5e7eb;
}
.ce-tab{
  background:transparent; border:none; padding:8px 16px;
  font-size:0.9em; font-weight:500; color:#64748b; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-2px;
}
.ce-tab:hover{ color:#1e293b; background:#f8fafc }
.ce-tab.active{
  color:#1e293b; border-bottom-color:#3b82f6; font-weight:600;
}
.ce-tab-badge{
  display:inline-block; background:#e2e8f0; color:#475569;
  border-radius:9999px; padding:0 6px; margin-left:4px;
  font-size:0.75em; font-weight:600;
}
.ce-tab-panel{ display:none }
.ce-tab-panel.active{ display:block }

/* State tree (collapsible JSON) */
.ce-state-tree{
  font-family:"SF Mono",Menlo,Monaco,monospace;
  font-size:0.82em; line-height:1.5;
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px;
  padding:10px 14px; max-height:520px; overflow:auto;
}
.ce-jt-key{ color:#7c3aed; font-weight:600 }
.ce-jt-str{ color:#059669 }
.ce-jt-num{ color:#2563eb }
.ce-jt-bool{ color:#d97706 }
.ce-jt-null{ color:#94a3b8 }
.ce-jt-toggle{ cursor:pointer; user-select:none; color:#94a3b8; margin-right:4px }
.ce-jt-toggle:hover{ color:#1e293b }
.ce-jt-collapsed{ display:none }
.ce-jt-bracket{ color:#64748b }

/* History table */
#ce-history-body table{ width:100%; border-collapse:collapse; font-size:0.85em }
#ce-history-body th, #ce-history-body td{ padding:6px 8px; border-bottom:1px solid #e5e7eb; text-align:left }
#ce-history-body th{ background:#f8fafc; font-weight:600 }
.ce-history-status{ display:inline-block; padding:2px 8px; border-radius:9999px; font-size:0.75em; font-weight:600 }
.ce-history-status.completed{ background:#d1fae5; color:#065f46 }
.ce-history-status.running{ background:#fef3c7; color:#92400e }
.ce-history-status.failed{ background:#fee2e2; color:#991b1b }

/* Compare diff table */
.ce-diff-table{ width:100%; border-collapse:collapse; font-size:0.85em; margin-top:12px }
.ce-diff-table th, .ce-diff-table td{ padding:6px 8px; border:1px solid #e5e7eb }
.ce-diff-table td.differs{ background:#fef9c3 }
.ce-compare-legend{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:8px; font-size:0.85em }
.ce-compare-legend .swatch{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; vertical-align:middle }

/* "Create simulation" panel accent (was inline style on the HTML element) */
.ce-create-sim-panel{ background:#eff6ff }

/* ── Card browse toolbar (v0.5.6) ────────────────────────────────────── */
.card-browse-toolbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin:0 0 12px; padding:10px 12px;
  background:#f8fafc; border:1px solid #e5e7eb; border-radius:6px;
}
/* Two-row variant: search + zoom pinned to the top row (zoom stays fixed at
   the top-right in every zoom setting); chips + sort wrap on row two. */
.card-browse-toolbar.cbt-2row{ flex-direction:column; align-items:stretch; gap:10px; }
.cbt-top{ display:flex; align-items:center; gap:10px; }
.cbt-top .card-browse-search{ flex:1 1 auto; max-width:none; }
.cbt-top .registry-zoom{ flex:none; }
.cbt-bottom{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cbt-bottom .card-browse-chips{ flex:1 1 auto; }
.card-browse-search{
  flex:1 1 220px; min-width:200px; max-width:380px;
  padding:6px 10px; border:1px solid #cbd5e1; border-radius:4px;
  font-size:0.9em;
}
.card-browse-chips{
  display:flex; flex-wrap:wrap; gap:4px; flex:2 1 auto;
}
.card-browse-chip{
  padding:3px 10px; border:1px solid #cbd5e1; border-radius:9999px;
  background:#fff; cursor:pointer; font-size:0.78em; color:#475569;
  user-select:none; transition:all 0.1s;
}
.card-browse-chip:hover{ border-color:#3b82f6; color:#1e40af }
.card-browse-chip.active{
  background:#3b82f6; border-color:#3b82f6; color:#fff;
}
.card-browse-options{
  display:flex; align-items:center; gap:14px;
  font-size:0.85em; color:#475569;
}
.card-browse-options label{ cursor:pointer }
.card-browse-view-toggle{ display:inline-flex; gap:2px; margin-left:6px }
.view-btn{
  background:#fff; border:1px solid #cbd5e1; padding:3px 9px;
  font-size:1em; cursor:pointer; line-height:1;
}
.view-btn.active{ background:#3b82f6; border-color:#3b82f6; color:#fff }

/* List view rows */
.module-list, .composite-list{ display:flex; flex-direction:column; gap:6px }
.module-list-row, .composite-list-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  padding:8px 12px; background:#fff; border:1px solid #e5e7eb; border-radius:6px;
  font-size:0.92em;
}
.module-list-row .name, .composite-list-row .name{ font-weight:600 }
.module-list-row .desc, .composite-list-row .desc{
  color:#6b7280; font-size:0.88em; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.module-list-row .tag-pill, .composite-list-row .tag-pill{
  background:#e0e7ff; color:#3730a3; padding:1px 7px; border-radius:9999px;
  font-size:0.72em; margin-right:3px;
}

/* Module-source line + kind badge for composite cards/rows (Sim Setup) */
.composite-list-row .composite-module,
.module-card .composite-module{
  font-size:0.8em; color:#94a3b8;
  margin-top:2px; display:flex; align-items:center; flex-wrap:wrap; gap:6px;
}
.composite-module small{ text-transform:uppercase; letter-spacing:.05em; font-size:0.92em; }
.composite-module code{
  background:#f8fafc; border:1px solid #eef2f7; color:#475569;
  padding:1px 6px; border-radius:5px; font-size:0.92em;
}
.kind-badge{
  background:#eef2ff; color:#4338ca; text-transform:uppercase; letter-spacing:.03em;
  padding:1px 7px; border-radius:999px;
  font-size:0.72em; font-weight:600;
  margin-left:6px;
}
.composites-sort-select{
  padding:4px 8px; border:1px solid #cbd5e1; border-radius:4px;
  background:#fff; font-size:0.85em; color:#374151;
  margin-left:6px; cursor:pointer;
}

/* ── Investigations page (v0.5.0) ───────────────────────────────────── */
#investigations-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:12px; margin-top:8px;
}
.investigation-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:8px;
  padding:14px 16px; cursor:pointer; transition:box-shadow 0.1s, border-color 0.1s;
}
.investigation-card:hover{
  border-color:#3b82f6; box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.investigation-card .name{ font-weight:600; font-size:1.04em; margin-bottom:4px }
.investigation-card .composite{ font-size:0.82em; color:#6b7280; font-family:monospace }
.investigation-card .meta{ display:flex; gap:8px; font-size:0.78em; color:#94a3b8; margin-top:6px }
.investigation-card .status-pill{ font-size:0.75em; padding:2px 8px; border-radius:9999px }

#investigations-grid.list-view{ display:flex; flex-direction:column; gap:6px }
#investigations-grid.list-view .investigation-card{ display:grid; grid-template-columns:1fr 2fr auto auto; gap:14px; align-items:center; padding:8px 12px }
#investigations-grid.list-view .investigation-card .composite{ font-size:0.84em }
#investigations-grid.list-view .investigation-card .meta{ margin-top:0 }

.investigation-detail{
  background:#f8fafc; border:1px solid #e5e7eb; border-radius:8px;
  padding:16px;
}
.investigation-detail-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:12px;
}
.investigation-detail-tabs{
  display:flex; gap:2px; border-bottom:2px solid #e5e7eb; margin:0 0 12px;
}
.investigation-detail-tab{
  background:transparent; border:none; padding:6px 14px;
  font-size:0.88em; color:#64748b; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-2px;
}
.investigation-detail-tab.active{
  color:#1e293b; font-weight:600; border-bottom-color:#3b82f6;
}
.investigation-detail-panel{ display:none }
.investigation-detail-panel.active{ display:block }
.viz-frame{
  width:100%; height:420px; border:1px solid #e5e7eb; border-radius:6px;
  margin-bottom:10px; background:#fff;
}
.spec-yaml-pre{
  background:#f8fafc; border:1px solid #e5e7eb; border-radius:6px;
  padding:10px 14px; font-family:"SF Mono",Menlo,monospace; font-size:0.82em;
  overflow:auto; max-height:480px;
}

/* Richer Investigations cards ------------------------------------------------ */
.investigation-card .ic-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-bottom:6px;
}
.investigation-card .ic-title{
  font-weight:600; font-size:1.02em; color:#111827;
  /* A flex item's min-width defaults to its CONTENT width, so a long unbroken
     slug ("colonies-03-wcm-rss-leak") refused to shrink and shoved the
     flex:none status pill past the card's right edge — 16px of page-wide
     horizontal scrollbar on the Studies grid, from one card. */
  min-width:0; overflow-wrap:anywhere;
}
.investigation-card .ic-status{
  flex:none;
}
.investigation-card .ic-baseline{
  font-size:0.86em; color:#4b5563; margin-bottom:6px;
}
.investigation-card .ic-baseline code{
  font-size:0.95em; background:#f3f4f6; padding:1px 6px; border-radius:4px;
}
.investigation-card .ic-conclusions{
  font-size:0.86em; color:#6b7280; line-height:1.4; margin:8px 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.investigation-card .ic-meta{
  display:flex; gap:14px; flex-wrap:wrap;
  font-size:0.8em; color:#6b7280;
}
.investigation-card .ic-meta .ic-lastrun{
  margin-left:auto;
}

/* Studies (formerly Investigations) focus-mode: hide index chrome, show only the detail -------- */
#page-studies.inv-focus-mode #investigations-toolbar,
#page-studies.inv-focus-mode .investigations-search,
#page-studies.inv-focus-mode #investigations-tag-chips,
#page-studies.inv-focus-mode #investigations-grid,
#page-studies.inv-focus-mode .page-title,
#page-studies.inv-focus-mode .page-lead{
  display:none;
}
/* The page-title shares a flex-row with the "+ New investigation" button.
 * Hide that wrapper entirely while focused so the button doesn't dangle. */
#page-studies.inv-focus-mode > div:first-child{
  display:none;
}
#page-studies.inv-focus-mode #investigation-detail{
  display:block;
}
.inv-detail-back a:hover{
  text-decoration:underline;
}

/* ============================================================================
 * Vivarium chrome — left rail + topbar (V2 of vivarium-chrome-design)
 * Activated when <body> wraps content in .viv-layout. Old top-banner styles
 * stay intact for fallback / partial rollout.
 * ============================================================================ */

/* Layout shell -------------------------------------------------------------- */
.viv-layout{
  display:flex; height:100vh; width:100%; overflow:hidden;
  font-family:-apple-system,"Segoe UI",sans-serif; color:#1f2937;
}

/* Left rail ----------------------------------------------------------------- */
.viv-rail{
  width:var(--rail-w, 240px); flex:0 0 var(--rail-w, 240px);
  display:flex; flex-direction:column;
  background:#fafafa; border-right:1px solid #e5e7eb;
  padding:16px 0 8px;
  transition:width 0.18s ease, flex-basis 0.18s ease;
  position:relative;
  overflow:hidden;
}
/* While actively dragging the resize handle, kill the width transition so the
   rail tracks the pointer 1:1 instead of lagging behind. */
.viv-rail.viv-rail-resizing{ transition:none; }
/* Right-edge drag handle: widen the rail to see full study names/details.
   Snaps to normal width; dragging narrower snaps to the collapsed bar. */
.viv-rail-resize-handle{
  position:absolute; top:0; right:0; bottom:0; width:6px;
  cursor:col-resize; z-index:6; background:transparent;
  transition:background .12s ease;
}
.viv-rail-resize-handle:hover,
.viv-rail.viv-rail-resizing .viv-rail-resize-handle{ background:#c7d2fe; }
body.viv-rail-resizing-active{ cursor:col-resize !important; user-select:none; }
.viv-rail-header{
  display:flex; align-items:center; gap:10px;
  padding:0 16px 14px;
  border-bottom:1px solid #ececec;
  position:relative;   /* positioning context for the collapse toggle */
}
/* Logo + brand link to vivariumlab.com (collapse toggle stays separate). */
.viv-rail-brand-link{
  display:flex; align-items:center; gap:10px;
  flex:1 1 auto; min-width:0; text-decoration:none; color:inherit;
}
.viv-rail-brand-link:hover .viv-rail-brand strong{ text-decoration:underline; }
.viv-rail-logo{
  width:46px; height:46px; flex:0 0 46px;
  border-radius:8px;
  display:block;
  object-fit:contain;
  background:#fff;
}
/* Dark logo art has its own dark background — no white plate behind it. */
:root[data-theme="dark"] .viv-rail-logo{ background:transparent; }
.viv-rail-logo[role="presentation"]{
  /* Fallback emoji rendering when no img is provided */
  display:flex; align-items:center; justify-content:center;
  font-size:1.4em;
  background:linear-gradient(135deg,#3b82f6,#7c3aed);
  color:#fff;
}
.viv-rail-brand{
  display:flex; flex-direction:column; min-width:0;
}
.viv-rail-brand-title{
  font-size:0.95em; font-weight:600; color:#111827; line-height:1.2;
}
.viv-rail-brand-sub{
  font-size:0.74em; color:#6b7280; line-height:1.2;
}

/* Plain read-only source display (no longer a clickable switcher button —
   source management lives in the Branch tab). */
.viv-workspace-switcher{
  margin:12px 12px 4px;
  padding:0;
  font-size:0.86em; color:#1f2937;
  display:flex; align-items:center;
}
.viv-workspace-switcher:hover{ background:none }
.viv-workspace-switcher .viv-ws-name{
  font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.viv-workspace-switcher .viv-ws-caret{ color:#9ca3af; font-size:0.78em }

/* The single scroll region: everything from the Workspace nav down lives here
   and scrolls as one, so a long study list pushes the nav up off the top rather
   than clipping. Only the brand + workspace chip above stay fixed. */
.viv-rail-scroll{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  padding:0;
}

.viv-rail-section{
  padding:10px 0 6px;
}
.viv-rail-section + .viv-rail-section{
  border-top:1px solid #ececec; margin-top:4px;
}
/* Studies is now a continuous nav item; its search/list section flows straight
   under the Workspace nav with no divider break. */
.viv-rail-section + #viv-rail-studies-section{ border-top:none; margin-top:0; }
:root[data-theme="dark"] .viv-rail-section + #viv-rail-studies-section{ border-top:none; }
/* Studies flow naturally within the shared scroll region (no inner scrollbar).
   Its header (label + search) is sticky so it pins to the top of the scroll
   region as the study list scrolls beneath — ChatGPT-sidebar style. */
#viv-rail-studies-section{
  display:flex; flex-direction:column;
}
.viv-rail-studies-head{
  position:sticky; top:0; z-index:5;
  background:#fafafa;
  padding-top:4px;
  box-shadow:0 1px 0 #ececec;
}
#viv-rail-investigations{
  overflow-x:hidden;
}

/* Clickable "Needs attention" items — hover affordance so it reads as a link
   to the associated study (each opens that study at its verdict). */
.na-item-click{ transition:background 0.12s ease, box-shadow 0.12s ease; }
.na-item-click:hover{ background:rgba(0,0,0,0.05); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.10); }
.na-item-click:hover span[style*="float:right"]{ opacity:0.9 !important; }
/* "Needs attention" starts collapsed; hide the "click to expand" hint once open. */
.needs-attention-banner[open] .na-toggle-hint{ display:none; }
.viv-rail-section-label{
  padding:0 16px 6px;
  font-size:0.68em; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:#9ca3af;
}
/* STUDIES section header — clickable → Studies overview. Aligned to the
   WORKSPACE nav items (same left inset, icon slot, and gap). */
.viv-rail-studies-link{
  display:flex; align-items:center; gap:12px; width:100%;
  margin:0 0 2px; padding:8px 16px;
  background:none; border:none; border-left:3px solid transparent; cursor:pointer;
  font-family:inherit; color:#374151; text-align:left; font-size:0.92em;
  transition:background 0.12s, color 0.12s;
}
.viv-rail-studies-link:hover{ background:#eef2ff; color:#4338ca; }
.viv-rail-studies-ico{ width:20px; height:20px; flex:0 0 20px; color:#6b7280; }
.viv-rail-studies-link:hover .viv-rail-studies-ico{ color:#4338ca; }
.viv-rail-studies-txt{ flex:1 1 auto; font-size:1em; font-weight:400; letter-spacing:0; text-transform:none; }
.viv-rail-link{
  display:flex; align-items:center; gap:12px;
  padding:8px 16px;
  text-decoration:none; color:#374151;
  font-size:0.92em;
  border-left:3px solid transparent;
  cursor:pointer;
  transition:background 0.1s, color 0.1s;
}
.viv-rail-link:hover{ background:#f3f4f6; color:#111827 }
.viv-rail-link.active{
  background:#e0e7ff; color:#1e40af; font-weight:600;
  border-left-color:#3b82f6;
}
.viv-rail-link.active .viv-rail-link-icon{ color:#1e40af }
.viv-rail-link-icon{
  display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; flex:0 0 20px;
  color:#6b7280;
}
.viv-rail-link-svg{
  width:18px; height:18px;
  display:block;
}
.viv-rail-link-label{
  flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.viv-rail-link-badge{
  background:#e5e7eb; color:#4b5563;
  font-size:0.72em; padding:1px 7px; border-radius:9999px;
  flex:0 0 auto;
}
.viv-rail-link.active .viv-rail-link-badge{ background:#c7d2fe; color:#1e3a8a }

/* Investigations group block ----------------------------------------------- */
.viv-rail-investigations-group{
  margin:2px 0 4px;
}
.viv-rail-investigations-group-header{
  display:flex; align-items:center; gap:8px;
  padding:6px 16px;
  font-size:0.84em; color:#374151; font-weight:500;
  cursor:pointer; user-select:none;
}
.viv-rail-investigations-group-header:hover{ background:#f3f4f6 }
/* Investigation pin: hover-reveal in the group header (mirrors the study pins). */
.viv-rail-investigations-group-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.viv-rail-inv-pin{ opacity:0; flex:none; font-size:0.82em; }
.viv-rail-investigations-group-header:hover .viv-rail-inv-pin{ opacity:0.5; }
.viv-rail-inv-pin:hover{ opacity:0.95 !important; transform:scale(1.15); }
.viv-rail-inv-pin.pinned{ opacity:1 !important; }
.viv-rail-investigations-group-arrow{
  display:inline-block; width:10px; color:#9ca3af; font-size:0.78em;
  transition:transform 0.15s ease;
}
.viv-rail-investigations-group.collapsed .viv-rail-investigations-group-arrow{
  transform:rotate(-90deg);
}
.viv-rail-investigations-group-name{
  flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.viv-rail-investigations-group-count{
  background:#e5e7eb; color:#4b5563;
  font-size:0.7em; padding:1px 7px; border-radius:9999px;
}
/* Active investigation (matches the current branch/context): rendered first and
 * expanded, with a left accent + weightier header so it reads as "you are here". */
.viv-rail-investigations-group.rail-iset-active{
  border-left:2px solid #6366f1; background:#f5f3ff;
}
.viv-rail-investigations-group.rail-iset-active .viv-rail-investigations-group-header{
  color:#4338ca; font-weight:600;
}
.viv-rail-investigations-group.rail-iset-active .viv-rail-investigations-group-count{
  background:#6366f1; color:#fff;
}
.viv-rail-investigations-group-items{
  display:flex; flex-direction:column;
  padding:2px 0 4px;
}
.viv-rail-investigations-group.collapsed .viv-rail-investigations-group-items{
  display:none;
}
.viv-rail-investigations-group-items .viv-rail-link{
  padding:5px 16px 5px 36px;
  font-size:0.86em; color:#4b5563;
}
.viv-rail-investigations-group-items .viv-rail-link.active{
  background:#e0e7ff; color:#1e40af;
}
.viv-rail-investigations-group-items .viv-rail-link-sub{
  display:block; font-size:0.74em; color:#9ca3af;
  margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Study-row pin toggle + Pinned strip + flat Ungrouped list -------------- */
.viv-rail-sublink { position: relative; }
.viv-rail-sublink:hover { background:#f3f4f6; }
.viv-rail-pin {
  flex: none;
  font-size: 0.82em;
  line-height: 1;
  cursor: pointer;
  filter: grayscale(1);
  opacity: 0;              /* hidden by default — only appears on row hover */
  transition: opacity .12s ease, filter .12s ease, transform .12s ease;
}
.viv-rail-sublink:hover .viv-rail-pin { opacity: 0.5; }
.viv-rail-pin:hover { opacity: 0.9 !important; transform: scale(1.15); }
/* A pinned study keeps its pin visible even when not hovering. */
.viv-rail-pin.pinned { filter: none; opacity: 1; }
.viv-rail-sublink:hover .viv-rail-pin.pinned { opacity: 1; }

.viv-rail-section-subheader {
  font-size: 0.68em;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: #94a3b8;
  padding: 6px 14px 2px;
}
.viv-rail-pinned-section {
  background: #fffdf5;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 3px;
}
.viv-rail-pinned-section .viv-rail-sublink-pinned { color: #78716c; }
.viv-rail-ungrouped-divider {
  height: 1px;
  background: var(--border, #e2e8f0);
  margin: 8px 12px 4px;
}
.viv-rail-ungrouped-section .viv-rail-sublink { color: #475569; }

/* Focused-study rail state (single-investigation view) -------------------- */
.viv-rail-focused-study{
  margin:4px 8px; padding:8px 12px;
  background:#eff6ff; border-left:3px solid #3b82f6;
  border-radius:0 6px 6px 0;
}
.viv-rail-focused-study .viv-rail-link.active{
  background:transparent; color:#1e40af; border-left:none; padding:4px 0;
}
.viv-rail-focused-study .viv-rail-study-icon{
  color:#3b82f6;
}
.viv-rail-focused-hint{
  display:block; padding:4px 0 6px 28px; color:#6b7280; font-size:0.78em;
}
.viv-rail-focused-study .viv-rail-back-link{
  padding:4px 0 4px 28px; font-size:0.85em; color:#6b7280; border-left:none;
}
.viv-rail-focused-study .viv-rail-back-link:hover{ color:#3b82f6 }

/* Rail footer (user identity) ---------------------------------------------- */
.viv-rail-footer{
  display:flex; align-items:center; gap:10px;
  padding:10px 16px;
  border-top:1px solid #ececec;
  margin-top:auto;
}
.viv-rail-footer-avatar{
  width:30px; height:30px; flex:0 0 30px;
  border-radius:50%;
  background:#c7d2fe; color:#1e3a8a;
  display:flex; align-items:center; justify-content:center;
  font-size:0.78em; font-weight:600;
}
.viv-rail-footer-name{
  font-size:0.86em; font-weight:600; color:#1f2937; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.viv-rail-footer-email{
  font-size:0.74em; color:#6b7280; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.viv-rail-footer-text{
  display:flex; flex-direction:column; min-width:0; flex:1 1 auto;
}

/* Rail collapse toggle ----------------------------------------------------- */
.viv-rail-toggle{
  position:absolute; top:4px; right:8px;
  width:28px; height:28px;
  border:1px solid transparent; background:transparent;
  border-radius:6px;
  cursor:pointer; color:#6b7280;
  display:flex; align-items:center; justify-content:center;
  padding:0;
  transition:background 0.15s, color 0.15s, border-color 0.15s;
  z-index:2;
}
.viv-rail-toggle:hover{
  background:#f3f4f6; color:#1f2937; border-color:#e5e7eb;
}
.viv-rail-toggle-svg{
  width:16px; height:16px;
  display:block;
  transition:transform 0.2s;
}
/* Collapsed: the toggle overlays the whole header, hidden until the header is
   hovered — so the Vivarium logo shows by default and the expand icon appears
   only on mouse-over (logo dims behind it). Click it to expand. */
.viv-rail.viv-rail-collapsed .viv-rail-toggle{
  top:0; left:0; right:0; bottom:0; transform:none;
  width:auto; height:auto;
  border-radius:8px;
  opacity:0; transition:opacity 0.12s;
  z-index:3;
}
.viv-rail.viv-rail-collapsed .viv-rail-header:hover .viv-rail-toggle{
  opacity:1; background:rgba(249,250,251,0.94);
  border-color:#e5e7eb; color:#1f2937;
}
.viv-rail.viv-rail-collapsed .viv-rail-header:hover .viv-rail-logo{ opacity:0.12 }

/* Collapsed-rail state ----------------------------------------------------- */
.viv-rail.viv-rail-collapsed{
  width:56px; flex-basis:56px;
}
.viv-rail.viv-rail-collapsed .viv-rail-header{
  /* Keep the Vivarium logo (the toggle overlays it on hover); center it. */
  padding:0 8px 12px; justify-content:center;
}
.viv-rail.viv-rail-collapsed .viv-rail-logo{ transition:opacity 0.12s }
.viv-rail.viv-rail-collapsed .viv-rail-brand{ display:none }
/* A short stand-in for the workspace-name chip: just the status dot, centered.
   Still opens the Branch page on click. */
.viv-rail.viv-rail-collapsed .viv-workspace-switcher{ display:flex; justify-content:center; margin:10px 0 2px; }
.viv-rail.viv-rail-collapsed .viv-workspace-name{ padding:0; justify-content:center; }
.viv-rail.viv-rail-collapsed .viv-ws-text{ display:none }
.viv-rail.viv-rail-collapsed .viv-workspace-name .viv-workspace-switcher-glyph{ font-size:12px; margin-top:0; }
.viv-rail.viv-rail-collapsed .viv-rail-section-label{ display:none }
.viv-rail.viv-rail-collapsed .viv-rail-link{
  /* Keep the SAME left padding + accent border as expanded so each icon sits at
     the exact same x-position — no horizontal shift when collapsing/expanding. */
  padding:8px 16px;
}
.viv-rail.viv-rail-collapsed .viv-rail-link-label{ display:none }
.viv-rail.viv-rail-collapsed .viv-rail-link-badge{ display:none }
.viv-rail.viv-rail-collapsed .viv-rail-investigations-group-header{
  justify-content:center; padding:6px 0;
}
.viv-rail.viv-rail-collapsed .viv-rail-investigations-group-name{ display:none }
.viv-rail.viv-rail-collapsed .viv-rail-investigations-group-count{ display:none }
.viv-rail.viv-rail-collapsed .viv-rail-investigations-group-items{ display:none }
/* The rail's "Studies" list (rendered into #viv-rail-investigations by
 * _renderRailInvestigationGroups in walkthrough.js) emits .viv-rail-iset-group
 * + .viv-rail-sublink children — different class names than the older
 * .viv-rail-investigations-group-* rules above match. When the rail is
 * collapsed those leaked through and wrapped to single-character columns
 * (see screenshot in friction log). Hide the whole host + its enclosing
 * .viv-rail-section so the collapsed rail shows only the top-level icons. */
.viv-rail.viv-rail-collapsed #viv-rail-investigations{ display:none }
.viv-rail.viv-rail-collapsed .viv-rail-section:has(#viv-rail-investigations){ display:none }
.viv-rail.viv-rail-collapsed .viv-rail-footer{
  padding:10px 8px; justify-content:center;
}
.viv-rail.viv-rail-collapsed .viv-rail-footer-text{ display:none }

/* Main column -------------------------------------------------------------- */
.viv-main{
  flex:1 1 auto;
  display:flex; flex-direction:column;
  min-width:0;
  background:var(--bg);
  overflow:hidden;
}
/* The content pane must fill .viv-main's width. Without this it shrink-wrapped
   to the active page's content and read as centered — invisible on content-rich
   pages (Studies) but narrow on sparse ones (a Registry facet with few cards).
   Stretch it so every page renders full-bleed regardless of how much it holds. */
.viv-content{ align-self:stretch; width:100%; }

/* Slim topbar -------------------------------------------------------------- */
.viv-topbar{
  height:56px; flex:0 0 56px;
  padding:0 24px;
  background:#fff; border-bottom:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.viv-topbar-breadcrumbs{
  display:flex; align-items:center; gap:8px;
  font-size:0.92em; color:#374151;
  min-width:0; overflow:hidden;
}
.viv-topbar-breadcrumbs .viv-crumb{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:#6b7280; text-decoration:none;
}
.viv-topbar-breadcrumbs .viv-crumb:hover{ color:#1f2937 }
.viv-topbar-breadcrumbs .viv-crumb.viv-crumb-current{
  color:#1f2937; font-weight:600;
}
.viv-topbar-breadcrumbs .viv-crumb-sep{
  color:#9ca3af; font-size:0.95em;
}
.viv-topbar-breadcrumbs .viv-crumb-sep::before{ content:"\203a"; }

.viv-topbar-actions{
  display:flex; align-items:center; gap:8px;
  flex:0 0 auto;
}

/* Topbar buttons ----------------------------------------------------------- */
.viv-icon-btn{
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #e5e7eb; border-radius:6px;
  color:#4b5563; cursor:pointer;
  font-size:1em; line-height:1;
  text-decoration:none;
}
.viv-icon-btn:hover{ background:#f3f4f6; color:#1f2937 }

.viv-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px;
  background:#fff; border:1px solid #e5e7eb; border-radius:6px;
  color:#1f2937; cursor:pointer;
  font-size:0.86em; font-weight:500;
  text-decoration:none;
}
.viv-btn:hover{ background:#f3f4f6 }
.viv-btn.viv-btn-primary{
  background:#3b82f6; border-color:#3b82f6; color:#fff;
}
.viv-btn.viv-btn-primary:hover{ background:#2563eb; border-color:#2563eb }
.viv-btn.viv-btn-success{
  background:#d1fae5; border-color:#a7f3d0; color:#065f46;
}
.viv-btn.viv-btn-success:hover{ background:#a7f3d0 }
.viv-btn:disabled,
.viv-btn.viv-btn-disabled{
  opacity:0.6; cursor:default;
}

.viv-kebab{
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:6px;
  color:#6b7280; cursor:pointer;
  font-size:1.1em; line-height:1;
}
.viv-kebab:hover{ background:#f3f4f6; color:#1f2937 }

.viv-avatar{
  width:32px; height:32px; flex:0 0 32px;
  border-radius:50%;
  background:#c7d2fe; color:#1e3a8a;
  display:flex; align-items:center; justify-content:center;
  font-size:0.78em; font-weight:600;
  cursor:pointer; user-select:none;
}
.viv-avatar:hover{ background:#a5b4fc }
.viv-avatar-link{ text-decoration:none }
/* Generic "Connect GitHub" prompt when `gh auth login` hasn't run. Muted
 * palette so it reads as an affordance, not an identity. */
.viv-avatar-no-github{
  background:#e5e7eb; color:#6b7280; font-size:1.05em; font-weight:400;
}
.viv-avatar-no-github:hover{ background:#d1d5db; color:#1f2937 }
.viv-rail-footer-no-github{
  color:#6b7280;
}
.viv-rail-footer-no-github strong{ font-weight:500 }
.viv-rail-footer-no-github code{
  background:#f3f4f6; padding:0 4px; border-radius:3px;
  font-size:0.92em; color:#374151;
}

/* Content area ------------------------------------------------------------- */
.viv-content{
  flex:1 1 auto;
  overflow-y:auto; overflow-x:hidden;
  /* Always reserve the scrollbar gutter so switching between a short tab and a
     long one (e.g. Registry Modules -> Discovered) doesn't shift the content. */
  scrollbar-gutter: stable;
  padding:24px;
  background:var(--bg);
}
/* Pages fill the full content width (up to the scrollbar) instead of a centered
 * 1200px column that left an awkward blank strip on the right. Inner elements
 * that need a comfortable reading measure keep their own max-width. */
.viv-content > .page{ max-width:none; margin:0 }

/* Tooltip for decoration-only controls ------------------------------------- */
.viv-tooltip{
  position:relative;
}
.viv-tooltip[data-tooltip]:hover::after{
  content:attr(data-tooltip);
  position:absolute; top:calc(100% + 6px); right:0;
  background:#1f2937; color:#fff;
  padding:4px 8px; border-radius:4px;
  font-size:0.78em; white-space:nowrap;
  z-index:60;
}
/* Wide / multi-line variant for explainer chips (mem3dg-readdy friction #36
 * — Run-cluster actions had title= tooltips that nobody discovered; a visible
 * chip makes the explainer signposted). Inline-block label with a hovering
 * pre-wrap card. */
.viv-info-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:#e5e7eb; color:#4b5563;
  font-size:11px; font-weight:600;
  cursor:help; position:relative;
}
.viv-info-chip:hover{ background:#d1d5db; color:#111827 }
.viv-info-chip[data-tooltip]:hover::after{
  content:attr(data-tooltip);
  position:absolute; top:calc(100% + 6px); left:0;
  background:#1f2937; color:#fff;
  padding:8px 10px; border-radius:4px;
  font-size:0.78em; line-height:1.5;
  white-space:pre-wrap; min-width:260px; max-width:340px;
  z-index:60;
  text-align:left; font-weight:400;
}

/* Study detail — cleaner tab strip + summary header (UX polish pass) -------- */
.investigation-detail-tabs{
  display:flex; gap:24px; align-items:center;
  border-bottom:1px solid #e5e7eb;
  margin:20px 0 16px;
}
.investigation-detail-tab{
  background:transparent; border:0;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 0; margin:0;
  font:inherit; font-size:0.95em; color:#6b7280;
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color 0.12s, border-color 0.12s;
}
.investigation-detail-tab:hover{ color:#1f2937 }
.investigation-detail-tab.active{
  color:#2563eb; border-bottom-color:#2563eb;
  font-weight:600;
}
.investigation-detail-tab .tab-icon{
  width:18px; height:18px; flex:0 0 18px;
  display:block;
}
.investigation-detail-tab .tab-count-badge{
  background:#f3f4f6; color:#374151;
  padding:1px 6px; border-radius:10px;
  font-size:0.78em; font-weight:600;
  margin-left:4px;
}

/* Study Detail page shell — gives breathing room around the content
   in both the standalone /studies/<name> view and inside the
   Investigations iframe (where body margin:0 used to push text
   flush against the iframe edges). */
.study-page{
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 32px 48px;
  box-sizing: border-box;
}
@media (max-width: 700px){
  .study-page{ padding: 16px 16px 32px; }
}

/* Study-header card styling */
.study-header{
  margin-bottom:8px;
}
.study-title{
  margin:0 0 4px; font-size:1.6em; color:#111827;
}
.study-title .study-name{ color:#1f2937 }
.study-subtitle{
  margin:0 0 12px; color:#4b5563; font-size:0.95em; line-height:1.4;
}
.study-summary{
  display:flex; gap:24px; margin:12px 0; padding:12px;
  background:#fafafa; border:1px solid #e5e7eb; border-radius:6px;
}
.study-summary > div{ flex:1 }
.study-summary dt{
  font-size:0.78em; color:#6b7280;
  text-transform:uppercase; letter-spacing:0.04em;
  margin:0 0 4px;
}
.study-summary dd{
  margin:0; font-weight:600; color:#1f2937; font-size:0.95em;
}
.study-summary dd.status-pill{
  display:inline-block;
}

/* Action row on investigation cards (Run / Re-run / Delete) */
.investigation-card .ic-actions{
  margin-top:10px; display:flex; gap:8px;
  padding-top:10px; border-top:1px solid #f3f4f6;
}
.investigation-card .ic-actions .btn-mini{
  flex:none;
}

/* Registry browser tabs */
.registry-tabs{
  display:flex; gap:24px; align-items:center;
  border-bottom:1px solid #e5e7eb;
  margin:16px 0 12px;
}
.registry-tab{
  background:transparent; border:0;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 0; margin:0;
  font:inherit; font-size:0.95em; color:#6b7280;
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color 0.12s, border-color 0.12s;
}
.registry-tab:hover{ color:#1f2937 }
.registry-tab.active{
  color:#2563eb; border-bottom-color:#2563eb;
  font-weight:600;
}
.registry-tab .count-badge{
  background:#f3f4f6; color:#374151;
  padding:1px 6px; border-radius:10px;
  font-size:0.78em; font-weight:600;
  margin-left:4px;
}
.registry-tab-panel{ display:none }
.registry-tab-panel.active{ display:block }
.registry-search{
  width:100%; padding:8px 12px;
  border:1px solid #e5e7eb; border-radius:6px;
  font-size:0.9em; margin-bottom:12px;
}
.registry-entry{
  padding:10px 12px; border-bottom:1px solid #f3f4f6;
  font-size:0.92em;
}
.registry-entry:last-child{ border-bottom:0 }
.registry-entry strong{ font-size:1.02em; color:#1f2937 }
.registry-entry code{ font-size:0.88em }
.registry-entry pre{ margin:4px 0; max-height:200px; overflow:auto }

/* Rich registry entry: description + ports (contract) + config schema, a more
   accessible take on the loom composite viewer's process view. */
.reg-entry-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:2px;
}
.reg-entry-name{ min-width:0 }
.registry-use-badge{
  flex:none;
  font-size:0.72em; font-weight:600;
  padding:2px 9px; border-radius:9999px;
  background:#eef2ff; color:#4338ca; border:1px solid #e0e7ff;
  white-space:nowrap;
}

/* ── Registry semantic zoom + view mode ─────────────────────────────────── */
.registry-view-toolbar{ display:flex; align-items:center; gap:10px; margin:0 0 6px; flex-wrap:wrap; }
.registry-view-toolbar .registry-search{ flex:1 1 220px; margin:0; }
.registry-zoom, .registry-viewmode{
  display:inline-flex; border:1px solid #e5e7eb; border-radius:6px; overflow:hidden; flex:none;
}
.reg-zoom-btn, .reg-view-btn{
  border:none; background:#fff; color:#64748b; cursor:pointer;
  padding:5px 11px; font-size:0.85em; border-right:1px solid #e5e7eb; line-height:1.2;
}
.reg-zoom-btn:last-child, .reg-view-btn:last-child{ border-right:none; }
.reg-zoom-btn.active, .reg-view-btn.active{ background:#eef2ff; color:#4338ca; font-weight:600; }
.reg-zoom-btn:hover, .reg-view-btn:hover{ background:#f8fafc; }
.registry-view-toolbar.view-table .registry-zoom{ opacity:0.4; pointer-events:none; }

/* Card containers: both middle (Cards) and Full span a full row now. */
.reg-cards-grid{ display:flex; flex-direction:column; gap:10px; padding:4px 0; }
.reg-cards-full{ display:flex; flex-direction:column; gap:14px; padding:4px 0; }

/* ── Multi-column cards grid (shared: registry / composites / modules) ──
   Applied inline (grid-template-columns) by _applyCardCols; default is 'auto'
   (auto-fill to width), overridable with the toolbar column slider. In a
   narrow grid cell the cards' horizontal internal layouts stack vertically. */
.cards-grid-cols{ display:grid !important; gap:12px; align-items:start; padding:4px 0; }
.cards-grid-cols .reg-card-row{ flex-direction:column; gap:8px; }
.cards-grid-cols .reg-card-stats{ flex-flow:row wrap; gap:6px; }
.cards-grid-cols .ccc-grid{ grid-template-columns:1fr !important; gap:6px; }
.cards-grid-cols .ccard.ccard-compact{ width:auto; }
.cards-grid-cols .mrow-grid{ grid-template-columns:1fr !important; gap:6px; }
.cards-grid-cols .module-card.mrow{ width:auto; }

/* Column control: Auto toggle + slider + count. */
.cols-ctl-slot{ display:inline-flex; align-items:center; gap:6px; margin-right:10px; }
.cols-auto-btn{
  border:1px solid #e2e8f0; background:#fff; color:#475569; border-radius:5px;
  padding:2px 9px; cursor:pointer; font-size:0.8em; font-weight:600;
}
.cols-auto-btn.active{ background:#eef2ff; color:#3730a3; border-color:#c7d2fe; }
.cols-slider{ width:84px; accent-color:#6366f1; cursor:pointer; }
.cols-count{ min-width:30px; text-align:center; font-size:0.76em; color:#64748b; font-variant-numeric:tabular-nums; }

/* Middle card: full-row — identity + description on the left, usage stats on the
   right, config/ports one click down. Denser than Full, richer than the table. */
.registry-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  padding:12px 15px; display:flex; flex-direction:column; gap:8px; min-width:0;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.registry-card:hover{ border-color:#c7d2fe; box-shadow:0 3px 12px -6px rgba(30,41,59,.18); }
.reg-card-row{ display:flex; align-items:flex-start; gap:18px; }
.reg-card-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.reg-card-stats{
  flex:none; display:flex; flex-wrap:wrap; gap:5px 14px; align-items:center;
  justify-content:flex-end; max-width:360px;
}
.reg-stat{ font-size:0.8em; color:#64748b; white-space:nowrap; }
.reg-stat-glyph{ opacity:0.6; margin-right:4px; }
.reg-stat strong{ color:#334155; font-weight:600; }
.reg-card-head{ display:flex; align-items:baseline; gap:8px; }
.reg-card-name{ font-size:1.02em; color:#0f172a; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reg-card-addr{
  color:#94a3b8; font-size:0.78em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.reg-card-desc{
  margin:2px 0 0; color:#475569; font-size:0.87em; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Selection (click a row/card) — highlighted, and re-focused on zoom change. */
.registry-card.reg-selected{ border-color:#6366f1; box-shadow:0 0 0 2px rgba(99,102,241,0.25); }
.registry-entry-full.reg-selected .loom-card{ box-shadow:0 0 0 2px #6366f1, 0 1px 3px rgba(15,23,42,0.06); }
.registry-table tr.reg-selected, .registry-table tr.reg-selected td{ background:#eef2ff; }
.reg-card-details{ margin-top:3px; }
.reg-card-details > summary{
  cursor:pointer; user-select:none; color:#64748b; font-size:0.8em; list-style:none;
}
.reg-card-details > summary::-webkit-details-marker{ display:none; }
.reg-card-details > summary::before{ content:'▸ '; color:#94a3b8; }
.reg-card-details[open] > summary::before{ content:'▾ '; }
.reg-card-ports-meta{ color:#94a3b8; font-weight:400; }
.reg-card-portsonly{ color:#94a3b8; font-size:0.8em; }
.reg-card-cfg{ margin:6px 0 0; max-height:200px; overflow:auto; }
.reg-ports-compact{ margin:6px 0 2px; }

/* Full zoom: loom-style process view — inputs in the left margin, outputs in the
   right margin (with types), a rich middle taking the full row. */
.registry-entry-full{ min-width:0; }
/* Process node — a clean rectangle (no rounded corners) with a kind-colored top
   rule, matching the workbench's soft-gray + indigo palette (process-bigraph /
   loom aesthetic) rather than a heavy dark bar. */
.loom-card{
  --loom-accent:#6366f1;
  background:#fff; border:1px solid #cbd5e1; border-radius:0; overflow:hidden;
  border-top:2.5px solid var(--loom-accent);
  box-shadow:0 1px 3px rgba(15,23,42,0.06);
  transition:box-shadow .14s ease, border-color .14s ease;
}
.loom-card:hover{ border-color:#94a3b8; box-shadow:0 4px 14px -4px rgba(15,23,42,0.14); }
.loom-card-emitter{ --loom-accent:#f97316; }
.loom-card-visualization{ --loom-accent:#a855f7; }
.loom-card-step{ --loom-accent:#14b8a6; }
.loom-card-report_card{ --loom-accent:#f59e0b; }
.loom-config{
  display:flex; flex-wrap:wrap; gap:5px; align-items:center;
  padding:8px 16px; background:#f8fafc; border-bottom:1px solid #eef2f7; font-size:0.74em;
}
.loom-config-label{
  text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  color:#94a3b8; font-size:0.85em; margin-right:4px;
}
.loom-config code{
  background:#eef2ff; color:#3730a3; padding:2px 8px; border-radius:5px;
  font-size:0.94em; border:1px solid #e0e7ff;
}
.loom-config .muted{ color:#94a3b8; }
.loom-row{
  display:grid; grid-template-columns:max-content minmax(0,1fr) max-content;
  align-items:start; gap:22px; padding:16px 18px;
}
.loom-ports{ display:flex; flex-direction:column; gap:7px; min-width:0; padding-top:4px; }
/* Inputs hug the LEFT edge (dot then name); outputs hug the RIGHT edge (name
   then dot) — like the port handles on a loom process rectangle. */
.loom-ports-in{ align-items:flex-start; text-align:left; }
.loom-ports-out{ align-items:flex-end; text-align:right; }
.loom-port{ display:inline-flex; align-items:center; gap:7px; font-size:0.82em; max-width:260px; }
.loom-ports-out .loom-port{ flex-direction:row-reverse; }
.loom-port-dot{ width:7px; height:7px; border-radius:50%; background:#6366f1; flex:none; }
.loom-ports-out .loom-port-dot{ background:#10b981; }
.loom-port-name{ font-weight:600; color:#1e40af; white-space:nowrap; }
.loom-port-type{
  color:#94a3b8; font-family:ui-monospace,Menlo,monospace; font-size:0.85em;
  max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.loom-port-empty{ color:#cbd5e1; font-size:0.82em; }
.loom-body{ text-align:left; min-width:0; }
.loom-body-head{ display:flex; align-items:baseline; gap:10px; }
.loom-name{ font-weight:700; color:#0f172a; font-size:1.12em; }
.loom-body .loom-addr{ display:block; margin:3px 0 0; color:#94a3b8; font-size:0.8em; }
.loom-desc{
  margin:8px 0 0; color:#475569; font-size:0.9em; line-height:1.55; white-space:pre-line;
}

/* Interactive run panel (Full card): editable config + inputs → Run → outputs. */
.loom-run{ border-top:1px solid #eef2f7; }
.loom-run > summary{
  cursor:pointer; user-select:none; padding:8px 18px; font-size:0.85em; color:#4338ca;
  font-weight:600; list-style:none; background:#f8fafc;
}
.loom-run > summary::-webkit-details-marker{ display:none; }
.loom-run > summary::before{ content:'▸ '; }
.loom-run[open] > summary::before{ content:'▾ '; }
.loom-run-form{ display:flex; flex-direction:column; gap:12px; padding:12px 18px 16px; }
.loom-run-section{ display:flex; flex-direction:column; gap:6px; }
.loom-run-legend{
  font-size:0.72em; text-transform:uppercase; letter-spacing:0.06em;
  font-weight:700; color:#94a3b8;
}
/* Config as a per-field form (typed from the resolved defaults). */
.loom-cfg-fields{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:6px 14px;
}
.loom-cfg-row{ display:flex; align-items:center; gap:8px; font-size:0.82em; min-width:0; }
.loom-cfg-key{
  flex:0 0 40%; color:#334155; font-weight:600; font-family:ui-monospace,Menlo,monospace;
  font-size:0.92em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.loom-cfg-field{
  flex:1 1 auto; min-width:0; padding:4px 8px; border:1px solid #e2e8f0; border-radius:6px;
  font-size:0.95em; color:#1e293b; background:#fff;
}
.loom-cfg-field[type="checkbox"]{ flex:none; width:16px; height:16px; }
/* Input ports: one row each — name + expected TYPE, then an editable default.
   Nested/complex values get an auto-growing box (no scrollbar). */
.loom-in-fields{ display:flex; flex-direction:column; gap:8px; }
.loom-in-row{ display:flex; flex-direction:column; gap:3px; }
.loom-in-head{ display:flex; align-items:baseline; gap:8px; }
.loom-in-key{ color:#1e40af; font-weight:600; font-family:ui-monospace,Menlo,monospace; font-size:0.85em; }
.loom-in-type{
  color:#64748b; font-size:0.76em; font-family:ui-monospace,Menlo,monospace;
  background:#f1f5f9; padding:1px 6px; border-radius:4px;
}
.loom-in-field{
  padding:5px 9px; border:1px solid #e2e8f0; border-radius:6px; font-size:0.85em;
  color:#1e293b; background:#fff; width:100%;
}
textarea.loom-in-field{
  font-family:ui-monospace,Menlo,monospace; font-size:0.82em; line-height:1.4;
  resize:none; overflow:hidden; min-height:30px;
}
.loom-in-field[type="checkbox"]{ width:16px; height:16px; }
.loom-copy-btn{ margin-left:10px; font-weight:500; }
.loom-run-field{ display:flex; flex-direction:column; gap:4px; font-size:0.78em; color:#64748b; font-weight:600; }
.loom-run-field textarea{
  font-family:ui-monospace,Menlo,monospace; font-size:0.82em; line-height:1.4;
  padding:8px 10px; border:1px solid #e2e8f0; border-radius:6px; resize:vertical;
  color:#1e293b; background:#fff; font-weight:400;
}
.loom-run-interval-field{ flex-direction:row; align-items:center; gap:8px; }
.loom-run-interval-field input{
  width:90px; padding:4px 8px; border:1px solid #e2e8f0; border-radius:6px; font-weight:400;
}
.loom-run-actions{ margin-top:2px; }
.loom-run-actions .action-btn{ margin-top:0; }
.loom-run-output{ margin-top:4px; }
.loom-run-ok{ color:#047857; font-size:0.85em; font-weight:600; margin-bottom:4px; }
.loom-run-err{
  color:#b91c1c; font-size:0.85em; font-weight:600;
  background:#fef2f2; border:1px solid #fecaca; border-radius:6px; padding:8px 10px;
}
.loom-run-pre{ margin:4px 0 0; max-height:280px; overflow:auto; background:#f8fafc; border:1px solid #eef2f7; border-radius:6px; padding:8px 10px; }
.loom-run-trace{ font-size:0.78em; color:#7f1d1d; background:#fef2f2; border-color:#fecaca; }

/* ── Runnable Full card ──────────────────────────────────────────────────
   The config bar IS the editable config, the left port column IS the editable
   inputs, and Run lives in the body — one unified runnable card (no dropdown). */
.loom-config-edit{ padding:9px 16px; }
.loom-cfg-inline{ display:flex; flex-wrap:wrap; gap:6px 14px; flex:1 1 auto; align-items:center; }
.loom-cfg-inline .loom-cfg-row{
  flex:0 0 auto; background:#fff; border:1px solid #e7ecf3; border-radius:7px; padding:3px 8px;
}
.loom-cfg-inline .loom-cfg-key{ flex:0 0 auto; max-width:150px; }
.loom-cfg-inline .loom-cfg-field{ flex:0 0 auto; width:118px; }
.loom-cfg-inline .loom-cfg-field[type="checkbox"]{ width:16px; }
.loom-load-hint{ font-size:0.85em; }
/* Wider left column so editable input fields are usable (static loom cards keep
   the narrow max-content margin). */
/* Runnable card: editable inputs left, body center, and a wider RIGHT panel
   holding the output ports + the run results (collapsible JSON viewer). */
.loom-runnable .loom-row{ grid-template-columns:280px minmax(0,1fr) minmax(300px,0.95fr); }
.loom-inputs-edit{ width:100%; gap:9px; }
.loom-inputs-edit .loom-in-row{ width:100%; }
.loom-inputs-edit .loom-in-field{ width:100%; }
.loom-runnable .loom-run-actions{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:12px; padding-top:12px; border-top:1px solid #eef2f7;
}
/* Runnable Full card as a vertical stack: info → config → inputs → run →
   outputs (ports + collapsible JSON) at the bottom. */
.loom-card-stack{ display:flex; flex-direction:column; }
.loom-card-stack .loom-info{ padding:14px 18px 12px; }
.loom-card-stack .loom-info .loom-addr{ display:block; margin:3px 0 0; }
.loom-card-stack .loom-sec{ padding:12px 18px; border-top:1px solid #eef2f7; }
.loom-card-stack .loom-sec-label{
  text-transform:uppercase; letter-spacing:.06em; font-size:0.66em;
  font-weight:700; color:#94a3b8; margin-bottom:9px;
}
.loom-card-stack .loom-cfg-inline{ display:flex; flex-wrap:wrap; gap:7px 16px; }
.loom-inputs-stack{ display:flex; flex-wrap:wrap; gap:10px 18px; width:auto; }
.loom-inputs-stack .loom-in-row{ flex:1 1 240px; min-width:0; max-width:380px; }
.loom-inputs-stack .loom-in-field{ width:100%; }
.loom-card-stack .loom-run-actions{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 18px; border-top:1px solid #eef2f7; margin:0;
}
.loom-card-stack .loom-run-actions .action-btn{ margin-top:0; }
.loom-sec-out{ background:#fbfcfe; }
.loom-out-ports{ display:flex; flex-wrap:wrap; gap:6px 10px; }
.loom-out-ports:empty{ display:none; }
.loom-out-ports .loom-port{
  background:#f8fafc; border:1px solid #eef2f7; border-radius:5px;
  padding:2px 8px; font-size:0.8em;
}
.loom-out-ports .loom-port-dot{ background:#10b981; }
.loom-card-stack .loom-run-output:empty{ display:none; }
.loom-card-stack .loom-run-output{ margin-top:10px; }

.loom-out-panel{ min-width:0; display:flex; flex-direction:column; gap:10px; }
.loom-out-panel .loom-run-output:empty{ display:none; }
.loom-out-panel .loom-run-output{
  border-top:1px solid #eef2f7; padding-top:10px; min-width:0;
}

/* Collapsible JSON viewer for run outputs. */
.loom-run-ok{ display:flex; align-items:center; gap:10px; color:#047857; font-size:0.85em; font-weight:600; margin-bottom:6px; }
.json-viewer{
  font-family:ui-monospace,Menlo,monospace; font-size:0.8em; line-height:1.55;
  max-height:320px; overflow:auto; background:#f8fafc; border:1px solid #eef2f7;
  border-radius:6px; padding:8px 10px;
}
.json-viewer .jt-row{ white-space:pre-wrap; word-break:break-word; padding-left:14px; }
.json-viewer .jt-branch{ }
.json-viewer .jt-branch > summary{
  cursor:pointer; list-style:none; white-space:nowrap;
}
.json-viewer .jt-branch > summary::-webkit-details-marker{ display:none; }
.json-viewer .jt-branch > summary::before{ content:'▸'; color:#94a3b8; display:inline-block; width:12px; }
.json-viewer .jt-branch[open] > summary::before{ content:'▾'; }
.json-viewer .jt-children{ border-left:1px solid #e5e7eb; margin-left:5px; padding-left:6px; }
.jt-key{ color:#0369a1; }
.jt-colon{ color:#94a3b8; }
.jt-punct{ color:#94a3b8; }
.jt-count{ color:#cbd5e1; font-size:0.85em; margin:0 2px; }
.jt-str{ color:#15803d; }
.jt-num{ color:#b45309; }
.jt-bool{ color:#7c3aed; }
.jt-null{ color:#9ca3af; font-style:italic; }
.loom-copy-btn{ margin-left:auto; }

/* Per-process cross-study track record: studies participated + percent success. */
.reg-succ, .reg-succ-inline{ font-weight:700; border-radius:4px; padding:0 5px; font-size:0.9em; }
.reg-succ-inline{ margin-left:2px; font-size:0.82em; }
.reg-succ-hi{ color:#047857; background:#ecfdf5; }
.reg-succ-mid{ color:#b45309; background:#fffbeb; }
.reg-succ-lo{ color:#b91c1c; background:#fef2f2; }
.reg-stat-part .reg-stat-glyph{ color:#6366f1; }

/* Middle (grid) zoom: config + ports collapsed behind a click-to-expand summary. */
.reg-mid-details{ margin-top:8px; border-top:1px solid #f1f5f9; }
.reg-mid-details > summary{
  cursor:pointer; list-style:none; padding:7px 0 2px; display:flex; align-items:center; gap:8px;
  font-size:0.72em; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:#94a3b8;
}
.reg-mid-details > summary::-webkit-details-marker{ display:none; }
.reg-mid-details > summary::before{ content:'▸'; color:#cbd5e1; font-size:1.15em; }
.reg-mid-details[open] > summary::before{ content:'▾'; }
.reg-mid-details > summary:hover{ color:#64748b; }
.reg-mid-sum{ text-transform:none; letter-spacing:0; font-weight:500; color:#cbd5e1; font-size:0.95em; }
.reg-mid-details .reg-mid{ margin-top:2px; border-top:none; padding-top:2px; }
:root[data-theme="dark"] .reg-mid-details{ border-color:var(--border-faint); }
:root[data-theme="dark"] .reg-mid-details > summary{ color:var(--text-muted); }
:root[data-theme="dark"] .reg-mid-sum{ color:#8494a8; }

/* Middle (grid) zoom: compact bigraph-loom-style node — config strip on top,
   input ports down the left, output ports down the right (read-only). */
.reg-mid{
  margin-top:8px; padding-top:8px; border-top:1px solid #f1f5f9;
  display:flex; flex-direction:column; gap:7px;
}
.reg-mid-config{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.reg-mid-label{
  text-transform:uppercase; letter-spacing:.06em; font-size:0.62em;
  font-weight:700; color:#94a3b8; margin-right:3px;
}
.reg-mid-config code{
  background:#eef2ff; color:#3730a3; border:1px solid #e0e7ff; border-radius:4px;
  padding:1px 6px; font-size:0.72em;
}
.reg-mid-ports{ display:flex; gap:24px; align-items:flex-start; }
.reg-mid-col{
  flex:1 1 0; min-width:0; display:flex; flex-wrap:wrap; gap:4px;
  align-items:baseline; align-content:flex-start;
}
.reg-mid-out{ justify-content:flex-end; }
.reg-ip-title{
  flex:0 0 100%; text-transform:uppercase; letter-spacing:.06em; font-size:0.62em;
  font-weight:700; color:#94a3b8; margin-bottom:1px;
}
.reg-mid-out .reg-ip-title{ text-align:right; }
.reg-ip{
  display:inline-flex; align-items:center; gap:4px; background:#f8fafc;
  border:1px solid #eef2f7; border-radius:5px; padding:1px 6px; max-width:100%;
  font-size:0.75em;
}
.reg-ip-dot{ width:6px; height:6px; border-radius:50%; background:#6366f1; flex:none; }
.reg-ip-out .reg-ip-dot{ background:#10b981; }
.reg-ip code{ color:#1e40af; font-weight:600; font-size:0.95em; }
.reg-ip-type{
  color:#94a3b8; font-family:ui-monospace,Menlo,monospace; font-size:0.82em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:130px;
}
.reg-ip-na{ color:#cbd5e1; font-size:0.75em; }

/* Table view. */
.registry-table-wrap{ overflow-x:auto; }
/* Modules table: installed-vs-marketplace section header rows + action column. */
.module-table-section td{
  background:#f1f5f9; color:#475569; font-weight:700; font-size:0.74em;
  text-transform:uppercase; letter-spacing:.05em; padding:7px 12px;
  border-top:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0;
}
.module-table-section td .muted{ font-weight:600; letter-spacing:0; text-transform:none; }
.modules-table .reg-td-action{ white-space:nowrap; text-align:right; }
.modules-table .reg-td-action .btn-mini,
.modules-table .reg-td-action .action-btn{ margin:0; }
.modules-table .reg-td-name .module-link{ font-size:0.8em; margin-left:6px; font-weight:500; }
.registry-table{ width:100%; border-collapse:collapse; font-size:0.88em; }
.registry-table th, .registry-table td{ padding:6px 10px; text-align:left; border-bottom:1px solid #f1f5f9; }
.registry-table th{
  position:sticky; top:0; z-index:1; background:#fff; color:#475569; font-weight:600;
  cursor:pointer; user-select:none; white-space:nowrap;
}
.registry-table th.num, .registry-table td.num{ text-align:right; }
.registry-table th.active{ color:#4338ca; }
.registry-table th:hover{ background:#f8fafc; }
.registry-table tbody tr:hover{ background:#f8fafc; }
.registry-table .reg-td-name code{ color:#94a3b8; font-size:0.85em; }
.registry-table .reg-td-src{ color:#94a3b8; font-size:0.9em; }
.registry-table tr[data-source="environment_only"]{ opacity:0.6; }
.reg-entry-desc{
  margin:6px 0 8px; color:#475569; font-size:0.92em; line-height:1.5;
  white-space:pre-line; max-height:8.5em; overflow:auto;
  border-left:2px solid #e5e7eb; padding-left:10px;
}
.reg-ports{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin:8px 0; background:#f8fafc; border:1px solid #eef2f7;
  border-radius:8px; padding:8px 10px;
}
@media (max-width:640px){ .reg-ports{ grid-template-columns:1fr } }
.reg-port-col{ min-width:0 }
.reg-port-title{
  font-size:0.7em; text-transform:uppercase; letter-spacing:0.06em;
  font-weight:700; color:#94a3b8; margin-bottom:4px;
}
.reg-port-list{ margin:0; padding:0; list-style:none }
.reg-port-list li{
  display:flex; align-items:baseline; gap:6px; padding:1px 0;
  font-size:0.86em; line-height:1.4; flex-wrap:wrap;
}
/* Port names are single tokens (external_concentrations) — never break them
   letter-by-letter; wrap the whole name to the next line when it can't fit. */
.reg-port-name{ color:#1e40af; font-weight:600; word-break:normal; overflow-wrap:normal; }
.reg-port-type{ color:#64748b; font-size:0.92em; font-family:ui-monospace,Menlo,monospace; word-break:break-word; min-width:0; }
.reg-port-na{ color:#cbd5e1; font-size:0.86em }

/* Compact ports (grid card's "config & ports" dropdown): stack Inputs then
   Outputs in ONE column so each port gets the full card width — the 2-column
   layout squeezed names into vertical letter-stacks in a narrow grid card. */
.reg-ports.reg-ports-compact{ grid-template-columns:1fr; gap:8px; }
.reg-ports-compact .reg-port-type{
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.reg-config summary{ cursor:pointer; user-select:none; color:#64748b; font-size:0.85em; margin-top:2px }

/* ===== Study Detail — 5-tab redesign (Plan 3) ===== */

/* Tab bar — visually identical to .registry-tabs but scoped.
 * Sticky at the top of the scroll container so the user can switch
 * tabs (or re-anchor) while scrolling through long study sections
 * like Findings or Tests. Background + z-index ensure tabs are
 * readable over content underneath. The -webkit-sticky prefix is
 * still needed for older Safari versions. */
.study-tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  border-bottom: 1px solid #e5e7eb;
  margin: 0 0 20px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  padding-top: 8px;
  /* Subtle drop-shadow gives a visual cue when the bar has stuck —
   * users can tell at a glance whether they've scrolled past it. */
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.04);
}
.study-tab {
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  margin: 0;
  font: inherit;
  font-size: 0.95em;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.study-tab:hover { color: #1f2937; }
.study-tab.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
  font-weight: 600;
}
.study-tab-panel { display: none; padding: 8px 0; }
.study-tab-panel.active { display: block; }

/* Study header — name + status pill */
.study-header { margin: 0 0 8px; }
.study-title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 1.6em; }
.study-title .study-name { font-weight: 600; }

/* Overview tab — full-width, streamlined layout */
.study-overview { max-width: none; }
/* The Overview boxes (caveat/conclusion/biology/purpose) fill the full content
   width — no reading-measure cap — so wide screens are used and the right-hand
   dead space is gone. Auto-grow (study-detail.js) removes the inner scrollbars. */
.study-overview .overview-prose,
.study-overview .narrative-textarea,
.study-overview .biology-derived-preview,
.study-overview .purpose-callout { max-width: none; width: 100%; box-sizing: border-box; }
/* Auto-grown textareas: no inner scrollbar, grow to content. */
.study-overview .narrative-textarea { overflow: hidden; }
.overview-section { margin-bottom: 20px; }
/* Report-summary card: tile fields across the full width (label above input)
   instead of one tall skinny column. Scoped to the Overview so the Decide tab's
   narrative-grid is unaffected. */
.study-overview .narrative-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px 22px;
}
.study-overview .narrative-row { display: flex; flex-direction: column; gap: 4px; }
.study-overview .narrative-label { padding-top: 0; }
.study-overview .narrative-row-wide { grid-column: 1 / -1; }
.overview-label { font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray); margin: 0 0 6px; }
.overview-prose {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  min-height: 40px;
  white-space: pre-wrap;
  cursor: text;
}
.overview-prose:empty::before {
  content: attr(data-placeholder);
  color: #9ca3af;
  font-style: italic;
}

.study-counts-strip {
  display: flex;
  gap: 24px;
  padding: 12px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin: 18px 0;
}
.count-cell { display: flex; flex-direction: column; align-items: flex-start; min-width: 60px; }
.count-cell strong { font-size: 1.2em; }
.count-cell .count-label { color: #888; font-size: 0.78em; }

/* Baseline tab */
.baseline-list { display: flex; flex-direction: column; gap: 12px; }
.baseline-entry {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
}
.baseline-entry-header { display: flex; align-items: baseline; gap: 12px; }
.baseline-entry-name { margin: 0; font-size: 1.05em; }
.baseline-entry-fqn { color: var(--gray); font-size: 0.85em; }
.baseline-params { width: 100%; margin-top: 8px; font-size: 0.85em; border-collapse: collapse; }
.baseline-params th, .baseline-params td { text-align: left; padding: 4px 8px; border-bottom: 1px solid #f3f4f6; }
.baseline-entry-actions { display: flex; gap: 8px; margin-top: 10px; }

.baseline-add-form, .variant-add-form-wrapper, .intervention-add-form-wrapper {
  margin-top: 16px;
}
.baseline-add-form summary, .variant-add-form-wrapper summary, .intervention-add-form-wrapper summary {
  display: inline-block;
  cursor: pointer;
  color: #2563eb;
  font-weight: 600;
}
.baseline-add-form form, .variant-add-form-wrapper form, .intervention-add-form-wrapper form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 500px;
}
.baseline-add-form label, .variant-add-form-wrapper label, .intervention-add-form-wrapper label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9em;
}

/* Variants tab */
.variants-list { display: flex; flex-direction: column; gap: 12px; }
.variant-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
}
.variant-row-header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.variant-name { margin: 0; font-size: 1.05em; }
.variant-base { color: var(--gray); font-size: 0.9em; }
.variant-overrides-count { font-size: 0.85em; }
.variant-overrides-detail { margin-top: 8px; }
.variant-overrides-table { width: 100%; font-size: 0.85em; border-collapse: collapse; }
.variant-overrides-table td { padding: 3px 8px; border-bottom: 1px solid #f3f4f6; }
.variant-row-actions { display: flex; gap: 8px; margin-top: 10px; }

.param-form { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.param-row { display: flex; flex-direction: column; gap: 2px; }
.param-label { display: flex; align-items: center; gap: 10px; }
.param-input { padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; min-width: 200px; }
.param-desc { font-size: 0.8em; }

/* Interventions tab */
.interventions-list { display: flex; flex-direction: column; gap: 12px; }
.intervention-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
}
.intervention-row-header { display: flex; align-items: baseline; gap: 12px; }
.intervention-name { margin: 0; font-size: 1.05em; }
.intervention-description { margin: 8px 0; cursor: text; min-height: 1.5em; white-space: pre-wrap; }
.intervention-description:empty::before {
  content: "(click to add a description)";
  color: #9ca3af;
  font-style: italic;
}
.intervention-row-actions { display: flex; gap: 8px; margin-top: 4px; }

/* Empty state */
.empty-message { color: var(--gray); font-style: italic; padding: 12px 0; }

/* Run-related shared utilities */
.section-title { font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray); margin: 16px 0 8px; }
.muted { color: var(--gray); }
.danger { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }


/* ---------- Tests tab ---------- */
.tests-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.6rem; }
.tests-summary { flex: 1; }
.tests-summary .ok { color: #228B22; }
.tests-summary .fail { color: #B22222; }
.tests-summary .skip { color: #888; }
.tests-summary .muted { color: #888; font-size: 0.9em; }

.tests-config { margin: 0.5rem 0; display: flex; gap: 1rem; }
.tests-config .badge { background: #f0f0f0; padding: 0.2rem 0.5rem; border-radius: 4px; }

.tests-list { list-style: none; padding: 0; }
.test-row { padding: 0.4rem 0.6rem; margin: 0.2rem 0; border-radius: 4px; background: #fafafa; display: flex; gap: 0.6rem; align-items: center; }
.test-row.test-passed { border-left: 3px solid #228B22; }
.test-row.test-failed { border-left: 3px solid #B22222; }
.test-row.test-skipped { border-left: 3px solid #888; opacity: 0.7; }
.test-icon { font-size: 1.1em; }
.test-nodeid { flex: 1; font-family: monospace; font-size: 0.9em; }
.test-duration { color: #666; font-size: 0.85em; }
.test-row details pre { background: #fff; padding: 0.6rem; border: 1px solid #ddd; border-radius: 4px; max-height: 200px; overflow: auto; }

.overview-status-select {
  font-size: 1rem;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: white;
}

.conclusions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.conclusion-field h3 { margin-top: 0; }
.conclusion-field textarea { width: 100%; box-sizing: border-box; font-family: inherit; padding: 0.5rem; }

/* Top-bar "Open PR" button */
.topbar-actions { display: inline-flex; gap: 0.5rem; margin-left: 1rem; vertical-align: middle; }
#btn-open-pr { padding: 0.4rem 0.8rem; font-weight: 500; }

/* Top-bar live git-status strip */
/* The `display: inline-flex` below overrides the `[hidden]` attribute's
   UA `display:none`, so the legacy single-line banner leaked through even
   when JS set hidden=true. This restores hidden semantics. */
.git-status[hidden] { display: none !important; }
.git-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  background: #f1f3f5;
  border-radius: 6px;
  font-size: 0.9em;
  margin-left: 0.5rem;
}
.git-status .git-repo, .git-status .git-branch { color: #0366d6; text-decoration: none; font-family: monospace; }
.git-status .git-repo:hover, .git-status .git-branch:hover { text-decoration: underline; }
.git-badge { padding: 0.1rem 0.5rem; border-radius: 10px; font-size: 0.85em; font-weight: 500; }
.git-badge-ok { background: #d4edda; color: #155724; }
.git-badge-ahead { background: #fff3cd; color: #856404; }
.git-badge-behind { background: #ffeeba; color: #856404; }
.git-badge-warn { background: #f8d7da; color: #721c24; }
.git-status { flex-wrap: wrap; }
.git-badge-info { background: #cce5ff; color: #004085; text-decoration: none; }
.git-badge-info:hover { text-decoration: underline; }
.git-badge-pr { text-decoration: none; }
.git-badge-pr.pr-state-open { background: #d4edda; color: #155724; }
.git-badge-pr.pr-state-draft { background: #e2e3e5; color: #41464b; }
.git-badge-pr.pr-state-merged { background: #cce5ff; color: #004085; }
.git-badge-pr.pr-state-closed { background: #f8d7da; color: #721c24; }
.dirty-pill { cursor: pointer; }
/* Action buttons inside the git-status strip (merged from former workstream-strip) */
.git-status-actions { display: inline-flex; gap: 0.4rem; margin-left: 0.5rem; }
.git-status-actions .ws-btn { padding: 0.2rem 0.6rem; font-size: 0.85em; border-radius: 4px; background: #e7f3ff; cursor: pointer; border: 1px solid #cfe2ff; }
.git-status-actions .ws-btn.ws-primary { background: #cce5ff; border-color: #aacfff; }
.git-status-actions .ws-btn.ws-end { background: #f8d7da; border-color: #f1aeb5; color: #721c24; }
.git-status-actions .ws-btn:hover { filter: brightness(0.97); }
.git-status-actions .ws-warn { color: #92400e; font-size: 0.85em; background: #fef3c7; padding: 0.2rem 0.5rem; border-radius: 4px; }
.checkbox-row { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0; }

/* ─── Investigation intro (textbook-style) ─────────────────────────── */
.inv-intro {
  font-family: 'Charter', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  color: #1f2937;
}
.inv-lead {
  font-size: 1.05em;
  line-height: 1.65;
  color: #1f2937;
  border-left: 4px solid #2563eb;
  padding: 4px 14px;
  margin: 0 0 16px 0;
  background: linear-gradient(90deg, #f8fafc 0%, transparent 100%);
}
.inv-lead p { margin: 0 0 10px 0; }
.inv-lead p:last-child { margin-bottom: 0; }
.inv-lead code {
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.9em;
  color: #0f172a;
}
.inv-lead ul, .inv-lead ol { margin: 6px 0 10px 22px; padding: 0; }
.inv-lead li { margin: 2px 0; }
.inv-lead strong { color: #0f172a; }

/* ── Inquiry brief — the redesigned investigation opening ──────────────────
   Question headline → verdict answer line → meta → flat tab strip. One level
   of hierarchy, no nested boxes. Verdict-status colour is carried on the
   .inv-vs-* container as --vs / --vs-bg / --vs-fg custom properties. */
.inv-brief { margin: 0 0 8px; }
.inv-brief-q {
  font-family: 'Charter', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  font-size: 1.55em; line-height: 1.28; font-weight: 600; letter-spacing: -0.01em;
  color: #0f172a; margin: 2px 0 14px;
}
.inv-brief-verdict {
  font-family: -apple-system, "Segoe UI", sans-serif;
  border-left: 4px solid var(--vs, #64748b);
  background: #f8fafc; border-radius: 0 8px 8px 0;
  padding: 11px 16px; margin: 0 0 14px;
  font-size: 0.95em; line-height: 1.55; color: #334155;
}
.inv-vs-pill {
  display: inline-block; font-size: 0.66em; font-weight: 700; letter-spacing: 0.05em;
  background: var(--vs-bg, #e2e8f0); color: var(--vs-fg, #475569);
  padding: 2px 9px; border-radius: 9999px; margin-right: 8px; vertical-align: 1px;
}
.inv-brief-verdict-label { font-weight: 700; color: #1e293b; }
.inv-brief-framing {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 0.9em; line-height: 1.55; color: #64748b; margin: 0 0 12px;
}
.inv-brief-meta {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 0.9em; line-height: 1.55; color: #475569; margin: 0 0 16px;
}
.inv-brief-meta-item em { font-style: normal; font-weight: 700; color: #334155; margin-right: 5px; }
.inv-brief-meta-item + .inv-brief-meta-item::before { content: "·"; margin: 0 9px; color: #cbd5e1; }
.inv-brief-tabs {
  display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 1px solid #e2e8f0; margin: 0 0 14px;
  font-family: -apple-system, "Segoe UI", sans-serif;
}
.inv-brief-tab {
  appearance: none; background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; padding: 6px 13px; font-size: 0.87em; font-weight: 600;
  color: #64748b; cursor: pointer; border-radius: 6px 6px 0 0;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.inv-brief-tab:hover { color: #334155; background: #f8fafc; }
.inv-brief-tab.active { color: #2563eb; border-bottom-color: #2563eb; }
.inv-brief-panels { font-family: -apple-system, "Segoe UI", sans-serif; }
.inv-brief-prose { font-size: 0.95em; line-height: 1.62; color: #334155; }
.inv-brief-prose p { margin: 0 0 10px; }
.inv-brief-prose p:last-child { margin-bottom: 0; }
.inv-brief-howto { margin: 0 0 4px 20px; padding: 0; font-size: 0.92em; line-height: 1.5; color: #334155; }
.inv-brief-howto li { margin: 3px 0; }
.inv-brief-glossary { margin: 0; font-size: 0.92em; }
.inv-brief-glossary dt { font-weight: 700; color: #1e293b; margin-top: 9px; }
.inv-brief-glossary dt:first-child { margin-top: 0; }
.inv-brief-glossary dd { margin: 2px 0 0; color: #475569; line-height: 1.5; }
/* Verdict-status palettes (light). --vs is the accent rule; -bg/-fg the pill. */
.inv-brief.inv-vs-passed   { --vs: #16a34a; --vs-bg: #dcfce7; --vs-fg: #166534; }
.inv-brief.inv-vs-progress { --vs: #d97706; --vs-bg: #fef9c3; --vs-fg: #854d0e; }
.inv-brief.inv-vs-blocked  { --vs: #dc2626; --vs-bg: #fee2e2; --vs-fg: #991b1b; }
.inv-brief.inv-vs-planning { --vs: #2563eb; --vs-bg: #dbeafe; --vs-fg: #1e40af; }
.inv-brief.inv-vs-default  { --vs: #64748b; --vs-bg: #e2e8f0; --vs-fg: #475569; }

/* ── Market — faceted artifact browser (processes / composites / studies /
   investigations / modules) ─────────────────────────────────────────────── */
.market-toolbar { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.market-search { flex: 1 1 auto; box-sizing: border-box; font-size: 0.95em; padding: 8px 12px; }
.market-zoom { flex: none; }
.market-facets {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid #e2e8f0; margin: 0; padding-bottom: 0;
}
.market-facet {
  appearance: none; background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; padding: 7px 14px; font-size: 0.9em; font-weight: 600;
  color: #64748b; cursor: pointer; border-radius: 6px 6px 0 0;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.market-facet:hover { color: #334155; background: #f8fafc; }
.market-facet.active { color: #2563eb; border-bottom-color: #2563eb; }
.market-origin-filter { margin-left: auto; display: inline-flex; gap: 3px; align-self: center; padding-bottom: 4px; }
.market-origin-chip {
  appearance: none; border: 1px solid #e2e8f0; background: #fff; cursor: pointer;
  font-size: 0.78em; font-weight: 600; color: #64748b; padding: 3px 10px; border-radius: 9999px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.market-origin-chip:hover { color: #334155; border-color: #cbd5e1; }
.market-origin-chip.active { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.market-group { margin: 0 0 22px; }
.market-group-head {
  font-size: 0.78em; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: #94a3b8; margin: 0 0 10px; display: flex; align-items: center; gap: 8px;
}
.market-count {
  font-weight: 600; letter-spacing: 0; font-size: 0.92em;
  background: #eef1f5; color: #64748b; border-radius: 9999px; padding: 0 8px;
}
.market-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px;
}
.market-card {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 14px; background: #fff;
  border-left: 3px solid #cbd5e1; transition: box-shadow 0.12s, border-color 0.12s;
}
.market-card:hover { box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08); }
.market-card.market-type-process      { border-left-color: #6366f1; }
.market-card.market-type-composite    { border-left-color: #0ea5e9; }
.market-card.market-type-study        { border-left-color: #10b981; }
.market-card.market-type-investigation{ border-left-color: #f59e0b; }
.market-card.market-type-module       { border-left-color: #8b5cf6; }
.market-card-head { display: flex; align-items: center; gap: 8px; }
.market-type-ico { font-size: 0.95em; opacity: 0.75; flex: none; }
.market-name {
  font-weight: 650; color: #1e293b; font-size: 0.96em; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto;
}
/* Cards (middle zoom): name gets its own line and can wrap — no ellipsis. */
.market-card-x { cursor: pointer; }
.market-card-title { display: flex; align-items: baseline; gap: 7px; }
.market-name-full {
  flex: 1 1 auto; min-width: 0; font-weight: 680; color: #0f172a;
  font-size: 0.98em; line-height: 1.28; overflow-wrap: anywhere;
}
.market-card-caret {
  flex: none; color: #cbd5e1; font-size: 0.8em; transition: transform 0.12s, color 0.12s;
}
.market-card-x:hover .market-card-caret { color: #94a3b8; }
.market-card-x.mk-expanded .market-card-caret { transform: rotate(90deg); color: #6366f1; }
.market-card-x.mk-expanded { border-color: #c7d2fe; box-shadow: 0 2px 12px rgba(99,102,241,0.10); }
.market-card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
/* Click-to-expand detail region inside a card. */
.market-card-detail { margin-top: 4px; padding-top: 8px; border-top: 1px solid #eef2f7; }
.market-card-detail[hidden] { display: none; }
/* Long-form description inside an expanded card: capped + scrollable so the
   attribute rows / member studies above it stay in view. */
.market-card-detail .mk-detail-desc {
  margin-top: 8px; max-height: 160px; overflow-y: auto; padding-right: 4px;
}
:root[data-theme="dark"] .market-name-full { color: var(--heading); }
:root[data-theme="dark"] .market-card-detail { border-top-color: var(--border); }
/* Investigation member-studies list (in detail / expanded card). */
.mk-studies { margin-top: 8px; }
.mk-studies-head {
  font-size: 0.74em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: #64748b; margin-bottom: 5px; display: flex; align-items: center; gap: 6px;
}
.mk-study-summary { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mk-study-bar {
  flex: 1 1 auto; height: 6px; border-radius: 3px; background: #eef2f7; overflow: hidden; max-width: 180px;
}
.mk-study-bar > span { display: block; height: 100%; background: #22c55e; }
.mk-study-summary-txt { font-size: 0.76em; color: #64748b; white-space: nowrap; }
.mk-study-row {
  display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 5px;
  cursor: pointer; font-size: 0.84em;
}
.mk-study-row:hover { background: #f1f5f9; }
.mk-study-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.mk-study-name { flex: 1 1 auto; min-width: 0; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-study-status { flex: none; font-size: 0.82em; color: #94a3b8; text-transform: lowercase; }
:root[data-theme="dark"] .mk-study-row:hover { background: var(--surface-3); }
:root[data-theme="dark"] .mk-study-name { color: var(--text); }
:root[data-theme="dark"] .mk-study-bar { background: var(--surface-3); }
.market-repo {
  flex: none; font-size: 0.72em; font-weight: 600; color: #475569;
  background: #f1f5f9; border-radius: 9999px; padding: 1px 8px; white-space: nowrap;
}
.market-avail {
  flex: none; font-size: 0.68em; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; color: #92400e; background: #fef3c7;
  border-radius: 6px; padding: 1px 7px; white-space: nowrap;
}
:root[data-theme="dark"] .market-avail { color: #fde68a; background: #78350f; }
/* Provenance category chip on artifact cards (workspace / imported / available). */
.market-cat {
  flex: none; font-size: 0.66em; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; border-radius: 6px; padding: 1px 7px; white-space: nowrap;
}
.market-cat-workspace { color: #4338ca; background: #e0e7ff; }
.market-cat-imported  { color: #0369a1; background: #e0f2fe; }
.market-cat-available  { color: #92400e; background: #fef3c7; }
:root[data-theme="dark"] .market-cat-workspace { color: #c7d2fe; background: #312e81; }
:root[data-theme="dark"] .market-cat-imported  { color: #bae6fd; background: #0c4a6e; }
:root[data-theme="dark"] .market-cat-available  { color: #fde68a; background: #78350f; }
.market-desc {
  font-size: 0.85em; line-height: 1.45; color: #64748b;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.market-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 4px;
}
.market-meta { font-size: 0.78em; color: #94a3b8; }
.market-usage { font-size: 0.78em; color: #94a3b8; }
.market-open { flex: none; }

/* Repositories facet — whole-ecosystem repo cards (List / Cards / Detail). */
.repo-card { padding: 14px 16px; gap: 8px; border-left-width: 3px; border-left-color: #cbd5e1; }
.repo-card-ws { border-left-color: #6366f1; background: linear-gradient(180deg, #fbfbff, #fff); }
.repo-card-head { display: flex; align-items: center; gap: 8px; }
.repo-ico { font-size: 1.1em; flex: none; }
.repo-name {
  font-weight: 680; color: #1e293b; font-size: 1.02em; letter-spacing: -0.01em;
  text-decoration: none; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.repo-name:hover { color: #4f46e5; text-decoration: underline; }
.repo-badge {
  flex: none; font-size: 0.68em; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; border-radius: 6px; padding: 2px 8px; white-space: nowrap;
}
.repo-badge-ws { color: #4338ca; background: #e0e7ff; }
.repo-badge-imported { color: #0369a1; background: #e0f2fe; }
.repo-badge-avail { color: #92400e; background: #fef3c7; }
.repo-desc {
  font-size: 0.86em; line-height: 1.45; color: #64748b;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.repo-desc-full { -webkit-line-clamp: unset; display: block; }
.repo-stats { display: flex; flex-wrap: wrap; gap: 5px 8px; margin: 2px 0; }
.repo-stat {
  font-size: 0.78em; color: #475569; background: #f1f5f9;
  border-radius: 6px; padding: 2px 9px; white-space: nowrap;
}
.repo-stat b { color: #0f172a; font-variant-numeric: tabular-nums; font-weight: 700; }
.repo-stat.zero { color: #94a3b8; background: transparent; padding-left: 0; padding-right: 4px; }
.repo-stat.zero b { color: #94a3b8; font-weight: 600; }
.repo-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 6px; border-top: 1px solid #f1f5f9;
}
.repo-meta { font-size: 0.78em; color: #94a3b8; }
.repo-actions { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.repo-gh { flex: none; text-decoration: none; }
.repo-install {
  border-color: #16a34a; color: #166534; background: #f0fdf4; font-weight: 600;
}
.repo-install:hover { background: #dcfce7; }
.repo-uninstall {
  border-color: #fca5a5; color: #b91c1c; background: #fef2f2; font-weight: 600;
}
.repo-uninstall:hover { background: #fee2e2; }
.repo-td-actions { white-space: nowrap; text-align: right; }
.repo-td-actions .repo-actions { justify-content: flex-end; }
/* Affected-studies emphasis in the table + card foot. */
.repo-affected { font-variant-numeric: tabular-nums; font-weight: 700; color: #b45309; }
.repo-td-zero { color: #cbd5e1; }
.repo-card-foot .repo-meta b { color: #b45309; font-weight: 700; }
:root[data-theme="dark"] .repo-install { border-color: #16a34a; color: #86efac; background: #052e16; }
:root[data-theme="dark"] .repo-uninstall { border-color: #7f1d1d; color: #fca5a5; background: #450a0a; }
:root[data-theme="dark"] .repo-affected, :root[data-theme="dark"] .repo-card-foot .repo-meta b { color: #fbbf24; }
.repo-sample { font-size: 0.82em; color: #64748b; }
.repo-sample-lbl { font-weight: 600; color: #475569; margin-right: 2px; }
.repo-sample code { font-size: 0.92em; }
/* Repo List (dense table) */
.repo-table { width: 100%; }
.repo-th {
  text-align: left; font-size: 0.72em; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: #94a3b8; padding: 4px 10px; border-bottom: 2px solid #e2e8f0;
}
.repo-tr:hover { background: #f8fafc; }
.repo-tr td { padding: 8px 10px; border-bottom: 1px solid #eef1f5; vertical-align: middle; }
.repo-td-num { text-align: left; font-variant-numeric: tabular-nums; color: #334155; }
:root[data-theme="dark"] .repo-name { color: var(--text); }
:root[data-theme="dark"] .repo-desc, :root[data-theme="dark"] .repo-stat { color: var(--text-muted); }
:root[data-theme="dark"] .repo-stat { background: var(--hover); }
:root[data-theme="dark"] .repo-stat b { color: var(--text); }
:root[data-theme="dark"] .repo-badge-ws { color: #c7d2fe; background: #312e81; }
:root[data-theme="dark"] .repo-badge-imported { color: #bae6fd; background: #0c4a6e; }
:root[data-theme="dark"] .repo-badge-avail { color: #fde68a; background: #78350f; }
:root[data-theme="dark"] .repo-card-foot { border-top-color: var(--border); }
:root[data-theme="dark"] .repo-card-ws { background: var(--panel); }

/* Studies-overview header action cluster: + Investigation / + Study / Audit Report */
.iset-hdr-btn { display: inline-flex; align-items: center; gap: 5px; }
.iset-hdr-btn svg { flex: none; }
.market-results { margin-top: 14px; }
/* Keep the Registry results full-width and vertically reserved so switching
   facets or waiting on a slow load doesn't reflow the card columns or bounce
   the page height (the "Loading…" state occupies the same box as the grid). */
#page-market.active .market-results { width: 100% !important; min-height: 62vh; }
.market-grid { align-content: start; }
#page-market.active .market-results > .empty-state { padding: 24px 2px; }

/* List (dense) zoom */
.market-list { display: flex; flex-direction: column; }
.market-row {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 10px; border-left: 3px solid #cbd5e1;
  border-bottom: 1px solid #eef1f5;
}
.market-row:hover { background: #f8fafc; }
.market-row.market-type-process       { border-left-color: #6366f1; }
.market-row.market-type-composite     { border-left-color: #0ea5e9; }
.market-row.market-type-study         { border-left-color: #10b981; }
.market-row.market-type-investigation { border-left-color: #f59e0b; }
.market-row-main { display: flex; align-items: baseline; gap: 8px; flex: 1 1 auto; min-width: 0; }
.market-row-main .market-name { flex: 0 1 auto; }
.market-row-desc {
  color: #94a3b8; font-size: 0.85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.market-row .market-usage { flex: none; white-space: nowrap; }

/* Detail (full) zoom */
/* Detail (max zoom): one full-row card per item, like the composites cards view. */
.market-grid-detail { grid-template-columns: 1fr; gap: 12px; }
/* Double-click-to-zoom focus ring — cleared on the next render. */
.market-card.mk-focused, .market-tr.mk-focused > td {
  box-shadow: inset 0 0 0 2px #6366f1;
}
.market-card.mk-focused { border-color: #6366f1; }
.market-desc-full { -webkit-line-clamp: unset; display: block; }
.market-detail .market-card-head .market-open { margin-left: auto; }
.market-dl {
  display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px;
  margin-top: 4px; font-size: 0.85em; align-items: baseline;
}
.market-dl-k { color: #94a3b8; font-weight: 600; white-space: nowrap; }
.market-dl-v { color: #475569; }
.market-dl-v code, .market-desc code {
  background: #f1f5f9; border-radius: 3px; padding: 1px 5px; font-size: 0.92em; color: #334155;
}

/* List (minimized) zoom = sortable table — columns roll up, no horizontal scroll */
.market-table { width: 100%; border-collapse: collapse; font-size: 0.88em; table-layout: fixed; }
/* Draggable column widths — a grip on each header's right edge. */
.col-resizer {
  position: absolute; top: 0; right: -4px; width: 9px; height: 100%;
  cursor: col-resize; z-index: 3; user-select: none;
}
.col-resizer::after {
  content: ''; position: absolute; top: 20%; right: 4px; width: 2px; height: 60%;
  background: transparent; border-radius: 1px;
}
.col-resizer:hover::after { background: #6366f1; }
body.col-resizing { cursor: col-resize; user-select: none; }
body.col-resizing .col-resizer::after { background: #6366f1; }
.market-table th, .market-table td {
  text-align: left; padding: 6px 10px; border-bottom: 1px solid #eef1f5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.market-th {
  position: sticky; top: 0; z-index: 1; cursor: pointer; user-select: none;
  font-size: 0.82em; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: #64748b; background: #f8fafc; border-bottom: 2px solid #e2e8f0;
}
.market-th:hover { color: #334155; background: #eef2ff; }
.market-th.sorted { color: #2563eb; }
.market-tr { cursor: pointer; }
.market-tr:hover { background: #f8fafc; }
.market-td-type { text-align: center; }
.market-td-type .market-type-ico { opacity: 0.7; }
.market-td-name { font-weight: 600; color: #1e293b; }
.market-td-desc { color: #94a3b8; font-weight: 400; margin-left: 8px; font-size: 0.92em; }
.market-td-use { text-align: right; color: #64748b; font-variant-numeric: tabular-nums; }
.market-origin {
  font-size: 0.82em; font-weight: 600; border-radius: 9999px; padding: 1px 9px;
}
.market-origin-workspace { background: #e0e7ff; color: #4338ca; }
.market-origin-external { background: #dcfce7; color: #166534; }

.inv-at-a-glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin: 0 0 16px 0;
}
.inv-aag-tile {
  display: block;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #6366f1;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.12s, transform 0.05s, border-left-color 0.12s;
  cursor: pointer;
}
.inv-aag-tile:hover {
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.18);
  border-left-color: #4338ca;
  transform: translateY(-1px);
}
.inv-aag-tile:active {
  transform: translateY(0);
}
.inv-aag-tile:visited { color: inherit; }
.inv-aag-tile .inv-aag-num {
  display: inline-block;
  background: #eef2ff;
  color: #3730a3;
  border-radius: 50%;
  width: 22px; height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 0.8em;
  font-weight: 600;
  margin-right: 6px;
}
.inv-aag-tile .inv-aag-slug {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  color: #1f2937;
  font-weight: 600;
}
.inv-aag-tile .inv-aag-role {
  display: block;
  margin-top: 4px;
  font-size: 0.92em;
  color: #475569;
  line-height: 1.4;
}

.inv-how-to-read {
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 10px 16px;
  margin: 0 0 16px 0;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 0.95em;
}
.inv-how-to-read strong { color: #78350f; display: block; margin-bottom: 4px; }
.inv-how-to-read ol { margin: 0 0 0 18px; padding: 0; color: #1f2937; }
.inv-how-to-read li { margin: 3px 0; line-height: 1.5; }

.inv-glossary {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 16px;
  margin: 0 0 16px 0;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 0.92em;
}
.inv-glossary summary {
  cursor: pointer;
  font-weight: 600;
  color: #334155;
  padding: 2px 0;
}
.inv-glossary[open] summary { margin-bottom: 6px; }
.inv-glossary dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 14px;
  row-gap: 4px;
}
.inv-glossary dt {
  font-weight: 600;
  color: #0f172a;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
}
.inv-glossary dd { margin: 0; color: #334155; line-height: 1.5; }

.inv-bio-story {
  background: #f0f9ff;
  border-left: 4px solid #0284c7;
  border-radius: 0 6px 6px 0;
  padding: 12px 16px;
  margin: 0 0 16px 0;
}
.inv-bio-story-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78em;
  color: #075985;
  margin-bottom: 6px;
}
.inv-bio-story-text {
  color: #0c4a6e;
  line-height: 1.6;
  white-space: normal;        /* reflow to full width (was pre-wrap -> wrapped at source newlines) */
  font-size: 0.95em;
}
.inv-bio-story-text p { margin: 0 0 10px 0; }
.inv-bio-story-text p:last-child { margin-bottom: 0; }

/* ─── Conditions block on study-detail Build tab ──────────────────── */
.cond-block { margin: 12px 0; padding: 10px 12px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 6px; }
.cond-block-title { font-weight: 600; color: #1f2937; margin-bottom: 6px; }
.cond-pill { display: inline-flex; align-items: center; gap: 4px;
  background: #eef2ff; border-radius: 3px; padding: 2px 6px;
  font-size: 0.85em; }
.cond-pill-k { color: #3730a3; font-weight: 600;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.cond-table { width: 100%; border-collapse: collapse; font-size: 0.9em;
  margin: 6px 0; }
.cond-table th { text-align: left; padding: 6px 8px;
  border-bottom: 1px solid #cbd5e1; color: #334155; font-weight: 600;
  background: #f8fafc; }
.cond-table td { padding: 6px 8px; border-bottom: 1px solid #e5e7eb;
  vertical-align: top; }
.cond-table tr:last-child td { border-bottom: none; }
.cond-ei-input { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.cond-ei-required-badge { display: inline-block; background: #fde68a;
  color: #78350f; font-size: 0.75em; padding: 1px 8px; border-radius: 9px;
  margin-left: 6px; font-weight: 600; }
.cond-ei-gate-req { display: inline-block; background: #fde68a;
  color: #78350f; font-size: 0.78em; padding: 1px 6px; border-radius: 3px;
  font-weight: 600; }
.cond-ei-gate-opt { display: inline-block; background: #e0e7ff;
  color: #3730a3; font-size: 0.78em; padding: 1px 6px; border-radius: 3px; }
.cond-ei-flash.saved { color: #065f46; font-weight: 600; }
.cond-ei-flash.error { color: #991b1b; font-weight: 600; }

/* ─── Workspace-owner footer: GitHub-linked variant ──────────────── */
.viv-rail-footer-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  transition: background 0.15s, transform 0.05s;
}
.viv-rail-footer-link:hover {
  background: rgba(99, 102, 241, 0.08);
}
.viv-rail-footer-link:active {
  transform: translateY(1px);
}
.viv-rail-footer-link:visited { color: inherit; }
.viv-avatar-img {
  background: transparent;
  padding: 0;
  border: 1px solid #e2e8f0;
  object-fit: cover;
}
.viv-rail-footer-text small {
  display: block;
  color: #6b7280;
  font-size: 0.78em;
  margin-top: 1px;
}

/* ─── Run-unblocked progress panel ─────────────────────────────────── */
.inv-run-progress {
  background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 6px;
  padding: 10px 14px; margin: 10px 0 16px 0;
  font-family: -apple-system, "Segoe UI", sans-serif;
}
.inv-run-progress-banner { font-size: 0.95em; color: #1f2937; margin-bottom: 6px; }
.inv-run-progress-banner.inv-run-error { color: #991b1b; }
.inv-run-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.inv-run-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: 4px; font-size: 0.9em;
  background: #fff; border: 1px solid #e2e8f0;
}
.inv-run-item code { font-size: 0.88em; }
.inv-run-icon { display: inline-block; width: 18px; text-align: center; font-weight: 600; }
.inv-run-arrow { color: #9ca3af; }
.inv-run-err { color: #991b1b; font-size: 0.88em; }
.inv-run-queued   { background: #fff; border-color: #e5e7eb; color: #475569; }
.inv-run-queued .inv-run-icon { color: #94a3b8; }
.inv-run-running  { background: #eff6ff; border-color: #93c5fd; color: #1e3a8a; }
.inv-run-running .inv-run-icon { color: #2563eb; animation: inv-run-pulse 1s infinite; }
.inv-run-done     { background: #f0fdf4; border-color: #86efac; color: #14532d; }
.inv-run-done    .inv-run-icon { color: #16a34a; }
.inv-run-failed   { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.inv-run-failed  .inv-run-icon { color: #dc2626; }
.inv-run-blocked  { background: #fef3c7; border-color: #fcd34d; color: #78350f; }
.inv-run-skipped  { background: #f3f4f6; border-color: #d1d5db; color: #4b5563; font-style: italic; }
@keyframes inv-run-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.4; }
}

/* ─── Investigation-level comparative viz strip ─────────────────────── */
.inv-comparative-viz {
  margin: 18px 0 0 0;
  padding: 14px 16px;
  background: #f0f9ff;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  font-family: -apple-system, "Segoe UI", sans-serif;
}
.inv-comparative-title { margin: 0 0 4px 0; font-size: 1.05em; color: #1e3a8a; }
.inv-comparative-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 12px;
}
.inv-comparative-card {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.inv-comparative-card-title {
  padding: 8px 12px;
  font-size: 0.9em;
  font-weight: 600;
  color: #334155;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}
.inv-comparative-frame {
  width: 100%;
  height: 540px;
  border: 0;
  display: block;
  background: #fff;
}

/* ───────────────────────────────────────────────────────────────────
 * Workspace Inputs cards — theme-aware backgrounds.
 *
 * The card markup (in index.html.j2) historically used inline
 * style="background:#fff;border:1px solid #e5e7eb" which the template
 * baked in as a light-mode-only assumption. Moving the background +
 * border to a CSS class lets these cards adapt when a dark-mode toggle
 * is in play (see the data-theme="dark" system on
 * feat/hpc-backend-integration that defines --panel/--border for dark
 * mode). In light mode (and on main without a theme toggle) these vars
 * resolve to the same #fff / #e5e7eb the inline styles used to set.
 * =================================================================== */
.expert-doc-card,
.bib-entry {
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e5e7eb);
}

/* ───────────────────────────────────────────────────────────────────
 * v4 narrative-spine forms — editable cards for report, study_card,
 * biological_summary, conclusion_verdicts on the Study Detail page.
 *
 * Each card lays out as a 2-col grid of label+input rows; "wide" rows
 * (textareas) span full width with the label above. Inputs save on
 * blur (text/textarea) or change (select) by POSTing to
 * /api/study-narrative-set with a dotted path.
 * =================================================================== */
.narrative-card {
  padding: 14px 16px;
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  margin-bottom: 16px;
}
.narrative-card-hint {
  font-size: 0.78em;
  color: var(--muted, #6b7280);
  font-weight: normal;
  margin-left: 8px;
}
.narrative-grid {
  display: grid;
  grid-template-columns: minmax(160px, max-content) 1fr;
  gap: 8px 14px;
  align-items: start;
}
.narrative-row {
  display: contents;
}
.narrative-row-wide {
  display: block;
  grid-column: 1 / -1;
  margin-top: 4px;
}
.narrative-row-wide .narrative-label {
  display: block;
  margin-bottom: 4px;
}
.narrative-label {
  font-size: 0.86em;
  font-weight: 600;
  color: var(--text-secondary, #4b5563);
  padding-top: 6px;
}
.narrative-input {
  font: inherit;
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 4px;
  background: var(--bg-alt, #f9fafb);
  color: var(--text, #1f2937);
}
.narrative-input:focus {
  outline: none;
  border-color: var(--accent-blue, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
  background: var(--panel, #fff);
}
.narrative-textarea {
  font-family: inherit;
  resize: vertical;
  min-height: 38px;
  line-height: 1.45;
}
.narrative-card-input {
  border-color: transparent;
  background: transparent;
  padding: 4px 6px;
}
.narrative-card-input:hover,
.narrative-card-input:focus {
  border-color: var(--border, #d0d7de);
  background: var(--bg-alt, #f9fafb);
}
.narrative-input.narrative-saved {
  border-color: var(--accent, #10b981);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.narrative-input.narrative-error {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
}

/* ───────────────────────────────────────────────────────────────────
 * Composites tab — workspace-first ordering chrome.
 *
 * Each composite card carries a `workspace_local` flag from the
 * /api/composites response. The new "Workspace first" sort (now the
 * default) puts these at the top. We also surface the distinction
 * visually so the user can scan it regardless of the active sort:
 *
 *   .composite-ws-tag         small "📦 workspace" pill next to the name
 *   .module-card-workspace    subtle left-border accent on workspace cards
 *   .composite-section-divider  thin "Other installed pbg-* modules"
 *                               separator emitted between groups when
 *                               the workspace-first sort is active
 * =================================================================== */
.composite-ws-tag {
  display: inline-block;
  background: #dcfce7;
  color: #065f46;
  font-size: 0.7em;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 9999px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}
.module-card.module-card-workspace {
  border-left: 3px solid #10b981;
}
.composite-section-divider {
  grid-column: 1 / -1;            /* span all grid columns */
  display: flex;
  align-items: center;
  margin: 24px 0 12px 0;
  padding: 9px 14px;
  color: #334155;
  font-size: 0.95em;
  font-weight: 700;
  background: #f1f5f9;
  border-left: 4px solid #6366f1;
  border-radius: 6px;
  letter-spacing: 0;
  text-transform: none;
}
/* No flanking rules — this is now a clear section header, not a thin separator. */
.composite-section-divider::before,
.composite-section-divider::after {
  content: none;
}
.composite-list .composite-section-divider {
  margin: 10px 0 4px 0;
}

/* Registry → Imported repositories panel: per-repo card listing the
 * processes/steps each declared import contributes. */
.imported-repo-kind {
  margin: 8px 0 0 0;
  line-height: 1.9;
}
.imported-repo-kind-label {
  display: inline-block;
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-right: 6px;
}

/* ───────────────────────────────────────────────────────────────────
 * Registry page — page-level sub-tabs (Modules / Discovered registry).
 *
 * The Registry page used to stack three panels (Available modules →
 * Installed modules → Discovered registry), forcing users to scroll
 * through a long catalog grid every time they wanted the build_core()
 * introspection. Split into two sub-tabs so the user picks once.
 * =================================================================== */
.registry-subtabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  margin: -4px 0 16px 0;
}
.registry-subtab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 9px 16px 11px;
  margin-bottom: -1px;
  font: inherit;
  font-size: 0.95em;
  font-weight: 600;
  color: var(--muted, #6b7280);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.registry-subtab:hover { color: var(--text, #1f2937); }
.registry-subtab.active {
  color: var(--accent-blue, #2563eb);
  border-bottom-color: var(--accent-blue, #2563eb);
}
/* Flush, uniform sub-tab panels (override the .panel card chrome) so switching
   Modules <-> Discovered doesn't shift the layout or change margins. */
.registry-subtab-panel { display: none; padding: 0; margin: 0; border: none;
  background: none; border-radius: 0; box-shadow: none; }
.registry-subtab-panel.active { display: block; }

/* Sources, Composites, and Analysis Tools wrapped their whole page in a bordered
   `.panel` card, leaving a buffer margin around the operating space. Registry and
   Investigations fill the pane flush — match that by stripping the card chrome
   from these pages' outermost panel (nested panels keep their chrome). */
#page-workspace-inputs > .panel,
#page-simulation-setup > .panel,
#page-visualizations > .panel {
  background: none; border: none; border-radius: 0; padding: 0; margin: 0;
}

/* ───────────────────────────────────────────────────────────────────
 * Catalog grid — workspace-package + installed-first chrome.
 *
 * After the Installed-modules table got folded into the catalog grid,
 * each card visually distinguishes itself by tier:
 *   .module-card-workspace   workspace's own first-party package (top
 *                            anchor; uninstallable)
 *   .module-card-installed   installed catalog modules
 *   (no class)               available-to-install catalog modules
 *
 * The .module-section-divider separator marks the boundary between
 * tiers (workspace → installed → available) so the user can see at a
 * glance what's already in the workspace vs what's still browseable.
 * =================================================================== */
.module-card-workspace {
  border-left: 3px solid #2563eb;
  background: var(--bg-alt, #f8fafc);
}
.module-card-installed {
  border-left: 3px solid #10b981;
}
.module-row-workspace {
  background: var(--bg-alt, #f8fafc);
  border-left: 3px solid #2563eb;
  padding-left: 9px;
}
.module-installed-meta {
  margin: 4px 0;
  line-height: 1.5;
  font-size: 0.85em;
  color: var(--muted, #6b7280);
}
.module-installed-meta code {
  font-size: 0.92em;
}
.module-section-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 6px 0;
  color: var(--muted, #94a3b8);
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.module-section-divider::before,
.module-section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border, #e2e8f0);
}
.module-list .module-section-divider {
  margin: 10px 0 4px 0;
}

/* ───────────────────────────────────────────────────────────────────
 * Catalog install-source pills (Registry → Modules sub-tab).
 *
 * Each catalog module the dashboard marks as installed carries an
 * `install_source` of `imports` (workspace.yaml — original flow),
 * `pyproject` (declared in pyproject.toml only — typical for workspaces
 * that pre-date the imports flow, e.g. v2ecoli with pbg-copasi), or
 * `venv` (present in venv as a transitive dep of another installed
 * package — e.g. spatio_flux brought in by viva-munk).
 *
 * The pill colour signals provenance so a quick scan tells the user
 * WHICH layer installed each module — and whether an Uninstall button
 * even makes sense.
 * =================================================================== */
.install-src-pill {
  display: inline-block;
  font-size: 0.78em;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 9999px;
  margin-right: 4px;
  vertical-align: middle;
  letter-spacing: 0.01em;
}
.install-src-pyproject {
  background: #dbeafe;        /* light blue — declared in workspace's own pyproject */
  color: #1e40af;
  border: 1px solid rgba(37, 99, 235, 0.25);
}
.install-src-venv {
  background: #fef3c7;        /* amber — transitive; user can't uninstall directly */
  color: #92400e;
  border: 1px solid rgba(217, 119, 6, 0.25);
}
.install-src-unmanaged {
  background: #fee2e2;        /* light red — orphaned venv install; user CAN uninstall */
  color: #991b1b;
  border: 1px solid rgba(220, 38, 38, 0.3);
}

/* ───────────────────────────────────────────────────────────────────
 * Module content-count chips (composites / studies / investigations /
 * "used here") + install/uninstall action row. Replaces the old
 * middot-joined muted text line with scannable, colour-coded chips; the
 * "used here" chip is emphasized because it answers "do WE depend on this".
 * =================================================================== */
.module-stats-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 2px;
}
/* "Used by N studies" — the headline usage signal (replaces the ★ chip). A
   quiet green pill with a status dot; shown only when actually used. */
.module-usage {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  font-size: 0.78em;
  font-weight: 500;
  padding: 3px 10px 3px 8px;
  border-radius: 9999px;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.module-usage strong { font-weight: 700; }
.module-usage-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #10b981; flex: none;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
/* What the module PROVIDES — a quiet, evenly-spaced count strip. */
.module-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.8em;
  color: #64748b;
}
.module-count strong { color: #334155; font-weight: 600; }

/* Installed-card action row: keeps the install-source badge and the
   Uninstall button on one baseline. */
.module-action-installed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.module-uninstall-btn {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.35);
  background: #fff;
}
.module-uninstall-btn:hover {
  background: #fef2f2;
  border-color: #b91c1c;
}
.action-btn.danger {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.action-btn.danger:hover { background: #b91c1c; border-color: #b91c1c; }
.action-btn.danger:disabled { opacity: 0.6; cursor: default; }

/* ───────────────────────────────────────────────────────────────────
 * Uninstall-impact confirmation modal (reuses .modal-overlay/.modal-box).
 * =================================================================== */
.uninstall-impact-h {
  margin: 12px 0 6px;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
}
.uninstall-impact-body { max-height: 46vh; overflow-y: auto; }
.uninstall-impact-group { margin: 6px 0 10px; }
.uninstall-impact-group-title {
  font-size: 0.85em;
  font-weight: 600;
  color: #334155;
  margin-bottom: 3px;
}
.uninstall-impact-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.85em;
  line-height: 1.6;
}
.uninstall-impact-list code { font-size: 0.92em; }
.uninstall-impact-warn {
  margin: 12px 0 4px;
  padding: 9px 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  color: #92400e;
  font-size: 0.9em;
  line-height: 1.5;
}

/* Collapsible lead blocks (condense the lead-up to the studies) */
details.inv-how-to-read > summary, details.inv-bio-story > summary {
  cursor: pointer; font-weight: 600; list-style-position: outside;
}
details.inv-bio-story > summary { color: #075985; }
details.inv-how-to-read > summary { color: #78350f; }
details.inv-how-to-read[open] > summary, details.inv-bio-story[open] > summary { margin-bottom: 8px; }

/* Uniform investigation-intro collapsibles — one consistent disclosure style
   for About / How to read / Glossary / Biology, overriding the per-card
   bespoke colors (blue biology banner, amber how-to-read) so the top of the
   investigation reads as a tidy, uniform stack. The needs-attention alert
   below is intentionally left as the one distinct (functional) banner. */
#investigation-intro > details { margin: 4px 0; border: 0; background: none; padding: 0; }
#investigation-intro > details > summary {
  cursor: pointer; list-style: none; padding: 5px 0; background: none; border: 0;
  color: #475569; font-size: 0.9rem; font-weight: 600; font-family: inherit;
}
#investigation-intro > details > summary::-webkit-details-marker { display: none; }
#investigation-intro > details > summary::before {
  content: '▸'; color: #94a3b8; margin-right: 7px; display: inline-block;
  transition: transform .12s ease;
}
#investigation-intro > details[open] > summary::before { transform: rotate(90deg); }
#investigation-intro > details[open] > summary { margin-bottom: 6px; }

/* Foldable overview sections (study detail): hide secondary detail */
details.overview-section > summary{ cursor:pointer; list-style-position:outside; }
details.overview-section > summary.overview-label{ margin-bottom:0; }
details.overview-section[open] > summary.overview-label{ margin-bottom:8px; }

/* Investigation name above its studies in the left rail */
.rail-iset-name{ padding:2px 14px 6px; font-size:0.82em; font-weight:600; color:#4338ca; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ─────────────────────────────────────────────────────────────────────
 * Biology-at-a-glance — planning-phase, biologist-first.
 *
 * Renders at the top of the study Overview tab whenever a study.yaml
 * declares any of: biological_summary, study_card, literature_anchors.
 *
 * Goal: a biologist scrolls past everything else and gets a complete
 * understanding of the study before scrolling into listener paths or
 * test-spec details.
 * ─────────────────────────────────────────────────────────────────── */
.biology-glance {
  margin: 0 0 18px 0;
  padding: 14px 18px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-left: 5px solid #16a34a;
  border-radius: 8px;
}
.biology-glance-label {
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #166534;
  margin: 0 0 8px 0;
  font-weight: 600;
}
.biology-summary-callout {
  margin-bottom: 14px;
}
.biology-summary-callout .biology-prose {
  margin: 0;
  font-size: 1.02em;
  line-height: 1.55;
  color: #14532d;
  white-space: pre-line;
}
.study-card {
  margin-bottom: 14px;
  background: #fff;
  border-radius: 6px;
  padding: 10px 14px;
  border: 1px solid #d1fae5;
}
.study-card-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93em;
}
.study-card-table th {
  text-align: left;
  font-weight: 600;
  color: #166534;
  background: #f0fdf4;
  padding: 6px 10px;
  white-space: nowrap;
  vertical-align: top;
  width: 180px;
  border-bottom: 1px solid #bbf7d0;
}
.study-card-table td {
  padding: 6px 10px;
  vertical-align: top;
  color: #14532d;
  border-bottom: 1px solid #f0fdf4;
  line-height: 1.5;
}
.study-card-table tr:last-child th,
.study-card-table tr:last-child td {
  border-bottom: none;
}
.literature-anchors {
  background: #fff;
  border-radius: 6px;
  padding: 10px 14px;
  border: 1px solid #d1fae5;
}
.literature-anchor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.literature-anchor-card {
  padding: 8px 12px;
  background: #f8fefa;
  border-left: 3px solid #16a34a;
  border-radius: 4px;
  font-size: 0.92em;
}
.literature-anchor-card .anchor-expectation {
  font-weight: 500;
  color: #064e3b;
  margin-bottom: 4px;
  line-height: 1.45;
}
.literature-anchor-card .anchor-observable,
.literature-anchor-card .anchor-source,
.literature-anchor-card .anchor-status {
  font-size: 0.88em;
  color: #475569;
  margin: 2px 0;
  line-height: 1.45;
}
.literature-anchor-card .anchor-observable code {
  font-size: 0.92em;
  background: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid #d1fae5;
}
.literature-anchor-card .anchor-status {
  font-style: italic;
}

/* ─── Investigation-level biology story banner ─────────────────────── */
.investigation-biology-story {
  padding: 16px 20px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-left: 5px solid #0284c7;
  border-radius: 8px;
  margin-bottom: 18px;
}
.investigation-biology-story h2 {
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #075985;
  margin: 0 0 8px 0;
  font-weight: 600;
}
.investigation-biology-story .biology-prose {
  margin: 0;
  font-size: 1em;
  line-height: 1.6;
  color: #0c4a6e;
  white-space: pre-line;
}

/* ─── Pre-run expert review (study Overview) ───────────────────────── */
.pre-run-expert-review {
  margin-top: 18px;
  padding: 14px 16px;
  background: #faf5ff;
  border: 1px solid #e9d5ff;
  border-left: 5px solid #a855f7;
  border-radius: 8px;
}
.pre-run-expert-review .overview-label {
  color: #6b21a8;
}
.expert-question-list { display: flex; flex-direction: column; gap: 10px }
.expert-question-card {
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e9d5ff;
  border-left: 4px solid #a855f7;
  border-radius: 6px;
}
.expert-question-card.status-resolved { border-left-color: #10b981 }
.expert-question-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85em; color: #6b21a8; margin-bottom: 6px;
}
.expert-question-id {
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  background: #ede9fe; padding: 1px 6px; border-radius: 3px;
}
.expert-question-status {
  font-size: 0.78em;
  padding: 1px 6px; border-radius: 9999px;
  background: #fef3c7; color: #92400e;
}
.expert-question-card.status-resolved .expert-question-status {
  background: #d1fae5; color: #065f46;
}
.expert-question-asked-to {
  font-size: 0.78em; color: #6b7280; margin-left: auto;
}
.expert-question-text {
  font-size: 0.95em; line-height: 1.55; color: #1e1b4b;
  margin-bottom: 6px;
}
.expert-question-alternatives,
.expert-question-impact {
  font-size: 0.9em; color: #475569; line-height: 1.5;
  margin: 4px 0;
}
.expert-question-alternatives ul {
  margin: 4px 0 0 18px; padding: 0;
}
.expert-question-alternatives li { margin: 2px 0 }
.expert-question-impact em,
.expert-question-alternatives em {
  color: #6b21a8; font-style: normal; font-weight: 600;
}
.expert-question-blocks,
.expert-question-response {
  font-size: 0.88em; margin: 6px 0 0 0; color: #475569;
}
.expert-question-blocks summary,
.expert-question-response summary {
  cursor: pointer; padding: 3px 0; color: #6b7280;
}
.expert-question-blocks ul {
  margin: 4px 0 0 18px; padding: 0;
}
.expert-question-blocks li { margin: 2px 0; font-size: 0.92em }
.expert-question-response p {
  margin: 4px 0; padding: 6px 10px; background: #faf5ff; border-radius: 4px;
}

/* ── Analyses gallery (saved interactive visualizations) ────────────────── */
.analyses-gallery {
  display: grid;
  /* Compact launcher cards in a responsive grid — scales as viewers are added. */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  align-items: start;
}
.analyses-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}
.analyses-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.analyses-card .viz-embed { display: block; }

/* Compact tool card: header · description · footer (result selector + Open). */
.tool-card { display: flex; flex-direction: column; }
.tool-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tool-head strong { font-size: 0.95em; }
.tool-need { font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.tool-desc { font-size: 0.82em; line-height: 1.35; margin: 4px 0 10px; }
.tool-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.tool-select { flex: 1; min-width: 0; font-size: 0.82em; padding: 3px 6px;
  border: 1px solid #cbd5e1; border-radius: 5px; background: #fff; }
.tool-one { flex: 1; min-width: 0; font-size: 0.82em; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tool-empty { font-size: 0.82em; }
.tool-open { flex-shrink: 0; }

.tool-requires { color: var(--gray); font-size: 0.82em; }
.tool-matches { display: flex; flex-direction: column; gap: 4px; }
.tool-row + .tool-row { margin-top: 8px; }
.viewer-target-list { display: flex; flex-direction: column; gap: 4px; }
.explorer { display:flex; flex-direction:column; gap:10px; }
/* top bar: run picker · view tabs · pop-out */
.exp-topbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding-bottom:8px; border-bottom:1px solid #2a313c; }
.exp-runsel { display:flex; align-items:center; gap:6px; font-size:0.85em; color:#8896a5; }
.exp-runsel select { max-width:340px; }
.exp-tabs { display:flex; gap:4px; }
.exp-tab { text-transform:capitalize; padding:4px 12px; border:1px solid #2a313c;
  background:#11151b; color:#cfd6df; border-radius:5px; cursor:pointer; font-size:0.85em; }
.exp-tab:hover { border-color:#3a4453; }
.exp-tab.active { border-color:#4c8bf5; background:#16243d; color:#fff; }
.exp-popout { margin-left:auto; font-size:0.82em; padding:4px 10px; border:1px solid #2a313c;
  border-radius:5px; color:#9db4d6; text-decoration:none; white-space:nowrap; }
.exp-popout:hover { border-color:#4c8bf5; color:#fff; }
/* body: left control rail + chart area */
.exp-body { display:flex; gap:14px; align-items:flex-start; }
.exp-rail { flex:0 0 230px; display:flex; flex-direction:column; gap:10px;
  font-size:0.82em; color:#8896a5; }
.exp-rail label { display:flex; flex-direction:column; gap:4px; }
.exp-rail select, .exp-rail input[type="range"] { width:100%; }
.exp-rail select[multiple] { height:200px; }
.exp-rail label:has(> input[type="checkbox"]) { flex-direction:row; align-items:center; gap:6px; }
.exp-view { flex:1 1 auto; min-width:0; min-height:460px;
  background:#0e1116; border:1px solid #1d2530; border-radius:6px; }
.exp-view svg { display:block; margin:0 auto; }
.explorer-loading { color:#8896a5; font-size:0.9em; padding:8px 0; }
/* full-window standalone page */
.explorer-standalone { position:fixed; inset:0; padding:14px 18px; box-sizing:border-box;
  display:flex; flex-direction:column; background:#0b0e12; }
.explorer-standalone .explorer { flex:1 1 auto; min-height:0; }
.explorer-standalone .exp-body { flex:1 1 auto; min-height:0; }
.explorer-standalone .exp-view { height:100%; }
.exp-rail #ts-obs, .exp-rail #ts-search { width:100%; }
.exp-rail #ts-obs { height:220px; }

/* Allocation view breadcrumb */
.al-crumb { font-size:0.85em; color:#cfd6df; margin-bottom:6px; }
.al-bc { cursor:pointer; color:#9db4d6; }
.al-bc:hover { color:#fff; text-decoration:underline; }

/* Two-level study nav: 5 pillars over a per-pillar sub-nav (tab consolidation). */
.study-pillars { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 2px; }
.study-pillar {
  border: 0; background: none; cursor: pointer; padding: 8px 14px;
  font-weight: 700; font-size: 0.95rem; color: #64748b; border-bottom: 3px solid transparent;
}
.study-pillar:hover { color: #334155; }
.study-pillar.active { color: #1e293b; border-bottom-color: #2563eb; }
.study-subnav { display: flex; gap: 2px; flex-wrap: wrap; margin: 0 0 10px; padding: 4px 0 0; }
.study-subnav .study-tab {
  border: 0; background: none; cursor: pointer; padding: 4px 11px; border-radius: 9999px;
  font-size: 0.85rem; color: #64748b;
}
.study-subnav .study-tab:hover { background: #f1f5f9; color: #334155; }
.study-subnav .study-tab.active { background: #e0e7ff; color: #1e40af; font-weight: 600; }
/* When a pillar has a single visible member, the pill row reads as a label, not a choice. */

/* ── Composite Explorer: Wiring viewer / Configure & Run tabs ─────────────── */
.ce-page-tabs { display: flex; gap: 20px; border-bottom: 1px solid #e5e7eb; margin: 14px 0 18px; }
.ce-page-tab { background: transparent; border: 0; padding: 9px 2px; font: inherit; font-size: 0.98em; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; transition: color .12s, border-color .12s; }
.ce-page-tab:hover { color: #1f2937; }
.ce-page-tab.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
.ce-page-panel[hidden] { display: none; }

/* ── Configure & Run form ─────────────────────────────────────────────────── */
.cfg-run h4 { margin: 0 0 4px; font-size: 1.1em; font-weight: 600; }
.cfg-run .muted { color: #6b7280; }
.cfg-form { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin: 14px 0 18px; }
.cfg-row { display: flex; align-items: center; gap: 14px; }
.cfg-name { flex: 0 0 220px; font-weight: 500; color: #374151; font-size: 0.95em; }
.cfg-run input[type="text"], .cfg-run input[type="number"] { flex: 1; max-width: 300px; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font: inherit; box-sizing: border-box; }
.cfg-run input[type="text"]:focus, .cfg-run input[type="number"]:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.cfg-run input[type="checkbox"] { width: 17px; height: 17px; accent-color: #2563eb; }
.cfg-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.cfg-run-btn { padding: 8px 18px; font-size: 0.95em; }
.cfg-status { margin-top: 12px; font-size: 0.9em; }
.cfg-loading { color: #6b7280; padding: 8px 0; }

/* ── Composite Explorer: full-bleed + single scrollbar ──────────────────────
 * The loom iframe is a full app that scrolls itself, so a fixed iframe height
 * plus the outer .viv-content scroll gave TWO scrollbars, and the page sat in a
 * centred column with wide side margins. Mirror the Studies full-bleed pattern:
 * make the page a flex column that fills the viewport and let #ce-main + the
 * loom card flex-grow into the remaining space, with viv-content's own scroll
 * killed — so the loom iframe's scrollbar (far right) is the only one. */
.viv-content:has(> #page-composite-explore.active){
  padding:8px 12px !important;
  width:100% !important; max-width:none !important;
  overflow:hidden !important;
  display:flex; flex-direction:column;
}
.viv-content > #page-composite-explore.active,
#page-composite-explore.active{
  max-width:none !important; width:100% !important; margin:0 !important;
  box-sizing:border-box;
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
}
#page-composite-explore.active #ce-main{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
}
/* compact metadata card at the top; small gap to the loom card below */
#page-composite-explore.active #ce-main > #ce-meta{
  flex:0 0 auto; margin-bottom:8px;
}
/* the loom card grows to fill — trim its panel padding so the iframe uses the
   full width/height (the loom app scrolls itself, so there's no wasted chrome) */
#page-composite-explore.active #ce-main > .panel:last-child{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  margin-bottom:0; padding:6px;
}
#page-composite-explore.active #composite-explore-frame{
  flex:1 1 auto !important;
  height:auto !important; min-height:0 !important;
  width:100% !important;
}
/* ── Registry: full-bleed, flush Modules / Discovered sub-tabs ───────────────
 * The two sub-tabs (Modules, Discovered registry) used to render in a centred
 * column, leaving a wide blank strip on the right and shifting margins when you
 * switched between them. Tighten the outer padding and force the page + every
 * sub-tab container to fill the content width, so both sub-tabs share one
 * uniform, marginless layout with a single (gutter-stable) scrollbar. */
.viv-content:has(> #page-registry.active){
  padding:8px 16px !important;
  width:100% !important; max-width:none !important;
}
.viv-content > #page-registry.active,
#page-modules.active, #page-market.active{
  max-width:none !important; width:100% !important; margin:0 !important;
  box-sizing:border-box;
}
#page-modules.active .registry-tabs,
#page-modules.active .registry-tab-panel,
#page-modules.active .registry-view-toolbar,
#page-modules.active .registry-search,
#page-modules.active .registry-sticky,
#page-modules.active .page-fill,
#page-market.active .page-fill,
#page-market.active .market-sticky,
#page-market.active .market-facets,
#page-market.active .market-results,
#page-market.active .market-toolbar{
  width:100% !important; max-width:none !important;
  margin-left:0 !important; margin-right:0 !important;
  box-sizing:border-box;
}
/* Pin the header (tabs/facets + filter/zoom) to the top of the scroll area so
   the long list scrolls beneath it. The pages carry no panel box, so the sticky
   header sits on the page background and spans the content width. */
#page-modules .registry-sticky,
#page-market .market-sticky{
  position:sticky; top:0; z-index:20;
  background:var(--bg);
  margin:0 0 10px; padding:8px 0 4px;
  border-bottom:1px solid var(--border);
}
/* The scroll container (.viv-content) carries 24px top padding; a sticky header
   pins at top:0 = the padding edge, leaving a transparent strip above it through
   which the scrolling cards show ("cards scrolled up under the search bar"). Drop
   the container's top padding on these pages and let the sticky header sit flush
   at the very top of the scroll area; the sticky supplies its own top gap. */
.viv-content:has(> #page-market.active),
.viv-content:has(> #page-modules.active){
  padding-top:0 !important;
}
#page-modules .registry-sticky,
#page-market .market-sticky{ padding-top:16px; }
/* On the Repositories facet the provenance chips filter installed ("Repository")
   vs available-to-install ("Other repos") repos — see _renderMarketRepos. */
/* ── Investigation DAG semantic zoom slider ────────────────────────────────── */
#aig-zoom-slider {
  cursor: pointer;
  vertical-align: middle;
  accent-color: #2563eb;
}
#aig-zoom-slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2563eb;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
#aig-zoom-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2563eb;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Investigation-graph semantic zoom: status-badge click affordance + band tweaks. */
.aig-status-badge { border-radius: 3px; padding: 0 2px; }
.aig-status-badge:hover { background: rgba(0,0,0,0.06); }
.aig-status-badge:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }
/* Far (overview) band: tighter cards so the whole DAG reads at a glance. */
#investigation-dag-shell.aig-zoom-far .iset-dag-node { padding: 6px 8px; }

/* ── Composites page: compact, informative cards ──────────────────────────── */
.ccard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
  align-items: start;
}
/* Semantic-zoom Cards / Loom: full-row composite cards (one per row). */
.ccard-rows { display: flex; flex-direction: column; gap: 10px; }
.ccard-rows .ccard { width: 100%; }
/* Compact full-row card: content distributed across the bar into subareas, so
   each card is short. identity | description | stats | actions. */
.ccard-compact { padding: 10px 14px; gap: 0; }
.ccard-compact.reg-selected { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,0.22); }
.ccc-grid {
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) minmax(0, 2.4fr) minmax(150px, 1fr) auto;
  gap: 20px; align-items: start;
}
@media (max-width: 900px) { .ccc-grid { grid-template-columns: 1fr; gap: 6px; } }
.ccc-identity { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ccc-name-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ccc-name { font-weight: 700; color: #0f172a; font-size: 1.0em; }
.ccc-addr {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.74em; color: #94a3b8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ccc-desc {
  color: #475569; font-size: 0.86em; line-height: 1.45; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ccc-stats { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ccc-stats .ccard-meta { margin: 0; font-size: 0.78em; }
.ccc-stats .ccard-track { margin: 2px 0 0; }
.ccc-stats .ccard-bar { height: 5px; }
.ccc-actions { display: flex; align-items: flex-start; justify-content: flex-end; }
/* Config / structure / tags collapse into a short strip under the grid. */
.ccc-details-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f5f9;
}
.ccc-details-row > details { margin: 0; }
.ccc-details-row > details > summary { font-size: 0.82em; }
.ccc-details-row .ccard-tags { margin: 0; }
/* Loom (Full) zoom: an inline, on-demand bigraph embed per composite card. */
.ccard-loom-embed { border-top: 1px solid #f1f5f9; margin-top: 4px; }
.ccard-loom-embed > summary {
  cursor: pointer; user-select: none; color: #4338ca; font-weight: 600;
  font-size: 0.85em; padding: 6px 0 2px; list-style: none;
}
.ccard-loom-embed > summary::-webkit-details-marker { display: none; }
.ccard-loom-embed > summary::before { content: '▸ '; }
.ccard-loom-embed[open] > summary::before { content: '▾ '; }
.ccard-loom-frame {
  border: 1px solid #cbd5e1; border-radius: 0; background: #fbfcfe;
  margin: 6px 0 2px; overflow: hidden;
  display: flex; flex-direction: column;
  height: 460px; min-height: 220px; max-height: 92vh;
}
.ccard-loom-iframe { width: 100%; flex: 1 1 auto; height: auto; min-height: 0; border: 0; display: block; }
/* Inline-loom mode bar: read-only preview ⇄ "Enable running" (live). */
.ccard-loom-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 8px; border: 1px solid #cbd5e1; border-bottom: 0; background: #f8fafc;
  font-size: 12px; margin: 6px 0 0;
}
.ccard-loom-bar + .ccard-loom-frame { margin-top: 0; }
.ccard-loom-mode { color: #64748b; }
.ccard-loom-mode.live { color: #047857; font-weight: 600; }
.ccard-loom-live-btn {
  font-size: 12px; color: #fff; background: #059669; border: 1px solid #059669;
  border-radius: 5px; padding: 3px 11px; cursor: pointer;
}
.ccard-loom-live-btn:hover { background: #047857; }
/* Drag-to-resize grip at the bottom of an embedded loom — grow/shrink the panel
   (and the card with it). Full-width bar so the gesture is obvious. */
.ccard-loom-resize {
  flex: 0 0 11px; cursor: ns-resize; background: #eef2f7;
  border-top: 1px solid #d5dde8; position: relative; touch-action: none;
  user-select: none;
}
.ccard-loom-resize::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 34px; height: 3px; margin: -1.5px 0 0 -17px; border-radius: 2px;
  background: #9aa7b8;
}
.ccard-loom-resize:hover { background: #e2e8f2; }
.ccard-loom-resize:hover::before { background: #6b7a90; }
.ccard-loom-frame.is-resizing { user-select: none; }
.ccard {
  display: flex; flex-direction: column; gap: 7px;
  border: 1px solid #e5e7eb; border-radius: 8px; background: #fff;
  padding: 11px 13px; min-height: 0;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.ccard:hover { box-shadow: 0 3px 12px rgba(15,23,42,.07); border-color: #cbd5e1; }
.ccard-ws-card { border-left: 3px solid #22c55e; }
/* Name takes the FULL card width (no badge squeeze); badges wrap to the row
   below it so the composite name is never folded into a narrow column. */
.ccard-top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.ccard-name { font-weight: 700; font-size: 14px; color: #0f172a; line-height: 1.3; overflow-wrap: anywhere; flex: 1 1 100%; }
.ccard-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.ccard-kind, .ccard-src {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 7px; border-radius: 10px; white-space: nowrap;
}
.ccard-kind-generator { color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; }
.ccard-kind-spec { color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0; }
.ccard-src { color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0; }
.ccard-src-ws { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.ccard-id {
  font-size: 10.5px; color: #94a3b8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -2px;
}
.ccard-desc {
  font-size: 12px; color: #475569; line-height: 1.45; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ccard-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: #64748b; align-items: center; }
.ccard-meta i { color: #cbd5e1; font-style: normal; }
.ccard-params { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ccard-param {
  font-size: 10px; color: #475569; background: #f1f5f9; border-radius: 4px;
  padding: 1px 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ccard-more { font-size: 10px; color: #94a3b8; font-weight: 600; }
.ccard-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ccard-tag {
  font-size: 10px; color: #7c3aed; background: #f5f3ff; border: 1px solid #ede9fe;
  border-radius: 10px; padding: 0 7px; line-height: 1.6;
}
.ccard-foot { margin-top: auto; padding-top: 5px; }
.ccard-explore {
  font-size: 12px; color: #2563eb; background: #fff; border: 1px solid #bfdbfe;
  border-radius: 5px; padding: 3px 12px; cursor: pointer; transition: background .12s;
}
.ccard-explore:hover { background: #eff6ff; }
/* View — the primary card action (opens the loom inline at full detail). Filled
   to read as primary next to the outline "Pop out ↗". */
.ccard-view {
  font-size: 12px; color: #fff; background: #2563eb; border: 1px solid #2563eb;
  border-radius: 5px; padding: 3px 14px; cursor: pointer; transition: background .12s;
  margin-right: 6px;
}
.ccard-view:hover { background: #1d4ed8; }
/* The inline loom is now opened via the card's "View" action, so its own
   "Open loom" disclosure summary is redundant — hide it (the embed still
   toggles open/closed programmatically). */
.ccard-loom-embed > summary { display: none; }
/* Pin-to-top toggle — hover-revealed on each card/row; stays lit once pinned. */
.ccard-pin {
  border: 0; background: transparent; cursor: pointer; font-size: 13px; line-height: 1;
  padding: 2px 5px; margin-right: 2px; border-radius: 4px;
  opacity: 0; filter: grayscale(1) opacity(0.55); transition: opacity .12s, filter .12s, background .12s;
}
.ccard:hover .ccard-pin,
.composite-list-row:hover .ccard-pin,
.reg-tr:hover .ccard-pin { opacity: 1; }
.ccard-pin:hover { background: #f1f5f9; }
.ccard-pin.pinned { opacity: 1; filter: none; }
/* Composites table: narrow leading pin column. */
.reg-th-pin { width: 26px; padding: 0 !important; }
.reg-td-pin { width: 26px; text-align: center; padding: 0 !important; }
.reg-td-pin .ccard-pin { margin: 0; padding: 2px; }
/* Composite card — expandable config (param · type · default · description). */
.ccard-cfg { font-size: 11px; }
.ccard-cfg > summary {
  cursor: pointer; color: #2563eb; font-weight: 600; list-style: none;
  padding: 2px 0; user-select: none;
}
.ccard-cfg > summary::-webkit-details-marker { display: none; }
.ccard-cfg > summary::before { content: '▸ '; color: #94a3b8; }
.ccard-cfg[open] > summary::before { content: '▾ '; }
.ccard-cfg-body {
  margin-top: 4px; border-top: 1px solid #f1f5f9; padding-top: 5px;
  display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow: auto;
}
.ccard-cfg-row { display: flex; flex-direction: column; gap: 1px; }
.ccard-cfg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.ccard-cfg-name { font-size: 11px; color: #1e293b; font-weight: 600; font-family: ui-monospace, monospace; }
.ccard-cfg-type { font-size: 10px; color: #7c3aed; font-family: ui-monospace, monospace; }
.ccard-cfg-def { font-size: 10px; color: #64748b; font-family: ui-monospace, monospace; }
.ccard-cfg-desc { font-size: 10.5px; color: #64748b; line-height: 1.4; padding-left: 2px; }
/* Composite card — cross-study track record (usage + pass/inconclusive/fail). */
.ccard-track { display: flex; flex-direction: column; gap: 3px; }
.ccard-track-top { font-size: 11px; color: #475569; }
.ccard-track-top strong { color: #0f172a; }
.ccard-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: #f1f5f9; }
.ccard-bar .seg { height: 100%; }
.ccard-bar .seg.pass { background: #22c55e; }
.ccard-bar .seg.inc  { background: #f59e0b; }
.ccard-bar .seg.fail { background: #ef4444; }
.ccard-track-counts { display: flex; gap: 8px; font-size: 10.5px; font-weight: 600; }
.ccard-track-counts .pass { color: #15803d; }
.ccard-track-counts .inc  { color: #b45309; }
.ccard-track-counts .fail { color: #b91c1c; }
/* Composite card — lazy structure (process/store counts). */
.ccard-struct { font-size: 11px; }
.ccard-struct > summary {
  cursor: pointer; color: #2563eb; font-weight: 600; list-style: none; padding: 2px 0; user-select: none;
}
.ccard-struct > summary::-webkit-details-marker { display: none; }
.ccard-struct > summary::before { content: '▸ '; color: #94a3b8; }
.ccard-struct[open] > summary::before { content: '▾ '; }
.ccard-struct-body { font-size: 11px; color: #475569; padding: 3px 0 1px 2px; }

/* Federated (foreign-module) content — origin-repo provenance badge +
   read-only treatment on composite / study / investigation-set cards. */
.origin-badge{display:inline-block;font-size:0.72em;font-weight:600;color:#5b21b6;
  background:#ede9fe;border:1px solid #ddd6fe;border-radius:10px;padding:1px 7px;
  margin-left:6px;vertical-align:middle;white-space:nowrap}
.federated-readonly{opacity:0.92}
.federated-readonly .action-btn,.federated-readonly .btn-mini{display:none}

/* ═══════════════ Light / dark theme ═══════════════ */
/* Rail toggle switch (sun ↔ moon sliding pill). */
.viv-rail-footer{ padding:10px 16px; border-top:1px solid #ececec; display:flex; }
.viv-rail.viv-rail-collapsed .viv-rail-footer{ justify-content:center; padding:10px 4px; }
/* Theme-toggle footer only: a compact, low-key corner. The pill is invisible
   until the corner is hovered (or keyboard-focused), so it's unobtrusive and
   gives the studies list more room. Its own class so the shared .viv-rail-footer
   (reused by the GitHub account chip) is untouched. */
.viv-rail-theme-footer{ padding:0 16px 6px; border-top:none; align-items:center; }
.viv-rail.viv-rail-collapsed .viv-rail-theme-footer{ padding:0 4px 6px; }
.viv-rail-theme-footer .viv-theme-toggle{
  opacity:0; transform:scale(0.94); transform-origin:left center;
  transition:opacity .16s ease, transform .16s ease;
}
.viv-rail-theme-footer:hover .viv-theme-toggle,
.viv-rail-theme-footer:focus-within .viv-theme-toggle{ opacity:1; transform:none; }
.viv-theme-toggle{
  position:relative; display:inline-flex; align-items:center; justify-content:space-between;
  width:56px; height:26px; padding:0 7px; border-radius:14px;
  border:1px solid #d8dee6; background:#eef1f5; cursor:pointer;
}
.viv-theme-ico{ display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; z-index:1; }
.viv-theme-ico svg{ width:13px; height:13px; display:block; }
.viv-theme-sun{ color:#f59e0b; }
.viv-theme-moon{ color:#94a3b8; }
.viv-theme-thumb{
  position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); transition:left .18s ease;
}

/* ── Dark theme (dark-blue) ──────────────────────────────────────────────
   The whole palette lives in the variables below — tweak the look from one
   place. Rules below reference them. The workbench has many INLINE styles
   (background:#fff;, color:#334155, …), so a final block retargets those by
   substring with !important; colored status pills are left as readable badges. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b1220;          /* page background (darkest) */
  --rail:#0f1728;        /* rail, header, STUDIES head */
  --surface:#18233c;     /* cards / panels — a bit brighter so they stand out */
  --field:#0d1526;       /* inputs / config+port fields — darker, recede below the card */
  --surface-2:#12203a;   /* subtle sections: code, config bar, outputs, toolbars */
  --surface-3:#1c2946;   /* small buttons, chips */
  --border:#26324c;
  --border-2:#2c3a58;    /* input borders */
  --border-faint:#1e2b44;/* table rows, rail dividers */
  --hover:#182339;
  --active:#20304f;
  --text:#d3ddeb;
  --text-muted:#93a3b6;
  --heading:#eef2f8;
  --link:#8ab4ff;
  --accent:#6366f1;
  /* map the light-mode var names so existing var(--panel)/var(--gray) rules follow */
  --panel:var(--surface); --gray:var(--text-muted);
}
:root[data-theme="dark"] body{ color:var(--text); background:var(--bg); }
:root[data-theme="dark"] a{ color:var(--link); }
:root[data-theme="dark"] .viv-theme-toggle{ background:#22304a; border-color:var(--border-2); }
:root[data-theme="dark"] .viv-theme-thumb{ left:32px; background:var(--bg); }
:root[data-theme="dark"] .viv-theme-moon{ color:#c7d2fe; }
:root[data-theme="dark"] .viv-theme-sun{ color:#64748b; }

/* Chrome + content */
:root[data-theme="dark"] .viv-rail,
:root[data-theme="dark"] header,
:root[data-theme="dark"] .viv-rail-studies-head{ background:var(--rail) !important; border-color:var(--border-faint) !important; color:var(--text); }
:root[data-theme="dark"] .viv-content,
:root[data-theme="dark"] .page{ background:var(--bg); }
:root[data-theme="dark"] .viv-rail-section-label{ color:#7788a0; }
:root[data-theme="dark"] .viv-rail-studies-link{ color:var(--text); }
:root[data-theme="dark"] .viv-rail-studies-link:hover{ background:var(--active); color:var(--link); }

/* Rail nav + study lists */
:root[data-theme="dark"] .viv-rail-link,
:root[data-theme="dark"] .viv-rail-investigations-group-header,
:root[data-theme="dark"] .viv-rail-investigations-group-name,
:root[data-theme="dark"] .viv-rail-investigations-group-items .viv-rail-link,
:root[data-theme="dark"] .viv-rail-ungrouped-section .viv-rail-sublink,
:root[data-theme="dark"] .viv-rail-pinned-section{ background:var(--surface-2) !important; border-bottom-color:var(--border) !important; }
:root[data-theme="dark"] .viv-rail-pinned-section .viv-rail-sublink-pinned{ color:#c6d1e0; }
:root[data-theme="dark"] .viv-rail-link:hover,
:root[data-theme="dark"] .viv-rail-investigations-group-header:hover,
:root[data-theme="dark"] .viv-rail-sublink:hover{ background:var(--hover); }
:root[data-theme="dark"] .viv-rail-link.active,
:root[data-theme="dark"] .viv-rail-investigations-group-items .viv-rail-link.active{ background:var(--active); color:#eaf1ff; }
:root[data-theme="dark"] .viv-rail-investigations-group-items .viv-rail-link-sub,
:root[data-theme="dark"] .count-badge,
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .reg-ip-type, :root[data-theme="dark"] .loom-port-type,
:root[data-theme="dark"] .cols-count, :root[data-theme="dark"] .page-lead,
:root[data-theme="dark"] .card-browse-options{ color:var(--text-muted); }
:root[data-theme="dark"] .viv-rail-investigations-group-count{ background:var(--border); color:#c3cfdd; }
:root[data-theme="dark"] .viv-rail-investigations-group.rail-iset-active{ background:#161f38; border-left-color:#818cf8; }
:root[data-theme="dark"] .viv-rail-investigations-group.rail-iset-active .viv-rail-investigations-group-count{ background:var(--accent); color:#fff; }

/* Surfaces: cards, panels, tables, code, toolbars, buttons */
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .registry-card,
:root[data-theme="dark"] .ccard,
:root[data-theme="dark"] .module-card,
:root[data-theme="dark"] .registry-table,
:root[data-theme="dark"] .loom-card,
:root[data-theme="dark"] .investigation-card,
:root[data-theme="dark"] .analyses-card,
:root[data-theme="dark"] .tool-card{ background:var(--surface); border-color:var(--border); color:var(--text); }
:root[data-theme="dark"] .loom-config,
:root[data-theme="dark"] .loom-sec-out,
:root[data-theme="dark"] .reg-ip,
:root[data-theme="dark"] .json-viewer,
:root[data-theme="dark"] .card-browse-toolbar,
:root[data-theme="dark"] pre, :root[data-theme="dark"] code,
:root[data-theme="dark"] th, :root[data-theme="dark"] .reg-th{ background:var(--surface-2); border-color:var(--border); color:#c8d4e4; }
:root[data-theme="dark"] td{ border-color:var(--border-faint); }
:root[data-theme="dark"] .reg-tr:hover{ background:#16223a; }
:root[data-theme="dark"] .cols-auto-btn,
:root[data-theme="dark"] .reg-zoom-btn,
:root[data-theme="dark"] .btn-mini,
:root[data-theme="dark"] .action-btn,
:root[data-theme="dark"] .card-browse-chip{ background:var(--surface-3); border-color:var(--border-2); color:#cdd9e8; }
:root[data-theme="dark"] .card-browse-chip.active{ background:#3b82f6; border-color:#3b82f6; color:#fff; }
:root[data-theme="dark"] .registry-zoom,
:root[data-theme="dark"] .registry-viewmode{ border-color:var(--border-2); }
/* Neutral chrome badges + icon buttons (colored status pills stay as-is). */
:root[data-theme="dark"] .registry-tab .count-badge{ background:var(--surface-3); color:#c6d1e0; }
:root[data-theme="dark"] .icon-btn,
:root[data-theme="dark"] .viv-icon-btn{ background:var(--surface-3); border-color:var(--border-2); color:#c6d1e0; }
:root[data-theme="dark"] .icon-btn:hover,
:root[data-theme="dark"] .viv-icon-btn:hover{ background:var(--hover); color:var(--heading); }
:root[data-theme="dark"] .install-src-pill,
:root[data-theme="dark"] .install-src-venv,
:root[data-theme="dark"] .install-src-pyproject,
:root[data-theme="dark"] .install-src-unmanaged{ background:var(--surface-3) !important; border-color:var(--border-2) !important; color:#c6d1e0 !important; }

/* Headings + card names (class-colored, not inline) */
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3,
:root[data-theme="dark"] h4, :root[data-theme="dark"] .page-title,
:root[data-theme="dark"] .reg-card-name, :root[data-theme="dark"] .loom-name,
:root[data-theme="dark"] .mrow-name-text, :root[data-theme="dark"] .ccard-name,
:root[data-theme="dark"] .ccc-name{ color:var(--heading); }
:root[data-theme="dark"] .mrow-desc,
:root[data-theme="dark"] .ccard-desc{ color:#a9b6c6; }
/* Investigation card titles were dark-on-dark (strong inherits, no inline color). */
:root[data-theme="dark"] .investigation-set-card strong,
:root[data-theme="dark"] .investigation-card .name{ color:var(--heading); }

/* Registry Full runnable card: config-field chips had a white surround and the
   port type badges (map[millimolar], string, …) were light. */
:root[data-theme="dark"] .loom-cfg-inline .loom-cfg-row{ background:var(--surface-2); border-color:var(--border); }
:root[data-theme="dark"] .loom-in-type,
:root[data-theme="dark"] .reg-mid-config code{ background:var(--surface-3); color:#aeb9c8; }
:root[data-theme="dark"] .loom-cfg-key{ color:#aeb9c8; }
:root[data-theme="dark"] .loom-in-key{ color:#9db4e6; }
:root[data-theme="dark"] .loom-out-ports .loom-port{ background:var(--surface-3); border-color:var(--border-2); }
:root[data-theme="dark"] .loom-port-name{ color:#9db4e6; }

/* Investigation view: biology story, graph canvas, and study-DAG node cards. */
:root[data-theme="dark"] .inv-bio-story{ background:var(--surface-2) !important; border-color:var(--border) !important; color:var(--text); }
:root[data-theme="dark"] .aig-zoom-mid,
:root[data-theme="dark"] .aig-graph,
:root[data-theme="dark"] .aig-orient-lr,
:root[data-theme="dark"] .aig-orient-tb{ background:var(--bg) !important; }
:root[data-theme="dark"] .iset-dag-node{ background:var(--surface) !important; border-color:var(--border) !important; color:var(--text); }
:root[data-theme="dark"] .iset-dag-node .aig-claim-row:hover{ background:var(--hover); }
:root[data-theme="dark"] #investigation-dag-lead{ color:var(--text-muted) !important; }
:root[data-theme="dark"] #investigation-dag-lead strong{ color:var(--text) !important; }
:root[data-theme="dark"] .inv-lead-details summary{ color:var(--text-muted) !important; }
:root[data-theme="dark"] .viv-info-chip{ background:var(--surface-3) !important; color:var(--text-muted) !important; border-color:var(--border) !important; }
/* Inquiry brief (investigation opening) — dark. Accent --vs keeps its vivid
   colour; the pill bg/fg get dark-tinted variants. */
:root[data-theme="dark"] .inv-brief-q{ color:var(--heading); }
:root[data-theme="dark"] .inv-brief-verdict{ background:var(--surface-2); color:var(--text); }
:root[data-theme="dark"] .inv-brief-verdict-label{ color:var(--heading); }
:root[data-theme="dark"] .inv-brief-framing{ color:var(--text-muted); }
:root[data-theme="dark"] .inv-brief-meta{ color:var(--text-muted); }
:root[data-theme="dark"] .inv-brief-meta-item em{ color:var(--text); }
:root[data-theme="dark"] .inv-brief-meta-item + .inv-brief-meta-item::before{ color:var(--border-2); }
:root[data-theme="dark"] .inv-brief-tabs{ border-bottom-color:var(--border); }
:root[data-theme="dark"] .inv-brief-tab{ color:var(--text-muted); }
:root[data-theme="dark"] .inv-brief-tab:hover{ color:var(--text); background:var(--hover); }
:root[data-theme="dark"] .inv-brief-tab.active{ color:var(--link); border-bottom-color:var(--link); }
:root[data-theme="dark"] .inv-brief-prose{ color:var(--text); }
:root[data-theme="dark"] .inv-brief-howto{ color:var(--text); }
:root[data-theme="dark"] .inv-brief-glossary dt{ color:var(--heading); }
:root[data-theme="dark"] .inv-brief-glossary dd{ color:var(--text-muted); }
:root[data-theme="dark"] .inv-brief.inv-vs-passed   { --vs-bg:#12351f; --vs-fg:#86efac; }
:root[data-theme="dark"] .inv-brief.inv-vs-progress { --vs-bg:#2a2113; --vs-fg:#fcd34d; }
:root[data-theme="dark"] .inv-brief.inv-vs-blocked  { --vs-bg:#3a1518; --vs-fg:#fca5a5; }
:root[data-theme="dark"] .inv-brief.inv-vs-planning { --vs-bg:#14243f; --vs-fg:#93c5fd; }
:root[data-theme="dark"] .inv-brief.inv-vs-default  { --vs-bg:var(--surface-3); --vs-fg:var(--text); }
/* Market (faceted artifact browser) — dark. */
:root[data-theme="dark"] .market-facets{ border-bottom-color:var(--border); }
:root[data-theme="dark"] .market-facet{ color:var(--text-muted); }
:root[data-theme="dark"] .market-facet:hover{ color:var(--text); background:var(--hover); }
:root[data-theme="dark"] .market-facet.active{ color:var(--link); border-bottom-color:var(--link); }
:root[data-theme="dark"] .market-origin-chip{ background:var(--surface-3); border-color:var(--border); color:var(--text-muted); }
:root[data-theme="dark"] .market-origin-chip:hover{ color:var(--text); border-color:var(--border-2); }
:root[data-theme="dark"] .market-origin-chip.active{ background:var(--active); color:var(--link); border-color:var(--border-2); }
:root[data-theme="dark"] .market-group-head{ color:var(--text-muted); }
:root[data-theme="dark"] .market-count{ background:var(--surface-3); color:var(--text-muted); }
:root[data-theme="dark"] .market-card{ background:var(--surface); border-color:var(--border); }
:root[data-theme="dark"] .market-card:hover{ box-shadow:0 2px 12px rgba(0,0,0,0.45); }
:root[data-theme="dark"] .market-name{ color:var(--heading); }
:root[data-theme="dark"] .market-repo{ background:var(--surface-3); color:var(--text-muted); }
:root[data-theme="dark"] .market-desc{ color:var(--text-muted); }
:root[data-theme="dark"] .market-meta{ color:var(--text-muted); }
:root[data-theme="dark"] .market-usage{ color:var(--text-muted); }
:root[data-theme="dark"] .market-row{ border-bottom-color:var(--border-faint); }
:root[data-theme="dark"] .market-row:hover{ background:var(--hover); }
:root[data-theme="dark"] .market-row-desc{ color:var(--text-muted); }
:root[data-theme="dark"] .market-dl-k{ color:var(--text-muted); }
:root[data-theme="dark"] .market-dl-v{ color:var(--text); }
:root[data-theme="dark"] .market-dl-v code,
:root[data-theme="dark"] .market-desc code{ background:var(--surface-3); color:var(--text); }
:root[data-theme="dark"] .market-table th,
:root[data-theme="dark"] .market-table td{ border-bottom-color:var(--border-faint); }
:root[data-theme="dark"] .market-th{ color:var(--text-muted); background:var(--surface-2); border-bottom-color:var(--border); }
:root[data-theme="dark"] .market-th:hover{ color:var(--text); background:var(--active); }
:root[data-theme="dark"] .market-th.sorted{ color:var(--link); }
:root[data-theme="dark"] .market-tr:hover{ background:var(--hover); }
:root[data-theme="dark"] .market-td-name{ color:var(--heading); }
:root[data-theme="dark"] .market-td-use{ color:var(--text-muted); }
:root[data-theme="dark"] .market-origin-workspace{ background:#1e2547; color:#a5b4fc; }
:root[data-theme="dark"] .market-origin-external{ background:#12351f; color:#86efac; }
/* Modals → dark surface (base .modal-box ships background:#fff). */
:root[data-theme="dark"] .modal-box{ background:var(--surface) !important; color:var(--text) !important; box-shadow:0 8px 32px rgba(0,0,0,0.6) !important; border:1px solid var(--border); }
:root[data-theme="dark"] .modal-box h1,
:root[data-theme="dark"] .modal-box h2,
:root[data-theme="dark"] .modal-box h3,
:root[data-theme="dark"] .modal-box h4,
:root[data-theme="dark"] .modal-box label{ color:var(--heading) !important; }
:root[data-theme="dark"] .modal-close{ color:var(--text-muted) !important; }

/* ── Study-detail page (loaded in the study/investigation iframe) ──────────
   Comprehensive dark pass: neutral containers → surface tokens, dark text →
   text tokens. Small colored/gray badges (status/classification/finding-kind
   pills, finding-id, status chips) are left as readable badges. */
:root[data-theme="dark"] .study-tabs,
:root[data-theme="dark"] .finding-card{ background:var(--surface) !important; border-color:var(--border) !important; }
:root[data-theme="dark"] .spine-summary,
:root[data-theme="dark"] .status-detail,
:root[data-theme="dark"] .status-detail-panel,
:root[data-theme="dark"] .overview-section,
:root[data-theme="dark"] .findings-section,
:root[data-theme="dark"] .purpose-callout,
:root[data-theme="dark"] .finding-evidence,
:root[data-theme="dark"] .finding-expected,
:root[data-theme="dark"] .finding-exp-summary{ background:var(--surface-2) !important; border-color:var(--border) !important; }
:root[data-theme="dark"] .finding-next{ background:#0f2417 !important; border-color:#1c3a28 !important; }
/* Container text → tokens (small pills keep their own colors). */
:root[data-theme="dark"] .study-name,
:root[data-theme="dark"] .spine-val,
:root[data-theme="dark"] .study-pillar,
:root[data-theme="dark"] .finding-statement,
:root[data-theme="dark"] .finding-explanation,
:root[data-theme="dark"] .finding-title,
:root[data-theme="dark"] .overview-section h2,
:root[data-theme="dark"] .overview-section h3,
:root[data-theme="dark"] .spine-at-glance-head{ color:var(--heading) !important; }
:root[data-theme="dark"] .status-detail-axis,
:root[data-theme="dark"] .spine-summary-head,
:root[data-theme="dark"] .spine-key,
:root[data-theme="dark"] .narrative-label,
:root[data-theme="dark"] .finding-evidence,
:root[data-theme="dark"] .finding-expected,
:root[data-theme="dark"] .finding-exp-summary,
:root[data-theme="dark"] .finding-evidence .em,
:root[data-theme="dark"] .finding-meta{ color:var(--text-muted) !important; }
/* Badges → dark-tinted pills (dark bg + light coloured text) so semantic
   colour survives on a dark surface without the light pill glare. */
:root[data-theme="dark"] .status-chip,
:root[data-theme="dark"] .finding-id{ background:var(--surface-3) !important; color:var(--text) !important; border-color:var(--border) !important; }
:root[data-theme="dark"] .phase-pill.phase-decide,
:root[data-theme="dark"] .status-pill.gate-status-passed,
:root[data-theme="dark"] .status-chip.gate-status-passed{ background:#12351f !important; color:#86efac !important; border-color:#1c4a2c !important; }
:root[data-theme="dark"] .finding-kind{ background:#1e2547 !important; color:#a5b4fc !important; border-color:#2c3566 !important; }
:root[data-theme="dark"] .classification-pill.classification-primary{ background:#3a1518 !important; color:#fca5a5 !important; border-color:#5a2226 !important; }
:root[data-theme="dark"] .classification-pill.classification-supporting{ background:#14243f !important; color:#93c5fd !important; border-color:#22375c !important; }
:root[data-theme="dark"] .readiness-banner{ background:#2a2113 !important; color:#fcd34d !important; border-color:#3d3418 !important; }
:root[data-theme="dark"] .finding-next,
:root[data-theme="dark"] .finding-next strong,
:root[data-theme="dark"] .finding-next *{ color:#86efac !important; }
:root[data-theme="dark"] .sim-status-pill.sim-status-ready{ color:#86efac !important; }
:root[data-theme="dark"] .finding-explanation em{ color:var(--text-muted) !important; }
/* Inline-styled severity/result pills (background baked into the element
   style). Templates use both spaced (`background: #x`) and unspaced forms. */
:root[data-theme="dark"] [style*="background:#fee2e2"],
:root[data-theme="dark"] [style*="background: #fee2e2"]{ background:#3a1518 !important; color:#fca5a5 !important; }
:root[data-theme="dark"] [style*="background:#fef3c7"],
:root[data-theme="dark"] [style*="background: #fef3c7"]{ background:#2a2113 !important; color:#fcd34d !important; }
:root[data-theme="dark"] [style*="background:#dcfce7"],
:root[data-theme="dark"] [style*="background: #dcfce7"]{ background:#12351f !important; color:#86efac !important; }
:root[data-theme="dark"] [style*="background:#dbeafe"],
:root[data-theme="dark"] [style*="background: #dbeafe"]{ background:#14243f !important; color:#93c5fd !important; }
:root[data-theme="dark"] [style*="background:#f1f5f9"],
:root[data-theme="dark"] [style*="background: #f1f5f9"]{ background:var(--surface-3) !important; color:var(--text-muted) !important; }
:root[data-theme="dark"] [style*="background:#f3f4f6"],
:root[data-theme="dark"] [style*="background: #f3f4f6"]{ background:var(--surface-3) !important; color:var(--text) !important; }

/* Form controls: native dark rendering + explicit dark (beats inline #fff;
   appearance:none so WebKit search inputs honor the background). */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .card-browse-search{
  -webkit-appearance:none; appearance:none; color-scheme:dark;
  background:var(--field) !important; color:var(--text) !important; border-color:var(--border-2) !important;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{ color:#6c7c90 !important; }

/* Inline-style retargeting (semicolon-anchored so amber pills like #fffbeb
   aren't caught by the #fff prefix). */
:root[data-theme="dark"] [style*="background:#fff;"],
:root[data-theme="dark"] [style*="background: #fff;"],
:root[data-theme="dark"] [style*="background:#ffffff"],
:root[data-theme="dark"] [style*="background:white"]{ background:var(--surface) !important; }
:root[data-theme="dark"] [style*="background:#f8fafc"],
:root[data-theme="dark"] [style*="background:#f1f5f9"],
:root[data-theme="dark"] [style*="background:#fafafa"],
:root[data-theme="dark"] [style*="background:#f9fafb"]{ background:var(--surface-2) !important; }
:root[data-theme="dark"] [style*="color:#0f172a"],
:root[data-theme="dark"] [style*="color:#111827"],
:root[data-theme="dark"] [style*="color:#1e293b"],
:root[data-theme="dark"] [style*="color:#334155"],
:root[data-theme="dark"] [style*="color:#374151"],
:root[data-theme="dark"] [style*="color:#475569"]{ color:#cdd8e6 !important; }
:root[data-theme="dark"] [style*="color:#64748b"],
:root[data-theme="dark"] [style*="color:#6b7280"],
:root[data-theme="dark"] [style*="color:#94a3b8"],
:root[data-theme="dark"] [style*="color:#9ca3af"]{ color:var(--text-muted) !important; }
:root[data-theme="dark"] [style*="solid #e5e7eb"],
:root[data-theme="dark"] [style*="solid #e2e8f0"],
:root[data-theme="dark"] [style*="solid #d1d5db"],
:root[data-theme="dark"] [style*="solid #eee"],
:root[data-theme="dark"] [style*="solid #f1f5f9"]{ border-color:var(--border) !important; }