.graph-loading-status {
position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
z-index: 20; max-width: 55%; padding: 5px 9px;
background: var(--panel); color: var(--text-2); border: 1px solid var(--border);
border-radius: 4px; font: inherit; font-size: 11px; cursor: pointer;
}
/* ============================================================
Design tokens — GVA-derived system (zinc ramp, border-defined,
dense chrome). Every rule below references these; change the
look here, not inline.
============================================================ */
:root {
/* surfaces */
--bg: #09090B; /* chrome: header, right rail, overlays */
--canvas: #111111; /* graph canvas — lighter than the chrome around it */
--panel: #111111; /* left sidebar / structure panel */
--panel-2: #18181B; /* raised surface: buttons, cards */
--hover: #27272A; /* hover surface */
/* borders */
--border: #27272A; /* hairline dividers */
--border-2: #3F3F46; /* control borders */
--border-3: #52525B; /* border hover / focus ring / floating toolbars */
/* text ramp */
--fg: #E4E4E7;
--fg-bright: #F4F4F5;
--text-2: #A1A1AA;
--muted: #71717A;
--faint: #52525B;
/* accents */
--accent: #5C9EFF; /* interactive: links, active icons */
--accent-link: #6EA4F4; /* link values */
--accent-dim: #13345C; /* tinted navy fill */
--gold: #FACC15; /* secondary signal (status/attention) */
--danger: #EF4444;
--success: #22C55E;
--warn: #F59E0B;
/* investigate tree kinds (structure tab dots, researcher tree) */
--node-structure: #2C649D;
--node-section: #b91c1c;
/* bias pyramid (processing, phase 2), one color per triangle */
--pyramid-0: #FFFFFF;
--pyramid-1: #93C5FD;
--pyramid-2: #FACC15;
--pyramid-3: #FCA5A5;
--pyramid-4: #3B82F6;
--pyramid-5: #22C55E;
--pyramid-6: #A855F7;
--pyramid-7: #F97316;
--pyramid-8: #EF4444;
/* type */
--font-ui: "Inter", system-ui, sans-serif;
--font-serif: Georgia, "Times New Roman", serif;
--font-mono: "IBM Plex Mono", monospace; /* data readouts: ids, counts, codes */
/* radii */
--r-ctl: 6px; /* controls */
--r-sm: 3px; /* small elements */
color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scrollbar-gutter: stable; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font-ui);
font-size: 12px;
-webkit-font-smoothing: antialiased;
display: flex;
flex-direction: column;
}
/* Hairline scrollbars, globally */
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }
*::-webkit-scrollbar-thumb:hover { background: var(--border-3); }
* { scrollbar-width: thin; scrollbar-color: #3F3F46 transparent; }
/* Thin range sliders (GVA: 2px track, small round thumb) */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
height: 16px;
background: transparent;
cursor: grab;
}
input[type="range"]:active { cursor: grabbing; }
input[type="range"]::-webkit-slider-runnable-track {
height: 2px;
background: var(--border-2);
border-radius: 1px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 9px;
height: 9px;
border-radius: 50%;
background: #a0a0a0;
margin-top: -3.5px;
}
input[type="range"]::-moz-range-track {
height: 2px;
background: var(--border-2);
border-radius: 1px;
}
input[type="range"]::-moz-range-thumb {
width: 9px;
height: 9px;
border: 0;
border-radius: 50%;
background: #a0a0a0;
}
/* Custom checkboxes (span-free: restyles the native input) */
input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 3px;
border: 1px solid var(--border-3);
background: transparent;
cursor: pointer;
display: inline-grid;
place-items: center;
margin: 0;
}
input[type="checkbox"]:checked {
background: var(--border-2);
border-color: var(--border-2);
}
input[type="checkbox"]:checked::after {
content: "";
width: 10px;
height: 10px;
background: center / contain no-repeat
url('data:image/svg+xml;utf8,');
}
/* Uppercase tracked micro-header (shared label idiom) */
.visuals-group-head,
.sidebar-head h2,
.section-head,
.nt-head, .nt-group, .dn-head,
.et-dropdown > .et-head,
.sr-group-head,
.structure-panel-head,
.kp-field label,
.insp-section,
#tooltip .tt-label,
.ctx-header {
font-family: var(--font-ui);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
}
/* ============================================================
Header — 42px compact bar
============================================================ */
header {
height: 42px;
padding: 0 12px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
border-bottom: 1px solid var(--border);
background: var(--bg);
flex: 0 0 auto;
}
/* Product tabs — the wordmark is a tab; serif identity, no underline */
#product-tabs {
display: flex;
gap: 14px;
align-items: center;
}
.product-tab {
background: transparent;
border: 0;
padding: 0;
font-family: var(--font-serif);
font-weight: 400;
font-size: 15px;
letter-spacing: 0.02em;
color: var(--faint);
cursor: pointer;
transition: color 120ms;
}
.product-tab:hover { color: var(--text-2); }
.product-tab.active { color: var(--fg-bright); }
/* Product-scoped chrome: investigate has NO mode tabs (the canvas is always
open) and gains structure/process tabs in the right rail; the story sidebar
tab and those right-rail tabs are hidden on newsfeed. */
body:not(.product-investigate) #tab-story,
body:not(.product-investigate) .right-tab.inv-tab { display: none; }
body.product-investigate .right-tab.nf-tab { display: none; } /* newsfeed-only: summary */
body.product-investigate #mode-tabs { display: none; }
/* Investigate workspace shell. The shared graph/panels are mounted once. */
#investigate-tabs { display: flex; align-self: stretch; margin: 0 auto; }
.workspace-tab { background: transparent; border: 0; border-bottom: 2px solid transparent;
color: var(--faint); padding: 0 16px; font: 500 11px var(--font-ui);
text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.workspace-tab:hover { color: var(--text-2); }
.workspace-tab.active { color: var(--fg-bright); border-bottom-color: var(--accent); }
#editor-mode-tabs { flex: 0 0 auto; gap: 2px; }
#editor-mode-tabs .seg-btn { padding: 4px 12px; }
#editor-workspace[hidden], #researcher-workspace[hidden], #investigate-tabs[hidden],
#editor-mode-tabs[hidden], #sidebar-tabs [hidden], #right-tabs [hidden],
#node-sidebar-tools[hidden], #investigate-structure-panel[hidden] { display: none !important; }
#researcher-workspace { flex: 1; min-height: 0; background: var(--canvas); }
#investigate-structure-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.stree-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.stree-save-footer { flex: 0 0 auto; padding: 10px 12px 14px; border-top: 1px solid var(--border); background: var(--panel); }
.stree-save-footer p { font: 10px/1.5 var(--font-mono); color: var(--muted); margin: 0 0 8px; overflow-wrap: anywhere; }
.stree-save-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.stree-save-buttons button { flex: 1 0 auto; }
.stree-bar { flex-shrink: 0; gap: 8px; }
.stree-bar button { flex: 1; }
.stree-save-buttons button, .library-dialog button, .library-open {
background: var(--panel-2); border: 1px solid var(--border-2); border-radius: var(--r-ctl);
color: var(--fg); font: 11px var(--font-ui); padding: 6px 9px; cursor: pointer;
}
.stree-save-buttons button:hover, .library-dialog button:hover, .library-open:hover { background: var(--hover); }
.stree-save-buttons button:disabled, .library-dialog button:disabled { opacity: .4; cursor: default; }
.library-tabs { margin-bottom: 12px; }
.library-tabs button { flex: 1; }
.library-dialog { width: min(460px, calc(100vw - 32px)); max-height: 80vh; overflow-y: auto;
background: var(--panel); color: var(--fg); border: 1px solid var(--border-3); border-radius: 10px; padding: 20px; }
.library-dialog::backdrop { background: rgb(0 0 0 / .65); }
.library-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.library-dialog-head h2 { font: 20px var(--font-serif); margin: 0; }
.library-dialog label { display: flex; flex-direction: column; gap: 7px; margin: 16px 0; color: var(--text-2); }
.library-dialog [hidden] { display: none !important; }
.library-dialog input, .library-dialog select { width: 100%; background: var(--bg); color: var(--fg); border: 1px solid var(--border-2);
border-radius: var(--r-ctl); padding: 9px; font: 12px var(--font-ui); }
.library-dialog input:focus, .library-dialog select:focus { outline: 1px solid var(--accent); }
.library-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.library-entry { width: 100%; text-align: left; }
.library-dialog .library-entry { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; padding: 12px; }
.library-entry small { color: var(--muted); font: 10px var(--font-mono); }
.stree-close { border: 0; padding: 0 4px; background: transparent; color: var(--muted); cursor: pointer; }
.stree-close:hover { color: var(--fg); }
#node-sidebar-tools { display: flex; align-items: center; justify-content: space-between;
padding: 8px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
color: var(--muted); font: 10px var(--font-mono); }
body.product-investigate #sidebar-tabs .folder-tab { flex: 1; padding-left: 7px; padding-right: 7px; }
body.investigate-preview .editor-only,
body.investigate-preview #xform-tools,
body.investigate-preview #explore-toolbar,
body.investigate-preview #view-modes,
body.investigate-preview #search-panel,
body.investigate-preview #filter-ctl,
body.investigate-preview #timeline-strip,
body.investigate-preview #dropped-nodes,
body.investigate-preview #node-types .nt-eye,
body.investigate-preview #stage-tools [data-stage="hide-selected"],
body.investigate-preview #stage-tools [data-stage="show-all"],
body.investigate-preview #stage-tools [data-stage="pin-selected"],
body.investigate-preview #stage-tools [data-stage="unpin-selected"],
body.investigate-preview #stage-tools [data-stage="toggle-dimension"] { display: none !important; }
body.investigate-preview .node { cursor: pointer; }
body.product-investigate #drop-hint { font-size: 11px; }
/* Mode tabs — centered, underline idiom */
#mode-tabs {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 2px;
height: 100%;
align-items: stretch;
}
.mode-tab {
background: transparent;
border: 0;
color: var(--faint);
font-family: var(--font-ui);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0 12px;
cursor: pointer;
position: relative;
}
.mode-tab:hover { color: var(--text-2); }
.mode-tab.active { color: #fff; }
.mode-tab.active::after {
content: "";
position: absolute;
left: 8px;
right: 8px;
bottom: -1px;
height: 2px;
background: var(--accent);
border-radius: 2px;
}
/* Narrow windows: tabs flow beside the wordmark instead of centering over it */
@media (max-width: 1000px) {
#mode-tabs {
position: static;
transform: none;
margin-left: auto;
}
}
/* ============================================================
Layout shell — resizable rails via CSS vars set by shell.js
============================================================ */
main {
flex: 1 1 auto;
display: grid;
grid-template-columns: var(--left-w, 320px) minmax(0, 1fr) var(--right-w, 340px);
min-height: 0;
}
/* Sidebar (left rail) */
#sidebar {
position: relative;
background: var(--panel);
border-right: 1px solid var(--border);
overflow-y: auto;
overflow-x: hidden;
min-width: 0;
display: flex;
flex-direction: column;
}
body.left-collapsed #sidebar { border-right: 0; }
/* Right panel */
#right-panel {
position: relative;
background: var(--bg);
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
min-height: 0;
}
body.right-collapsed #right-panel { border-left: 0; }
/* Drag-resize handles on the rails' inner edges */
.rail-resize {
position: absolute;
top: 0;
bottom: 0;
width: 6px;
cursor: col-resize;
z-index: 8;
}
.rail-resize[data-rail="left"] { right: -3px; }
.rail-resize[data-rail="right"] { left: -3px; }
.rail-resize:hover, .rail-resize.dragging { background: color-mix(in srgb, var(--accent) 35%, transparent); }
/* Collapse toggles — floating at the canvas edges */
.rail-toggle {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 40px;
background: var(--bg);
border: 1px solid var(--border-2);
border-radius: 4px;
color: var(--muted);
font-size: 11px;
line-height: 1;
cursor: pointer;
z-index: 7;
padding: 0;
}
.rail-toggle:hover { color: var(--accent); border-color: var(--border-3); }
#rail-toggle-left { left: 6px; }
#rail-toggle-right { right: 6px; }
body.mode-structure .rail-toggle { display: none; }
/* Folder tabs — the GVA sidebar idiom */
.folder-tabs {
flex: 0 0 auto;
display: flex;
align-items: flex-end;
gap: 2px;
padding: 6px 6px 0;
border-bottom: 1px solid var(--border);
background: inherit;
position: sticky;
top: 0;
z-index: 2;
}
.folder-tab {
height: 30px;
padding: 0 12px;
background: transparent;
border: 1px solid transparent;
border-bottom: 0;
border-radius: 5px 5px 0 0;
color: var(--faint);
font-family: var(--font-ui);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: color 120ms, background 120ms;
}
.folder-tab:hover { color: var(--text-2); border-color: #2A2A2A; border-bottom-color: transparent; }
.folder-tab.active {
color: #fff;
background: #1C1C1C;
border-color: #4B4B4B;
}
/* Right-rail variant: white-outlined active tab lifting off the panel */
#right-tabs .folder-tab.active {
background: var(--bg);
border-color: #fff;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
}
#right-tabs .folder-tab {
background: #1c1c1e;
border-color: #2c2c2e;
color: var(--text-2);
}
#right-tabs .folder-tab.active { color: #fff; }
/* Left sidebar tab strip (tabs + clear button) */
#sidebar-tabs .folder-tab { flex: 0 0 auto; }
#sidebar-tabs #clear-btn { margin-left: auto; align-self: center; }
/* Pinned sidebar footer */
#sidebar-footer {
flex: 0 0 auto;
margin-top: auto;
padding: 8px 12px 10px;
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
font-size: 10px;
color: var(--muted);
background: var(--panel);
position: sticky;
bottom: 0;
}
#sidebar-footer .foot-counts { font-family: var(--font-mono); color: var(--text-2); }
#sidebar-footer .foot-brand {
font-family: var(--font-serif);
font-size: 11px;
color: var(--faint);
}
body.mode-structure #sidebar-footer,
body.mode-processing #sidebar-footer { display: none; }
/* Right-panel tabs container: scrollable strip with edge carets when the
rail is too narrow for every tab. */
#right-tabs-wrap {
display: flex;
align-items: flex-end;
border-bottom: 1px solid var(--border);
background: var(--bg);
flex: 0 0 auto;
}
.rt-caret {
flex: 0 0 auto;
width: 16px;
height: 26px;
background: var(--bg);
border: 0;
color: var(--text-2);
font-size: 13px;
line-height: 1;
cursor: pointer;
padding: 0;
}
.rt-caret:hover { color: var(--accent); }
#right-tabs {
display: flex;
align-items: flex-end;
gap: 2px;
padding: 6px 6px 0;
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
}
#right-tabs::-webkit-scrollbar { display: none; }
.right-tab { /* markup keeps .right-tab; folder-tab styling applied below */ }
#right-tabs .right-tab {
flex: 1 0 auto;
min-width: 56px; /* preserve the label; overflow uses the navigation carets */
white-space: nowrap;
height: 26px;
padding: 0 8px;
background: #1c1c1e;
border: 1px solid #2c2c2e;
border-bottom: 0;
border-radius: 5px 5px 0 0;
color: var(--text-2);
font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: color 120ms, background 120ms;
}
#right-tabs .right-tab:hover { color: var(--fg); }
#right-tabs .right-tab.active {
background: var(--bg);
border-color: #fff;
color: #fff;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
}
.right-tab-panel {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
}
.right-tab-panel[hidden] { display: none; }
.visuals-group {
padding: 10px 12px;
border-bottom: 1px solid var(--border);
}
.visuals-group:last-child { border-bottom: 0; }
.visuals-group-head {
font-size: 10px;
color: var(--text-2);
margin-bottom: 7px;
}
/* Segmented pills (GVA toggle idiom) */
.seg-group {
display: flex;
gap: 4px;
background: transparent;
border: 0;
padding: 0;
}
.seg-group[aria-label="Layout"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hierarchy-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }
.hierarchy-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hierarchy-views .seg-btn { flex-direction: column; gap: 3px; min-height: 42px; white-space: normal; }
.hierarchy-views small { font-size: 9px; color: var(--muted); }
#hierarchy-group [hidden] { display: none !important; }
.hy-tile { cursor: pointer; }
.hy-tile rect { fill-opacity: 0.15; stroke-opacity: 0.7; stroke-width: 1; }
.hy-tile:hover rect { fill-opacity: 0.24; }
.hy-tile.selected rect, .hy-tile:focus-visible rect { stroke: var(--accent) !important; stroke-width: 2; stroke-opacity: 1; }
.hy-tile:focus-visible { outline: none; }
svg.hierarchy-treemap .node > circle,
svg.hierarchy-treemap .node > rect.badge,
svg.hierarchy-treemap .node > image,
svg.hierarchy-treemap .node > text.merge-plus { display: none !important; }
svg.hierarchy-treemap .link:not(.link-bridge):not(.link-sel) { opacity: 0; pointer-events: none; }
.seg-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
background: #17181B;
border: 1px solid #2A2C31;
color: var(--muted);
font-family: var(--font-ui);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.03em;
padding: 4px 8px;
cursor: pointer;
border-radius: 20px;
transition: background 120ms, color 120ms, border-color 120ms;
white-space: nowrap;
}
.seg-btn svg { display: block; flex: 0 0 auto; }
.seg-btn:hover { background: #24282F; color: var(--fg); }
.seg-btn.active {
background: #3A3A3A;
color: #fff;
border-color: #707070;
}
/* A reserved option (node visualization "icon") shows but cannot be picked. */
.seg-btn:disabled { opacity: 0.4; cursor: default; }
.seg-btn:disabled:hover { background: #17181B; color: var(--muted); }
.range-row {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
margin-bottom: 8px;
}
.range-row:last-child { margin-bottom: 0; }
.range-row input[type="range"] {
grid-column: 1 / -1;
width: 100%;
margin-top: 2px;
}
.range-label {
font-size: 10px;
font-weight: 500;
color: var(--muted);
letter-spacing: 0.04em;
}
.range-value {
font-family: var(--font-mono);
font-size: 10px;
color: var(--fg);
text-align: right;
}
#inspector-body {
padding: 10px 12px 18px;
font-size: 12px;
}
.inspector-empty {
color: var(--muted);
font-size: 11px;
padding: 6px 0;
}
.insp-label {
display: inline-block;
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
color: #fff;
background: var(--accent-dim);
border: 1px solid #1F4B7D;
padding: 2px 8px;
border-radius: 12px;
margin-bottom: 8px;
}
.insp-name {
font-size: 14px;
font-weight: 600;
line-height: 1.3;
margin-bottom: 12px;
color: var(--fg-bright);
word-break: break-word;
}
.insp-section {
font-size: 10px;
color: var(--muted);
margin: 12px 0 6px;
border-top: 1px solid var(--border);
padding-top: 9px;
}
.insp-props {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 6px;
margin: 0;
}
.insp-prop {
display: grid;
grid-template-columns: 90px 1fr;
gap: 6px;
align-items: baseline;
}
.insp-prop dt {
font-size: 11px;
color: #7D7D7D;
word-break: break-word;
}
/* src → active → target chain under the inspector heading */
.insp-chain {
font-family: var(--font-mono);
font-size: 10px;
line-height: 1.5;
color: var(--muted);
margin: -3px 0 6px;
white-space: normal;
overflow-wrap: anywhere;
max-width: 100%;
}
.insp-prop dd {
margin: 0;
font-size: 12px;
word-break: break-word;
color: var(--fg-bright);
line-height: 1.5;
}
.insp-prop dd a {
color: var(--accent-link);
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--accent-link) 40%, transparent);
}
.insp-prop dd a:hover { border-bottom-color: var(--accent-link); }
.insp-images {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.insp-image {
max-width: 100%;
max-height: 180px;
border-radius: var(--r-ctl);
border: 1px solid var(--border-2);
object-fit: contain;
background: var(--panel);
}
.insp-sep {
border: 0;
border-top: 1px solid var(--border);
margin: 12px 0;
}
.insp-img {
display: block;
width: 100%;
height: auto;
max-height: 180px;
object-fit: cover;
border: 1px solid var(--border);
border-radius: var(--r-sm);
margin: 6px 0 9px;
}
.insp-summary {
font-size: 12px;
line-height: 1.5;
color: var(--fg);
white-space: pre-wrap;
word-break: break-word;
}
.insp-source-head {
display: flex;
gap: 6px;
align-items: flex-start;
}
.insp-source-icon {
width: 36px;
height: 36px;
object-fit: cover;
border-radius: var(--r-sm);
border: 1px solid var(--border);
flex-shrink: 0;
}
.insp-source-titlewrap {
min-width: 0;
}
.insp-source-title {
display: block;
font-size: 12px;
font-weight: 600;
line-height: 1.35;
color: var(--fg-bright);
text-decoration: none;
word-break: break-word;
}
a.insp-source-title:hover {
color: var(--accent);
}
.insp-source-meta {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
margin-top: 2px;
}
.insp-source-summary {
font-size: 11px;
line-height: 1.5;
color: var(--fg);
margin-top: 6px;
word-break: break-word;
}
.insp-source-url {
font-family: var(--font-mono);
font-size: 10px;
margin-top: 5px;
overflow-wrap: anywhere;
}
.insp-source-url a {
color: var(--muted);
text-decoration: none;
}
.insp-source-url a:hover {
color: var(--accent);
}
/* Inspector head: the type chip on the left, the bias pyramid top right
(a source node's own score; an active's mean over its sources). The empty
box holds the corner while the source stage loads. */
.insp-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
margin-bottom: 8px;
}
.insp-head .insp-label { margin-bottom: 0; }
.insp-head .bias-pyramid { margin-top: -3px; }
.insp-pyramid-empty { flex: 0 0 37px; height: 32px; }
/* Source rows (pipeline source + source_data): text left, compact pyramid right */
.insp-sources {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 7px;
}
.insp-source {
display: flex;
align-items: flex-start;
gap: 8px;
}
.insp-source-body { flex: 1 1 auto; min-width: 0; }
.insp-source > .bias-pyramid { margin-top: 1px; }
.insp-source-note {
color: var(--muted);
font-size: 11px;
line-height: 1.5;
}
/* One collapsible per instance (a merge's members, an id fold's copies) */
.insp-instance { margin: 0; }
.insp-instance > summary {
display: flex;
align-items: baseline;
gap: 6px;
padding: 4px 0;
cursor: pointer;
list-style: none;
font-size: 11px;
color: var(--fg);
border-bottom: 1px solid var(--border);
}
.insp-instance > summary::-webkit-details-marker { display: none; }
.insp-instance > summary::before {
content: "4";
flex: 0 0 auto;
font-size: 10px;
line-height: 1;
color: var(--muted);
transition: transform 0.15s ease;
}
.insp-instance:not([open]) > summary::before { transform: rotate(-90deg); }
.insp-instance-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.insp-instance-count {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
}
.insp-instance > .insp-sources,
.insp-instance > .insp-source-note { margin: 6px 0 8px 16px; }
.insp-labels-list {
display: flex;
flex-wrap: wrap;
gap: 3px;
margin-bottom: 9px;
}
/* Sentence partials (sentence-partials.js): subject → active → target → outcome,
every word a pill in its node's color, in the inspector and under the
Processing tab's article rows. */
.sp-chain {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 3px 4px;
line-height: 1.6;
max-width: 100%;
}
.sp-node {
display: inline-block;
background: var(--sp-c, var(--panel-2));
color: #fff;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.01em;
padding: 1px 7px;
border-radius: 10px;
white-space: nowrap;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
cursor: default;
}
.sp-node[data-sp]:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.sp-node.sp-active { font-weight: 600; }
.sp-arrow, .sp-sep { color: var(--muted); font-size: 10px; }
.sp-list { list-style: none; margin: 0; padding: 0; }
.sp-list li { padding: 4px 0; border-bottom: 1px solid var(--border); }
.sp-list li:last-child { border-bottom: 0; }
.sp-empty { color: var(--muted); font-size: 11px; }
.insp-chain .sp-chain { margin: 2px 0 4px; }
/* the block of partials under an article row (Phase 2 / 3 lists) */
.proc-row.sp-block {
display: block;
padding: 6px 12px 8px 34px;
background: var(--bg);
}
/* the hover popup: an active's whole partial with date, outcomes, countries
and every connected node; a latent's name, label, type, and its picture and
facts once resolved */
#sp-pop {
position: fixed;
z-index: 1000;
pointer-events: none;
background: #1a1a1a;
border: 2px solid #1F1F22;
border-radius: 10px;
padding: 10px 14px;
max-width: 360px;
min-width: 180px;
font-size: 12px;
color: var(--fg);
line-height: 1.4;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
#sp-pop[hidden] { display: none; }
.sp-pop-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.sp-pop-label {
display: inline-block;
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
color: #fff;
background: var(--sp-c, var(--accent-dim));
padding: 1px 7px;
border-radius: 10px;
}
.sp-pop-type, .sp-pop-resolved { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.sp-pop-resolved { color: var(--success); }
.sp-pop-name { font-weight: 700; font-size: 14px; color: #fff; margin-bottom: 4px; }
.sp-pop-img {
display: block;
max-width: 100%;
max-height: 140px;
object-fit: contain;
border-radius: 6px;
border: 1px solid var(--border-2);
background: var(--panel);
margin: 4px 0 6px;
}
.sp-pop-desc {
color: var(--text-2);
font-size: 11px;
margin-bottom: 5px;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sp-pop-chain { margin-bottom: 6px; }
.sp-pop-rows { margin: 0; display: grid; gap: 3px; }
.sp-pop-row { display: grid; grid-template-columns: 72px 1fr; gap: 6px; align-items: baseline; }
.sp-pop-row dt { font-size: 10px; color: #7D7D7D; }
.sp-pop-row dd { margin: 0; font-size: 11px; color: var(--fg-bright); overflow-wrap: anywhere; }
.sp-pop-section {
font-size: 10px;
color: var(--muted);
border-top: 1px solid var(--border);
margin-top: 7px;
padding-top: 6px;
}
.sp-pop-group { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: 11px; margin-top: 3px; }
.sp-pop-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sp-c); flex: 0 0 auto; align-self: center; }
.sp-pop-glabel { color: var(--muted); font-family: var(--font-mono); font-size: 10px; }
.insp-labels-list .chip {
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
border: 1px solid var(--border-2);
padding: 1px 6px;
border-radius: 10px;
}
.sidebar-head {
padding: 8px 12px 6px;
display: flex;
justify-content: space-between;
align-items: baseline;
background: var(--panel);
border-bottom: 1px solid var(--border);
}
.sidebar-head.sticky {
position: sticky;
top: 0;
z-index: 1;
}
.sidebar-head h2 {
font-size: 10px;
color: var(--muted);
margin: 0;
}
.section-head {
padding: 10px 12px 4px;
font-size: 10px;
color: var(--muted);
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
}
.section-head:hover { color: var(--fg); }
.section-head .caret {
display: inline-block;
width: 8px;
color: var(--muted);
font-size: 9px;
transition: transform 120ms;
}
.section-head.collapsed .caret { transform: rotate(-90deg); }
.section-body.collapsed { display: none; }
.section-head .section-dot {
width: 7px;
height: 7px;
border-radius: 50%;
display: inline-block;
}
.sort-toggle {
margin-left: auto;
display: flex;
gap: 3px;
background: transparent;
border: 0;
}
.sort-toggle button {
background: #1c1c1e;
border: 1px solid #3a3a3c;
color: var(--muted);
font-family: var(--font-ui);
font-size: 9px;
letter-spacing: 0.03em;
padding: 1px 7px;
cursor: pointer;
text-transform: none;
border-radius: 10px;
}
.sort-toggle button:hover { color: var(--fg); background: #252527; }
.sort-toggle button.active {
background: #2c2c2e;
color: #fff;
border-color: var(--border-3);
}
/* Topic-tree heads: one per structural node of the newsfeed topic trees, at
any depth. `--depth` (set by the renderer) indents; the class only picks the
weight of the top level. */
.macro-head, .topic-head, .subtopic-head {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
user-select: none;
font-family: var(--font-ui);
font-size: 11px;
letter-spacing: 0.02em;
color: var(--fg);
padding: 5px 12px 4px calc(12px + var(--depth, 0) * 11px);
font-weight: 400;
}
.macro-head {
padding-top: 6px;
padding-bottom: 5px;
font-weight: 600;
}
.macro-head:hover, .topic-head:hover, .subtopic-head:hover {
background-color: var(--panel-2);
}
.macro-head .caret, .topic-head .caret, .subtopic-head .caret {
display: inline-block;
width: 8px;
color: var(--muted);
font-size: 9px;
transition: transform 120ms;
}
.macro-head.collapsed .caret,
.topic-head.collapsed .caret,
.subtopic-head.collapsed .caret { transform: rotate(-90deg); }
.macro-group.collapsed,
.topic-group.collapsed,
.seed-list.collapsed { display: none; }
.macro-group .seed-list li {
font-size: 11px;
font-weight: 400;
padding: 4px 12px 4px calc(16px + var(--depth, 1) * 11px);
border-left: 0;
}
.seed-list li.kp-disabled .kp-name { color: var(--muted); }
.macro-group .seed-list li:hover { background-color: var(--panel-2); }
.hier-label,
.macro-group .seed-list li .kp-name {
display: inline-block;
background-image: linear-gradient(to right,
var(--accent) 0%,
var(--accent) var(--bar-pct, 0%),
transparent var(--bar-pct, 0%));
background-size: 100% 2px;
background-repeat: no-repeat;
background-position: bottom left;
padding-bottom: 2px;
}
#clear-btn {
background: var(--panel-2);
border: 1px solid var(--border-2);
color: var(--muted);
font-family: var(--font-ui);
font-size: 10px;
font-weight: 500;
padding: 3px 9px;
cursor: pointer;
border-radius: var(--r-ctl);
transition: color 120ms, border-color 120ms, background 120ms;
}
#clear-btn:hover { color: var(--danger); border-color: #dc2626; background: rgba(127, 29, 29, 0.3); }
.seed-list {
list-style: none;
margin: 0;
padding: 3px 0 6px;
}
.seed-list li {
padding: 5px 12px;
cursor: grab;
font-size: 12px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
border-left: 2px solid transparent;
user-select: none;
}
.seed-list li:hover {
background-color: var(--panel-2);
}
.seed-list li:active { cursor: grabbing; }
.seed-list .kp-count {
color: var(--muted);
font-family: var(--font-mono);
font-size: 10px;
}
/* A database total for a seed with nothing in the sandbox (counts follow the sandbox) */
.kp-count.kp-total { opacity: 0.45; }
/* Group-head totals — same look as the keyphrase counts, pushed right. */
.macro-head .kp-count,
.topic-head .kp-count,
.subtopic-head .kp-count {
margin-left: auto;
color: var(--muted);
font-size: 10px;
font-weight: 400;
}
.pair-list {
list-style: none;
margin: 0;
padding: 3px 0 6px;
}
.pair-list .pair {
display: flex;
align-items: flex-start;
gap: 6px;
padding: 5px 12px;
font-size: 12px;
cursor: grab;
user-select: none;
border-left: 2px solid transparent;
}
.pair-list .pair:hover { background: var(--panel-2); }
.pair-list .pair:active { cursor: grabbing; }
.pair-list .pair-names {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 3px 5px;
min-width: 0;
line-height: 1.3;
}
.pair-list .pair-name {
display: inline-block;
background-image: linear-gradient(to right,
var(--accent) 0%,
var(--accent) var(--bar-pct, 0%),
transparent var(--bar-pct, 0%));
background-size: 100% 2px;
background-repeat: no-repeat;
background-position: bottom left;
padding-bottom: 2px;
}
.pair-list .pair-sep {
color: var(--muted);
font-family: var(--font-mono);
font-size: 10px;
flex: 0 0 auto;
}
.pair-list .kp-count {
color: var(--muted);
font-family: var(--font-mono);
font-size: 10px;
flex: 0 0 auto;
padding-top: 1px;
}
#sidebar-sections .loading {
padding: 12px;
color: var(--muted);
font-style: italic;
font-size: 11px;
}
/* ============================================================
Canvas
============================================================ */
#canvas {
position: relative;
background: var(--canvas);
overflow: hidden;
}
#canvas.drag-over {
background: #0e1420;
outline: 1px dashed var(--accent);
outline-offset: -8px;
}
#viz {
width: 100%;
height: 100%;
display: block;
}
#viz3d {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
}
#viz3d[hidden] { display: none; }
#viz3d canvas { display: block; }
.marquee-3d {
position: absolute;
z-index: 5;
pointer-events: none;
background: rgba(92, 158, 255, 0.08);
border: 1px dashed var(--accent);
}
.scene-tooltip,
.graph-tooltip {
background: var(--panel-2) !important;
border: 1px solid #1F1F22 !important;
color: var(--fg) !important;
font-family: var(--font-ui) !important;
font-size: 12px !important;
padding: 8px 10px !important;
border-radius: 8px !important;
line-height: 1.4 !important;
}
.scene-tooltip .tt-label {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 2px;
}
.scene-tooltip .tt-name {
font-weight: 700;
font-size: 13px;
color: #fff;
}
#drop-hint {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--faint);
font-family: var(--font-ui);
font-size: 12px;
letter-spacing: 0.04em;
pointer-events: none;
}
/* Procedural initial graph load; independent of both SVG and WebGL scenes. */
.scene-initial-loader {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: min(304px, 65%, 45vh);
z-index: 12;
pointer-events: none;
text-align: center;
color: var(--text-2);
background: radial-gradient(ellipse, color-mix(in srgb, var(--canvas) 90%, transparent), transparent 72%);
}
.scene-initial-loader[hidden] { display: none; }
.scene-initial-loader svg { display: block; width: 100%; overflow: visible; }
.scene-initial-loader circle { fill: none; stroke: var(--fg-bright); }
.scene-initial-loader path { fill: none; stroke: var(--accent); stroke-width: 1; stroke-linecap: round; }
.scene-initial-loader span {
display: block; margin-top: -6px;
font: 10px var(--font-mono); letter-spacing: 0.1em;
}
#canvas.initial-loading #drop-hint { visibility: hidden; }
/* Floating toolbars — bordered strips on the canvas overlay */
#view-modes {
position: absolute;
top: 10px;
right: 10px;
display: flex;
gap: 2px;
background: var(--bg);
border: 1px solid var(--border-3);
border-radius: 4px;
padding: 2px;
z-index: 5;
}
/* Explore toolbar: top-right hover menus, below the view-mode pills */
#explore-toolbar {
position: absolute;
top: 46px;
right: 10px;
display: flex;
gap: 3px;
z-index: 6;
}
.et-menu { position: relative; }
.et-btn {
background: var(--bg);
border: 1px solid var(--border-3);
border-radius: 4px;
color: var(--muted);
font-family: var(--font-ui);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.05em;
padding: 4px 9px;
cursor: default;
}
.et-menu:hover .et-btn { color: var(--accent); }
.et-dropdown {
display: none;
position: absolute;
top: 100%;
right: 0;
padding-top: 3px; /* hover bridge between button and panel */
min-width: 160px;
}
.et-menu:hover .et-dropdown { display: block; }
.et-dropdown > .et-head {
background: var(--panel-2);
border: 1px solid var(--border);
border-bottom: 0;
border-radius: var(--r-ctl) var(--r-ctl) 0 0;
font-size: 9px;
color: var(--muted);
padding: 6px 8px 3px;
}
.et-dropdown > .seg-group {
border: 1px solid var(--border);
border-top: 0;
border-radius: 0 0 var(--r-ctl) var(--r-ctl);
background: var(--panel-2);
padding: 4px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}
/* Dual-handle range (neighbor/popular node sizing): two overlaid range
inputs share one track; only the thumbs take pointer events. */
.dual-range {
grid-column: 1 / -1;
position: relative;
height: 16px;
margin-top: 2px;
}
.dual-range .dual-fill {
position: absolute;
top: 7px;
height: 2px;
background: var(--accent);
border-radius: 1px;
pointer-events: none;
opacity: 0.85;
}
/* Inverted range (handles crossed): the mapping flips; bar + handles go red. */
.dual-range.inverted .dual-fill { background: var(--danger); }
.dual-range.inverted input[type="range"]::-webkit-slider-thumb { background: var(--danger); }
.dual-range.inverted input[type="range"]::-moz-range-thumb { background: var(--danger); }
.dual-range input[type="range"] {
position: absolute;
inset: 0;
width: 100%;
margin: 0;
background: none;
pointer-events: none;
-webkit-appearance: none;
appearance: none;
height: 16px;
}
.dual-range input[type="range"]::-webkit-slider-runnable-track {
height: 2px;
margin-top: 7px;
background: var(--border-2);
border-radius: 1px;
}
.dual-range input[type="range"]:last-child::-webkit-slider-runnable-track {
background: transparent;
}
.dual-range input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
pointer-events: auto;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent);
border: none;
margin-top: -4px;
cursor: pointer;
}
.dual-range input[type="range"]::-moz-range-track {
height: 2px;
background: var(--border-2);
border-radius: 1px;
}
.dual-range input[type="range"]:last-child::-moz-range-track {
background: transparent;
}
.dual-range input[type="range"]::-moz-range-thumb {
pointer-events: auto;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent);
border: none;
cursor: pointer;
}
/* Editable min/max bounds flanking each slider: min at the left end of the
track, max at the right end. */
.range-limits {
display: flex;
gap: 10px;
justify-content: space-between;
margin: -1px 0 5px;
font-size: 9px;
color: var(--muted);
}
.range-limits label {
display: flex;
align-items: center;
gap: 4px;
}
.range-limits input[type="number"] {
width: 44px;
background: var(--bg);
border: 1px solid var(--border-2);
border-radius: 4px;
color: var(--fg);
font-family: var(--font-mono);
font-size: 9px;
padding: 2px 4px;
}
.range-limits input[type="number"]:focus {
outline: none;
border-color: var(--border-3);
}
/* Stage tools — icon-only horizontal strip below the axis navigator.
Labels live in title tooltips. */
#stage-tools {
position: absolute;
bottom: 0.75rem;
right: 10px;
display: flex;
flex-direction: row;
background: var(--bg);
border: 1px solid var(--border-3);
border-radius: 4px;
overflow: hidden;
z-index: 5;
}
#stage-tools button {
width: 26px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
border-right: 1px solid var(--border);
color: var(--muted);
cursor: pointer;
padding: 0;
}
#stage-tools button svg { display: block; }
#stage-tools button:last-child { border-right: 0; }
#stage-tools button:hover {
background: #1a1a1a;
color: var(--accent);
}
body.mode-structure #stage-tools,
body.mode-processing #stage-tools,
body.mode-url #stage-tools { display: none; }
/* Axis navigator — bottom right, above the stage tools and LEFT of the
stage-info box. x/y screen axes in 2D; live world x/y/z through the
camera in 3D. Non-interactive. */
#axis-gizmo {
position: absolute;
bottom: calc(0.75rem + 32px);
right: 176px;
width: 84px;
height: 84px;
z-index: 5;
pointer-events: none;
}
/* Stage info box — counts readout above the stage tools; the header stays
put and the list collapses downward (bottom-anchored, like node types). */
#stage-info {
position: absolute;
bottom: calc(0.75rem + 32px);
right: 10px;
width: 158px;
background: color-mix(in srgb, var(--bg) 78%, transparent);
backdrop-filter: blur(3px);
border: 1px solid var(--border-2);
border-radius: 5px;
overflow: hidden;
z-index: 5;
}
.si-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 5px 9px 4px;
font-family: var(--font-ui);
text-transform: uppercase;
font-size: 9px;
letter-spacing: 0.08em;
color: var(--muted);
border-bottom: 1px solid var(--border);
cursor: pointer;
user-select: none;
}
.si-head:hover { color: var(--text); }
.si-caret {
font-size: 10px;
line-height: 1;
transition: transform 0.15s ease;
}
#stage-info.si-collapsed .si-caret { transform: rotate(-90deg); }
#stage-info.si-collapsed .si-list { display: none; }
#stage-info.si-collapsed .si-head { border-bottom: none; }
.si-list {
list-style: none;
margin: 0;
padding: 4px 0 5px;
}
.si-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 2px 9px;
}
.si-list li[hidden] { display: none; }
.si-k {
font-family: var(--font-ui);
font-size: 9px;
color: var(--muted);
white-space: nowrap;
}
.si-v {
font-family: var(--font-mono);
font-size: 9px;
color: var(--text-2);
}
body.mode-structure #stage-info,
body.mode-processing #stage-info,
body.mode-url #stage-info { display: none; }
#axis-gizmo svg { width: 100%; height: 100%; }
#axis-gizmo text {
font-family: var(--font-mono);
font-size: 10px;
}
body.mode-structure #axis-gizmo,
body.mode-processing #axis-gizmo { display: none; }
/* Layout tab: roomier sections, mode buttons, transform rows */
.right-tab-panel[data-panel="layout"]:not([hidden]) {
display: flex;
flex-direction: column;
overflow: hidden;
}
.lay-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
/* Release pins: fixed to the panel bottom, raised off the edge */
.lay-footer {
flex: 0 0 auto;
padding: 10px 12px 18px;
border-top: 1px solid var(--border);
background: var(--bg);
}
.lay-mode-row { padding: 12px 12px 2px; flex: 0 0 auto; }
/* Parametric axis rows */
.par-axis { margin-bottom: 12px; }
.par-axis select {
flex: 1 1 auto;
min-width: 0;
background: var(--bg);
border: 1px solid var(--border-2);
border-radius: var(--r-ctl);
color: var(--fg);
font-family: var(--font-ui);
font-size: 11px;
padding: 4px 6px;
}
.par-axis select:focus { outline: none; border-color: var(--border-3); }
.xf-row-label.par-x { color: #e5484d; font-weight: 700; }
.xf-row-label.par-y { color: #46a758; font-weight: 700; }
.xf-row-label.par-z { color: #3e63dd; font-weight: 700; }
.par-range-row {
display: flex;
align-items: center;
gap: 12px;
margin: 5px 0 0 53px;
font-size: 9px;
color: var(--muted);
}
.par-range-row label {
display: inline-flex;
align-items: center;
gap: 4px;
}
.par-range-row input[type="number"] {
width: 52px;
background: var(--bg);
border: 1px solid var(--border-2);
border-radius: 4px;
color: var(--fg);
font-family: var(--font-mono);
font-size: 9px;
padding: 2px 4px;
}
.par-range-row input[type="number"]:focus { outline: none; border-color: var(--border-3); }
.par-range-row .par-normal { color: var(--text-2); font-size: 10px; cursor: pointer; }
.par-btn-row { display: flex; gap: 6px; margin-top: 12px; }
/* Reference marks on the 2D canvas */
.ref-layer .ref-grid {
stroke: #232327;
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.ref-layer .ref-ax { stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0.8; }
.ref-layer .ref-ax-x { stroke: #e5484d; }
.ref-layer .ref-ax-y { stroke: #46a758; }
.ref-layer .ref-origin { fill: #d4d4d8; }
.right-tab-panel[data-panel="layout"] .visuals-group {
padding: 16px 12px 18px;
}
.right-tab-panel[data-panel="layout"] .visuals-group-head { margin-bottom: 10px; }
.xf-row {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 9px;
}
.xf-row-label {
flex: 0 0 48px;
font-size: 10px;
font-weight: 500;
color: var(--muted);
letter-spacing: 0.04em;
}
.xf-row input[type="number"] {
width: 58px;
flex: 0 0 auto;
background: var(--bg);
border: 1px solid var(--border-2);
border-radius: var(--r-ctl);
color: var(--fg);
font-family: var(--font-mono);
font-size: 11px;
padding: 4px 6px;
}
.xf-row input[type="number"]:focus { outline: none; border-color: var(--border-3); }
.xf-row .seg-btn { flex: 1 1 auto; }
.xf-scale-axes { margin-top: -2px; }
/* Layout tab: distribute axis checkboxes */
.dist-axes {
display: flex;
gap: 16px;
margin: 9px 0;
}
.dist-axes label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--text-2);
cursor: pointer;
}
.dist-axes input[type="checkbox"]:disabled { opacity: 0.35; }
.dist-axes .dist-range-btn { flex: 0 0 auto; margin-left: auto; }
#dist-property-cfg .url-field { margin-top: 8px; }
/* Transform tools — position / rotate / scale, above the zoom column */
#xform-tools {
position: absolute;
top: 78px; /* just under the view menu (explore toolbar) */
right: 10px;
display: flex;
flex-direction: column;
background: var(--bg);
border: 1px solid var(--border-3);
border-radius: 4px;
overflow: hidden;
z-index: 5;
}
#xform-tools button {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
border-bottom: 1px solid var(--border);
color: var(--muted);
cursor: pointer;
padding: 0;
}
#xform-tools button svg { display: block; }
#xform-tools button:last-child { border-bottom: 0; }
#xform-tools button:hover { background: #1a1a1a; color: var(--fg); }
#xform-tools button.active { background: #1a1a1a; color: var(--accent); }
body.mode-structure #xform-tools,
body.mode-processing #xform-tools { display: none; }
/* Scale / position handle gizmo */
#handle-gizmo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 6;
pointer-events: none;
overflow: visible;
}
#handle-gizmo[hidden] { display: none; }
#handle-gizmo .hg-line {
stroke-width: 1.5;
opacity: 0.75;
pointer-events: none;
}
#handle-gizmo .hg-x .hg-shape, #handle-gizmo line.hg-x { stroke: #e5484d; }
#handle-gizmo .hg-y .hg-shape, #handle-gizmo line.hg-y { stroke: #46a758; }
#handle-gizmo .hg-z .hg-shape, #handle-gizmo line.hg-z { stroke: #3e63dd; }
#handle-gizmo .hg-x .hg-shape { fill: #e5484d; }
#handle-gizmo .hg-y .hg-shape { fill: #46a758; }
#handle-gizmo .hg-z .hg-shape { fill: #3e63dd; }
#handle-gizmo .hg-c .hg-shape { fill: none; stroke: #d4d4d8; stroke-width: 1.5; }
#handle-gizmo .hg-handle { pointer-events: none; }
#handle-gizmo .hg-handle .hg-hit {
fill: transparent;
stroke: none;
pointer-events: all;
cursor: grab;
}
#handle-gizmo .hg-handle .hg-hit:active { cursor: grabbing; }
#handle-gizmo .hg-handle.hg-hot .hg-shape { stroke: #fff; }
#handle-gizmo .hg-handle.hg-hot.hg-c .hg-shape { stroke: #fff; }
#handle-gizmo .hg-label {
fill: var(--fg);
font-family: var(--font-mono);
font-size: 10px;
paint-order: stroke;
stroke: var(--canvas);
stroke-width: 3px;
}
.view-btn {
background: transparent;
border: 0;
color: var(--muted);
font-family: var(--font-ui);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.03em;
padding: 4px 9px;
cursor: pointer;
border-radius: 3px;
transition: background 120ms, color 120ms;
}
.view-btn:hover { color: var(--fg); background: #1a1a1a; }
.view-btn.active {
background: #1a1a1a;
color: var(--accent);
}
/* Node hover card — accent bar in the node's own color (set via --node-c) */
#tooltip {
position: absolute;
pointer-events: none;
background: #1a1a1a;
border: 2px solid #1F1F22;
padding: 10px 14px 10px 20px;
font-size: 12px;
max-width: 380px;
min-width: 160px;
color: var(--fg);
border-radius: 10px;
z-index: 10;
line-height: 1.4;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
#tooltip::before {
content: "";
position: absolute;
left: 8px;
top: 10px;
bottom: 10px;
width: 5px;
border-radius: 999px;
background: var(--node-c, var(--accent));
}
#tooltip .tt-label {
font-size: 9px;
color: var(--node-c, var(--muted));
margin-bottom: 3px;
}
#tooltip .tt-name {
font-weight: 700;
font-size: 14px;
color: #fff;
margin-bottom: 3px;
line-height: 1.25;
}
#tooltip .tt-desc {
color: var(--text-2);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
#tooltip .tt-merge {
font-family: var(--font-mono);
font-size: 10px;
color: var(--accent-link);
margin-bottom: 3px;
}
#tooltip .tt-geo {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
margin-bottom: 3px;
}
/* CSS-only info tooltip (ⓘ pattern) */
.info-tip {
position: relative;
cursor: help;
color: var(--faint);
font-size: 10px;
}
.info-tip .info-tip-body {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 6px;
width: 200px;
font-size: 10px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--fg);
background: var(--hover);
border: 1px solid var(--border-2);
border-radius: 4px;
padding: 6px 8px;
display: none;
z-index: 50;
line-height: 1.4;
pointer-events: none;
white-space: normal;
}
.info-tip:hover .info-tip-body { display: block; }
/* map layout: world basemap under the graph */
.map-country {
fill: #191919;
stroke: #2e2e2e;
stroke-width: 0.5;
pointer-events: none;
transition: fill 300ms ease;
}
.map-stripe {
pointer-events: none;
}
/* merged-node inspector: encased member list */
.insp-merge-list {
list-style: none;
margin: 0;
padding: 0;
font-size: 11px;
}
.insp-merge-list li {
padding: 4px 0;
border-bottom: 1px solid var(--border);
color: var(--text-2);
}
.insp-merge-tax {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
float: right;
}
#left-overlay {
position: absolute;
top: 10px;
left: 32px;
display: flex;
flex-direction: column;
gap: 6px;
max-height: calc(100% - 5rem);
z-index: 5;
min-width: 150px;
max-width: 230px;
}
#dropped-nodes {
background: color-mix(in srgb, var(--bg) 78%, transparent);
backdrop-filter: blur(3px);
border: 1px solid var(--border-2);
border-radius: 5px;
overflow-y: auto;
max-height: 40vh;
}
#dropped-nodes[hidden] { display: none; }
#node-types {
background: color-mix(in srgb, var(--bg) 78%, transparent);
backdrop-filter: blur(3px);
border: 1px solid var(--border-2);
border-radius: 5px;
overflow: hidden;
}
#node-types[hidden] { display: none; }
.nt-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 9px 5px;
font-size: 9px;
color: var(--muted);
border-bottom: 1px solid var(--border);
cursor: pointer;
user-select: none;
}
.nt-head:hover { color: var(--text); }
.nt-caret {
font-size: 10px;
line-height: 1;
transition: transform 0.15s ease;
}
#node-types.nt-collapsed .nt-caret { transform: rotate(-90deg); }
#node-types.nt-collapsed .nt-group,
#node-types.nt-collapsed .nt-list { display: none; }
#node-types.nt-collapsed .nt-head { border-bottom: none; }
.nt-group {
padding: 5px 9px 1px;
font-size: 8px;
text-align: center;
color: var(--accent);
opacity: 0.75;
}
.nt-list {
list-style: none;
margin: 0;
padding: 4px 6px 5px;
display: flex;
flex-direction: column;
gap: 3px;
}
/* Legend chips: tinted fill of the type color + full-color hairline border */
.nt-list li {
padding: 2px 4px 2px 8px;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-size: 11px;
border: 1px solid var(--nt-c, var(--border-2));
border-radius: 5px;
background: color-mix(in srgb, var(--nt-c, #444) 20%, #0b0b0c);
}
.nt-list li:hover { filter: brightness(1.25); }
.nt-list li.hidden {
border-color: var(--border-2);
background: #1c1c1e;
}
.nt-list li.hidden .nt-name,
.nt-list li.hidden .nt-count { color: var(--muted); }
.nt-list .nt-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #DBDBDB;
}
.nt-list .nt-count {
font-size: 10px;
font-weight: 600;
color: #fff;
}
.nt-eye {
background: transparent;
border: 0;
color: var(--text-2);
cursor: pointer;
padding: 2px 3px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
}
.nt-eye:hover { color: var(--accent); }
.nt-list li.hidden .nt-eye { color: var(--faint); }
.nt-eye svg { display: block; }
.dn-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 9px 5px;
font-size: 9px;
color: var(--muted);
border-bottom: 1px solid var(--border);
cursor: pointer;
user-select: none;
}
.dn-head:hover { color: var(--text); }
.dn-caret {
font-size: 10px;
line-height: 1;
transition: transform 0.15s ease;
}
#dropped-nodes.dn-collapsed .dn-caret { transform: rotate(-90deg); }
#dropped-nodes.dn-collapsed .dn-list { display: none; }
#dropped-nodes.dn-collapsed .dn-head { border-bottom: none; }
.dn-list {
list-style: none;
margin: 0;
padding: 3px 0;
}
.dn-list li {
padding: 4px 9px;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-size: 12px;
}
.dn-list li:hover { background: var(--panel-2); }
.dn-list li.selected { background: var(--panel-2); color: var(--accent); }
.dn-list .dn-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex: 0 0 auto;
}
.dn-list .dn-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Graph styling */
/* Label LOD (2D): one class toggle drops every node label when the graph is
big and zoomed out below legibility. Never in badges view — there the text
IS the node, and layoutBadges getBBox()es it (throws on display:none). */
svg.lod-hide-labels:not(.view-badges) .node text { display: none; }
/* "none" node view: the label IS the node. Geo pins keep their disc — the
map reads off those, not off names. */
svg.view-none .node:not(.geo) circle,
svg.view-none .node:not(.geo) image { display: none; }
/* With the mark gone the label has to BE the hit target: an SVG group has no
hit area of its own, and .node text is pointer-events:none everywhere else,
so without this hover, click, drag and right-click all stop working. */
svg.view-none .node:not(.geo) text { pointer-events: auto; cursor: pointer; }
/* Sankey panel: sub-sections inside the one group, each separated by a
hairline so staging / variable / scale / range read as distinct blocks. */
#sankey-group .sk-sub {
margin-top: 12px;
padding-top: 11px;
border-top: 1px solid var(--border);
}
#sankey-group .sk-sub.sk-first { margin-top: 0; padding-top: 0; border-top: 0; }
#sankey-group .sk-sub .range-row:last-child { margin-bottom: 0; }
#sankey-group .sk-sub .seg-group + .range-row { margin-top: 9px; }
/* Sankey column headers */
.sk-col-label {
font-family: var(--font-ui);
text-transform: uppercase;
font-size: 9px;
letter-spacing: 0.08em;
fill: var(--muted);
}
.sk-col-count {
font-family: var(--font-mono);
font-size: 9px;
fill: #52525b;
}
/* Variable-height sankey bars */
.sk-bar {
stroke: #09090b;
stroke-width: 0.5;
opacity: 0.92;
}
.node.selected .sk-bar { stroke: #fff; stroke-width: 1.5; opacity: 1; }
.link {
fill: none; /* links are elements — never fill the curve's chord */
stroke: #2a2a2a;
stroke-opacity: 0.8;
}
/* Selected node's incident links: white, heavier, fully opaque.
!important beats the inline gradient stroke set in JS. */
.link.link-sel:not(.link-bridge) {
stroke: #fff !important;
stroke-width: 2;
stroke-opacity: 1;
}
/* Live search dim: non-matching nodes/links recede while typing. */
.node.search-dim { filter: saturate(0.3) brightness(0.4); }
.link.search-dim { stroke-opacity: 0.12; }
/* Cluster layout: nested bubbles. Category containers (period levels) tint
the active-node orange and compound as they nest; property circles (comma
tuples) keep the grey fill. */
.cluster-anchor .cluster-bubble {
fill: rgba(128, 128, 128, 0.10);
stroke: #3a3a3a;
stroke-width: 1;
pointer-events: none;
}
.cluster-anchor .cluster-bubble.cat {
fill: rgba(217, 119, 6, 0.05); /* active (action) color */
stroke: rgba(217, 119, 6, 0.45);
}
.cluster-anchor text {
pointer-events: none;
user-select: none;
font-family: var(--font-mono);
}
.cluster-anchor .cluster-code {
fill: #7dd3fc;
font-size: 12px;
font-weight: 500;
}
.cluster-anchor .cluster-name {
fill: var(--muted);
font-size: 10px;
}
.link.link-synthetic {
stroke: #555;
stroke-width: 0.78; /* dot diameter (round caps) */
stroke-dasharray: 0.1 3; /* dots, not dashes (round linecap draws them) */
stroke-linecap: round;
stroke-opacity: 0.85;
}
/* Hidden nodes keep their own type color and rounded dashes in every state. */
.link.link-bridge {
stroke-linecap: round;
stroke-opacity: 0.95;
}
.link.link-bridge.bridge-selected { filter: brightness(1.3); stroke-opacity: 1; }
.link.link-bridge.search-dim { stroke-opacity: 0.12; }
.bridge-hit { fill: none; stroke: transparent; pointer-events: stroke; cursor: pointer; }
.bridge-hit:focus-visible { outline: none; stroke: var(--accent); stroke-opacity: 0.18; }
.insp-bridge-note, .visuals-note { color: var(--muted); font-size: 11px; line-height: 1.5; }
.visuals-note { margin: 0 0 10px; }
.insp-bridge-node { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 10px; }
.insp-bridge-node > summary { cursor: pointer; font-size: 12px; margin-bottom: 12px; }
.insp-bridge-rel { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 8px 0; overflow-wrap: anywhere; }
/* Any highlighted line is drawn solid — dots/dashes drop while highlighted. */
.link.geo-hl:not(.link-bridge),
.link.link-synthetic.geo-hl:not(.link-bridge) {
stroke-dasharray: none;
stroke-linecap: butt;
}
#ctx-menu {
position: fixed;
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: var(--r-ctl);
padding: 3px 0;
min-width: 150px;
z-index: 100;
display: flex;
flex-direction: column;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
#ctx-menu[hidden] { display: none; }
.ctx-item {
background: transparent;
border: 0;
text-align: left;
padding: 5px 11px;
color: var(--fg);
font-family: var(--font-ui);
font-size: 12px;
cursor: pointer;
}
.ctx-header {
padding: 5px 11px 3px;
font-size: 9px;
color: var(--muted);
}
.ctx-item:hover { background: var(--hover); color: var(--accent); }
.ctx-item:disabled { color: var(--muted); cursor: not-allowed; }
.ctx-item:disabled:hover { background: transparent; color: var(--muted); }
.node circle {
stroke: var(--canvas);
stroke-width: 1.5;
cursor: pointer;
}
.node text {
fill: #fff;
font-size: 11px;
pointer-events: none;
paint-order: stroke;
stroke: var(--canvas);
stroke-width: 3px;
stroke-linejoin: round;
}
.node-img { pointer-events: none; }
/* Timeline month brackets */
.tl-brace {
fill: none;
stroke: #94a3b8;
stroke-width: 1.5;
opacity: 0.6;
vector-effect: non-scaling-stroke;
pointer-events: none;
}
.tl-brace-label {
fill: #94a3b8;
font-family: var(--font-mono);
font-size: 11px;
opacity: 0.85;
pointer-events: none;
}
.node.seed circle {
stroke-width: 2.5;
/* stroke color set inline per-node so it matches the seed's label color */
}
/* Pinned nodes carry no ring. A plain click pins (the drag start/end pair
fires without movement), so a pinned ring read as a dashed outline around
every selected node. The state survives: double-click still unpins. */
/* Selected nodes: a solid white ring, thicker than any other state. */
.node.selected circle {
stroke: #fff;
stroke-width: 4.5;
}
/* tax_id-merged container node: only the +N count beside it (text.merge-plus
below) marks it - no ring in either node view, level 1 or 2. */
/* Map layout: actives without a geoname_id (and their satellites not touching
any located active) — 50% desaturated + 50% darker, labels included. The
filter on the group covers circle/badge/image/text in one place. */
.node.geo-dim {
filter: saturate(0.5) brightness(0.5);
}
/* Map heat points: tiny unlabeled discs (name still shows in the hover tooltip)
with a soft glow behind. No stroke ever. Immovable; click highlights tethers. */
.node.geo { cursor: pointer; }
.node.geo .geo-halo {
opacity: 0.22;
filter: blur(4px);
pointer-events: none;
}
.node.geo circle {
stroke: none !important;
}
.node.geo text {
display: none;
}
.node text.merge-plus {
fill: var(--accent-link);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
}
svg.view-badges .node text.merge-plus {
stroke: var(--canvas);
stroke-width: 3px;
paint-order: stroke;
fill: var(--accent-link);
}
.node rect.badge {
stroke: var(--canvas);
stroke-width: 1.5;
cursor: pointer;
display: none;
}
svg.view-badges .node circle { display: none; }
svg.view-badges .node rect.badge { display: block; }
svg.view-badges .node text {
stroke: none;
fill: #fff;
font-weight: 600;
}
svg.view-badges .node.seed rect.badge {
stroke-width: 2.5;
}
svg.view-badges .node.selected rect.badge {
stroke: #fff;
stroke-width: 4;
}
/* Geo pins ignore the badges view — always the tiny disc + halo, never a
badge, in every node view. */
svg.view-badges .node.geo circle { display: block; }
svg.view-badges .node.geo rect.badge { display: none; }
/* Resolved-state dot: a small disc just left of the mark on nodes the
resolution workflows stamped (entity qid, framework / event_attend res=y).
main.js positions it and sets display inline, which is what lets it show
in the badges and "none" views (their circle hides above are view-wide);
the treemap hide (svg.hierarchy-treemap .node > circle) is !important and
wins. Later than every ring rule above, so no state strokes it. */
.node circle.res-dot {
fill: var(--success);
stroke: none;
pointer-events: none;
}
/* Node visualization "none": outline only. The mark keeps a canvas-colored
fill (edges behind it stay hidden, as under a flat disc) and wears its type
color as a ring; the badge pill does the same. Selection keeps its white
ring (the stroke rule steps aside for .selected), geo pins keep their heat
fill. --node-color is set inline on each group by render(). */
svg.nodevis-none .node:not(.geo) circle.mark,
svg.nodevis-none .node:not(.geo) rect.badge {
fill: var(--canvas);
}
svg.nodevis-none .node:not(.geo):not(.selected) circle.mark,
svg.nodevis-none .node:not(.geo):not(.selected) rect.badge {
stroke: var(--node-color);
stroke-width: 2;
}
/* Search panel — centered drop-down across Postgres + Neo4j */
#search-panel {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: min(460px, 50%);
z-index: 6;
}
/* Visuals tab: layout | camera mode row + the camera pane. */
.vis-mode-row { margin-bottom: 6px; }
#vis-camera-pane[hidden] { display: none; }
#cam-key-set {
display: block;
width: 100%;
margin: 2px 0 5px;
padding: 4px 0;
background: transparent;
border: 1px solid var(--border-2);
border-radius: 4px;
color: var(--muted);
font-family: var(--font-ui);
font-size: 10px;
cursor: pointer;
}
#cam-key-set:hover { color: var(--fg); background: #1a1a1a; }
#cam-key-set.armed {
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 55%, var(--border-2));
}
#cam-key-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 3px;
}
.cam-key {
padding: 4px 0;
background: transparent;
border: 1px solid var(--border);
border-radius: 3px;
color: #3f3f46;
font-family: var(--font-mono);
font-size: 10px;
cursor: pointer;
}
.cam-key:hover { color: var(--fg); background: #1a1a1a; }
.cam-key.filled { color: var(--text-2); border-color: var(--border-2); }
.cam-key.miss { color: #e5484d; border-color: #e5484d; }
.cam-key.filled::after { content: "•"; color: var(--accent); margin-left: 3px; }
.cam-hint {
margin: 5px 0 2px;
font-family: var(--font-ui);
font-size: 8px;
color: var(--muted);
line-height: 1.5;
}
/* Filter control: funnel button at the bottom-left; menu opens upward. */
#filter-ctl {
position: absolute;
bottom: 0.75rem;
left: 8px;
z-index: 6;
}
#filter-btn {
width: 26px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
border: 1px solid var(--border-3);
border-radius: 4px;
color: var(--muted);
cursor: pointer;
padding: 0;
}
#filter-btn:hover { color: var(--fg); background: #1a1a1a; }
#filter-btn.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border-3)); }
#filter-menu {
position: absolute;
bottom: 42px;
left: 0;
min-width: 130px;
background: var(--bg);
border: 1px solid var(--border-3);
border-radius: 5px;
padding: 3px;
display: flex;
flex-direction: column;
gap: 1px;
}
#filter-menu[hidden] { display: none; }
.fm-head {
font-family: var(--font-ui);
text-transform: uppercase;
font-size: 8px;
letter-spacing: 0.08em;
color: var(--muted);
padding: 3px 7px 4px;
border-bottom: 1px solid var(--border);
margin-bottom: 2px;
}
.fm-item {
background: transparent;
border: 0;
border-radius: 3px;
color: var(--text-2);
font-family: var(--font-ui);
font-size: 10px;
text-align: left;
padding: 4px 7px;
cursor: pointer;
}
.fm-item:hover:not(:disabled) { background: #1a1a1a; color: var(--fg); }
.fm-item.active { color: var(--accent); }
.fm-item:disabled { color: #3f3f46; cursor: default; }
.fm-item:disabled::after { content: " · soon"; font-size: 8px; }
/* The date block line: its item plus the block and date-field selects */
.fm-row {
display: flex;
align-items: center;
gap: 4px;
padding-right: 4px;
}
.fm-row .fm-item { flex: 1 1 auto; white-space: nowrap; }
.fm-select {
background: var(--bg);
border: 1px solid var(--border-2);
border-radius: 4px;
color: var(--muted);
font-family: var(--font-mono);
font-size: 9px;
padding: 2px 3px;
max-width: 82px;
}
.fm-select:hover { color: var(--fg); }
/* The custom block line under it: "last [n] [units]", right-aligned under the selects */
.fm-custom {
justify-content: flex-end;
padding: 2px 4px 3px 7px;
}
.fm-custom[hidden] { display: none; }
.fm-custom-label {
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
}
.fm-num {
width: 44px;
background: var(--bg);
border: 1px solid var(--border-2);
border-radius: 4px;
color: var(--text-2);
font-family: var(--font-mono);
font-size: 9px;
padding: 2px 3px;
}
.fm-num:hover,
.fm-num:focus { color: var(--fg); border-color: var(--border-3); outline: none; }
body.mode-structure #filter-ctl,
body.mode-processing #filter-ctl,
body.mode-url #filter-ctl { display: none; }
/* Bottom timeline strip: sits along the sandbox floor between the left rail
toggle and the bottom-right stage tools. */
#timeline-strip {
position: absolute;
bottom: 0.75rem;
left: 44px;
/* clear the bottom-right stage tools on real screens; on very narrow
viewports collapse toward the edge instead of imploding to 0 width */
right: clamp(12px, calc(100% - 420px), 300px);
height: 44px;
display: flex;
align-items: center;
gap: 8px;
background: color-mix(in srgb, var(--bg) 78%, transparent);
backdrop-filter: blur(3px);
border: 1px solid var(--border-2);
border-radius: 5px;
padding: 0 8px;
z-index: 5;
}
#timeline-strip[hidden] { display: none; }
.tl-field { display: flex; flex-direction: column; gap: 3px; }
.tl-check {
display: flex;
align-items: center;
gap: 3px;
color: var(--muted);
font-family: var(--font-mono);
font-size: 8px;
line-height: 1;
white-space: nowrap;
cursor: pointer;
user-select: none;
}
.tl-check:hover { color: var(--fg); }
.tl-check input { width: 9px; height: 9px; margin: 0; accent-color: var(--accent); cursor: pointer; }
#tl-cat {
background: var(--bg);
border: 1px solid var(--border-2);
border-radius: 4px;
color: var(--muted);
font-family: var(--font-mono);
font-size: 9px;
padding: 2px 3px;
}
.tl-date-input {
background: transparent;
border: 0;
color: var(--muted);
font-family: var(--font-mono);
font-size: 9px;
width: 76px;
padding: 0;
color-scheme: dark;
cursor: pointer;
}
.tl-date-input::-webkit-calendar-picker-indicator { display: none; }
.tl-date-input:hover { color: var(--fg); }
#tl-track {
position: relative;
flex: 1;
height: 32px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 3px;
overflow: hidden;
cursor: crosshair;
}
/* Activity meter: stacked active counts per ruler increment, behind the ticks
and the brush; the busiest increment fills the track's interior height. */
#tl-meter { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.8; }
#tl-ticks { position: absolute; inset: 0; pointer-events: none; }
.tl-step {
background: transparent;
border: 1px solid var(--border-2);
border-radius: 3px;
color: var(--muted);
cursor: pointer;
font-size: 8px;
line-height: 1;
height: 20px;
width: 16px;
padding: 0;
touch-action: none;
}
.tl-step:hover:not(:disabled) { color: var(--fg); border-color: var(--accent); }
.tl-step:disabled { opacity: 0.35; cursor: default; }
.tl-tick {
position: absolute;
bottom: 0;
width: 1px;
background: var(--border-2);
}
.tl-tick.major { background: #3f3f46; }
.tl-tick-label {
position: absolute;
top: 1px;
font-family: var(--font-mono);
font-size: 8px;
color: var(--muted);
text-shadow: 0 0 2px var(--bg), 0 0 2px var(--bg); /* stays legible over the meter */
transform: translateX(2px);
pointer-events: none;
white-space: nowrap;
}
#tl-brush {
position: absolute;
top: 0;
bottom: 0;
display: flex;
background: color-mix(in srgb, var(--accent) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
border-radius: 2px;
}
#tl-brush[hidden] { display: none; }
.tl-body { flex: 1; cursor: grab; min-width: 4px; }
.tl-body:active { cursor: grabbing; }
.tl-handle {
position: relative;
width: 9px;
cursor: ew-resize;
background: color-mix(in srgb, var(--accent) 70%, transparent);
border-radius: 2px;
}
.tl-handle::after { /* grip line so the handles read as grabbable */
content: "";
position: absolute;
top: 5px;
bottom: 5px;
left: 50%;
width: 1px;
transform: translateX(-50%);
background: #fff;
opacity: 0.85;
}
.tl-handle:hover { background: var(--accent); }
#tl-clear {
background: transparent;
border: 0;
color: var(--muted);
cursor: pointer;
font-size: 13px;
line-height: 1;
padding: 0 2px;
}
#tl-clear:hover { color: var(--accent); }
body.mode-structure #timeline-strip,
body.mode-processing #timeline-strip,
body.mode-url #timeline-strip { display: none; }
#search-input {
width: 100%;
height: 32px;
background: var(--bg);
border: 1px solid var(--border-2);
color: var(--fg);
font-family: var(--font-ui);
font-size: 12px;
padding: 0 10px;
border-radius: var(--r-ctl);
outline: none;
transition: border-color 120ms;
}
#search-input::placeholder {
color: var(--border-2);
font-size: 12px;
letter-spacing: 0.02em;
}
#search-input:focus {
border-color: var(--border-3);
}
#search-results {
margin-top: 4px;
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: var(--r-ctl);
max-height: 60vh;
overflow-y: auto;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
#search-results[hidden] { display: none; }
.sr-group-head {
padding: 6px 9px 4px;
font-size: 9px;
color: var(--muted);
display: flex;
align-items: center;
gap: 5px;
border-bottom: 1px solid var(--border);
background: var(--panel-2);
position: sticky;
top: 0;
z-index: 1;
}
.sr-group-head .sr-dot {
width: 7px;
height: 7px;
border-radius: 50%;
display: inline-block;
}
.sr-group-head .sr-src {
margin-left: auto;
color: var(--faint);
font-size: 8px;
letter-spacing: 0.12em;
}
.sr-item {
padding: 5px 9px;
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
gap: 6px;
border-bottom: 1px solid transparent;
}
.sr-item:hover,
.sr-item.active {
background: var(--hover);
color: var(--accent);
}
.sr-item .sr-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-item .sr-tag {
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
background: var(--bg);
border: 1px solid var(--border-2);
padding: 0 5px;
border-radius: 10px;
flex: 0 0 auto;
}
.sr-empty,
.sr-loading {
padding: 7px 9px;
font-size: 11px;
color: var(--muted);
}
/* ============================================================
Structure editor — node graph backed by the `structure` db
============================================================ */
/* In structure mode the explorer chrome is hidden; canvas + properties panel */
body.mode-structure main { grid-template-columns: 1fr 320px; }
body.mode-structure #sidebar,
body.mode-structure #right-panel,
body.mode-structure #view-modes,
body.mode-structure #explore-toolbar,
body.mode-structure #search-panel,
body.mode-structure #left-overlay,
body.mode-structure #drop-hint,
body.mode-structure #viz,
body.mode-structure #viz3d { display: none !important; }
/* Structure properties panel (right) */
#structure-panel {
background: var(--panel);
border-left: 1px solid var(--border);
display: none;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
body.mode-structure #structure-panel { display: flex; }
.structure-panel-head {
flex: 0 0 auto;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
font-size: 10px;
color: var(--muted);
}
#structure-inspector {
flex: 1 1 auto;
overflow-y: auto;
padding: 11px 12px 18px;
font-size: 12px;
}
#structure-inspector .insp-id {
grid-template-columns: 90px 1fr;
margin-bottom: 3px;
}
#structure-inspector .insp-id dt {
font-size: 10px;
color: #7D7D7D;
}
#structure-inspector .insp-id dd {
margin: 0;
font-family: var(--font-mono);
font-size: 10px;
color: var(--fg-bright);
word-break: break-all;
}
/* Editable keyphrase form */
.kp-form {
display: flex;
flex-direction: column;
gap: 8px;
}
.kp-field {
display: grid;
grid-template-columns: 1fr;
gap: 3px;
}
.kp-field label {
font-size: 9px;
color: var(--fg);
}
.kp-field input[type="text"],
.kp-field input[type="number"] {
width: 100%;
background: var(--bg);
border: 1px solid var(--border-2);
color: var(--fg);
font-family: var(--font-ui);
font-size: 12px;
padding: 6px 8px;
border-radius: var(--r-ctl);
outline: none;
transition: border-color 120ms;
}
.kp-field input[type="text"]:focus,
.kp-field input[type="number"]:focus {
border-color: var(--danger);
}
.kp-field textarea {
width: 100%;
background: var(--bg);
border: 1px solid var(--border-2);
color: var(--fg);
font-family: var(--font-ui);
font-size: 12px;
line-height: 1.4;
padding: 6px 8px;
border-radius: var(--r-ctl);
outline: none;
resize: vertical;
transition: border-color 120ms;
}
.kp-field textarea:focus { border-color: var(--border-3); }
.kp-field.kp-bool {
grid-template-columns: 1fr auto;
align-items: center;
}
.kp-field.kp-bool label { margin: 0; }
.kp-field.kp-bool input[type="checkbox"] { cursor: pointer; }
#structure-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: none;
}
body.mode-structure #structure-svg { display: block; }
#structure-hint {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--faint);
font-size: 12px;
letter-spacing: 0.04em;
pointer-events: none;
display: none;
}
body.mode-structure.structure-empty #structure-hint { display: block; }
/* Toolbar, top-left of the canvas (structure mode only) */
#structure-toolbar {
position: absolute;
top: 10px;
left: 10px;
z-index: 6;
display: none;
gap: 4px;
}
body.mode-structure #structure-toolbar { display: flex; }
.structure-tool-btn {
background: var(--panel-2);
border: 1px solid var(--border-2);
color: var(--text-2);
font-family: var(--font-ui);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.03em;
padding: 5px 10px;
border-radius: var(--r-ctl);
cursor: pointer;
transition: background 120ms, color 120ms, border-color 120ms;
}
.structure-tool-btn:hover { color: var(--fg); background: var(--hover); border-color: var(--border-3); }
#import-topics-btn:hover { color: var(--danger); border-color: #dc2626; }
/* ============================================================
Processing tab
============================================================ */
#processing-view {
background: var(--bg);
overflow: hidden;
min-height: 0;
padding: 16px 18px 18px;
display: none;
flex-direction: column;
gap: 12px;
}
body.mode-processing main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
body.mode-processing #sidebar,
body.mode-processing #right-panel,
body.mode-processing #structure-panel,
body.mode-processing #canvas { display: none !important; }
body.mode-processing #processing-view { display: flex; }
.proc-bar-head {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.proc-actions { display: flex; gap: 6px; }
.proc-btn {
background: var(--panel-2);
border: 1px solid var(--border-2);
color: var(--fg);
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: var(--r-ctl);
cursor: pointer;
transition: background 120ms;
}
.proc-btn:hover { background: var(--hover); }
.proc-btn:disabled { opacity: 0.4; cursor: default; }
.proc-btn-ghost {
background: transparent;
color: var(--muted);
border-color: var(--border-2);
}
.proc-btn-ghost:hover { color: var(--fg); background: var(--panel-2); }
.proc-btn-stop {
background: transparent;
color: var(--danger);
border-color: color-mix(in srgb, var(--danger) 55%, transparent);
}
.proc-btn-stop:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.proc-btn-stop:disabled { color: var(--muted); border-color: var(--border-2); background: transparent; }
.proc-summary {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 10px;
row-gap: 4px;
min-width: 0;
font-family: var(--font-mono);
font-size: 10px;
}
.proc-summary .proc-err { min-width: 0; overflow-wrap: anywhere; }
.proc-muted { color: var(--muted); }
.proc-err { color: var(--danger); }
.proc-status {
text-transform: uppercase;
letter-spacing: 0.1em;
font-family: var(--font-ui);
font-weight: 600;
padding: 2px 8px;
border-radius: 10px;
color: var(--bg);
background: var(--muted);
}
.proc-status-running { background: var(--warn); }
.proc-status-completed { background: var(--success); }
.proc-status-failed { background: var(--danger); }
.proc-status-stopping { background: var(--gold); }
.proc-status-stopped { background: var(--text-2); }
.proc-total .proc-bar {
height: 8px;
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: 5px;
overflow: hidden;
}
.proc-total .proc-bar-fill {
height: 100%;
background: var(--accent);
transition: width 300ms ease;
}
.proc-counts {
margin-top: 5px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
}
.proc-counts b { color: var(--fg); }
.proc-list {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: 5px;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.proc-row {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 9px;
background: var(--panel);
border-bottom: 1px solid var(--border);
font-size: 12px;
}
.proc-row:last-child { border-bottom: 0; }
.proc-row .proc-seq {
flex: 0 0 2rem;
text-align: right;
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
}
.proc-row .proc-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex: 0 0 auto;
background: var(--muted);
}
.proc-row.proc-pending .proc-dot { background: #4b5563; }
.proc-row.proc-processing .proc-dot { background: var(--warn); animation: proc-pulse 1s ease-in-out infinite; }
.proc-row.proc-done .proc-dot { background: var(--success); }
.proc-row.proc-error .proc-dot { background: var(--danger); }
.proc-row.stale .proc-dot { background: var(--danger); }
@keyframes proc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
/* Row background by status. Pending keeps var(--panel); the rest tint dark. */
.proc-row.proc-processing { background: #221a09; } /* dark amber — in progress */
.proc-row.proc-done { background: #1c1c1c; } /* dark grey — completed */
.proc-row.proc-error { background: #2b0f10; } /* dark red — failed */
.proc-row.proc-error.stale, .proc-row.proc-processing.stale { background: #2b0f10; }
.proc-row .proc-name {
flex: 1 1 40%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.proc-row .proc-path {
flex: 1 1 40%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
}
.proc-row .proc-multi {
margin-left: 4px;
color: var(--accent);
font-weight: 500;
}
.proc-row .proc-step {
flex: 0 0 auto;
font-family: var(--font-ui);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.05em;
color: var(--muted);
text-transform: uppercase;
}
.proc-row.proc-error .proc-step, .proc-row.stale .proc-step { color: var(--danger); }
/* Skipped rows — processing structurally disabled in the structure tab.
Listed for context but never dispatched to n8n; 45° stripes over the row.
.proc-off marks a row whose keyphrase is disabled RIGHT NOW (live structural
state), even if the run stamped it 'pending' before it was turned off. */
.proc-row.proc-skipped,
.proc-row.proc-off {
position: relative;
color: var(--muted);
}
.proc-row.proc-skipped .proc-dot { background: #3a3a3a; }
.proc-row.proc-skipped .proc-name,
.proc-row.proc-off .proc-name { color: var(--muted); }
.proc-row.proc-off::after,
.proc-row.proc-skipped::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(
45deg,
transparent 0 7px,
rgba(160, 160, 160, 0.08) 7px 14px
);
}
.proc-phases { flex-wrap: wrap; }
.proc-phase {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1 1 auto;
min-height: 0;
}
.proc-phase[hidden] { display: none; }
/* Phase 1 collect mode: a vertical pair of tabs in the actions column.
While a run is active the other mode's tab is greyed out and locked. */
.proc-modes {
flex-direction: column;
gap: 4px;
align-self: stretch;
justify-content: center;
}
.proc-modes .seg-btn {
flex: 0 0 auto;
justify-content: flex-start;
min-width: 11rem;
padding: 5px 12px;
border-radius: var(--r-ctl);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.proc-modes .seg-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
background: #17181B;
color: var(--muted);
}
.proc-range {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-ui);
font-size: 11px;
color: var(--text-2);
}
.proc-range[hidden] { display: none; }
.proc-range label { display: inline-flex; align-items: center; gap: 5px; }
.proc-range input[type="date"] {
background: var(--panel-2);
border: 1px solid var(--border-2);
color: var(--fg);
font-family: var(--font-mono);
font-size: 11px;
padding: 4px 6px;
border-radius: var(--r-ctl);
color-scheme: dark;
}
.proc-range input:disabled { opacity: 0.4; }
/* Per-row switch for the selected mode (nodemapper.keyphrase active / active_range). */
.proc-row .proc-switch {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
margin: 0;
position: relative;
z-index: 1;
}
.proc-row .proc-switch input { margin: 0; accent-color: var(--accent); cursor: pointer; }
.proc-row .proc-switch input:disabled { cursor: default; opacity: 0.4; }
/* Days searched / days in the run (range runs), Exa results, and the days that hit the result cap. */
.proc-row .proc-days {
flex: 0 0 auto;
min-width: 6rem;
text-align: right;
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
white-space: nowrap;
}
.proc-row .proc-days b { color: var(--fg); font-weight: 500; }
.proc-row .proc-sat { color: var(--gold); margin-left: 5px; }
/* Row selection (click, shift+click for a range, ctrl+click to toggle; Escape
clears). A checkbox change on a selected row applies to every selected row;
shift+clicking a checkbox applies its state to the range from the last one clicked. */
.proc-row[data-kp], .p2-row[data-source] { user-select: none; cursor: default; }
.proc-row.selected {
background: #17243a;
box-shadow: inset 0 0 0 1px var(--accent-dim, #2b4a7a);
}
.proc-row.selected::after { background: none; }
/* Keyphrases the tree has now that the run doesn't know yet (Reset brings them in),
and run rows whose keyphrase left the tree. */
.proc-row.proc-new .proc-dot { background: var(--accent); }
.proc-row.proc-new .proc-step { color: var(--accent); }
.proc-counts .proc-new-count { color: var(--accent); }
.proc-row.proc-gone .proc-step { color: var(--muted); }
.p2-row .p2-select {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
margin: 0;
position: relative;
z-index: 1;
}
.p2-row .p2-select input { margin: 0; accent-color: var(--accent); cursor: pointer; }
.p2-list-actions .proc-btn-stop:disabled { opacity: 0.4; }
/* List pager (Phase 2 / 3): ‹ 1–200 of 743 › — the arrow keys page too */
.proc-pager {
display: flex;
align-items: center;
gap: 4px;
}
.proc-pager[hidden] { display: none; }
.proc-pager-btn {
padding: 3px 8px;
font-size: 13px;
line-height: 1;
}
.proc-pager-label {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
white-space: nowrap;
min-width: 7.5rem;
text-align: center;
}
.proc-check {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-ui);
font-size: 11px;
color: var(--text-2);
cursor: pointer;
user-select: none;
}
/* Phase 2 */
.p2-cats {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 8px;
}
.p2-cat {
font-family: var(--font-mono);
font-size: 9px;
color: var(--text-2);
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 1px 8px;
}
.p2-cat b { color: var(--fg); font-weight: 500; }
.proc-row.proc-skipped .proc-dot { background: #3a3a3a; }
.p2-row .p2-title {
flex: 1 1 45%;
color: var(--fg);
text-decoration: none;
}
.p2-row .p2-title:hover { color: var(--accent-link); }
.p2-row.proc-skipped .p2-title { color: var(--muted); }
.p2-row .p2-publisher { flex: 0 1 18%; }
.p2-row .p2-category {
flex: 0 0 9rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 10px;
color: var(--text-2);
}
.p2-row .p2-x {
flex: 0 0 2.6rem;
text-align: right;
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
}
.p2-row .p2-routes {
flex: 0 0 5.6rem;
display: flex;
gap: 2px;
}
.p2-route {
font-family: var(--font-mono);
font-size: 9px;
color: var(--faint);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 0 3px;
}
.p2-route.on {
color: var(--accent);
border-color: var(--accent-dim);
background: var(--accent-dim);
}
/* Bias pyramid (bias-pyramid.js): one token color per triangle. The one
design for the Phase 2 rows and the explore inspector. */
.bias-pyramid { display: block; flex: 0 0 auto; }
.bias-pyramid polygon {
stroke: var(--bg);
stroke-width: 0.6;
}
.bias-pyramid .bias-tri-0 { fill: var(--pyramid-0); }
.bias-pyramid .bias-tri-1 { fill: var(--pyramid-1); }
.bias-pyramid .bias-tri-2 { fill: var(--pyramid-2); }
.bias-pyramid .bias-tri-3 { fill: var(--pyramid-3); }
.bias-pyramid .bias-tri-4 { fill: var(--pyramid-4); }
.bias-pyramid .bias-tri-5 { fill: var(--pyramid-5); }
.bias-pyramid .bias-tri-6 { fill: var(--pyramid-6); }
.bias-pyramid .bias-tri-7 { fill: var(--pyramid-7); }
.bias-pyramid .bias-tri-8 { fill: var(--pyramid-8); }
.p2-row .bias-pyramid, .p2-row .p2-pyramid-empty { flex: 0 0 37px; }
.p2-row .proc-step { flex: 0 0 6.5rem; text-align: right; }
@media (max-width: 720px) {
.p2-row .p2-publisher, .p2-row .p2-x, .p2-row .p2-pyramid-empty, .p2-row .p2-category:empty,
.p2-row .p2-routes:empty { display: none; }
.p2-row .p2-title { min-width: 7rem; }
.p2-row .p2-category { flex-basis: 5.5rem; }
.p2-row .proc-step { flex-basis: auto; }
}
/* Phase 3 — one chip per routed stage (act / rel / exch) */
.p3-row .p3-stages { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.p3-stage {
font-family: var(--font-mono);
font-size: 10px;
padding: 1px 6px;
border-radius: 3px;
border: 1px solid var(--border-2);
color: var(--muted);
white-space: nowrap;
}
.p3-stage b { font-weight: 500; color: var(--fg); }
.p3-stage.p3-none { opacity: 0.35; border-style: dashed; }
.p3-stage.p3-pending { color: var(--text-2); }
.p3-stage.p3-processing {
color: #fff; background: #46a758; border-color: #46a758;
animation: proc-pulse 1s ease-in-out infinite;
}
.p3-stage.p3-done { color: var(--fg); background: rgba(70, 167, 88, 0.22); border-color: rgba(70, 167, 88, 0.45); }
.p3-stage.p3-error { color: #e5484d; border-color: #e5484d; }
.p3-stage.p3-skipped { color: var(--muted); text-decoration: line-through; }
/* ============================================================
Resolutions — the processing tab's second area
============================================================ */
/* The top-level switch: keyphrases (the phase 1-3 strip) | resolutions.
.proc-section repeats .proc-phase's flex chain, because it now sits between
#processing-view and the panels — a break in it stops the lists scrolling and
stretches the page instead. */
.proc-sections { flex-wrap: wrap; }
.proc-section {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1 1 auto;
min-height: 0;
}
.proc-section[hidden] { display: none; }
.proc-sections .seg-btn {
flex: 0 0 auto;
padding: 5px 16px;
border-radius: var(--r-ctl);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* The three kinds, and the order a run works them in. */
.res-kinds {
display: inline-flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.proc-check input { margin: 0; accent-color: var(--accent); cursor: pointer; }
.proc-check input:disabled { cursor: default; opacity: 0.4; }
.res-sort .seg-btn { flex: 0 0 auto; padding: 4px 12px; }
.res-sort .seg-btn:disabled { opacity: 0.4; cursor: default; }
/* One block per kind: what the last find counted, the run, and the found names. */
.res-blocks {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.res-kind {
display: flex;
flex-direction: column;
gap: 8px;
flex: 0 0 auto;
border: 1px solid var(--border);
border-radius: 5px;
padding: 10px 12px;
background: var(--panel);
}
.res-kind.res-off { opacity: 0.45; }
.res-kind-head {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: 10px;
}
.res-kind-name {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg);
}
.res-kind .p2-cats { margin-top: 0; }
.res-kind .proc-summary { font-size: 10px; }
.res-empty { font-family: var(--font-mono); font-size: 10px; }
/* The find chips are .p2-cat, declared after .proc-muted / .proc-err at the same
specificity — so the colour needs two classes to win, the way .res-failed does. */
.p2-cat.proc-muted { color: var(--muted); }
.p2-cat.proc-err {
color: var(--danger);
border-color: color-mix(in srgb, var(--danger) 55%, transparent);
}
/* The found names: up to 200 rows, collapsed until asked for. */
.res-names summary {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
cursor: pointer;
}
.res-names summary:hover { color: var(--fg); }
.res-names .res-list {
margin-top: 6px;
flex: 0 1 auto;
max-height: 15rem;
}
.res-row .res-degree {
flex: 0 0 5rem;
text-align: right;
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
white-space: nowrap;
}
.res-row .res-degree b { color: var(--fg); font-weight: 500; }
/* The kind's last five runs. */
.res-recent { display: flex; flex-wrap: wrap; gap: 4px; }
.res-recent .res-running { color: var(--accent-link); border-color: var(--accent-dim); }
.res-recent .res-stopping { color: var(--gold); }
.res-recent .res-stopped { color: var(--muted); }
.res-recent .res-failed {
color: var(--danger);
border-color: color-mix(in srgb, var(--danger) 55%, transparent);
}
@media (max-width: 720px) {
.res-row .proc-path { display: none; }
.res-row .res-degree { flex-basis: 4rem; }
}
/* Error toast */
#structure-toast {
position: fixed;
top: 1rem;
left: 50%;
transform: translateX(-50%);
background: var(--panel-2);
border: 1px solid var(--border-2);
border-left: 4px solid var(--danger);
color: var(--fg);
font-size: 12px;
padding: 8px 14px;
border-radius: 4px;
max-width: 380px;
z-index: 200;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}
#structure-toast[hidden] { display: none; }
/* Capsule nodes */
.snode { cursor: grab; }
.snode:active { cursor: grabbing; }
.s-cap {
fill: #333333; /* grey — structural with no keyphrase in its subtree */
stroke: none;
}
.snode.active .s-cap {
fill: #142c4d; /* dark blue — a keyphrase is connected downstream */
}
.s-label {
fill: var(--fg);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
pointer-events: none;
user-select: none;
}
.s-port {
fill: var(--bg);
stroke: var(--accent);
stroke-width: 1.5;
}
.s-port-out { cursor: crosshair; }
.s-port-out:hover { fill: var(--accent); }
/* Section nodes: dark red, input-only (no output port) — the end nodes of
every structure chain. */
.snode.leaf .s-cap {
fill: #5a1a1a; /* dark red — section */
stroke: none;
}
.snode.leaf .s-port { stroke: var(--danger); }
.snode.leaf .s-port-out { display: none; }
/* Selected node */
.snode.selected .s-cap { stroke: #fff; stroke-width: 2; }
/* Processing-disabled (directly, or every parent chain passes a disabled node):
dimmed with a dashed outline. Selection stroke still wins. */
.snode.proc-off .s-cap { opacity: 0.35; }
.snode.proc-off:not(.selected) .s-cap {
stroke: #6b7280;
stroke-width: 1;
stroke-dasharray: 4 3;
}
.snode.proc-off .s-label { opacity: 0.5; }
.snode.proc-off .s-port { opacity: 0.4; }
/* Wires */
.s-wire {
fill: none;
stroke: #3a3a3a;
stroke-width: 1.5;
cursor: pointer;
}
.s-wire:hover { stroke: var(--muted); }
.s-wire.selected { stroke: var(--accent); stroke-width: 2; }
.s-temp-wire {
fill: none;
stroke: var(--accent);
stroke-width: 1.5;
stroke-dasharray: 4 4;
pointer-events: none;
}
/* Incident edges of the selected node — drawn above the nodes, clickable */
.s-wire-hl {
fill: none;
stroke: var(--accent);
stroke-width: 2;
cursor: pointer;
}
.s-wire-hl:hover { stroke: #fff; }
.s-wire-hl.selected {
stroke: #fff;
stroke-width: 2.5;
}
/* Marquee selection rectangle: shift-drag adds (blue), ctrl-drag subtracts (red) */
.marquee-rect {
fill: rgba(92, 158, 255, 0.08);
stroke: var(--accent);
stroke-width: 1;
stroke-dasharray: 4 3;
pointer-events: none;
vector-effect: non-scaling-stroke;
}
.marquee-rect.marquee-subtract {
fill: rgba(239, 68, 68, 0.08);
stroke: var(--danger);
}
.marquee-3d.marquee-subtract {
background: rgba(239, 68, 68, 0.08);
border-color: var(--danger);
}
/* Rotate gizmo ("r"): ring at the selection centroid; drag the ring to rotate */
#rotate-gizmo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 6;
pointer-events: none;
overflow: visible;
}
#rotate-gizmo[hidden] { display: none; }
#rotate-gizmo .rg-hit {
fill: none;
stroke: transparent;
stroke-width: 16;
pointer-events: stroke;
cursor: grab;
}
#rotate-gizmo .rg-hit:active { cursor: grabbing; }
#rotate-gizmo .rg-ring {
fill: none;
stroke-width: 1.5;
opacity: 0.75;
pointer-events: none;
transition: opacity 100ms, stroke-width 100ms;
}
/* Standard manipulator colors: x red, y green, z blue, viewport white */
#rotate-gizmo .rg-x { stroke: #e5484d; }
#rotate-gizmo .rg-y { stroke: #46a758; }
#rotate-gizmo .rg-z { stroke: #3e63dd; }
#rotate-gizmo .rg-view {
stroke: #d4d4d8;
stroke-dasharray: 4 3;
opacity: 0.6;
}
#rotate-gizmo .rg-ring.rg-hot {
opacity: 1;
stroke-width: 2.5;
stroke-dasharray: none;
}
#rotate-gizmo .rg-deg {
fill: var(--fg);
font-family: var(--font-mono);
font-size: 10px;
paint-order: stroke;
stroke: var(--canvas);
stroke-width: 3px;
}
/* Multi-select panel */
.multi-sel {
font-size: 12px;
color: var(--fg);
margin-bottom: 11px;
}
.multi-del-btn {
background: transparent;
border: 1px solid #dc2626;
color: var(--danger);
font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.05em;
padding: 5px 10px;
border-radius: var(--r-ctl);
cursor: pointer;
}
.multi-del-btn:hover { background: rgba(127, 29, 29, 0.3); border-color: var(--danger); }
/* Inline rename field, positioned over the node */
#structure-rename {
position: fixed;
display: none;
z-index: 50;
background: var(--panel-2);
border: 1px solid var(--accent);
color: var(--fg);
font-family: var(--font-ui);
font-weight: 500;
text-align: center;
border-radius: 17px;
outline: none;
padding: 0 0.5rem;
box-sizing: border-box;
}
/* ============================================================
Investigate — story panel (left sidebar)
============================================================ */
#story-panel {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
#story-panel[hidden], #sidebar-sections[hidden] { display: none; }
/* Story architecture tree — the expandable structure that dictates the
active story/section (and the gr_id sent to n8n). */
.story-arch {
flex: 0 1 auto;
max-height: 45%;
overflow-y: auto;
padding: 6px 0;
border-bottom: 1px solid var(--border);
}
.arch-row {
display: flex;
align-items: center;
gap: 5px;
padding: 3px 10px 3px 0;
cursor: pointer;
font-size: 12px;
border-left: 2px solid transparent;
}
.arch-row:hover { background: var(--panel-2); }
.arch-row.active { border-left-color: var(--accent); background: #16181c; }
.arch-row.arch-root .arch-name {
font-family: var(--font-serif);
font-size: 13px;
font-weight: 600;
color: var(--fg-bright);
}
.arch-caret {
width: 12px;
flex: 0 0 auto;
text-align: center;
font-size: 9px;
color: var(--muted);
transition: transform 120ms;
}
.arch-caret.collapsed { transform: rotate(-90deg); }
.arch-caret-empty { pointer-events: none; }
.arch-num {
font-family: var(--font-mono);
font-size: 9px;
color: var(--faint);
flex: 0 0 auto;
min-width: 10px;
text-align: right;
}
.arch-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--fg);
}
/* Sections lead: bold, slightly larger, bright, white bullet.
Intermediate structures (chapters) recede darker. */
.arch-row.arch-section .arch-name {
color: var(--fg-bright);
font-weight: 700;
font-size: 13px;
}
.arch-row:not(.arch-root):not(.arch-section) .arch-name { color: var(--muted); }
.arch-bullet {
flex: 0 0 auto;
color: #fff;
font-size: 12px;
line-height: 1;
}
.story-muted { color: var(--muted) !important; font-style: italic; }
.story-view-head { padding: 10px 12px 4px; }
.story-view-title {
font-family: var(--font-serif);
font-size: 16px;
font-weight: 600;
color: var(--fg-bright);
margin: 2px 0 0;
line-height: 1.25;
}
.story-sub-head {
padding: 8px 12px 2px;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-2);
}
/* investigate nodes tab: content of the current view */
.invn-scope {
padding: 8px 12px 6px;
border-bottom: 1px solid var(--border);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-2);
}
.invn-empty {
padding: 18px 12px;
text-align: center;
font-size: 11px;
color: var(--muted);
}
#inv-nodes .seed-list li { cursor: pointer; }
.story-grid-row {
margin-top: 6px;
font-family: var(--font-mono);
font-size: 9px;
color: var(--faint);
}
.story-sections {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 4px 0;
}
.story-section {
padding: 10px 12px;
border-left: 2px solid transparent;
cursor: pointer;
}
.story-section:hover { background: var(--panel-2); }
.story-section.active {
border-left-color: var(--accent);
background: #16181c;
}
.story-section-ch {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
margin-bottom: 3px;
}
.story-section-title {
font-family: var(--font-serif);
font-size: 14px;
font-weight: 600;
color: var(--text-2);
margin: 0 0 5px;
line-height: 1.3;
}
.story-section-text {
font-size: 12px;
line-height: 18px;
color: #e5e5e5;
margin: 0;
}
/* The description reads as a lead above the section's body text. */
.story-section-desc { color: #a1a1aa; }
.story-section-body {
margin-top: 7px;
white-space: pre-wrap; /* the stored text keeps its paragraph breaks */
}
.story-section-body.loading { color: var(--muted); font-style: italic; }
/* Entity badges inside the story prose — clickable, colors cycle per entity */
.ent-badge {
display: inline;
padding: 0 6px;
margin: 0 1px;
font-family: var(--font-ui);
font-size: 12px;
line-height: 14px;
border-radius: 10px;
color: #fff;
border: 1px solid transparent;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
transition: opacity 120ms;
}
.ent-badge:hover { opacity: 0.8; }
/* Story panel: story | views mode row + saved-views list */
#story-mode-row { padding: 8px 12px 2px; flex: 0 0 auto; }
#story-panel[hidden], #views-panel[hidden], #story-arch[hidden],
#story-sections[hidden], .story-nav[hidden] { display: none !important; }
#views-panel {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 8px 12px 12px;
}
.views-save-row { display: flex; gap: 6px; }
#view-name {
flex: 1 1 auto;
min-width: 0;
background: var(--bg);
border: 1px solid var(--border-2);
border-radius: var(--r-ctl);
color: var(--fg);
font-family: var(--font-ui);
font-size: 12px;
padding: 6px 8px;
}
#view-name:focus { outline: none; border-color: var(--border-3); }
#view-save, #view-import-btn {
background: var(--panel-2);
border: 1px solid var(--border-2);
border-radius: var(--r-ctl);
color: var(--text-2);
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
padding: 5px 12px;
cursor: pointer;
}
#view-save:hover, #view-import-btn:hover { background: var(--hover); color: var(--fg); }
#view-save:disabled { opacity: 0.4; cursor: default; }
#views-list { margin-top: 4px; }
.view-row {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
margin-top: 6px;
border: 1px solid var(--border);
border-radius: var(--r-ctl);
cursor: pointer;
transition: border-color 120ms, background 120ms;
}
.view-row:hover { border-color: var(--border-3); background: #16181c; }
.view-row-main {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.view-row-name {
font-size: 12px;
font-weight: 600;
color: var(--fg-bright);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.view-row-attach {
font-size: 10px;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.view-row-btn {
flex: 0 0 auto;
width: 22px;
height: 22px;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
color: var(--muted);
font-size: 12px;
line-height: 1;
cursor: pointer;
}
.view-row-btn:hover { color: var(--fg); border-color: var(--border-2); }
.view-row-del:hover { color: var(--danger); border-color: #7f1d1d; }
.views-io { margin-top: 12px; }
/* ---- Saved views / formats (newsfeed left rail; saved-list.js) ----------
One panel behind the Views and Formats tabs: a dense folder tree under the
fixed "default" level. Depth comes from --depth on each row. */
#saved-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#saved-panel[hidden] { display: none; }
#saved-search {
margin: 8px 12px 0;
background: var(--bg);
border: 1px solid var(--border-2);
border-radius: var(--r-ctl);
color: var(--fg);
font: 11px var(--font-ui);
padding: 5px 8px;
}
#saved-search:focus { outline: none; border-color: var(--border-3); }
#saved-hint { margin: 6px 12px 0; min-height: 15px; }
#saved-hint.sv-error { color: var(--danger); }
.sv-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 0 12px; }
.sv-row {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px 4px calc(10px + var(--depth, 0) * 12px);
border-left: 2px solid transparent;
font-size: 12px;
cursor: pointer;
}
.sv-row:hover { background: var(--panel-2); }
.sv-row:focus-visible { outline: 1px solid var(--border-3); outline-offset: -1px; }
.sv-row.selected { border-left-color: var(--accent); background: var(--panel-2); }
.sv-caret { flex: 0 0 auto; width: 10px; color: var(--muted); font-size: 9px; }
.sv-dot { flex: 0 0 auto; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: var(--accent); }
.sv-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sv-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--fg-bright);
}
.sv-folder .sv-name { font-weight: 600; color: var(--fg); }
.sv-default .sv-name { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); }
.sv-meta, .sv-count { font: 9px var(--font-mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-count { flex: 0 0 auto; color: var(--faint); }
.sv-more {
flex: 0 0 auto;
width: 20px;
height: 20px;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
color: var(--muted);
line-height: 1;
cursor: pointer;
opacity: 0;
}
.sv-row:hover .sv-more, .sv-row:focus-within .sv-more { opacity: 1; }
.sv-more:hover { color: var(--fg); border-color: var(--border-2); }
/* the shared dialog: a message, a checkbox row, a destructive button */
.sv-message { margin: 0 0 8px; color: var(--text-2); font: 12px/1.5 var(--font-ui); }
.library-dialog .sv-check { flex-direction: row; align-items: flex-start; gap: 9px; }
.library-dialog .sv-check input { width: auto; margin-top: 2px; }
.sv-check small { display: block; margin-top: 4px; color: var(--muted); font: 10px/1.4 var(--font-mono); }
.library-dialog button.sv-danger { color: var(--danger); border-color: var(--danger); }
.ctx-item.sv-danger { color: var(--danger); }
.ctx-item.sv-danger:hover:not(:disabled) { color: var(--danger); }
.sv-del:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
.sv-more:disabled { opacity: 0.3; cursor: default; }
.sv-row:hover .sv-more:disabled { opacity: 0.3; }
/* Layout rules (newsfeed): one chip per rule at the top of the Layout tab */
.lay-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.lay-chip {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 100%;
padding: 2px 3px 2px 8px;
background: var(--accent-dim);
border: 1px solid var(--border-2);
border-radius: 10px;
color: var(--fg);
font: 10px var(--font-mono);
}
.lay-chip.suspended { background: transparent; color: var(--muted); border-style: dashed; }
.lay-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lay-chip-x {
flex: 0 0 auto;
width: 16px;
height: 16px;
padding: 0;
background: transparent;
border: 0;
border-radius: 50%;
color: var(--text-2);
line-height: 1;
cursor: pointer;
}
.lay-chip-x:hover { background: var(--hover); color: var(--danger); }
.lay-chip-none { color: var(--muted); font: 10px var(--font-mono); }
/* The investigate Library: the same rows; its groups are flat, so they are a dropdown */
.library-groupbar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.library-groupbar select,
#library-filter {
flex: 1 1 auto;
min-width: 0;
width: 100%;
background: var(--bg);
border: 1px solid var(--border-2);
border-radius: var(--r-ctl);
color: var(--fg);
font: 11px var(--font-ui);
padding: 5px 8px;
}
.library-groupbar select:focus,
#library-filter:focus { outline: none; border-color: var(--border-3); }
.library-groupbar .sv-more { opacity: 1; width: 24px; height: 24px; border-color: var(--border-2); }
.library-groupbar .sv-more:disabled { opacity: 0.3; }
#library-group-new {
flex: 0 0 auto;
background: var(--panel-2);
border: 1px solid var(--border-2);
border-radius: var(--r-ctl);
color: var(--text-2);
font: 500 10px var(--font-ui);
padding: 5px 9px;
cursor: pointer;
}
#library-group-new:hover { background: var(--hover); color: var(--fg); }
#views-hint.sv-error { color: var(--danger); }
#views-list.sv-list { margin: 4px -12px 0; padding: 0; overflow: visible; }
.sv-dot-story { border-radius: 2px; background: var(--node-structure); }
.sv-dot-section { background: var(--node-section); }
.library-dialog-filter { display: flex; gap: 8px; }
.library-dialog-filter select { flex: 0 0 36%; width: auto; }
.story-nav {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 12px;
border-top: 1px solid var(--border);
}
.story-nav button {
width: 28px;
height: 24px;
background: var(--panel-2);
border: 1px solid var(--border-2);
border-radius: var(--r-ctl);
color: var(--text-2);
font-size: 12px;
line-height: 1;
cursor: pointer;
transition: background 120ms, color 120ms;
}
.story-nav button:hover { background: var(--hover); color: var(--fg); }
#story-pos {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
}
/* ============================================================
Investigate — url tab (ingest form + process monitor)
============================================================ */
/* The process right-tab pane (ingest form + monitor, single column). */
.proc-pane {
display: flex;
flex-direction: column;
}
.url-card-head {
padding: 8px 12px;
border-bottom: 1px solid var(--border);
border-top: 1px solid var(--border);
font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-2);
}
.url-src-tabs {
display: flex;
border-bottom: 1px solid var(--border);
}
.url-src-tab {
flex: 1;
padding: 8px 0 7px;
background: transparent;
border: 0;
color: var(--faint);
font-family: var(--font-ui);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: color 120ms;
}
.url-src-tab:hover { color: var(--text-2); }
.url-src-tab.active { color: #fff; }
#url-form {
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.url-field { display: grid; gap: 3px; }
.url-field[hidden] { display: none; }
.url-field label {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--fg);
}
.url-field input[type="text"],
.url-field input[type="url"],
.url-field input[type="number"],
.url-field select,
.url-field textarea {
width: 100%;
background: var(--bg);
border: 1px solid var(--border-2);
color: var(--fg);
font-family: var(--font-ui);
font-size: 12px;
padding: 7px 9px;
border-radius: var(--r-ctl);
outline: none;
transition: border-color 120ms;
}
.url-field input:focus,
.url-field select:focus,
.url-field textarea:focus { border-color: var(--border-3); }
.url-field textarea { resize: vertical; line-height: 1.4; }
.url-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.url-checks {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
}
.url-checks label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--text-2);
cursor: pointer;
}
.url-checks input[type="checkbox"]:disabled { opacity: 0.45; }
.url-checks-process {
padding-top: 8px;
border-top: 1px solid var(--border);
}
.url-submit {
width: 100%;
height: 34px;
background: var(--panel-2);
border: 1px solid var(--border-2);
border-radius: var(--r-ctl);
color: var(--fg);
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: background 120ms;
}
.url-submit:hover:not(:disabled) { background: var(--hover); }
.url-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.url-hint {
margin: 0;
font-size: 10px;
color: var(--muted);
line-height: 1.5;
}
.url-monitor-empty {
padding: 28px 12px;
text-align: center;
font-size: 11px;
color: var(--muted);
}
.url-run {
padding: 8px 12px;
border-bottom: 1px solid var(--border);
}
.url-run-head {
display: flex;
align-items: center;
gap: 7px;
}
.url-run-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex: 0 0 auto;
background: var(--muted);
}
.url-run-pending .url-run-dot { background: var(--warn); animation: proc-pulse 1s ease-in-out infinite; }
.url-run-ok .url-run-dot { background: var(--success); }
.url-run-error .url-run-dot { background: var(--danger); }
.url-run-title {
flex: 1;
font-size: 11px;
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.url-run-time {
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
}
.url-run-detail {
margin-top: 4px;
font-family: var(--font-mono);
font-size: 10px;
line-height: 1.5;
color: var(--text-2);
word-break: break-word;
}
.url-run-error .url-run-detail { color: #f0a5a5; }
.url-run[data-run] { cursor: pointer; }
.url-run-stopped .url-run-dot { background: var(--faint); }
.url-run-stop {
background: transparent;
border: 1px solid #7f1d1d;
border-radius: 10px;
color: var(--danger);
font-family: var(--font-ui);
font-size: 9px;
font-weight: 600;
padding: 1px 8px;
cursor: pointer;
flex: 0 0 auto;
}
.url-run-stop:hover { background: rgba(127, 29, 29, 0.3); }
.url-run-events {
margin-top: 6px;
border-top: 1px solid var(--border);
padding-top: 5px;
display: flex;
flex-direction: column;
gap: 3px;
}
.url-run-ev {
font-family: var(--font-mono);
font-size: 9px;
line-height: 1.5;
color: var(--text-2);
word-break: break-word;
}
.url-run-ev b { color: var(--fg-bright); font-weight: 600; }
.url-run-ev-ts { color: var(--faint); }
/* ============================================================
Investigate — structure right-tab (compact story tree editor)
============================================================ */
.stree-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-bottom: 1px solid var(--border);
}
.stree-bar-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-2);
}
.stree-bar button,
.stree-actions button {
background: var(--panel-2);
border: 1px solid var(--border-2);
border-radius: var(--r-ctl);
color: var(--text-2);
font-family: var(--font-ui);
font-size: 10px;
font-weight: 500;
padding: 3px 9px;
cursor: pointer;
transition: background 120ms, color 120ms;
}
.stree-bar button:hover,
.stree-actions button:hover { background: var(--hover); color: var(--fg); }
.stree-actions .stree-danger { color: var(--danger); border-color: #7f1d1d; }
.stree-actions .stree-danger:hover { background: rgba(127, 29, 29, 0.3); color: var(--danger); }
#stree {
max-height: 40vh;
overflow-y: auto;
padding: 4px 0;
border-bottom: 1px solid var(--border);
}
.stree-empty {
padding: 18px 12px;
text-align: center;
font-size: 11px;
color: var(--muted);
}
.stree-row {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
cursor: pointer;
font-size: 12px;
border-left: 2px solid transparent;
}
.stree-row:hover { background: var(--panel-2); }
.stree-row.selected { border-left-color: var(--accent); background: #16181c; }
.stree-row .stree-dot {
width: 7px;
height: 7px;
border-radius: 2px;
flex: 0 0 auto;
background: var(--node-structure);
}
.stree-row.stree-section .stree-dot {
border-radius: 50%;
background: var(--node-section);
}
.stree-row.stree-root { font-weight: 600; }
.stree-row .stree-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stree-row .stree-kind {
font-size: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--faint);
}
#stree-editor { padding: 10px 12px 14px; }
.stree-editor-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.stree-grid {
font-family: var(--font-mono);
font-size: 9px;
color: var(--muted);
}
.stree-actions {
display: flex;
gap: 6px;
margin-top: 10px;
}
/* Shared context-menu chrome (mirrors #ctx-menu) for the structure menus */
.ctx-menu {
position: fixed;
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: var(--r-ctl);
padding: 3px 0;
min-width: 150px;
z-index: 100;
display: flex;
flex-direction: column;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.ctx-menu[hidden] { display: none; }
/* ============================================================
Summary tab (newsfeed right rail) — computed digest + optional
local-LLM narration. Tokens only. Narration is editorial prose
(serif); everything computed reads as data (mono / UI).
============================================================ */
#summary-panel { padding: 10px 12px 18px; font-size: 12px; }
.sum-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.sum-bar select {
flex: 1 1 auto; min-width: 0; height: 24px; padding: 0 6px;
background: var(--bg); color: var(--fg); border: 1px solid var(--border-2);
border-radius: var(--r-ctl); font-family: var(--font-mono); font-size: 10px;
}
.sum-btn {
flex: 0 0 auto; height: 24px; padding: 0 10px;
background: var(--panel-2); color: var(--fg); border: 1px solid var(--border-2);
border-radius: var(--r-ctl); font-family: var(--font-ui); font-size: 10px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background 120ms;
}
.sum-btn:hover { background: var(--hover); }
.sum-btn-ghost { background: transparent; color: var(--muted); }
.sum-btn-ghost:hover { color: var(--fg); background: var(--panel-2); }
.sum-btn[hidden], .sum-notice[hidden], .sum-rating[hidden],
#summary-panel section[hidden], #sum-empty[hidden] { display: none; }
.sum-gate {
flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
background: var(--faint);
}
.sum-gate-ok { background: var(--success); }
.sum-gate-held { background: var(--warn); }
.sum-head {
margin: 14px 0 6px; font-size: 9px; font-weight: 600; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--muted);
}
.sum-muted { color: var(--muted); font-size: 10px; }
.sum-meta {
margin-top: 6px; font-family: var(--font-mono); font-size: 9px;
color: var(--muted); line-height: 1.5;
}
.sum-notice {
margin-bottom: 8px; padding: 7px 9px; border: 1px solid var(--border-2);
border-radius: var(--r-ctl); background: var(--panel-2); color: var(--text-2);
font-size: 11px; line-height: 1.45;
}
.sum-notice > div + div { margin-top: 3px; }
.sum-notice .sum-btn { margin: 7px 0 5px; }
.sum-notice-head {
font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warn);
}
.sum-notice-warn { border-color: var(--warn); }
.sum-notice-err { border-color: var(--danger); color: var(--fg); }
.sum-prose { font-family: var(--font-serif); font-size: 13px; line-height: 1.6; color: var(--fg); }
.sum-prose p { margin: 0 0 9px; }
.sum-stale .sum-prose { color: var(--text-2); }
.sum-caret {
display: inline-block; width: 6px; height: 12px; vertical-align: -1px;
background: var(--accent); animation: sum-blink 1s steps(2, start) infinite;
}
@keyframes sum-blink { to { visibility: hidden; } }
/* [[n:ID]] — a pill OUTLINED in the node type's own color (`--sum-c` = LABEL_COLORS, the source
the sentence-partial pills use): an entity is entity blue. Several type colors are very dark
(#193A5D on #09090B), so the outline is lifted toward --fg to stay legible; the hue is the
node's. Never an image: a picture inside running text breaks the line. Off scene: dotted. */
.sum-badge {
display: inline-block; vertical-align: baseline;
max-width: 100%; margin: 0 1px; padding: 0 7px;
font-family: var(--font-ui); font-size: 10px; font-weight: 500; line-height: 15px; color: var(--fg);
background: transparent;
border: 1px solid color-mix(in srgb, var(--sum-c, var(--border-3)) 62%, var(--fg));
border-radius: 10px; cursor: pointer; transition: background 120ms, color 120ms;
}
.sum-badge:hover { background: color-mix(in srgb, var(--sum-c, var(--border-3)) 55%, transparent); color: var(--fg-bright); }
.sum-badge-off { border-style: dotted; color: var(--text-2); }
/* [[a:N]]…[[/a]] — the clause itself IS the active: a link to the action / relationship /
exchange node. No underline: the rounded bar beside the clause carries the type color. */
.sum-active { color: inherit; text-decoration: none; cursor: pointer; }
.sum-active:hover { color: var(--fg-bright); }
/* A sentence partial. Its bar is the node tooltip's (`#tooltip::before`): 5px wide, fully
rounded, inset top and bottom, in the node's own color (`--sum-bar` = nodeColor(kind), the
same call that sets the tooltip's --node-c) — amber action, cyan relationship, green exchange. */
.sum-partial { position: relative; padding-left: 14px; }
.sum-partial::before {
content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 5px;
border-radius: 999px; background: var(--sum-bar, var(--accent));
}
/* [F#] — citation, links the source */
.sum-cite {
display: inline-block; margin: 0 1px; padding: 0 3px; vertical-align: super;
font-family: var(--font-mono); font-size: 8px; line-height: 11px;
color: var(--accent-link); border: 1px solid var(--accent-dim); border-radius: var(--r-sm);
text-decoration: none;
}
a.sum-cite:hover { background: var(--accent-dim); color: var(--fg-bright); }
.sum-cite-bare { color: var(--muted); border-color: var(--border-2); }
.sum-rating { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.sum-rate {
width: 20px; height: 18px; padding: 0; background: transparent; color: var(--muted);
border: 1px solid var(--border-2); border-radius: var(--r-sm);
font-family: var(--font-mono); font-size: 9px; cursor: pointer;
}
.sum-rate:hover { color: var(--fg); border-color: var(--border-3); }
.sum-rate.active { background: var(--accent-dim); color: var(--fg-bright); border-color: var(--accent); }
.sum-source {
display: flex; align-items: center; gap: 8px; padding: 5px 0;
border-top: 1px solid var(--border); color: var(--fg); text-decoration: none;
}
.sum-source:hover .sum-source-title { color: var(--accent-link); }
.sum-source img { flex: 0 0 auto; width: 38px; height: 28px; object-fit: cover; border-radius: var(--r-sm); }
.sum-source-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sum-source-title { font-size: 11px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum-source-refs { flex: 0 0 auto; font-family: var(--font-mono); font-size: 9px; color: var(--muted); }
.sum-viz-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.sum-chip {
flex: 0 0 auto; padding: 2px 9px; background: var(--panel-2); color: var(--fg);
border: 1px solid var(--border-2); border-radius: 20px;
font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.03em; cursor: pointer;
}
.sum-chip:hover { background: var(--hover); }
.sum-chip.active { border-color: var(--accent); color: var(--fg-bright); }
.sum-default-view {
display: inline-block; margin-top: 2px; font-size: 10px; color: var(--accent-link); text-decoration: underline;
}
.sum-default-view:hover { color: var(--fg-bright); }
.sum-default-view.active { color: var(--muted); text-decoration: none; cursor: default; }
/* Digest: no rules breaking up the text. Featured entities are set apart by space; each
sentence partial by its rounded bar. */
.sum-group { padding: 8px 0 6px; }
.sum-group-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.sum-count { margin-left: auto; font-family: var(--font-mono); font-size: 9px; font-weight: 400; color: var(--muted); }
.sum-group ul { list-style: none; margin: 0; padding: 0; }
.sum-group li { margin: 5px 0; font-size: 11px; line-height: 1.7; color: var(--text-2); }
/* Activity: attended events and frameworks as cards, the event itself as the featured entity.
A plain rounded box (no accent edge), five unlabelled lines: name, date, location, involved, links. */
.sum-card {
margin-bottom: 8px; padding: 9px 10px; background: var(--panel-2);
border: 1px solid var(--border); border-radius: var(--r-ctl);
}
.sum-card-name { line-height: 1.7; }
.sum-card-date { margin-top: 5px; font-family: var(--font-mono); font-size: 10px; color: var(--text-2); }
.sum-card-upcoming { color: var(--accent-link); }
.sum-card-ongoing { color: var(--success); }
.sum-card-where { margin-top: 2px; font-size: 11px; color: var(--text-2); }
.sum-card-involved { margin-top: 6px; line-height: 1.9; }
.sum-card-links { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 6px; font-size: 10px; }
.sum-card-links a { color: var(--accent-link); text-decoration: none; overflow-wrap: anywhere; }
.sum-card-links a:hover { text-decoration: underline; }
.sum-more {
margin-top: 4px; padding: 0; background: none; border: 0; cursor: pointer;
font-family: var(--font-mono); font-size: 9px; color: var(--accent-link);
}
.sum-more:hover { color: var(--fg-bright); }
/* Generate summary: the brief | expanded switch, "expand", and the subject badges after the text. */
.sum-modes { margin-bottom: 8px; }
.sum-modes .seg-btn:disabled { opacity: 0.45; cursor: default; }
.sum-expand { display: block; margin: 2px 0 4px; }
.sum-expand[hidden] { display: none; }
.sum-subject-row { display: flex; flex-wrap: wrap; gap: 4px; }
.sum-subject {
display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
background: transparent; color: var(--text-2);
border: 1px solid var(--border-2); border-radius: 20px;
font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.03em; cursor: pointer;
transition: background 120ms, color 120ms, border-color 120ms;
}
.sum-subject:hover:not(:disabled) { background: var(--panel-2); color: var(--fg); border-color: var(--border-3); }
.sum-subject.active { border-color: var(--accent); color: var(--fg-bright); }
.sum-subject:disabled { opacity: 0.35; cursor: default; }
.sum-subject-n { font-family: var(--font-mono); font-size: 9px; color: var(--muted); }
/* ---- Blog tab (investigate right rail): frame export ---------------------- */
.blog-body { display: grid; gap: 8px; padding: 10px 12px 14px; font-size: 12px; }
.blog-kv { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.blog-kv span {
flex: 0 0 76px; font-size: 9px; font-weight: 600; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--muted);
}
.blog-kv b { font-weight: 500; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#blog-export { justify-self: start; }
.blog-status { min-height: 14px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); line-height: 1.4; }
.blog-status-ok { color: var(--success); }
.blog-status-err { color: var(--danger); }
.blog-frame { display: grid; gap: 2px; padding: 6px 0; border-top: 1px solid var(--border); }
.blog-frame:first-child { border-top: 0; }
.blog-frame-id { font-family: var(--font-mono); font-size: 10px; color: var(--accent); }
.blog-frame-title { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blog-frame-meta { font-family: var(--font-mono); font-size: 9px; color: var(--muted); }
/* ---- Reader page (frame replay): the canvas alone, everything else gone -------- */
body.reader { height: 100vh; overflow: hidden; }
body.reader > header, body.reader #sidebar, body.reader #right-panel, body.reader #researcher-workspace,
body.reader #view-modes, body.reader #explore-toolbar, body.reader #stage-tools, body.reader #xform-tools,
body.reader #search-panel, body.reader #filter-ctl, body.reader #timeline-strip, body.reader #dropped-nodes,
body.reader #graph-loading-status, body.reader #ctx-menu, body.reader #explore-bg-menu,
body.reader #structure-toolbar, body.reader #structure-hint, body.reader .rail-resize,
body.reader #axis-gizmo, body.reader #stage-info, body.reader #rail-toggle-left, body.reader #rail-toggle-right,
body.reader #hierarchy-status, body.reader #scene-initial-loader { display: none !important; }
body.reader main { grid-template-columns: minmax(0, 1fr); height: 100vh; }
/* Embedded, the page behind decides the colour: the reader paints nothing but the scene. */
html:has(body.reader), body.reader, body.reader main, body.reader #canvas { background: transparent; }
body.reader #canvas { width: 100%; height: 100%; }
#reader-hud { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 3px 6px; font: 11px var(--font-ui); color: var(--muted); pointer-events: none; }
#reader-hud a { pointer-events: auto; color: var(--muted); text-decoration: none; border: 0; padding: 2px 4px; font-size: 14px; line-height: 1; background: transparent; }
#reader-hud a:hover { color: var(--fg); }