/* Spiral Nexus — styling follows the Spiral product design system: a paper-white shell on a warm
   grey canvas, hairline rules instead of shadows, 11–13px type, lime for "this is where you are",
   and a per-type colour for every glyph in the Catalog. One screen, four columns. */

:root {
  color-scheme: light;
  --ink: #101010;
  --ink-soft: #303030;
  --muted: #6f6f6f;
  --quiet: #737373;
  --line: #dededb;
  --line-soft: #ececea;
  --paper: #ffffff;
  --canvas: #f7f7f5;
  --panel: #fbfbfa;
  --accent: #cee562;
  --accent-strong: #a7c02e;
  --accent-wash: #f2f8d6;
  --blue: #5971fd;
  --blue-wash: #edf0ff;
  --cyan: #2cb9d1;
  --orange: #fb863d;
  --orange-wash: #fff1e8;
  --pink: #eeb3e1;
  --red: #cc3333;
  --red-wash: #fbeaea;
  --green: #668200;
  --violet: #6d4fd1;
  --mono: "SFMono-Regular", "SF Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: Geist, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  /* aliases the component rules below were written against */
  --bg: var(--paper); --surf: var(--panel); --hover: var(--canvas); --sel: var(--accent-wash);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  overflow: hidden; background: var(--canvas); color: var(--ink);
  font-family: var(--sans); font-size: 13px; -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { color: inherit; font-family: inherit; }
button { border: 0; }
.mono { font-family: var(--mono); font-size: 11px; }
.grow { flex: 1; }
.sl { color: var(--quiet); font-size: 11.5px; }
.sl b, .hint b { color: var(--ink-soft); font-weight: 600; }

/* ===================================================================== shell */

.app-shell {
  width: 100%; height: 100%; display: grid;
  grid-template-rows: 48px 35px minmax(0, 1fr);
  background: var(--paper);
}

.topbar {
  z-index: 20; display: grid; grid-template-columns: 258px minmax(0, 1fr);
  align-items: center; border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.97);
}
/* centred, not baseline-aligned: both words are the same size, so centring the row already lines
   their baselines up — and baseline alignment would drag the whole block off the topbar's centre. */
.brand-block { height: 100%; display: flex; align-items: center; gap: 6px; padding: 0 13px;
               border-right: 1px solid var(--line); }
.brand-block img { width: 19px; height: 19px; margin-right: 3px; }
/* one wordmark, two weights: the product name is the same size and simply not bold */
.brand-name, .brand-product { font-size: 17px; letter-spacing: -0.03em; }
.brand-name { font-weight: 520; }
.brand-product { color: var(--muted); font-weight: 400; }
.shell-topbar { height: 100%; display: flex; align-items: center; gap: 8px; padding: 0 13px; }
.topbar-spacer { flex: 1; }
.top-status { display: flex; align-items: center; gap: 7px; margin-left: 4px;
              color: var(--muted); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.engine-dot { width: 8px; height: 8px; border-radius: 50%; background: #84a00c; }
.engine-dot.err { background: var(--red); }

.version-button {
  height: 26px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper);
  color: var(--ink-soft); font-family: var(--mono); font-size: 10px; cursor: pointer; white-space: nowrap;
}
.version-button:hover { border-color: #bdbdb8; background: var(--canvas); }
.version-button.on { border-color: #aebd55; background: var(--accent-wash); color: #46510f; }
.icon-button {
  width: 24px; height: 24px; margin-left: auto; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--muted); cursor: pointer; font-size: 13px;
}
.icon-button:hover { border-color: var(--line); background: var(--canvas); color: var(--ink); }
.icon-button svg { width: 14px; height: 14px; display: block; }

.workspace-tabs {
  z-index: 18; display: grid; grid-template-columns: 258px 226px minmax(0, 1fr);
  border-bottom: 1px solid var(--line); background: #f8f8f6;
}
.catalog-tab-head { display: flex; align-items: center; gap: 6px; padding: 0 13px;
                    border-right: 1px solid var(--line); color: var(--quiet); font-size: 11px; }
.catalog-tab-head strong { color: var(--ink-soft); font-weight: 600; }
.journal-tab-head span { margin-left: auto; color: var(--quiet); font-family: var(--mono); font-size: 10px; }

.open-tabs { min-width: 0; display: flex; align-items: stretch; overflow: hidden; }
.tabs-empty { align-self: center; padding: 0 12px; color: var(--quiet); font-size: 11px; }
.open-tab {
  min-width: 0; max-width: 220px; display: flex; align-items: center; gap: 6px; padding: 0 10px;
  border-right: 1px solid var(--line); border-bottom: 2px solid transparent;
  background: transparent; color: var(--muted); font-size: 11px; cursor: pointer;
}
.open-tab:hover { background: var(--paper); color: var(--ink); }
.open-tab.is-active { border-bottom-color: var(--accent-strong); background: var(--paper); color: var(--ink); }
.open-tab .tree-icon { width: 12px; height: 12px; flex-basis: 12px; font-size: 6px; }
.open-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-close { margin-left: auto; color: #a1a19c; font-size: 11px; }
.tab-close:hover { color: var(--ink); }

.new-tab { width: 30px; flex: 0 0 30px; display: grid; place-items: center;
           border-right: 1px solid var(--line); background: transparent; color: var(--quiet);
           cursor: pointer; font-size: 12px; }
.new-tab:hover { background: var(--paper); color: var(--ink); }
.new-tab-menu { position: absolute; z-index: 70; top: 33px; left: 492px; width: 300px;
                border: 1px solid #cfcfca; border-radius: 9px; background: var(--paper);
                box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); padding: 5px; }
.new-tab-menu[hidden] { display: none; }
.new-tab-option { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
                  padding: 7px 8px; border-radius: 7px; background: none; cursor: pointer; }
.new-tab-option:hover { background: var(--canvas); }
.new-tab-option > span:last-child { min-width: 0; flex: 1; }
.new-tab-option strong, .new-tab-option em { display: block; overflow: hidden;
                     text-overflow: ellipsis; white-space: nowrap; }
.new-tab-option strong { font-size: 11.5px; font-weight: 570; color: var(--ink); }
.new-tab-option em { margin-top: 1px; font-style: normal; font-size: 10px; color: var(--quiet); }
.new-tab-menu { max-height: 60vh; overflow: auto; scrollbar-width: thin; }
.menu-back { background: none; color: var(--muted); cursor: pointer; font-size: 12px;
             line-height: 1; padding: 0 3px; }
.menu-back:hover { color: var(--ink); }
.menu-empty { padding: 8px 10px 12px; color: var(--quiet); font-size: 11.5px; }
.workspace-tabs { position: relative; }

.app-grid { min-height: 0; display: grid; grid-template-columns: 258px 226px minmax(0, 1fr); }

.sidebar, .journal-pane, .work-pane { min-width: 0; min-height: 0; }

/* ===================================================================== catalog */

.sidebar { position: relative; display: flex; flex-direction: column; overflow: hidden;
           border-right: 1px solid var(--line); background: var(--panel); }
.tree-scroll { min-height: 0; flex: 1; overflow: auto; padding: 10px 8px 18px; scrollbar-width: thin; }
.rail-empty { padding: 14px 10px; color: var(--quiet); font-size: 11px; line-height: 1.6; }
.rail-empty b { color: var(--ink-soft); }
.sidebar-footer { display: flex; gap: 12px; padding: 9px 13px; border-top: 1px solid var(--line);
                  background: var(--paper); }
.foot-link { color: var(--quiet); font-size: 11px; font-weight: 560; text-decoration: none; }
.foot-link:hover { color: var(--ink); }

.tree-row {
  position: relative; min-height: 27px; display: flex; align-items: center; gap: 7px;
  margin: 1px 0; padding: 4px 8px; border-radius: 5px; color: var(--ink-soft); cursor: default;
}
.tree-row.depth-1 { padding-left: 20px; }
.tree-row.depth-2 { padding-left: 50px; }
.tree-row.atlas-row, .tree-row[data-ns] { cursor: pointer; }
.tree-row.atlas-row:hover, .tree-row[data-ns]:hover { background: var(--canvas); }
.tree-row.emphasis { background: var(--accent-wash); }
.chevron { width: 8px; flex: none; color: var(--quiet); font-size: 11px; text-align: center; }
.tree-row .chevron[data-fold] { cursor: pointer; }
.tree-row .chevron[data-fold]:hover { color: var(--ink); }
.tree-icon {
  width: 15px; height: 15px; display: grid; flex: 0 0 15px; place-items: center;
  border: 1.25px solid currentColor; border-radius: 3px; color: var(--blue);
  font-family: var(--mono); font-size: 9px; font-weight: 600; line-height: 1;
  letter-spacing: 0; text-transform: uppercase;
}
/* the glyph sits on the box's own baseline-free centre; a 1px nudge stops it reading low */
.tree-icon { padding-bottom: 0.5px; }
.tree-icon.namespace { border-color: #9b9b95; color: #777771; }
.tree-icon.location { color: var(--orange); }
.tree-icon.table { color: var(--blue); }
.tree-icon.dataset { color: var(--cyan); }
.tree-icon.view { color: #8b52c9; }
.tree-icon.index { color: #ba7b00; }
.tree-icon.investigation { color: var(--green); }
.tree-icon.enrichment { color: #d47ac0; }
.tree-name { min-width: 0; overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
.tree-meta { color: var(--quiet); font-family: var(--mono); font-size: 10px; }
.layer-row { color: var(--muted); }
/* always visible, quietly: it is the only way into an atlas's configuration, so hiding it until
   hover would hide the feature. */
.row-action { flex: none; padding: 1px 7px; border: 1px solid transparent; border-radius: 5px;
              background: transparent; color: #b0b0aa; font-size: 9.5px; cursor: pointer; }
.tree-row:hover .row-action { border-color: var(--line); background: var(--paper); color: var(--muted); }
.row-action:hover { border-color: var(--ink); color: var(--ink); }

/* ===================================================================== journal */

.journal-pane { position: relative; display: flex; flex-direction: column;
                border-right: 1px solid var(--line); background: var(--panel); }
.journal-toolbar { display: flex; align-items: center; gap: 4px; padding: 7px 8px;
                   border-bottom: 1px solid var(--line-soft); background: #fdfdfc; }
.journal-toolbar[hidden] { display: none; }
.journal-toolbar .version-button { height: 22px; padding: 0 6px; font-size: 9.5px; }
.journal-toolbar #jbranch { flex: 1; min-width: 0; overflow: hidden; }
.journal-toolbar #jbranch .caret { margin-left: auto; }
.branch-mark { position: relative; width: 10px; height: 10px; flex: none; display: inline-block; }
.branch-mark::before { position: absolute; top: 1px; bottom: 1px; left: 2px; width: 1px;
                       background: currentColor; content: ""; }
.branch-mark::after { position: absolute; top: 1px; left: 2px; width: 6px; height: 5px;
                      border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
                      border-radius: 0 0 5px; content: ""; }

.branch-menu { position: absolute; z-index: 60; top: 36px; left: 6px; right: 6px;
               border: 1px solid #cfcfca; border-radius: 8px; background: var(--paper);
               box-shadow: 0 12px 32px rgba(0, 0, 0, 0.13); padding: 5px; }
.branch-menu[hidden] { display: none; }
.branch-item { display: flex; align-items: center; gap: 6px; padding: 6px 7px; border-radius: 6px;
               cursor: pointer; font-size: 11px; color: var(--ink-soft); }
.branch-item:hover { background: var(--canvas); }
.branch-item.on { background: var(--accent-wash); }
.bi-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-meta { flex: none; color: var(--quiet); font-family: var(--mono); font-size: 9.5px; }
.bi-del { flex: none; background: none; color: #a1a19c; cursor: pointer; font-size: 10px; }
.bi-del:hover { color: var(--red); }

.menu-h { display: flex; align-items: center; gap: 5px; padding: 5px 8px 7px; color: var(--quiet);
          font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.newbranch { padding: 9px 9px 10px; border-bottom: 1px solid var(--line-soft); background: var(--accent-wash); }
.newbranch[hidden] { display: none; }
.nb-h { color: #4d590e; font-size: 10px; line-height: 1.5; margin-bottom: 6px; }
.nb-h b { font-family: var(--mono); }
.nb-row { display: flex; gap: 5px; }
.nb-row input { min-width: 0; flex: 1; padding: 4px 7px; border: 1px solid #cbd88f; border-radius: 6px;
                background: var(--paper); font-size: 11px; }
.nb-row input:focus { outline: none; border-color: var(--accent-strong); }

.journal-scroll { position: relative; min-height: 0; flex: 1; overflow: auto;
                  padding: 8px 8px 14px; scrollbar-width: thin; }
.journal-scroll::before { content: ""; position: absolute; top: 14px; bottom: 16px; left: 17px;
                          width: 1px; background: var(--line); }
.journal-empty-center { height: 100%; display: flex; align-items: center; justify-content: center;
                        padding: 0 24px; color: var(--quiet); font-size: 11px; line-height: 1.6;
                        text-align: center; }
.journal-row {
  position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto;
  gap: 1px 7px; align-items: start; padding: 6px 6px 6px 2px; border-radius: 7px; cursor: pointer;
}
.journal-row:hover { background: var(--canvas); }
.journal-row.is-head { background: var(--accent-wash); }
.journal-row.is-sel { box-shadow: inset 0 0 0 1px var(--accent-strong); }
.journal-row.is-flagged { background: var(--orange-wash); }
.journal-dot { position: relative; top: 3px; justify-self: center; width: 7px; height: 7px;
               border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px var(--panel); }
.journal-row.kind-new .journal-dot { background: var(--accent-strong); }
.journal-row.is-flagged .journal-dot { background: var(--paper); box-shadow: inset 0 0 0 2px var(--orange); }
.journal-copy { min-width: 0; }
.journal-copy strong { display: block; overflow: hidden; font-family: var(--mono); font-size: 10.5px;
                       font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.journal-copy span { display: block; margin-top: 1px; overflow: hidden; color: var(--quiet);
                     font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.journal-tag-chip { display: inline-block; margin-right: 5px; padding: 0 5px; border-radius: 999px;
                    background: var(--blue-wash); color: var(--blue); font-family: var(--mono);
                    font-size: 8.5px; font-style: normal; vertical-align: 1px; }
.journal-pos { padding-top: 1px; color: var(--quiet); font-size: 9.5px; white-space: nowrap; }
.journal-row.is-head .journal-pos { color: var(--green); font-weight: 640; }
.journal-fork { opacity: 0; align-self: center; background: none; color: var(--muted);
                cursor: pointer; font-size: 11px; padding: 0 2px; }
.journal-row:hover .journal-fork { opacity: 1; }
.journal-fork:hover { color: var(--ink); }

/* ===================================================================== work pane */

/* Explicit rows: `.pane-sub:empty` is `display: none`, and without them the body would be
   auto-placed into the `auto` row and stop filling the pane. */
.work-pane { display: grid; grid-template-rows: 39px auto minmax(0, 1fr); overflow: hidden; }
.pane-head { grid-row: 1; }
.pane-sub { grid-row: 2; }
.pane-body { grid-row: 3; }
.pane-head { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 0 12px;
             border-bottom: 1px solid var(--line); background: var(--paper); }
.artifact-icon { width: 24px; height: 24px; flex: none; display: grid; place-items: center;
                 border: 1px solid var(--line); border-radius: 6px; background: var(--paper);
                 color: var(--blue); font-family: var(--mono); font-size: 11px; font-weight: 700; }
.artifact-icon.location { color: var(--orange); }
.artifact-icon.table { color: var(--blue); }
.artifact-icon.dataset { color: var(--cyan); }
.artifact-icon.view { color: #8b52c9; }
.artifact-icon.investigation { color: var(--green); }
.artifact-heading { min-width: 0; flex: 1; }
.artifact-heading strong { display: block; overflow: hidden; font-size: 13px; font-weight: 570;
                           text-overflow: ellipsis; white-space: nowrap; }
.artifact-heading span { display: block; margin-top: 1px; overflow: hidden; color: var(--quiet);
                         font-family: var(--mono); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.pane-sub:empty { display: none; }
.resource-tabs { min-height: 34px; display: flex; align-items: stretch; gap: 2px; padding: 0 10px;
                 border-bottom: 1px solid var(--line); background: var(--paper); }
.resource-tabs button { padding: 0 9px; border-bottom: 2px solid transparent; background: transparent;
                        color: var(--quiet); font-size: 11px; cursor: pointer; }
.resource-tabs button:hover:not(:disabled) { color: var(--ink); }
.resource-tabs button.is-active { border-bottom-color: var(--ink); color: var(--ink); font-weight: 600; }
.resource-tabs button:disabled { color: #b8b8b2; cursor: not-allowed; }
.resource-tabs .tab-spacer { flex: 1; }

/* nothing is open: a quiet label rather than a heading, since there is no resource to name */
.head-idle { color: var(--quiet); font-size: 12px; font-weight: 400; }

/* the branch and the commit it points at are one fact, so they share the tab's identity line */
.head-commit { display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 12px;
               border-left: 1px solid var(--line); font-size: 11px; white-space: nowrap; }
.head-commit b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.commitbar { min-height: 34px; display: flex; align-items: center; gap: 9px; padding: 4px 11px;
             border-bottom: 1px solid var(--line); background: #fdfdfc; font-size: 11px; }
.commitbar code { font-family: var(--mono); font-size: 10px; }
.op-badge { flex: none; padding: 1px 6px; border: 1px solid var(--line); border-radius: 999px;
            color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
            text-transform: uppercase; }
.op-badge.op-root { border-color: #d7dfa8; background: var(--accent-wash); color: #4d590e; }
.op-badge.op-filter { border-color: #d8defe; background: var(--blue-wash); color: #3e52cc; }
.op-badge.op-segment { border-color: #f6d6c2; background: var(--orange-wash); color: #a64b13; }
.op-badge.op-pin { border-color: #e6e6e2; background: var(--canvas); color: var(--ink-soft); }
.warn-chip { flex: none; padding: 1px 6px; border-radius: 999px; background: var(--orange-wash);
             color: #a64b13; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.compact-tool { height: 23px; flex: none; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px;
                background: var(--paper); color: var(--muted); font-size: 10px; cursor: pointer;
                display: inline-flex; align-items: center; gap: 4px; }
.compact-tool:hover { border-color: #bdbdb8; color: var(--ink); }

.pane-body { min-height: 0; overflow: auto; padding: 16px 20px 40px; background: #f8f8f6;
             scrollbar-width: thin; }
/* Nothing open: the mark and the line, centred in the pane. The pane drops its padding so
   `height: 100%` centres against the full pane rather than overflowing it by the padding. */
.pane-body:has(.welcome) { padding: 0; }
.welcome { height: 100%; display: flex; flex-direction: column; align-items: center;
           justify-content: center; gap: 20px; padding: 0 24px; }
.welcome-mark { width: 46px; height: 46px; display: block; }
/* One line, always: it scales with the pane rather than wrapping, so the sentence never breaks.
   Grey and italic — it is a line about the product, not a heading you are meant to act on. */
.welcome h1 { margin: 0; font-size: clamp(18px, 2.9vw, 34px); font-weight: 450; font-style: italic;
              letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap; color: #6b6b64; }
/* The word the product is about gets a highlighter stroke, not green letters: the green sits behind
   it at the baseline, so the sentence keeps one colour and the emphasis is a mark on the page. */
.welcome h1 em { padding: 0 0.12em 0.02em; font-style: italic; color: var(--ink);
                 border-radius: 2px;
                 background: linear-gradient(to top, var(--accent) 0 44%, transparent 44%); }

/* The branch tab is three columns of equal standing — Builder · Episodes · Viewer — each with its
   own header. Committing happens in the first, so it reads as part of the tab's surface rather than
   as a panel floating on it. */
.pane-body:has(.work-split) { padding: 0; background: var(--paper); }
.work-split { display: flex; align-items: stretch; min-height: 100%; }
.builder-side { flex: 2 1 0; min-width: 220px; }
/* Compare's tables want room; Episodes must not be crushed for them. The floor is what a strip
   plus its label needs to stay readable — below that the column stops being worth showing. */
body.compare-mode .builder-side { flex: 3.4 1 0; min-width: 360px; }
body.compare-mode .results-side { min-width: 210px; }
.results-side { flex: 1 1 0; min-width: 150px; }
.viewer-side { flex: 2 1 0; min-width: 220px; }
.builder-side, .results-side, .viewer-side { align-self: stretch; display: flex;
            flex-direction: column; min-height: 0; }
.builder-side, .results-side { border-right: 1px solid var(--line); }
/* a column header: sticky, so it stays over its own content as the tab scrolls */
.col-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px;
            min-height: 32px; padding: 4px 11px; border-bottom: 1px solid var(--line-soft);
            background: var(--canvas); }
.col-head .artifact-heading strong { font-size: 11px; font-weight: 600; }
.col-head .artifact-heading span { font-family: var(--sans); font-size: 10px; }
.results-scroll { min-height: 0; padding: 12px 12px 40px; }

/* the atlas subtabs' own two-column body */
.workspace { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.work-main { flex: 1.2 1 520px; min-width: 0; }
.work-side { flex: 1 1 420px; min-width: 0; position: sticky; top: 0; }
.inspector { min-height: 200px; }
.inspector-empty { display: flex; align-items: center; justify-content: center; min-height: 200px;
                   padding: 0 14px; color: var(--quiet); font-size: 12px; text-align: center; }

.preview-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
                  gap: 5px 8px; margin-bottom: 10px; padding: 7px 9px; border: 1px solid #d7dfa8;
                  border-radius: 8px; background: var(--accent-wash); color: #4d590e;
                  font-size: 11px; line-height: 1.45; }
.vecnote { margin-bottom: 8px; }
.reslead { color: var(--muted); font-size: 11.5px; }

/* ===================================================================== builder */

.viewer-scroll { min-height: 0; padding: 12px 12px 40px; }
.builder-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 11px; }
.pickgroup { display: contents; }
#b-picks { margin-bottom: 9px; }
.ophelp { color: var(--quiet); font-size: 11px; line-height: 1.55; margin-bottom: 10px; }
.ophelp:empty { display: none; }
.opform { display: flex; flex-direction: column; gap: 11px; padding: 12px; border: 1px solid var(--line);
          border-radius: 9px; background: var(--paper); }
/* an author `display` beats the UA's `[hidden] { display: none }`, so hiding needs saying twice */
.opform[hidden] { display: none; }
.opform .ctrl { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.opform input[type=number], .opform input[type=text] { width: 100%; font-size: 12px; padding: 5px 8px;
          border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.opform select { width: 100%; margin: 0; }
.filterform { gap: 9px; }
.filterform .searchctrls { flex-direction: column; align-items: stretch; gap: 10px; }
.filterform .searchctrls .ctrl { min-width: 0; }
.filterform .searchctrls .ctrl input[type=range] { width: 100%; }
/* the search box's `flex: 1 1 300px` is a *width* basis in the horizontal row it was written for;
   in the builder's column it became a 300px-tall gap under the input. */
.filterform .searchctrls .ctrlwide { flex: none; min-width: 0; }
.svdesc .tabdesc { margin: 0; font-size: 11px; }
.pinlist { display: flex; flex-direction: column; gap: 4px; }
.pinrow { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--line-soft);
          border-radius: 6px; background: var(--canvas); font-size: 10.5px; }
.pinrow .mono { flex: none; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinnote { min-width: 0; flex: 1; padding: 2px 5px; border: 1px solid transparent; border-radius: 4px;
           background: transparent; font-size: 10.5px; }
.pinnote:focus { outline: none; border-color: var(--line); background: var(--paper); }
.pinflag, .pinx { flex: none; background: none; cursor: pointer; color: var(--muted); font-size: 11px; }
.pinflag.on { color: var(--red); }
.pinflag:hover, .pinx:hover { color: var(--ink); }

/* the rail's action bar: evaluate, then write. Sticky so a long form scrolls behind it rather
   than pushing either button out of reach. */
.builder-foot { position: sticky; bottom: 0; z-index: 2; margin-top: auto; padding: 10px 0 2px;
                display: flex; flex-direction: column; gap: 7px;
                border-top: 1px solid var(--line); background: var(--paper); }
.builder-foot .preview-button, .builder-foot .primary-button { width: 100%; }
.prevline { color: var(--muted); font-size: 11px; }
.prevline b { color: var(--ink); }
.berr { padding: 7px 9px; border: 1px solid #f0caca; border-radius: 7px; background: var(--red-wash);
        color: #a33; font-size: 11px; line-height: 1.5; }
#b-name { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper);
          font-size: 12px; }
#b-name:focus { outline: none; border-color: var(--ink-soft); }
.preview-button { display: inline-flex; min-height: 30px; align-items: center; justify-content: center;
                  gap: 6px; padding: 0 11px; border: 1px solid #cbd88f; border-radius: 6px;
                  background: var(--accent-wash); color: #46510f; font-size: 11px; font-weight: 600;
                  cursor: pointer; }
.preview-button:hover { border-color: var(--accent-strong); background: var(--accent); color: var(--ink); }
.preview-button:disabled { opacity: 0.55; cursor: not-allowed; }

.primary-button, .secondary-button {
  display: inline-flex; min-height: 29px; align-items: center; justify-content: center; gap: 6px;
  padding: 0 11px; border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: 600;
}
.primary-button { background: var(--ink); color: #fff; }
.primary-button:hover { background: #000; }
.primary-button:disabled { background: #d3d3ce; color: #fff; cursor: not-allowed; }
.secondary-button { border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); }
.secondary-button:hover { border-color: #bdbdb8; }
.secondary-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===================================================================== primitives */

.secthead { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
            color: var(--quiet); display: flex; align-items: center; gap: 8px; }
.fld { display: block; margin: 16px 0; font-size: 10px; font-weight: 600; letter-spacing: 0.07em;
       text-transform: uppercase; color: var(--quiet); }
.fld-label { display: block; margin-bottom: 7px; font-size: 10px; font-weight: 600;
             letter-spacing: 0.07em; text-transform: uppercase; color: var(--quiet); }
.hint { font-weight: 400; text-transform: none; letter-spacing: 0; }
.maph { margin: 20px 0 8px; }
.loading { color: var(--quiet); font-size: 11.5px; margin-top: 8px; }
.empty { color: var(--quiet); font-size: 12.5px; padding: 20px 0; line-height: 1.6; }
.empty b { color: var(--ink-soft); }

.tabdesc { color: var(--muted); font-size: 11.5px; margin-bottom: 16px; max-width: 900px; line-height: 1.7;
           background: var(--paper); border: 1px solid var(--line); border-left: 2px solid var(--accent-strong);
           border-radius: 7px; padding: 11px 13px; }
.tabdesc b { color: var(--ink); font-weight: 600; }
.tabdesc i { font-style: normal; font-weight: 600; color: var(--ink-soft); }
.tabdesc code, .sqlhint code, .commitbar code { font-family: var(--mono); font-size: 10.5px;
           color: var(--ink); background: var(--canvas); border: 1px solid var(--line-soft);
           border-radius: 3px; padding: 0 4px; }

select { max-width: 100%; margin-top: 5px; padding: 5px 8px; border: 1px solid var(--line);
         border-radius: 6px; background: var(--paper); font-size: 12px; color: var(--ink);
         text-transform: none; letter-spacing: 0; }
select:focus { outline: none; border-color: var(--ink-soft); }
input[type=text], input[type=number] { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px;
         font-size: 12px; color: var(--ink); background: var(--paper); }
input[type=text]:focus, input[type=number]:focus { outline: none; border-color: var(--ink-soft); }
input[type=range] { width: 100%; accent-color: var(--ink); }
.ctrl { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
        color: var(--quiet); min-width: 120px; }
.ctrl .val { color: var(--ink); }
.ctrl select { text-transform: none; letter-spacing: 0; }
.cbx { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--quiet);
       text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.cbx input { accent-color: var(--ink); }
.btn { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: 6px;
       padding: 6px 14px; font-weight: 560; cursor: pointer; font-size: 12px; letter-spacing: 0;
       text-transform: none; }
.btn:hover { background: var(--ink); color: #fff; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn.ghost { background: var(--paper); color: var(--ink-soft); border-color: var(--line); padding: 4px 11px;
             font-size: 11px; }
.btn.ghost:hover { border-color: var(--ink); background: var(--canvas); color: var(--ink); }
.btn.ghost[disabled] { color: #b8b8b2; }
.btn.big { font-size: 13px; font-weight: 600; padding: 10px 20px; }
.mini { border: 1px solid var(--line); background: var(--paper); border-radius: 5px; padding: 2px 8px;
        cursor: pointer; font-size: 10.5px; color: var(--muted); }
.mini:hover { border-color: var(--ink); color: var(--ink); }
.csbadge { text-transform: uppercase; font-size: 9px; letter-spacing: 0.06em; font-weight: 600;
           border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; color: var(--muted); }
.ovtags { text-transform: uppercase; font-size: 9px; letter-spacing: 0.05em; color: var(--quiet); }
.pill { display: inline-block; padding: 0 8px; border-radius: 3px; font-size: 10px; font-weight: 600;
        letter-spacing: 0.04em; text-transform: uppercase; }
.pill.yes { background: var(--ink); color: #fff; }
.pill.no { color: var(--muted); }
.flagchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.flagchip { border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; font-size: 10.5px;
            color: var(--muted); background: var(--paper); }
.flagchip.sm { padding: 0 6px; font-size: 9.5px; }
.ctrlbar { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px;
           padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ctrlbar .ctrl { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ctrlbar .ctrl select { margin: 0; }
.ctrlbar .sl { align-self: center; }
.dsbar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.dsbar:empty { display: none; }
.dsbar > .sl b { color: var(--ink); }
.dsbar button { border: 1px solid var(--line); background: var(--paper); border-radius: 6px; padding: 5px 11px;
                cursor: pointer; color: var(--ink-soft); font-size: 11.5px; }
.dsbar button:hover { background: var(--canvas); }

table.grid { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 11px; }
table.grid th, table.grid td { text-align: left; padding: 5px 11px; border-bottom: 1px solid var(--line-soft);
                               white-space: nowrap; }
table.grid th { background: var(--canvas); position: sticky; top: 0; font-weight: 600; color: var(--quiet);
                letter-spacing: 0.03em; }
table.grid tbody tr { cursor: pointer; }
table.grid tbody tr:hover { background: var(--canvas); }
table.grid tbody tr.sel, .grid.clickrows tbody tr.on { background: var(--accent-wash); }
.gridwrap { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 8px;
            background: var(--paper); }
table.grid .rm, table.grid .acc, table.grid .rej, table.grid .pinbtn {
  border: none; background: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 4px; }
table.grid .rm:hover, table.grid .acc:hover, table.grid .pinbtn:hover { color: var(--ink); font-weight: 700; }
.grid button.seed { border: 1px solid var(--line); background: var(--paper); border-radius: 5px;
                    cursor: pointer; padding: 1px 6px; font-size: 11px; color: var(--muted); }
.grid button.seed:hover { border-color: var(--ink); color: var(--ink); }
.grid.stt th, .grid.stt td { font-size: 10.5px; padding: 3px 8px; }
.grid.stt .num { text-align: right; font-variant-numeric: tabular-nums; }
.reshead { font-size: 11px; color: var(--quiet); margin: 10px 0 6px; }
.reshead b { color: var(--ink-soft); }
.veclegend { font-size: 11px; color: var(--muted); margin: 8px 0 4px; font-family: var(--mono); line-height: 1.6; }
.colh { font-size: 13.5px; font-weight: 600; margin: 14px 0 8px; }
.conhead { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.conhead .colh { margin: 0; }

.rowlist { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.listrow { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line);
           background: var(--paper); border-radius: 9px; padding: 10px 13px; }
.listrow:hover { border-color: #bdbdb8; }
.listrow-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.listrow-main b { font-size: 12.5px; }
.listrow-acts { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; flex-wrap: wrap; }

/* survey picker: every option visible, the unavailable ones grayed with their reason */
.surveypick { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 8px; }
.skchip { border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); border-radius: 6px;
          padding: 4px 9px; font-size: 11px; cursor: pointer; }
.skchip:hover:not(.off):not(.on) { background: var(--canvas); }
.skchip.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.skchip.off { color: #b0b0aa; background: var(--canvas); cursor: not-allowed; border-style: dashed; }
/* The builder's tab strip: the ways of answering *which moments*, one line, exactly one active.
   Scrolls sideways rather than wrapping — a strip that reflows to two rows stops reading as tabs,
   and the whole point of the short names is that it doesn't have to. */
.btabs { display: flex; align-items: stretch; gap: 2px; margin: 0 0 10px; overflow-x: auto;
         scrollbar-width: none; border-bottom: 1px solid var(--line); }
.btabs::-webkit-scrollbar { display: none; }
.btabgroup { display: contents; }
.btabsep { flex: 1 0 8px; }                 /* pushes Pinned to the far end — it is not a query */
/* -1px so the active tab's underline lands *on* the strip's rule rather than a hair above it */
.btab { flex: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
        background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap;
        padding: 5px 9px 6px; font-size: 11.5px; font-family: inherit; }
.btab:hover:not(.off):not(.on) { color: var(--ink); background: var(--canvas); }
.btab.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.btab.off { color: #c2c2bc; cursor: not-allowed; }
.btab.off:hover { color: #c2c2bc; }

.dirrow { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.dirrow .ophelp { flex: 1; min-width: 0; margin-bottom: 0; }

/* keep ⇄ exclude — a direction on the chosen query, not a tab of its own. A tab would put the
   query choice under a second level of steps, which the builder deliberately doesn't have. */
.dirtoggle { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 6px;
          overflow: hidden; background: var(--paper); }
.dirbtn { border: 0; background: transparent; color: var(--muted); cursor: pointer;
          padding: 4px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; }
.dirbtn + .dirbtn { border-left: 1px solid var(--line); }
.dirbtn:hover:not(.on) { background: var(--canvas); color: var(--ink); }
/* The only green and the only red on this screen. They are a *direction* — what happens to what
   the query found — so they carry the whole colour budget rather than sharing it with the results. */
.dirbtn.on { background: var(--ink); color: #fff; }
.dirbtn[data-dir="filter"].on { background: var(--green); }
.dirbtn[data-dir="exclude"].on { background: var(--red); }

/* severity, as one dot. Three colours across the whole feature — the builder's tick-list, the
   check picker and Overview's table all read from these, so a severity looks the same everywhere. */
.sev { width: 7px; height: 7px; border-radius: 999px; display: inline-block; flex: none; }
.sev-error { background: var(--red); }
.sev-warn { background: var(--orange); }
.sev-info { background: var(--quiet); }
.sev-bg-error { background: var(--red); }
.sev-bg-warn { background: var(--orange); }
.sev-bg-info { background: var(--quiet); }

/* how a subtraction cuts — folded away, because the defaults are right until they aren't */
.exguard { margin: 10px 0 2px; border: 1px solid var(--line-soft); border-radius: 7px;
          background: var(--panel); }
.exguard > summary { cursor: pointer; padding: 6px 10px; font-size: 10.5px; color: var(--muted);
          letter-spacing: 0.04em; text-transform: uppercase; }
.exguard > summary:hover { color: var(--ink); }
.exguard .searchctrls { padding: 4px 10px 10px; gap: 14px; }
.exguard input[type=number] { display: block; margin-top: 4px; width: 74px; }

/* The check picker. One line per check, because the checks are the *configuration* and the findings
   below them are the work — a picker that fills the panel with twenty checkboxes and sixty sliders
   makes the panel about choosing checks rather than about reviewing what they found.

   Each row carries its own thresholds as a short readout and opens them on demand, one at a time.
   Checks this atlas can't run fold away entirely: still listed, still explained, no longer paid for
   in vertical space. */
.qchead { display: flex; align-items: center; justify-content: space-between; gap: 8px;
          font-size: 11.5px; margin-bottom: 5px; }
.qclist { border: 1px solid var(--line-soft); border-radius: 7px; background: var(--paper);
          overflow: hidden; width: 100%; }
.qcrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
         padding: 1px 8px; font-size: 11px; line-height: 1.5; }
.qcrow + .qcrow { border-top: 1px solid var(--line-soft); }
.qcrow:hover { background: var(--canvas); }
.qcrow.open { background: var(--canvas); }
.qcname { text-transform: none; letter-spacing: 0; font-size: 11.5px; color: var(--muted);
          min-width: 0; }
.qcrow.on .qcname { color: var(--ink); }
.qcrow.on .qclbl { font-weight: 600; }
.qcsum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
         text-align: right; font-variant-numeric: tabular-nums; }
.qccog { width: 18px; height: 18px; flex: none; border: 0; background: transparent; padding: 0;
         color: var(--quiet); cursor: pointer; font-size: 10px; line-height: 1; }
button.qccog:hover { color: var(--ink); }
.qcopts { grid-column: 1 / -1; padding: 6px 0 8px 20px; gap: 12px; }
.qcopts .ctrl input[type=range] { width: 108px; display: block; }
.qcopts .ctrl select, .qcopts .ctrl input[type=text] { display: block; margin-top: 3px; }
.qcdesc { flex: 1 1 100%; font-size: 10.5px; line-height: 1.45; margin-top: 2px; }
.qcdesc b { color: var(--ink-soft); font-weight: 600; }
.qcoff { margin-top: 6px; font-size: 11px; }
.qcoff > summary { cursor: pointer; color: var(--quiet); font-size: 10.5px; }
.qcoff > summary:hover { color: var(--ink); }
.qcoffrow { display: flex; align-items: center; gap: 7px; padding: 2px 0 2px 4px;
            color: var(--muted); font-size: 10.5px; }
.qcoffrow b { font-weight: 600; color: #a5a5a0; }

/* The findings list — in the Episodes column, because a finding *is* a range and this is the column
   ranges live in. Wide enough to carry the episode, the range, its duration and the metric that
   decided it, which the builder's narrow panel never was. */
.findhead { display: flex; align-items: center; justify-content: space-between; gap: 8px;
          margin: 2px 0 8px; font-size: 11.5px; }
.findacts { display: flex; gap: 5px; }
.findwarn { border: 1px solid #f0d3a8; background: var(--orange-wash); border-radius: 6px;
          padding: 6px 9px; margin: 6px 0; font-size: 11px; color: #7a4a15; line-height: 1.45; }
.findlist { border: 1px solid var(--line-soft); border-radius: 7px; background: var(--paper);
          overflow: hidden; }
.findgroup + .findgroup { border-top: 1px solid var(--line); }
.findgh { display: flex; align-items: center; gap: 7px; padding: 5px 9px; background: var(--panel);
          position: sticky; top: 0; z-index: 1; font-size: 11.5px;
          border-bottom: 1px solid var(--line-soft); }
.findgh b { font-weight: 600; }
.findgstat { margin-left: auto; }
.findrow { display: grid; grid-template-columns: auto 1fr auto auto auto 1fr; align-items: center;
          gap: 10px; padding: 2px 9px; font-size: 11px; color: #a8a8a2; cursor: pointer;
          border-left: 2px solid transparent; }
.findrow:hover { background: var(--canvas); }
.findrow.on { color: var(--ink-soft); }
.findrow.here { background: var(--accent-wash); border-left-color: var(--accent-strong); }
.findrow .fep { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.findrow .frange, .findrow .fdur, .findrow .fmet { font-variant-numeric: tabular-nums;
          white-space: nowrap; }
.findrow .frange { font-family: var(--mono); font-size: 10.5px; }
.findrow .fmet { text-align: right; min-width: 44px; }
.findrow .fdet { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.findmore { padding: 3px 9px 6px 28px; }

/* members ⇄ findings, in the column header */
/* Commit sits over the member set it commits, not under the form that describes it. Black, because
   it is the only write on this screen, and two-beat, because it is the only irreversible one. */
.commitwrap { position: relative; flex: none; }
.commit-btn { height: 23px; padding: 0 12px; border: 1px solid var(--ink); border-radius: 5px;
          background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 600;
          font-family: inherit; cursor: pointer; letter-spacing: 0.03em; }
.commit-btn:hover:not(:disabled) { background: #000; }
.commit-btn:disabled { background: var(--canvas); border-color: var(--line); color: #b8b8b2;
          cursor: not-allowed; font-weight: 400; }
.commitpop { position: absolute; right: 0; top: 28px; z-index: 40; width: 290px;
          background: var(--paper); border: 1px solid var(--line); border-radius: 9px;
          box-shadow: 0 8px 28px rgba(16, 16, 16, 0.13); padding: 11px; }
.commitpop-h { font-size: 11.5px; margin-bottom: 2px; }
.commitpop-s { font-size: 10.5px; margin-bottom: 8px; }
.commitpop input { width: 100%; font-size: 12px; padding: 6px 8px; }
.commitpop-a { display: flex; justify-content: flex-end; gap: 6px; margin-top: 9px; }
.commitpop-a .primary-button { width: auto; padding: 0 14px; height: 26px; font-size: 11px; }
.prevline .cut { color: var(--ink); font-weight: 600; }

/* Overview's quality tally — coverage per check, because seconds are what excluding one costs */
.qcbar { position: relative; height: 12px; border-radius: 3px; background: var(--canvas);
          border: 1px solid var(--line-soft); min-width: 90px; }
.qcfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; opacity: 0.55; }
.qcpct { position: absolute; right: 4px; top: -1px; font-size: 9.5px; color: var(--ink-soft);
          font-variant-numeric: tabular-nums; }
.scanline, .scanerr { margin-right: 4px; }
.scanerr { color: var(--red); }
.compact-tool.primary-ish { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.compact-tool.primary-ish:disabled { border-color: var(--line); color: #b0b0aa; cursor: not-allowed;
          font-weight: 400; }

/* Curate ⇄ Compare — what this column is for. Neutral, unlike keep ⇄ exclude below it: this one
   chooses a mode, that one decides what happens to data, and only the second earns a colour. */
.modetoggle { margin: 0 0 0 auto; }
.modetoggle .dirbtn { padding: 3px 10px; font-size: 10.5px; }
.modetoggle .dirbtn.on { background: var(--ink); }

/* Compare. Two lanes, two hues — never green or red: those belong to keep ⇄ exclude, and a
   comparison decides nothing about the data. Blue and *orange*, not blue and violet: at the low
   opacity a strip needs to keep its metric track readable underneath, two neighbouring hues both
   resolve to the same pale lavender and the lanes stop being distinguishable at a glance. Hue
   distance is the whole job here, so the pair has to be picked from opposite sides of the wheel. */
.lane { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: none;
        vertical-align: -1px; margin-right: 3px; }
.lane-a { background: var(--blue); }
.lane-b { background: var(--orange); }
.stripsvg .lane-a-fill { fill: rgba(89, 113, 253, 0.34); stroke: var(--blue); stroke-width: 0.5; }
.stripsvg .lane-b-fill { fill: rgba(251, 134, 61, 0.36); stroke: var(--orange); stroke-width: 0.5; }
.stripsvg .lane-a-fill:hover { fill: rgba(89, 113, 253, 0.52); }
.stripsvg .lane-b-fill:hover { fill: rgba(251, 134, 61, 0.55); }
.strip.is-cmp .stripsvg { background: var(--paper); }
.lanechip-a { border-color: #b9c4fe; color: #3a4bb8; background: var(--blue-wash); }
.lanechip-b { border-color: #f3cdaf; color: #a3541b; background: var(--orange-wash); }

.cmppick { display: block; margin-bottom: 10px; }
.cmppick select { display: block; margin-top: 4px; width: 100%; }
.cmpsec { margin-top: 16px; }
.cmpsec .ovsub { margin-bottom: 5px; }

/* the headline — the two ways of "the same", side by side */
.cmpverdict { border: 1px solid var(--line); border-radius: 9px; background: var(--paper);
              padding: 10px 12px; }
.cmpv-names { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 9px; }
.cmpv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.cmpv-cell { min-width: 0; }
.cmpv-n { font-size: 19px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cmpv-cell .sl { display: block; line-height: 1.4; }
.pbar { height: 4px; border-radius: 2px; background: var(--canvas); margin: 4px 0 3px; overflow: hidden; }
.pfill2 { height: 100%; background: var(--ink); border-radius: 2px; }
.dlt { font-variant-numeric: tabular-nums; font-weight: 600; }
.dlt.up { color: var(--green); }
.dlt.down { color: var(--muted); }

/* the divergence graph — where the two branches parted, as a shape rather than a sentence */
.cmpgraph { border: 1px solid var(--line); border-radius: 9px; background: var(--paper);
            padding: 8px 0 4px; margin-bottom: 10px; }
.cmpgh { padding: 0 11px 4px; }
.cmpgwrap { overflow-x: auto; scrollbar-width: thin; padding: 0 4px; }
.gsvg { display: block; }
.gsvg .gedge { fill: none; stroke: var(--line); stroke-width: 1.5; }
.gsvg .gedge.g-a { stroke: var(--blue); stroke-opacity: 0.55; }
.gsvg .gedge.g-b { stroke: var(--orange); stroke-opacity: 0.55; }
.gsvg .gnode circle { fill: var(--paper); stroke: var(--muted); stroke-width: 1.5; }
.gsvg .g-shared circle { fill: var(--muted); stroke: var(--muted); }
.gsvg .g-a circle { stroke: var(--blue); fill: var(--blue-wash); }
.gsvg .g-b circle { stroke: var(--orange); fill: var(--orange-wash); }
.gsvg .gtip { fill: var(--paper); stroke-width: 1.5; stroke-dasharray: 2 2; }
.gsvg .gtip.g-a { stroke: var(--blue); }
.gsvg .gtip.g-b { stroke: var(--orange); }
.gsvg .gl { font-family: var(--sans); font-size: 8.5px; fill: var(--quiet); }
.gsvg .glop { font-size: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.gsvg .g-shared .glop { fill: var(--muted); }
.gsvg .gname { font-family: var(--sans); font-size: 10px; font-weight: 600; }
.gsvg .gname.g-a { fill: var(--blue); }
.gsvg .gname.g-b { fill: var(--orange); }
/* the common node is the root of the tree, so it reads heavier than the steps growing off it */
.gsvg .g-shared circle { r: 5.5; }
.gsvg .gback { font-size: 8px; fill: #b5b5af; }
.gsvg .gnode:hover circle { stroke-width: 2.5; }

.opbadge { border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; font-size: 9.5px;
           text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); flex: none; }

.cmptable td, .cmptable th { white-space: nowrap; padding: 2px 6px; font-size: 10px; }
.grid.stt tr.cmpsub td { color: var(--muted); }
.grid.stt tr.cmprule td { background: var(--panel); font-size: 9.5px; text-transform: uppercase;
                          letter-spacing: 0.05em; padding-top: 5px; padding-bottom: 3px; }
.cmprow { cursor: pointer; }
.cmprow:hover td { background: var(--canvas); }
.stpill { border-radius: 999px; padding: 0 7px; font-size: 9.5px; border: 1px solid var(--line);
          color: var(--muted); white-space: nowrap; }
.stpill.st-a { border-color: #b9c4fe; color: #3a4bb8; background: var(--blue-wash); }
.stpill.st-b { border-color: #f3cdaf; color: #a3541b; background: var(--orange-wash); }
.stpill.st-p { border-color: #ddd9b0; color: #6b6a2a; background: var(--accent-wash); }
.stpill.st-s { color: #b0b0aa; }
/* the two-bar mini chart that makes a coverage difference readable without doing the subtraction */
.cmpmini { width: 78px; padding-top: 4px !important; padding-bottom: 4px !important; }
.minibar { height: 4px; background: var(--canvas); border-radius: 2px; overflow: hidden; }
.minibar + .minibar { margin-top: 2px; }
.minifill { height: 100%; border-radius: 2px; }
.minifill.lane-a { background: var(--blue); }
.minifill.lane-b { background: var(--orange); }

.histsvg .hist-a { fill: rgba(89, 113, 253, 0.75); }
.histsvg .hist-b { fill: rgba(251, 134, 61, 0.8); }

/* layers: two rows per layer, one per branch, so the pair reads as a before/after rather than as
   two tables you have to hold in your head at once */
.llist { border: 1px solid var(--line-soft); border-radius: 7px; background: var(--paper);
         overflow: hidden; }
.lrow { padding: 6px 9px; }
.lrow + .lrow { border-top: 1px solid var(--line); }
.lhead { display: flex; align-items: center; gap: 7px; font-size: 11.5px; margin-bottom: 4px; }
.lside { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--muted);
         padding: 1px 0; min-width: 0; }
.ln { min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft);
      font-weight: 600; }
.lshare { width: 56px; height: 5px; border-radius: 2px; background: var(--canvas); flex: none;
          overflow: hidden; }
.lsharef { height: 100%; background: var(--ink); opacity: 0.42; border-radius: 2px; }
.lside:first-of-type .lsharef { background: var(--blue); }
.lside:last-of-type .lsharef { background: var(--orange); }
.lpct { min-width: 34px; font-variant-numeric: tabular-nums; }
.ldet { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.lstat { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lstat.lwarn { color: var(--ink); font-weight: 600; }
.ltag { border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; font-size: 9.5px;
        white-space: nowrap; }
.ltag b { font-weight: 600; color: var(--ink-soft); }
.ltag.lgone { border-style: dashed; color: #b8b8b2; }

.cmptask { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 11px; }
.cmptaskl { flex: 0 0 30%; min-width: 0; overflow: hidden; text-overflow: ellipsis;
            white-space: nowrap; color: var(--ink-soft); }
.cmpbars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmpbar { position: relative; height: 9px; background: var(--canvas); border-radius: 2px; }
.cmpbar span { position: absolute; right: -20px; top: -2px; font-size: 9.5px; color: var(--quiet);
               font-variant-numeric: tabular-nums; }
.cmpfill { height: 100%; border-radius: 2px; opacity: 0.7; }
.cmpfill.lane-a { background: var(--blue); }
.cmpfill.lane-b { background: var(--orange); }
.cmptaskd { flex: 0 0 46px; text-align: right; font-size: 10px; }

.searchctrls { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.searchctrls .ctrl input[type=range] { width: 130px; display: block; }
.searchctrls .ctrl select { display: block; margin-top: 4px; }
.searchctrls .ctrlwide { flex: 1 1 300px; min-width: 240px; }
.ctrlwide input[type=text] { display: block; width: 100%; margin-top: 4px; font-size: 13px;
          font-weight: 400; letter-spacing: 0; text-transform: none; padding: 7px 10px; border-radius: 7px; }
.ctrlwide input[type=text]:focus { box-shadow: 0 0 0 3px rgba(16, 16, 16, 0.05); }
.seedchip { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 9px;
            border: 1px solid var(--ink-soft); border-radius: 7px; background: var(--canvas);
            font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); }
.seedchip button { margin-left: auto; border: 0; background: none; cursor: pointer; color: var(--muted); }
.seedchip button:hover { color: var(--ink); }

.claudebtn, .logobtn { display: inline-flex; align-items: center; gap: 5px; }
.vmark { width: 12px; height: 12px; display: block; flex: none; }

/* ===================================================================== strips + brush */

.strip { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 7px 0; }
.strip-lbl { font-size: 9.5px; color: var(--quiet); overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.strip-lbl .mono { flex: none; }
/* A flagged episode is named in its label and says which checks fired. It is not recoloured:
   green and red are the keep ⇄ exclude control's, and spending them here would say twice, less
   clearly, what that control already says once. */
.strip.is-flagged .strip-lbl { color: var(--ink-soft); }
.strip.is-flagged .strip-lbl .mono { font-weight: 600; }
.stripwhy { display: flex; gap: 4px; overflow: hidden; min-width: 0; }
.stripsvg { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 6px;
            background: var(--paper); cursor: crosshair; display: block; }
.stripsvg .hit { fill: rgba(89, 113, 253, 0.2); stroke: var(--blue); stroke-width: 0.5; }
.stripsvg .hit:hover { fill: rgba(89, 113, 253, 0.34); }

.stripsvg .brush { fill: rgba(167, 192, 46, 0.22); stroke: var(--accent-strong); stroke-width: 1;
                   stroke-dasharray: 3 2; }
.stripsvg .pvwin { fill: rgba(167, 192, 46, 0.16); }
#strips { margin: 8px 0; }
.regionbar { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; }
.mapwrap { border: 1px solid var(--line); border-radius: 8px; background: var(--paper); margin: 8px 0; }
.spmap { width: 100%; height: 420px; display: block; cursor: crosshair; }
.spmap .brush { fill: rgba(167, 192, 46, 0.18); stroke: var(--accent-strong); stroke-width: 1;
                stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.spmap polyline { vector-effect: non-scaling-stroke; stroke-width: 1.4; }

/* ===================================================================== inspector + players */

.playhead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.playhead .tag { font-size: 9px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
                 color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 2px 7px; }
.playhead .ep { font-family: var(--mono); font-size: 11.5px; color: var(--ink); }
.playhead .meta { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: auto; }
.rangeslider { position: relative; height: 26px; margin: 6px 0 2px; }
.rangeslider .track { position: absolute; left: 0; right: 0; top: 11px; height: 4px; background: var(--line);
                      border-radius: 2px; }
.rangeslider .fill { position: absolute; top: 11px; height: 4px; background: var(--ink); border-radius: 2px; }
.rangeslider input[type=range] { position: absolute; left: 0; right: 0; top: 5px; width: 100%; height: 16px;
          margin: 0; background: none; -webkit-appearance: none; appearance: none; pointer-events: none; }
.rangeslider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto;
          width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); cursor: grab; }
.rangeslider input[type=range]::-moz-range-thumb { pointer-events: auto; width: 13px; height: 13px;
          border-radius: 50%; background: #fff; border: 2px solid var(--ink); cursor: grab; }
.rangeslider input[type=range]::-moz-range-track { background: none; }
.selbar { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 11px;
          color: var(--muted); flex-wrap: wrap; }
.selbar button { border: 1px solid var(--line); background: var(--paper); border-radius: 6px; padding: 3px 9px;
                 cursor: pointer; color: var(--ink-soft); font-size: 11px; font-weight: 560; }
.selbar button:hover { background: var(--canvas); }
.selbar button.btn { border-color: var(--ink); }
.selbar button.btn:hover { background: var(--ink); color: #fff; }
.pullbar { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; flex-wrap: wrap; }
.pulllabel { font-size: 9.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
             color: var(--quiet); }
.pullchips { display: flex; gap: 5px; flex-wrap: wrap; }
.pullchips .chip { border: 1px solid var(--line); background: var(--paper); border-radius: 999px;
                   padding: 3px 11px; font-size: 11px; cursor: pointer; color: var(--muted); }
.pullchips .chip:hover { border-color: var(--ink); color: var(--ink); }
.pullchips .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.views { display: block; }
.vhead { display: flex; justify-content: center; margin-bottom: 9px; }
.vhead .panel { width: 100%; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 9px; }
.panel, .vpanel { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper); }
.panel .lbl, .vpanel .lbl { font-size: 9px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
          color: var(--quiet); background: var(--canvas); padding: 3px 8px; border-bottom: 1px solid var(--line); }
.panel img { width: 100%; height: clamp(150px, 24vh, 340px); object-fit: contain; display: block;
             background: #f0f0ee; }
.vhead .panel img { height: auto; }
.vpanel { margin: 9px 0; }
.vpanel video { width: 100%; height: clamp(180px, 38vh, 480px); object-fit: contain; display: block; background: #000; }
.vpanel canvas { width: 100%; display: block; background: #0d0d0e; cursor: grab; }
.vpanel canvas:active { cursor: grabbing; }
.chart { width: 100%; height: 116px; margin-top: 10px; border: 1px solid var(--line); border-radius: 8px;
         background: var(--paper); }
.bar { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.bar input[type=range] { flex: 1; }
.bar .fpsw { font-size: 10px; color: var(--quiet); display: flex; align-items: center; gap: 6px; width: auto;
             text-transform: uppercase; letter-spacing: 0.04em; }
.bar .fpsw input { width: 80px; }

/* ===================================================================== atlas subtabs */

/* Overview */
.ovsec { margin: 16px 0; }
.ovhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.ovhead .fld-label { margin: 0; }
.ovsub { margin: 12px 0 4px; }
.ovempty { padding: 8px 0; color: var(--quiet); font-size: 11.5px; }
.tasklist { display: flex; flex-direction: column; gap: 5px; }
.taskrow { display: flex; align-items: center; gap: 10px; }
.taskbar { position: relative; flex: 1; min-width: 180px; height: 21px; border: 1px solid var(--line);
           border-radius: 5px; overflow: hidden; background: var(--paper); }
.taskfill { position: absolute; inset: 0 auto 0 0; background: var(--accent-wash); }
.tasklabel { position: relative; z-index: 1; display: block; padding: 3px 8px; font-size: 11.5px;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.taskn { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.histsvg { width: 100%; max-width: 520px; height: 88px; display: block; }
.histbar { fill: #b7c6d9; } .histbar:hover { fill: var(--blue); }
.histaxis { stroke: var(--line); stroke-width: 1; }
.histlbl { fill: var(--quiet); font-size: 9px; }
.featbox { margin: 6px 0; }
.featbox > summary { cursor: pointer; font-size: 11.5px; padding: 3px 0; }
.rngh { min-width: 120px; } .rngcell { width: 130px; }
.rngbar { position: relative; height: 8px; background: var(--canvas); border-radius: 3px; }
.rngspan { position: absolute; top: 0; bottom: 0; background: #c9d59a; border-radius: 3px; }
.rngmid { position: absolute; top: -1px; width: 2px; height: 10px; background: var(--ink); }
.prevhead { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.prevhead #prevnav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.pvtracks { display: flex; flex-direction: column; gap: 8px; }
.pvtrack .pvlbl { font-size: 10px; color: var(--quiet); margin-bottom: 2px; }
.pvtrack .pvlbl em { font-style: normal; text-transform: uppercase; font-size: 8.5px;
                     border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
#pvmedia { margin-top: 9px; }
#pvmedia video { width: 100%; height: clamp(150px, 28vh, 320px); object-fit: contain; background: #000; display: block; }

/* Annotations */
.anstrip { height: 52px; }
.anstrip .anspan { fill: rgba(89, 113, 253, 0.16); stroke: var(--blue); stroke-width: 0.5; cursor: pointer; }
.anstrip .anspan:hover { fill: rgba(89, 113, 253, 0.28); }
.anstrip .anspan.on { fill: rgba(89, 113, 253, 0.4); stroke-width: 1.5; }
.anstrip .anspan.pending { fill: rgba(167, 192, 46, 0.24); stroke: var(--accent-strong); stroke-width: 1;
                           stroke-dasharray: 3 2; pointer-events: none; }
.anhint { margin: 4px 0 2px; }
.anselbar { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 9px 11px;
            border: 1px solid #d7dfa8; border-radius: 8px; background: var(--accent-wash); flex-wrap: wrap; }
.anselbar input { flex: 1; min-width: 180px; padding: 6px 9px; }
.anselbar button { flex: none; }
.andel { color: var(--red); border-color: #f0caca; }
.andel:hover { background: var(--red); border-color: var(--red); color: #fff; }
.epname { margin-bottom: 5px; }

.antaskrow { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px;
             padding: 8px 11px; margin: 5px 0; background: var(--paper); cursor: pointer; }
.antaskrow:hover { border-color: #bdbdb8; }
.antaskrow.on { border-color: var(--accent-strong); box-shadow: inset 2px 0 0 var(--accent-strong); }
.antasktext { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anrange { flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* Map */
.editlayout { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.editlayout .palette { flex: 0 0 210px; }
.editlayout .mapedit { flex: 1 1 340px; min-width: 0; }
.editpreview { flex: 1 1 360px; min-width: 0; position: sticky; top: 0; border: 1px solid var(--line);
               border-radius: 9px; padding: 11px; background: var(--panel); }
.palette { width: 250px; flex: none; border: 1px solid var(--line); border-radius: 9px; padding: 8px 9px;
           max-height: 66vh; overflow: auto; background: var(--panel); }
.mapedit { flex: 1; min-width: 0; }
.mapedit.ro, .palette.ro { pointer-events: none; opacity: 0.72; }
.schema-panel { margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px;
                max-height: 42vh; overflow: auto; font-size: 10.5px; background: var(--paper); }
.sp-title { display: none; }
.sp-table > summary { cursor: pointer; font-family: var(--mono); font-weight: 600; font-size: 10.5px;
                      padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-table > summary b { color: var(--quiet); font-weight: 400; }
.sp-col { display: flex; justify-content: space-between; gap: 6px; font-family: var(--mono); font-size: 9.5px;
          line-height: 1.5; color: var(--muted); padding: 0 0 0 12px; cursor: pointer; white-space: nowrap; }
.sp-col span { overflow: hidden; text-overflow: ellipsis; }
.sp-col:hover { color: var(--ink); background: var(--canvas); }
.sp-col em { color: #bdbab2; font-style: normal; flex: none; }
.chip.drag { display: flex; justify-content: space-between; gap: 8px; align-items: center;
             font-family: var(--mono); font-size: 10.5px; color: var(--ink); background: var(--paper);
             border: 1px solid var(--line); border-radius: 5px; padding: 3px 7px; margin: 3px 0 3px 8px; cursor: grab; }
.chip.drag:hover { border-color: var(--ink); }
.chip.drag em { color: #bdbab2; font-style: normal; }
.droprow { display: flex; gap: 12px; margin: 6px 0 12px; flex-wrap: wrap; }
.drop { flex: 1; min-width: 200px; border: 1.5px dashed var(--line); border-radius: 9px; padding: 11px 13px;
        background: var(--paper); }
.drop.over { border-color: var(--accent-strong); background: var(--accent-wash); }
.drop-h { font-size: 9.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
          color: var(--quiet); margin-bottom: 6px; }
.drop-v { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.drop-help { margin-top: 6px; font-size: 10.5px; color: var(--quiet); line-height: 1.45; font-family: var(--sans); }
.drop-help b { color: var(--ink-soft); font-weight: 600; }
.ratein { width: 54px; padding: 2px 5px; border: 1px solid var(--line); border-radius: 5px; }
.mapexpr { display: block; margin: 4px 0 12px; }
.mapexpr input, .mapname input { font-family: var(--mono); }
.mapname { margin-bottom: 9px; }
.modhead { display: flex; align-items: center; gap: 12px; margin: 10px 0 8px; }
.addmods { display: flex; gap: 5px; flex-wrap: wrap; }
.modcard { border: 1px solid var(--line); border-radius: 9px; margin-bottom: 9px; overflow: hidden;
           background: var(--paper); }
.modtop { display: flex; align-items: center; gap: 8px; background: var(--canvas); padding: 6px 10px;
          border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.modtop .mn { font-weight: 600; }
.modtop .kind { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
                color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 1px 6px; }
.modtop .rm { margin-left: auto; }
.modhelp { padding: 7px 11px; font-size: 10.5px; color: var(--quiet); line-height: 1.5;
           border-bottom: 1px solid var(--line-soft); background: var(--paper); }
.modhelp b { color: var(--ink-soft); font-weight: 600; }
.modbody { display: flex; gap: 12px; flex-wrap: wrap; padding: 10px 11px; }
.modbody.over { background: var(--accent-wash); }
.modbody label { display: flex; flex-direction: column; gap: 3px; font-size: 9.5px; font-weight: 600;
                 letter-spacing: 0.04em; text-transform: uppercase; color: var(--quiet); }
.modbody label.cbx { flex-direction: row; align-items: center; gap: 6px; }
.modbody select { margin: 0; }
.modbody .expr { min-width: 200px; font-family: var(--mono); text-transform: none; }
.modkinds { display: flex; gap: 4px; margin-top: 4px; }
.modkinds em { font-style: normal; font-size: 9px; font-weight: 600; letter-spacing: 0.05em;
               text-transform: uppercase; color: var(--muted); border: 1px solid var(--line);
               border-radius: 3px; padding: 0 5px; }
.dropadd { border: 1.5px dashed var(--line); border-radius: 9px; padding: 13px; text-align: center;
           color: var(--quiet); font-size: 11.5px; margin: 4px 0 12px; }
.dropadd.over { border-color: var(--accent-strong); background: var(--accent-wash); color: var(--ink); }
.jsonsec { margin: 14px 0 6px; }
.jsonbar { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.jsonview, .jsonprev pre { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
           padding: 11px; overflow: auto; font-size: 10.5px; line-height: 1.55; max-height: 300px; margin: 0;
           font-family: var(--mono); }
.jsonprev summary { cursor: pointer; font-size: 11px; color: var(--quiet); }
.jsoneditor { margin: 4px 0; }
.jsonarea { width: 100%; min-height: 240px; resize: vertical; padding: 11px; border: 1px solid var(--line);
            border-radius: 8px; background: var(--paper); color: var(--ink); font-family: var(--mono);
            font-size: 11.5px; line-height: 1.55; }
.jsonarea:focus { outline: none; border-color: var(--ink-soft); }
.jsonerr { font-size: 11.5px; color: var(--red); }
.specdoc { white-space: pre-wrap; word-break: break-word; }

/* Embeddings */
.embgrid { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr; gap: 20px; align-items: start;
           border: 1px solid var(--line); border-radius: 10px; padding: 15px 17px; background: var(--paper);
           margin: 12px 0; }
.embcol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.embcol .ctrl { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.embcol .ctrl select, .embcol .ctrl input { text-transform: none; letter-spacing: 0; font-size: 12px;
           font-weight: 400; color: var(--ink); padding: 5px 8px; border: 1px solid var(--line);
           border-radius: 6px; background: var(--paper); }
.embwhat { font-size: 13px; color: var(--ink); }
.advtoggle { border: 1px solid var(--line); background: var(--paper); border-radius: 8px; cursor: pointer;
             padding: 7px 10px; font-size: 11.5px; color: var(--ink-soft); text-align: left; width: 100%; }
.advtoggle:hover { border-color: #bdbdb8; }
.advtoggle.on { border-color: var(--ink); background: var(--canvas); }
.advbox { display: flex; flex-direction: column; gap: 10px; padding: 11px; border: 1px solid var(--line);
          border-top: 0; border-radius: 0 0 8px 8px; margin-top: -4px; background: var(--panel); }
.embnone { border: 1px dashed var(--line); border-radius: 10px; padding: 12px 13px; color: var(--quiet);
           font-size: 12px; margin: 12px 0; }
.embbuilt { margin: 12px 0; }
.embjob { border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; margin: 12px 0;
          background: var(--panel); }
.embjob.bad { border-color: var(--red); }
.embbar { height: 6px; border-radius: 3px; background: #e6e3dd; overflow: hidden; margin: 8px 0 6px; }
.embbarfill { height: 100%; background: var(--accent-strong); transition: width 0.3s ease; }
.embpick { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; }
.emblog { margin-top: 10px; font-size: 11.5px; }
.emblog summary { cursor: pointer; color: var(--quiet); font-size: 10px; text-transform: uppercase;
                  letter-spacing: 0.06em; }
.emblog pre { margin: 6px 0 0; max-height: 240px; overflow: auto; white-space: pre-wrap; font-size: 11px;
              line-height: 1.5; background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
              padding: 8px 10px; font-family: var(--mono); }
@media (max-width: 1400px) { .embgrid { grid-template-columns: 1fr; } }

/* ===================================================================== index */

.steps { display: flex; flex-direction: column; gap: 2px; margin: 14px 0 16px; }
.step { border: 1px solid var(--line); border-radius: 9px; background: var(--paper); padding: 12px 13px; }
.step + .step { margin-top: 8px; }
.step-h { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; color: var(--ink); }
.step-h.off { color: var(--quiet); }
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
          flex: none; border-radius: 50%; background: var(--ink); color: #fff; font-size: 10px; font-weight: 600; }
.step-h.off .step-n { background: var(--line); color: var(--quiet); }
.step-body { margin: 10px 0 0 27px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.step-body.wide { align-items: stretch; }
.step-body.wide > * { min-width: 0; }
.step-body .rowlist, .step-body .jsonsec, .step-body .droprow, .step-body .idxbar,
.step-body .dsnewbar, .step-body .surveypick { width: 100%; }
.step-body .sl { max-width: 640px; line-height: 1.6; }
.step-body .tabdesc { margin: 4px 0 0; }
.step-body .ctrl { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 0 0 auto; }
.step-body .ctrl > input { flex: none; width: 220px; }
.idxbar { display: flex; align-items: center; gap: 9px; margin: 8px 0 4px; flex-wrap: wrap; }
.idxinput { flex: 1; min-width: 240px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px;
            font-family: var(--mono); font-size: 12px; background: var(--paper); color: var(--ink); }
.idxinput:focus { outline: none; border-color: var(--ink-soft); }
.idxsub { flex: 0 1 320px; min-width: 180px; }
.idxhint { margin: 2px 0 12px; }
.idxnote { color: #a05555; }
.idxpick { align-items: center; margin: 2px 0 10px; }
.idxwarn { margin: 8px 0; padding: 8px 11px; border: 1px solid #f0caca; border-radius: 7px;
           background: var(--red-wash); font-size: 11.5px; color: #a33; }
.dsnewbar { display: flex; align-items: flex-end; gap: 11px; margin: 8px 0; flex-wrap: wrap; }
.dsnewbar select { margin: 0; }
.jobcard { border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; margin: 8px 0;
           background: var(--paper); }
.jobcard.ok { border-color: #d7dfa8; } .jobcard.err { border-color: #f0caca; }
.jobtop { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; }
.jobmsg { margin-top: 6px; font-size: 11px; }
.progress { height: 6px; background: var(--canvas); border: 1px solid var(--line); border-radius: 5px;
            overflow: hidden; }
.pfill { height: 100%; background: var(--accent-strong); transition: width 0.4s ease; }
.jobcard.err .pfill { background: var(--red); }
.newatlas-card { border: 1px solid var(--line); border-radius: 9px; background: var(--panel);
                 padding: 13px 14px; margin: 14px 0 6px; }
.nac-h { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.newatlas-card .sl { display: block; max-width: 720px; line-height: 1.6; }
.newatlas-card .dsnewbar { margin-top: 11px; }

/* ===================================================================== narrow */

@media (max-width: 1180px) {
  .app-grid { grid-template-columns: 210px 200px minmax(0, 1fr); }
  .workspace-tabs { grid-template-columns: 210px 200px minmax(0, 1fr); }
  .topbar { grid-template-columns: 210px minmax(0, 1fr); }
  .brand-block { padding: 0 11px; }
}

/* Spiral application sign-in and account controls. */
.account-email { color: var(--muted); font-size: 11px; }
.account-signout { cursor: pointer; background: var(--paper); border: 1px solid var(--line); border-radius: 5px; padding: 5px 9px; font-size: 11px; }
.login-page { display: grid; place-items: center; min-height: 100vh; overflow: auto; }
.login-card { max-width: 450px; margin: 25px; padding: 42px; border: 1px solid var(--line); background: var(--paper); border-radius: 8px; }
.login-brand { display: flex; align-items: center; gap: 10px; font-size: 22px; letter-spacing: -.6px; }
.login-brand img { width: 25px; }
.login-brand span span { color: var(--muted); font-weight: 400; }
.login-card h1 { font-size: 24px; font-weight: 500; letter-spacing: -.6px; margin: 30px 0 12px; }
.login-card p { color: var(--muted); line-height: 1.6; }
.login-card .login-error { color: var(--red); font-size: 12px; }
.login-error:empty { display: none; }
.login-button { display: block; margin-top: 25px; padding: 11px 16px; background: var(--ink); color: white; text-align: center; text-decoration: none; border-radius: 6px; }
.login-button:hover { background: var(--ink-soft); }
@media (max-width: 760px) { .account-email { display: none; } }