/* 2nd Brain — dark three-pane shell.
   The graph is the subject, so the chrome stays quiet: near-black ground,
   one accent, and colour reserved for node kinds and lint state. */

:root {
  --bg:        #0c0e13;
  --bg-raised: #13161e;
  --bg-input:  #1a1e29;
  --line:      #242938;
  --line-soft: #1b1f2b;

  --fg:        #e4e7ef;
  --fg-dim:    #9aa3b8;
  --fg-faint:  #646d84;

  --accent:      #6ea8fe;
  --accent-dim:  #2c4a7c;

  /* one hue per node kind — reused by the graph, the legend and the chips */
  --k-source:   #f0a868;
  --k-concept:  #6ea8fe;
  --k-note:     #7ee0c0;
  --k-entity:   #c89bf5;
  --k-analysis: #f58bb0;
  --k-index:    #e8d47a;
  --k-ghost:    #4a5169;

  --danger:  #ef6b73;
  --warn:    #e8b84b;
  --ok:      #5fd39a;

  --radius: 7px;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, "Segoe UI", Inter, Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* The UA rule for [hidden] is display:none, but any class rule setting
   `display` outruns it on specificity. Several elements here are toggled
   via .hidden and styled with display:flex/grid, so state this once. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.55 var(--sans);
  overflow: hidden;
}

button, input, select, textarea { font: inherit; color: inherit; }
.spacer { flex: 1; }

/* ------------------------------------------------------------ topbar */

#topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 12px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 7px; letter-spacing: .2px; }
.brand .logo { font-size: 17px; }
.stats { color: var(--fg-faint); font-size: 12px; font-family: var(--mono); margin-left: 10px; }

/* ------------------------------------------------------------ layout */

#layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr) 400px;
  height: calc(100% - 46px);
}

#sidebar, #panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-raised);
}
#sidebar { border-right: 1px solid var(--line); }
#panel   { border-left:  1px solid var(--line); }

.pane-head { padding: 10px; border-bottom: 1px solid var(--line-soft); }
.pane-head.tight { display: flex; gap: 6px; padding: 8px 10px; }
.pane-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-top: 1px solid var(--line-soft);
  color: var(--fg-faint); font-size: 11px; font-family: var(--mono);
}
.mini { color: var(--fg-faint); text-decoration: none; }
.mini:hover { color: var(--accent); }

/* ------------------------------------------------------------ inputs */

input, select, textarea {
  width: 100%;
  padding: 7px 9px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent-dim); }
input::placeholder, textarea::placeholder { color: var(--fg-faint); }
/* Tick boxes keep their own size: stretched to the row like a text box, they pushed their labels out of sight. */
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; }

.btn {
  padding: 5px 11px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg-dim);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background .12s, color .12s, border-color .12s;
}
.btn:hover  { background: #212636; color: var(--fg); border-color: #313850; }
.btn.small  { padding: 3px 9px; font-size: 12px; }
.btn.primary{ background: var(--accent-dim); border-color: #3a5f9e; color: #dbe7ff; }
.btn.primary:hover { background: #35538d; color: #fff; }
.btn.danger:hover  { background: #4a2226; border-color: #6d3238; color: var(--danger); }
.btn.ghost  { background: transparent; }
.btn:disabled { opacity: .45; cursor: default; }

kbd {
  font-family: var(--mono); font-size: 11px;
  background: var(--bg-input); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px;
}

/* ----------------------------------------------------------- filters */

.filters {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 8px 10px; border-bottom: 1px solid var(--line-soft);
}
.filter {
  padding: 2px 8px; font-size: 11px; font-family: var(--mono);
  background: var(--bg-input); border: 1px solid var(--line);
  border-radius: 20px; color: var(--fg-dim); cursor: pointer;
}
.filter:hover { color: var(--fg); }
.filter.on { background: var(--accent-dim); border-color: #3a5f9e; color: #dbe7ff; }

/* Domain-group toggles sit above the kind filters and read as a coarser
   control: they hide whole populations rather than one kind. */
.filters.groups { border-bottom-style: dashed; padding-bottom: 7px; }
.filters.groups .filter { border-radius: 4px; }

/* "Show all" is not one toggle among the group toggles — it overrides all of
   them — so it takes the full row and reads as a mode rather than a filter. */
.filter.wide {
  flex-basis: 100%;
  text-align: center;
  border-style: dashed;
  letter-spacing: .02em;
}
/* Overridden by "show all": still clickable (it is how you get back), but it
   must not look like a live toggle. */
.filter.muted { opacity: .4; }
.filter.muted:hover { opacity: .75; }

.filter.wide.on {
  border-style: solid;
  background: var(--accent-dim);
  border-color: #3a5f9e;
  color: #dbe7ff;
}

/* --------------------------------------------------------- node list */

.node-list { flex: 1; overflow-y: auto; padding: 6px; }

.node-item {
  padding: 7px 9px;
  border-radius: var(--radius);
  cursor: pointer;
  border-left: 2px solid transparent;
  margin-bottom: 1px;
}
.node-item:hover { background: #1a1f2c; }
.node-item.active { background: #1f2536; border-left-color: var(--accent); }
.node-item .t { display: block; }
.node-item .s {
  display: block; color: var(--fg-faint); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.node-item.is-ghost .t { color: var(--fg-faint); font-style: italic; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }

/* ------------------------------------------------------------- graph */

#graph-wrap { position: relative; min-width: 0; background: radial-gradient(ellipse at 50% 40%, #14192a 0%, var(--bg) 72%); }
#graph { position: absolute; inset: 0; }

/* Kind badges, drawn over the WebGL canvas. Transparent to the mouse so it
   never steals a click, a drag or an orbit from the graph underneath. */
.graph-labels {
  position: absolute; inset: 0;
  pointer-events: none;
}

.hint {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  color: var(--fg-faint); font-size: 11px; font-family: var(--mono);
  pointer-events: none; opacity: .75; text-align: center;
}

/* Above the hint, so a big view says why most lines are missing. */
.graph-focus { bottom: 30px; opacity: .9; color: var(--fg-dim); max-width: 80%; }

/* Trace controls: top centre, clear of the legend on the left. */
.trace-bar {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: calc(100% - 260px);
  padding: 6px 8px; border: 1px solid #5c4d1f; border-radius: 8px;
  background: rgba(14, 17, 25, 0.92); font-size: 11px; font-family: var(--mono); color: var(--fg-dim);
}
.trace-bar .tr-root { color: #ffd666; font-weight: 600; margin-right: 6px; max-width: 280px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.trace-bar .tr-root:hover { text-decoration: underline; }
.trace-bar .tr-label { color: var(--fg-faint); margin: 0 2px 0 8px; }
.trace-bar .tr-count { color: var(--fg-faint); margin: 0 6px; }

.legend {
  position: absolute; top: 12px; left: 12px;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; font-family: var(--mono); color: var(--fg-dim);
  background: rgba(12,14,19,.72); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 8px 10px; backdrop-filter: blur(3px);
}
.legend .row { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.legend .row.off { opacity: .35; }

/* Sits below the colour key and controls how nodes are drawn rather than which
   are shown, so it is separated by a rule instead of reading as another kind. */
.legend .badge-toggle {
  margin-top: 5px; padding-top: 6px;
  border-top: 1px solid var(--line-soft);
  color: var(--fg-faint);
}
.legend .code-swatch {
  display: inline-grid; place-items: center;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--fg-faint); color: #0e1119;
  font-size: 5.5px; font-weight: 700; letter-spacing: -.04em;
}
/* Icon mode: one glyph in the swatch instead of three cramped letters, and it
   comes from the lazily loaded font, so it only ever renders once that arrives. */
.legend .code-swatch.icon {
  font-family: BrainIcons, var(--mono);
  font-size: 6px; font-weight: 400; letter-spacing: 0;
}

.fallback {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; color: var(--fg-dim); padding: 30px;
}

/* --------------------------------------------------------- node info */

.graph-tooltip {
  font: 12px var(--sans) !important;
  background: rgba(16,19,27,.95) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 10px !important;
  color: var(--fg) !important;
  max-width: 280px;
}
.graph-tooltip .tt-kind { color: var(--fg-faint); font-family: var(--mono); font-size: 10.5px; }
.graph-tooltip .tt-sum  { color: var(--fg-dim); margin-top: 3px; }

/* ------------------------------------------------------------- panel */

.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tab {
  flex: 1; padding: 10px 4px; background: none; border: none;
  border-bottom: 2px solid transparent;
  color: var(--fg-faint); cursor: pointer; font-size: 12.5px;
}
.tab:hover { color: var(--fg-dim); }
.tab.active { color: var(--fg); border-bottom-color: var(--accent); }

.tab-body { display: none; flex: 1; overflow-y: auto; min-height: 0; }
.tab-body.active { display: flex; flex-direction: column; }

.placeholder { padding: 22px 18px; color: var(--fg-faint); }
.placeholder p { margin: 0 0 8px; }

/* -------------------------------------------------------------- note */

#note-view { padding: 16px 18px 30px; }
.note-head { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }

.chip {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .5px; padding: 2px 8px; border-radius: 20px;
  border: 1px solid currentColor; opacity: .9;
}
.flag {
  font-family: var(--mono); font-size: 10px; padding: 2px 7px;
  border-radius: 20px; margin-left: 4px;
  background: #3a2f18; color: var(--warn); border: 1px solid #5a4a25;
}

#note-title { font-size: 21px; margin: 0 0 6px; line-height: 1.25; }
.summary { color: var(--fg-dim); margin: 0 0 12px; font-style: italic; }

.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.tag {
  font-family: var(--mono); font-size: 11px; padding: 1px 7px;
  background: var(--bg-input); border: 1px solid var(--line);
  border-radius: 20px; color: var(--fg-dim); cursor: pointer;
}
.tag:hover { color: var(--accent); border-color: var(--accent-dim); }

.source-block {
  margin-top: 18px; padding: 12px; background: #17140f;
  border: 1px solid #3a2f1e; border-radius: var(--radius); font-size: 12.5px;
}
.source-block h4 { margin: 0 0 8px; color: var(--k-source); font-size: 12px; }
.source-block pre {
  max-height: 300px; overflow: auto; margin: 8px 0 0;
  font-family: var(--mono); font-size: 11.5px; color: var(--fg-dim); white-space: pre-wrap;
}

.meta {
  margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  color: var(--fg-faint); font-size: 11px; font-family: var(--mono); line-height: 1.8;
}

/* ---------------------------------------------------------- markdown */

.markdown { line-height: 1.65; }
.markdown h1, .markdown h2, .markdown h3 { line-height: 1.3; margin: 20px 0 8px; }
.markdown h1 { font-size: 18px; }
.markdown h2 { font-size: 15.5px; color: var(--fg); }
.markdown h3 { font-size: 14px; color: var(--fg-dim); }
.markdown p  { margin: 0 0 11px; }
.markdown ul, .markdown ol { margin: 0 0 11px; padding-left: 22px; }
.markdown li { margin-bottom: 3px; }
.markdown hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
.markdown code {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--bg-input); padding: 1px 5px; border-radius: 4px; color: #bcd3f5;
}
.markdown pre {
  background: #0a0c11; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 11px; overflow-x: auto; margin: 0 0 12px;
}
.markdown pre code { background: none; padding: 0; color: var(--fg-dim); }
.markdown blockquote {
  margin: 0 0 12px; padding: 2px 14px;
  border-left: 3px solid var(--accent-dim); color: var(--fg-dim);
}
.markdown a { color: var(--accent); }

.wikilink {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
}
.wikilink:hover { border-bottom-style: solid; border-bottom-color: var(--accent); }
.wikilink.ghost {
  color: var(--fg-faint); border-bottom: 1px dashed var(--fg-faint); font-style: italic;
}

/* -------------------------------------------------------------- edit */

#note-edit { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; flex: 1; min-height: 0; }
#note-edit label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--fg-faint); }
#note-edit .row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
#note-edit label.grow { flex: 1; min-height: 0; }
#note-edit textarea {
  flex: 1; min-height: 240px; resize: none;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
}
.form-actions { display: flex; align-items: center; gap: 8px; }
.status { color: var(--fg-faint); font-size: 11.5px; }
.status.err { color: var(--danger); }
.status.ok  { color: var(--ok); }

.autocomplete {
  position: absolute; z-index: 40; max-height: 200px; overflow-y: auto;
  background: var(--bg-input); border: 1px solid #313850;
  border-radius: var(--radius); box-shadow: 0 8px 26px rgba(0,0,0,.55); min-width: 230px;
}
.ac-item { padding: 6px 10px; cursor: pointer; font-size: 12.5px; }
.ac-item.on, .ac-item:hover { background: var(--accent-dim); color: #fff; }
.ac-item .ac-new { color: var(--ok); font-family: var(--mono); font-size: 11px; }

/* ------------------------------------------------------- links/lists */

.section { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.section h3 {
  margin: 0 0 10px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .7px; color: var(--fg-faint); font-family: var(--mono);
}
.link-row { padding: 7px 9px; border-radius: var(--radius); cursor: pointer; margin-bottom: 2px; }
.link-row:hover { background: #1a1f2c; }
.link-row .rel {
  font-family: var(--mono); font-size: 10px; color: var(--fg-faint);
  border: 1px solid var(--line); border-radius: 20px; padding: 0 6px; margin-left: 6px;
}
.link-row .ctx {
  display: block; color: var(--fg-faint); font-size: 11.5px; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* History rows reuse the link rows; a row is not itself clickable, its buttons are. */
.history-row { cursor: default; }
.history-pick { margin: 0 7px 0 0; vertical-align: -2px; }
.history-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.history-bar { margin: 4px 0 10px; }

/* ------------------------------------------------------------ health */

.finding { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.finding:hover { background: #1a1f2c; }
.finding .code {
  font-family: var(--mono); font-size: 10.5px; padding: 1px 6px;
  border-radius: 20px; border: 1px solid currentColor;
}
.finding.error .code { color: var(--danger); }
.finding.warn  .code { color: var(--warn); }
.finding.info  .code { color: var(--fg-faint); }
.finding .msg { margin: 6px 0 0; font-size: 12.5px; }
.finding .fix { margin: 5px 0 0; color: var(--fg-faint); font-size: 11.5px; }
.finding .where { color: var(--accent); font-size: 12px; }

.health-summary { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.health-summary.clean { color: var(--ok); }

/* --------------------------------------------------------------- log */

.log-entry {
  padding: 8px 14px; border-bottom: 1px solid var(--line-soft);
  font-size: 12px; display: flex; gap: 9px;
}
.log-entry .when { color: var(--fg-faint); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.log-entry .op {
  font-family: var(--mono); font-size: 10.5px; color: var(--accent);
  text-transform: uppercase; white-space: nowrap;
}
.log-entry .what { color: var(--fg-dim); }

/* ------------------------------------------------------------- toast */

.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--bg-input); border: 1px solid #313850;
  border-radius: var(--radius); padding: 9px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6); z-index: 100; font-size: 13px;
}
.toast.err { border-color: #6d3238; color: var(--danger); }
.toast.ok  { border-color: #2c5a45; color: var(--ok); }

/* -------------------------------------------------------- scrollbars */
/* A page shown in a frame (the run's Files) gets the same: FRAME_SCROLLBAR in app.js. */

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #262c3d; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #333b52; }

/* ------------------------------------------------------- narrow view */

@media (max-width: 1100px) {
  #layout { grid-template-columns: 220px minmax(0, 1fr) 340px; }
}
@media (max-width: 860px) {
  #layout { grid-template-columns: 1fr; grid-template-rows: 200px 1fr; }
  #sidebar { display: none; }
  #panel { border-left: none; border-top: 1px solid var(--line); }
}

/* ------------------------------------------------------------ review */
/* -------------------------------------------------------------- sign-in */

.signin {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 16px;
}
.signin-card {
  width: 100%; max-width: 380px; padding: 28px 26px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px;
}
.signin-brand { color: var(--fg-dim); margin-bottom: 14px; }
.signin-card h2 { margin: 0 0 8px; font-size: 20px; }
.signin-text { color: var(--fg-dim); font-size: 13px; line-height: 1.5; margin: 0 0 18px; }
.signin-buttons { display: flex; flex-direction: column; gap: 8px; }
.signin-buttons .btn { text-align: center; padding: 9px 12px; text-decoration: none; }
.signin-error { color: var(--danger); font-size: 12px; margin: 14px 0 0; }
.signin-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.signin-field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--fg-dim); }
.signin-pass { display: flex; gap: 6px; }
.signin-pass input { flex: 1; min-width: 0; }
.signin-hint { font-size: 11.5px; color: var(--fg-faint); line-height: 1.4; }
.signin-form .btn.primary { padding: 9px 12px; }
.signin-switch { align-self: center; }
.signin-or { text-align: center; font-size: 12px; color: var(--fg-faint); }
/* Setting up this computer: the sign-in card, wider for the set-up line. */
.signin.setup .signin-card { max-width: 560px; }
.setup-steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.setup-step { display: flex; gap: 10px; align-items: flex-start; }
.setup-tick { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--fg-faint); }
.setup-step.done .setup-tick { border-color: var(--ok); color: var(--ok); }
.setup-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.setup-title { font-size: 13px; line-height: 1.45; }
.setup-step.done .setup-title { color: var(--fg-dim); }
.setup-code { margin: 0; padding: 8px 10px; font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg-input); border: 1px solid var(--line); border-radius: 6px; }
.connect-code { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 0 16px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-input); }
.connect-code-label { font-size: 12px; color: var(--fg-dim); text-align: center; }
.connect-code strong { font-family: var(--mono); font-size: 22px; letter-spacing: .12em; }
.connector-form, .account-form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.people-link { display: flex; gap: 6px; flex-basis: 100%; }
.people-link select { flex: 1; min-width: 0; }
.me-chip { font-size: 12px; color: var(--fg-dim); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* What this person's roles do not allow is not offered; the server refuses it anyway. */
body.no-write #btn-new, body.no-write #btn-feature, body.no-write #btn-edit, body.no-write #btn-delete,
body.no-review .decide-btn, body.no-settings #btn-reindex, body.no-agents .sandy-pip[data-act="work"] { display: none !important; }

/* -------------------------------------------------------------- people */

.people-brain { margin: 18px 0 2px; font-size: 14px; }
#people-scope { margin-bottom: 10px; }
.people-section h4 { margin: 14px 0 6px; font-size: 12px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .04em; }
.people-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.people-who { flex: 1 1 200px; min-width: 0; }
.people-name { font-size: 13px; }
.people-meta { font-size: 11px; color: var(--fg-faint); overflow-wrap: anywhere; }
.people-roles { display: flex; flex-wrap: wrap; gap: 4px; }
.people-actions { display: flex; gap: 6px; }
.token-new { display: flex; gap: 6px; margin-top: 8px; }
.token-new input { flex: 1; }
.token-shown { font-family: var(--mono); font-size: 12px; margin-top: 8px; overflow-wrap: anywhere; }

.tab-count {
  display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 3px;
  border-radius: 8px; background: var(--warn); color: var(--bg);
  font-size: 10.5px; font-weight: 600; line-height: 16px; text-align: center;
}
.review-section {
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  color: var(--fg-faint); font-size: 11px; font-family: var(--mono); text-transform: uppercase;
}
.review-item { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
/* Arrived while the tab was open: appended at the bottom, lit briefly. */
.review-item.review-new { animation: review-new 4s ease-out; }
@keyframes review-new { from { background: var(--accent-dim); } to { background: transparent; } }
.review-head .code { font-family: var(--mono); font-size: 11.5px; color: var(--warn); }
.review-item.created .review-head .code { color: var(--ok); }
/* Which kind of page the change is to, and its status; hover the kind for its outline. */
.review-kind { display: inline-flex; gap: 6px; align-items: center; margin: 0 8px; vertical-align: middle; }
.review-kind .chip { cursor: help; }
.review-status { font-family: var(--mono); font-size: 10.5px; color: var(--fg-faint); }
.review-status.stub { color: var(--warn); }
.review-status.established { color: var(--ok); }
/* Removals read as removals: struck red lines, not the green of an addition. */
.review-diff.unlink { text-decoration: none; }
.review-diff.unlink .unlink-head { font-weight: 600; margin-bottom: 4px; }
.review-diff.unlink .unlink-row { white-space: pre-wrap; }
.review-diff.unlink .btn { margin-top: 4px; }
/* Links a change adds, with the note on each (what a citation used). */
.review-diff.links { white-space: normal; }
.review-diff.links .unlink-head { font-weight: 600; margin-bottom: 4px; }
.review-diff.links .unlink-row { white-space: pre-wrap; margin: 2px 0; }
.review-diff.links .link-note { color: var(--fg); }
.review-diff.links .link-note.missing { color: var(--warn); font-style: italic; }
.review-item.gap .review-head .code { color: var(--fg-faint); }
.review-head .where { color: var(--accent); font-size: 12px; }
.review-sub { margin: 5px 0 0; color: var(--fg-faint); font-size: 11.5px; }
.review-reason { margin: 5px 0 0; font-size: 12.5px; }
.review-reason.missing, .review-cites.missing, .review-cite.missing { color: var(--fg-faint); }
.review-cites { margin: 4px 0 0; font-size: 12px; }
.review-cite { color: var(--accent); }
.review-session { cursor: help; }
.review-origins-more { margin: 6px 0 0; font-size: 11.5px; color: var(--fg-faint); }
.review-origins-more summary { cursor: pointer; }
.review-origins-more .review-origin { margin: 4px 0 0 12px; padding-left: 8px; border-left: 2px solid var(--line); }
.review-diff {
  margin: 6px 0 0; padding: 6px 8px; border-radius: var(--radius);
  font: 12px/1.45 var(--mono); white-space: pre-wrap; word-break: break-word;
  max-height: 220px; overflow-y: auto;
}
.review-diff.add { background: #14271e; border-left: 3px solid var(--ok); }
.review-diff.del { background: #2a1719; border-left: 3px solid var(--danger); text-decoration: line-through; }
.review-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
/* Raw markdown or a rendered preview of the same text; one of the two is hidden. */
.review-diff.review-preview { font: inherit; white-space: normal; text-decoration: none; }
.review-diff.review-preview.del { opacity: 0.75; }
/* Card buttons: decisions on the left, ways of looking on the right. */
.review-actions { justify-content: space-between; align-items: center; }
.review-actions-main, .review-actions-side { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.review-actions-side { margin-left: auto; }
/* "Raw ◯ Preview": one switch, labelled on both sides; the side that is on is bright. */
.view-toggle { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; font-size: 12px; user-select: none; }
.vt-label { color: var(--fg-faint); cursor: pointer; }
.vt-label.on { color: var(--fg); font-weight: 600; }
.switch.small { width: 30px; height: 18px; }
.switch.small .switch-track { border-radius: 9px; background: var(--accent-dim); }
.switch.small .switch-track::after { top: 3px; left: 3px; width: 12px; height: 12px; }
.switch.small input:checked + .switch-track { background: var(--accent-dim); }
.switch.small input:checked + .switch-track::after { transform: translateX(12px); }
.compare-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.compare-head .spacer { flex: 1; }
/* Preview with changes marked: whole blocks added or removed, and changed words inside. */
.cmp-block { border-left: 3px solid transparent; padding-left: 8px; margin-left: -11px; }
.cmp-added, .cmp-changed-ins { border-left-color: var(--ok); background: rgba(95, 211, 154, 0.07); }
.cmp-removed, .cmp-changed-del { border-left-color: var(--danger); background: rgba(240, 100, 110, 0.07); }
.cmp-removed { text-decoration: line-through; opacity: 0.8; }
mark.cmp-ins { background: rgba(95, 211, 154, 0.32); color: inherit; border-radius: 2px; }
mark.cmp-del { background: rgba(240, 100, 110, 0.32); color: inherit; border-radius: 2px; text-decoration: line-through; }
.compare-col .markdown { padding-left: 11px; }
.cmp-legend { margin: 0 0 8px; }
.compare-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.compare-col { min-width: 0; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 0 10px 10px; }
@media (max-width: 760px) { .compare-preview { grid-template-columns: 1fr; } }
.review-off { margin: 8px 12px; padding: 8px 10px; border-left: 3px solid var(--warn); background: rgba(255, 184, 107, 0.08); font-size: 12.5px; }
.review-off .btn { margin-left: 6px; }
.review-item.unqueued .review-head .code { color: var(--warn); }
/* Settings */
/* One card per setting group; each row is text on the left, its control on the right. */
.settings { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin: 0 auto; }
.settings-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-input); padding: 12px 14px; }
.settings-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.settings-card-head h3 { margin: 0; font-size: 14px; }
.settings-scope { margin-left: auto; font: 11px var(--mono); color: var(--fg-faint); text-transform: uppercase; letter-spacing: .04em; }
.settings-row { display: flex; align-items: center; gap: 16px; }
/* A card that mixes scopes (Run tabs): each part labelled as a card header's scope is. */
.settings-sub { margin: 14px 0 8px; font: 11px var(--mono); color: var(--fg-faint); text-transform: uppercase; letter-spacing: .04em; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.settings-card-head + .settings-sub { margin-top: 0; border-top: 0; padding-top: 0; }
.settings-row-text { flex: 1; min-width: 0; }
.settings-row-title { font-weight: 600; }
.settings-row-desc { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--fg-faint); }
.settings-brain-first-note { margin-top: 10px; }
.settings-row-control { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.settings-always { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.settings-always-label { font-size: 12px; color: var(--fg-faint); margin-right: 2px; }
.settings-chip-plain { color: var(--fg-faint); }
.settings-card-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.settings-meta { flex: 1; font-size: 12px; color: var(--fg-faint); }
/* A switch, from a checkbox: the global input rule would stretch it full width. */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; padding: 0; cursor: pointer; }
.switch-track { position: absolute; inset: 0; border-radius: 11px; background: var(--line); transition: background .15s; }
.switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--fg); transition: transform .15s; }
.switch input:checked + .switch-track { background: var(--ok); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent-dim); outline-offset: 2px; }
.switch-state { font: 600 12px var(--mono); color: var(--ok); min-width: 24px; text-align: right; }
.switch-state.off { color: var(--warn); }
/* A slider for a value in a range (Settings: review refresh, 2 s to 1 min).
   The global input rule stretches inputs to full width, so size it here. */
.settings-range { width: 140px; flex: none; accent-color: var(--accent); }
#settings-context-people { flex-direction: column; align-items: stretch; }
.settings-context-people { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.settings-context-person { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.settings-context-name { font-weight: 600; min-width: 10em; }
.settings-context-no { color: var(--danger); }
.settings-context-required { color: var(--warn); }
.settings-range:disabled { opacity: 0.4; }
.settings-range-value { font: 600 12px var(--mono); color: var(--fg-dim); min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; }
/* Two-choice segmented control. */
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.segmented-btn { padding: 5px 12px; background: transparent; border: 0; cursor: pointer; color: var(--fg-faint); font-size: 12.5px; }
.segmented-btn + .segmented-btn { border-left: 1px solid var(--line); }
.segmented-btn.on { background: var(--accent-dim); color: #dbe7ff; }
@media (max-width: 560px) { .settings-row { flex-direction: column; align-items: flex-start; } }
/* Several changes to one page: one card, a step per change, oldest first. */
.review-step { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--radius); }
.review-step.created .review-head .code { color: var(--ok); }
.review-step.waiting { opacity: 0.6; }
.review-step.waiting .review-head .code::after { content: ' · waits for the one above'; color: var(--fg-faint); }
.review-actions .btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ------------------------------------------------------------ screenshots */
.assets { margin-top: 18px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.assets-head { display: flex; align-items: center; gap: 6px; color: var(--fg-faint); font-size: 11.5px; font-family: var(--mono); }
.assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 8px; }
.assets-empty { grid-column: 1 / -1; margin: 0; color: var(--fg-faint); font-size: 12px; }
.asset { position: relative; margin: 0; }
.asset img {
  display: block; width: 100%; height: 96px; object-fit: cover; object-position: top;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: zoom-in; background: var(--bg-input);
}
.asset img:hover { border-color: var(--accent-dim); }
.asset figcaption { margin-top: 3px; color: var(--fg-dim); font-size: 11px; line-height: 1.3; }
.asset-del {
  position: absolute; top: 4px; right: 4px; display: none;
  padding: 0 6px; border: 1px solid var(--line); border-radius: 5px;
  background: rgba(12, 14, 19, 0.85); color: var(--fg-dim); font-size: 11px; cursor: pointer;
}
.asset:hover .asset-del { display: block; }
.asset-del:hover { color: var(--danger); border-color: #6d3238; }
.asset-full { display: block; max-width: 100%; margin: 0 auto; border-radius: var(--radius); }

/* ------------------------------------------------------------ modal */
.modal {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(5, 6, 9, 0.72); padding: 24px;
}
.modal-box {
  display: flex; flex-direction: column; width: min(760px, 100%); max-height: 100%;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.modal.wide .modal-box { width: min(1500px, 100%); }
.modal-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.modal-body { overflow: auto; padding: 12px 14px; }
/* Outside the scrolling body, so the decision is in reach however long the diff. */
.modal-foot { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line); }
.modal-foot .note { color: var(--fg-faint); font-size: 11.5px; }
.icon-btn { padding: 2px 7px; font-size: 13px; line-height: 1; }

/* ------------------------------------------------------------ AI work (Sandy's work bubble, run messages) */
.agent-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
/* Push to talk: red while listening; a branch it heard is ringed until tapped or said with "send". */
.run-speak.listening { background: #4a2226; border-color: #6d3238; color: var(--danger); }
.btn.spoken { box-shadow: 0 0 0 2px var(--warn); }
.agent-cli { margin-top: 6px; background: var(--bg-input); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); padding: 3px 6px; font-size: 12px; }
.agent-ask { width: 100%; box-sizing: border-box; margin-top: 6px; background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; font: 12.5px/1.4 inherit; resize: vertical; }
.agent-note { color: var(--fg-faint); font-size: 11.5px; margin: 6px 0 0; }
.agent-cmd { font: 12px var(--mono); background: var(--bg-input); padding: 6px 8px; border-radius: var(--radius); margin: 6px 0; }
.agent-log { max-height: 320px; overflow-y: auto; margin-top: 8px; font: 11.5px/1.45 var(--mono); }
.agent-log:empty { display: none; }
.agent-ev { white-space: pre-wrap; word-break: break-word; padding: 1px 0; color: var(--fg-dim); }
.agent-ev.text { color: var(--fg); font-family: inherit; margin: 4px 0; }
.agent-ev.tool { color: var(--fg-faint); }
.agent-ev.tool.write { color: var(--ok); font-weight: 600; }
.agent-ev.warn, .agent-ev.bad { color: var(--warn); }
.agent-ev.result { color: var(--ok); margin-top: 4px; }
.agent-ev.stderr { color: var(--fg-faint); opacity: .7; }
.full-head { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.full-doc { max-width: 1100px; font-size: 14px; }

/* ------------------------------------------------------------ side-by-side diff */
.sbs { width: 100%; border-collapse: collapse; table-layout: fixed; font: 12px/1.5 var(--mono); }
.sbs th { position: sticky; top: -12px; background: var(--bg-raised); text-align: left; padding: 6px 8px;
  color: var(--fg-faint); font-weight: 500; border-bottom: 1px solid var(--line); }
.sbs th.num, .sbs td.num { width: 42px; }
.sbs td { vertical-align: top; padding: 1px 8px; }
.sbs td.num { color: var(--fg-faint); text-align: right; user-select: none; border-right: 1px solid var(--line-soft); }
.sbs td.code { white-space: pre-wrap; word-break: break-word; }
.sbs td.code.empty { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--line-soft) 6px 7px); }
.sbs td.side-del { background: #2a1719; }
.sbs td.side-add { background: #14271e; }
.sbs .hl-del { background: #6d3238; border-radius: 2px; }
.sbs .hl-add { background: #1f5a3a; border-radius: 2px; }
.sbs td.fold { text-align: center; color: var(--fg-faint); cursor: pointer; padding: 4px; background: var(--bg-input); }
.sbs td.fold:hover { color: var(--accent); }
.modal-body .review-section { margin: 10px -14px 6px; }

/* ------------------------------------------------------------ markdown tables */
.markdown .md-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 12.5px; }
.markdown .md-table th, .markdown .md-table td {
  text-align: left; vertical-align: top; padding: 5px 8px; border: 1px solid var(--line);
}
.markdown .md-table th { background: var(--bg-input); color: var(--fg-dim); font-weight: 600; }
/* The side panel is narrow: a four-column Calls table scrolls inside itself
   rather than being clipped, and long identifiers wrap instead of widening it. */
.markdown .md-table { display: block; max-width: 100%; overflow-x: auto; font-size: 12px; }
.markdown .md-table th, .markdown .md-table td { min-width: 90px; overflow-wrap: anywhere; }
.markdown .md-table code { white-space: normal; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ workflows */
/* The full-screen view: description | flow chart. Below the
   modal (50) so a popup can still open over it, above everything else. */
/* A workflow's own tab (/?flow=<id>): the flow view is the whole page. */
body.flow-only #topbar, body.flow-only #layout { display: none; }
.flow-screen { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; background: var(--bg); }
.flow-head { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--bg-raised); border-bottom: 1px solid var(--line); }
.flow-head strong { font-size: 15px; }
.flow-main { flex: 1; min-height: 0; display: flex; }
.flow-desc { width: 340px; flex: none; overflow: auto; padding: 12px 16px; border-right: 1px solid var(--line); background: var(--bg-raised); }
.flow-desc .markdown { font-size: 13px; }
.flow-canvas { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.flow-split { flex: 1; min-width: 0; display: flex; flex-direction: column; border-left: 2px solid var(--line); }
.flow-split-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--bg-raised); border-bottom: 1px solid var(--line); }
.flow-split-head strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-split .flow-canvas { flex: 1; min-height: 0; }
.flow-peek h3 { margin: 4px 0; font-size: 15px; }
.flow-peek .btn { margin-top: 8px; }
.btn.toggle.on { background: var(--accent-dim); border-color: #3a5f9e; color: #dbe7ff; }

/* The card in the side panel, where the diagram block sits in the page. */
.wf-card { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; padding: 8px 10px;
  background: var(--bg-input); border: 1px solid var(--line); border-radius: var(--radius); }
.wf-info { display: flex; flex-direction: column; flex: 1; min-width: 140px; line-height: 1.3; }
.wf-info span { color: var(--fg-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
/* A skill no agent may use yet: the reason to open the Review tab. */
.wf-card.waiting { border-color: #5a4a25; }
.wf-card.waiting strong { color: var(--warn); }

/* A skill's copy of another brain's skill: marked off, with where it came from. */
.based-on { margin: 14px 0; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); }
.based-on-head { padding: 8px 10px; background: var(--bg-input); border-bottom: 1px solid var(--line); line-height: 1.4; }
.based-on-head span { display: block; color: var(--fg-dim); font-size: 12px; }
.based-on-body { padding: 4px 12px 8px; }

/* A source's "Used in": what each citing page took from it. */
.src-used { margin: 8px 0; }
.src-used .ctx.missing { color: var(--warn); font-style: italic; }

/* A feature as a plan: tickets, hours against the budget. */
.ft-card { flex-direction: column; align-items: stretch; }
.ft-card > .btn { align-self: flex-start; }
.ft-warn { color: var(--warn); font-size: 12px; }
.ft-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.ft-fill { height: 100%; background: var(--ok, #3fb950); }
.ft-bar.over .ft-fill { background: var(--warn); }
.ft-tickets { width: 100%; border-collapse: collapse; font-size: 12px; }
.ft-tickets td, .ft-tickets th { padding: 3px 6px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.ft-tickets .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ft-tickets .muted, .ft-line.muted { color: var(--fg-dim); }
.ft-line { font-size: 12px; }
.ft-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.ft-field span { font-size: 12px; color: var(--fg-dim); }
.ft-field input, .ft-field textarea { width: 100%; box-sizing: border-box; }

/* The canvas (public/diagram.js). Shapes after the WorkflowEngin designer. */
.dg { position: relative; }
.dg-canvas { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; user-select: none;
  background-color: var(--bg); background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 24px 24px; }
.dg-canvas.panning { cursor: grabbing; }
.dg-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.dg-edges { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.dg-edge { fill: none; stroke: #5b6580; stroke-width: 2; transition: stroke .2s, opacity .2s; }
.dg-edge.on { stroke: var(--accent); stroke-width: 2.4; }
.dg-edge.flow { stroke: var(--warn); stroke-width: 2.6; stroke-dasharray: 7 6; animation: dg-march .6s linear infinite; }
.dg-edge.dim { opacity: .35; }
.dg-edge.sel { stroke: var(--accent); stroke-width: 3; }
.dg-edge.temp { stroke: var(--warn); stroke-dasharray: 5 5; }
.dg-ehit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
@keyframes dg-march { to { stroke-dashoffset: -26; } }
.dg-labels { position: absolute; top: 0; left: 0; pointer-events: none; }
.dg-elabel { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font: 600 10.5px var(--mono);
  padding: 1px 6px; border-radius: 9px; background: var(--bg-raised); border: 1px solid var(--line); color: var(--fg-dim); }
.dg-elabel.on { color: var(--accent); border-color: var(--accent-dim); }
.dg-elabel.flow { color: var(--warn); border-color: var(--warn); }
.dg-elabel.dim { opacity: .4; }
.dg-elabel.sel { border-color: var(--accent); color: var(--fg); }
.dg.editing .dg-elabel { pointer-events: auto; cursor: pointer; }

.dg-node { position: absolute; width: 210px; box-sizing: border-box; padding: 8px 12px; border-radius: 8px;
  background: var(--bg-input); border: 1.5px solid #3a4360; box-shadow: 0 4px 14px -6px rgba(0,0,0,.6);
  cursor: pointer; transition: opacity .2s, box-shadow .2s, border-color .2s; }
.dg.editing .dg-node { cursor: grab; }
.dg-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.dg-k { font: 700 9px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--fg-faint); }
.dg-t { font-size: 12.5px; line-height: 1.3; color: var(--fg); overflow-wrap: anywhere; }
.dg-ref { font: 10.5px var(--mono); color: var(--accent); text-decoration: underline dotted; overflow-wrap: anywhere; cursor: pointer; }
.dg-ref.ghost { color: var(--fg-faint); }
/* A step's skill or sub-workflow: the kind as a small tag before the name, so it reads at a glance. */
.dg-ref-k { display: inline-block; margin-right: 5px; padding: 0 5px; border-radius: 3px; font: 600 9.5px var(--sans);
  text-decoration: none; letter-spacing: .02em; vertical-align: 1px; }
.dg-ref.skill .dg-ref-k { background: rgba(176, 132, 255, .18); color: #c9a8ff; }
.dg-ref.subflow .dg-ref-k { background: rgba(84, 200, 160, .18); color: #7fdcb9; }
.dg-ref.ghost .dg-ref-k { background: var(--bg-input); color: var(--fg-faint); }
.dg-uses-box { display: grid; gap: 5px; }
.dg-uses-box .segmented-btn { padding: 4px 8px; font-size: 11.5px; }
.dg-node.start, .dg-node.end { width: 160px; border-radius: 999px; padding-left: 18px; padding-right: 18px; text-align: center; }
.dg-node.start .dg-inner, .dg-node.end .dg-inner { align-items: center; }
.dg-node.start { border-color: var(--ok); } .dg-node.start .dg-k { color: var(--ok); }
.dg-node.end { border-color: var(--danger); } .dg-node.end .dg-k { color: var(--danger); }
.dg-node.step { border-color: #3a5f9e; } .dg-node.step .dg-k { color: var(--accent); }
.dg-node.note { background: #221f14; border: 1px dashed #6b5d2c; box-shadow: none; }
.dg-node.note .dg-k { color: var(--warn); } .dg-node.note .dg-t { color: var(--fg-dim); font-size: 12px; }
.dg-node.decision { width: 156px; height: 156px; min-width: 0; padding: 0; background: transparent; border: 0; box-shadow: none;
  display: flex; align-items: center; justify-content: center; text-align: center; }
.dg-node.decision::before { content: ""; position: absolute; left: 50%; top: 50%; width: 108px; height: 108px;
  transform: translate(-50%, -50%) rotate(45deg); background: var(--bg-input); border: 1.5px solid var(--warn);
  border-radius: 6px; box-shadow: 0 4px 14px -6px rgba(0,0,0,.6); transition: box-shadow .2s; }
.dg-node.decision .dg-inner { max-width: 104px; align-items: center; }
.dg-node.decision .dg-k { color: var(--warn); }
.dg-node.decision .dg-t { font-size: 12px; }
.dg-node.sel { box-shadow: 0 0 0 2px var(--accent); }
.dg-node.decision.sel { box-shadow: none; }
.dg-node.decision.sel::before { box-shadow: 0 0 0 2px var(--accent); }
.dg-node.lit { border-color: var(--accent); }
.dg-node.decision.lit::before { border-color: var(--accent); }
/* The current step, narrated or in a live run: one highlighter that fades in and out.
   Amber for the walk-through and a step waiting for a person, blue while a run works on it.
   A decision draws it on its diamond (::before), not on the square box around it. */
.dg-node.now { --now: var(--warn); --now-glow: rgba(232, 184, 75, .55);
  background-color: color-mix(in srgb, var(--now) 16%, var(--bg-input)); animation: dg-now 2.4s ease-in-out infinite alternate; }
.dg-node.now.now-run { --now: var(--accent); --now-glow: rgba(110, 168, 254, .6); }
.dg-node.decision.now { background-color: transparent; animation: none; box-shadow: none; }
.dg-node.decision.now::before { background-color: color-mix(in srgb, var(--now) 16%, var(--bg-input)); animation: dg-now 2.4s ease-in-out infinite alternate; }
@keyframes dg-now {
  from { box-shadow: 0 0 0 2px var(--now), 0 0 2px 0 var(--now-glow); }
  to   { box-shadow: 0 0 0 3px var(--now), 0 0 30px 8px var(--now-glow); }
}
.dg-now-tag { position: absolute; top: -9px; right: 10px; z-index: 2; padding: 0 7px; border-radius: 999px;
  font: 700 9.5px/16px var(--mono); letter-spacing: .06em; text-transform: uppercase;
  background: var(--now); color: var(--bg); box-shadow: 0 1px 4px rgba(0,0,0,.5); }
/* How far along a sub-workflow step is in a live run: "3 of 7", bottom right of its box. */
.dg-progress { position: absolute; bottom: -9px; right: 10px; z-index: 2; padding: 0 7px; border-radius: 999px;
  font: 600 10px/16px var(--mono); background: var(--bg-raised); color: var(--fg); border: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.dg-node.decision .dg-now-tag { top: 2px; right: auto; left: 50%; transform: translateX(-50%); }
.dg-canvas.playing .dg-node:not(.now):not(.lit) { opacity: .45; }
.dg-node.drop { outline: 2px dashed var(--accent); outline-offset: 3px; }
.dg-port { position: absolute; left: 50%; bottom: -7px; width: 13px; height: 13px; margin-left: -6.5px; z-index: 2;
  border-radius: 50%; background: var(--warn); border: 2px solid var(--bg); cursor: crosshair; }
.dg-node.decision .dg-port { bottom: 0; }
.dg-port:hover { background: var(--accent); }

.dg-palette { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 8px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); max-width: calc(100% - 330px); }
.dg-pal-label { font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); }
.dg-add.start { border-color: var(--ok); }
.dg-add.end { border-color: var(--danger); }
.dg-add.decision { border-color: var(--warn); }
.dg-add.step { border-color: #3a5f9e; }
.dg-add.note { border-style: dashed; }
.dg-inspector { position: absolute; top: 10px; right: 10px; z-index: 3; width: 290px; display: grid; gap: 8px; padding: 10px 12px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.dg-field { display: grid; gap: 3px; font-size: 11.5px; color: var(--fg-dim); }
.dg-field input, .dg-field select, .dg-field textarea { background: var(--bg-input); color: var(--fg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 5px 7px; font: 12.5px/1.4 var(--sans); resize: vertical; }
.dg-hint { margin: 0; color: var(--fg-faint); font-size: 12px; }
.dg-problems { position: absolute; top: 58px; left: 10px; z-index: 4; max-width: 460px; padding: 8px 12px; font-size: 12.5px;
  background: #2a1719; border: 1px solid #6d3238; border-radius: var(--radius); }
.dg-problems ul { margin: 4px 0 0; padding-left: 18px; }

.dg-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: flex; align-items: flex-start; gap: 14px;
  padding: 8px 12px; background: rgba(19, 22, 30, .96); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.dg-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: none; max-width: 48%; }
.dg-voice { background: var(--bg-input); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 5px; font-size: 12px; max-width: 190px; }
.dg-voice.dg-rate { width: auto; }
.dg-caption { flex: 1; min-width: 0; }
.dg-caption p { margin: 3px 0 0; font-size: 13px; color: var(--fg-dim); max-width: 75ch; }
.dg-cap-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.dg-cap-head strong { font-size: 13.5px; }
.dg-cap-k { font: 700 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.dg-cap-k.start { color: var(--ok); }
.dg-cap-k.end { color: var(--danger); }
.dg-cap-k.decision, .dg-cap-k.note { color: var(--warn); }
.dg-cap-n { font: 11px var(--mono); color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.dg-cap-ref { background: none; border: 0; padding: 0; font: 11.5px var(--mono); color: var(--accent); cursor: pointer; }
.dg-cap-ref:hover { text-decoration: underline; }
.dg-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.dg-caption p.dg-done { color: var(--ok); }
.dg-empty { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.dg-empty-box { pointer-events: auto; max-width: 440px; padding: 18px 22px; text-align: center;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px; }
.dg-empty-box h3 { margin: 0 0 6px; }
.dg-empty-box p { color: var(--fg-dim); margin: 0 0 12px; }
.dg-empty-box .agent-row { justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .dg-edge.flow { animation: none; }
  .dg-node, .dg-edge { transition: none; }
  /* The highlighter stays lit, without fading. */
  .dg-node.now:not(.decision), .dg-node.decision.now::before { animation: none; box-shadow: 0 0 0 3px var(--now), 0 0 22px 6px var(--now-glow); }
}

/* Ticket forms (public/ticket-forms.js). Copies of the Jira work item view and
   the SALNet timesheet entry as saved on 2026-09-30, so they keep those apps
   own light colours whatever the brain's theme. tools/export-plan.js copies
   this block, from this comment to "end ticket forms". */
.tf-wrap { margin: 8px 0 16px; }
.tf-caption { font-size: 11.5px; color: var(--fg-faint); margin-bottom: 4px; }
.tf { color-scheme: light; background: #fff; color: #172b4d; border: 1px solid #dcdfe4; border-radius: 6px; overflow: hidden;
  font: 14px/1.45 -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif; text-align: left; }
.tf * { box-sizing: border-box; }
.tf-extra { padding: 8px 12px; border-top: 1px solid #dcdfe4; background: #f7f8f9; font-size: 12.5px; color: #44546f; }
.tf-extra dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 4px 0 0; }
.tf-extra dt { font-weight: 600; }
.tf-extra dd { margin: 0; overflow-wrap: anywhere; }

/* Jira: the main column and the Details column, side by side when there is
   room, stacked in a narrow panel. */
.tf-wrap { container-type: inline-size; }
.tf-jira { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 340px); }
@container (max-width: 640px) { .tf-jira { display: block; } .tfj-side { border-left: 0; border-top: 1px solid #f1f2f4; } }
.tfj-main { padding: 18px 22px 22px 30px; min-width: 0; }
.tfj-side { padding: 14px 16px 18px; background: #fff; border-left: 1px solid #f1f2f4; min-width: 0; }
.tfj-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: #44546f; }
.tfj-crumb { display: inline-flex; align-items: center; gap: 5px; }
.tfj-sep { color: #8590a2; }
.tfj-title { margin: 10px 0; font-size: 22px; line-height: 1.25; font-weight: 600; color: #172b4d; overflow-wrap: anywhere; }
.tfj-tools { display: flex; gap: 8px; margin-bottom: 14px; }
.tfj-tool { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #dcdfe4; border-radius: 4px; color: #44546f; font-size: 14px; }
.tfj-section { margin: 14px 0 0; }
.tfj-section-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; margin-left: -22px; }
.tfj-section-head.tfj-nochev { margin-left: 0; }
.tfj-chev { width: 14px; color: #44546f; font-size: 12px; text-align: center; }
.tfj-desc p { margin: 8px 0 0; overflow-wrap: anywhere; }
/* A full description: Jira's own body text, not the brain's headings and colours. */
.tfj-rich { font-size: 14px; color: #172b4d; }
.tfj-rich h1, .tfj-rich h2, .tfj-rich h3, .tfj-rich h4 { font-size: 15px; margin: 14px 0 4px; color: #172b4d; }
.tfj-rich ul, .tfj-rich ol { margin: 6px 0 0; padding-left: 24px; }
.tfj-rich li { margin: 2px 0; }
.tfj-rich code { font: 12.5px ui-monospace, Consolas, monospace; background: #f1f2f4; color: #172b4d; padding: 0 3px; border-radius: 3px; }
.tfj-rich strong { font-weight: 600; }
/* Given / When / Then are one line each: keep a scenario together, and space the
   bold headings (Assumptions, Scenario n) from what came before. */
.tfj-rich p { margin: 2px 0 0; }
.tfj-rich p:has(> strong:only-child) { margin-top: 14px; }
.tfj-rich a.wikilink { color: #172b4d; text-decoration: none; pointer-events: none; }
.tfj-empty { color: #626f86; }
.tfj-pad { padding: 6px 0 0; }
.tfj-drop { margin-top: 8px; padding: 18px; border: 1px dashed #dcdfe4; border-radius: 4px; text-align: center; }
.tfj-btn { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid #dcdfe4; border-radius: 4px; color: #44546f; font-size: 13.5px; background: #fff; }
.tfj-verb { font-size: 12px; font-weight: 600; margin: 8px 0 4px; }
.tfj-links { border: 1px solid #dcdfe4; border-radius: 4px; }
.tfj-link { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid #f1f2f4; font-size: 13.5px; min-width: 0; }
.tfj-link:first-child { border-top: 0; }
.tfj-link-key { color: #44546f; white-space: nowrap; }
.tfj-link-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tfj-statusbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tfj-status { display: inline-flex; align-items: center; padding: 5px 12px; background: #e9f2ff; color: #0055cc; border-radius: 4px; font-weight: 500; font-size: 14px; }
.tfj-panel { border: 1px solid #dcdfe4; border-radius: 6px; padding: 10px 14px 6px; margin-bottom: 10px; }
.tfj-panel-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; margin: 2px 0 10px; }
.tfj-field { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; font-size: 13.5px; }
.tfj-label { color: #44546f; font-weight: 500; line-height: 1.3; }
.tfj-value { min-width: 0; overflow-wrap: anywhere; }
.tfj-person { display: inline-flex; align-items: center; gap: 8px; }
.tfj-avatar { width: 24px; height: 24px; border-radius: 50%; background: #6e5dc6; color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.tfj-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tfj-label-chip { padding: 0 4px; border: 1px solid #f87168; border-radius: 3px; font-size: 12px; color: #172b4d; }
.tfj-comp-chip { padding: 0 4px; border: 1px solid #8590a2; border-radius: 3px; font-size: 12px; }
.tfj-est { padding: 0 4px; background: #dcdfe4; border-radius: 3px; font-size: 12px; }
.tfj-track { display: flex; flex-direction: column; gap: 3px; }
.tfj-track-bar { height: 4px; border-radius: 2px; background: #dcdfe4; }
.tfj-track .tfj-empty { font-size: 12.5px; }
.tfj-parent { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.tfj-parent-name { padding: 1px 6px; border: 1px solid #dcdfe4; border-radius: 3px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tfj-link-blue { color: #0c66e4; }
.tfj-prio { display: inline-flex; align-items: center; gap: 6px; }
.tfj-prio-icon { font-weight: 700; }
.tfj-prio-high { color: #e2483d; }
.tfj-prio-medium { color: #e2b203; }
.tfj-prio-low { color: #0c66e4; }
.tfj-type { display: inline-block; width: 14px; height: 14px; border-radius: 3px; flex: none; position: relative; }
.tfj-type-task { background: #4688ec; }
.tfj-type-task::after { content: ""; position: absolute; left: 4px; top: 2px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tfj-type-story { background: #63ba3c; }
.tfj-type-story::after { content: ""; position: absolute; left: 4px; top: 3px; width: 6px; height: 8px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%); }
.tfj-type-bug { background: #e5493a; }
.tfj-type-bug::after { content: ""; position: absolute; left: 4px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.tfj-type-epic { background: #904ee2; }
.tfj-type-epic::after { content: ""; position: absolute; left: 4px; top: 2px; width: 6px; height: 10px; background: #fff; clip-path: polygon(60% 0, 0 60%, 45% 60%, 35% 100%, 100% 40%, 55% 40%); }
.tfj-type-subtask { background: #4bade8; }

/* SALNet: the Project task form, General tab, in its own Segoe UI at 12px. */
.tf-salnet { max-width: 1080px; font: 12.5px/1.4 "Segoe UI", "Trebuchet MS", Arial, sans-serif; color: #222; border-color: #b9b9b9; border-radius: 4px; background: #f7f7f7; }
.tfs-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 12px 0; background: #fff; }
.tfs-tab { padding: 4px 14px; color: #777; font-size: 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0; }
.tfs-tab.on { color: #222; background: #fff; border-color: #ccc; position: relative; top: 1px; }
.tfs-body { margin: 0 10px; padding: 10px 12px 12px; background: #fff; border: 1px solid #ccc; border-radius: 0 0 3px 3px; container-type: inline-size; }
.tfs-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 10px; align-items: center; margin: 4px 0; }
.tfs-row.tfs-pair { grid-template-columns: 150px minmax(0, 180px) minmax(90px, 1fr) minmax(0, 180px) minmax(0, .6fr); }
.tfs-row.tfs-pair > .tfs-label:nth-of-type(2) { text-align: right; padding-right: 6px; }
.tfs-row.tfs-pair > .tfs-cell:last-child { display: flex; align-items: center; gap: 14px; }
.tfs-row.tfs-top { align-items: start; }
@container (max-width: 560px) {
  .tfs-row, .tfs-row.tfs-pair { grid-template-columns: 120px minmax(0, 1fr); }
  .tfs-row.tfs-pair > .tfs-label:nth-of-type(2) { text-align: left; padding-right: 0; }
}
.tfs-label { color: #333; }
.tfs-cell { min-width: 0; }
.tfs-inline { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tfs-input { display: inline-block; width: 180px; max-width: 100%; min-height: 21px; padding: 1px 3px; border: 1px solid #a9a9a9; background: #fff; overflow-wrap: anywhere; }
.tfs-input.tfs-wide { width: 100%; }
.tfs-input.tfs-mid { width: 180px; }
.tfs-area { display: block; width: 100%; min-height: 110px; max-height: 260px; overflow: auto; white-space: pre-wrap; resize: vertical; }
.tfs-pick { display: flex; align-items: center; min-height: 21px; border: 1px solid #a9a9a9; background: #fff; }
.tfs-pick > span:first-child { flex: 1; padding: 1px 3px; min-width: 0; overflow-wrap: anywhere; }
.tfs-pick.tfs-wide { width: 100%; }
.tfs-pick.tfs-mid { width: 180px; max-width: 100%; }
.tfs-pick.tfs-locked { background: #ebebeb; }
.tfs-pick-btn { width: 18px; align-self: stretch; background: linear-gradient(#f4f4f4, #dcdcdc); border-left: 1px solid #c4c4c4; position: relative; }
.tfs-pick-btn::after { content: ""; position: absolute; left: 5px; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: #aaa; }
.tfs-code { width: 60px; display: inline-flex; background: #ebebeb; }
.tfs-name { margin-left: 120px; color: #555; }
@container (max-width: 560px) { .tfs-name { margin-left: 4px; } }
.tfs-money { color: #3a5fa8; }
.tfs-btn { display: inline-block; padding: 4px 12px; border: 1px solid #adadad; border-radius: 2px; background: linear-gradient(#fafafa, #e3e3e3); color: #222; white-space: nowrap; }
.tfs-check { display: inline-block; width: 13px; height: 13px; border: 1px solid #b0a0b0; border-radius: 2px; background: #fff; }
.tfs-hr { border: 0; border-top: 1px solid #999; margin: 18px 0 8px; }
.tfs-foot { display: flex; gap: 4px; padding: 8px 10px; flex-wrap: wrap; }
.tfs-foot .tfs-btn { padding: 5px 18px; }
.tfs-gap { flex: 1; }
/* end ticket forms */

/* Plan view (public/plan.js). tools/export-plan.js copies this block, from this
   comment to "end plan view". */
body.plan-only #topbar, body.plan-only #layout { display: none; }
.plan-summary { padding: 6px 14px; border-bottom: 1px solid var(--line); background: var(--bg-raised); }
.plan-canvas { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.pl-scroll { position: absolute; inset: 0; overflow: auto; }
.pl-world { position: relative; margin: 0 auto; }
.pl-wires { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.pl-wire { fill: none; stroke: var(--fg-faint); stroke-width: 1.6; }
.pl-wire.implied { stroke-dasharray: 4 4; opacity: .45; }
.pl-wire.hot, .pl-wire.on { stroke: var(--accent); stroke-width: 2.4; opacity: 1; }
.pl-arrowhead { fill: var(--fg-faint); }
.pl-card { position: absolute; display: flex; flex-direction: column; gap: 6px; padding: 9px 11px; text-align: left; cursor: pointer;
  background: var(--bg-input); color: var(--fg); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); font: inherit; }
.pl-card:hover { border-color: var(--accent); }
.pl-card.on { box-shadow: 0 0 0 2px var(--accent); }
.pl-card.unreviewed { border-left-color: var(--warn); }
.pl-card-top { display: flex; align-items: center; gap: 6px; font: 11.5px var(--mono); color: var(--fg-dim); min-width: 0; }
.pl-key { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-prio { margin-left: auto; font-family: var(--sans); }
.pl-title { flex: 1; font-size: 13px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.pl-card-foot { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fg-dim); }
.pl-hours { font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.pl-hours.none { color: var(--warn); font-weight: 400; }
.pl-deps { margin-left: auto; color: var(--fg-faint); }
.pl-chip { padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px; color: var(--fg-dim); }
.pl-chip.warn { border-color: var(--warn); color: var(--warn); }
.pl-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--fg-dim); }
.pl-bar { width: 160px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; display: inline-block; }
.pl-fill { display: block; height: 100%; background: var(--ok); }
.pl-bar.over .pl-fill { background: var(--warn); }
.pl-legend { color: var(--fg-faint); font-size: 12px; }
.pl-empty { padding: 40px; max-width: 520px; margin: 0 auto; color: var(--fg-dim); }
.pl-detail-title { margin: 4px 0; font-size: 16px; }
.pl-detail-sum { margin: 0 0 8px; color: var(--fg-dim); font-size: 13px; }
.pl-detail-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.pl-after { font-size: 12px; color: var(--fg-dim); }
.pl-detail .agent-row { margin-bottom: 8px; }
.pl-more { margin-top: 10px; }
.pl-knows h4 { margin: 14px 0 6px; font-size: 13px; }
.pl-knows-people, .pl-knows-files { margin: 0; padding-left: 18px; }
.pl-knows-people > li { margin-bottom: 6px; }
.pl-knows-files { font-size: 12px; color: var(--fg-dim); }
.pl-knows-domain { margin-bottom: 8px; font-size: 13px; }
.pl-knows-foot { margin-top: 12px; font-size: 12px; }
.pl-more summary { cursor: pointer; color: var(--fg-dim); font-size: 13px; }
/* end plan view */

/* A workflow run, live (/?session= or /?run=): the flow with each step's state, and its journal. */
body.run-only #topbar, body.run-only #layout { display: none; }
.run-request { padding: 6px 14px; border-bottom: 1px solid var(--line); background: var(--bg-raised); font-size: 13px; }
.run-when { color: var(--fg-faint); }
.run-result { margin-top: 4px; color: var(--fg); }
/* One line each, the rest on hover; .full (a click) shows the whole text. */
.run-asked-line { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.run-asked-line > strong, .run-asked-line > .run-when { flex: none; white-space: nowrap; }
.run-asked, .run-result { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.run-asked { flex: 0 1 auto; }
.run-request.full .run-asked, .run-request.full .run-result { white-space: pre-wrap; overflow-wrap: anywhere; }
.run-request.full .run-asked-line { flex-wrap: wrap; }
.run-main { flex: 1; min-height: 0; display: flex; }
.run-canvas { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.run-side { width: 360px; flex: none; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--bg-raised); min-height: 0; }
.run-journal { flex: 1; overflow: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.run-ev { padding: 6px 8px; border: 1px solid var(--line-soft); border-left: 3px solid var(--line); border-radius: var(--radius); font-size: 12.5px; }
.run-ev.ev-done, .run-ev.ev-decided { border-left-color: var(--ok); }
.run-ev.ev-started { border-left-color: var(--accent); }
.run-ev.ev-waiting { border-left-color: var(--warn); }
.run-ev.ev-failed, .run-ev.ev-stopped { border-left-color: var(--danger); }
.run-ev-head { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.run-time { font: 11px var(--mono); color: var(--fg-faint); }
.run-ev-kind { margin-left: auto; color: var(--fg-dim); font-size: 11.5px; }
.run-note { margin: 4px 0 0; color: var(--fg-dim); white-space: pre-wrap; }
.run-dev { margin: 4px 0 0; color: var(--warn); }
.run-sub { margin: 4px 0 0; color: var(--fg-dim); font-size: 12px; }
.run-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
/* An agent run's Runner log under each journal entry (app.js placeRunLog). */
.run-log { margin-top: 5px; font-size: 12.5px; }
.run-log > summary { cursor: pointer; color: var(--fg-dim); }
.run-log .ag-log-row { padding: 3px 6px; }
.run-message { padding: 8px 10px; border-top: 1px solid var(--line); }
.run-message.asking { border-top: 2px solid var(--warn); background: rgba(232, 184, 75, .08); }
.run-question { margin: 4px 0 6px; font-weight: 600; white-space: pre-wrap; }
/* A long question or pause note never pushes the reply box and buttons out of sight: the area
   stops at 90% of the steps column and only its text scrolls (the phone block below caps it at 55dvh). */
.run-message { flex: none; max-height: 90%; min-height: 0; display: flex; flex-direction: column; }
.run-message > * { flex: none; }
.run-message .run-question, .run-message .run-note, .run-message .run-sub { flex: 0 1 auto; min-height: 2.6em; overflow: auto; overflow-wrap: anywhere; }
.run-message .agent-ask { max-height: 30vh; }
.run-cli { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--fg-dim); }
.run-cli-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fg-faint); flex: none; }
.run-cli.cli-listening .run-cli-dot { background: var(--ok); animation: run-pulse 1.6s ease-in-out infinite; }
.run-cli.cli-working .run-cli-dot { background: var(--accent); }
.run-cli.cli-quiet .run-cli-dot { background: transparent; border: 2px solid var(--warn); }
.run-cli.cli-quiet { color: var(--warn); }
.run-ev.ev-question, .run-ev.ev-message, .run-ev.ev-answered { border-left-color: var(--k-entity); }
.run-waiting-head { color: var(--warn); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
/* The open question or pause is lit up in the journal; the box below only points to it (markRunAsking). */
.run-journal > .run-ev.asking,
.run-journal.rc-chat > .run-ev.asking { border: 1px solid var(--warn); border-left: 3px solid var(--warn); border-radius: var(--radius); background: rgba(232, 184, 75, .10); box-shadow: 0 0 0 3px rgba(232, 184, 75, .12); padding: 6px 8px; text-align: left; color: var(--fg); }
#run-journal.only-claude > .run-ev.asking { display: block; }
.run-journal.rc-chat > .run-ev.asking > .run-ev-head { justify-content: flex-start; flex-wrap: wrap; }
.run-journal.rc-chat > .run-ev.asking > .run-ev-head::before, .run-journal.rc-chat > .run-ev.asking > .run-ev-head::after { display: none; }
.run-journal.rc-chat > .run-ev.asking .run-note { margin: 2px 0 0; max-width: none; }
.run-ev.asking .run-ev-kind { color: var(--warn); }
.run-asking-tag { border-color: var(--warn); color: var(--warn); font-size: 10.5px; }
.run-message.asking.pointed { border-top: 1px solid var(--line); background: none; }
.run-ask-pointer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.run-ask-pointer .link-btn { color: var(--fg-dim); }
/* Claude in the run tab (run-claude.js): its conversation among the steps, and what the journal shows. */
.run-journal-show { margin: 6px 10px 0; align-self: flex-start; }
.run-journal.only-claude > .run-ev:not(.rc-row), .run-journal.only-steps > .rc-row { display: none; }
/* The conversation look (Claude in the run tab): Claude's turns read as in the CLI, with no boxes;
   the person's messages are bubbles on the right; the steps are quiet divider lines between them. */
.run-journal.rc-chat { gap: 10px; padding: 10px 14px; }
.rc-chat > .run-ev { border: 0; border-radius: 0; background: none; padding: 0; }
.rc-chat > .run-ev:not(.rc-row) { text-align: center; color: var(--fg-faint); font-size: 11.5px; }
.rc-chat > .run-ev:not(.rc-row) > .run-ev-head { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: nowrap; }
.rc-chat > .run-ev:not(.rc-row) > .run-ev-head::before,
.rc-chat > .run-ev:not(.rc-row) > .run-ev-head::after { content: ""; flex: 1 1 20px; min-width: 20px; height: 1px; background: var(--line); }
.rc-chat > .run-ev:not(.rc-row) strong { color: var(--fg-dim); font-weight: 600; }
.rc-chat > .run-ev:not(.rc-row) .run-ev-kind { margin-left: 0; font-size: inherit; }
.rc-chat > .run-ev:is(.ev-done, .ev-decided) .run-ev-kind { color: var(--ok); }
.rc-chat > .run-ev.ev-waiting .run-ev-kind { color: var(--warn); }
.rc-chat > .run-ev:is(.ev-failed, .ev-stopped) .run-ev-kind { color: var(--danger); }
/* Only the step line is centred: what the agent writes under it reads as Claude's replies do, from the left, at their size. */
.rc-chat > .run-ev:not(.rc-row) :is(.run-note, .run-dev) { margin: 4px 0 0; text-align: left; font-size: 12.5px; }
.rc-chat > .run-ev:not(.rc-row) .run-chips { justify-content: flex-start; }
.rc-chat .rc-who { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.rc-chat > .rc-row > .run-ev-head { gap: 8px; }
.rc-chat > .rc-row .run-time { font-size: 10.5px; }
/* One label per Claude turn: text after Claude's own text or tools carries on without it. */
.rc-chat > :is(.rc-claude, .rc-tool, .rc-result, .rc-permission) + .rc-claude > .run-ev-head,
.rc-chat > .rc-tool > .run-ev-head, .rc-chat > .rc-result > .run-ev-head,
.rc-chat > .rc-permission > .run-ev-head, .rc-chat > .rc-system > .run-ev-head { display: none; }
.rc-chat > .rc-claude { max-width: 92%; }
.rc-chat > .rc-tool, .rc-chat > .rc-result, .rc-chat > .rc-permission { margin-top: -6px; padding-left: 18px; }
.rc-chat .rc-fold > summary { list-style: none; }
.rc-chat .rc-fold > summary::-webkit-details-marker { display: none; }
.rc-chat .rc-fold > summary:hover { text-decoration: underline; }
.rc-chat > .rc-write .rc-fold > summary { color: var(--ok); }
.rc-chat > .rc-error .rc-fold > summary { color: var(--danger); }
.rc-chat > .rc-you { align-self: flex-end; max-width: 80%; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-input); }
.rc-chat > .rc-you .rc-who { color: var(--k-entity); }
.rc-chat > .rc-system { color: var(--fg-faint); font-size: 12px; }
.rc-chat > .rc-system .run-note { margin: 0; }
.rc-chat > .rc-system .run-note::before { content: "▶ "; }
.rc-line { margin: 0; font: 12px/1.5 var(--mono); color: var(--fg-faint); overflow-wrap: anywhere; }
.rc-asked .rc-line { color: var(--warn); }
.rc-allowed .rc-line:first-of-type { color: var(--ok); }
.rc-denied .rc-line:first-of-type { color: var(--danger); }
.rc-line.rc-why { font-family: var(--sans); }
.rc-text { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rc-text.md { white-space: normal; }
.rc-text.md > :first-child { margin-top: 0; }
.rc-text.md > :last-child { margin-bottom: 0; }
.rc-fold > summary { cursor: pointer; color: var(--fg-dim); font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
/* Under a command auto mode refused, and a plan offered for approval (scrolls when long). */
.rc-ask-instead { margin-top: 4px; }
.rc-plan { max-height: 40vh; overflow: auto; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-input); }
.rc-label { margin-top: 6px; color: var(--fg-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.rc-pre { margin: 2px 0 0; max-height: 240px; overflow: auto; padding: 6px 8px; background: var(--bg-input); border-radius: var(--radius); font: 11.5px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.rc-pre.bad { color: var(--danger); }
/* A Claude Code command's answer (/usage, /context): the CLI's own text, lined up as it wrote it. */
.rc-chat > .rc-command .rc-pre { max-height: 420px; }
.rc-cut { margin: 2px 0 0; color: var(--warn); font-size: 11.5px; }
.rc-state { color: var(--fg-dim); font-size: 12px; margin-bottom: 4px; }
/* Inputs are 100% wide by default; the pickers size to their words so the box keeps one line. */
.rc-mode, .rc-cmd { flex: none; width: auto; }
/* A select is as wide as its longest option, and skills have long names; the picker always reads "/ Commands", and its list opens as wide as it needs. */
.rc-cmd { max-width: 9em; }
.rc-folder-line { display: flex; gap: 6px; align-items: center; }
.rc-folder-input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; }
.rc-folder-err { margin: 4px 0 0; color: var(--danger); font-size: 12px; }
.settings-text { width: 260px; flex: 1 1 auto; font-family: var(--mono); font-size: 12px; }
.run-pick { background: var(--bg-input); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); font-size: 12px; padding: 3px 6px; }
.run-chip.st-running { color: var(--accent); }
.run-chip.st-waiting { color: var(--warn); }
.run-chip.st-done { color: var(--ok); }
.run-chip.st-failed, .run-chip.st-cancelled, .run-chip.st-deviated { color: var(--danger); }
/* Step states on the flow, set by the run view (Diagram.mount states). */
.dg-node.st-todo { opacity: .55; }
.dg-node.st-done { border-color: var(--ok); }
/* Running and waiting steps carry the current-step highlighter (.now, above); here only their border. */
.dg-node.st-running { border-color: var(--accent); }
.dg-node.st-waiting { border-color: var(--warn); }
.dg-node.decision.st-running::before { border-color: var(--accent); }
.dg-node.st-failed, .dg-node.st-stopped { border-color: var(--danger); }
@keyframes run-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(110, 168, 254, .5); } 50% { box-shadow: 0 0 0 6px rgba(110, 168, 254, 0); } }
.dg-check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
/* Every run (/?runs). */
/* Below the top bar, so its Runs button switches between the brain and the list. */
#runs.flow-screen, #workflows.flow-screen { top: 46px; z-index: 19; }
/* The Workflows list reuses the runs rows; the left edge says whose a workflow is. */
.wf-row.sc-personal { border-left-color: var(--warn); }
.wf-row.sc-global { border-left-color: var(--accent); }
.wf-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
/* The top bar's two sections: the brain, and its runs. */
.section-switch { margin-left: 10px; flex: none; }
.section-switch .segmented-btn { display: inline-flex; align-items: center; gap: 5px; }
/* Someone who sees only runs (no Approver or Admin role): no brain to switch to, no pages to make or open. */
/* New, Feature, Lint and Reindex act on the brain, so they leave the top bar while Runs is open. */
body.runs-open .brain-only, body.runs-only-person .brain-only { display: none !important; }
body.runs-only-person #btn-brain,
body.runs-only-person #runs-close, body.runs-only-person #run-flow, body.runs-only-person #stats { display: none !important; }
/* In a workflow's own tab they draw their own flow; Sandy's work is on the brain's pages, which they cannot read. */
body.runs-only-person .sandy-pip[data-act="work"] { display: none !important; }
.runs-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--bg-raised); }
/* A show-or-hide filter beside a segmented control takes its height and type, so the row reads as one. */
.runs-filters .filter { padding: 5px 12px; font-size: 12.5px; font-family: inherit; }
.runs-list { flex: 1; overflow: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.runs-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 230px auto; gap: 12px; align-items: center; padding: 9px 12px;
  border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); }
.runs-row.st-waiting { border-left-color: var(--warn); }
.runs-row.st-running { border-left-color: var(--accent); }
.runs-row.st-done { border-left-color: var(--ok); }
.runs-row.st-failed, .runs-row.st-cancelled, .runs-row.st-deviated { border-left-color: var(--danger); }
.runs-title { font-weight: 600; }
/* The workflow beside a run's subject, in its tab's header and in the runs list. */
.runs-flow-name, .run-flow-name { color: var(--fg-dim); font-weight: 400; font-size: 12px; }
.run-flow-name:empty { display: none; }
.runs-request { color: var(--fg-dim); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runs-stage { font-size: 12.5px; margin-top: 2px; }
.runs-meta { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--fg-faint); }
.runs-id { color: var(--fg-dim); }
/* The line a person pastes into a CLI after starting a run: wrapped, never cut. */
.new-run-line { white-space: pre-wrap; word-break: break-word; padding: 8px 10px; }
@media (max-width: 760px) { .runs-row { grid-template-columns: 1fr; } }
/* Triage (public/triage.js): a note's row, then the whole note with its rating when opened. */
.tri-item { display: flex; flex-direction: column; }
.tri-row { border-left-color: var(--accent); }
.tri-row.tri-insufficient { border-left-color: var(--warn); }
.tri-key { font-family: var(--mono, monospace); }
.tri-ins { color: var(--warn); border-color: var(--warn); }
.tri-conf.c-high { color: var(--ok); }
.tri-conf.c-medium { color: var(--accent); }
.tri-conf.c-low { color: var(--fg-faint); }
.tri-detail { border: 1px solid var(--line); border-top: none; border-radius: 0 0 var(--radius) var(--radius); padding: 10px 14px 12px; background: var(--bg-raised); }
.tri-note { max-width: 860px; }
.tri-rate, .tri-keep { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.tri-ask { font-weight: 600; }
.tri-comment { flex: 1; min-width: 220px; }
/* A divider between two panes, dragged to share the width (run view). */
.pane-divider { flex: none; width: 6px; cursor: col-resize; background: var(--line-soft); border-left: 1px solid var(--line); touch-action: none; }
.pane-divider:hover, .pane-divider.dragging, .pane-divider:focus-visible { background: var(--accent-dim); outline: none; }
.run-side { border-left: 0; }
/* The run's left pane: Flow | Files. A file is shown across the whole pane; a page in a locked-down frame. */
.run-left { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.run-tabs { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--bg-raised); }
.run-left .run-canvas { flex: 1; }
/* A step's card over the run's chart (click a step): its times, the skills it used, its pages and files. */
.run-left { position: relative; }
.run-step-card { position: absolute; top: 48px; right: 12px; z-index: 6; width: min(360px, calc(100% - 24px)); max-height: calc(100% - 60px); overflow: auto;
  padding: 10px 12px; background: var(--bg-raised); border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: var(--radius); box-shadow: 0 10px 28px rgba(0, 0, 0, .35); font-size: 13px; }
.run-step-card h3 { margin: 2px 26px 4px 0; font-size: 15px; overflow-wrap: anywhere; }
.run-card-x { position: absolute; top: 8px; right: 8px; }
.run-card-k { font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.run-card-when { margin: 0 0 6px; color: var(--fg-dim); }
.run-card-flow { margin: 0 0 6px; }
.run-parent { margin-top: 4px; font-size: 12.5px; }
/* Which chart the run tab shows: the workflow, or a sub-workflow the run is carrying out inside it. */
.run-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 12px; font-size: 12.5px;
  border-bottom: 1px solid var(--line); background: var(--bg-raised); }
.run-trail .run-trail-sep { color: var(--fg-faint); }
.run-trail .run-trail-here { font-weight: 600; }
.run-card-h { margin: 8px 0 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-faint); }
.run-card-skills, .run-card-stats { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.run-card-skills li, .run-card-stats li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.run-card-total { border-top: 1px solid var(--line-soft); padding-top: 4px; }
.run-card-stats li.run-card-tools { display: block; padding-left: 12px; font-size: 0.92em; }
.run-card-foot { height: 8px; }
.skill-link { text-decoration: none; }
.run-ev.ev-skill { border-left-color: var(--k-skill, var(--accent)); }
/* The entries "Show in journal" points at, lit for a moment. */
.run-ev.run-ev-shown { animation: run-ev-shown 2.4s ease-out; }
@keyframes run-ev-shown { 0%, 40% { background: var(--accent-dim); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .run-ev.run-ev-shown { animation: none; background: var(--accent-dim); } }
/* Changes: each file the agent changed in a run without a workflow (base experiment n_fccdb059). */
.run-changes { flex: 1; min-height: 0; overflow: auto; padding: 8px 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.run-changes-head { display: flex; gap: 6px; flex-wrap: wrap; }
.run-changes-warn { margin: 0; padding: 6px 10px; border: 1px solid var(--warn); border-radius: 6px; color: var(--warn); font-size: 13px; }
.run-uncaptured { padding: 6px 10px; border: 1px dashed var(--warn); border-radius: 6px; font-size: 13px; }
.run-uncaptured ul { margin: 4px 0 0; padding-left: 18px; color: var(--fg-dim); }
.run-change { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.run-change.judged-accepted { border-left: 3px solid var(--ok); }
.run-change.judged-rejected { border-left: 3px solid var(--danger); }
.run-change.run-ev-shown { animation: run-ev-shown 2.4s ease-out; }
.run-change-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.run-change-head .muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.run-verdict.accepted { color: var(--ok); border-color: var(--ok); }
.run-verdict.rejected { color: var(--danger); border-color: var(--danger); }
.run-rev { border-top: 1px solid var(--line-soft); padding-top: 6px; }
.run-rev-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.run-rev-meta .chip.warn { border-color: var(--warn); color: var(--warn); }
.run-rev-why { margin: 4px 0 0; font-size: 13.5px; }
.run-rev-why.none { color: var(--fg-dim); font-style: italic; }
.run-rev-compare { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.run-thread { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line-soft); padding-top: 6px; }
.run-comment { display: flex; gap: 6px; font-size: 13px; align-items: baseline; }
.run-comment.from-agent strong { color: var(--accent); }
.run-change-act { display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; }
.run-change-act textarea { flex: 1 1 240px; min-width: 0; }
.run-change-verdict { display: flex; gap: 6px; margin-left: auto; }
.run-change-verdict .btn.on { outline: 2px solid currentColor; }
.run-change-state { font-size: 11px; }
.run-change-state.new { border-color: var(--ok); color: var(--ok); }
.run-change-state.deleted { border-color: var(--danger); color: var(--danger); }
.run-change-head .chip.warn { border-color: var(--warn); color: var(--warn); }
.run-change-path { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-file-when { color: var(--fg-faint); font-size: 11px; }
/* The Diff: one change to one file at a time, set against the version before it, each changed part with its reason; the chooser steps through the rest. */
.run-diff-pick { max-width: 46em; min-width: 16em; text-overflow: ellipsis; }
.run-diff > .run-diff-note { margin-bottom: 10px; }
.run-diff-note { background: #1a2233; border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; padding: 6px 10px; font: 12.5px/1.5 var(--sans); white-space: normal; }
.run-diff-note.run-ev-shown { animation: run-ev-shown 2.4s ease-out; }
.run-diff-note-top { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.run-diff-why { flex: 1 1 320px; color: var(--fg); }
.run-diff-why.none em { color: var(--warn); }
.run-diff-label { color: var(--accent); }
.run-diff-asks { display: flex; gap: 6px; }
.run-diff-thread { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.run-diff-ask { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.run-diff-ask textarea { width: 100%; }
.run-diff-fresh { display: flex; gap: 8px; align-items: center; padding: 6px 10px; margin-bottom: 8px; border: 1px solid var(--accent-dim); border-radius: 6px; font-size: 13px; }
.run-diff-fresh[hidden] { display: none; }
.run-diff-page { width: 100%; height: 60vh; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
/* A changed part: its chip ends its first line; parts sharing a reason share a colour (--part-c) and are outlined together on hover. */
.run-diff { position: relative; }
.run-part-chip { float: right; margin: 1px 0 0 8px; padding: 0 6px; border: 0; border-radius: 9px; background: var(--part-c, var(--accent)); color: var(--bg); font: 700 11px/16px var(--sans); cursor: pointer; opacity: .85; white-space: nowrap; }
.run-part-chip:hover, .run-part-chip:focus-visible { opacity: 1; outline: 2px solid var(--fg); outline-offset: 1px; }
.run-part-chip.talk::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: var(--bg); vertical-align: 1px; }
span.run-part-chip { float: none; cursor: default; opacity: 1; margin: 0; }
tr.run-part.lit td.code, .markdown .run-part.lit { outline: 1px solid var(--part-c, var(--accent)); outline-offset: -1px; }
.run-part-tip, .run-part-pop { position: absolute; z-index: 5; background: #1a2233; border: 1px solid var(--accent-dim); border-left: 3px solid var(--part-c, var(--accent)); border-radius: 6px; padding: 6px 10px; font: 12.5px/1.45 var(--sans); white-space: normal; box-shadow: 0 6px 20px #0008; }
.run-part-tip { width: 360px; pointer-events: none; }
.run-part-tip .muted, .run-part-pop .muted { color: var(--fg-dim); }
.run-part-tip .muted { font-size: 11.5px; margin-top: 3px; }
.run-part-pop { width: 440px; max-width: calc(100% - 8px); z-index: 6; border-color: var(--accent); }
.run-part-pop-top { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.run-part-pop .run-diff-asks { margin: 6px 0 0; }
.run-part-why.none em { color: var(--warn); }
.run-file-earlier { display: flex; gap: 8px; align-items: center; padding: 6px 12px; font-size: 12.5px; color: var(--warn); border-bottom: 1px solid var(--line-soft); }
.run-outcome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 14px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.run-outcome input { flex: 1 1 180px; min-width: 0; }
.run-chip.st-abandoned { color: var(--fg-dim); }
.run-tests.failed { color: var(--danger); border-color: var(--danger); }
.cancel-why { flex-wrap: wrap; }
.run-files-count { font-variant-numeric: tabular-nums; }
.run-files-count.review-new { color: var(--warn); font-weight: 700; }
.run-files { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.run-files-list { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 12px; border-bottom: 1px solid var(--line-soft); max-height: 30%; overflow: auto; }
.run-file-pick { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--fg-dim); font-size: 12.5px; cursor: pointer; max-width: 320px; }
.run-file-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-file-pick.on { border-color: var(--accent); color: var(--fg); background: var(--accent-dim); }
.run-file-pick.review-new { border-color: var(--warn); }
.run-file-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.run-file-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 12px; font-size: 12.5px; color: var(--fg-dim); border-bottom: 1px solid var(--line-soft); }
.run-file-head strong { color: var(--fg); }
.run-file-body { flex: 1; min-height: 0; overflow: auto; position: relative; }
.run-file-body iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.run-file-body video, .run-file-body img { display: block; max-width: 100%; max-height: 100%; margin: 0 auto; }
.run-file-body .markdown { padding: 14px 20px; max-width: 900px; }
.run-file-body pre { margin: 0; padding: 12px 16px; font: 12.5px/1.45 var(--mono); white-space: pre-wrap; word-break: break-word; }
.run-file-body pre .d-add { color: var(--ok); }
.run-file-body pre .d-del { color: var(--danger); }
.run-file-body pre .d-hunk { color: var(--accent); }
/* A file on another machine, or one this browser cannot reach: where it is, and how to see it. */
.run-file-away { padding: 16px 20px; max-width: 760px; }
.run-file-away p { margin: 0 0 8px; }
.run-file-body pre.run-file-setup { margin: 8px 0 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-input); white-space: pre-wrap; word-break: break-all; }
/* A question's choices, ticked in the box at the bottom. */
.run-choices { display: flex; flex-direction: column; gap: 2px; max-height: 30vh; overflow: auto; margin: 2px 0 6px; padding: 4px 6px; border: 1px solid var(--line-soft); border-radius: 8px; }
.run-choice { display: flex; align-items: flex-start; gap: 8px; padding: 2px 0; font-size: 13px; cursor: pointer; word-break: break-word; }
.run-choice input { margin-top: 2px; flex: none; }
/* A full path a step's report lists, ticked to add it to Files or show it in Explorer. */
.run-path { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.run-path input { margin: 0; flex: none; }
.run-path-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
body.file-only #topbar, body.file-only #layout { display: none; }
/* A recording with its narrated steps: the video and its controls, the step list beside it (below it when narrow). */
.vp-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; height: 100%; padding: 8px 10px; box-sizing: border-box; }
.vp-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.vp-main video, .run-file-body > video { flex: 1; min-height: 0; width: 100%; max-height: 100%; background: #000; }
.vp-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 4px 10px; font-size: 12.5px; color: var(--fg-dim); }
.vp-wrap .vp-bar { padding: 0; }
.vp-pause { display: inline-flex; gap: 6px; align-items: center; }
.vp-steps { list-style: none; margin: 0; padding: 0; overflow: auto; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.vp-step { display: flex; gap: 8px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; color: var(--fg); padding: 5px 8px; cursor: pointer; font-size: 12.5px; }
.vp-step:hover { background: var(--bg-raised); }
.vp-step.on { background: var(--accent-dim); }
.vp-t { font: 11.5px var(--mono); color: var(--fg-faint); flex: none; padding-top: 1px; }
@media (max-width: 900px) { .vp-wrap { grid-template-columns: 1fr; grid-template-rows: minmax(200px, 1fr) minmax(120px, 35%); } }
/*
 * Phones and narrow windows: the run screens (run tab, file tab, runs list) and their popups. The run tab
 * shows one pane at a time (Flow | Files | Steps); the agent area stays pinned under it, its question
 * scrolling inside so the answer box and the buttons are always on screen. Nothing may stick out sideways.
 */
.run-steps-btn { display: none; }
@media (max-width: 760px) {
  /* Headers: title and status on the first line, the buttons below, every one in reach. */
  .run-screen .flow-head, .runs-screen .flow-head { flex-wrap: wrap; row-gap: 6px; padding: 8px 12px; }
  .run-screen .flow-head strong, .runs-screen .flow-head strong { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  .run-screen .flow-head .spacer, .runs-screen .flow-head .spacer { flex: 0 0 100%; height: 0; }
  .run-screen .flow-head .btn, .run-screen .flow-head .filter, .run-screen .flow-head select,
  .runs-screen .flow-head .btn { min-height: 36px; }
  .run-screen .flow-head .chip, .runs-screen .flow-head .chip, .runs-row > .chip { white-space: nowrap; }
  .run-chips .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  #filetab-meta { flex: 0 0 100%; order: 3; overflow-wrap: anywhere; }
  .run-request { max-height: 20vh; overflow: auto; padding: 6px 12px; }

  /* One pane at a time. */
  .run-main { flex-direction: column; }
  .pane-divider { display: none; }
  .run-steps-btn { display: inline-flex; align-items: center; }
  .run-tabs .segmented-btn { min-height: 34px; }
  .run-left { flex: 1 1 auto; min-height: 0; }
  .run-side { width: auto !important; border-top: 1px solid var(--line); flex: none; max-height: none; }
  .run-main:not(.show-steps) #run-journal, .run-main:not(.show-steps) #run-cli { display: none; }
  .run-main.show-steps .run-left { flex: none; }
  .run-main.show-steps .run-canvas, .run-main.show-steps .run-files, .run-main.show-steps .run-changes { display: none; }
  .run-main.show-steps .run-side { flex: 1 1 auto; min-height: 0; border-top: 0; }

  /* The agent area: never taller than about half the screen; the question scrolls, the reply and buttons stay. */
  .run-message { max-height: 55dvh; display: flex; flex-direction: column; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .run-message .run-question, .run-message .run-note, .run-message .run-sub { flex: 0 1 auto; min-height: 2.6em; overflow: auto; overflow-wrap: anywhere; }
  .run-message .agent-ask { flex: none; min-height: 56px; max-height: 22dvh; }
  .run-message .agent-row { flex: none; flex-wrap: wrap; gap: 6px; }
  .run-message .agent-row .btn { min-height: 38px; }

  /* Files: the list of files a strip at the top, the file below it with the rest of the height. */
  .run-files-list { max-height: 22%; flex-wrap: nowrap; overflow-x: auto; }
  .run-file-pick { flex: none; max-width: 75vw; }
  .run-file-head { padding: 6px 12px; }
  .vp-wrap { padding: 6px 8px; }

  /* The runs list: the brain's top bar scrolls sideways instead of running off the screen; cards wrap their text. */
  #topbar { overflow-x: auto; overflow-y: hidden; }
  #topbar > * { flex-shrink: 0; }
  .runs-row { grid-template-columns: minmax(0, 1fr); }
  .runs-row > * { min-width: 0; }
  .runs-row .chip { justify-self: start; }
  .runs-request, .runs-stage, .runs-meta, .runs-title { white-space: normal; overflow-wrap: anywhere; }
  .runs-filters .segmented { flex-wrap: wrap; }
  /* A long question would fill the screen; four lines say what it is, the run tab has the rest. */
  .runs-stage { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }

  /* Popups: the whole screen, the close button always in reach. */
  .modal { padding: 0; }
  .modal-box, .modal.wide .modal-box { width: 100%; height: 100%; max-height: 100dvh; border-radius: 0; border: 0; }
  .modal-head { position: sticky; top: 0; }
}

/* ------------------------------------------------------------ Sandy, the guide in the corner
   Grey glass by default (palettes in sandy.js); the orange is hers alone, so her
   outlines and marks read as her pointing. She sits where she covers nothing the
   screen needs: left of the page panel, and on the left in a run tab, whose
   reply box is on the right. */
.sandy { position: fixed; right: 416px; bottom: 14px; z-index: 48; display: flex; flex-direction: column; align-items: flex-end; }
/* Her own layer: her movements repaint her corner only, never the page or the graph under her. */
.sandy-launcher { contain: layout paint; isolation: isolate; will-change: transform; }
.sandy[data-screen="run"], .sandy[data-screen="filetab"] { right: auto; left: 14px; align-items: flex-start; }
.sandy[data-screen="runs"], .sandy[data-screen="workflows"], .sandy[data-screen="plan"] { right: 14px; }
.sandy[data-screen="flow"] { right: 14px; bottom: 118px; }
/* She stands free, with no round frame (2026-10-18), and is 20% bigger for it: a soft sand glow says she can be clicked. */
.sandy-launcher { width: 76px; height: 76px; padding: 0; border: 0; border-radius: 16px; background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; }
.sandy-launcher:hover svg, .sandy-launcher[aria-expanded="true"] svg { filter: drop-shadow(0 0 6px rgba(255,134,0,.55)); }
.sandy.dragging .sandy-launcher { cursor: grabbing; }
.sandy.dragging .sandy-launcher svg { filter: drop-shadow(0 12px 12px rgba(0,0,0,.6)); }
/* Reading aloud she is the speech line, and the drawing waits out of sight under it. */
.sandy.talking .sandy-launcher svg { opacity: 0; }
/* Walking beside a workflow's step, she glides frame by frame from sandy.js; a CSS transition here would fight it and stutter. */
/* Her buttons, in her colours: sand for the main choice, her palette's glass and ink for the rest. */
.sandy-btn { font: inherit; font-size: 12.5px; line-height: 1.2; min-height: 30px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  background: var(--sandy-glass, #bcc4d0); color: var(--sandy-ink, #262b36); border: 1px solid transparent; }
.sandy-btn.main { background: #ff8600; color: #1a1206; font-weight: 600; }
.sandy-btn.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.sandy-btn:hover { filter: brightness(1.08); }
.sandy-btn:focus-visible { outline: 2px solid #ff8600; outline-offset: 2px; }
.sandy-btn:disabled { opacity: .5; cursor: default; }
.sandy-launcher:focus-visible { outline: 2px solid #ff8600; outline-offset: 2px; }
/* Her fan and bubble are placed by sandy.js (layout): beside her, opening towards the middle, clear of the active step and what she outlined. */
/* Her three bubbles sit on an arc round her centre (the fan is a point there); sandy.js spins them out and back. */
.sandy-fan { position: fixed; width: 0; height: 0; }
.sandy-pip { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 999px; background: var(--bg-raised); color: var(--fg); border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(0,0,0,.45); font-size: 18px; font-weight: 700; cursor: pointer; }
/* The bubble's tail: under the bubble, so only its point shows, aimed at her. */
.sandy-tail { position: fixed; width: 14px; height: 14px; background: #161b26; border: 1px solid #2c3445; transform: rotate(45deg); }
.sandy-wave { position: fixed; width: 150px; height: 44px; margin: -22px 0 0 -75px; border-radius: 999px; background: #161b26; border: 1px solid #2c3445;
  box-shadow: 0 10px 24px rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.sandy-wave i { display: block; width: 5px; height: 8px; border-radius: 3px; background: #ff8600; animation: sandy-talk .55s ease-in-out infinite alternate; }
.sandy-wave i:nth-child(2n) { animation-duration: .42s; }
.sandy-wave i:nth-child(3n) { animation-duration: .7s; }
.sandy-wave i:nth-child(4n) { animation-delay: -.2s; }
.sandy-wave b { font: 700 11px var(--mono); color: #d06a00; }
@keyframes sandy-talk { from { height: 6px; } to { height: 30px; } }
.sandy.sandy-still .sandy-wave i { height: 18px; }
.sandy-pip:hover, .sandy-pip:focus-visible { border-color: #ff8600; color: #ff8600; outline: none; }
.sandy-bubble { position: fixed; width: min(340px, calc(100vw - 28px)); max-height: 62vh; overflow-y: auto; padding: 12px 14px;
  background: #161b26; border: 1px solid #2c3445; border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.6); font-size: 13px; }
.sandy-say-head { display: flex; align-items: center; gap: 8px; }
.sandy-say-head strong { flex: 1; color: #ff8600; font-size: 13.5px; }
.sandy-x { background: transparent; border: 0; color: var(--fg-dim); cursor: pointer; font-size: 13px; padding: 4px 6px; }
.sandy-x:hover { color: var(--fg); }
.sandy-text { margin: 6px 0 0; line-height: 1.5; color: var(--fg); white-space: pre-wrap; }
.sandy-note { margin: 8px 0 0; color: var(--fg-faint); font-size: 11.5px; line-height: 1.45; }
/* Her work bubble: AI on the open page, from the brain or with the code. */
.sandy-work { min-width: min(380px, 80vw); }
.sandy-work-head { margin: 10px 0 0; font-size: 11.5px; font-weight: 600; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .04em; }
.sandy-work .agent-log { max-height: 220px; }
.sandy-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* Connect an agent: the command is copied, so it wraps rather than scrolls sideways. */
.sandy-connect { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sandy-connect-code { margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-input);
  color: var(--fg); font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-all; user-select: all; }
.sandy-connect-steps { margin: 0; padding-left: 18px; line-height: 1.5; color: var(--fg); }
.sandy-connect-steps li + li { margin-top: 4px; }
/* Her guides: one card per guide, then each step's name of the guide it belongs to, quiet. */
.sandy-tours { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sandy-tour, .sandy-demo-row { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-input); }
.sandy-tour .sandy-note, .sandy-demo-row .sandy-note { margin-top: 3px; }
.sandy-tour .sandy-actions, .sandy-demo-row .sandy-actions { margin-top: 6px; }
.sandy-tour-name { font-style: italic; }
.sandy-chat-log { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; margin-top: 6px; }
.sandy-chat-log:empty { display: none; }
.sandy-chat-log p { margin: 0; padding: 6px 9px; border-radius: 9px; line-height: 1.45; white-space: pre-wrap; }
.sandy-chat-you { align-self: flex-end; background: var(--accent-dim); color: #dbe7ff; max-width: 85%; }
.sandy-chat-sandy { align-self: flex-start; background: var(--bg-input); max-width: 92%; }
.sandy-mark { position: fixed; z-index: 49; pointer-events: none; border-radius: 8px; outline: 3px solid #ff8600;
  box-shadow: 0 0 0 4px rgba(255,134,0,.18), 0 0 18px rgba(255,134,0,.35); animation: sandy-glow 1.6s ease-in-out infinite; }
.sandy-mark.sandy-hover { outline-width: 2px; outline-style: dashed; box-shadow: none; animation: none; }
body.sandy-pick, body.sandy-pick * { cursor: help !important; }
/* A demo (sandy-demo.js): she and her outline stay above a popup the demo asks for. */
body.sandy-demo-on .sandy { z-index: 51; }
body.sandy-demo-on .sandy-mark { z-index: 52; }
.sandy-demo-call { overflow-wrap: anywhere; font-family: var(--mono, monospace); font-size: 11px; }
.sandy-preview { display: flex; justify-content: center; padding: 8px 0 0; }
.sandy-voice-pick { background: var(--bg-input); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); padding: 3px 6px; font-size: 12px; max-width: 220px; }

/* Her movements (sandy.js sets m-<mood> on the launcher, and while idle v-breathe or one fidget v-<name>).
   Every transform-origin is in her own 200 x 250 drawing units. Each bulb's sand is clipped to the bulb in
   the drawing, so the sand sinking and rising never leaves the glass. */
.sy * { transform-box: view-box; }
.sy-all { transform-origin: 100px 232px; }
.sy-body { transform-origin: 100px 216px; }
.sy-armR { transform-origin: 146px 146px; }
.sy-armL { transform-origin: 54px 146px; }
.sy-legR { transform-origin: 120px 214px; }
.sy-eyes { transform-origin: 100px 72px; animation: sandy-blink 5.5s infinite; }
.sy-bit .b0 { opacity: 0; }
.sy-drops text { animation: sandy-fall 2.4s linear infinite; opacity: 0; }
.sy-drops.fast text { animation-duration: 1.1s; }
.sy-drops text:nth-child(2) { animation-delay: -.8s; }
.sy-drops text:nth-child(3) { animation-delay: -1.6s; }
.sy-drops.fast text:nth-child(2) { animation-delay: -.37s; }
.sy-drops.fast text:nth-child(3) { animation-delay: -.74s; }
.sandy.bob .sandy-launcher .sy-all { animation: sandy-hop .45s ease-out; }
@keyframes sandy-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes sandy-fall { 0% { transform: translateY(-14px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes sandy-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-7px); } }
@keyframes sandy-glow { 0%, 100% { box-shadow: 0 0 0 4px rgba(255,134,0,.18), 0 0 18px rgba(255,134,0,.35); } 50% { box-shadow: 0 0 0 6px rgba(255,134,0,.1), 0 0 26px rgba(255,134,0,.5); } }

/* Idle: a breath all the time, and one fidget now and then. */
/* The breath moves the whole drawing as one layer the browser composites; moving her body inside the SVG repainted her every frame and slowed the page. */
.sandy-launcher.v-breathe > svg { transform-origin: 50% 93%; animation: sandy-breathe 3.4s ease-in-out infinite; will-change: transform; }
.v-look .sy-pupils { animation: sandy-look 7s ease-in-out infinite; }
.v-look .sy-glint { animation: sandy-glint 7s ease-in-out infinite; }
.v-push .sy-armR { animation: sandy-push 6s ease-in-out infinite; }
.v-push .sy-glasses, .v-push .sy-pupils { animation: sandy-lift 6s ease-in-out infinite; }
.v-push .sy-pixel { animation: sandy-pixel 6s steps(1) infinite; }
.v-tap .sy-legR { animation: sandy-tap 3.2s ease-in-out infinite; }
.v-tap .sy-all { animation: sandy-tapbody 3.2s ease-in-out infinite; }
.v-shake .sy-top { animation: sandy-drain 9s ease-in infinite; }
.v-shake .sy-bot { animation: sandy-fill 9s ease-in infinite; }
.v-shake .sy-all { animation: sandy-wiggle 9s ease-in-out infinite; }
.v-sway .sy-all { animation: sandy-sway 4s ease-in-out infinite; }
.v-sway .sy-notes text { animation: sandy-note 4s ease-out infinite; }
.v-sway .sy-notes text:nth-child(2) { animation-delay: -1.3s; }
.v-sway .sy-notes text:nth-child(3) { animation-delay: -2.6s; }
.v-bits .sy-bit .b1 { animation: sandy-bitA 2.6s steps(1) infinite; }
.v-bits .sy-bit .b0 { animation: sandy-bitB 2.6s steps(1) infinite; }
.v-bits .sy-bit:nth-child(2n) .b1, .v-bits .sy-bit:nth-child(2n) .b0 { animation-delay: -1.1s; }
.v-bits .sy-drops text { animation-duration: 1.6s; }
.v-bits .sy-spark { animation: sandy-spark 2.6s steps(1) infinite; }
@keyframes sandy-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.985, 1.03); } }
@keyframes sandy-look { 0%, 18%, 100% { transform: translate(0, 0); } 24%, 40% { transform: translate(-5px, 0); } 48%, 64% { transform: translate(5px, -1px); } 72%, 92% { transform: translate(0, 2px); } }
@keyframes sandy-glint { 0%, 60%, 100% { opacity: 0; transform: translateX(-30px); } 66% { opacity: .9; } 76% { opacity: 0; transform: translateX(80px); } }
@keyframes sandy-push { 0%, 55%, 100% { transform: rotate(0); } 64%, 74% { transform: rotate(-118deg); } }
@keyframes sandy-lift { 0%, 64%, 100% { transform: translateY(0); } 68%, 76% { transform: translateY(-3px); } 82% { transform: translateY(0); } }
@keyframes sandy-pixel { 0%, 69% { fill: #ffffff; } 70%, 74% { fill: #ff8600; } 75%, 100% { fill: #ffffff; } }
@keyframes sandy-tap { 0%, 50%, 100% { transform: rotate(0); } 56%, 68%, 80% { transform: rotate(-14deg); } 62%, 74%, 86% { transform: rotate(0); } }
@keyframes sandy-tapbody { 0%, 50%, 100% { transform: translateY(0); } 56%, 68%, 80% { transform: translateY(-1.5px); } 62%, 74%, 86% { transform: translateY(0); } }
@keyframes sandy-drain { 0% { transform: translateY(0); } 78%, 86% { transform: translateY(34px); } 92%, 100% { transform: translateY(0); } }
@keyframes sandy-fill { 0% { transform: translateY(0); } 78%, 86% { transform: translateY(-12px); } 92%, 100% { transform: translateY(0); } }
@keyframes sandy-wiggle { 0%, 80%, 94%, 100% { transform: rotate(0); } 82% { transform: rotate(-7deg); } 84% { transform: rotate(7deg); } 86% { transform: rotate(-5deg); } 88% { transform: rotate(4deg); } 90% { transform: rotate(0) translateY(-6px); } 92% { transform: translateY(0); } }
@keyframes sandy-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes sandy-note { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -46px); } }
@keyframes sandy-bitA { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sandy-bitB { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes sandy-spark { 0%, 70%, 100% { opacity: 0; } 72%, 80% { opacity: 1; } }

/* Moods: pointing goes the way the part is (sandy.js aim), or up at her own bubble. */
.m-wave .sy-armR { animation: sandy-wave .9s ease-in-out infinite alternate; }
.m-point .sy-armR { animation: sandy-jab 1.4s ease-in-out infinite; }
.m-point .sy-all { animation: sandy-lean 1.4s ease-in-out infinite; }
.m-point-left .sy-armL { animation: sandy-jabL 1.4s ease-in-out infinite; }
.m-point-left .sy-all { animation: sandy-leanL 1.4s ease-in-out infinite; }
.m-point-up .sy-armR { animation: sandy-jabU 1.4s ease-in-out infinite; }
.m-point-up .sy-all { animation: sandy-rise 1.4s ease-in-out infinite; }
.m-think .sy-armR { animation: sandy-chin 1.2s ease-in-out infinite; }
.m-think .sy-q, .m-puzzled .sy-q { transform-origin: 170px 30px; }
.m-think .sy-q { animation: sandy-bob 1.8s ease-in-out infinite; }
.m-cheer .sy-all { animation: sandy-jump 1.1s cubic-bezier(.3, 0, .4, 1) infinite; }
.m-cheer .sy-body { animation: sandy-land 1.1s ease-out infinite; }
.m-cheer .sy-spark { animation: sandy-spark2 1.1s steps(1) infinite; }
.m-cheer .sy-armL { animation: sandy-armsL 1.1s ease-in-out infinite; }
.m-cheer .sy-armR { animation: sandy-armsR 1.1s ease-in-out infinite; }
.m-snooze .sy-body { animation: sandy-breathe 4.5s ease-in-out infinite; }
.m-snooze .sy-z text { opacity: 0; animation: sandy-zz 3.6s ease-out infinite; }
.m-snooze .sy-z text:nth-child(2) { animation-delay: 1.2s; }
.m-snooze .sy-z text:nth-child(3) { animation-delay: 2.4s; }
.m-puzzled .sy-all { animation: sandy-tilt 2.6s ease-in-out infinite; }
.m-puzzled .sy-q { animation: sandy-wobble 1.3s ease-in-out infinite; }
/* Listening for her name: the ear bobs as the ? of thinking does, and the sound comes in to it. */
.m-listen .sy-armR { animation: sandy-chin 1.6s ease-in-out infinite; }
.m-listen .sy-ear { transform-origin: 170px 46px; animation: sandy-bob 1.8s ease-in-out infinite; }
.m-listen .sy-ear-in path { animation: sandy-hear 1.6s ease-out infinite; }
.m-listen .sy-ear-in path:nth-child(2) { animation-delay: .4s; }
.sandy-pip.off { opacity: .5; text-decoration: line-through; }
.m-found .sy-page { animation: sandy-hold 1.6s ease-in-out infinite; }
.m-found .sy-spark { animation: sandy-spark 1.6s steps(1) infinite; }
@keyframes sandy-wave { from { transform: rotate(-12deg); } to { transform: rotate(16deg); } }
@keyframes sandy-jab { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(5px) rotate(-2deg); } }
@keyframes sandy-lean { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(2deg); } }
@keyframes sandy-jabL { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(-5px) rotate(2deg); } }
@keyframes sandy-leanL { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-2deg); } }
@keyframes sandy-jabU { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
@keyframes sandy-rise { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-3px); } }
@keyframes sandy-chin { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg); } }
@keyframes sandy-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sandy-jump { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-18px); } 70% { transform: translateY(0); } }
@keyframes sandy-land { 0%, 65%, 100% { transform: scale(1, 1); } 74% { transform: scale(1.05, .94); } 84% { transform: scale(1, 1); } }
@keyframes sandy-spark2 { 0%, 30% { opacity: 1; } 31%, 60% { opacity: 0; } 61%, 100% { opacity: 1; } }
@keyframes sandy-armsL { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-12deg); } }
@keyframes sandy-armsR { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(12deg); } }
@keyframes sandy-zz { 0% { opacity: 0; transform: translate(-8px, 18px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -10px); } }
@keyframes sandy-tilt { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(4deg); } }
@keyframes sandy-wobble { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes sandy-hold { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-10px); } }
@keyframes sandy-hear { 0% { opacity: 0; transform: translateX(6px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(-4px); } }

/* Still: switched off in her settings, or the computer asks for less motion. */
.sandy.sandy-still *, .sandy.sandy-still .sy-z text { animation: none !important; }
.sandy.sandy-still .sy-drops text, .sandy.sandy-still .sy-z text { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .sandy *, .sandy-mark, .sandy-preview * { animation: none !important; }
  .sandy-wave i { height: 18px; }
  .sy-drops text, .sy-z text { opacity: 1; }
}
@media (max-width: 760px) {
  .sandy, .sandy[data-screen] { right: 10px; left: auto; bottom: 10px; align-items: flex-end; }
  /* In a run tab on a phone the reply box fills the bottom: she waits at the top instead. */
  .sandy[data-screen="run"] { top: 96px; bottom: auto; flex-direction: column-reverse; }
  .sandy-launcher { width: 62px; height: 62px; }
  .sandy-launcher svg { height: 58px; width: auto; }
}

/* ------------------------------------------------------------------ *
 * Agents (/?agents) and one agent's setup (/?agent=<id>): public/agents.js.
 * The cards are the approved preview's (like n8n, not a copy): a tile with
 * its family's colour in a strip at the foot, a square input on the left,
 * round exits on the right, and the AI step's plugs underneath.
 * ------------------------------------------------------------------ */
#agents.flow-screen, #agent.flow-screen { top: 46px; z-index: 19; }
.ag-row.st-ready { border-left-color: var(--ok); }
.ag-row.st-paused { border-left-color: var(--fg-faint); }
.ag-row.st-setup { border-left-color: var(--warn); }
.ag-state.ag-ready { background: #13261d; color: var(--ok); border-color: #24493a; }
.ag-state.ag-paused { background: var(--bg-input); color: var(--fg-dim); border-color: var(--line); }
.ag-runner { background: var(--bg-input); color: var(--fg-dim); border: 1px dashed var(--line); }
.ag-runner.on { background: #13261d; color: var(--ok); border-style: solid; }
.ag-from { background: #1e1a2b; color: #c9a8ff; border-color: #3a3060; }
.ag-runner[data-state="held off"] { color: var(--warn); border-color: var(--warn); }
.ag-run-line { color: var(--fg-dim); }
.runs-agent { margin-right: 6px; background: #1e1a2b; color: #c9a8ff; border-color: #3a3060; font-weight: 400; }

/* The Runner log: one line per row, newest first; a line with detail opens on a click. */
.ag-log-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ag-log-filters input.run-pick { width: 9em; }
.ag-log-filters[hidden], .ag-log[hidden], .ag-secrets[hidden], #ag-filter[hidden] { display: none !important; }
.ag-log { font-size: 12.5px; }
.ag-log-row { padding: 5px 10px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
.ag-log-row.has-detail { cursor: pointer; }
.ag-log-row.has-detail:hover { background: var(--bg-raised); }
.ag-log-row.lv-warn { border-left-color: var(--warn); }
.ag-log-row.lv-error { border-left-color: var(--danger); }
.ag-log-head { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.ag-log-at { font-family: var(--mono, monospace); color: var(--fg-faint); white-space: nowrap; }
.ag-log-lv { font-size: 11px; padding: 0 6px; }
.lv-warn .ag-log-lv { color: var(--warn); }
.lv-error .ag-log-lv { color: var(--danger); }
.ag-log-who { color: var(--fg-dim); white-space: nowrap; max-width: 30%; overflow: hidden; text-overflow: ellipsis; }
.ag-log-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ag-log-run { flex: none; }
.ag-log-detail { margin: 6px 0 2px; padding: 8px; background: var(--bg-input); border-radius: 4px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; }

/* Whether a Git card's sign-in is set up on the server: the chip by its field, a badge on the card. */
.ag-signin { margin-left: auto; font-size: 11px; }
.ag-signin.ok { color: var(--ok); border-color: #24493a; }
.ag-signin.missing { color: var(--danger); border-color: var(--danger); }
.ag-signin.unsaved { color: var(--fg-dim); }
.ag-signin.warn { color: var(--warn); border-color: var(--warn); }
.ag-bdg.signkey { right: auto; left: -8px; }
.ag-bdg.signkey.missing { background: var(--danger); color: #fff; }
.ag-bdg.signkey.unsaved { background: var(--bg-input); color: var(--fg-dim); }
.ag-bdg.signkey.warn { background: var(--warn); color: var(--bg); }
/* the Secrets view */
.ag-secrets { display: flex; flex-direction: column; gap: 10px; }
.ag-sec-strip { display: flex; gap: 12px; align-items: flex-start; padding: 8px 12px; border: 1px solid var(--warn); border-radius: 6px; background: #3a2f18; }
.ag-sec-strip-words { flex: 1; min-width: 0; }
.ag-sec-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.ag-sec-head h3 { margin: 0 0 4px; }
.ag-sec-head p { margin: 0; max-width: 70ch; }
.ag-sec-table code { font-weight: 600; }
.ag-sec-use { display: block; }
.ag-sec-acts { white-space: nowrap; text-align: right; }
.ag-sec-acts .btn + .btn { margin-left: 6px; }
.ag-sec-exp.ok { color: var(--fg); }
.ag-sec-exp.warn { color: var(--warn); border-color: var(--warn); }
.ag-sec-exp.missing { color: var(--danger); border-color: var(--danger); }
.ag-sec-history h4 { margin: 8px 0 4px; }
.ag-sec-notice { font-size: 12px; overflow-wrap: anywhere; }
.ag-sec-notice.refused, .ag-sec-notice.expired { color: var(--danger); }
.ag-sec-notice.expiring { color: var(--warn); }
@media (max-width: 700px) { .ag-sec-head { flex-direction: column; } .ag-sec-table { display: block; overflow-x: auto; } }

.ag-screen .flow-head { flex-wrap: wrap; }
.ag-head-words { display: flex; flex-direction: column; min-width: 0; max-width: 46%; line-height: 1.3; }
.ag-head-words strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ag-summary { font-size: 12px; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ag-summary:empty { display: none; }
.ag-enabled { font-size: 13px; }
.ag-body { flex: 1; min-height: 0; display: flex; }
.ag-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ag-k { display: block; font: 700 9.5px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--fg-dim); }
.ag-ic { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ag-in { box-sizing: border-box; width: 100%; padding: 6px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg-input); color: var(--fg); font: inherit; font-size: 13px; }
.ag-in:disabled { opacity: .6; cursor: not-allowed; }
.ag-in.bad { border-color: var(--danger); }
textarea.ag-in { resize: vertical; }

/* the palette */
.ag-palette { flex: none; width: 210px; box-sizing: border-box; padding: 12px 10px; border-right: 1px solid var(--line); background: #10131a; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.ag-search { font-size: 12px; padding: 5px 8px; margin: 2px 0; }
.ag-pal-groups { display: flex; flex-direction: column; gap: 2px; }
.ag-grp { margin-top: 6px; font: 700 9.5px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: #646d84; }
.ag-pal { display: flex; align-items: center; gap: 9px; width: 100%; padding: 4px 6px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--fg); font: inherit; font-size: 12.5px; text-align: left; cursor: grab; }
.ag-pal:hover { background: var(--bg-input); border-color: var(--line); }
.ag-pal.taken { opacity: .45; cursor: default; }
.ag-pal small { display: block; font-size: 10.5px; color: var(--fg-faint); line-height: 1.2; }
.ag-tile { flex: none; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--bg-input); border: 1.5px solid #3a4360; box-sizing: border-box; }
.ag-tile.start { border-radius: 15px 8px 8px 15px; }
.ag-tile.small { width: 28px; height: 28px; }
.ag-tile .ag-ic { width: 17px; height: 17px; }

/* the canvas: a dotted sheet the world pans and zooms over */
.ag-canvas { position: relative; flex: 1; min-height: 0; overflow: hidden; cursor: grab; touch-action: none;
  background-color: var(--bg); background-image: radial-gradient(#1c2130 1px, transparent 1px); background-size: 18px 18px; }
.ag-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.ag-wires { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ag-wire { fill: none; stroke: #6b7590; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.ag-wire.sel { stroke: var(--accent); stroke-width: 3; }
.ag-wire.temp { stroke: var(--accent); stroke-dasharray: 6 5; }
.ag-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.ag-hit:hover { stroke: rgba(110,168,254,.2); }
.ag-plugline { fill: none; stroke: #8a7ac8; stroke-width: 1.6; stroke-dasharray: 4 4; }

.ag-nd { position: absolute; box-sizing: border-box; border-radius: 13px; background: linear-gradient(180deg, #1d2230, #161a24); border: 1.5px solid #3a4360;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px -10px rgba(0,0,0,.9); cursor: move; }
.ag-nd::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1.5px; height: 3px; border-radius: 3px 3px 0 0; background: var(--fam, #3a4360); }
.ag-nd.start { border-radius: 30px 13px 13px 30px; }
.ag-nd.start::after { inset: -1.5px; height: auto; background: none; border-radius: inherit; border-bottom: 3px solid var(--fam, #3a4360); clip-path: inset(calc(100% - 9px) 11.5px 0 11.5px); pointer-events: none; } /* the start card is rounded on the left: its colour bar follows the curve */
.ag-nd.sel, .ag-ai.sel { box-shadow: 0 0 0 3px rgba(110,168,254,.55), 0 10px 22px -10px rgba(0,0,0,.9); }
.ag-ai { position: absolute; box-sizing: border-box; border-radius: 13px; background: linear-gradient(180deg, #221d33, #181524); border: 1.5px solid #8a7ac8;
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.9); padding: 9px 10px 0; cursor: move; }
.ag-ai-head { display: flex; align-items: center; gap: 8px; color: #c9a8ff; }
.ag-ai-head .ag-ic { width: 24px; height: 24px; flex: none; }
.ag-ai-words { min-width: 0; line-height: 1.2; }
.ag-ai-title { font-size: 12.5px; font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-ai-sub { font-size: 10.5px; color: #9cc3ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-plugs { position: absolute; left: 0; right: 0; bottom: 6px; height: 11px; font: 600 9px var(--mono); color: #a99be0; letter-spacing: .04em; }
.ag-plugs span { position: absolute; }
.ag-plugs.top { top: -15px; bottom: auto; color: #f0a6ca; } /* the IN and OUT data contract plugs, on the AI step's top edge */
.ag-pi { position: absolute; width: 8px; height: 12px; border-radius: 2px; background: #4a5470; left: -5px; top: calc(50% - 6px); }
.ag-ai .ag-pi { background: var(--accent); }
.ag-po { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid #6b7590; right: -7px; box-sizing: content-box; cursor: crosshair; }
.ag-po:hover { border-color: var(--accent); background: var(--accent-dim); }
.ag-lbl { position: absolute; width: 140px; text-align: center; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--fg); pointer-events: none; overflow-wrap: anywhere; }
.ag-lbl i { display: block; margin-top: 2px; font: normal 10.5px/1.3 var(--mono); color: var(--warn); }
.ag-plab { position: absolute; font-size: 10.5px; color: #9aa3b8; white-space: nowrap; pointer-events: none; }
.ag-bolt { position: absolute; width: 18px; height: 18px; color: var(--ok); fill: var(--ok); stroke-width: 1; pointer-events: none; }
.ag-bdg { position: absolute; right: -8px; top: -8px; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); box-sizing: content-box; }
.ag-bdg .ag-ic { width: 10px; height: 10px; stroke-width: 3; }
.ag-bdg.lock { background: #3a4360; color: var(--fg); }
.ag-bdg.swap { background: var(--accent-dim); color: #dbe7ff; }
.ag-dia { position: absolute; width: 9px; height: 9px; transform: rotate(45deg); background: #13161e; border: 1.5px solid #8a7ac8; pointer-events: none; }
.ag-subn { position: absolute; box-sizing: border-box; width: 42px; height: 42px; border-radius: 50%; background: #161a24; border: 1.5px solid #3a4360; color: #c9cfdc;
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ag-subn.model { border-color: #c9a8ff; color: #c9a8ff; }
.ag-subn .ag-ic { width: 19px; height: 19px; }
.ag-subn:hover { border-color: var(--accent); }
.ag-subn.sel { box-shadow: 0 0 0 3px rgba(110,168,254,.55); }
.ag-subn.loose { opacity: .6; border-style: dashed; } /* a plug-in card plugged into nothing */
.ag-subn.empty { padding: 0; border-style: dashed; border-color: #4a5470; color: var(--fg-faint); font: inherit; }
.ag-subn.empty .ag-ic { width: 15px; height: 15px; }
.ag-subn .ag-bdg { position: absolute; right: -5px; top: -5px; }
.ag-plugged { display: flex; flex-wrap: wrap; gap: 5px; }
.ag-plugged .chip { cursor: pointer; }
.ag-multi { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; box-sizing: border-box; width: 100%; padding: 4px 6px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg-input); }
.ag-multi:focus-within { border-color: var(--accent); }
.ag-multi .ag-multi-in { flex: 1; min-width: 90px; width: auto; padding: 2px 3px; border: 0; background: none; }
.ag-multi .ag-multi-in:focus { outline: none; }
.ag-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 8px; border-radius: 999px; background: rgba(110,168,254,.14); color: var(--fg); font-size: 12px; }
.ag-pill-x { padding: 0 3px; border: 0; background: none; color: var(--fg-faint); font-size: 10px; line-height: 1; cursor: pointer; }
.ag-pill-x:hover { color: var(--fg); }
.ag-slbl { position: absolute; width: 78px; text-align: center; font-size: 10.5px; line-height: 1.3; color: #c9cfdc; pointer-events: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ag-slbl b { display: block; font: 700 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 1px; }
.ag-stub { position: absolute; width: 22px; height: 22px; padding: 0; border-radius: 7px; border: 1px dashed #4a5470; background: #13161e; color: #c9cfdc; font-size: 14px; line-height: 1; cursor: pointer; }
.ag-stub:hover { border-color: var(--accent); color: var(--fg); }
.ag-frame { position: absolute; box-sizing: border-box; border-radius: 12px; padding: 8px 12px; border: 1px solid; }
.ag-frame.sel { box-shadow: 0 0 0 2px rgba(110,168,254,.45); }
.ag-frame-name { cursor: move; }
.ag-resize { position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; cursor: nwse-resize; border-right: 2px solid #4a5470; border-bottom: 2px solid #4a5470; border-radius: 0 0 6px 0; box-sizing: border-box; }
.ag-sticky { position: absolute; box-sizing: border-box; border-radius: 10px; padding: 10px 12px; font-size: 12px; line-height: 1.45; border: 1px dashed; cursor: move; }
.ag-sticky.sel { box-shadow: 0 0 0 2px rgba(110,168,254,.45); }
.ag-sticky-text { white-space: pre-wrap; overflow-wrap: anywhere; color: #d4c48a; }
.ag-empty { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: center; color: var(--fg-dim); max-width: 340px; }
.ag-problems { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 2; padding: 8px 12px; border-radius: var(--radius); border: 1px solid #6d3238; background: #2a1517; color: #f3b9bd; font-size: 12.5px; }
.ag-problems ul { margin: 4px 0 0; padding-left: 18px; }
.ag-problems-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ag-controls { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; }
.ag-ctlb { width: 30px; height: 30px; padding: 0; border-radius: 7px; border: 1px solid var(--line); background: #13161e; color: #c9cfdc; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ag-ctlb:hover { border-color: #3a5f9e; color: var(--fg); }
.ag-ctlb .ag-ic { width: 15px; height: 15px; }
.ag-run-pills { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 8px; }
.ag-run-pills .btn { border-radius: 999px; padding: 6px 16px; }
.ag-menu { position: fixed; z-index: 60; width: 210px; max-height: 60vh; overflow-y: auto; padding: 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-raised); box-shadow: 0 12px 30px rgba(0,0,0,.6); }
.ag-menu .ag-pal { cursor: pointer; }

/* the rules for every run */
.ag-rules { flex: none; border-top: 1px solid var(--line); background: #10131a; padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.ag-rules-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ag-rules-fold { width: 24px; height: 24px; }
.ag-rules.folded { padding-top: 6px; padding-bottom: 6px; }
.ag-rules.folded .ag-ctl-grid { display: none; }
.ag-ctl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.ag-ctl { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: #13161e; min-width: 0; }
.ag-ctl b { font-size: 12.5px; }
.ag-ctl span { font-size: 11.5px; color: var(--fg-dim); }
.ag-ctl .ag-in { padding: 4px 7px; font-size: 12.5px; }

/* the inspector */
.ag-inspector { flex: none; width: 330px; box-sizing: border-box; padding: 14px; border-left: 1px solid var(--line); background: var(--bg-raised); display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.ag-ins-head { display: flex; align-items: center; gap: 8px; }
.ag-ins-head .ag-k { color: #c9a8ff; }
.ag-help { margin: 0; font-size: 12.5px; color: var(--fg-dim); }
.ag-f { display: flex; flex-direction: column; gap: 4px; }
.ag-f label, .ag-f-row > label { font-size: 11.5px; color: #9aa3b8; }
.ag-f-row { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.ag-f-row > label.ag-check { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--fg); cursor: pointer; }
.ag-check input { margin-top: 3px; }
.ag-note { font-size: 11px; color: #8a93a8; }
.ag-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ag-lockbtn { flex: none; width: 22px; height: 22px; padding: 0; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--fg-faint); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ag-lockbtn:hover { border-color: var(--line); color: var(--fg); }
.ag-lockbtn.on { color: var(--warn); }
.ag-lockbtn .ag-ic { width: 13px; height: 13px; }
.ag-ins-foot { margin-top: 4px; }
.ag-card-list { margin: 0; padding-left: 20px; font-size: 12.5px; }
.ag-cardlink { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
.ag-cardlink:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .ag-body { flex-direction: column; overflow-y: auto; }
  .ag-palette { width: auto; max-height: 160px; border-right: 0; border-bottom: 1px solid var(--line); }
  .ag-pal-groups { flex-direction: row; flex-wrap: wrap; }
  .ag-pal { width: auto; }
  .ag-grp { display: none; }
  .ag-main { flex: none; height: 520px; }
  .ag-inspector { width: auto; border-left: 0; border-top: 1px solid var(--line); }
  .ag-head-words { max-width: 100%; }
}

/* Debug an agent by hand, one card at a time (agent-debug.js, run w_d1d9a724). */
.ag-dbg { flex: none; display: flex; flex-direction: column; max-height: 42vh; min-height: 0; border-top: 2px solid var(--accent); background: #10131a; }
.ag-dbg-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 14px; border-bottom: 1px solid var(--line); }
.ag-dbg-lbl { font-weight: 600; color: var(--accent); margin-right: 4px; }
.ag-dbg-sp { margin-left: auto; color: var(--fg-dim); font-size: 12px; }
.ag-dbg-writes { color: var(--ok); border-color: #2b5a44; }
.ag-dbg-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); }
.ag-dbg-grid.tab { grid-template-columns: 240px minmax(0, 1fr); }
.ag-dbg-cards { overflow: auto; padding: 6px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.ag-dbg-card { display: grid; grid-template-columns: 18px 1fr; column-gap: 6px; text-align: left; padding: 5px 8px; border: 0; border-radius: 5px;
  background: transparent; color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; }
.ag-dbg-card:hover { background: var(--bg-raised); }
.ag-dbg-card.sel { background: var(--accent-dim); }
.ag-dbg-card small { grid-column: 2; color: var(--fg-faint); font-size: 11.5px; }
.ag-dbg-card.st-waiting .ag-dbg-name, .ag-dbg-card.st-skipped .ag-dbg-name { color: var(--fg-faint); }
.ag-dbg-card.st-done .ag-dbg-mark { color: var(--ok); }
.ag-dbg-card.st-next .ag-dbg-mark, .ag-dbg-card.st-running .ag-dbg-mark { color: var(--accent); }
.ag-dbg-card.st-failed .ag-dbg-mark { color: var(--danger); }
.ag-dbg-data { overflow: auto; padding: 8px 10px; border-right: 1px solid var(--line); min-width: 0; }
.ag-dbg-grid.tab .ag-dbg-data { border-right: 0; }
.ag-dbg-seg { margin-bottom: 8px; }
.ag-dbg-items { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.ag-dbg-it { font: 12px var(--mono); padding: 2px 7px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--fg-dim); cursor: pointer; }
.ag-dbg-it.on { border-color: var(--accent); color: var(--accent); }
.ag-dbg-json { margin: 0; padding: 8px; background: var(--bg-input); border: 1px solid var(--line); border-radius: 6px; font: 12px/1.45 var(--mono);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.ag-dbg-err, .ag-dbg-warn { padding: 5px 8px; margin-bottom: 4px; border-left: 3px solid var(--danger); background: var(--bg-raised); font-size: 13px; }
.ag-dbg-warn { border-left-color: var(--warn); }
.ag-dbg-poll { margin: 0; border-bottom: 1px solid var(--line); }
.ag-dbg-loadfail .btn { margin-left: 6px; }
.ag-dbg-gone .ag-dbg-hint { margin-top: 6px; color: var(--fg-dim); font-size: 12px; }
.ag-dbg-copytext { display: block; width: 100%; min-height: 120px; box-sizing: border-box; font: 12px var(--mono, monospace); }
.ag-dbg-log { overflow: auto; min-width: 0; font-size: 12.5px; }
.ag-dbg-data .ag-dbg-log { margin: 0 -10px; }
/* The chart: each card's state while debugging. */
.ag-dbg-bdg { position: absolute; top: -11px; right: -8px; z-index: 2; white-space: nowrap; font: 600 10.5px var(--sans); padding: 1px 7px; border-radius: 10px;
  background: var(--bg-input); border: 1px solid var(--line); color: var(--fg-dim); pointer-events: none; }
.ag-dbg-bdg.st-done { color: var(--ok); border-color: var(--ok); }
.ag-dbg-bdg.st-next, .ag-dbg-bdg.st-running { color: var(--accent); border-color: var(--accent); }
.ag-dbg-bdg.st-failed { color: var(--danger); border-color: var(--danger); }
.ag-nd.dbg-done, .ag-ai.dbg-done { border-color: var(--ok) !important; }
.ag-nd.dbg-failed, .ag-ai.dbg-failed { border-color: var(--danger) !important; }
.ag-nd.dbg-next, .ag-ai.dbg-next, .ag-nd.dbg-running, .ag-ai.dbg-running { box-shadow: 0 0 0 3px rgba(110,168,254,.45); }
.ag-nd.dbg-waiting, .ag-ai.dbg-waiting, .ag-nd.dbg-skipped, .ag-ai.dbg-skipped { opacity: .62; }
/* The own tab: /?agentdebug=<agent>, only the debug section. */
.agdbg-screen { z-index: 60; }
.agdbg-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.agdbg-body .ag-dbg-bar { background: #10131a; }