/* Story Graph — scoped under .sg-root so it can live standalone or inside Atlas.
   Colors map onto the BENDYpost Atlas instrument palette (dark + light themes). */
.sg-root {
  color-scheme: inherit;
  --bg: var(--surface-1, #0c0c0b);
  --bg-raise: var(--surface-3, #1c1c1a);
  --bg-rail: var(--surface-2, #141413);
  --line: var(--border, #2a2a27);
  --text: var(--text-primary, #e8e6e0);
  --dim: var(--text-muted, #7a7970);
  --accent: var(--part-head, #c4a0b4);
  --playhead: var(--part-head, #c4a0b4);
  --halo: var(--surface-1, #0c0c0b);
  --lane-label-w: 150px;
  font: 12px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--text);
  display: flex; flex-direction: column; overflow: hidden;
  height: 100%; min-height: 0;
}
/* standalone page shell (experiments/story-graph/index.html uses body as root) */
body.sg-root-page { height: 100vh; margin: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-1, #0c0c0b); color: var(--text-primary, #e8e6e0); }
body.sg-root-page .sg-root { flex: 1; }
.sg-root button, .sg-root select, .sg-root input {
  font: inherit; color: var(--text); background: var(--bg-raise);
  border: 1px solid var(--line); border-radius: 3px; padding: 4px 9px;
}
.sg-root button { cursor: pointer; }
.sg-root button:hover { border-color: var(--accent); }
.sg-root button.on { background: var(--accent); color: var(--surface-1, #0c0c0b); border-color: var(--accent); font-weight: 600; }
.sg-root a { color: var(--accent); }

.sg-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg-rail);
  flex: 0 0 auto;
}
.sg-brand { display: flex; align-items: baseline; gap: 8px; }
.sg-title { font-size: 15px; font-weight: 700; letter-spacing: .3px; }
.sg-lab { font-size: 10px; letter-spacing: 1.5px; color: var(--dim); border: 1px solid var(--line); padding: 1px 5px; border-radius: 4px; }
.sg-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sg-axis-toggle button, .sg-zoom button { border-radius: 0; }
.sg-axis-toggle button:first-child { border-radius: 6px 0 0 6px; }
.sg-axis-toggle button:last-child { border-radius: 0 6px 6px 0; }
.sg-zoom button:first-child { border-radius: 6px 0 0 6px; }
.sg-zoom button:last-child { border-radius: 0 6px 6px 0; }
#zoomLabel { min-width: 38px; text-align: center; color: var(--dim); display: inline-block; }
#tagFilter { width: 170px; }

.sg-body { flex: 1; display: flex; min-height: 0; }

/* Left rail */
.sg-rail {
  width: 220px; flex: 0 0 auto; overflow-y: auto;
  background: var(--bg-rail); border-right: 1px solid var(--line); padding: 10px 10px 40px;
}
.sg-cat { margin-bottom: 14px; }
.sg-cat-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim);
  cursor: pointer; padding: 3px 2px; user-select: none;
}
.sg-cat-head:hover { color: var(--text); }
.sg-lane-opt {
  display: flex; align-items: center; gap: 7px; padding: 2.5px 2px 2.5px 12px;
  cursor: pointer; border-radius: 4px; user-select: none;
}
.sg-lane-opt:hover { background: var(--bg-raise); }
.sg-lane-opt.off { opacity: .38; }
.sg-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.sg-lane-count { margin-left: auto; color: var(--dim); font-size: 11px; }

/* Stage */
.sg-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sg-minimap { height: 34px; border-bottom: 1px solid var(--line); position: relative; background: var(--bg-rail); flex: 0 0 auto; cursor: crosshair; }
.sg-minimap svg { display: block; width: 100%; height: 100%; }
.sg-minimap .viewbox { position: absolute; top: 2px; bottom: 2px; border: 1px solid var(--accent); background: rgba(126,167,255,.08); border-radius: 3px; pointer-events: none; }
.sg-stage { flex: 1; overflow: auto; position: relative; cursor: grab; }
.sg-stage.dragging { cursor: grabbing; }
.sg-stage svg { display: block; }

/* left-edge label overlay — sticky at the scroll edge, no JS lag */
.sg-edge-labels { position: sticky; left: 0; width: 0; height: 0; z-index: 5; pointer-events: none; }
.sg-edge {
  position: absolute; left: 6px; display: flex; align-items: center; gap: 5px;
  font: 700 9px/1 system-ui, sans-serif; color: #f4f6fa; white-space: nowrap;
  text-shadow: 0 0 3px #0d1015, 0 0 3px #0d1015, 0 1px 2px #0d1015;
}
.sg-edge i { width: 7px; height: 4px; border-radius: 1px; display: inline-block; flex: 0 0 auto; }
.sg-edge.sg-selectable { pointer-events: auto; }

/* light-theme legibility: darker mid-tone labels, boost faded signal colors */
[data-theme="light"] .sg-root {
  --dim: var(--text-secondary, #3d3a35);
  --halo: #f4f1ea;
}
[data-theme="light"] .sg-stage svg { filter: saturate(1.35) contrast(1.12); }
[data-theme="light"] .sg-edge { text-shadow: 0 0 3px var(--halo), 0 0 3px var(--halo), 0 1px 2px var(--halo); }
[data-theme="light"] .sg-edge span { color: var(--text); }

.lane-row-line { stroke: var(--line); stroke-width: 1; }
.lane-label { font-size: 11px; fill: var(--dim); }
.tick { stroke: var(--line); stroke-width: 1; }
.tick-label { font-size: 10px; fill: #6b7384; }
.act-band { fill: rgba(126,167,255,.07); }
.act-label { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; fill: var(--accent); text-transform: uppercase; }
.motif-arc { fill: none; stroke-width: 1.6; opacity: .85; }
.motif-arc.open { stroke-dasharray: 5 4; }
.playhead { stroke: var(--playhead); stroke-width: 2; cursor: ew-resize; }
.playhead-hit { stroke: transparent; stroke-width: 14; cursor: ew-resize; }
.sg-item { cursor: pointer; }
.sg-item:hover { filter: brightness(1.3); }
.sg-selectable { cursor: pointer; }
.sg-selectable:hover { filter: brightness(1.45); }
path.sg-selectable:hover, line.sg-selectable:hover { opacity: 0.9; }
.sg-selchip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--playhead); border-radius: 6px; padding: 0 2px; color: var(--playhead); font-size: 11px; }
.sg-selchip[hidden] { display: none; }
.sg-selchip button { border: 0; background: transparent; color: inherit; padding: 2px 6px; }
.sg-selchip #selLabel { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-error { padding: 40px; color: var(--dim); }

/* Slice panel */
.sg-slice {
  width: 300px; flex: 0 0 auto; display: flex; flex-direction: column;
  border-left: 1px solid var(--line); background: var(--bg-rail); min-height: 0;
}
.sg-slice > header { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.sg-slice-title { font-weight: 700; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; }
.sg-slice-pos { color: var(--playhead); font-variant-numeric: tabular-nums; margin-top: 2px; }
.sg-slice-list { flex: 1; overflow-y: auto; padding: 8px 10px 40px; }
.sg-hint { color: var(--dim); }
.sg-slice-group { margin-bottom: 12px; }
.sg-slice-group h4 { margin: 0 0 4px; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); }
.sg-slice-item {
  padding: 5px 8px; border-radius: 5px; margin-bottom: 3px; cursor: pointer;
  background: var(--bg-raise); border: 1px solid var(--line);
}
.sg-slice-item:hover { border-color: var(--accent); }
.sg-slice-item .sub { color: var(--dim); font-size: 11.5px; }
.sg-scene-card { background: var(--bg-raise); border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; margin-bottom: 10px; }
.sg-scene-card h5 { margin: 0 0 4px; font-size: 12px; }
.sg-scene-card .sc-text { color: var(--dim); font-size: 11.5px; max-height: 130px; overflow-y: auto; white-space: pre-wrap; }
.sg-scene-card .sc-meta { font-size: 11px; color: var(--dim); margin-top: 4px; }

/* fill the Atlas .view container when embedded */
.view:has(> .sg-root) { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.view > .sg-root { flex: 1; }