/* No external fonts or scripts: the builder works offline (Inter is used when installed). */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0f1117;
  --bg-card:   #1a1d27;
  --bg-hover:  #22263a;
  --border:    #2a2e3e;
  --text:      #e4e6ed;
  --text-dim:  #8b8fa3;
  --accent:    #6c7fea;
  --accent-h:  #8b9cff;
  --green:     #4ade80;
  --green-dim: #22543d;
  --cyan:      #22d3ee;
  --cyan-dim:  #164e63;
  --red:       #f87171;
  --red-dim:   #7f1d1d;
  --orange:    #fb923c;
  --radius:    8px;
  --shadow:    0 4px 16px rgba(0,0,0,.35);
}

body {
  font-family: 'Inter', -apple-system, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

/* ── Header ── */
header {
  background: var(--bg-card);
  padding: .75rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}
header h1 {
  font-size: 1.1rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  gap: .5rem;
}
header h1 .icon { font-size: 1.3rem; -webkit-text-fill-color: var(--cyan); }

.toolbar { display: flex; gap: .5rem; }
.toolbar button {
  padding: .45rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-hover);
  color: var(--text);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 500;
  transition: all .15s;
}
.toolbar button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
#btn-run  { border-color: var(--green); color: var(--green); }
#btn-run:hover  { background: var(--green); color: #000; }
#btn-export { border-color: var(--cyan); color: var(--cyan); }
#btn-export:hover { background: var(--cyan); color: #000; }
#btn-clear { border-color: var(--red); color: var(--red); }
#btn-clear:hover { background: var(--red); color: #fff; }

/* ── Main layout ── */
.main-container { display: flex; flex: 1; overflow: hidden; }

/* ── Sidebar ── */
.sidebar {
  width: 240px;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
#component-list {
  flex: 1;
  overflow-y: auto;
  margin: 0 -1rem;
  padding: 0 1rem;
}
.sidebar h3, .config-panel h3 {
  margin-bottom: .75rem;
  font-size: .75rem;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
  letter-spacing: 1px;
}

.filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  margin-bottom: 0.75rem;
  transition: border-color .15s;
}
.filter-container:focus-within {
  border-color: var(--accent);
}
#filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.filter-tag {
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.filter-tag span {
  cursor: pointer;
  font-weight: bold;
}
.filter-tag span:hover {
  color: var(--red);
}
.filter-input {
  flex: 1;
  min-width: 60px;
  padding: 0.2rem;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.8rem;
}
.filter-input:focus {
  outline: none;
}

/* ── Custom Select / Context Menu ── */
.custom-contextual-menu {
  position: absolute;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  z-index: 1000;
  display: none;
  flex-direction: column;
  min-width: 150px;
}
.custom-contextual-menu.visible { display: flex; }
.custom-contextual-menu-item {
  padding: .5rem 1rem;
  color: var(--text);
  font-size: .85rem;
  cursor: pointer;
  transition: background .15s;
}
.custom-contextual-menu-item:hover { background: var(--accent); color: #fff; }

/* ── Component Module Hierarchy ── */
.module-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0.3rem;
}
.module-header {
  background: rgba(255,255,255,0.03);
  padding: 0.4rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius);
  user-select: none;
  transition: background 0.2s, color 0.2s;
  border: 1px solid transparent;
}
.module-header:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.module-header::after {
  content: "▶";
  font-size: 0.7rem;
  color: var(--text-dim);
  transition: transform 0.2s ease;
}
.module-section.expanded .module-header {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.06);
}
.module-section.expanded .module-header::after {
  transform: rotate(90deg);
}
.module-content {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 0.25rem;
  border: 1px solid rgba(255,255,255,0.05);
  border-top: none;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  background: rgba(0,0,0,0.15);
}
.module-section.expanded .module-content {
  display: flex;
}

/* one compact row per component (ADR 0021 §2): glyph, icon, name, badge; the rest is the row's tooltip */
.component-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: .2rem .45rem;
  cursor: grab;
  display: flex;
  align-items: center;
  gap: .4rem;
  min-height: 26px;
  font-size: .8rem;
  font-weight: 500;
  transition: border-color .15s, background .15s;
}
.component-item:hover { border-color: var(--accent); background: var(--bg-hover); }
.component-item:active { cursor: grabbing; }
.component-item .kind-glyph { flex-shrink: 0; }
.comp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-count {
  margin: 0 .45rem; padding: 0 .4rem; border-radius: 9999px; font-size: .68rem; font-weight: 600;
  color: var(--text-dim); border: 1px solid var(--border);
}
.palette-note { font-size: .75rem; color: var(--text-dim); padding: .4rem .2rem; }
.comp-icon {
  width: 20px; height: 20px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 700;
  flex-shrink: 0;
}
.comp-icon.source  { background: var(--green-dim); color: var(--green); }
.comp-icon.filter  { background: var(--cyan-dim);  color: var(--cyan); }
.comp-icon.transform { background: rgba(108,127,234,.2); color: var(--accent); }
.comp-icon.sink    { background: var(--red-dim);   color: var(--red); }

/* ── Canvas: .wf-editor (one per workflow tab, editor/WorkflowEditor.js) > .provenance-banner, .wf-stage >
      .canvas-wrapper (scrolls) > .canvas-space (4000·z square) > .canvas (scale(z), viewport.js); the editor's zoom
      controls float over the stage ── */
.wf-editor { flex: 1; position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.wf-stage { flex: 1; position: relative; display: flex; min-height: 0; }
.canvas-wrapper {
  flex: 1;
  position: relative;
  background: var(--bg);
  overflow: auto;
}
.canvas-wrapper.panning, .canvas-wrapper.panning * { cursor: grabbing !important; }
.canvas-space { position: relative; overflow: hidden; width: 4000px; height: 4000px; }
.canvas {
  width: 4000px;
  height: 4000px;
  position: absolute;
  left: 0; top: 0;
  transform-origin: 0 0;
  user-select: none;
  background-image:
    radial-gradient(rgba(108,127,234,.08) 1px, transparent 1px);
  background-size: 24px 24px;
}
.zoom-controls {
  position: absolute; right: 14px; top: 12px; z-index: 20;   /* top: the recording harness captions cover the bottom */
  display: flex; align-items: stretch;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
}
.zoom-controls button {
  border: 0; border-right: 1px solid var(--border); background: transparent; color: var(--text);
  font: inherit; font-size: .78rem; padding: .3rem .55rem; min-width: 2rem; cursor: pointer;
}
.zoom-controls button:last-child { border-right: 0; }
.zoom-controls button:hover { background: var(--bg-hover); }
.zoom-controls .zoom-reset { min-width: 3.6rem; font-variant-numeric: tabular-nums; color: var(--text-dim); }

/* ── Nodes on Canvas: compact cards (glyph, icon, name; one row per port; details in the tooltip and config panel) ── */
.node {
  position: absolute;
  width: max-content;
  min-width: 104px;
  max-width: 150px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  user-select: none;
  z-index: 1;
  transition: box-shadow .15s, border-color .15s;
}
.node:hover { border-color: var(--text-dim); }
.node.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(108,127,234,.55), 0 2px 8px rgba(0,0,0,.35);
}
.node-header {
  padding: .3rem .45rem .3rem .5rem;
  border-radius: 6px 6px 0 0;
  font-weight: 600;
  font-size: .76rem;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: .25rem;
  min-width: 0;
}
.node-header.source    { background: linear-gradient(135deg, rgba(74,222,128,.08), transparent); }
.node-header.filter    { background: linear-gradient(135deg, rgba(34,211,238,.08), transparent); }
.node-header.transform { background: linear-gradient(135deg, rgba(108,127,234,.08), transparent); }
.node-header.sink      { background: linear-gradient(135deg, rgba(248,113,113,.08), transparent); }

/* id and platform above the card, on hover and selection only */
.node-tag {
  position: absolute; left: 2px; bottom: 100%; margin-bottom: 2px;
  display: none; align-items: center; gap: .25rem; white-space: nowrap;
  font-size: .62rem; color: var(--text-dim); pointer-events: none;
}
.node-tag .platform-badge { margin-left: 0; font-size: .55rem; padding: 0 4px; }
.node:hover .node-tag, .node.selected .node-tag { display: flex; }
.node-note-mark {
  flex-shrink: 0; width: 8px; height: 8px; margin-left: auto; border-radius: 2px;
  background: #e9d48a; box-shadow: 0 0 0 2px rgba(250,204,21,.18);
}
.node-ports {
  display: flex;
  justify-content: space-between;
  gap: .4rem;
  padding: .15rem 0 .3rem;
  border-top: 1px solid var(--border);
}
.node-ports:has(> .ports-in:empty):has(> .ports-out:empty) { display: none; }
.ports-in, .ports-out { display: flex; flex-direction: column; min-width: 0; }
.ports-out { align-items: flex-end; }
.port-container {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  min-width: 0;
}
.port-container.input-port  { margin-left: -6px; }
.port-container.output-port { margin-right: -6px; justify-content: flex-end; }
.port-label {
  font-size: .62rem;
  line-height: 1;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 64px;
}
.port {
  flex-shrink: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid;
  background: var(--bg-card);
  cursor: crosshair;
  transition: transform .15s;
}
.port:hover { transform: scale(1.35); }
.port.input  { background: rgba(34,211,238,.15); border-color: var(--cyan); }
.port.output { background: rgba(74,222,128,.15); border-color: var(--green); }

/* ── SVG Connections ── */
svg.connections {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
path.connection {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  opacity: .6;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity .15s, stroke-width .15s;
}
path.connection:hover {
  opacity: 1;
  stroke: var(--red);
  stroke-width: 6;
}
path.connection-selected {
  opacity: 1;
  stroke: var(--red);
  stroke-width: 5;
  stroke-dasharray: 8,4;
  animation: edgePulse 1s ease-in-out infinite;
}
@keyframes edgePulse {
  0%, 100% { opacity: .8; }
  50% { opacity: 1; }
}

/* ── Config Panel ── */
.config-panel {
  width: 290px;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  padding: 1rem;
  overflow-y: auto;
}
.placeholder {
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
  margin-top: 2rem;
  font-size: .85rem;
}

/* ── Form elements ── */
.form-group { margin-bottom: .85rem; }
.form-group label {
  display: block;
  margin-bottom: .25rem;
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-dim);
}
.form-group input, .form-group select {
  width: 100%;
  padding: .45rem .6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .85rem;
  background: var(--bg);
  color: var(--text);
  transition: border-color .15s;
}
.form-group input:focus, .form-group select:focus {
  border-color: var(--accent);
  outline: none;
}
.form-group .input-row {
  display: flex; gap: .4rem;
}
.form-group .input-row input { flex: 1; }
.form-group .input-row button {
  padding: 0 .75rem;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--accent);
  cursor: pointer;
  font-size: .82rem;
  white-space: nowrap;
  transition: all .15s;
}
.form-group .input-row button:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn-delete {
  margin-top: 1rem;
  width: 100%;
  padding: .45rem;
  background: var(--red-dim);
  border: 1px solid var(--red);
  border-radius: 6px;
  color: var(--red);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 500;
  transition: all .15s;
}
.btn-delete:hover { background: var(--red); color: #fff; }

/* "Send to article" on endpoint sinks (ADR 0013) */
.btn-send-article {
  margin-top: 1rem;
  width: 100%;
  padding: .45rem;
  background: var(--cyan-dim);
  border: 1px solid var(--cyan);
  border-radius: 6px;
  color: var(--cyan);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 500;
}
.btn-send-article:hover { background: var(--cyan); color: #000; }
.btn-send-article:disabled { opacity: .5; cursor: wait; }
pre.embed-block { white-space: pre-wrap; max-height: 50vh; overflow: auto; }

/* ── File picker modal ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadeIn .15s;
}
@keyframes fadeIn { from { opacity: 0; } }

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.modal-header {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: .95rem;
}
.modal-header button {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 1.1rem;
}
.modal-header button:hover { color: var(--text); }

.modal-path {
  padding: .5rem 1rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: .8rem;
  color: var(--text-dim);
  font-family: monospace;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.modal-path button {
  padding: .2rem .6rem;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  font-size: .75rem;
}
.modal-path button:hover { border-color: var(--accent); }

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: .5rem;
  max-height: 400px;
}
.file-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .6rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .85rem;
  transition: background .1s;
}
.file-item:hover { background: var(--bg-hover); }
.file-item.selected-file { background: rgba(108,127,234,.15); border: 1px solid var(--accent); }
.file-icon {
  width: 20px; text-align: center;
  font-size: .85rem; flex-shrink: 0;
}
.file-name { flex: 1; }
.file-size { color: var(--text-dim); font-size: .75rem; }

.modal-filename {
  padding: .5rem 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.modal-filename label {
  font-size: .8rem;
  color: var(--text-dim);
  white-space: nowrap;
  font-weight: 500;
}
.modal-filename input {
  flex: 1;
  padding: .4rem .6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .85rem;
  background: var(--bg);
  color: var(--text);
  transition: border-color .15s;
}
.modal-filename input:focus {
  border-color: var(--accent);
  outline: none;
}

.modal-footer {
  padding: .75rem 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
}
.modal-footer button {
  padding: .4rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text);
  font-size: .82rem;
  cursor: pointer;
  transition: all .15s;
}
.modal-footer button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.modal-footer button.primary:hover { background: var(--accent-h); }
.modal-footer button:hover { border-color: var(--text-dim); }

/* ── Result dialog ── */
.result-modal .modal-body {
  padding: 1rem;
}
.result-modal pre {
  background: var(--bg);
  padding: .75rem;
  border-radius: 6px;
  font-size: .8rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 300px;
  overflow-y: auto;
}
.result-success { color: var(--green); }
.result-error   { color: var(--red); }

/* ── Run targets, palette badges, multi-selection (WP5) ── */
.toolbar { align-items: center; flex-wrap: wrap; }
.toolbar button:disabled { opacity: .4; cursor: default; }
.toolbar button:disabled:hover { background: var(--bg-hover); border-color: var(--border); color: var(--text); }
.wf-name, .target-label select {
  padding: .4rem .6rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font-size: .82rem;
}
.wf-name { width: 14rem; }
.target-label { font-size: .75rem; color: var(--text-dim); display: flex; align-items: center; gap: .35rem; }

.platform-badge {
  font-size: .6rem; padding: 1px 5px; border-radius: 9999px; margin-left: .3rem; vertical-align: middle;
  border: 1px solid var(--border); color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em;
}
.platform-badge.pf-node { border-color: var(--green-dim); color: var(--green); }
.platform-badge.pf-browser { border-color: var(--cyan-dim); color: var(--cyan); }
.component-item.off-target, .node.off-target { opacity: .4; filter: grayscale(.8); }
.comp-icon.workflow, .node-header.workflow { background: rgba(251,146,60,.18); color: var(--orange); }
.node.multi-selected { outline: 2px dashed var(--orange); outline-offset: 3px; }

.config-title { margin: 0 0 .75rem; font-size: .95rem; }
.config-title span { font-size: .8em; color: gray; }
.config-meta { font-size: .75rem; color: var(--text-dim); margin-bottom: .5rem; }
.config-desc { font-size: .8rem; margin-bottom: .5rem; color: #acc; line-height: 1.4; }
.config-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 1rem; }
.config-tags span { font-size: .7rem; background: rgba(255,255,255,.1); padding: 2px 6px; border-radius: 4px; color: #cfc; }
.config-note { font-size: .8em; opacity: .7; margin-top: .25rem; }
.config-interactive { display: flex; flex-direction: column; gap: 8px; }
.config-ports { font-size: .8rem; margin: .75rem 0; }
.config-ports label { display: block; font-size: .75rem; color: var(--text-dim); margin: .5rem 0 .25rem; }
.config-ports ul { list-style: none; }
.config-ports li { padding: .15rem 0; }
.config-ports li span { color: var(--text-dim); font-size: .9em; }
.btn-secondary {
  width: 100%; margin: .25rem 0; padding: .45rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-hover); color: var(--text); cursor: pointer; font-size: .8rem;
}
.btn-secondary:hover { border-color: var(--accent); }
.override-row { margin-bottom: .35rem; }
.override-row .ov-key { flex: 3; }
.override-row .ov-val { flex: 2; }

/* ── Record panel ── */
.record-panel { max-width: 1000px; width: 92vw; }
.record-panel h4 { margin: 1rem 0 .4rem; font-size: .85rem; display: flex; align-items: center; gap: .5rem; }
.record-panel h4 button, .rec-downloads button {
  font-size: .72rem; padding: .2rem .6rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-hover); color: var(--text); cursor: pointer;
}
.rec-meta { font-size: .75rem; color: var(--text-dim); }
.rec-methods { font-size: .85rem; line-height: 1.5; background: var(--bg); padding: .75rem; border-radius: 6px; user-select: text; }
.rec-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.rec-table th, .rec-table td { text-align: left; padding: .3rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.rec-table th { color: var(--text-dim); font-weight: 500; }
.rec-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rec-table .rec-params { font-family: 'SF Mono', 'Cascadia Code', monospace; font-size: .72rem; word-break: break-all; }
.rec-group td { color: var(--orange); background: rgba(251,146,60,.06); }
.rec-downloads { list-style: none; font-size: .8rem; }
.rec-downloads li { padding: .2rem 0; }
.rec-downloads span { color: var(--text-dim); }
.rec-raw { margin-top: 1rem; font-size: .8rem; }
.rec-raw summary { cursor: pointer; color: var(--text-dim); }

/* ── Port menu (right-click a port / release a drag over empty canvas) ── */
path.connection.temp { pointer-events: none; }
#port-menu {
  position: fixed; z-index: 2000;
  min-width: 300px; max-width: 420px; max-height: 60vh;
  display: flex; flex-direction: column;
  background: var(--panel, #1b1f2a); color: var(--text, #e6e6e6);
  border: 1px solid var(--border, #2d3240); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  font-size: .85rem;
}
.port-menu-title { padding: 8px 10px 4px; font-weight: 600; display: flex; justify-content: space-between; }
.port-menu-count { color: var(--text-dim); font-weight: 400; }
.port-menu-filter { margin: 4px 10px 6px; padding: 4px 6px; border-radius: 4px; border: 1px solid var(--border, #2d3240); background: transparent; color: inherit; }
.port-menu-items { overflow-y: auto; padding-bottom: 6px; }
.port-menu-group { padding: 6px 10px 2px; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.port-menu-item {
  display: grid; grid-template-columns: 28px 1fr auto auto; align-items: center; gap: 8px;
  width: 100%; text-align: left; padding: 5px 10px; border: 0; background: transparent; color: inherit; cursor: pointer;
}
.port-menu-item:hover, .port-menu-item:focus { background: rgba(255,255,255,.06); outline: none; }
.port-menu-item.off-target { opacity: .45; }
.port-menu-port { font-size: .7rem; color: var(--text-dim); }
.port-menu-empty { padding: 10px; color: var(--text-dim); }
#hint {
  position: fixed; z-index: 2001; max-width: 320px;
  padding: 6px 10px; border-radius: 6px;
  background: rgba(248,113,113,.95); color: #1a0a0a; font-size: .8rem; white-space: pre-line;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}

/* Parameter edges (ADR 0014): a reference sink's result port (right, purple) feeds an object parameter port (left) */
.port.result-port { background: rgba(192,132,252,.25); border-color: #c084fc; border-radius: 2px; }
.port.param-port  { background: rgba(192,132,252,.10); border-color: #c084fc; border-style: dashed; }
path.param-connection { stroke: #c084fc; stroke-dasharray: 4,3; }
.config-param-edge input { width: 100%; margin-top: 4px; }
.config-param-edge input.invalid { border-color: var(--red); }

/* ── Presentation (ADR 0015, theme.js): hue = data group, band/border/port colour = category, glyph always shown ──
   theme.js sets --node-hue, --node-sat (the group's hue; 0% = neutral), --node-band (band colour or transparent) and
   --node-port (port colour) on the element; the classes are kind-<kind>, band-<left|right|both|none>,
   border-<single|double|frame>. Colour is never the only cue: the .kind-glyph next to every label names the category. */
.hued, [class*="kind-"] { --node-tint: hsla(var(--node-hue, 220), var(--node-sat, 0%), 55%, .14); }
.module-header.hued { background: linear-gradient(90deg, hsla(var(--node-hue, 220), var(--node-sat, 0%), 55%, .22), rgba(255,255,255,.03) 70%); border-left: 3px solid hsl(var(--node-hue, 220), var(--node-sat, 0%), 60%); }
.component-item[class*="kind-"] { background: linear-gradient(90deg, var(--node-tint), var(--bg) 60%); }
.node[class*="kind-"] .node-header { background: linear-gradient(135deg, hsla(var(--node-hue, 220), var(--node-sat, 0%), 55%, .25), transparent 80%); }
.node .node-header { position: relative; }
.node.band-left .node-header, .node.band-both .node-header { padding-left: .6rem; }
.config-title.band-left, .rec-step.band-left td:first-child { box-shadow: inset 4px 0 0 var(--node-band); }
.config-title.band-right, .rec-step.band-right td:first-child { box-shadow: inset -4px 0 0 var(--node-band); }
.config-title.band-both { box-shadow: inset 4px 0 0 var(--node-band), inset -4px 0 0 var(--node-band); }
/* the band runs down the whole compact card (left, right or both edges); the connectors sit above it */
.node.band-left::before, .node.band-right::after, .node.band-both::before, .node.band-both::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 4px; background: var(--node-band); pointer-events: none;
}
.node.band-left::before, .node.band-both::before { left: 0; border-radius: 5px 0 0 5px; }
.node.band-right::after, .node.band-both::after { right: 0; border-radius: 0 5px 5px 0; }
.node .port { position: relative; z-index: 1; }
.component-item.band-left { border-left: 4px solid var(--node-band); }
.component-item.band-right { border-right: 4px solid var(--node-band); }
.component-item.band-both { border-left: 4px solid var(--node-band); border-right: 4px solid var(--node-band); }
.node.border-double { border: 3px double var(--node-port); }
.node.border-frame { border: 2px solid var(--node-port); }
.component-item.border-double { border-style: double; border-width: 3px; border-color: var(--node-port); }
.component-item.border-frame { border-color: var(--node-port); }
.node[class*="kind-"] .port.output:not(.result-port) { border-color: var(--node-port); }
.kind-glyph {
  display: inline-block; min-width: 1.1em; text-align: center; font-size: .85em; line-height: 1;
  color: var(--node-port, var(--text-dim)); font-weight: 700;
}
.node-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.node-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-width: 20px; height: 18px; padding: 0 3px; border-radius: 4px; font-size: .62rem; font-weight: 700;
  background: hsla(var(--node-hue, 220), var(--node-sat, 0%), 50%, .22); color: hsl(var(--node-hue, 220), var(--node-sat, 0%), 78%);
}
.node-icon:empty { display: none; }
.node-icon .icon-svg { width: 14px; height: 14px; }
.node-header .kind-glyph { flex-shrink: 0; min-width: .9em; }
.icon-svg { width: 16px; height: 16px; vertical-align: middle; filter: invert(.9); }
.comp-icon .icon-svg { width: 14px; height: 14px; }
.comp-icon { background: hsla(var(--node-hue, 220), var(--node-sat, 0%), 50%, .2); color: hsl(var(--node-hue, 220), var(--node-sat, 0%), 75%); }
.icon-picker { align-items: center; }
.icon-picker select { flex: 1; }
.icon-preview { min-width: 24px; text-align: center; font-size: 1rem; }
.form-group textarea {
  width: 100%; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font: inherit; font-size: .82rem; resize: vertical;
}
.config-literature { font-size: .78rem; margin: .5rem 0 1rem; }
.config-literature label { display: block; font-size: .75rem; color: var(--text-dim); margin-bottom: .25rem; }
.lit-group { margin: .25rem 0; }
.lit-role { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.lit-group ul { list-style: none; padding-left: .5rem; }
.lit-group a { color: var(--accent-h); }
header { flex-wrap: wrap; }
.wf-note {
  flex-basis: 100%; font-size: .78rem; color: #e9d48a; padding: .3rem .5rem; margin-top: .4rem; cursor: pointer;
  background: rgba(250,204,21,.06); border-radius: 6px; white-space: pre-wrap;
}
.wf-note .wf-desc { color: var(--text-dim); }
.dw-pubs { font-size: .78rem; padding-left: 1rem; }
.rec-note { font-size: .72rem; font-style: italic; color: #e9d48a; margin-top: .15rem; }
.rec-type { font-size: .72rem; color: var(--text-dim); }

/* ── Provenance banner (ADR 0018): the builder opened from an article's "open workflow" (provenance.js) ── */
.provenance-banner {
  position: relative; padding: .55rem 2.4rem .6rem 1.5rem; font-size: .8rem; line-height: 1.45;
  background: var(--bg-card); border-bottom: 1px solid var(--border); border-left: 3px solid var(--accent);
}
.provenance-banner[hidden] { display: none; }
/* the notice of a workflow opened to look inside (WorkflowEditor.setNotice; ADR 0019 amendment 2026-10-27) */
.wf-notice {
  padding: .45rem 1.5rem; font-size: .8rem; line-height: 1.45; color: var(--text-dim);
  background: var(--bg-card); border-bottom: 1px solid var(--border); border-left: 3px solid var(--cyan);
}
.wf-notice[hidden] { display: none; }
.provenance-banner[data-state="reproduced"] { border-left-color: var(--green); }
.provenance-banner[data-state="differs"], .provenance-banner[data-state="error"] { border-left-color: var(--red); }
.provenance-banner[data-state="not-run"] { border-left-color: var(--orange); }
.provenance-banner a { color: var(--accent-h); }
.provenance-banner code { font: .74rem ui-monospace, Menlo, Consolas, monospace; }
.prov-from { margin-bottom: .35rem; }
.prov-meta { color: var(--text-dim); }
.prov-inputs { border-collapse: collapse; margin: .2rem 0 .4rem; }
.prov-inputs th, .prov-inputs td { text-align: left; padding: .15rem .7rem .15rem 0; vertical-align: top; }
.prov-inputs th { color: var(--text-dim); font-weight: 600; }
.prov-status { font-weight: 700; }
.prov-present { color: var(--green); }
.prov-fetchable { color: var(--cyan); }
.prov-missing, .prov-unregistered { color: var(--orange); }
.prov-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.prov-actions button { padding: .25rem .7rem; font-size: .78rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-hover); color: var(--text); cursor: pointer; }
.prov-actions button:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.prov-actions button:disabled { opacity: .5; cursor: default; }
.prov-actions .prov-link { background: none; border: none; color: var(--accent-h); text-decoration: underline; padding: 0; }
.prov-verdict { font-weight: 600; }
.prov-verdict.prov-reproduced { color: var(--green); }
.prov-verdict.prov-differs, .prov-verdict.prov-error { color: var(--red); }
.prov-verdict.prov-not-run { color: var(--orange); }
.prov-close { position: absolute; top: .45rem; right: .8rem; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: .9rem; }
.prov-close:hover { color: var(--text); }

/* ── Execution lights (ADR 0018 decision 6): colours are --light-<state> from theme.js (EXEC_COLOURS), set by app.js.
   The light grows as the canvas zooms out (--zoom from viewport.js) so that it stays visible at 25 %. ── */
.exec-light {
  --light-size: calc(9px * max(1, .5 / var(--zoom, 1)));
  flex-shrink: 0; width: var(--light-size); height: var(--light-size); border-radius: 50%;
  background: var(--light-not-run); box-shadow: 0 0 0 1.5px rgba(0,0,0,.55);
}
.exec-light[data-state="running"] { background: var(--light-running); animation: exec-pulse 1s ease-in-out infinite; }
.exec-light[data-state="ran"]     { background: var(--light-ran); }
.exec-light[data-state="failed"]  { background: var(--light-failed); }
.exec-light[data-state="stale"]   { background: var(--light-stale); }
@keyframes exec-pulse { 50% { opacity: .35; } }
.run-badge {
  display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border-radius: 999px; font-size: .72rem;
  font-weight: 600; border: 1px solid var(--light-not-run); color: var(--light-not-run); cursor: default; white-space: nowrap;
}
.run-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.run-badge[data-state="running"] { border-color: var(--light-running); color: var(--light-running); }
.run-badge[data-state="running"]::before { animation: exec-pulse 1s ease-in-out infinite; }
.run-badge[data-state="ran"]     { border-color: var(--light-ran); color: var(--light-ran); }
.run-badge[data-state="partial"] { border-color: var(--light-partial); color: var(--light-partial); }
.run-badge[data-state="stale"]   { border-color: var(--light-stale); color: var(--light-stale); }
.embed-refusal { margin: .4rem 0; font-size: .8rem; }
.embed-refusal button, .ms-status .ms-run { margin-left: .4rem; padding: .1rem .5rem; font-size: .75rem; }

/* ── The workspace (ADR 0019, workspace.js): windows in a row, each a strip of tabs over the shown tab ── */
.main-container.ws-workspace { position: relative; }
.ws-window { display: flex; min-width: 160px; overflow: hidden; }
.ws-resize { width: 5px; flex: none; cursor: col-resize; background: var(--border); transition: background .15s; }
.ws-first > .ws-resize { display: none; }
.ws-resize:hover { background: var(--accent); }
body.ws-resizing { cursor: col-resize; user-select: none; }
body.ws-resizing iframe, body.ws-dragging-tab iframe, body.ws-dragging-window iframe { pointer-events: none; }
.ws-column { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ws-strip { display: flex; align-items: stretch; height: 32px; flex: none; background: var(--bg); border-bottom: 1px solid var(--border); overflow: hidden; }
.ws-tab {
  display: flex; align-items: center; gap: .35rem; padding: 0 .3rem 0 .65rem; max-width: 210px; min-width: 0; flex: 0 1 auto;
  font-size: .78rem; color: var(--text-dim); border-right: 1px solid var(--border); cursor: pointer; user-select: none; white-space: nowrap;
}
.ws-tab:hover { color: var(--text); }
.ws-tab-title { overflow: hidden; text-overflow: ellipsis; }
.ws-tab.active { background: var(--bg-card); color: var(--text); box-shadow: inset 0 -2px 0 var(--border); }
.ws-window.focused .ws-tab.active { box-shadow: inset 0 -2px 0 var(--accent); }
.ws-tab-glyph { color: var(--text-dim); }
.ws-tab[data-kind="workflow"] .ws-tab-glyph { color: var(--cyan); }
.ws-tab[data-kind="document"] .ws-tab-glyph { color: var(--text); }
.ws-tab[data-kind="fact"] .ws-tab-glyph { color: var(--green); }
.ws-tab-state { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--light-not-run); }
.ws-tab[data-state="running"] .ws-tab-state { background: var(--light-running); animation: exec-pulse 1s ease-in-out infinite; }
.ws-tab[data-state="ran"] .ws-tab-state { background: var(--light-ran); }
.ws-tab[data-state="partial"] .ws-tab-state { background: var(--light-partial); }
.ws-tab[data-state="stale"] .ws-tab-state { background: var(--light-stale); }
.ws-tab-close { background: none; border: 0; color: var(--text-dim); cursor: pointer; font-size: .9rem; line-height: 1; padding: .1rem .3rem; border-radius: 4px; }
.ws-tab-close:hover { color: var(--text); background: var(--bg-hover); }
.ws-plus { flex: none; background: none; border: 0; color: var(--text-dim); font-size: 1rem; padding: 0 .65rem; cursor: pointer; }
.ws-plus:hover { color: var(--text); background: var(--bg-hover); }
.ws-strip-fill { flex: 1; min-width: 12px; cursor: grab; }
.ws-body { position: relative; flex: 1; min-height: 0; }
.ws-pane { position: absolute; inset: 0; }
.ws-pane.ws-inactive { visibility: hidden; pointer-events: none; }
.ws-pane.sidebar, .ws-pane.config-panel, .ws-pane.find-panel, .ws-pane.inspector-panel, .ws-pane.reviews-panel { width: auto; border: 0; }
.ws-holder[hidden] { display: none; }
.ws-edge { position: absolute; bottom: 0; width: 56px; z-index: 50; display: none; pointer-events: none; background: rgba(108,127,234,.10); border: 2px dashed var(--accent); border-radius: 6px; }
.ws-edge-left { left: 0; }
.ws-edge-right { right: 0; }
body.ws-dragging-tab .ws-edge { display: block; }
.ws-edge.over { background: rgba(108,127,234,.35); }
.ws-insert { position: absolute; width: 4px; z-index: 60; display: none; pointer-events: none; background: var(--accent); border-radius: 2px; }
body.ws-dragging-tab, body.ws-dragging-window { cursor: grabbing; user-select: none; }
.ws-drag-chip { position: fixed; z-index: 1000; pointer-events: none; padding: .25rem .6rem; border-radius: 6px; background: var(--bg-hover); border: 1px solid var(--accent); color: var(--text); font-size: .78rem; box-shadow: var(--shadow); white-space: nowrap; }
.ws-menu { position: fixed; z-index: 1000; min-width: 200px; max-height: 60vh; overflow: auto; display: flex; flex-direction: column; padding: .25rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.ws-menu-item { text-align: left; background: none; border: 0; color: var(--text); padding: .4rem .6rem; font: inherit; font-size: .8rem; border-radius: 6px; cursor: pointer; }
.ws-menu-item:hover { background: var(--bg-hover); }
.ws-menu-note { padding: .4rem .6rem; font-size: .78rem; color: var(--text-dim); }
.toolbar .tool-toggle[aria-pressed="false"] { opacity: .55; }

/* ── The Find tool (find.js, ADR 0021): box, scope chips with counts, facets, result rows ── */
.find-panel { background: var(--bg-card); padding: .75rem; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.find-bar { display: flex; }
.find-query {
  flex: 1; min-width: 0; padding: .4rem .55rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: .85rem;
}
.find-query:focus { outline: none; border-color: var(--accent); }
.find-scopes, .find-facet-group { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.find-scope, .find-facet {
  padding: 2px 8px; border: 1px solid var(--border); border-radius: 9999px; background: var(--bg);
  color: var(--text-dim); font-size: .72rem; cursor: pointer;
}
.find-scope:hover, .find-facet:hover { border-color: var(--accent); color: var(--text); }
.find-scope.active, .find-facet.active { background: var(--accent); border-color: var(--accent); color: var(--text); }
.find-count, .find-facet-count { font-weight: 700; margin-left: 2px; }
.find-facets { display: flex; flex-direction: column; gap: 4px; }
.find-facets:empty { display: none; }
.find-facet-name { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin-right: 2px; }
.find-status { font-size: .72rem; color: var(--text-dim); }
.find-results { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 0 -.25rem; padding: 0 .25rem; }
.find-result { border: 1px solid var(--border); border-radius: 6px; padding: .35rem .5rem; background: var(--bg); font-size: .8rem; }
.find-result[draggable="true"] { cursor: grab; }
.find-result:hover { border-color: var(--accent); }
.find-head { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.find-kind { flex-shrink: 0; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 0 5px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-dim); }
.find-kind[data-kind="document"] { color: var(--accent-h); border-color: var(--accent); }
.find-kind[data-kind="workflow"] { color: var(--orange); border-color: var(--orange); }
.find-kind[data-kind="component"] { color: var(--cyan); border-color: var(--cyan-dim); }
.find-kind[data-kind="dataset"] { color: var(--green); border-color: var(--green-dim); }
.find-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-meta { font-size: .7rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-snippet { font-size: .74rem; color: var(--text-dim); margin-top: 2px; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.find-actions { display: flex; gap: 4px; margin-top: 4px; }
.find-actions button, .find-more {
  padding: 2px 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-hover);
  color: var(--text); font-size: .72rem; cursor: pointer;
}
.find-actions button:hover, .find-more:hover { border-color: var(--accent); }
.find-used { font-size: .72rem; margin-top: 3px; color: var(--text-dim); }
.find-used a { color: var(--accent-h); }
.find-unused { font-style: italic; }
.find-dataset-status { flex-shrink: 0; font-size: .65rem; padding: 0 6px; border-radius: 9999px; border: 1px solid var(--border); color: var(--text-dim); }
.find-dataset-status[data-status="present"] { color: var(--green); border-color: var(--green-dim); }
.find-dataset-status[data-status="fetchable"] { color: var(--cyan); border-color: var(--cyan-dim); }
.find-dataset-status[data-status="missing"] { color: var(--red); border-color: var(--red-dim); }

/* ── The Inspector (inspector.js, ADR 0022): what passed through the selected node's ports in the last run ── */
.inspector-panel { background: var(--bg-card); padding: .75rem; overflow-y: auto; min-width: 0; font-size: .8rem; }
.insp-head { margin: 0 0 .5rem; font-size: .9rem; }
.insp-node-type { font-weight: 400; font-size: .72rem; color: var(--text-dim); margin-left: .25rem; }
.insp-not-run, .insp-running, .insp-none, .insp-empty { color: var(--text-dim); font-style: italic; }
.insp-stale { padding: .35rem .5rem; border: 1px dashed var(--orange); border-radius: 6px; color: var(--orange); }
.insp-failed { padding: .35rem .5rem; border: 1px solid var(--red-dim); border-radius: 6px; color: var(--red); }
.insp-port { margin: .6rem 0 .9rem; }
.insp-port h5 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin: 0 0 .35rem; font-size: .8rem; }
.insp-port-name { font-weight: 700; }
.insp-type { font: .7rem ui-monospace, Menlo, Consolas, monospace; color: var(--cyan); }
.insp-seen { padding: 0 6px; border: 1px solid var(--border); border-radius: 9999px; color: var(--text); font-size: .7rem; }
.insp-shown { color: var(--text-dim); font-size: .7rem; }
.insp-scroll { overflow-x: auto; }
.insp-port table { border-collapse: collapse; font-size: .74rem; }
.insp-port th, .insp-port td { border-bottom: 1px solid var(--border); padding: .15rem .45rem; text-align: left; white-space: nowrap; }
.insp-port th { color: var(--text-dim); font-weight: 600; }
.insp-port td.num, .insp-port th.num { text-align: right; font-variant-numeric: tabular-nums; }
.insp-port code, .insp-lines, .insp-json { font: .72rem/1.4 ui-monospace, Menlo, Consolas, monospace; }
.insp-lines, .insp-json { margin: 0; padding: .4rem .5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; overflow-x: auto; white-space: pre; max-height: 24rem; }
.insp-cut { color: var(--text-dim); font-style: italic; }
/* an artefact is drawn for paper: light ground, dark ink */
.insp-artefact { margin: .3rem 0; padding: .5rem; border-radius: 6px; background: var(--text); color: var(--bg); overflow-x: auto; }
.insp-artefact figure { margin: 0; }
.insp-artefact svg, .insp-artefact img { max-width: 100%; height: auto; display: block; }
.insp-artefact table { color: var(--bg); }
.insp-artefact th, .insp-artefact td { border-bottom-color: var(--text-dim); }
.insp-artefact figcaption { margin-top: .3rem; font-size: .72rem; }

/* ── Facts and reviews (ADR 0024): the person menu, the Reviews tool (reviews.js), the fact tab (editor/FactView.js) ── */
.person-menu { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; }
.person-menu button, .person-menu a { padding: .4rem .5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-hover); color: var(--text); font-size: .78rem; cursor: pointer; text-decoration: none; }
.person-menu button:hover, .person-menu a:hover { border-color: var(--accent); }
.person-menu[data-person=""] .person-join, .person-menu .person-asked { border-color: var(--orange); color: var(--orange); }
.person-menu .person-name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-menu[data-state="error"] button { border-color: var(--red); }
.person-menu .person-standing { color: var(--red); font-size: .72rem; }
.rv-badge { display: inline-block; min-width: 1.3em; padding: 0 .3em; margin-left: .2rem; border-radius: 999px; font-size: .7rem; font-weight: 700; text-align: center; background: var(--border); color: var(--text-dim); }
.rv-badge:not([data-count="0"]) { background: var(--orange); color: var(--bg); }
.reviews-panel { background: var(--bg-card); padding: .75rem; display: flex; flex-direction: column; gap: .5rem; min-width: 0; font-size: .8rem; }
.rv-note { font-size: .74rem; color: var(--text-dim); line-height: 1.35; }
.rv-note:empty, .rv-message:empty { display: none; }
.rv-message { font-size: .74rem; color: var(--text-dim); }
.rv-lists { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .75rem; }
.rv-lists h3 { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: .3rem; }
.rv-count { font-weight: 700; color: var(--text); }
.rv-items { display: flex; flex-direction: column; gap: 4px; }
.rv-empty { font-size: .74rem; color: var(--text-dim); font-style: italic; }
.rv-item { border: 1px solid var(--border); border-radius: 6px; padding: .4rem .5rem; background: var(--bg); display: flex; flex-direction: column; gap: 3px; }
.rv-item[data-action="review"], .rv-item[data-action="support"] { border-color: var(--orange); }
.rv-head { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.rv-subject { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rv-subject a, .fact-view a { color: var(--accent-h); text-decoration: none; }
.rv-subject a:hover, .fact-view a:hover { text-decoration: underline; }
.rv-state, .fv-status, .fv-chip, .find-fact-status { flex-shrink: 0; font-size: .65rem; padding: 0 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); }
.rv-state[data-state="satisfied"], .fv-status[data-status="accepted"], .fv-chip[data-status="accepted"], .find-fact-status[data-status="accepted"] { color: var(--green); border-color: var(--green-dim); }
.rv-state[data-state="contested"], .fv-status[data-status="disputed"], .fv-chip[data-status="disputed"], .find-fact-status[data-status="disputed"] { color: var(--red); border-color: var(--red-dim); }
.rv-state[data-state="open"], .fv-status[data-status="proposed"], .fv-chip[data-status="proposed"], .find-fact-status[data-status="proposed"] { color: var(--cyan); border-color: var(--cyan-dim); }
.find-kind[data-kind="fact"] { color: var(--green); border-color: var(--green-dim); }
.rv-progress, .rv-yours { font-size: .7rem; color: var(--text-dim); }
.rv-invitations { display: flex; flex-wrap: wrap; gap: 3px; }
.rv-invitation { font-size: .66rem; padding: 0 5px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-dim); }
.rv-invitation[data-response="done"], .rv-invitation[data-response="supported"] { color: var(--green); border-color: var(--green-dim); }
.rv-invitation[data-response="declined"], .rv-invitation[data-response="not-my-area"] { text-decoration: line-through; }
.rv-actions, .fv-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rv-actions button, .fact-view button, .rv-until, .fact-view input, .fact-view select {
  padding: .15rem .5rem; font: inherit; font-size: .72rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-hover); color: var(--text); cursor: pointer;
}
.rv-actions button:hover:not(:disabled), .fact-view button:hover:not(:disabled) { border-color: var(--accent); }
.rv-actions button:disabled, .fact-view button:disabled, .fact-view input:disabled, .fact-view select:disabled, .rv-until:disabled { opacity: .5; cursor: not-allowed; }
.rv-review-now { border-color: var(--accent) !important; }
.rv-later-group { display: inline-flex; gap: 2px; }
.rv-mod-item { border: 1px solid var(--orange); border-radius: 6px; padding: .4rem .5rem; background: var(--bg); display: flex; flex-direction: column; gap: 3px; }
.rv-reasons { display: flex; flex-wrap: wrap; gap: 3px; }
.rv-reason { font-size: .66rem; padding: 0 5px; border-radius: 4px; border: 1px solid var(--orange); color: var(--orange); }
.rv-candidates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rv-candidate { display: flex; align-items: center; gap: .4rem; font-size: .72rem; }
.rv-cand-who { font-weight: 600; }
.rv-cand-evidence { flex: 1; min-width: 0; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-candidate button { padding: .1rem .45rem; font: inherit; font-size: .7rem; border: 1px solid var(--accent); border-radius: 4px; background: var(--bg-hover); color: var(--text); cursor: pointer; }
.rv-why { font-size: .68rem; color: var(--text-dim); font-style: italic; }
.fact-view { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg-card); }
.fv-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .8rem; font-size: .82rem; line-height: 1.45; }
.fv-head { display: flex; align-items: center; gap: .5rem; }
.fv-kind { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0 5px; border-radius: 4px; border: 1px solid var(--green-dim); color: var(--green); }
.fv-title { flex: 1; font-size: 1rem; font-weight: 700; }
.fv-id, .fv-dim, .fv-context, .fv-derivation, .fv-label { color: var(--text-dim); }
.fv-id { font-size: .72rem; overflow-wrap: anywhere; }
.fv-value { font-size: 1.3rem; font-weight: 700; }
.fv-unit { color: var(--text-dim); font-weight: 500; }
.fv-note-text { font-size: .76rem; color: var(--text-dim); border-left: 2px solid var(--border); padding-left: .5rem; }
.fact-view h3 { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: .3rem; }
.fact-view ul { padding-left: 1.1rem; display: flex; flex-direction: column; gap: 2px; }
.fv-this { font-weight: 600; }
.fv-dep { font-size: .76rem; }
.fv-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; }
.fv-actions { display: flex; flex-direction: column; gap: .4rem; border-top: 1px solid var(--border); padding-top: .6rem; }
.fv-note { flex: 1; min-width: 120px; cursor: text !important; }
.fv-hint { font-size: .74rem; color: var(--orange); }
.fv-message { font-size: .74rem; color: var(--text-dim); }
.fv-message[data-state="error"] { color: var(--red); }
.fv-message[data-state="ok"] { color: var(--green); }
.fv-message:empty { display: none; }
.fv-propose-box summary { cursor: pointer; font-size: .76rem; color: var(--accent-h); }
.fv-propose { display: flex; flex-direction: column; gap: 4px; margin-top: .4rem; }
.fv-propose label { display: flex; flex-direction: column; gap: 2px; font-size: .7rem; color: var(--text-dim); }
.fv-propose input { cursor: text; }
.fv-propose-submit { align-self: flex-start; }
.fv-error { color: var(--red); }
/* ADR 0026: statuses, unlisted items, flags, Needs a moderator's sections */
.find-doc-status { flex-shrink: 0; font-size: .65rem; padding: 0 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); }
.find-doc-status[data-status="reviewed"] { color: var(--green); border-color: var(--green-dim); }
.find-doc-status[data-status="under-review"] { color: var(--cyan); border-color: var(--cyan-dim); }
.find-doc-status[data-status="retracted"] { color: var(--red); border-color: var(--red-dim); text-decoration: line-through; }
.find-unlisted { flex-shrink: 0; font-size: .62rem; padding: 0 5px; border-radius: 4px; border: 1px dashed var(--orange); color: var(--orange); }
.find-result[data-listed="false"] { border-style: dashed; }
.find-result .flag, .fact-view .flag { flex-shrink: 0; padding: 0 .4rem; font: inherit; font-size: .64rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-hover); color: var(--text-dim); cursor: pointer; }
.find-result .flag:hover { border-color: var(--orange); color: var(--orange); }
.find-message { font-size: .72rem; color: var(--text-dim); }
.find-message[data-state="error"] { color: var(--red); }
.find-message:empty { display: none; }
.find-used-counts { color: var(--text-dim); }
.find-used a[data-status="unreviewed"], .find-used a[data-status="under-review"] { font-style: italic; }
.rv-moderate h4 { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: .5rem 0 .25rem; }
.rv-sub { display: flex; flex-direction: column; gap: 4px; }
.rv-flag-item, .rv-probation-item, .rv-support-item, .rv-flagged-item { border: 1px solid var(--border); border-radius: 6px; padding: .4rem .5rem; background: var(--bg); display: flex; flex-direction: column; gap: 3px; }
.rv-flag-item[data-hidden="true"], .rv-flagged-item { border-color: var(--red-dim); }
.rv-state[data-state="hidden"] { color: var(--red); border-color: var(--red-dim); }
.rv-state[data-state="support"] { color: var(--orange); border-color: var(--orange); }
.rv-warning { font-size: .72rem; border: 1px solid var(--orange); border-radius: 6px; padding: .35rem .5rem; color: var(--text); }
.rv-warning strong { color: var(--orange); }
.rv-warning ul { margin: .2rem 0 0; padding-left: 1rem; color: var(--text-dim); }
.fv-listing { font-size: .74rem; color: var(--orange); }
.fv-chip[data-status="support"] { color: var(--orange); border-color: var(--orange); }
.fv-flags .fv-flag { font-size: .74rem; color: var(--text-dim); }